Vanilla JS Tutorials

JsIso Tutorials

RSS feed

03 - Adding a controllable player

Currently all we have covered is creating a map. Not any old map though, a map which is generated from a two dimensional array, a map which brings graphical jealousy to those with even the upper most advanced Photoshop skills.
For this is an isometric map. An isometric map we will now add a magnificent controllable cuboid square pyramid.

A square pyramid with depth like Ralph.

As we will be moving Ralph over our fields he will need to be like everything else a .png for the transparency, plus it is his preferred file type, bless him. You can download Ralph from this and bump him into your image folder:

For simplicity of this tutorial we will just load Ralph into our current list of images being loaded. Ideally you could use multiple image arrays, for land, characters, objects etc to help keep things organized and separate.

var tileGraphicsToLoad = ["/tutorials/images/water.png","/tutorials/images/land.png", "/tutorials/img/ralph.png"],

Next we can throw Ralph into the map pretty easily by giving him a tile position within the map. We set the initial position after our map array creation:
var playerX = 0;
var playerY = 3;

These will be the X and Y coordinates of Ralph and shall be updated whenever a player uses the arrows keys.

Add the following to the drawMap() function after the drawing of the tile:
if (playerX === i && playerY === j) {
    ctx.drawImage(tileGraphics[2], (i - j) * tileH + mapX, (i + j) * tileH / 2 + mapY - tileH);

We know Ralph is sitting as element 2 in the image array so we just draw him whenever our tile draw loops match the X and Y position.

Testing your script now you should see your player standing somewhere on your map. Obviously Ralph can move, so the last thing to do is add the key movement and let him be free.

For this we will be using the arrow keys, however WASD as an alternative can be easily used etc if you console.log the keyCode. We apply an event listener in our initial init call like this:
    isometric.addEventListener("keyup", function(e) {
      switch(e.keyCode) {
        case 37:
        case 39:
        case 38:
        case 40:

Depending on the keyCode result from a key up we send Ralph that direction. Note, we also call drawMap after each press, so that visually Ralph moves.
And that should be everything you need to add a moveable player.
One thing you may want to add is a clearRect() to the draw, this prevents fragments of Ralph still being displayed if the new drawMap() doesn't cover all of the previous draw:

ctx.clearRect(0, 0, 500, 500);

Tutorial Outcome (View & Run Source)