Part 3: Let’s Make an Object!
Part 3-1: Let’s Add Official Assets with “Assets”!
In Part 3 we are going to prepare a Player Object, but first of all we have no images to use yet.
Let’s add some official assets into the game using the “Assets” function.
-
Switch to the Assets view using the function bar at the top.
-
Click “Import official assets”.
-
Expand “Side View Template Images”, select “player_meika.png” and press “Import”. This is a character template prepared for a side-view action game.
-
Just to be safe, let’s check that it was loaded properly. Switch “Folder” to “Graphics” and player_meika.png should be there. If it is not, import it again.
Part 3-2: Let’s Make the Player Object!
Next, let’s actually build the player.
-
Switch to the “Object” view.
-
Press the “+ New” button in the dock on the left.
-
The “Create New Game Object” window opens, so set the object name to “Player”. You can leave everything else at its default, but if anything differs, set it up like the image below and press “Create”.
-
A window asks whether to automatically configure the default movement input, so press “Yes”. This automatically sets up the keys for controlling the character with a gamepad or keyboard.
-
The player object is now created.
Part 3-3: Let’s Set Up Animations for the Player
Next, let’s build animations using the image we just imported.
-
Switch the tab above the preview to “Sprite Animation”.
-
Buttons appear in the middle of the screen. Press the lower “Load from template” button and choose “For side view”.
-
The “Load from Side View Template” window opens. This window loads images made in a specific format all at once and turns them into animations.
-
Let’s import the image right away. Click the “From Image List…” button in the upper right.
-
A list of the images in the project is displayed, so select player_meika, which we imported earlier, and press “OK”.
-
The image is loaded. What you see on the right is a preview of the animations to be loaded — 1. Idle through 6. Shoot are loaded automatically. What you see on the left is the wall collision (light blue rectangle), the hit collision (blue rectangle) and the attack collision (red rectangle), but they do not match the image, so they need to be adjusted by hand.
What are the leftover frames after Shoot?
This template is a parkour action template with 19 different animations. By switching the template field you can automatically load and configure all 19. We will not use them in this tutorial, so we are using the minimal template that uses only 6 of the animations.
-
Adjust the wall collision (light blue rectangle). The wall collision is the area that detects collisions with tiles and other objects.
Move the □ handles at the four corners of the light blue rectangle to fit the character. Roughly right is good enough, but be careful to align the feet neatly — otherwise the character will float above the ground or sink into it. -
Adjust the hit collision (dark blue rectangle). The hit collision is the area that gets hit by enemy attack collisions, so make it slightly larger than the wall collision.
-
Finally, adjust the attack collision. Since this is a platformer game, let’s make the attack collision appear only at the character’s feet.
Here is one important point: in an action platformer you can normally attack while jumping or falling, but not during other movements. So uncheck Enabled so that it becomes Attack Collision (Disabled). -
Once everything is set, press the Import button and you are done. Six animation sets have been created automatically.
-
Try selecting any animation you like and pressing the
play/stop button — the animation plays.
Part 3-4: Let’s Enable Attacks Only While Jumping or Falling
Because we disabled the attack collision during the import, the player cannot attack as things stand. Let’s fix that with “Collision Animation”.
If you forgot to disable it during the import, or got the collision position wrong...
-
Go back to the Preview tab for a moment.
-
There are “Wall Collision”, “Hit Collision” and “Attack Collision”, so choose the one you want to change.
-
You can adjust the collision just like during the import. (The disable setting is in the Inspector on the right.)
-
This is only a preview, so you need to apply it to the collision animation. Switch to the “Collision Animation” tab.
-
Select an animation in the animation set.
-
Press the “Sync initial key” button in the upper right and your edits from the preview are applied. Do this for each animation.
-
Select the “Collision Animation” tab to switch to it.
-
The look of the animation changes and the collisions are now displayed. On this screen you can change the position and size of each collision for every “frame” shown at the bottom.
-
Select “jump” in the animation set field. If you set things up correctly during the import, the attack collision at the feet should be transparent (disabled) rather than red.
-
Select the attack collision in the Element (some hidden) field.
-
In the jump (3 frames) field below, make sure frame 1 is selected. We are about to change the collision at the moment the jump starts.
-
In the Inspector dock on the right, uncheck the “Disabled” property.
-
Now the attack collision at the feet is red and enabled during a jump. The
in the upper left lets you preview the collision movement together with the animation. -
Next, select “air” in the animation set. “air” is the animation used for the falling state, so attacks need to be enabled here too. Repeat steps 4~7 and enable the attack collision on frame 1.
-
The attack collision is now enabled only while jumping and falling.
-
Finally, let’s save the data. Switch the tab back to Preview and press the “Save” button. (You can also save with the Ctrl+S shortcut.)
-
When a thumbnail appears next to the Player object in the dock on the left, the save is complete.
The Player Object is ready after Part 3, so next we will build the program with a visual script.