Why are some of the images in this post went missing?
This is a second part of Day 1 of the 3 Days series on how to create Flappy Bird Game. You can check out the previous post here.
Hour 4 : Design Obstacle
To design obstacle, I’ll be using Illustrator, for Illustrator offer few advantages:
- It’s vector, which means it will stay clear and sharp even when I transfer from iPad template to iPhone template and scale it down later
- The obstacle is harder to perform in Photoshop since it has some detail that Illustrator can easily achieve
Open your Illustrator, create a new document. Before you continue, make sure on the menu “View” > “Smart Guides” is turn on.
Pick a rectangle tool, hold down shift “Alt” and click anywhere in the canvas. Set the width and height of the rectangle to 200px.
Now, in the “Layers” panel (found on right bottom of the program mostly), expand “Layer 1″ and you will see the a new layer “<Path>”. This is the rectangle layer we just created.
Unlike Photoshop, to select a layer you have to select the little circle on the right of the layer. It’s called “Meatball”, and I have no idea why they name it that way. Go ahead and click it.
We are going to add some strokes and color on it. Once you meatball the layer, go to the “Appearance” panel. You can find it on menu “Windows” > “Appearance”. Set the stroke size to 7px, and the fill color to #ff7c11.
Next we are going to divide the square to few little square to resemble the brick layout. I’m going to show you two way to divide the shape into smaller shape.
While your shape is still meatball, go to “Object” > “Path” > “Split Into Grid”. Select the “Preview” button, and set the rows number to 2. Click OK and now your rectangle is divided into two equal height rectangle.
Now meatball the lower rectangle, and divide it using the same technique, this time set the column number to 2. Now you have your lower rectangle divided into two equal width smaller rectangle
We are going to use different technique to divide the upper rectangle. Select “Line Segment Tool”, and draw two straight line just like the one in below. You will need to try to draw each line from the center of the lower box, and because you have your “Smart Guide” turn on, Illustrator will hint you when you are in the middle of the lower box just like below.
Once your mouse are there, hold down “Shift”, click and drag the line all the way to do the top of the upper rectangle to draw a straight line. It’s better to go all the way beyond the border to make sure it cover all the area of the upper rectangle. Repeat the same thing for the other side.
Now meatball one of your line, go to “Object” > “Path” > “Divide Objects Below”, and now your upper rectangle is divided into two, from where your line segment position. Repeat the same thing for the other line segment.
Next we are going to add little extra detail. Meatball all the five shape by holding “Shift” and meatball one by one, then go to “Appearance” panel and add new effect “3D” > “Extrude & Bevel”.
You will see a new dialog for you to configure your style. You can follow my setting as below.
Click OK. Now we are done with our design in Illustrator. Next, meatball the “Layer1″ layer, copy and paste it into our design from the previous hour in Photoshop. A new dialog appear on how the new object going to be paste. Select “Smart Object” and click OK.
Press “Ctrl” + “Enter” to confirm your placement of the new object. You can resize, reposition the obstacle to wherever you like. I’m going to stick it to the same size and position it into middle of the screen.
Next we are going to add final touch up on the obstacle. Go to “Blending Options” > “Gradient Overlay” and put your setting like below.
You will need to play around with the gradient between the color, opacity and location. Here’s my setting from left to right stops.
- Location 0%, Color Black, Opacity 66%
- Location 20%, Color Black, Opacity 66%
- Location 24%, Color Black, Opacity 33%
- Location 76%, Color Black, Opacity 33%
- Location 80%, Color White, Opacity 100%
- Location 100%, Color White, Opacity 100%
Click OK. Now duplicate the obstacle place it on top and below of the screen to finish it up. That’s the end of hour 4.
Hour 5 : Design Character Fatty Bird
We are going to design our character in Illustrator as well. Before you start, you need to get your character sketches into Illustrator.
You can scan your sketches or take a photo using your smartphone and transfer over to your machine.
Next, create a new document in Illustrator. Go to menu “File” > “Place”, and choose your sketches.
Your photo might too big, too small and out or orientation. Scale it using “Scale Tool”, rotate it using “Rotate Tool” so that your sketch appear on the center of the canvas, the black rectangle.
Name this layer “Sketch”, then set the opacity of the layer to 50% in “Appearance” panel. Next, create a new layer and name it “Draw”. Lock the “Sketch” layer and move it to top of the layer.
Now you are about to start drawing the character. There’s always more than one way to do this. Here are some common one and the advantages:
- Pen Tool : Precise control over anchor and path
- Shape Tool + Path Operation : Easy if your character contain some basic shape like circle, ellipse, rectangle
- Paintbrush Tool : I like to use this one since I have a Wacom Stylus Tablet. The path will be more natural and smooth. You can even have pressure sensitivity to control the stroke width!
For Fatty Bird I’m using the “Paintbrush Tool” since it’s faster. For this tutorial purpose I’ll use “Pen Tool”.
While the “Draw” layer is selected, select the “Pen Tool” and click your first point around the beak. Next, click and drag your second point around the tummy to create a curve.
Don’t worry if you don’t have the exact curve like me. If this is the first time you use “Pen Tool”, you have a lot to learn and like everything else, the more you do, the better you get. Here are some few tips to using “Pen Tool” effectively:
- While you are drawing, you can press “Space” button to move around the last point
- The two element mark by the green circle is call handle. It control the curviness of the curve
- While you are drawing, you can press “Alt” to alter the direction of the handle to make pointy shape like the one we are going to do on the tail mark by the blue circle
- When you are not sure how to make a particular path shape, just continue to next point and path. You can always go back and edit later.
Continue drawing the path along the body of the bird. To close the path, click on the first point you created around the beak.
Here’s my path after few edit. Name the new layer “Body”.
Meatball the “Body” and set stroke width to 7px and fill to #009187.
Next is we are going to draw the eye. You can use “Ellipse Tool” or “Pen Tool”.
I use “Ellipse Tool” to draw the eye outline. You can see the ellipse is using the same stroke and fill setting as the previous one.
We are going to draw the eyelid. While the eyeball layer still meatball, use the “Knife” tool to cut across the eyeball to upper and lower half. Name the upper one “Eyelid” and the lower one “Eyeball”. Set the “Eyeball” fill to white color.
Next we draw a ellipse in the center of the eye to create pupil. Set the stroke to no stroke and fill to black color. Name the layer “Pupil” and place it after “Eyelid”.
Next we will use “Ellipse Tool” to draw the base of the beak, then use “Pen Tool” to complete beak point.
For this two path, set the fill color to # f3ff48, stroke width to 5px, and the stroke option to below.
Next you draw the wing, using the same technique as above. Use brush to draw the leg and the set the width accordingly
Once you are done, hide the “Sketch” layer.
Next, we are going to add some highlight and shadow on around the character. Before you can do that, meatball the “Draw” layer and go to “Object” > “Expand”, then click “OK”. This step basically separate the stroke and fill into two different path, which is important when we try to add highlight and shadow later.
You can double confirm that by checking the “Layer” panel.
To add shadow, use “Painbrush Tool” and draw a shape on the bottom of the body, and set the stroke no stroke and fill to #004f49.
Next, you need to cut the newly drawn shadow to just fit into the body. Meatball the inner body (without the stroke!), and copy and paste in front (Ctrl + F), which will place the new layer directly above the original one. Now you have a duplicated body.
While the new layer still meatball, shift meatball the shadow layer on the top to select both, then in “Windows” > “Pathfinder”, choose “Intersect”. Now the shadow is already crop to stay within the body, but it’s still overlap with the stroke. Move the layer to the “Body” group, below the stroke but above the body.
Repeat the same process for other shadow and highlight to all the appropriate area. Here’s the final work.
You need to draw two more version of wing that will simulate the bird is flying. Hide the previous one and draw the next wing.
Copy your finish work and paste as “Smart Object” in the Photoshop, and you are done for this hour.
Check out the final part of the Day 1 here.
Let me know your thought about this tutorial.
The post Create Flappy Bird Game in 3 Days – Day 1, Part 2 appeared first on Yoke Harn.