Vanilla JS Tutorials

JsIso Tutorials

RSS feed

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.

Tutorial Outcome (View & Run Source)

12 comments

  1. Nice post! Thanks for sharing.
    https://www.pestproofva.com/

    — Neil Mon, 1 Apr 2019

  2. I have been looking for this information for a long time, I was very surprised when I found it here.

    10.0.0.1 Thu, 4 Apr 2019

  3. Would appreciate any link on a video for this tutorial. Im still learning things.

    screen repair melbourne fl Thu, 23 May 2019

  4. I would like to thank for the efforts you have made in writing this post. I am hoping the same best work from you in the future as well. candy crush soda saga

    — samuelddarden Wed, 29 May 2019

  5. air conditioning replace great post i wish more people would make comments on this.

    don king Sun, 9 Jun 2019

  6. tree service outstanding content! If i had a few more sites I would comment them. O wait.. I DO!
    Boom! bathroom remodeling company elkhorn ne
    seo for hvac companies
    iowa excavating company
    tow truck orlando fl
    ford dealer brevard county

    Ripmane Sun, 9 Jun 2019

  7. I have no a clear idea about this. If any one have more information and to like to share this then please post his/her comment. I am very thank full for this act of kindness. i will come back soon is you have more idea about this. 100% commission Tampa

    — Joshua A. Price Mon, 10 Jun 2019

  8. I have been longing to learn all of this since then.

    junkyard davie fl Tue, 25 Jun 2019

  9. This is dope. How did you do this?

    stamped concrete birmingham al Mon, 1 Jul 2019

  10. The layering techniques is quite simple but direct. Would love to try this techniques on my own.

    line markers perth Tue, 2 Jul 2019

  11. Your way of putting things together is admirable. Unfortunately, Im still quite in the dark about all of this so I'll prolly come back when I can contribute a more decent comment. tree service

    — fredluis Wed, 10 Jul 2019

  12. Thanks for sharing your knowledge with us! This is great. | Villa Bellissima

    — Daniel Mon, 15 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. =