How to make controls for a top-down player (RPG style)

Knowledgebase / How to make controls for a top-down player (RPG style)

We’re going to create a script for your player that will give it top-down/RPG style controls, so you can walk around the level with the arrow keys (left, right, up, and down).

ezgif-3783531677

Step 1: Triggering movement with the Keypress Event

In this example, we’re using the Topdown Tanks pack from the Marketplace.

Screen Shot 2016-06-13 at 4.28.53 pm

From inside your level, find a character (or any game object) that you want to use as your top-down player. Right-click on it and select Add Script.

Screen Shot 2016-06-13 at 4.23.03 pm

We want to make the character move around by pressing the arrow keys on the keyboard. To start this off, we need the block “When the player presses key” from Events. Drag this block out into the workspace, and click on “key: backspace” to change the key to right arrow.

To get the character moving to the right, grab the “set velocity x” block from Physics, and drag it into the event block. Set the velocity to 200 (you can tweak this number if you’d like).

Screen Shot 2016-06-13 at 4.24.21 pm

Click Play to make sure this script works so far. When you press the right arrow key on your keyboard, the character should start moving to the right.

Step 2: Duplicate movement for all 4 directions

Let’s add movement in all 4 directions. Click Edit to return to the script editor. We’ll keep working on the script we’ve built.

Make 3 more copies of the “When player presses key” block by right-clicking on the block, and selecting Duplicate. Change the duplicates to left arrow, up arrow, and down arrow.

  • In the left arrow block, set the x velocity to -200.
  • In the up arrow block, change the x velocity to y velocity, and change the number to -200.
  • In the down arrow block, change the x velocity to y velocity, and the number to 200.

Screen Shot 2016-06-13 at 4.32.11 pm

Now test the game out again, and use all the arrow keys to move around.

Step 3: Rotation

The character should turn around to face towards the direction that they are moving. Grab the “Set rotation of myself” block from Transform, and drag out 4 copies of it. Drag each “Set rotation” block underneath the “Set velocity” blocks.

  • In the left arrow block, set the rotation to 270.
  • In the up arrow block, set the rotation to 0.
  • In the down arrow block, set the rotation to 180.
  • In the right arrow block, set the rotation to 90.

presses

Play your game to see your character rotate. If your character faces the wrong way, go back and edit the rotation numbers until they work correctly.

Step 4: Fixing off-centre rotation with Anchor Points

The character looks a little strange when it rotates. This is because it is rotating around an anchor point at its top-left corner. We can adjust its anchor point to centre its rotation around the middle.

We only need to do this once at the start, so grab “When created” from Events, and then grab “Set anchor point x of myself” from Transform, and drag it inside the “When created” block.

Screen Shot 2016-06-13 at 4.44.18 pm

The anchor point should be set to the middle of the object, which we can determine as half the width of the object. Grab the “_+_” block from Operators, drag it into the “set anchor point x of myself” block, and click on the + to change it to ÷.

Grab the “actual width of myself” block from Transform, and drag it into the left side of the “_÷_” block. Then grab the “0” block from Operators, and drag it into the right side, and change 0 to 2. This will set the anchor point to halfway along the width of the object.

Screen Shot 2016-06-13 at 4.45.13 pm

Now set the vertical anchor point position by duplicating that “set anchor point” block. Change the x to y, and width to height.

Screen Shot 2016-06-13 at 4.45.47 pm

Play your game to test out the improved rotation.

Step 5: Stopping movement when a key is released

When you press the arrow keys to move around, the character keeps on moving. Ideally the movement would stop when the arrow key is released, so we’ll fix that. We’ll add some true/false variables so that we can check which keys are being pressed, and then we’ll add blocks to detect when keys are released so that we can stop the player’s movement.

First, create 4 new true/false property variables for “moving left”, “moving right”, “moving up”, and “moving down”. Grab “set true/false i” from the Properties section of Operators and drag it out into the workspace. Click on “i” and select “New variable…”

Screen Shot 2016-08-04 at 12.18.55 pm

Name this variable “moving left”, and then repeat this 3 more times for “moving right”, “moving up”, and “moving down”.

In each key press block, make sure the appropriate variable is set to true, e.g. “When player presses left arrow, set true/false left to true” (you can find the “true” block in Operators).

Screen Shot 2016-08-04 at 12.04.51 pm

Then duplicate the 4 “When player presses key” blocks, and change the duplicated blocks to “When player releases key”. Remove the “set rotation” blocks from these duplicate events, since we don’t need to rotate when a key is released. We also want to change these new variables to false when the keys are released, e.g. “When player releases left arrow, set moving left to false”.

Screen Shot 2016-08-04 at 12.10.02 pm 1

Now so that we don’t accidentally stop the player from moving if they’re already moving in the other direction, we’ll add blocks to check if the player is moving in the opposite direction, and if they aren’t then we’ll make sure their velocity gets set to 0. Grab these blocks:

  • “if” (from Control Flow)
  • “true/false moving right” (from Variables)
  • “_=_” (from Operators)
  • “false” (starts as “true” from Operators)

Connect those blocks together so they read “if true/false moving right = flase”, and then drag “set velocity x 0” inside the “if” block. These blocks should go inside “When player releases left arrow”.

Screen Shot 2016-08-04 at 12.11.34 pm

Then make 3 more duplicates and put them in the other key release blocks. Don’t forget to make sure that up and down use “set velocity y 0” instead of “set velocity x 0”.

Screen Shot 2016-08-04 at 12.13.20 pm

Play your game again to see the movement stop when you release the arrow keys.

 

Step 6: Preventing diagonal movement

To prevent diagonal movement, we’ll constantly check which way the player is facing, and if the player is facing left or right (on the x-axis) we’ll stop vertical movement (on the y-axis), and if the player is facing up or down we’ll stop horizontal movement.

Grab the “Constantly” block (from Events) and drag these blocks inside it:

  • “if” (from Control Flow)
  • “rotation of myself” (from Transform)
  • “_=_” (from Operators)
  • “0” (from Operators)
  • “set velocity x 0” (from Physics)

Arrange the blocks in this way: “if rotation of myself = 0 (that means the player is facing up) then set velocity x to 0”

Screen Shot 2016-08-04 at 12.34.58 pm

Then duplicate these blocks 3 times for the other 3 directions: rotation = 90 (right), rotation = 180 (down), and rotation = 270 (left).

Screen Shot 2016-08-04 at 12.35.25 pm

Test your game out to see movement restricted horizontally and vertically.

 

Step 7: Getting the camera to follow the player

We can no longer see the player if it moves outside of the game screen, so let’s get the camera following the character. Grab the “Constantly” block from Events, and drag “Pan camera to 0 x 0 y” (from Looks) inside it. Click on “Pan” and change it to “Snap”.

Screen Shot 2016-06-13 at 4.52.02 pm 1

Then grab “x position of myself” from Transform, as well as “_+_” from Operators, and click on the + to change it to . Drag the “x position of myself” block into the left side of the “_-_” block, and then grab the “0” block from Operators, and drag it into the right side. Click on 0 and change it to 384. Drag all of these blocks into the first slot in the “Snap camera” block.

Screen Shot 2016-06-13 at 4.52.29 pm

Now duplicate the “x position of myself – 384” blocks, and drag them into the second slot in the “snap camera” block. To set the camera following the player vertically, in the duplicated block, change the x to y, and change 384 to 256.

Screen Shot 2016-06-13 at 4.53.04 pm

Depending on the size of your Game Resolution, you may need to tweak 384 to another number, and 256 to another number to get the player character centred in the middle of the game.

Test your game by playing it. The camera will now follow the player wherever they move to.

Good job!