Vanilla JS Tutorials

JsIso Tutorials

RSS feed

05 - Adding an Isometric player that can be moved

Adding Ralph from the vanilla player movement tutorial is easy in JsIso, we also get the ability to take advantage of the height map with no extra work.
In this sample we have added a second layer which could hold NPCs, Pickups, Players, Trees, Pylons, Water Towers, Walls of Winterfell... endless possibilities.

With the new layer "objectLayer" we apply the same properties as the "tileLayer", but we set - heightMapOnTop: true// We want to draw only on top of the heightmap.
This makes all graphics in this layer drawn on top, however for this tutorial we only want to draw Ralph, so we use the tileImageOverwrite property of layer.draw():

 if (i === ralphX && j === ralphY) {
       objectLayer.draw(i, j, ralphGraphic);
 }



As always, check out the live code viewer to fiddle, linked at the bottom:


require([
      'jsiso/canvas/Control',
      'jsiso/tile/Field',
      'jsiso/img/load',
      'jsiso/canvas/Input',
      'requirejs/domReady!'
    ],
    function(CanvasControl, TileField, imgLoad, CanvasInput) {

      // RGBA of color to use
      var tileColor = "(158, 154, 255, 1)";
      var groundColor =  "(100, 154, 100, 1)";

      // Our Tile Map
      var tileMap = [
        [groundColor, groundColor, groundColor, groundColor, groundColor, groundColor, groundColor],
        [groundColor, tileColor, groundColor, tileColor, groundColor, tileColor, groundColor],
        [groundColor, tileColor, tileColor, tileColor, groundColor, tileColor, groundColor],
        [groundColor, tileColor, groundColor, tileColor, groundColor, tileColor, groundColor],
        [groundColor, groundColor, groundColor, groundColor, groundColor, groundColor, groundColor]
      ]

      // Our Height Map 
      var tileHeightMap = [
        [0,0,0,0,0,0,0],
        [0,1,0,1,0,1,0],
        [0,1,1,1,0,2,0],
        [0,4,0,4,0,3,0],
        [0,0,0,0,0,0,0]
      ]

      // X & Y drawing position, and tile span to draw 
      var xrange = 8;
      var yrange = 8;

      // X & Y Coordinates of Ralph
      var ralphX = 1;
      var ralphY = 1;

      var ralphGraphic = null; // Will contain the image of Raplh once it has been loaded

      var context = CanvasControl.create("canavas", 640, 640, {});

      // Two layers - one for the ground, second layer for objects, player objects, NPCS, pickups, etc etc
      var tileLayer = new TileField(context, CanvasControl().height, CanvasControl().width);
      var objectLayer = new TileField(context, CanvasControl().height, CanvasControl().width);

      // Create our Input controls and pass through the CanvasControl to it
      var input = new CanvasInput(document, CanvasControl());
      // Pressed is the keycode of user input, and keydown means the button is down rather than press ended
      input.keyboard(function(pressed, keydown) {
        if (!keydown) {
          switch(pressed) {
            // Move player
            case 37:
              ralphY ++;
            break;
            case 39:
              ralphY --;
            break;
            case 40:
              ralphX ++;
            break;
            case 38: 
              ralphX --;
            break;
          }
          // Call draw Tile Map function
          drawTileMap();
        }
      });

      var images = [
        {
          graphics: [
            "/img/game/ground/blank-block.png" // The images we want to load using imgLoader
          ]
        },
        {
          graphics: [
            "/tutorials/img/ralph.png"
          ]
        }
      ];


      function drawTileMap() {
        // Clear drawn map before clearing
        context.clearRect(0, 0, CanvasControl().width, CanvasControl().height);
        // Loop through our tiles and draw the map  
        for (i = 0; i < 0 + xrange; i++) {
          for (j = 0; j < 0 + yrange; j++) {
            tileLayer.draw(i, j);
            if (i === ralphX && j === ralphY) {
              objectLayer.draw(i, j, ralphGraphic);
            }
          }
        }
      }

      // imgLoad uses Promises, once the images have loaded we continue and use the returned imgResponse
      imgLoad(images).then(function(imgResponse) {

        // set Raplphs image, imgResponse[1] because it was the second list of graphics to be loaded
        ralphGraphic = imgResponse[1].files["ralph.png"] 

        tileLayer.setup({
          title: "Ground Layer",
          layout: tileMap,
          isometric: true, // Flag used to layout grid in isometric format
          tileHeight: 50,
          tileWidth: 100,
          heightMap: {
          map: tileHeightMap,
          // imgResponse[0] contains the first set of grpahic files[] we placed in the graphics array
          heightTile: imgResponse[0].files["blank-block.png"],
          offset: 0
          },
          shadow: {
            offset: 50, // Offset is the same height as the stack tile
            verticalColor: '(5, 5, 30, 0.4)',
            horizontalColor: '(6, 5, 50, 0.5)'
          }
        }); 
        // Object Layer
        objectLayer.setup({
          title: "Object Layer",
          isometric: true, // Flag used to layout grid in isometric format
          zeroIsBlank: true,
          layout: tileMap,
          tileHeight: 50,
          tileWidth: 100,
          heightMap: {
            map: tileHeightMap,
            offset: 50,
            heightMapOnTop: true// We want to draw only on top of the heightmap
          }
        });

        // Rotate our entire Map 
        tileLayer.rotate("left");
        objectLayer.rotate("left");

        // Set an offset so our map is on screen
        tileLayer.setOffset(200, 100);
        objectLayer.setOffset(200, 100);
        
        // Call draw Tile Map function
        drawTileMap();
      });
    });

Check out the View Source to see tutorial.
Up Down Left Right to move Ralph

Tutorial Outcome (View & Run Source)

9 comments

  1. This is great, awesome to continue learning how to maneuver this stuff, thank you. carpet cleaners medicine hat

    painters brandon mb Sun, 28 Apr 2019

  2. What an information-rich article! I'm glad I found you guys
    https://www.handymanservicesbrisbane.com

    — Alex P Wed, 15 May 2019

  3. It’s very informative and you are obviously very knowledgeable in this area. garena free fire playerunknown's battlegrounds

    — samuelddarden Wed, 29 May 2019

  4. Wow! Amazing tutorials on adding isometric player. Very detailed information you have here! Thanks a lot! accident towing in ashburn va

    — Aryan Tue, 4 Jun 2019

  5. You have a great detailed information, I'm impressed on how you presented the important things. Keep it up! lawn care services

    — Daniel Perez Fri, 7 Jun 2019

  6. It's my pleasure to find this amazing website who provides mostly unseen information about every single topic which is i really like it. click here

    — Joshua A. Price Mon, 10 Jun 2019

  7. Nice job, I really like how your site looks. tree trimming

    — fred luis Wed, 12 Jun 2019

  8. Waow this is quite pleasant article, my sister love to read such type of post, I am going to tell her and bookmarking this webpage. Thanks

    voyante sérieuse par téléphone Thu, 11 Jul 2019

  9. This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free.

    voyance très fiable Sat, 13 Jul 2019

Please insert the result of the arithmetical operation from the following image:

Please insert the result of the arithmetical operation from this image. =