– Page 1
Platform Game Please read carefully
Part II
II. Cleaning up the graphics
second is to put a background image in.
A. Once again, we’ll start by making our Sprites:
1. Add Sprite ‘spr_block_horiz,’ a black horizontal rectangle that is not ‘Transparent’ (uncheck that box) and does not require‘Precise collision checking’ (disable that, too).
2. Then add ‘spr_block_vert,’ a black vertical rectangle that is alsonot‘Transparent’ and does not require‘Precise collision checking’(they’re both disabled).
3. For the avatar, we start by creating ‘spr_avatar_right. Does not require ‘Precise collision checking’ (so uncheck that box). Set the Bounding Box to ‘Manual’ and use the values for it of: Left = 7; Right = 23; Top = 2 and Bottom = 31 as shown in the illustation below:
4. Then Duplicate spr_avatar_right, but this time make it ‘spr_avatar_left’ and then simply change its graphic element.
Those are the “clean up” Sprites we’ll be adding to this iteration of the game!
B. Those are the Sprites, now let’s prepare the Backgrounds.
1. Start by creating a new Background called ‘background_sky.’ Select the correct background image from those provided with this tutorial and leave all of the default settings in place. That’s it.
2. Now we’re going to do something very cool. We’re going to create another Background, but this one is full of “cookie cutter” art called “Tiles” that we can use to improve the graphic appeal of our Rooms. Create a new Background called ‘background_tiles,’ and select the appropriate artwork for it (see below for a picture).
however, enable the function at bottom that says ‘Use as tile set,’ for that’s exactly what we’ll be doing with this Background.
When you check that box a new frame open up to define where the tiles are in this Background Tile Set. No sweat. The tile height and width are correct at the default value of ’16.’ There is no horizontal or vertical offset (the artwork is flush with the left and top edge), so leave these values as ‘0.’ There is 1 pixel of separation between the tiles, so the ‘horizontal sep(aration)’ and ‘vertical sep(aration)’ are both set to ‘1.’
When you’ve got this window set correction, it should look like this:
C. Sprites? Check. Backgrounds? Check. Now let’s incorporate this new artwork into the game, beginning with the character graphics. We have two different, non-animated Sprites standing by, one facing left and another facing right. We’ll change them when we press the <Left> and <Right> arrow keys.
1. Open up obj_avatar and start by assigning it one of the new Sprite images (‘spr_avatar_right’ will do).
Then select the Keyboard <Left> Event. Tab to main1 and add a ‘Change the sprite’ Action to the list. Change it to ‘spr_avatar_left’ and leave the default settings alone, so it looks like this:
Then move that ‘Change the sprite’ Action to the top of the list for that Event so that it looks like this:
Not surprisingly, you need to repeat this for the Keyboard <Right> Event as well using the appropriate Sprite.
You can check out your game real quick to look at your new graphics, if you like.
2. Now to clean up the platforms and walls. We’re about to use a very common technique, that of using “Tiles.” In Game Maker terms, we will be using the background_tiles asset that we previously created and draw selected pieces of it at particular places within a Room. That’s what Background images are for – being drawn inside a Room.
Open up your game’s Room and select the ‘Backgrounds’ tab. Disable the ‘Draw background color’ box and select ‘background_sky’ from the pull-down menu below (as shown on the right). There, that’s better.
a) To better visualize the pretty tiles from your Background Tile Set that you will place into your Room, you need to delete the ‘obj_block’ Objects that are currently there. You’ll put these “ugly” Objects back over the pretty Tiles a little later.
For example, to remove all of the blocks along the left side of your room go selecting the ‘objects’ tab and erase them by using the right-mouse button. Then tab back to the ‘tiles’ tab select the gray (“granite”) column in the top-left of the tile set and, with the <Shift> key + Left Mouse, put it all along the now empty left side of the Room (as shown below on the left):
Now go ahead and re-draw your room, putting the appropriate graphic tiles where the current obj_block Objects now reside. Make it a little artistic while you’re at it. Here’s a sample of a room with just the graphic tiles in it (on the right):
b) Although prettier, this Room won’t work. That’s because these background tiles are mere graphics, not actual game Objects – they’re not solid nor do they generate Events such as collisions! If you played the game now, the avatar would fall off the bottom of the screen and that would be that!
This means that we still need block Objects (just as before); they can be placed directly on top of the tiles in our Room. The secret is making the block Objects invisible so that the game “sees” them (they’re actually there and must be interacted with), but players don’t – they’ll see the beautiful tiles instead.
While you’re current ‘obj_block’ will do the job in most cases, there could be a graphic problem with that 16 x 16 pixel block being too large to cover some of the background tiles neatly. To solve this, we’re going to make some additional blocks of different sizes (16x 8 verticals and 8 x 16 horizontals).
Close your Room for now and create a new Object called ‘obj_block_horiz’ and use the corresponding sprite and do three things to it: 1) uncheck the ‘Visible’ box; 2) check the ‘Solid’ box; and 3) assign as its ‘Parent’ ‘obj_block’ as pictured to the left. Assigning an Object to a ‘Parent’ is a very powerful feature that you will really learn to use in our next tutorial lesson.
Then do the same for another new Object, ‘obj_block_vert.’
Finally,change ‘obj_block’ so that it is no longer ‘Visible.’ You should have three invisible, solid block Objects, the two smaller ones assigned to their Parent, which is the larger one.
c) Now re-open the room and place these Objects, as appropriate, over your Room’s Background tile graphics. You’re going to want to use the <Alt> and <Ctrl> keys to get the smaller blocks exactly where you want them.
The above room would now look like it does below, for example:
– Page 1
II. Threats & Treats
Let’s start with some monsters. We’ll make two of them. The first monster moves horizontally on a platform and you can jump on it to squash it. The second monster flies horizontally in the sky and must be avoided.
A. We’ll do the walking monster first. Like our avatar, you’ll make two separate Sprites for it: ‘spr_monster_left’ and ‘spr_monster_right.’ For each Sprite, select the appropriate graphic file and disable ‘Precise collision checking’ (for all of the reasons previously given in this tutorial). Also, for each Sprite, you need to set a relevant ‘Bounding Box.’ In this case, select the ‘Manual’ radio button and move the Bounding Box left and right a couple of pixels (to ‘3’ and ’28,’ respectively), as shown below:
1. And now we create the Object for this monster called ‘obj_monster_walk’ and choose the right-facing Sprite for it, as shown on the left. The default settings are fine.
2. Add a Create Event. The only Action is on the move tab, ‘Start moving in a direction.’ Since this Object begins as a right-facing monster, have it start moving to the right (right arrow) at a speed of ‘4.’
3. Then add anStep: End Step Event(see the “Getting in Step” sidebar to the right for an explanation of what the various Step Eventsmean). We’re going to look and see if we should change Sprite to show the other facing for this monster.
Tab to control and select for the first Action, ‘If a variable has a value.’ In the pop-up window, the variable is ‘hspeed’ (the horizontal speed of the monster) and you’re checking to see if it is ‘larger than’ ‘0’ as shown below (on the left):
Think about it. When something has a positive horizontal speed, it is moving to the right. When it has a negative horizontal speed, it is moving to the left...
Now tab to main1 and ‘Change the sprite.’ Just select the Sprite ‘spr_monster_right’ and leave the defaults, and shown above (on the right). So, if the monster has a positive horizontal speed (i.e., it’s moving to the right), use the right-facing Sprite; but what if it’s not moving right?
Tab back to control and add the Action ‘Else.’ Then tab back to main1 and ‘Change the sprite’ as you did a moment ago, only this time select the Sprite ‘spr_monster_left.’ So, you told it, “If you’re not moving right, draw the left-facing Sprite.”
4. Next, add a Collision Event with ‘obj_block.’ The only Action is on the move tab, ‘Reverse horizontal direction’ for its ‘Self.’ Now it will walk back-and-forth between blocks and face in the correct direction.
5. Close and save ‘obj_monster_walk’ and, quick, make a new Sprite Called ‘spr_marker’ and select the “monster_marker” artwork from the Art- Monster folder to go with it (a tiny, 8 x 8, blue square). It is not‘Transparent’ and does require ‘Precise collision checking.’ Set the Bounding Box to the ‘Full image’ as shown on the right.
Then, quick, make an Object to go with this Sprite, called ‘obj_marker’ and make sure it is not‘visible’ (the rest of the default settings are fine).
6. Re-open ‘obj_monster_walk’ and Duplicate the Collision Event with ‘obj_block’ and make it a Collision Event with ‘obj_marker. Thus, it will have the same single Action, ‘Reverse horizontal direction.’
7. Now we need to have the avatar die if the monster touches it. As in many platform games, however, we’ll make it possible for the avatar to jump on top of the monster and squash it.
First, let’s make sound effects for the avatar being killed (‘snd_kill_avatar’) and one for the monster being squashed (‘snd_kill_monster’).
Next, we need a Sprite for the squashed monster. Make the Sprite ‘spr_monster_flat’ with the appropriate graphic. All the default settings are fine, as shown to the right:
Finally, we need an Object for this Sprite.Create the Object ‘obj_monster_flat’ with the default settings. Add a Create Event for it whose sole Action is on the main2 tab, ‘Set an alarm clock’ for ‘Alarm0’ to ‘10.’ Finally, create an Alarm Event for ‘Alarm0’ and on the main1 tab, and ‘Destroy the instance’ of its ‘Self’ as shown below:
This slight (10 millisecond) delay before the flattened monster Object is destroyed will create a nice little visual effect.
With those pieces in place, we’re ready to do the deed inside obj_avatar, so open up obj_avatar and let’s get to work.
a) Start by adding a Collision Event with ‘obj_monster_walk.’ Tab to control and select the Action ‘If an expression is true.’ Here, we need some real “programmer code” in the game. The expression you must type in is: ‘vspeed > 0 & y < other.y+8’ as shown below (don’t overlook the dot between the “other” and the “y”):
Okay, if that is true, we must destroy the monster. How? Select in the Action ‘Start of a block’ and then ‘Put some comment’ and type in “Kill the monster” as shown below. We’ve got some Actions to perform as a single item in response to the ‘If an expression is true’ Action (i.e., grouped together within a block).
Tab to main1 and ‘Play a sound’ and select ‘snd_kill_monster.’
Then tab to score and ‘Set the score’ ‘Relative’ to ’50.’ Hey, killing a monster should be worth something, right?
Next we have to tell the monster to stop moving. Tab to move and select the Action ‘Start moving in a direction’ so that it applies to ‘Other’ (the monster, in this case) and press the square button in the middle of the pop-up (which means stop moving), as shown to the left. The other default settings are fine.
Then tab to main1 and ‘Change the instance’ of ‘Other’ into ‘obj_monster_flat’ and, ‘yes,’ you want to perform Events as shown below:
Tab back to control and put in the ‘End of block.’ At this point, your Actions display should look as it does on the left.
b) But this Collision Event is only half finished. This block of actions is what happens if you jump on top of this monster, but what if you collide with it the bad way? (That is, the way in which the monster kills you.)
While still on the control menu, select ‘Else’ to begin the alternate outcome. Then ‘Start a block’ and the ‘Put some comment’ and write “Kill the avatar.”
We’re going to keep this version simple. If you die, you have to restart the level. That will save us the need for avatar “death” graphics.
The first real Action is on the main1 tab where you want to ‘Play a sound’ of ‘snd_kill_avatar.’
Tab to main2 and set the Action ‘Sleep for a while.’ The defaults of ‘1000’ milliseconds and redrawing are okay.
Tab to main1 and select ‘Restart the current room’ (whether or not you want a transition is up to you).
And finally tab back to control and ‘End of block’ these Actions. When it’s all done, your Actions for the Collision Event with obj_monster_walk will look it does on the left.
B. The flying monster is easy in comparison.Again, you’ll need to make two Sprites: ‘spr_flying_monster_left’ and ‘spr_flying_monster_right.’ For each Sprite, select the appropriate graphic file and disable ‘Precise collision checking.’ The relevant ‘Bounding Box’ for both Sprites must be input manually for each Sprite at Left: 4, Right: 28, Top: 8, and Bottom: 24, as shown below:
There are a lot of Sprites related to the monsters on your display. You may want to make a folder and tidy them up, as shown to the right.
1. And now we create the Object for this monster. Duplicate Object ‘obj_monster_walk’ and name it ‘obj_monster_fly.’ Choose the right-facing Sprite for it, as shown on the left. The default settings are fine, as shown on the left.
2. Now all that’s left to do is a little tweaking.
In the Create Event, for the Action ‘Start moving in a direction,’ slow this monster down from speed ‘4’ to speed ‘3.’ This flying guy isn’t as fast as the walking guy.
In the End Step Event, you need to edit the ‘Change the sprite’ Actions so that they each call up the appropriate graphic image (i.e., the flying monster).
And the Collision Events with the block and marker are just fine. All done here!
3. Close that and open up obj_avatar and add a Collision Event with ‘obj_monster_fly’. The quickest way to set its Actions are to copy (right click, ‘copy’) those that are shaded from the Collision Event with obj_monster_walk (as shown below on the left), and paste them (right click, ‘paste’) into the Collision Event with obj_monster_fly (as shown on the right).
4. Additional monsters: You might want to experiment with more monsters for your platform game. Ones with different speeds, for example, might make things more challenging. A monster or rock that falls down or moves up and down could be interesting. Use your imagination. Plug a copy of your new creation into the room and see if it works as you designed it. If not, go back and figure out why, then fix it (fixing a game as you develop it is the “iterative process” of game development in action).
C. Pits: Most platform games require careful timing to make daring jumps over nasty, stationary obstacles that we’ll call “pits.” Falling into a pit normally kills a character.
1. A pit will be another invisible Object, like the blocks, and will lurk behind a spiked pit graphic tile in our Room. We’ll need a new Sprite, which we’ll use generically to cause death upon contact, create ‘spr_death’ and use the appropriate graphic of a red bar. Its extra pixels are not‘Transparent’ and doesnotrequire ‘Precise collision checking.’
2. Then create ‘obj_death’ using ‘spr_death’ and just make sure it is not‘visible.’ This Object has no Events or Actions (they’ll be defined within the avatar’s Object).
3. Save that and open obj_avatar (you knew that was coming since it is obj_avatar where most of the game’s rules are contained). Duplicate the Collision Event with ‘obj_monster_fly’ and make it a Collision Event with ‘obj_death.’
That’s it. You can now put pit graphics in your platform game and underwrite them with this Death Object instead of boring old Block Objects. Pretty cool, huh?
4. A variation is the “bottomless pit.” That is, you simply let the avatar fall off the bottom of the screen and “die” off camera. This is pretty easy to do, also:
In obj_avatar, add an Other: Outside Room Event. For the Actions, tab to control and add ‘If a variable has a value.’ Test to see if ‘y’ is ‘larger than’ ‘room_height’ to see if the avatar has fallen off the bottom of the screen (as shown below).