D4mations.com

Tutorial: Javascript Canvas Tutorial – draw a tile map for an RPG or Platformer in Javascript Game



Tutorial: Javascript Canvas Tutorial – How to draw a tile map for an RPG or Platformer in Javascript Game

Original source

d4mer

, , , , , , , , , ,

29 responses to “Tutorial: Javascript Canvas Tutorial – draw a tile map for an RPG or Platformer in Javascript Game”

  2. sometimes the images are not all loaded, here is how to fix it: just make a function and type the "for" loops in it and pass a parameter (context) in it and load it by the body
    with the onload function

  3. first of really bad practice to hard code the 2D array in the same file as the renderer, containing the render data and rendering that data to the screen are two separete concerns. I would suggest using multiple rendering strategies for multiple different maps and recieve the 2D array from a rendering function, also, store the images in an array and use the number as an index rather than building up a lot of ifs and switches

  10. hi and thanks for your time. would hexagonal tiles work in a similar manor as this tutorial? i do understand that i would have to offset the rows and columns, i am just stuck on the syntax to draw images. html, css, javascript based project.

  19. you could use i and j instead of posX and posY, and multiply it with tile size. it should give you the same result.
    so your code will be:
    var tileSize = 32;
    context.drawImage( grass, ( i * tileSize ), ( j * tileSize ), tileSize, tileSize );
    context.drawImage( sand, ( i * tileSize ), ( j * tileSize ), tileSize, tileSize );
    1st loop
    i = 0, 0 * 32 = 0
    j = 0, 0 * 32 = 0
    j = 1, 1 * 32 = 32
    j = 2, 2 * 32 = 64
    tileSize is defined before the loop
    hope it helps

  20. I really like this technique because the matrix (multidimensional array) with simple integers gives you a nice visual analog for your rendered map. You can quickly gauge how the resulting map will look.

  21. I know how to fix the bug that it doesnt draw the images:
    Well when the code loops through the for statement the images arent loaded yet.
    So what you could do is to set the for loop to when the images are loaded or in a loop.
    This is my code(It works! :D)

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Canvas Tile Map</title>
    <style>
    #canvas{
    border: 1px solid black;
    }
    </style>
    </head>
    <body>
    <canvas id="canvas" height="400px" width="500px"></canvas>
    <script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var mapArray=[
    [0,0,0,0,0,1,1,1,0,0],
    [0,0,0,1,1,1,0,0,0,0],
    [0,1,1,1,1,0,0,0,0,1],
    [0,1,1,1,1,1,1,0,0,0],
    [0,1,1,1,1,0,0,0,0,0]
    ];

    var grass = new Image();
    var stone = new Image();

    grass.src= 'grass.png';
    stone.src = 'stone.png';

    var posX=0;
    var posY = 0;

    grass.onload = function (){
    stone.onload = function (){
    for(var i=0; i < mapArray.length; i++){
    for(var j=0; j < mapArray[i].length; j++){
    if(mapArray[i][j]==0){
    context.drawImage(grass,posX, posY, 32, 32);
    }
    if(mapArray[i][j]==1){
    context.drawImage(stone,posX,posY,32,32);
    }
    posX+=32;
    }
    posY+=32;
    posX=0;
    }
    }
    }

    </script>
    </body>
    </html>

  22. The canvas appears but i wont render the images:

    <!doctype html>
    <html>
    <head>
    <style>
    #canvas {
    border: 1px solid black;
    }
    </style>
    </head>
    <body>
    <canvas id="canvas" height="400px" width="500px"></canvas>

    <script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    var mapArray=[
    [1,1,1,1,1,1,1,1],
    [1,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,0,1],
    [1,0,0,0,0,0,0,1],
    [1,1,1,1,1,1,1,1]
    ];

    var grass = new Image();
    var dirt = new Image();
    var wall = new Image();

    grass.src = 'grass.png';
    dirt.src = 'dirt.png';
    wall.src = 'wall.png';

    var posX = 0;
    var posY = 0;

    for (var i=0; i < mapArray.length; i++){
    for (var j=0; j < mapArray[i].length; j++){

    if (mapArray[i][j] == 0){
    context.drawImage(grass, posX, posY, 16, 16);
    }
    if (mapArray[i][j] == 1){
    context.drawImage(wall, posX, posY, 16, 16);
    }
    posX += 16;
    }
    posX = 0;
    posY +=16;
    }

    </script>
    </body>
    </html>

  23. This is a really good tutorial but I would like to know how to do something just a tad bit more advanced. I have a grid of 16x72px and most of the images are supposed to take up more than one tile (most common size would be 1×4 tiles but there are several sizes). Is there a way to have one image span multiple tiles? At the moment, I am doing things the hard way with drawing the images directly to the canvas one instance at a time. I must warn you that I am very new to HTML5.

  27. How does one go about detecting which tile say a character is on or nearby? Like if they were to walk on lava and take damage, or if they were to be running into a wall? Great tutorials by the way! Very informative and clear instructions.

Leave a Reply