02 - Creating a simple Isometric Height Map

A simple example of using a heightmap in JsIso with a graphic.

Using the same code as the previous with isometric set to true we also introduce the 'jsiso/img/load' module for handling our graphics. As well as the height map properties applied to the Tile Layer, we apply a basic offset for the drawing using .setOffset(). setOffset takes in X and Y arguments e.g. setOffset(10,200);.

The map is built from RGBA colors.


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

      // 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]
      ]

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

      // 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, {}, "main");

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

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


      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: 40,
          tileWidth: 80,
          zeroIsBlank: true,
          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
          },
        });

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

        // Set an offset so our map is on screen
        tileLayer.setOffset(300, 300)
        
        
        // 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);
          }
        }
      });
    });

Tutorial Outcome (View & Run Source)

14 comments

Как избавиться от боли в суставах? Пантогор - гель для суставов быстро избавит от боли в суставах без вреда для здоровья. Полная потеря дееспособности и жизнь без надежды на будущее - вот, что вам грозит, если вы не позаботитесь о своих суставах! Жить полноценной жизнью или провести остаток своих дней в инвалидном кресле - решать вам! По данным Всемирной организации по борьбе с болезнями суставов, 80% людей в мире имеют проблемы с суставами. Самое страшное, что заболевания суставов приводят к параличу и инвалидности. На сегодняшний день есть одно единственное средство, которое отличается от всех существующих до этого средств. Это средство Пантогор. Основной компонент Пантогора - панты канадского марала. Панты канадского марала активируют природные силы организма и запускают процесс его самовосстановления. Все остальные компоненты действуют синергически - дополняют и усиливают действие друг друга. Прием средства Пантогор гарантирует вам избавление от боли в суставах всего за 1 курс. Внимание! Акция действует только на территории России и стран СНГ! Успейте оформить заказ по выгодной промо-цене! Заказать Пантогор Здесь --> http://c.trktp.ru/ud6b

— TerrellReday Sun, 28 Apr 2019
Как Открыть Страховую Компанию, Агентство Или Брокера?

-----------------------------------
Там же можно ознакомиться с информацией о тарифах на карту «Мир». Такие организации в большинстве своем не требуют посещения их офиса, а переводят деньги сразу на банковскую карту заказчика. Если ответ по заявке окажется положительным, Вам, как без пяти минут новоиспеченному заемщику, останется сделать только одно: прийти в банк, подписать кредитный договор и получить деньги. Если должник не мог вернуть займ, он переходил в руки заемщика, тот заключал его в долговую тюрьму, но в течение месяца должника еще можно было выкупить. Если решили сохранить свой старый номер, то нужно запастись терпением. Многие говорят об удобстве сервиса, но есть и такие, кому приходилось сталкиваться с определенными трудностями. Ситибанк предлагает взять кредит для тех, у кого уже есть несколько кредитов, но у него проблемы с их погашением. Оказывается , что кредит не закрыт и набегает штраф и проценты! А в течение нескольких дней. Дальше вносим необходимую сумму в купюроприемник, и если вносимая сумма будет превышена суммы оплаты, тогда банкомат предложит внести ее на счет мобильного телефона. Сложно представить смартфон без мобильного интернета.

Перейдите ниже по ссылке, чтобы получить кредит:

почта банк

— SylviaTow Mon, 29 Apr 2019
«Папиловит» — быстро и безопасно избавит от любых папиллом и бородавок.
Наш сайт: https://lcokbhlw.bestseller-super.ru

— Davidintit Fri, 17 May 2019
Hi, after reading this awesome piece of writing i am too glad to share my knowledge here with colleagues. zombs royale

— samuelddarden Wed, 29 May 2019
«Папиловит» — быстро и безопасно избавит от любых папиллом и бородавок.
Наш сайт: https://lcokbhlw.bestseller-super.ru

— Davidintit Sat, 1 Jun 2019
«Папиловит» — быстро и безопасно избавит от любых папиллом и бородавок.
Наш сайт: https://lcokbhlw.bestseller-super.ru

— Davidintit Sat, 1 Jun 2019
«Папиловит» — быстро и безопасно избавит от любых папиллом и бородавок.
Наш сайт: https://lcokbhlw.bestseller-super.ru

— Davidintit Sat, 1 Jun 2019
«Папиловит» — быстро и безопасно избавит от любых папиллом и бородавок.
Наш сайт: https://lcokbhlw.bestseller-super.ru

— Davidintit Sun, 2 Jun 2019
I’ve been visiting your tutorials for a while now and I always find a gem in your new posts. Thanks for your usual wonderful effort. click here

— Joshua A. Price Mon, 10 Jun 2019
I just happened upon your blog and liked to comment that I have really enjoyed reading your entries. I'll be subscribing to your feed and I hope you post again soon. tile installer

— fredluis Wed, 10 Jul 2019
Thank you for providing this tutorial. curry wallpaper

— SAMS Thu, 1 Aug 2019
t’s difficult to find educated people for this topic, but you sound like you know what you’re talking about! Thanks! www.sunnysprinklerrepairorlando.com

— Cassandra D. Everhart Fri, 16 Aug 2019
You did a great job in giving us with your nice tutorial! Kudos. business signs Cincinnati Ohio

— Danny Tue, 10 Sep 2019
Thanks for sharing the code.

— Landscaping Service Mon, 16 Sep 2019

Vanilla JS Tutorials

JsIso Tutorials

02 - Creating a simple Isometric Height Map

Tutorial Outcome (View & Run Source)