Create Flappy Bird Game in 3 Days – Day 1, Part 1

Why are some of the images in this post went missing?

This is a tutorial to show you how to create Flappy Bird Game in 3 Days.

Flappy Bird has taken the world by surprise in the early of 2014. Some love it some hate it. Recently the creator announced the game will be removed from the App Store, so I think why not create a tutorial on how to create a Flappy Bird game, in my case, it is Fatty Bird game that I created in 3 days. You can check out the game in iTunes.

This tutorial is for beginner who just started to make game or app for App Store, and I’ll explain in every detail each of the step so do have patience! I’ve breakdown the workflow into 8 hours so it’s easy for you to follow.

You must have at least little knowledge how to operate around the Photoshop and Illustrator.

This is a first part of Day 1 of the 3 Days. You can check out this post for later part.

This is first part of the 3 Days series. You can check the rest of the post here:

1. Day 1, Part 2 : Design Bird, Obstacle Using Illustrator
2. Day 1, Part 3 : Design Game Logo, Button, Medal, App Icon, Export Asset
3. Day 2, Part 1 : New Project, Menu Scene, Game Scene, Land Animation Using SpriteKit
4. Day 2, Part 2 : Obstacle, Score, Button, Scoreboard, Medal
5. Day 3 : iPhone5 & iPad, iAd, Sound, Bird Refined Physics

Hour 1 : Sketch Your Idea on Paper

Before everything start, you must have an idea what the game gonna look like. We knew we were going to create a game just like the Flappy Bird, but let’s just build a game that is very original and we are not going to copy everything from the game.

In this hour, we will design our character and background. So take out a piece of paper and start sketching whatever you have in mind.

Character

You can go very creative and free at this step. For beginner, this might take a while since this is your first time in designing a game character. Here are some few tips:

• Refer to real object. You can Google for image that your character would try to imitate. For my case, my character going to be a fat bird, so I just search for keyword like bird, fat bird, cute bird, cartoon bird etc
• Try to emphasize the character’s trait. You can choose the eye, the wings or maybe the beak. For my case, I try to make the tummy as big as possible without losing much detail on the face.

Here’s my sketches.

Background

For this, you can have the same element as the original game, or create your own. In Fatty Bird, I decided to have the Super Mario like background, so I get some Super Mario game play screenshot and get inspiration from there.

Super Mario Game Play

I thought through what should be the obstacle going to be like, and here’s my sketches after 10 minutes.

If you having hard time to come out with anything, that’s probably is your first time doing this kind of stuff.

Don’t worry, as you keep on doing this overtime, you’ll get better in no time. I build Repeat to help me build up the skill and keep track my progress. You should check it out.

Hour 2 : Plan Your Art and Photoshop Template

Before we begin, you need to understand what is Retina Display in iOS device.

What is Retina Display

The difference between a non-retina display device and a retina display device is the retina display can show double the pixels. So (in landscape iPhone 4)  instead of the display size being 480×320 px as it is on a non-retina iPhone, it’s 960×640 px on a retina display. The same is apply to iPad as well.

What we need to do is just supply the image file in non-retina (etc background.png) and image file in retina (background@2x.png) and the device will know which to load. Simple right?

Design Plan

Fatty Bird is a universal app, which means the same app will be running on iPhone and iPad, so our design will target for this two devices.

The app will build by using the new SpriteKit framework later, which is only available on iOS7, so we can omit out the old devices that are not supported.

Here’s the summary of the devices we are going to target:

• iPhone 4, 4S (Portrait: 640×960, Retina Only)
• iPhone 5, 5C, 5S (Portrait: 640×1136:, Retina Only)
• iPad 1, 2, Mini (Portrait: 768×1024, Non Retina)
• iPad Retina (Portrait: 1536×2048, Retina)

There is still one thing we need to sort out in order to design an universal app, on how the scaling between iPhone4, iPhone5 and iPad going to work out.

Scaling

If you haven’t notice, this 3 devices does not use make up by the same aspect ratio. iPhone4 : 1.5 ratio, iPhone5 : 1.77 and iPad : 1.33 ratio.

While most of the UIKit based app we can make use of the Interface Builder of the XCode to design for both iPhone and iPad screen, for the game it’s not so simple and straight forward. You have to decide:

• Is the game element like character, block, background, button going to stay the same size or scale proportionally?
• Is the game allow zooming?
• Do we handle both portrait and horizontal orientation?

For this game, I’m going to design the app in iPad template and scale it down half to fit it into iPhone and will support portrait orientation only.

Now you might think that iPad screen size and iPhone (3.5 or 4 inch) does not fit into each other even we scale it down to half. Please take a look below for screen layout plan that I mentioned.

The game area is where we are going to place our character, button, score, block etc etc. For iPad and iPhone5, you can see that the game area is smaller than the screen area. This will make the game element not fully utilize all the screen space, but I think it’s still acceptable as long as we plan our art carefully on the next hour.

For our game background, we’re going to stretch all the way to utilize all the screen space and I’ll show you how to do it on coding later.

Conclusion

To summarize, here’s what we are going to do:

1. Design the app in the iPad template and make sure the element is all within the game area. You can use full screen area for background element.
2. Once you’re done, copy all the game element and paste into the iPhone5 template. Scale all the element to half and you will see your element fit nicely in the game area.
3. For background, you can either recreate it or scale it to fit the full screen space of the iPhone5.
4. For iPhone4 template, you only need to recreate the background image that will fit nicely on the phone. The rest of the graphic element is the same as iPhone5.

For starter, here’s the link to the psd file that I use for template. Each of this files has few screens that is scale to retina version of the device, so when you design on this template, you can make sure that the image asset will turn exactly the same size on the device and simulator later. The file is slice correctly so you can export it out easily and review it on your device.

Hour 3 : Design Background

Before you start, you can check this tutorial for general idea on how to design app in Photoshop.

Open the iPad template file in Photoshop. You will see two screen rectangle with a smaller grey rectangle inside. This is the game area that we’ve discuss in the previous hour.

For now, hide the text layer and grey layer.

Background Color

Pick the ‘Rectangle Tool’ and draw a rectangle to cover the top white rectangle. You can draw the rectangle beyond the white rectangle. Then right hand click on the new layer and select ‘Blending Options’ > ‘Gradent Overlay’, click ‘Gradient’ and pick the gradient like below.

I pick the color base on the Super Mario background cloud color. You can choose your own. In my case it’s #6897f9 to #a2cff9. Once you are done, select the ‘Reverse’ next to the ‘Gradient’ to make the darker blue on top. Click OK to return back to layer.

If the background layer is not on top of original white background layer (Rectangle 1) in the “Layer” panel, move the layer to just above the background layer. Next, right hand click on the layer and select ‘Create Clipping Mask’ to clip the blue background to the layer below. Now your layer fit nicely the background.

I want the background to be more cartoonish and retro, so I’m gonna make the gradient to be increment step instead of smooth transition. Right click the layer and select ‘Rasterize Layer Style’, then go to menu ‘Image’ > ‘Adjustment’ > ‘Posterize’. Change the ‘Levels’ to 50. If you pick other color, you may need to play with different value.

Hill

Let’s build some hill. Pick a ‘Rounded Rectangle Tool’ and set ‘Radius’ to 150px at the toolbar. Draw your first hill like below and name the layer ‘Big Hill’. Go to ‘Blending Options’ > ‘Stroke’ and set stroke size to 6.

One thing to keep in mind that whenever we specify width, be it stroke size, shape width/height etc, make sure the value is in even number. By the time we transfer our design to iPhone template and scale it to half, the value will stay as a whole number by default, otherwise Photoshop will just round up the value and your design will looks not sharp and unpolished.

Next I’m going to use a pattern to fill up the hill. You can create one in Photoshop, or create it online, or you can use mine for now.

If you use create online or use mine stripe, open the image in Photoshop and go to menu ‘Edit’ > ‘Define Pattern…’ and put in some useful name. Now you are ready to load in your design.

Go to ‘Blending Options’ > ‘Pattern Overlay’ and select your newly defined pattern. The pattern looks small so just scale it up to 200%.

Let’s add some highlight and shadow on the hill. Duplicate the ‘Big Hill’ layer and name it ‘Highlight’. Hide the ‘Big Hill’ layer. Right click > ‘Clear Layer Style’ to remove all style. Go to ‘Blending Options’ > ‘Color Overlay’ and pick white color.

Select ‘Path Selection Tool’ and while the ‘Hightlight’ layer still highlighted, click inside the highlight layer. You are now selecting the path of the hill.

You are going to duplicate the path on the same layer. While the path is still selected, press ‘Ctrl + C’ and ‘Ctrl + V’. You won’t see the duplicated path since the new path is on top of old one. Press right arrow or ‘Shift + Right’ to quickly move the new path to right.

While the layer still selected and the ‘Path Selection Tool’ is active, go to toolbar > ‘Path Operations’ > ‘Subtract Front Shape’.

Set the ‘Highlight’ layer opacity to 30% and unhide the ‘Big Hill’ layer. Now you have the hill with a nice highlight on top of it.

Do the same steps for the shadow of the hill, except you should use black color in ‘Blending Options’ > ‘Color Overlay’.

You need two more hill. Group the 3 layer (Big Hill, Highlight and Shadw) into new group and name it ‘Big Hill 1′, then duplicate the group twice and name it ‘Big Hill 2′ and ‘Big Hill 3′. Move the new group around and scale it to see what work best for you. Here’s mine.

Now you are going to make few small hills. Use the same technique as the big hill. Just pick a color and pattern to see what suits you.

Land

Use the ‘Rectangle Tool’ and draw a rectangle at the bottom of the screen. Gradient the rectangle using the same technique as above, except this time choose #aa7415 and #f4c97f.

As we are going to add ads banner on the bottom of the screen, make sure the height of the land is sufficient to fit the ads.

So for iPad portrait, the height should be 66px for non retina, and 132px for retina. For iPhone, it’s 100px for retina.

To make the land design consistent with the background blue color, rasterize the land layer and go to ‘Image’> ‘Adjustments’ > ‘Posterize…’. Select a value 25.

Next, draw a thin rectangle just above the land to make a top surface. In ‘Blending Options’,

• Stroke : Set Stroke Size to 4px
• Gradient Overlay : #ca6e21 to ffb97b, Blend Mode to ‘Color’
• Pattern Overlay : Select the previous created stripe pattern, and scale it up to 600%

Now all the layer is flowing out of the screen boundary, we are going to clip it. Select all the hill an land, right click ‘Convert to Smart Object’. Now all your layer is collapsed into single layer, but don’t worry, your individual layer is still in place.

You can edit the individual hill or land by double click on the Smart Object layer, and a new window will be opened. You can safely edit in the new window and whatever you save in the new window will be reflected on the original window.

Now select the Smart Object layer and name it ‘Hill and Land’. Make sure the layer is just above the blue background. Right click and ‘Create Clipping Mask’ and now all your layer are within the boundary.

Floating Cloud

Next you are going to create some cloud. Select ‘Ellipse Tool’ and draw your first ellipse. While the new layer still selected, go to toolbar and ‘Path Operations’ > ‘Combine Shapes’.

Now all your subsequent ellipse drawn will be combine to the same layer. Make some big ellipse, some small and play around with the position, size and scale to make the cloud shape.

Once you are done, go to ‘Blending Options’ > ‘Color Overlay’ and select color #f1f4f9, then ‘Stroke’ for setting the size to 6px.

Go ahead and clip the cloud to the background. Here’s our design at the end of this hour.

That’s it for this hour. You can check the next part here.

Subscribe to the newsletter below for more great content on design and building app.

The post Create Flappy Bird Game in 3 Days – Day 1, Part 1 appeared first on Yoke Harn.