Page1, Page 2, Page 3, Page 4, Page 5, Page 6, Page 7

Game Programming Tutorial (Page 3)

This is page 3 of step by step guide to programming a 2D side-scrolling game with some 3D. I already showed you how to build most of the skeleton needed to begin making a game -- here I will show you how to make some graphics in photoshop for some background layers and how to program a scrolling parallax(layered) background..

STEP 22:

First decide apon a really cool looking type of scene. Browse the internet maybe - in search of inspirational images. You can use a digital camera to take pictures of strange things that might be in your scene - like a closeup of pine trees against the moon, or fluffy clouds(which you can make pink), or closeup of something small that isn't reckognized when it's big(like tapioca pudding - as alien-flesh), a circuit board, a sunset -- keep in mind you can always treat the colors and blend objects together later...

Make a new image of size 800x600 (or whatever your display resolution is set to in your game). Hit Ctrl+ to zoom in once (Ctrl- to zoom out).

Hit paint bucket tool and set foreground color to black and fill in the entire image with black.

I'll show you how I made my background and you can use that info to figure out out to make your own..
Set foreground color to red, and select brush tool: and set its master diameter to 200px (click the little down arrow thingy up top near the left side) and set opacity to 20 and randomly paint around a little bit(may have to reclick a few times):

(Or if you want you can select black and red for your foreground and background colors and go to Filter>>Render>>Clouds)

STEP 23:

Now select a yellow color. Pick a spot in the middle of the screen and click it a few times to start a sun. Now choose white and make the brush diameter 100 and click the center of the sun a few more times. (Remember you can hit cntrl+Z to undo anything you aren't happy with) - You should get something like this:

STEP 24:

Just a note -- if you wanted you could make the sun itself a sprite that doesn't move and is underneath this background layer -- but for simplicity - we'll just leave it as part of the artwork for the far layer of scrolling background -- later I'll show you how to make it a farther non-moving sprite beneath the clouds.
Now we need some silhoettes of trees or something along the bottom - hit shift+ctrl+N to add a new painting layer(and just click ok)-- select black and change opacity to 60% and use a smaller brush and draw them in and use the smudge tool to refine the edges a bit(strength set to 50 and brush size to 12):

STEP 25:

Now take an actual photograph of a sunset that you have and try to get it to match up in size using rectangle selection and crop and image size tools: Rectangle-select the area that matches the art closely, use image>>crop to cut out that rectangle, and use image>>image_size to resize it so it looks close. Now hit cntrl+A to select all of the image, then hit cntrl+C to copy and go to window and at the bottom should be a list of opened artwork and select the art we were working on(if it isn't loaded - just load up the art again) -- now add a new layer(should be layer 3) and hit cntrl+V to paste the photo. Go to your layers window and select the layer you just created(should already be selected) and change its opacity to 40%... now use the move tool:

... and resize so that the sun fits over the other one and it looks reasonably good. Now to smoothen the edge blending - hit the eraser tool (it will ask if you want to apply the transformation - just click apply).. You should now have the eraser tool selected:

... Now change opacity to something like 40 and diameter to like 100 and just try to sort of cleanup any lines or edges that appear.. (you can also use smudge for this or apply some more airbrushing) - also while you're working on this layer - go into image>>adjustments>>Brightness/Contrast and play with that a bit - then go into image>>adjustments>>Hue/Saturation and try altering the hue slightly to see what looks good and maybe boost the saturation a bit for more color. You also might want to adjust the color balance a bit.. See what looks good and you should have something kinda like this:

You could add lens flares or something - but I'd prefer we used dynamic lens flares instead - I'll probably show you this later..

STEP 26:

So even though this is a pretty basic background - it should look good because we will have a layer or 2 (or 3) scrolling over top of it.. Before we continue - we have to make this background work for seamless repeat scrolling.
To do this, first save this background as "far_back1.psd". Now go to the layers window and right-click on any layer and select "merge visible" - now save as "far_background1.psd"..

Now hit ctrl+A(select all), ctrl+C(copy) and then ctrl+V(paste) - got to view>>snap to>>All and go to view>>snap(just make sure there's a checkmark beside it) and hit the move tool: and either move by drag clicking inside the image or by pressing right arrow key on the image until the copied layer is covering half the sun underneath like this:

Now hit ctrl+V to paste another copy and click drag left or use left arrow key to carefully line up the image on the left side so the right side of the image is up against the left side of the other one. It should look like this:

STEP 27:

Clearly we have a seam issue -- this is actually easier to fix than it looks. Select the clone stamp tool:
Hit to go into the layers window and right click on any layer and select "merge visible"..
Go to either side of the crease and hold Alt and click a region to copy-paint(note: you can adjust the opacity of it too) - and paint onto the opposit side to make the opposite sides of the crease look similar like this:

STEP 28:

It still looks ugly though -- so try using the smudge tool and play around with strenth and master-diameter of it a bit -- maybe diameter of 30 and a strength of 25 - and try playing around with swirling the edges and smoothing it out to make it look like a natural flow of clouds. You should probably also select the brush tool and various shade on the image with the eye-dropper tool to air-brush in some detail along the crease to make it look like it never existed - and make the clouds look lit up and more real. Try using an orange color and maybe a brush size of 30 with an opacity around 20. You could use a yellow too to add some subtle highlights(maybe size 12 - opacity 8%) - and then smudge a bit - or try playing around with the blur tool(hold+click the smudge to get this option).

Another neat trick for highlights and shadows is to use the dodge tool and burn tool (and you could try playing around with sponge along the seam region tool) -- I'll get into more about how to use these tools effectively later -- NOTE that these tools are smart - which makes them perfect for doing beautiful art quickly. If you want - try selecting dodge (may need to hold click the burn or sponge tool to see this option), and try setting it to size 16, midtones, exposure 12%(could play with this a bit) - and trying fiddling around with adding some highlights to cloud-like areas closest to the sun. (could play around with burn a bit too with a weaker exposure(like 7))..

Now you have a seamless scrollable far background image like so (save as far_background2.psd):

Now save a copy of this as a .dds for use in your game -- if you can't save as .dds right now - you can download a plugin for your version of photoshop by searching for it on the net. We need to use format: X8R8G8B8 -- or - another way to get the .dds file is to save as a .png file(I guess you could just leave it as a .png file) and then go into Start>>All Programs>>Microsoft DirectX SDK>>DirectX Utilities>>DirectX Texture Tool (It's good to at least be familiar with this tool because it comes in handy for changing surface formats or for making textures for certain types of 3D objects)

STEP 29:

Time for a middle background(midground) - this will scroll over top at a slightly faster speed because it's closer to the viewer. You can take pictures of closeups of random objects for texture sources -- in my midground - I'll start with a closeup picture of a rock in a fishtank:

It's kinda green looking - let's make it into some kind of grass-skirting along the bottom of the midground (visible when the player is near the bottom of the world)...

STEP 30:

To see how this is working against the far layer of background - let's open up far_background2.psd and add a second layer(Layer>>New>>Layer) - and paste a copy of the original image(whatever you used). Use the move tool and move it near the bottom and adjust the end-points to stretch it out in a way that looks good -- as you can see below - I used 2 copies of the image and applied the Edit>>Transform>>Flip Horizontal to the second image and then right clicked over a layer in the layers window and selected merge down so that I could adjust the size of them together.

STEP 31: let's adjust the edge a bit to make it look more like some kind of grass instead of stone.. Select the smudge tool again and using an up-and-down scribbling motion - slowly work your way across the top edge to get this:

Notice I also scribbled in a few other places too to make it more grasslike.

STEP 32:

It looks good so far - almost like tires tracks through a field of grass -- but it's a bit flat -- so select the layer and select the move tool and just click once on one of the corners and you'll notice this button appear in the top right hand side:

<-- click this to begin warping the selection..

You can play around with it until you have a nice hill or valley or something..

STEP 33:

Not green enough though - let's adjust the color settings -- go to image>>adjustments>>Hue and Saturation and (with master selected) - maybe add 10 to hue to make it more green and add 50 to saturation to make it more vibrant. Let's also reduce the brightness a bit(maybe 20-25) and mmm - the contrast looks good where it is... Now select the color black and set the brush to diameter 50 (opacity 10%) and just darken the bottom portion of the grass a bit - darkest along the bottom edge -- to get a more silhoette type look - like this:

Looks pretty good - but maybe we should have some clouds too.

STEP 34:

Save as "midwork1.psd" and create a new image - 600x600 - and fill in the background with black. Choose black as background color and maybe a hot red-pink-purple color for the foreground color. Now go filter>>render>>clouds...
Now add another layer and select the color black. Select the ellipse tool (may have to click hold on a shape tool to see the other shape tools first) - and paint a bunch of circles and ellipses to make a cloud silhoette like so:

STEP 35:

Add another new layer(Shift+Ctrl+N) and make sure to check the box which says: "use previous layer to create a clipping mask".. Now select the background layer and hit Ctrl+A to select all - and hit ctrl+C to copy - now hit the delete key -- everything will go black -- now select the latest layer we just made - and hit Ctrl+V(paste) and you should see this:

Step 36:

If you have a photo of a cloud - now would be a good time to add that texture to this image -- try to resize and rotate the photo (turn down opacity in a new layer and paste it there to try out some alignment) to make it match our cloud fairly closely.. Now paste it in with opacity turned down to say 50% and maybe try fiddling around with the warp tool to get it to sorta match.. Hit the Rectangular Marquee tool to apply the settings..
Now right click on this layer and click - "create clipping mask" -- and maybe go into image>>adjustments>>lighting and contrast and boost the contrast (like to 50 or something).. Should get something like this:

STEP 37:

Now click on the background layer and select the magic eraser tool (hold+click the eraser to see it) -- and click in the background to make the background totally transparent.. Now right click the bottom layer and hit "merge visible". Now if you want go to image>>adjustments>>hue and saturation and boost the hue to a redder tint (ie: +35) and boost the saturation to say 60 - and reduce the lighting by say 10... Maybe reduce the brightness by 10 and increase the contrast by 10 too... Use the dodge tool with diameter of say 35 and exposure of about 40% and add some highlights to the bottoms of the round parts of the clouds where light from the sun will hit them..(cuz they're higher than the sun) -- select a yellow brush tool and dab the bottom parts with bits of yellow (don't worry about coloring outside the lines)... Now select the burn tool and with a size of 30 and exposure of say 20% - darken in the back parts of the cloud puffs that the light won't hit as easily -- It should look something like this when you're done:

STEP 38:

Save as "cloud1.psd" - right click in the layers window on a layer and hit - "merge visible" and hit ctrl+A, ctrl+C and go into the image we were just working on - midwork1.psd (if it is still loaded - you can find it under the windows menu)..
Now paste in the image and change the layer's opacity to say 88-92%. Now you will probably want to adjust the size,color, contrast and saturation of this layer until the scene matches your tastes... Select the eraser tool and use a brush of like size 25 and opacity 40-50 and trace along the edge (maybe a second time just barely touching it). Now select the blur tool and make circular motions as you trace the edges(same size with strength of say 70) -- and go around the edge of this cloud a few times to make the edges nice and foggy... -- now make a copy of this and past it - resize it (bit bigger or smaller and don't forget to set the opacity for this one too) - flip it horizontally and play around with it a bit -- maybe also use smudge to make some little swirls.. I got something like this:

STEP 39:

Let's add a couple of creepy looking trees for the fun of it. Just take a photo of a creepy looking tree or you could even just use some old wood or something to get a good texture.
Go File>>New - 600 width, 600 height and pick black and bucket-fill
Set the background color to a brown or dark orange. Go Filter>>Render>>Fibers (variance 20, strength 10)
You could either use a magic wand tool on a tree photo and paste it in a new layer to use as a mask(and as another layer for added texture) -- or you can do this instead:
Hold click the lasso tools and pick the Polygon Lasso Tool
Now outline a shape of a simple creepy looking tree-like structure. Hit Select>>Inverse and use the Eraser tool (at maximum opacity and a brush size of say 150-200) and erase the surroundings. Right click and hit deselect.

STEP 40:

Open a wood, bark, or tree photo that you can use to add more texture to the image. Hit Ctrl+A Ctrl+C to copy and paste it on this image(it will start a new layer automatically). Stretch it out until it covers the tree. Go to the layers window and set the opacity to about 55%. Right click on this new layer and select "create clipping mask". Now you can use the Move Tool and rotate it a bit to match better - maybe resize a bit and probably should play around with warping it a bit to match the direction of the trunk and branches better ...also maybe play with smudging some darker spots a bit to get it to match a bit better and make sort of creases and holes. Might also want to add some darker spots using the brush tool with a smaller brush size(ie: size 35 and opacity 45%). Create a new layer - darken the center of the tree a bit since it is a silhoette and light is coming from behind it.

The tree doesn't look very smooth along the edges -- we could smooth the edges using a trick with channels, gaussian blur and level adjusting - but I'd prefer to just play around with smudging the edges more artistically. (I might show u that later)

STEP 41:

Merge visible(right click in layers window first).. You should play with dodge along the edges(cuz light is coming from behind the object - say 16 size and 60% exposure) and burn on the inside to add likes through the tree in the direction of the branches (try different exposures and sizes wherever). You may want to add some tinted airbrush highlights or a hint of red at the base of a tree hole for a subtle creepy effect -- you may also want to play around with contrast and hue a bit too. For a final effect - right-click over the image and select "blending options" - check inner glow and click inner glow to go into its settings.. Change the color to a bright orange - blend mode: normal - opacity of 40% - size of maybe 10 px (choke 0) and hit OK. (Do same for outer glow but maybe just 6 px). Should look something like this:

STEP 42:

Note that I added a black background layer in the above image but I removed it now. Now click create a new layer to create a new empty transparent layer. Right click - that layer and click "merge visible" -- this will combine the blending options into the image permanently. Ctrl+A Ctrl+C
Let's paste this(Ctrl+V) into our midwork1.psd image and drag the layer so that it's under the grass so we can place the tree so the grass partly covers the roots. You may want to play around with size(move tool), color, contrast, etc...

Looks pretty good. The glow-edges are a bit bright - but a few touchups and playing around will make it fit in better..

OK! We now have our first 2 layers of scrolling background -- let's save a .dds copy of these into a folder in our game project directory. Go into Visual Studio folder (probably in My Documents) >>Projects>>MyGame (whatever you call your game) >> MyGame (again) -- here you should see the project file and a debug folder -- create a new folder called "Graphics" -- this is where you'll save all your .dds files(or png).
First - in mid_work1.psd -- (with far_background and mid_background) -- click the layet visibility thingy on the far background to make it invisible.. Right click over a layer and click "merge visible" -- go into image>>image size -- turn off constrain proportions and change the size from 800x600 to 800x800... (we'll need more height so the midground scrolls up and down a bit too) - now Save As "MidGround1.psd"

STEP 43:

One problem though - this is not yet a seamless mid_ground. Make sure snap(ALL) is on and Hit Ctrl+A, Ctrl+C, then delete - then Ctrl+V to paste and move it half-way across like so:

...and paste (ctrl+V) again and line up the image against it like so:

Now with the help of smudge tool (or whatever else) we can remove any unwanted artifact seen where the two halves meet -- make sure to merge visible first(or use merge down)..
Here's what the final seamless midground looks like with the far background visible:

STEP 44:

Now go to Save As (change the format to .dds) "mid_background1.dds" into the new Graphics folder we made. If you have already made the "far_background1.dds" file you can copy it into this graphics folder too. (don't use the mid_work file's far_background though unless you change the size back to 800x600)..

Next we will go back to our project in Visual Studio, load the graphics, and make the 2 far layers of background scroll based on user input.

Click >> PAGE 4 << to continue to the next page of this tutorial.

Return to Home Page