Why are some of the images in this post went missing?
This is a final part of Day 1 of the 3 Days series on how to create Flappy Bird game. Check out the previous post here.
Hour 6 : Design Logo, Font, Button and Coin
In this hour, we are going to create the game logo, button, scoreboard and coin.
Create a new document in Illustrator, use “Painbrush Tool” and start drawing the logo. You can draw any shape of text you want.
To make the “A” character to appear as a single path, you need to make it to component path. Meatball the outer path and the hole of the “A”, and go to “Object” > “Compound Path” > “Make”. You can also use a shortcut key of “Ctrl + 8″. Go ahead and do it for “B”, “R” and “D”.
Select a fill color and a stroke width you like, then rearrange the character so that the left stay above the right one.
Next, duplicate the layer, then go to “Windows” > “Pathfinder” and select “Unite” to combine all the character. In “Appearance” panel, go to “Add New Effect” > “Path” > “Offset Path”, and give a offset value of 10. Once you’re done set the fill color and stroke width to your choice. Move the new layer to behind of the character.
Next, we are going to add some highlight on the character. Use “Paintbrush Tool”, and set draw some small stroke on the upper left of the corner of each of the character. Set the color to white. Adjust the layer position so it won’t cover the left character.
One final touch to add. Select the upmost layer, then add shadow by “Add New Effect” > “Stylize” > “Drop Shadow”, and set the X offset 7px and Y offset 7px.
Once you’re done, copy and paste as “Smart Object” into the Photoshop.
Repeat the same technique for “Game Over” logo.
In Photoshop, draw a rectangle of size 400×112, and set the “Blending Options” > “Color Overlay” color to #8c2d1a. Next, create another rectangle of size 384×96, and set the color to #d54427, and stroke color to white. Select the two rectangle and center align both vertical and horizontal.
We are going to use custom font that are more suitable for game. There’s a some website provide font that are free to use. Here are some of my favourite:
For this game, I’m going to use Press Start 2P from http://www.fontspace.com/codeman38/press-start-2p. Download and install it at your operating system. You will most likely need to restart your Photoshop before you can use, so go ahead save your work first and restart!
Once you’re back, select the “Type Tool”, and type “Start” in the middle of the box. While your text is selected, go to “Windows” > “Character” window, select the font “Press Start 2P”, and set the font size to 36px, and set the color to white.
Next, duplicate the text layer, change the text color to #882b19, and move the layer away from the original “Start” text towards bottom right to create the shadow effect. Here’s what you have after you’re done.
Duplicate the button and rename the text for “Menu”, “Rate” and “Replay” button.
Scoreboard and Coin
You are going to design some scoreboard that will hold the score, best score and medal.
Draw a rectangle with a size of 750×512, and set the follwoing:
- Stroke : Width 6px, Color #9d846a
- Color Overlay : Color #ecc69f
Next, create smaller rectangle with a size of 708×460, and set the following:
- Bevel & Emboss : Inner Bevel
- Color Overlay : Color ##ecc69f
Center align both rectangle. You will get the following.
Now add some text around the board, using the same technique as the button text to add shadow. For score, increase the font size to 50px and set the stroke to 6px. For larger score on top of the screen, set the font size to 100px and stroke to 12px.
To create gold coin, draw a perfect circle by using the “Ellipse Tool” of size 176×176. Set the stroke to 6px and do a gradient of the following:
(Tips: You can load the picture above in Photoshop and use “Eyedropper Tool” to find out the color I use)
Next, create a smaller circle of size 144×144, and set the same gradient, only this time with different angle for the gradient. Play around with the angle of both circle to give you a better outcome. Here’s the coin design so far.
Next, we are going to imprint the bird logo inside the coin. Duplicate the bird smart layer, then right click “Rasterize Layer”. Resize the new layer so that the bird fit inside the coin.
Go to “Blending Option” and set the following:
- Gradient Overlay : Use the same gradient value as the gold coin
- Drop Shadow : Opacity 30%, Distance 1px, Size 1px
You just finish design the gold coin. Repeat the same steps for silver and bronze coin.
At the end of this hour, you have complete all the game elements. Here’s what you achieve so far.
We’re still missing the game instruction that’ll display the moment the game is loaded, and will dismiss when we tap. I’ll leave it for you to design it.
That’s it for this hour.
Hour 7 : Copy your design to iPhone5 template, create App Icon
Creating Background for iPhone
You are going to to test your artwork in iPhone5 template to see if it’s fitting within the game area.
Open the iPhone5 template you download in the previous hour in Photoshop.
Now, select all your artwork you just created in iPad template, right click “Duplicate Layer…” and select the destination document to iPhone5 template.
Your artwork appear oversize. While all the layer still selected, press “Ctrl + T” and change the width and height to 50% on the toolbar, and press “Ctrl + Enter”.
Move all the layer to “screen1″ to below the “iPhone 3.5 inch Ratio”, but above the “wallpaper”, and move the layer to on top of the top left of the first screen.
Select the blue background, hill and cloud, right click “Create Clipping Mask” to the “wallpaper”. Unhide the “iPhone 3.5 inch ratio” text.
Most of your artwork like character, button and scoreboard fit nicely within the grey box, except the background, the hill and the ground.
Remember in the Hour 2 : Plan Your Artwork from the previous post, we need to have the background stretch to the entire screen? Stretch the blue background image to fit the entire screen nicely. Then move the ground and hill to the bottom of the screen and adjust the cloud position to stay above the screen.
That’s it. We already finish our mock in iPhone5. Easy isn’t it?
You might notice that the button and font stroke width still remain the same as the iPad version and didn’t scale down. You don’t have to worry because the primary purpose of this steps is to create a fitting background with your game element as visual aid. I’m going to show you how you can export your artwork properly to use in different devices in the next hour.
Now go ahead to do the same thing to the iPhone4s template as well since our game is playable at the device.
Now that we still have our Photoshop open, why don’t create an app icon as well?
For your info, we need to have some icons in the below size:
- Home Screen : iPhone Retina 120 x 120 px
- Home Screen : iPhone 60 x 60 px
- Home Screen : iPad Retina 152 x 152 px
- Home Screen : iPad 76 x 76 px
- App Store : Retina 1024 x 1024 px
- App Store : 512 x 512 px
- Spotlight Search Result : Retina 80 x 80 px
- Spotlight Search Result : 40 x 40 px
- Setting : Retina 58 x 58 px
- Setting : 29 x 29 px
That’s A LOT icons to create!
Open the file you just downloaded in Photoshop, here’s what you will see in the “Layer” panel.
It’s a smart object, which mean whatever you change on this layer will be reflected to other area as well. Double click the “Edit me and save” layer, and you start draw you icon. You can do whatever you like on the App Icon. Here’s mine after I’m done.
Next you are going to export the icon into different size that the XCode and iTunes can use. Go to menu “Widnow” > “Actions” and select the “Icon Export [Squared]”. Run the “Play Selection” on the bottom of the panel to generate the icon.
Here’s the file you will get. That’s it for this hour.
Hour 8 : Export Image to be use in XCode
At this hour you will need to generate all the image that will be use in XCode later.
Since we are going to SpriteKit to build our app, we will make use of the Texture Atlas to help us organize our artworks. Create a folder structure like below, starting with “TextureAtlases” folder.
Here’s some explanation of each folder will store
- iPad > image-ipad.atlas : Store all the iPad (Retina and non-retina) artwork
- iPad > bignumber-ipad.atlas : Store the number image (Retina and non-retina) artwork. This is use in game score on top of screen
- iPad > smallnumber-ipad.atlas : Store the number image (Retina and non-retina) artwork. This is use in scoreboard score
- iPhone > image.atlas : Store all the iPhone (3.5 inch and 4 inch retina only) artwork
- iPhone > bignumber.atlas : Store the number image (Retina) artwork. This is use in game score on top of screen
- iPhone > smallnumber.atlas : Store the number image (Retina) artwork. This is use in scoreboard score
- iPhone5 > image-568.atlas : Store the iPhone 5 (4 inch retina) background artwork only
We only store the background image in iPhone5 > image-568.atlas, that’s because the rest of the artwork is exactly the same as the iPhone folder there. I’ll show you how to handle in code later.
Once you created the folder, go to your Photoshop with the iPad template open, let’s first export the Start Button image.
Select the button (2 box layer and 1 text layer), right click “Duplicate Layer…” and select destination document to “New”. Click OK.
Your button in the middle with alot of blank space around. Go to menu “Image” > “Trim…”, make sure the “Trim Away” is checking all Top, Bottom, Left and Right. Click OK.
Go and save the file as “email@example.com” in the iPad > image-ipad.atlas folder. The “@2x” in the file name indicate the image is retina version, and iPad retina version will load this file instead.
To create the image for non-retina version, go to menu “Image” > “Image Size” and set the width/height to half the value.
You will notice that this will scale the stroke width to half as well. That’s why you need to set the stroke value to even when you design in iPad template, so during this step, the reduced width is still a whole number and looks sharp and clear.
Here’s what you have so far after you save the file as “startbutton.png”.
Repeat for the rest of the button. You can undo “Start Button” to revert back to retina size, change the text, save retina, resize to half, save non-retina.
For background, you need to separate the land and the rest of the background as two file, as the land will be be animated to move indefinitely.
For the bird, we need to save each for different wing position.
For obstacle, we need to have a long block consist of multiple individual obstacle. In XCode later, I’m going to show you how we will use this image and move up and down to create the dynamic block. For this game, I’m putting in 8 block as one long block.
Save the rest of the artwork. Here’s what you will have in the iPad > image-ipad.atlas.
And this is iPad > bignumber-ipad.atlas and iPad > smallnumber-ipad.atlas (same file name, but different size).
For iPhone > image.atlas, bignumber.atlas and smallnumber.atlas, you can copy the non-retina artwork of iPad respective directory and copy over, since the non-retina version of iPad artwork is the same size as the retina version of iPhone artwork. Once you copy, append the file name with “@2x”. Since we are not support device with older version due to iOS7 limitation, we don’t need to have the non-retina artwork.
You can’t use the background.png from iPad, since it’s not in proportion. Save the background from the iPhone4s template you created in previous hour.
For iPhone5 > image-568.atlas, you just need the background from the iPhone5 template. Here’s what it is looks like in the folder.
That’s it for today. You have just completed the artwork that is ready to be use in the coding later. Check the coding tutorial here.
Let me know if you have any comment on this tutorial.