Go back![hyperPad tutorial]()
Part 4: Creating Your Player
In Part 3 you learned how to create your first level. In this tutorial, we'll start turning our empty level into a game.
A Platformer is a game like Mario. Typically platformers have a character that can be controlled by a joystick, and can jump around to solve various puzzles.
This part of the guide builds on Part 3, and assumes that you have already created your level using the assets from the Platformer Starter Pack, which you can download from the Asset Shop.
You first need to add your player graphic to the object dock. Start by navigating to the Downloads folder in the Asset Library and locate the animated Green Space Man Character.
Tapping the animated character in the Asset Library, will show you all of the available animation cycles.
Since we don't want the player to look like he's walking even though he's standing still we'll use the "Stand" animation cycle. Tap on the "Stand" animation cycle to add it to the dock.
Note: If the animated graphic you're using doesn't have a stand or idle cycle, you can always select a single frame of an animation by holding your finger on the animation cycle, and selecting "View Frames" from the Asset Menu.
Now that you have your character on the Object Dock, you can simply drag it off the dock and into your scene.
Now we need to bring the character to life, and make it movable with a joystick. hyperPad makes this process really simple with the included behaviours.
First open the Object Properties by tapping the character you just dragged on to the canvas.
From the "Physics Tab" of the Object Properties, make your character a "Physics Type" by tapping the physics object icon just below the "Behaviors" button.
Note: physics objects, will adhere to the laws of gravity, and will react to other objects and forces.
Next tap on Behaviors button, to open the behavior editor and start the process of making your character playable.
The behavior editor has different categories displayed along the top bar, and behaviors in the lest on the left.
Since you added an Animation Cycle, a "Play Animation" behavior is already added on the behavior canvas.
From the "interaction" category, drag the "Joystick Controlled" behavior onto your canvas.
As soon as this behavior is added, it will also automatically create and add a joystick on your GLOBAL UI Layer. If you already had a joystick added to your UI layer, the behavior will automatically use that instead of adding one for you.
At this point, you can press play and run your game! You may however notice, that the player just slides around the screen...
Lets make the game look a bit better by adding some animations to our player.
We'll start off by making the character walk when moving the joystick left or right.
To do this you need to view the "advanced" interaction behaviors. While in the "Interaction" category, tap the "Advanced" option on the bottom of the behavior list.
From the "advanced" list, add "Joystick Left" and "Joystick Right" to the canvas.
Next, from the "FX" category, add the "Play Animation" behavior and connect both the Joystick Left and Right to this newly added Play Animation.
Now, tap the "Play Animation" Behavior to view the Behavior Properties.
The first box at the top is the object you want to apply the animation to. hyperPad automatically selects the current object.
Note: You can tap here and select any other object in your scene if you wanted. We don't want to do that right now, so we'll leave it alone.
The next box below, represents the animation that you want to play. Since there is no animation to play, it is blank.
Tap the empty box to select an animation.
Notice that a film strip appears along the bottom of the screen. Tap the Asset Library Icon, to add an animation cycle to the film strip.
Navigate to the animated "Green Spaceman" character, and select the "Walk" cycle. Notice that each frame of the animation have automatically been added to the film strip. Tap any where to close the film strip and return to the properties.
Note: You can also add individual images or animation frames to the animation film strip. You're not just limited to pre-created animation cycles.
Next, from the Walk animation behavior properties turn off the toggle for "Loop Animation". We want this toggle switch off because the the Joystick Left and Right basically loop our animation for us since the animation will only happen while the joystick is left or right.
Finally, let's rename this behavior so it is easier to find later. From the behavior properties tap the behavior name at the very top. This will bring up a keyboard, and allow you to type a new name for the behavior. Lets call it "Walk Animation"
If you press play now, your character should move around with the joystick and be animated!
You can't have a platform game with out jumping! Making the player jump is a breeze in hyperPad.
While you're still in the Green Spaceman's behavior editor, tap the "Interaction" category, and from the behavior list on the left, drag on the "Jump with Button" behavior. Just like the Joystick Controlled behavior, the jump with button will also handle a lot of your objects movements for you, and automatically add a button to the Global UI Layer.
You can tap the jump behaviour to view its properties. From the jump behavior properties you can change settings like the sound to play, the power of the jumps, and more. For this tutorial, we're going to leave everything the same, except we'll change the power.
I had to make the power 18, to be able to jump over all the obstacle in the level created for Part 3. If you designed your own level, you may need to play with the jump value until it works for you.
If you press play now, you can see your player run around and jump. However, you may have noticed that the character continues to walk while jumping in the air... Lets fix that!
Lets start by playing an animation while you jump.
From the "Interaction" category add a "Started Touching" behavior, then tap the behaviour you just added to view the properties.
Now we need to change the behavior, to only work when you start touching the jump button. From the "Started Touching" behavior properties, tap the spaceman graphic in the top box.
This takes you to the "Object Selector" screen. From here you can select any object, or UI element in your scene. You probably can't select the button. This is because the Green Spaceman was on the Main Layer, and the button is on the Global UI Layer. From the layers bar on the right side of the screen, simply tap the "Global UI" layer. Now you can select the button.
With the button selected, tap the accept icon on the bottom.
Next add another Play Animation behavior, and connect it to the Started Touching behaviour we previously added.
Just like you did earlier, you can rename the behavior, and select an animation from the Behavior Properties.
To rename, tap the title of the behavior in the object properties and enter a new name. I used "Jump animation".
Like you did for the walk animation, you you need to select a cycle for the jump. Tap the second empty box in the behavior properties, and select the Jump animation cycle from the available Green Spaceman animations.
You'll also need to turn off the "Loop Animation" toggle switch, and the "Restore Frame" toggle switch.
If you press play now, you can see when you jump the character looks like he's jumping! However, there are still 2 small issues.
1) The character doesn't return to its standing animation when he lands
2) If you move the character while he's in the air, the character plays the walk animation in the air.
For the first issue, switch to the "Transform" behavior category, and tap the advanced button to view the advanced behaviors.
Now drag on the "Stopped Falling" behavior, and also drag on another "Play Animation" behavior from the FX category and connect it to the "Stopped Falling".
On the "Play Animation" you just added, select the Green Spaceman's
"Stand" animation cycle, disable the "Restore Frame" and "Loop Animation" toggles, and change the name of the Play Animation behavior to "Standing"
The Green Spaceman should now be able to jump, and look like he's standing when he lands.
For the second problem, we need to stop the animation from running while the character is jumping.
Switch to the "Custom" behavior category and drag on "Behavior Off", and connect it to the "Started Touching" behavior we added previously for the Jump Animation.
Now tap the "Behavior Off", and tap the empty box to select a behavior from the list. From the list, locate the "Play Animation" (Walk Animation) behavior which is connected to the Joystick left and right behaviors.
Next add a "Behavior On", and connect it to the "Stopped Falling" behaviour we previously added.
Again, tap the empty box, and select the Play animation (Walk Animation) behaviour that plays the walk animation.
If you press play now, your character should be able to move and jump around perfectly!
As you probably noticed, if you move too far the character goes off the screen. In traditional platform games the screen typically moves with your player. Take Mario for example, Mario always stays in the middle of the screen (with a bit of variance).
Let's make the screen move with the Green Spaceman, so he can never get off the screen.
While still in the Green Spaceman's behaviors, switch to the "Screen" category, and add the "Screen Follow" behavior. The "Screen Follow" behavior will move the screen with your selected object.
Next open the behavior properties for Screen Follow, and disable the toggle for "Follows Y". This makes it so the screen will willow your player left or right, but not up or down.
At this point if you press play you should be able to run through your level with an animated character, and have the screen move along with you.
You can download the finished version of Part 4 from the Hub and see it all in action.
In Part 5, we'll start adding a bit more Game Play elements by adding coins to pick up, and a score.
Enter your email to learn about great updates, contests, and new features
