Vanilla JS Tutorials

JsIso Tutorials

RSS feed

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)

35 comments

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

    TerrellReday Sun, 28 Apr 2019

  2. Как Открыть Страховую Компанию, Агентство Или Брокера?

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


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

    почта банк

    SylviaTow Mon, 29 Apr 2019

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

    Davidintit Fri, 17 May 2019

  4. 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

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

    Davidintit Sat, 1 Jun 2019

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

    Davidintit Sat, 1 Jun 2019

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

    Davidintit Sat, 1 Jun 2019

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

    Davidintit Sun, 2 Jun 2019

  9. 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

  10. 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

  11. Thank you for providing this tutorial. curry wallpaper

    — SAMS Thu, 1 Aug 2019

  12. 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

  13. You did a great job in giving us with your nice tutorial! Kudos. business signs Cincinnati Ohio

    — Danny Tue, 10 Sep 2019

  14. Thanks for sharing the code.

    Landscaping Service Mon, 16 Sep 2019

  15. Wow, nice! Thanks for the share man.

    Sven Wed, 18 Sep 2019

  16. Thank you for this tutorial. Im just hoping that it will be easy for me to follow the steps you have shared here.
    Gian | concrete company fort smith ar

    — Gian Stacey Mon, 23 Sep 2019

  17. I always keep coming back here for more tutorials. Thanks for sharing this site! Roofing Ashburn VA | Siding Ashburn VA

    — Michele Hidalgo Tue, 24 Sep 2019

  18. Good job on this tutorials! Keep it coming! towing company & repair shop

    — Rheed Tue, 24 Sep 2019

  19. Thanks for this website. I learned a lot.

    warm sculpting Tue, 24 Sep 2019

  20. I've been visiting your tutorial many times. Houston Stamped Concrete

    Houston Stamped Concrete Wed, 25 Sep 2019

  21. I was wondering if I can use it at home. Big thanks. Tacoma Landscapings

    Tacoma Landscapings Wed, 25 Sep 2019

  22. This is great information. Thanks so much

    water softener
    dog trainers
    tree service Bellingham
    MMA Training

    Michael Coleman Mon, 30 Sep 2019

  23. Good job! You guys do a great blog, and have some great contents. Keep up the good work. https://www.asphaltpavingbrooklynny.com/

    — Juven Mon, 30 Sep 2019

  24. Thanks for the tutorial. That height map is so cool. I didn't realize it could be this simple.
    stump removal rio rancho

    — tree care rio rancho Tue, 8 Oct 2019

  25. This is amazing. Thank you so much for sharing this information! fencing company charlotte

    — Michael Thu, 10 Oct 2019

  26. A simple yet very useful tutorial. Thanks for sharing this!
    Towing Arlington VA
    Towing Manassas VA
    Towing Herndon VA

    — Mike Thu, 10 Oct 2019

  27. Awesome! Never thought that is just simple based on tutorials. Thanks anyway...
    www.phillytowingservice.com
    columbiatowingservice.com
    towingleesburgva.com
    towingsterlingva.com

    — Rhey Thu, 10 Oct 2019

  28. Thanks for sharing, it helps me a lot. Houston 360

    Houston 360 Mon, 14 Oct 2019

  29. I'm glad to have this article that you've posted. Thank you! | roof repair

    — Dan Wed, 16 Oct 2019

  30. Wow! I love all these tutorials. It really helps me a lot! Thank you so much!
    Plumber Alexandria VA
    Plumber Arlington VA
    Plumber Chantilly VA
    Plumber Springfield VA
    Plumber Woodbridge VA

    — Kyle Wed, 16 Oct 2019

  31. I really enjoy reading your tutorials, this helps me a lot thank you for sharing this. www.carpetcleaning-phoenix.com/

    — Somphie Sun, 20 Oct 2019

  32. Great post! I'm an avid visitor of your site, I enjoyed your tutorials.| images printing little rock

    — AnnaS. Thu, 24 Oct 2019

  33. Thanks for sharing this tutorial, it's a big help to us. | http://rdmedicalproducts.com

    — Meg Wilson Fri, 25 Oct 2019

  34. http://www.sanbernardinolandscape.com/
    http://www.normantreecare.com/
    http://www.chandlerfencecompany.com/
    http://www.crelectrician.com/
    http://www.lawnsiouxfalls.com/
    http://www.rapidcityconcrete.com/
    https://www.snowmobilerentalscolorado.com
    https://www.madmountainadventure.com

    james ryan Thu, 7 Nov 2019

  35. Got confused with the offset value given on the following,
    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,line marking brisbane

    heightTile: imgResponse[0].files["blank-block.png"], // imgResponse[0] contains the files[] we placed in the graphcis array for loading
    offset: 0

    — jinky Thu, 21 Nov 2019

Please insert the result of the arithmetical operation from the following image:

Please insert the result of the arithmetical operation from this image. =