Welcome to the sixth installment of the AS3 Side Scrolling Platformer tutorial series.
The background scrolls. The player collides with walls, and can jump (and even double jump). Our laws of physics have been established, and the basic mechanics are coded. In other words, we have built a working prototype. In this tutorial, we will step our platformer up a notch by adding in fancier visuals, and even the capability for layers of parallax scrolling, which will give the game the sense of depth which it is lacking.
This is a pretty good tutorial, which will really improve your game if you’ve been following along. When all is said and done, this is what we will accomplish:
(click to activate, and control with the arrow keys)
As you can see, while none of the basic game mechanics are different, I have added a lot of content since the last tutorial. To keep things organized we need a…
Plan of Attack
Here is a brief outline of the steps required in this tutorial to transform our once-bleak prototype into a vibrantly illustrated game.
- Rename the only layer inside the background object. This will be the Collisions Layer.
- Convert everything inside the current background image into a new object nested inside the background, which contains everything the player will collide with.
- Create a new layer on top of the collisions layer inside the background, which will be the Visuals Layer.
- Create a new object in the visuals layer which will contain all of the visuals of the game that the player won’t collide with.
- Draw the environment to your heart’s content inside this object in the visuals layer.
- Change the code so that hit-testing only considers the collisions layer.
- Outside of the background object, create a new layer behind the background and draw the parallax-background. Convert this into a Movie Clip object.
- Program the parallax-background to scroll at a different rate than the normal background.
There we have it. 8 Steps. During this tutorial, we will go through each step, one at a time.
Double-click on the background object sitting on the stage so that you are editing inside it. Then in the Timeline Panel, double-click on the layer name and set it to “Collisions“.
This layer will contain any objects in the game which the player can collide with. Right now, this means the bare-bones outline of the background walls, floors, and platforms.
Select everything inside the background object. Hit Modify –> Convert to Symbol… (Hotkey F8) to turn the current outline of the background into a Movie Clip. I named mine the Background Collisions Container, and I set the Registration to the bottom-left corner.
After you create the Background Collisions Container object, give it the instance name “collisions“, and set its position to X: 0 and Y: 0 using the Properties Panel.
Then, to keep everything centered, go back to the stage and set the position of the entire background object to X: 0 and Y: 500. This will return the background to its approximate location, although if you run the game you’ll notice that it isn’t in the right place. This is because the location of the background object in-game relies solely on code, not where we place the object on the stage. (We can use this to our advantage when we build larger levels.)
So click back on frame 1 of the main timeline, where we wrote the code, and in the actions panel update the variable declaration of scrollY so that its initial value is 500.
var scrollX:Number = 0; var scrollY:Number = 500;
Also, just to make things more interesting, I took advantage of the fact that we can now double jump and I modified the drawing inside of the Background Collisions Container. After a bit of basic drawing using the rectangle tool filled with black, and no outline, I came up with the following. I used thick lines to minimize the errors of our current collision system. You can either try to replicate my own background, or just download my source code at the end, or you can try to create your own customized level map.
Also, before we get too far into this, go back to Scene 1 and set your stage’s background color to something other than white (unless your game needs white). I chose a soft, sky blue.
Inside the main background object, create a new layer above the Collisions Layer. You can do this by clicking the small square button shown in the image below, or by selecting Insert –> Timeline –> Layer. Rename it so that it reads “Visuals”. Right now, it has nothing in it. We’ll change that in steps 4 and 5.
Create a new Movie Clip symbol in this layer (Insert –> New Symbol), which will be the Background Visuals Container. This is going to contain any objects which the player will not collide with.
Once you hit “OK”, you will be taken inside this object to start editing. Draw a small test mark, line, or dot, just so the object has some substance in it, and then return to Scene 1 by clicking on the button in the upper-left corner of the stage. Double click on the main Background to edit it. Making sure you are in the Visuals layer, open up your library panel and drag an instance of your Background Visuals Container onto the stage. Use the properties panel to set its x and y location to (0,0).
The infrastructure of our background is set up. Time for the good part — drawing the visual part of the background. Double click on the instance of Background Visuals Container which you just placed on in the background layer. Delete your previous test-mark, and begin to draw whatever crazy area you can dream up. After we update our code, the player will not hitTest against these shapes, so you don’t need to be too strict about staying within the lines.
I’ll walk you through the process I went through to make the demo, but as always, feel free to improvise.
Hopefully your background turned out successfully… or you decided to use my source code, which is fine, too :-)
Return to Scene 1 and click on Frame 1 of the timeline so you can see your previous code in the actions panel.
The changes we need to make are very, very simple: change the collision code from checking the entire background, so that now it will only check the “collisions” object inside the background.
How do we accomplish this?
back.hitTestPoint( // ... etc, etc
back.collisions.hitTestPoint( // ... etc, etc
every time it appears in your code.
Test your game, and you should be able to frolic in your new-drawn paradise. Congrats.
Hey, I know what you’re all really looking for: parallax. An easy topic which delivers a lot of bang for the buck.
Create a new layer on the main timeline, which I named “parallax sky”, and drag it beneath the background’s layer. (In fact, I created a couple more layers as well, to stay organized… one for the player, which goes on top of the background, and an additional one on the very top which only holds code — no objects on the stage.)
In the parallax sky layer, draw a few clouds (or whatever you want your parallax-background to be) and convert them into a symbol. Set its x and y position to (0,0). I gave mine the instance name: sky.
Double click on the sky object to edit it, and finish its art. It should be pretty large in size, but it’s going to scroll slower than the background, so it isn’t required to be quite as large. I made mine a little bit bigger than it needs to be, just to stay on the safe side.
After completing your parallax sky, return to Scene 1 to finish up.
We’re almost done! Just a little coding to tie everything together.
Check out the actionscript for scrolling the sky. Inside the main game loop, at the very bottom (directly beneath back.y = scrollY), add the following 2 lines of code:
sky.x = scrollX * 0.2; sky.y = scrollY * 0.2;
Wait? That’s it!!?
Think about it. A parallax-background is just another background which scrolls at a different rate. We’ve already done the code to figure out what scrollX and scrollY location the regular background is at. For every 1 pixel the player moves, the normal background will move 1 pixel. So all we need to do to take into account a parallax-background’s distance is multiply the scrollX and scrollY by a constant.
The smaller the decimal we multiply by, the more distant the clouds will appear.
We could create another layer with bigger clouds, and set its x to be the scrollX multiplied by 0.5. These would move faster than the other clouds, but still slower than the normal background.
Or we could even create a parallax-layer in front of the normal background, and multiply the scrollX and Y by a constant greater than 1. The possibilities are endless. And the more layers you add at different depths, the more realistic and 3D-ish your game will seem.
Try out the result!
You can download the source here.
If you happen to make anything cool with this, I’d love to see your creations! Leave a comment below, or email me at firstname.lastname@example.org with a link to your games :-)
Of course, this tutorial series is still far from over, so you might want to hold off on publishing your masterpieces until later. I’m still debating what to write about in the next part, but it might be collecting coins and items around the area.
Enjoy! And if you find this helpful, spread the word!