Vanilla JS Tutorials

JsIso Tutorials

RSS feed

01 - Creating a simple Map with JsIso

A very simple example of creating a flat 2D map. By change two values, a Boolean (isometric: true), and a Number (tileWidth: 40) as seen in the instructions, you can easily change this 2D map into an Isometric 2D.5 map.

A basic JsIso Tile Field feature shown is .rotate(); this takes the argument either "left" or "right". This is similar to .flip(); which accepts "vertical" or "horizontal".

The map is built from RGBA colors.

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

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

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

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

      // use CanvasControl to create a simple canvas element
      var context = CanvasControl.create("canvas", 600, 300, {}, "main");

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

      tileLayer.setup({
        layout: tileMap,
        isometric: false, // Flag used to layout grid in non isometric format
        tileHeight: 80,
        tileWidth: 80 // Try setting isometric to true and half tileWidth to 40, for an isometric map
      });

      // Rotate our entire Map 
      tileLayer.rotate("left");
      
      // Loop through our tiles and draw the map  
      for (i = 0; i < xrange; i++) {
        for (j = 0; j < yrange; j++) {
          tileLayer.draw(i,j);
        }
      }
        
    });

Check out the View Source to see tutorial.

Tutorial Outcome (View & Run Source)

8 comments

  1. Woah!Thanks for this, man! I owe you a lot. Been struggling with this thing for weeks now/=.

    concrete driveway cincinnati Fri, 17 May 2019

  2. very informative. I wonder why the other experts of this sector don’t understand this. mobile legends pc

    — samuelddarden Wed, 29 May 2019

  3. I will make this as an example for my report this coming Friday. Thank you for making it convenient for me. :) Very understandable!

    roof repair cost estimator Tue, 4 Jun 2019

  4. I simply stumbled upon your blog and desired to say that I possess really enjoyed browsing your current posts. keep doing your great job and always gain my support. cheers for sharing this beautiful article. click here

    — Joshua A. Price Mon, 10 Jun 2019

  5. These codes are very important for our website! Superb!

    Washington SEO Tue, 11 Jun 2019

  6. Thank you so much! for sharing this because I've been thinking about this topic weeks already.
    r410a

    — Daniel Perez Tue, 18 Jun 2019

  7. I appreciate sharing your knowledge regarding about this topic. Thank you!
    | urgent care elite

    — Meggy Mon, 8 Jul 2019

  8. Excellent work, many thanks for sharing

    Rubbish clearance | CCTV Systems

    SEO Agency Durham Thu, 18 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. =