• GitHub Repository
• Tile-Based Tutorials

Vanilla JS Tutorials

• 01 - Creating a simple Tile Engine

• 02 - Creating a simple isometric Tile Engine

• 03 - Adding a controllable player

• 04 - Isometric Map Rotation

JsIso Tutorials

• 01 - Creating a simple Map with JsIso

• 02 - Creating a simple Isometric Height Map

• 03 - Applying shadows to isometric heightmap

• 04 - Rotating JsIso Isometric Map

• 05 - Adding an Isometric player that can be moved

Tweet

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)