• Saturday , 6 June 2020

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

Code Canyon



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

Original source

3d Ocean

Related Posts

29 Comments

  1. Vissaeus
    September 6, 2017 at 20:04

    l fixed the bug that doesnt draw images without any onload functions.

  2. DragoGames
    September 6, 2017 at 20:04

    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. Check Norres
    September 6, 2017 at 20:04

    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

  4. SGT CendoL
    September 6, 2017 at 20:04

    Can request a copy of the code. Because in his video writing is not so clear please send a copy of his code via email taiey430@gmail.com I please help

  5. Esben Olsen
    September 6, 2017 at 20:04

    You could make the code a lot cleaner if you put all the tiles inside a spritesheet. this would also make you do a lot less work since you wouldn't have to check if the tile is "sand" or "grass". Take a look at this for more info ๐Ÿ˜€ https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps

  6. Ninja Briana
    September 6, 2017 at 20:04

    thank you so much this was really helpful

  7. Ethan Leyden
    September 6, 2017 at 20:04

    I don't talk to people who use Dreamweaver

  8. Art
    September 6, 2017 at 20:04

    Helped a lot!

  9. Dรกvid Elek
    September 6, 2017 at 20:04

    This tutorial is the best thank you ๐Ÿ™‚

  10. Svetlana Vostok
    September 6, 2017 at 20:04

    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.

  11. Esben Olsen
    September 6, 2017 at 20:04

    Thank you so much!

  12. Esben Olsen
    September 6, 2017 at 20:04

    I'm using Chrome to load it, I did a onload function.. but it still doesn't seem to work ๐Ÿ™

  13. KingSinghTube
    September 6, 2017 at 20:04

    Great Video! could you please do a tutorial on collisions of characters moving with keyboard input and colliding with map. tnx

  14. GGC_
    September 6, 2017 at 20:04

    Can you make tutorial how to scroll tiled map?

  15. Alexander Skladovski
    September 6, 2017 at 20:04

    using comicsans lol

  16. MrSem IsAwesome
    September 6, 2017 at 20:04

    Sorry, I am kinda new to this, what does the second statement in the For loops do? I know, I know, the condition for the loop to be executed, by why would it be if i or j < maparray.length? What does that do?

  17. BLACK PAW
    September 6, 2017 at 20:04

    Gracias brother por el aporte.

  18. Aurelioon
    September 6, 2017 at 20:04

    This is a very good video, it teaches because we have been taught, we think because you teach of this.Thank you for yet another AWESOME and EDUCATIVE video.

  19. Tamas Mujnoi
    September 6, 2017 at 20:04

    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. Rob Gibbons
    September 6, 2017 at 20:04

    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. Thierry Blankenstein
    September 6, 2017 at 20:04

    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. Pierre
    September 6, 2017 at 20:04

    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. Marco Meza
    September 6, 2017 at 20:04

    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.

  24. Zach Morris
    September 6, 2017 at 20:04

    It creates a div, but it doesn't fill my images into it

  25. Michael McDow
    September 6, 2017 at 20:04

    This is working for me in FF but not GC? Any thoughts?

  26. morgan caron
    September 6, 2017 at 20:04

    Really great. Thanks !

  27. Pinkie Pie
    September 6, 2017 at 20:04

    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.

  28. Scott Matson
    September 6, 2017 at 20:04

    This is good.ย  I am looking for an example of a hex map.ย 

  29. ta da
    September 6, 2017 at 20:04

    How would I go about checking which tile my player is on ?

Leave A Comment

You must be logged in to post a comment.