04 - Rotating JsIso Isometric Map

In this example we introduce the 'jsiso/canvas/Input' module. We apply an event listener for keyboard input and when the buttons Q or W is pressed we rotate. At this point we then clear the current drawn image and redraw from the rotated perspective.


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;

      // use CanvasControl to create a simple canvas element
      // ID of Canvas,
      // width of Canvas,
      // Height of Canvas,
      // Optioanl: Any Style proprties we wish to apply,
      // Optional: The DOM ID location we wish to place the canvas in, otherwise it appends to Body
      var context = CanvasControl.create("canavas", 640, 640, {});

      var tileLayer = new TileField(context, CanvasControl().height, CanvasControl().width);

      var input = new CanvasInput(document, CanvasControl());  // Create our Input controls and pass through the CanvasControl to it
      input.keyboard(function(pressed, keydown) { // Pressed is the keycode of user input, and keydown means the button is down rather than press ended
        if (!keydown) {
          switch(pressed) {
            case 81:
              tileLayer.rotate("left");
              // Call draw Tile Map function
              drawTileMap();
            break;
            case 87:
              tileLayer.rotate("right");
              // Call draw Tile Map function
              drawTileMap();
            break;
          }
        }
      });


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


      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);
          }
        }
      }


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

        tileLayer.setup({
          layout: tileMap,
          isometric: true, // Flag used to layout grid in non isometric format
          tileHeight: 50,
          tileWidth: 100,
          heightMap: {
            map: tileHeightMap,
            heightTile: imgResponse[0].files["blank-block.png"], // imgResponse[0] contains the files[] we placed in the graphcis array for loading
            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)'
          }
        });

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

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

Check out the View Source to see tutorial.
Q & W to rotate.

Vanilla JS Tutorials

JsIso Tutorials

04 - Rotating JsIso Isometric Map

Tutorial Outcome (View & Run Source)