Walls and other solid objects

This will be pretty easy to do and apart from a few extra condition checks in your movement code everything else is really just a case of duplicating.

Obviously to begin with we are going to need a wall tile, for this tutorial I decided to go with the orange wall of blockade. Took a while to plan out and design before creating such a tile but here it is if you wish to use it, carefully.

The wall as usual is a .png. The .png canvas height is made to be 50 pixels, double the ground tile height. This means our object can be any height between 0 and 50 pixels and by halving the height attribute of the object we can always line it up with ground tile it is on top of.

For speed and ease I’ll be going back to the original source of tutorial 02 where the map is just directly in the array rather than loaded as XML from a database. Ralph, our playable character has also been added in. It shouldn’t be hard at all though to use a later code version as I said it really is just a case of repeating some steps.

Current source of all the isometric tutorials minus the loading/saving can be seen here:

http://glacialflame.com/tutorials/tiles/06/source.html

Step One – loading our isometric objects

Adding objects is simple. Duplicate the ground tile code and then draw it on top once our ground layer has been drawn. Using a second array for objects means for simplicity all we have to do is look up the array coordinates relating to the players desired position, if there is an entry then that coordinate is impassable.

So duplicate the map array and imagine for just now zero is passable and one is a wall.

var objectMap = Array([0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,1,1,0,0],[0,1,1,0,0,1],[1,0,1,1,0,1],[0,0,0,0,0,0],[1,0,1,0,1,0],[1,1,1,0,0,0]);

Also similar to when you added your playable character, duplicate the image arrays and update the loader. Around the same area as your tileDict and tileImg add:

var objectDict = Array("wall.png");
var objectImg = new Array();

In your loadImg() function add:

	for(var i=0;i<objectDict.length;i++){
		objectImg[i] = new Image();
		objectImg[i].src = objectDict[i];
		objectImg[i].onload = function(){
			loaded++;
		}
	}

in your loadAll() function update your loaded condition to check if all object images have been loaded like so:

if(loaded == tileDict.length + charDict.length + objectDict.length){

All done!

Step Two – Let the user personally reflect over our wall object

In order to draw the objects into our map go the function drawMap() and within the loops add the following, underneath var drawTile = ma… is just fine:

var drawObj = objectMap[i][j];

Now we want objects to be drawn on top of our ground so under our ctx.drawImage(tileImg[drawTile],xpos,ypos) and before our character drawing add the following:

if(drawObj){
ctx.drawImage(objectImg[drawObj-1],xpos,ypos-(objectImg[drawObj-1].height/2));
}

This should explain itself, if drawObj (which is equal to the current drawing coordinate in our array ) is anything above zero then… well… draw it. The reason for drawObj-1 is because our object images start at zero however in our object array we start at 1. Otherwise every 0 in our array would represent a wall.

You should now be able to run Ralph around the map behind and in front of walls.

Step Three – HALT! You can’t walk there Ralph

Finally we update our movement code to check if there is an object or not.

Within our checkKeycode(event) function we can throw in the following around our current movement code:

if(!objectMap[playerX-1][playerY]){
playerX--;
}

The if check makes sure that the desired players coordinates within the objectMap array is false allowing the player to move that direction. This is done for each direction like so:

case 38:
if(!objectMap[playerX-1][playerY]){
playerX--;
}
break;
case 40:
if(!objectMap[playerX+1][playerY]){
playerX++;
}
break;
case 39:
if(!objectMap[playerX][playerY-1]){
playerY--;
}
break;
case 37:
if(!objectMap[playerX][playerY+1]){
playerY++;
}
break;

And that’s it. Ralph can now run about our fields with only the orange walls of blockade preventing his fun.

Full source can be found here:

http://glacialflame.com/tutorials/tiles/06/

As always let me know how you get on!

All the best.

With Ed finishing up his honours at uni and myself being chained to work over the last month things have slowed down again. However with all the great feedback and emails we have been getting it’s about time this was pushed on!

Currently all we have covered is creating a map. Not any old map though, a map which is generated from an XML feed, 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 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:

Step One – removing the map editor save code (only if using Pt2 code of the saving tutorial)

The following tutorial stages are fine and ready to go with:

Mouse Control on Isometric Canvas tiles

http://glacialflame.com/tutorials/tiles/02/

Saving and loading from a database with PHP & XML in canvas Pt1

http://glacialflame.com/tutorials/tiles/03/

First thing we will do is remove any of the Save code you may have from the previous tutorial. As this is the actual game and not the editor none of it is required. (You will only have this code if you are editing the version created from the saving map tutorial.)

If you have the following remove:

<script src="DBSave.js" type="text/javascript"></script>
------
case 83:
          var db = new DBSave();
          db.saveMap(3,map);
break;
------

<select id="tile">
         <option value="0">Water</option>
         <option value="1">Grass</option>
         <option value="2">Swamp</option>
</select>

- Hit <strong>s</strong> to save.
------

if(map[xmouse][ymouse]){
         map[xmouse][ymouse] = document.getElementById('tile').value;
}
------

Step Two – loading up your character object

We will duplicate our tile images script for the most part so that we can load up Ralph in preparation for his interactivity.

We will add our character image holder at the top around the same area you have your tile dictionary and image holder array.

var charDict = Array("ralph.png"); // -- rename ralph.png to mimic your player image if Ralph wasn't good enough

var charImg = new Array();

We will use an array for the character images for multiple future reasons. You may want to keep non playable characters in this or multiple versions of your playable character relating to movement directions and so on.

Next up we need to edit our loadImg() function to include our character dictionary. Add in the additional loop:

	for(var i=0;i<charDict.length;i++){
		charImg[i] = new Image();
		charImg[i].src = charDict[i];
		charImg[i].onload = function(){
			loaded++;
		}
	}

Similar to the tile loop this just runs through all our images in the character array, loads them and increments the loaded variable.

In our loadAll() function edit the if statement so that it reflects the following:

if(loaded == tileDict.length + charDict.length){

Pretty obvious this will now make sure the loaded variable is equal to that of the arrays holding our images meaning every image is loaded and ready.

Step Three – get in there Ralph

We can throw Ralph into the map pretty simply really. Add the following global variables:

var playerX = 4;
var playerY = 4;

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

Finally add the following to the drawMap() function after the drawing of the tile:

if(i == playerX && j == playerY){
          ctx.drawImage(charImg[0],xpos,ypos-(charImg[0].height/2));
}

One thing to note here is we make use of the image height attribute to make sure the bottom of Ralph matches up with the bottom of the tile. Also for just now we will just use charImg[0] as Ralph is the 1st array entry.

Testing your script now you should see your player standing somewhere on your map. Obviously Ralph can move so last up to our simple player addition is to add key movement.

Step Four – I give you legs Ralph

For this I’ll be using the arrow keys however WASD as an alternative can be easily used etc.

Should you want to use different keys the easiest way to get the code is to add

document.title = keyCode;

after the initial conditional if check in the checkKeycode(event) function.

We can then add to the case statement to reflect our key movements like the following:

case 38:

        playerX--;

break;

38 is the key code for up, we decrease playerX by 1 when pressed, which will update the players position on screen as our graphics update loop is ran through. So our final checkKeycode function reflects the following:

function checkKeycode(event) {
var keycode;
  if(event == null)
  {
    keyCode = window.event.keyCode;
  }
  else
  {
    keyCode = event.keyCode;
  }
  document.title = keyCode;
  switch(keyCode)
  {
	   case 38:
			playerX--;
	   break;
	   case 40:
			playerX++;
	   break;
	   case 39:
			playerY--;
	   break;
	   case 37:
			playerY++;
	   break;
	   default:
	   break;
		}
}

And that should be everything you need to add a moveable player.

As always the final code can be seen here:

http://glacialflame.com/tutorials/tiles/05/

Will write up the objects tutorial tomorrow which will include a quick simple passable and non passable condition check allowing for trees/grey walls etc.

After that I think I will cover changing some of this stuff to objects to allow for individual tile properties and so on. But might need to wait a week or so for that part… work .

Let me know how you get on with this!

All the best.