Ultima Island :: Tutorials :: Platformer Tutorial - VOLUME I: Pixel Based Movement

rating:

(17 votes)

Submit Tutorial

More Information

Platformer Tutorial - VOLUME I: Pixel Based Movement

To some of you, a Pixel Based (Picture Based) Platformer would seem like a huge battle, but I will be creating a series of tutorials teaching you how to construct a platformer from scratch.
All coding should be left to common events unless pages are needed.

First, the best start you can have is to find a sprite sheet that you want to use.
I recommend "The Spriter's Resource", once you download or create a spritesheet that you like you must separate them into individual images.
Take the biggest sprite from your sheet and paste it into a new image, the dimensions of this new image will become your static dimensions for Monsters and the Main Character.
Anyways, enough of this, you can work it out for yourself.
Image grouping is essential for organisation, you should give your images names in a layout using the "Stance_Direction_Frame" rule, for example if you made an image of your hero standing still, the stance would be "Idle", the direction it is facing (depending on how you made the image) would be stated next, after that you would use the frame number you want it to be.

Examples

- Walk_Left_1

- Walk_Left_2

- Walk_Left_3

- Walk_Left_4

Make a MAP EVENT(AutoStart), this will be your startup event, for now nothing is needed apart from the following:

[Code]:

<>Variable[0001] "Hero X" Set Equal to 160

<>Variable[0002] "Hero Y" Set Equal to 120

<>Erase Event <<------- THIS IS IMPORTANT

Lets start with a static image for now, set up a Parallel Process event that shows an image of your hero, I suggest using layer 25 for the hero's sprite so you have an equal amount of pictures that can be shown above and below the hero.
Use a wait 0.0 afterwards to avoid lag at all costs.

PP Event: Hero Display

[Code]:

<>Show Picture: 25 {Idle_Right_1} [Hero X, Hero Y]

<>Wait 0.0

<>End

Next, you need to set up your Key inputs, Make a 3rd Variable called "Walk Key (L2,R3)" Those numbers are a reminder of the arrow key values, Left is 2 and Right is 3.

PP Event: Walking

[Code]:

<>Variable[0003] "Walk Key (L2,R3)" Set Equal to 0

<>Key Input Processing [Walk Key (L2,R3)] - (Left Arrow + Right Arrow, No wait)

<>If [Walk Key (L2,R3)] = 2 then

<><>Variable[0001] "Hero X" Subtract 1

<><>End

<>If [Walk Key (L2,R3)] = 3 then

<><>Variable[0001] "Hero X" Add 1

<><>End

<>Wait 0.0

<>End

Is that working for you?
Is the picture moving to the left and right when you press the arrow keys?
Damn right it is!
If you think the picture is moving too slow just increase the amount being added/subtracted from the [Hero X] Variable.

Lets take a little step up now shall we?
Make 2 switches: [0001]-Left, [0002]-Right and [0003]-Idle
Edit that code you just made to the following:

PP Event: Walking

[Code]:

<>Variable[0003] "Walk Key (L2,R3)" Set Equal to 0

<>Key Input Processing [Walk Key (L2,R3)] - (Left Arrow + Right Arrow, No wait)

<>If [Walk Key (L2,R3)] = 0 then

<><>Switch[0003] "Idle" turn ON

<><>End

<>If [Walk Key (L2,R3)] = 2 then

<><>Variable[0001] "Hero X" Subtract 1

<><>Switch[0001] "Left" turn ON

<><>Switch[0002] "Right" turn OFF

<><>Switch[0003] "Idle" turn OFF

<><>End

<>If [Walk Key (L2,R3)] = 3 then

<><>Variable[0001] "Hero X" Add 1

<><>Switch[0001] "Left" turn OFF

<><>Switch[0002] "Right" turn ON

<><>Switch[0003] "Idle" turn OFF

<><>End

<>[B]Call Common Event: [Frames Display][/B]

<>Wait 0.0

<>End

Time to make another Variable, lets use [0004] "Frame Number"
The following is a frame displayer and delayer, to make the framerate faster or slower per transition just increase or decrease the range between each frame display.
I will use a range of 4 as an example.

Called Event: Frames Display

[Code]:

<>Variable[0001] "Frame Number" add 1

<>If [Frame Number] is Greater than/Equal to 0

<><>If [Frame Number] is Less than/Equal to 4

<><><>Call Common Event: [Show Frame 1]

<><><>End

<><>End

<>If [Frame Number] is Greater than/Equal to 5

<><>If [Frame Number] is Less than/Equal to 9

<><><>Call Common Event: [Show Frame 2]

<><><>End

<><>End

<>If [Frame Number] is Greater than/Equal to 10

<><>If [Frame Number] is Less than/Equal to 14

<><><>Call Common Event: [Show Frame 3]

<><><>End

<><>End

<>If [Frame Number] is Greater than/Equal to 15

<><>If [Frame Number] is Less than/Equal to 19

<><><>Call Common Event: [Show Frame 4]

<><><>End

<><>End

<>If [Frame Number] is Greater than/Equal to 20

<><>Variable[0004] "Frame Number" Set Equal to 0

<><>End

<>End

The tutorial is reaching the end and so I will finish by stating how to show an animated, walking hero.
If you have more or less than 4 frames then add or remove the specific events needed
WARNING: The following gets a little repetitive.

Called Event: Show Frame 1

[Code]:

<>If Switch[Idle] is ON

<><>If Switch[Right] is ON

<><><>Show Picture: 25 {Idle_Right_1} [Hero X, Hero Y]

<><><>Else

<><><>Show Picture: 25 {Idle_Left_1} [Hero X, Hero Y]

<><><>End

<><>Else

<><>If Switch[Right] is ON

<><><>Show Picture: 25 {Walk_Right_1} [Hero X, Hero Y]

<><><>Else

<><><>Show Picture: 25 {Walk_Left_1} [Hero X, Hero Y]

<><><>End

<><>End

<>Label 1

<>End

Called Event: Show Frame 2

[Code]:

<>If Switch[Idle] is ON

<><>If Switch[Right] is ON

<><><>Show Picture: 25 {Idle_Right_2} [Hero X, Hero Y]

<><><>Else

<><><>Show Picture: 25 {Idle_Left_2} [Hero X, Hero Y]

<><><>End

<><>Else

<><>If Switch[Right] is ON

<><><>Show Picture: 25 {Walk_Right_2} [Hero X, Hero Y]

<><><>Else

<><><>Show Picture: 25 {Walk_Left_2} [Hero X, Hero Y]

<><><>End

<><>End

<>Label 1

<>End

Called Event: Show Frame 3

[Code]:

<>If Switch[Idle] is ON

<><>If Switch[Right] is ON

<><><>Show Picture: 25 {Idle_Right_3} [Hero X, Hero Y]

<><><>Else

<><><>Show Picture: 25 {Idle_Left_3} [Hero X, Hero Y]

<><><>End

<><>Else

<><>If Switch[Right] is ON

<><><>Show Picture: 25 {Walk_Right_3} [Hero X, Hero Y]

<><><>Else

<><><>Show Picture: 25 {Walk_Left_3} [Hero X, Hero Y]

<><><>End

<><>End

<>Label 1

<>End

Called Event: Show Frame 4

[Code]:

<>If Switch[Idle] is ON

<><>If Switch[Right] is ON

<><><>Show Picture: 25 {Idle_Right_4} [Hero X, Hero Y]

<><><>Else

<><><>Show Picture: 25 {Idle_Left_4} [Hero X, Hero Y]

<><><>End

<><>Else

<><>If Switch[Right] is ON

<><><>Show Picture: 25 {Walk_Right_4} [Hero X, Hero Y]

<><><>Else

<><><>Show Picture: 25 {Walk_Left_4} [Hero X, Hero Y]

<><><>End

<><>End

<>Label 1

<>End

The label is useless right now, but as new parts get added such as the JUMP command which will be in the next tutorial.

That's all for now, have fun making your platformer walk system.

Tutorials :: Platformer Tutorial - VOLUME I: Pixel Based Movement :: Ultima Island: A friendly online community focusing on game development. Games, Tutorials, Resources, Articles, and much much more...