IGM Tutorial: Basic Platformer

in Tutorials

Want to check out a PDF of this tutorial? Right click save as HERE.

In this tutorial, we’re going to cover the very basics of creating a jumping/platformer style game which will include creating a hero gadget, creating tiles with and without walls, and creating an enemy gadget for our hero to defeat. At the bottom of this guide you’ll find a link that will lead you to a flash example of what the finished project should look like. You can also click an of the Screenshots to see a full-sized version for clarity. You will also need the resources in the following archive to do this tutorial (right click => save as to save them to your computer)

ResourcesOpen up IG Maker and on the left menu under the “Top Page” tab select New Game. This opens up a guide to creating new projects. Read it if you like, then hit next. For this game’s genre we’re going to select Jumping Action (New Game). Hit next again and we get to pick the starting screen resolution (this can be changed later by selecting the “Flow” tab and then the “Overall Settings” sub-tab). Select 640×480 under the VGA 4:3 option. This option seems to be the best for flash, and it works fine for PC games as well (though I find that Wide 16:9 1280×720 works best for the Xbox 360). Hitting next again allows you to name your game. This can be changed later so just use the default for now and hit finish.

Now you’ve been taken to the “Flow” Tab. We’re not going to do anything here right now, so let’s head over to the “Materials” tab and import our three files. When you select “Materials” you’re taken to another sub-tab called “Graphics”. In the “Graphic List” you’ll see three files; Icon, Font 16×16, and Font 8×16. These files cannot be deleted, but they can be changed. Icon is worthy of note as this lets you change the icon for your game’s executable on the PC or the icon used on the Xbox 360’s menus. For now we’re going to select the “Create” option in the menu to the left.

Go ahead and import Grass.png first. For “Split Graphic (Horizontal)” we’re going to change the number from 1 to 3. You’ll notice to the right that this splits the graphic into three equal parts, defining the tiles we have. There is no need to change “Split Graphic (Vertical)” because there is only one line of tiles. Under “Uses” you only need the “Tiles” check box selected. You can leave the others blank. Now use the “Create” option again to import the Hero and Penguin files. For the Hero’s Split Graphic (Horizontal) you’ll want to set it to 9, and the Penguin’s to 6. Both of their Uses can be set to Animations only.

Now that we’ve got our graphics loaded as materials, we can set up the tiles for the first canvas but first we have to set the “Basic Tile Size” for our game. So select the “Jumping Action” tab and then select the “Per Plug-In Settings” sub-tab. The “Basic Tile Size” we want is 32×32 so select that and then select the “Tiles” sub-tab. Hit the “Create” option and it’ll make a new blank tile set called Tile001. To the right is a drop down menu for graphics. Select that and choose the Grass option. You’ll notice that it loads the tiles with a blue border around them. The size of the blue border is what we changed when we switched the “Basic Tile Size”. Setting the size smaller than the tiles you’re using will give you more control over how each part of the tiles react but for now we just want both of the visible tiles to be complete walls. Select both tiles (you can select both by holding down the left mouse button and dragging it from one tile to the next) and to the right we’re going to hit the “All Walls” button. You’ll notice the boxes with arrows telling you where walls exist will all become yellow for both of our tiles.

Now let’s fill in our first canvas. Select the “Canvases” sub-tab, and then select the “Per Canvas Settings” sub-sub-tab. For “The Tile To Be Used With This Canvas” select Tile001 from the drop down menu. Now in order to create a sky background for our tiles, we’re going to use the “Background Color” option. Try these settings for a day-blue sky: Red 100, Green 150, Blue 255.

Now we’ll switch back over to the “Layout” sub-sub-tab. You’ll see that it’s all very blue and to the right you’ll see the tiles we set up. Switch over to your preferred layer (layer options are located just below the grid on the left), and you can probably go ahead and zoom the grid out (you can zoom in and out using the magnifying glass icons or the drop down menu located below and to the right of the grid). Before I continue with placing tiles let me explain how the four layers work.

The layers represent the depth of on-screen items. Putting things on Layer 1 will put them at the very front of the screen and Layer 4 would be the very back. Objects cannot interact across layers so you have to choose one layer to build off of. I like Layer 3 as I don’t usually have very much stuff behind my character but it is fun to put things infront of them like bushes or buildings and things that you can run behind.

So now let’s place some tiles. Choose whatever layer you like and place your tiles however you want. Remeber they don’t have to just form the ground. You can have them float in the air, or be various sizes. Here’s what I came up with.

You’ll notice I’ve got walls going up either side. This helps with gadgets as you can have them alter course or actions based on the locations of walls. You don’t need walls that go all the way up the sides of the screen though. Simply making them one tile higher than the ground would be fine for this tutorial.

Now we’re going to set up our Hero and Penguin gadgets, but first we’ll need to set up their animations. Select the “Animations” sub-tab and let’s get started. Like before the first thing you’ll need to do is hit the “Create” option which creates Animation001, and its first action called Action001 which has two displays called Right and Left. Let’s rename Animation001 to Hero and Action001 to Standby. Under the “Per Action Settings” sub-sub-tab, you’ll want to check the box next to “Set Origin At Character’s Feet”. This allows for easier placing of the Hero gadget later on. Under “Graphic Data” you’ll need to select the drop down menu and choose the Hero graphic. Then you’ll want to switch to the “Per Frame Settings” sub-sub-tab and notice down at the bottom there is a gray bar with the word “Graphic” in it. If you put your mouse around the top of this bar you’ll be given the option to resize the window. Click and drag the window up so that you’re able to see the graphics for the Hero.

For Standby > Right > 1st Frame select the first tile with the hero in it. Do the same for Left, but this time under “Display Settings” there is a check box for “Flip L/R” that will mirror the tile so it looks like he is facing left. Next we’ll need to set up our hero’s collision detection. He does not need collision detection for attacks at the moment. Here are the Collision Detection numbers that I used.

Collision Detection with Other Gadgets
Horizontal Positioning % (top left box) = 12
Horizontal Size % (top right box) = 76
Vertical Positioning % (bottom left box) = 6
Vertical Size % (bottom right box) = 88

Collision Detection with Walls (Tiles)
Horizontal Position % = 6
Horizontal Size % = 88
Vertical POsitioning % = 0
Vertical Size % = 100

Now if you’ll look below the image of our character on the grid you’ll notice three zoom-altering magnifying glass icons and an odd box icon to the left of those. If you click that you’ll see the collision detection we’ve just set up. It should look like a thin green bar in the middle of our character from head-to-toe and a blue bar inside of the green one.

Now we’re going to make our character jump. Click the + button next to “Action” and it’ll create a new action below Standby. Rename this new action Jumping. Follow the steps that we did for Standby for “Per Action Settings”. For the graphic select the second tile (where his arms are spread out). Remember for the Left direction you’ll need to flip the image. When you’re done with this set up your collision detection the same as before.

By now you should be getting comfortable with creating new actions. So create another new one and rename it Running. Follow the same steps as before. Now we need to add five new frames for each direction of running so click the + button next to “In-Direction Frame List” and it’ll create a new blank frame. Set the graphics for the running animation. Don’t forget your collision detection (take note of the “Same as the Previous Frame” option under “Collision Detection” as this enables you to only need to set the detection for the first frame in a series and have all the other frames copy it). Next go to “Per Action Settings” and change your “Frames Displayed per Second” from 2 to 20. You do this after you’ve got everything else set up because it doesn’t update frames created after this setting has been changed, only those created before. After you set the frames per second to 20 click the checkbox that enables infinite looping.

Now you’ll need to create a new animation for the Penguin enemy. The penguin doesn’t ever stand still so you don’t need to create a standby animation. For each direction of walking you’ll need four frames. The tiles you want will be the first, second, first, and third. This will make it appear as if he’s taking steps. He also needs a new action to die so you’ll need a left and right two-frame animation for his death (without infinite looping). Use the far right tiles in the penguin graphic where he looks smooshed. You’ll also need a third action that we’re going to call Invisible. Set it up the same as before with no collision detection and use the blank space on the far left of our penguin graphic. This allows our penguin to disappear once he is killed. Here is what you’ll need to set the collision detection for the penguin’s walking animation.

Collision Detection with Other Gadgets
Horizontal Positioning % (top left box) = 37
Horizontal Size % (top right box) = 26
Vertical Positioning % (bottom left box) = 25
Vertical Size % (bottom right box) = 6

Collision Detection with Walls (Tiles)
Horizontal Position % = 37
Horizontal Size % = 26
Vertical POsitioning % = 75
Vertical Size % = 25

Collision Detection for Attacks
Horizontal Position % = 31
Horizontal Size % = 38
Vertical POsitioning % = 31
Vertical Size % = 69

You don’t need any collision detection for the dying action as he should be harmless once stepped on. Here’s a screenshot that might help with some of the things I’ve just covered.

Now we have to create our gadgets so click over to the “Gadgets” sub-tab and you’ll find that there is already a Player gadget waiting to be modified. You only have one player gadget but there is a world of things you can do with it. For now we just want him to run, jump, and stand still. Under “Action Programs” you’ll see Action001. Rename this to Standby, and go ahead and make two other Action Programs named Jumping and Running. Once that is done click over to the “Emergence” sub-sub-tab. Here you’ll see a lot of stuff that can be overwhelming but it’s actually rather simple. We need to tell the gadget which set of animations it will be using so under “Assigned Animations” select Hero from the drop down menu. Now under “The First Action Program” we’re going to select Standby. Under “Layer For Display” select 3 (if you chose Layer 3 earlier when placing tiles). Now you can switch back over to the “Registering Actions” sub-sub-tab.

Now we need to set up how each “Action Program” acts when displayed on the screen. For all three you’ll want to check the box for “Don’t Designate A Direction Of Movement” and for Standby you’ll want the “Movement Speed” to be changed to 0. For Jumping you’ll want to make sure to check the box for “Jump”. Now you need to set the animations under “Action To Be Assigned”. The names should match up. For the directions just select right for now on all three.

Now we have to tell the game how each action interacts with the others. So select Standby for the “Action Program”, and select Jumping as “The Next Action”. Under “Conditions & Key Commands for Switching Actions” you’ll want to set it up so the character jumps when a button is pressed (I used B). So check the box next to “The following command was entered” and select your choice of button for the action. For the “Status” choose “Upon Pressing”. Now select Running as “The Next Action” and do the same, but for the “Buttons” select “Left/Right” and for “Status” select “Pressed”. Now select Jumping as the “Action Program” and Standby as “The Next Action”. Because we don’t want Jumping to go straight to Running or Standby randomly, we’ll want to set it up so that when “Left/Right” is released (“Upon release”) and “There is a wall underfoot” your hero will go to standby. For Jumping to transfer to Running, you’d want “There is a wall underfoot” checked and you’d want “Left/Right” to be “Pressed”. This allows you to keep running when you hit the ground if left or right is held down otherwise you’ll simply land and stop. Now select Running as the “Action Program” and Standby for “The Next Action” and use “Left/Right” – “Upon Release”. Then for Jumping you’ll want it to be “B” (or whatever button you chose) – “Upon Pressing”. This allows us to jump while running.

Now we need to make our hero move with a bit more fluidity. If you tested the game now he wouldn’t even be able to jump! So click the “Moving & Jumping Settings” sub-sub-tab. Under “Basic Lateral Movement (VX)” and under “Movement Distance” change it from 1 to 3. Do the same with “Basic Vertical Movement (VY)”. Now scroll down and under “Jumping & Falling Parameters” adjust “Speed” to 6, and “Gravity” to 0.25. This will allow our hero to jump and run at a comfortable speed.

Now we need to create our Penguin gadget. Hit that “Create” option one more time! This will pop-up a new window where you can select the “Animation Assignments”. Obviously we have to choose Penguin. This creates Gadget001 with an Action001 which you can rename to Penguin and Walking Right respectively. Go ahead and make new “Action Programs” for walking left, dying right, dying left, and invisible. Walking right should already have the items under “Action to be Assigned” set properly, so just change the “Movement Direction” dial to the right. Set up Walking Left the same way, only of course the dial should be to the left. Then set up the animations for “Action to be Assigned” for the rest of the “Action Programs”. For both dying directions and invisible you won’t need to designate a direction of movement so check that box, and set your “Movement Speed” to 0 for all three.

Now head back to the “Emergence Settings” sub-sub-tab and choose layer 3, make “The First Action Program” walking right, and under “Activation” select “Constantly Active”. This will allow the penguin to exist even when it isn’t on the screen. Under “Others” check the box for “Don’t Flash On Taking Damage”. Go back to the “Registering Actions” sub-sub-tab and we’ll need to set up how the penguin moves.

Because we’ve done this before with the Player gadget I’m going to give a short-form version of how to make each Action Program interact with each other.

Walking Right > Walking Left IF “Gadget Collided With A Wall”
Walking Right > Dying Right IF “Got Stepped On”
Walking Left > Walking Right IF “Gadget Collided With A Wall”
Walking Left > Dying Left IF “Got Stepped On”
Dying Right > Invisible IF “Gadget Played All Animations”
Dying Left > Invisible IF “Gadget Played All Animations”

So our penguin will switch directions if it runs into a wall, and it dies if you jump on its head. Simple right? There are just a couple more things we need to fix before we’re done. Select dying right or dying left and under “The Selected Motion Program’s Settings” scroll down until you see a check box next to “Switch memories”. Check that and in the drop-down menu find the memory named “Forced Player Jump”. Just below the drop box select the “Add” option, and in the number field just below and to the left change it from 0 to 3 (in this case the number determines the height of the jump). Do this for both dying animations Now select invisible and scroll down until you find a check box next to “Disappear” and make sure it gets checked.

That’s it. We now have a Player gadget that can stomp on a Penguin’s head to make it die and disappear. Let’s head back over to the “Canvases” sub-tab real quick to place the new gadgets! Once you’re on the canvas select layer 3 (or whatever layer you’re using) and select the “Gadgets” tab under “Layout Parts”. You’ll see a list containing Text, Camera, Course, Player, and Penguin. Put the player anywhere you like and throw down a few penguins by selecting the gadget and simply placing it inside an open spot on the grid. Save your progress if you haven’t done so already and hit play.

When you test play your keys will be different than the “B” button we set up earlier. Here’s a quick guide to what keys correspond to which buttons by default.

Left Trigger = Ctrl(L)
Left Bumper = Shift(L)
Back/Select = Tab
Start = Space
Right Trigger = Ctrl(R)
Right Bumper = Shift(R)
X = A
Y = W
A = X
B = D

Up/Down/Left/Right are simply the arrow keys. This can be confusing at first but it is easy to get the hang of with a little play testing. If all goes well you should be able to use our Export to Flash tutorial to turn this project into this:

Jumping Action Tutorial Game

That’s it for now! Feel free to experiment and try different things. If you have any ideas or questions for future tutorials feel free to leave comments or send me emails. I would love to hear everyone’s thoughts.

Ready to get started with Indie Game Maker? Use the coupon code “igmakerohyeah” at check out to get 10% off your purchase of IGM.

Kain is a composer. You can check out his work at kainvinosec.com. You can also contact him directly with questions about his IGM tutorials or IGM in general at igmakertutorials@gmail.com.

25 comments… add one

  • masterlobo February 28, 2012, 11:10 pm

    Everything works except that it won’t kill the penguins when stepped on them :(

    • masterlobo February 28, 2012, 11:56 pm

      Also, this may sound odd but can you export to PC XNA?

      • kainvinosec February 29, 2012, 5:58 pm

        First, you can absolutely export to PC and XNA. I have a tutorial up for exporting to XNA here – http://blog.rpgmakerweb.com/tutorials/igm-export-xna/

        Second, sorry about the mix up. There was a formatting error with the tutorial that I believe caused the confusion about making the penguin gadget die.

        When you are setting up how the penguin gadget’s action programs interact with each other, you need to make sure that the walking actions switch to the dying actions when the gadget is stepped on. So in the format of the tutorial when you’re setting up the stuff like Walking Left > Walking Right IF “Gadget Collided With A Wall” you need to add in these two following things to Walking Left and Walking Right:

        Walking Left > Dying Left IF “Got Stepped On”
        Walking Right > Dying Right IF “Got Stepped On”

        This should allow your penguin to get squished properly. I hope that clears it up and if not feel free to ask for more detailed instructions.

  • mot February 29, 2012, 5:28 pm

    Excellent tutorial, thanks a ton for putting this together. It’s been a big help for me, I had no clue where to start in IGM. I’m having the exact same issue as masterlobo though, everything seems to work fine except that nothing happens when the player steps on the penguins.

    • kainvinosec February 29, 2012, 6:05 pm

      Just replied to masterlobo’s comment about this. Hope it helps!

  • AStressedIGMuser March 9, 2012, 8:25 pm

    Excellent! and thanks to the tutorial. but i got a problem here: whenever my player gadget touch (not stomp) the penguin, it doesnt play the hurt animation, instead the penguin :( mind to help?

    • StarkArmor March 16, 2012, 2:40 pm

      I’m having the same issues! Did you get any assistance?

  • StarkArmor March 15, 2012, 11:25 pm

    I’m having the same issues. The penguin is not dying. Everything in my construction matches yours. My penguin is also not switching directions, even though I have:
    Walking Right > Walking Left IF “Gadget Collided With A Wall”
    Walking Right > Dying Right IF “Got Stepped On”
    Walking Left > Walking Right IF “Gadget Collided With A Wall”
    Walking Left > Dying Left IF “Got Stepped On”
    Dying Right > Invisible IF “Gadget Played All Animations”
    Dying Left > Invisible IF “Gadget Played All Animations”

    Is it an issue with the hitboxes? Do you know a fix?

  • Claros Flamestrike March 24, 2012, 8:03 pm

    Thanks for the tutorial, first of all. But I’m running into a problem…

    Everything worked fine and good with the resources that you provided, but I can’t seem to get the same principles and concepts to work with different graphics. If I try setting all sides of a tile to walls, it makes it impossible to move through, which is not what I want — I want to have platforms that you can jump through to get on top of.

    However, when I removed the floating platforms, making a level much like the one in the tutorial, I still get a strange glitch when I try to run-jump or if I let go of the jump key before colliding with a platform. If I hold the jump key, and nothing else, until I land, it’s fine. But, when I press the jump key and a movement key at the same time, I jump for a split second, then land in the air. The same thing happens if I let go of the jump key before I hit the solid, visible platform. I did “erase” some tiles with my blank tile, which makes me think that it has something to do with my blank tile being read as a platform.

    Whatever the reasoning, I would like to hear your thoughts. Until then, I will do some research with various tilesets and sprites.

    Cheers!

    – 2br02b

  • Gil April 12, 2012, 12:00 am

    I can’t get my penguins to get squashed either…
    I read kainvinosec’s response to masterlobo but I still seem to be having trouble…

    Maybe it is a collision detection issue?

    • Gil April 12, 2012, 12:09 am

      Okay I actually came across a possible answer to the problem.Go to the sub tab “Gadgets” and select the penguin, then click on the sub sub tab “emergence settings”. Under “others” there is a box that says, “Don’t push another gadget back”. The tutorial says you should have this box checked (on). However, if you uncheck it, you should be squashing penguins.

      Unfortunately, the animation will look a bit odd as you will now “float” above the penguin’s heads after squashing them.

      • Gil April 12, 2012, 12:40 am

        Annnnnddd… sorry for the triple post, but hopefully this helps someone. The way I got my penguins to die was to do what I posted above, then go to the sub tab “Animation”, select penguin, then action “dying” (or whatever you named it). Then under the sub sub tab “Per frame settings” I set “Collision detection with other gadgets” to “none”.

        Hope this helps anyone trying to stomp those pesky birds! At least this way you can see how there is more than one way to skin a cat or uh… penguin..

        • Nick Palmer April 12, 2012, 8:23 pm

          I’ll make sure Kain sees your posts.

        • kainvinosec April 15, 2012, 12:19 am

          Hey, you are a genius! Thank you for your help on that. You’re absolutely right. “Don’t Push Another Gadget Back” should NOT be selected for the penguins. I had meant to put “Don’t Flash On Taking Damage” and must’ve misread as I was typing out the tutorial. As for floating above their heads, that should be remedied by forcing the player to jump.

          What you said about “Collision Detection With Other Gadgets” is already in the tutorial though. There should not be any collision detection for the dying animation.

  • Slytotal July 24, 2012, 8:16 am

    Hello,

    Everythings working for me exept one litle things.

    When a penguin meet an other penguin they collide a little bit. So one will automaticly be a little bit up.

    I don’t find the way how to prevent penguin to collide with each other (exept player for sure).

    Can someone have an idea?

    • Kain Vinosec July 24, 2012, 8:58 am

      The penguins should pass through each other and only run into the player. What did you set your collision detection as for the penguins?

      • Slytotal July 24, 2012, 9:07 am

        I set this in “Animations” tab, and sub tab “Per Frame Settings”, “Collision Detection”.
        I set Detection On for “Collision Detection with Other Gadgets”, for “Collision Detection with Walls (Tiles)” and for “Collision Detection for Attacks”.

        Do I need to deactivate “Collision Detection with Other Gadgets”?
        Is it a way for an object to collide only with certain other gadgets but not all gadget?

        • Kain Vinosec July 24, 2012, 9:13 am

          Check the numbers where your detection is set. From left to right, top to bottom, they should read: 37, 26, 25, 6 for “Collision Detection With Other Gadgets”, 37, 26, 75, 25 for “Collision Detection With Walls (Tiles)”, 31, 38, 31, 69 for “Collision Detection For Attacks”. If you have those all set up like that, and they are still colliding then upload your GPD to MediaFire or some other file hosting site and email me the link – kainvinosec@gmail.com – so I can take a look at it and figure out exactly what is happening.

          • Slytotal July 24, 2012, 11:52 am

            Hello Kain,

            Yes everything is like that in collision (same values)… So like you said, I already send you my project by mail, so it will be possible for you to check this directly. So I will wait some news from you.
            Thanks!

        • Kain Vinosec July 24, 2012, 12:13 pm

          Got it. Check out the fourth frame of your Penguin’s walking animation. You forgot to set “Same As The Previous Frame” on both of the fourth frames so they had default collision detection.

          Let me know if you have any other questions or anything,
          Kain V.

          • Slytotal July 24, 2012, 12:28 pm

            Perfect! My bad, It was because of this.
            Thanks for you help!

  • Ronald March 13, 2013, 3:36 pm

    I just can’t get it! My character can’t move and my penguins twitch around in the same spot. What am I doing wrong? I really want this to work, but I can’t even get past the first tutorial like everyone else :(

    • Kain Vinosec March 25, 2013, 11:36 pm

      Don’t get discouraged! Upload your GPD to mediafire, and email me the link (kainvinosec@gmail.com) and I will take a look at it and get back to you asap.

  • Danny March 15, 2013, 4:53 pm

    Everything works fine for me, but how do you increase the canvas size once everything is done? Is this possible?

    • Kain Vinosec March 25, 2013, 11:35 pm

      Canvases can be resized under the “Canvases” tab, and “Per Canvas Settings” sub-tub. At the very top of this tab you can determine how many screens horizontally and vertically the canvas stretches.

Leave a Comment