Vanilla JS Tutorials

JsIso Tutorials

RSS feed

02 - Creating a simple isometric Tile Engine

This tutorial covers switching from a tile map to an isometric tile map.

In this sample we make use of all the previous tutorial logic however we expand on it for images and isometric shaped tiles. We also tidy up our code by adding scope, getting rid of the onLoad <body> attribute and switch out fillRect for drawImage.

Isometric tiles are just as easy to achieve as a standard tile map. With a bit of shape alteration and minor positioning adjustment, you can change your flat 2D game concept into a user grasping “2D.5″ isometric engine, capable of graphical destruction and full user awe.

But where do you begin in creating such an experience?

To the drawing board!

So you start off with a 52×52 pixel square which represents part of the fields of Felderon, which gives your hero enlightenment and a sanithy increase while walked on, at the risk of a slight game ending seizure. Such a tile may look like this:

However this hero isn’t walking on any standard field of Felderon, he is standing on an isometric field of Felderon. So how do we change our tile to meet these requirements?

Basically we rotate it and half the height so our tile is now 52px wide and 26px tall. For drawing purposes it's best to keep both dimension values as even numbers. Instantly our field tile looks like it has some slight depth to it with the grass blades of pixel beauty growing out. For image format, pngs are used allowing alpha and the image overlap. This tile when placed into our soon to be coded engine would look like this:

So we have our tile and now we need to alter our previous example on creating a tile engine to match the isometric view.
Although our Felderon field tile is of a graphically inspiring status, we will need some other tiles to go along with it. Feel free to use this tile which represents the sea of despair, that when drank, generously reduces charisma with a 30% chance of sporadic teeth implosion.

Like the previous tutorial we have a map with each number representing a tile. We also have an array which will be used to store the loaded tile graphics.

var map = [

var tileGraphics = [];

Loading the desired images can be achieved with the following loop contained in our loadImg() function.

In this simple function for loading multiple tile images, tileGraphicsToLoad will hold all our tile images to be loaded, and our global variable tileImages array will contain the graphics for accessing.

function loadImg() {
  var tileGraphicsToLoad = ["/tutorials/images/water.png","/tutorials/images/land.png"],
      tileGraphicsLoaded = 0;

  for (var i = 0; i < tileGraphicsToLoad.length; i++) {
    tileGraphics[i] = new Image();
    tileGraphics[i].src = tileGraphicsToLoad[i];
    tileGraphics[i].onload = function() {
      if (tileGraphicsLoaded === tileGraphicsToLoad.length) {


Pretty simple code really, it runs through the length of your tileGraphicsToLoad and as each image is successfully loaded it increments tileGraphicsLoaded by 1.

Next we adjust our drawMap to be specific for an isometric view and to make use of our loaded images.

function drawMap() {
  var ctx = document.getElementById('main').getContext('2d');

  var tileH = 25;
  var tileW = 52;
  var mapX = 76;
  var mapY = 52;

  var drawTile;

  for (var i = 0; i < map.length; i++) {
    for (var j = 0; j < map[i].length; j++) {
      drawTile = map[i][j];
      ctx.drawImage(tileGraphics[drawTile], (i - j) * tileH + mapX, (i + j) * tileH / 2 + mapY);

Exactly the same as the first tutorial we loop through the array lengths however the tile positioning code is slightly different.
Taking the changes in size and the fact that we are now positioning for an isometric view into account we calculate the position accordingly.
drawTile is set as the value of the current map array tile, and used for getting the matching tile image from the tileGraphics array.

Next we add an init function that will be called once the page has finished loading. This function removes the Event Listner and calls for the engine tile images to be loaded via loadImg();.

function init() {
    isometric.removeEventListener('load', init);

And behold the fields of Felderon with the sea of despair flowing powerfully through it. That really is all there is to it as seen in the following Canvas element.

// Create the isometric scope.
// Tutorial Note: Wrapping all our code within a function this way means all 
// our variables and functions don't become globals. This prevents conflicts if you're using other scripts.
(function(isometric) {

  // Two Dimensional Array storing our isometric map layout. Each number represents a tile.
  var map = [

  var tileGraphics = [];

  function loadImg() {
    // Images to be loaded and used.
    // Tutorial Note: As water is loaded first it will be represented by a 0 on the map and land will be a 1.
    var tileGraphicsToLoad = ["/tutorials/images/water.png","/tutorials/images/land.png"],
    tileGraphicsLoaded = 0;

    for (var i = 0; i < tileGraphicsToLoad.length; i++) {
      tileGraphics[i] = new Image();
      tileGraphics[i].src = tileGraphicsToLoad[i];
      tileGraphics[i].onload = function() {
        // Once the image is loaded increment the loaded graphics count and check if all images are ready.
        if (tileGraphicsLoaded === tileGraphicsToLoad.length) {


  function drawMap() {
    // create the canvas context
    var ctx = document.getElementById('main').getContext('2d');

    // Set as your tile pixel sizes, alter if you are using larger tiles.
    var tileH = 25;
    var tileW = 52;
    // mapX and mapY are offsets to make sure we can position the map as we want.
    var mapX = 76;
    var mapY = 52;

    var drawTile;

    // loop through our map and draw out the image represented by the number.
    for (var i = 0; i < map.length; i++) {
      for (var j = 0; j < map[i].length; j++) {
        drawTile = map[i][j];
        // Draw the represented image number, at the desired X & Y coordinates followed by the graphic width and height.
        ctx.drawImage(tileGraphics[drawTile], (i - j) * tileH + mapX, (i + j) * tileH / 2 + mapY);

  function init() {
    // Remove Event Listener and load images.
    isometric.removeEventListener('load', init);

  // Add Event Listener to dectect when page has fully loaded.
  isometric.addEventListener('load', init, false);


Tutorial Outcome (View & Run Source)


  1. Thank you so much for these tutorials. I am currently working on a isometric html 5 game and these tutorials are really helping me to understand the basics of how the isometric view is done. Thanks again!

    — Kenny Fri, 30 Jan 2015

  2. You are more than welcome Kenny, I'm glad to hear they help a little! Thanks :).

    — Iain Sun, 1 Mar 2015

  3. Thank you for these well made tutorials. Thanks to them I can actually understand how this stuff works.

    — Alan Fri, 11 Dec 2015

  4. Plastic Surgeon Dr. Brzowski, serving Salt Lake City & Ogden, Utah Plastic Surgery expert, performs a wide array of cosmetic surgery procedures for residents
    how often should you get a chemical peel
    Loss of GRHL3 leads to TARC/CCL17-mediated keratinocyte proliferation in the epidermis Cell Death &ampe Therapy

    Zukstab Mon, 25 Mar 2019

  5. aller à bientôt tu en Wed, 27 Mar 2019

  6. Get answers to some of the most frequently asked questions about dermabrasion and other skin care procedures offered by Dr. John Kim.
    acne scars before and after chemical peel
    Minimally Invasive Rejuvenation of the Face and Neck, An Issue of Clinics in ... - Kenneth Rothaus -

    Zukstab Mon, 1 Apr 2019

  7. useful and interesting article, found a lot of useful information, glad to join your community! Wed, 3 Apr 2019


    MARINE Fri, 12 Apr 2019

  9. El servicio electrГіnico de verificaciГіn de elegibilidad de empleo E-Verify ha reanudado sus operaciones despuГ©s de no haber estado disponible por mГЎs de
    inteligencia artificial
    Un puntaje bajo de iq puede calificarlo para beneficios de seguridad social. judgelondonsteverson obteniendo seguridad social Obtenga una nueva tarjeta de seguridad social, nГєmero de telГ©fono de seguridad social, cambio de nombre de seguridad social, oficina de administraciГіn de seguridad social, oficinas de seguridad social

    Zyccorm Sat, 13 Apr 2019

  10. Really good explanation of the basics - thank you for sharing

    Commercial Cleaning Companies Tue, 16 Apr 2019

  11. Great guide, many thanks for sharing

    removals service

    Rubbish removal Wed, 17 Apr 2019


    MARINE Wed, 17 Apr 2019

  13. Breast Cancer - Causes, Signs, Symptoms & Prevention - Times of India
    [url=]lump under armpit hurts[/url]

    BOLWhova Fri, 19 Apr 2019


    MARINE Sat, 20 Apr 2019

  15. I have read your blog it is very helpful for me. I want to say thanks to you. I have bookmark your site for future

    — jams Mon, 22 Apr 2019


    MARINE Tue, 23 Apr 2019

  17. Thank you for making it understandable. I would appreciate it more if you can share a video on how you tweak it. Thanks!

    concrete repair yuma Thu, 25 Apr 2019

  18. I never thought creating isometric engine tiles could be this easy. Thank you so much for your help! I survived the semester because of this.

    concrete driveway contractors little rock ar Thu, 2 May 2019

  19. “ burned out ” fibrotic This was the first time Kimuras disease was observed as a pigmented area located on the hard palate. The diagnosis of melanoma first had to be ruled out. The
    [url=]Burnt top of mouth[/url]

    Bernphida Fri, 3 May 2019

  20. The dental hygienist salary in the US stands at $54,495 per year, while in Canada that is C$57,794 ($44,270) every year. Australia has an even lower pay for
    [url=]Dental hygienist jobs seattle[/url]

    Denkap Sun, 5 May 2019

  21. Creating a simple isometric Tile Engine is not an easy one, because this is so tricky and it's hard to understand, but I'm thankful to have this guide because it really helps me to pass the said process. Good Job!

    Cincinnati Channel Letter Signs Thu, 9 May 2019


    MARINE Thu, 9 May 2019

  23. I have encountered this on my college days and I never thought I could apply it on my present job today. Plus this will be a review material for me as well. Thanks for posting this! More power!

    Want to file or renew your social security site? visit our site

    Brielle Fri, 10 May 2019

  24. i did an randomly generated 2d isometric map generator thank to you !
    i will try to make a kinda FFTA clone someday
    maybe an MMOFFTA eventually if i make enough progress ( but that's an ultimate goal you know , i'd be glad to make a functionning FFTA clone in the first place )

    — sivmatt Tue, 9 Jan 2018

  25. Great post! Thanks for sharing these tutorials! Keep 'em posting!
    Aryan | Falls Church towing

    AryanMag Mon, 13 May 2019

  26. i will try to make a kinda FFTA clone someday

    domaineverest Mon, 20 May 2019

  27. I'm impressed with the process that you've shared, this is a big help to me for my future research. Thanks for posting!

    Top Mexico Destinations Wed, 22 May 2019

  28. Directory of Colorado Day Spas, Spa Hotels, Resort Spas, Retreats and Wellness Destinations. Our Guide to Spas in Colorado includes most of its major cities and destinations, including Denver, Aurora, Lakewood, Boulder, Vail, Telluride, the Hot Springs resorts, Colorado Springs and more .
    [url=]Reflexology techniques[/url]

    Pozzitub Sun, 26 May 2019

  29. 1. 静坐不能:药物如Haloperidol对治疗激动, 过动, 攻击, 刻板行为, 和情绪不稳有效, 其最常出现的副作用是过度镇静, 其他副
    [url=]Haldol iv[/url]

    Uhasen Mon, 27 May 2019

  30. DSM-IV states, "there is no assumption each category of mental disorder is a completely discrete entity with absolute boundaries" but isolated, low-grade and non-criterion (unlisted for a given disorder) symptoms are not given importance.
    [url=]anxiety disorder meaning in bengali[/url]

    Nonisot Tue, 28 May 2019

  31. The best PC gaming chairs will help improve your posture. They’ll provide lumbar support, arm support, and numerous controls to make adjustments. This allows you to customize your chair to your height and body type. To get something that covers all the bases, you’re going to have to shell out a lot of cash (at least a couple hundred dollars). Anything less and you’ll have to make
    [url=]medical malpractice[/url]

    ScrolRop Wed, 29 May 2019

  32. Your share is great. I read it very carefully and found it very true, you must have invested a lot of time in this topic. candy crush

    — samuelddarden Wed, 29 May 2019

  33. This release is really informative and shows a good example of a nature-friendly project we can all spend our time on.
    Thatcher's Tree Service Gainesville FL

    — Ronald M. Lynch Thu, 30 May 2019

  34. This content has really helped me - thank you very much for sharing. Please call us if you need a house clearance service, roller shutter doors or osteopathy.


    House clearances | Osteopathy Oxfordshire | Roller Shutter Doors Manchester

    — Jack Fri, 31 May 2019

  35. Pregnancy – If you are pregnant or nursing Contact Lens Wearers – Contact lenses must not be worn for a time specified by your surgeon prior to LASIK If you are unsure of whether or not you are a candidate for LASIK surgery, setup a screening with an ophthalmologist for a thorough evaluation.
    [url=]Prenatal spa package[/url]

    Cocomeeme Mon, 3 Jun 2019

  36. Oral surgery can be traumatizing and painful, but taking a few steps before and after surgery will greatly decrease your recovery time, and also ensure that you feel more comfortable. Above all, it is very important to consult with your surgeon about aftercare before the surgery takes place, as every medical professional has tips and tricks that may help you. You should also follow all
    [url=]Low income dentist[/url]

    DENhync Sun, 9 Jun 2019

  37. Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I’ll be subscribing to your feed and I hope you post again soon. click here

    — Joshua A. Price Mon, 10 Jun 2019

  38. The wisdom teeth dont bother me but the gum draft does I also felt sick after eating & took nasue medicine I was also on the IV & my stitches will dissolve within a week what foods should I eat to help keep the fooddown
    [url=]Wisdom teeth stitches coming out[/url]

    WINwex Mon, 10 Jun 2019

  39. Many women also experience painful or difficult coitus. Urethral involvement occurs in a large number of cases and is characterized by dysuria (painful urination) and frequent urination. The vaginal epithelium is the primary site of infection. Thus the v
    [url=]How yeast infection[/url]

    Suttivep Fri, 14 Jun 2019

  40. Find the best stocks to buy now -- TheStreets analysts and contributors offer their best stock picks for . These stock picks include technical trades and breakout stocks, short-squeeze
    [url=]What can you do for arthritis[/url]

    AcuraKet Tue, 18 Jun 2019

  41. I ought to about secure for my very own particular site like I see some dazing, in like course, pulled in managing your site?

    Hostinger coupons 2019 Thu, 20 Jun 2019

  42. EOW 2009, the largest European Wind Energy Conference and Exhibition will be hosted September 14 – 16 September 2009 in Stockholm, Sweden.
    [url=]acne scars before and after chemical peel[/url]

    DOLIFab Fri, 21 Jun 2019

  43. 2019-05-18 バレンシアガ キャップ logo baseball cap Bordeaux ※ご注文の際にご確認ください※ ・こちらの商品は海外からの取寄
    [url=]Deep fried egg rolls[/url]

    EGGfeta Sat, 22 Jun 2019

  44. Vi ringrazio per l'informazione! Stavo cercando e non poteva trovare. Lei mi ha aiutato!

    og&e Mon, 24 Jun 2019

  45. My lips are burned, I have sore on the inside of my lower lip, my tongue is raw and my taste buds are deadened. I can only hope it will correct itself now that I will discontinue use of this
    [url=]How to reduce tartar buildup on teeth[/url]

    Teskal Wed, 26 Jun 2019

  46. Nice.

    garena free fire player unknown's battlegrounds Thu, 27 Jun 2019

  47. Excellent article, many thanks for sharing

    Asbestos Garage Removal Manchester

    PVC Flat roofing Fri, 28 Jun 2019

  48. home automation manchester

    John Thu, 4 Jul 2019

  49. auto glass mirror repair springfield

    — Michael Sun, 7 Jul 2019

  50. It is a striking site. The Design looks character blowing. Continue working that way

    active target promo codes Sat, 13 Jul 2019


    — Gabernvl Mon, 15 Jul 2019

  52. Stay always advanced in the field of Cryptocurrencies with our real-time cryptocurrency news, Bitcoins and blockchain related updates, and many more such news.
    [url=]bitcoin tracker[/url]

    CepSand Sat, 20 Jul 2019

  53. I really enjoyed reading the blog and wish the writer congrats for writing such an informative blog JSiso. carpet cleaning

    — fredluis Thu, 25 Jul 2019

  54. You can do something much better but I still say this perfect. Keep trying for the best. subterfuge game

    — Patricia J. Clark Thu, 25 Jul 2019

  55. This is such an intuitive post regarding isometric tile map, I learn a lot. Thank you.
    office fitout melbourne

    — Lancelot Sun, 4 Aug 2019

  56. hope to read another kind of article like this. electrician

    — Cassandra D. Everhart Fri, 9 Aug 2019

  57. This article is such a nice and interesting one, I'm very satisfied with the provided contents. I hope more excellent articles would be posted in your website. Thank you so much for this and keep sharing.

    — Despol Ret Sun, 11 Aug 2019

  58. It is a striking site. The Design looks character blowing. Continue working that way
    zahnkliniken ungarn

    — Exalt Fri, 16 Aug 2019

  59. I Loved The Way You Discuss The Topic Great Work Thanks For The Share Your Informative Post.
    Online Marketing Project Help

    Online Marketing Project Help Wed, 21 Aug 2019

  60. Fantastic article for my removals company, many thanks for sharing

    Removals company Wed, 28 Aug 2019

  61. Seriously I am so glad there are so many incredible sources out there on the internet. Thanks you guys

    Blasting company Wed, 28 Aug 2019

  62. Simulation games can help overcome student resistance to thinking structurally about social class inequality, meritocracy, and mobility. Most inequality
    [url=]British social class[/url]

    VillaLop Thu, 12 Sep 2019

  63. Phenomenal Bathroom Sink Drain Plumbing Pipe Double Diagram Clogged Installing How bathroom sink plumbing works, including a diagram of the drain
    [url=]How to replace a bathroom sink faucet[/url]

    JoniLem Wed, 18 Sep 2019

  64. I like this post.

    tree pruning riviera beach Wed, 18 Sep 2019

  65. Perfect post.

    bathtub refinishing fort pierce Sat, 21 Sep 2019

  66. Good blog post.

    residential pest control palm beach county Sun, 22 Sep 2019

  67. I've been looking for a simplified explanation to execute this. Thank you so much!

    seo birmingham al Mon, 23 Sep 2019

  68. Life, ah, is full of love and can not start from scratch.

    louis vuitton outlet Mon, 23 Sep 2019

  69. louis vuitton outlet

    sac louis vuitton Mon, 23 Sep 2019

  70. Nice idea

    commercial fence contractors san jose Tue, 24 Sep 2019

  71. Very interesting topic

    remodeling contractors fort lauderdale fl Tue, 24 Sep 2019

  72. This is what I'm looking for. Thank you Tyler Fences

    Tyler Fences Wed, 25 Sep 2019

  73. Keep posting. It really works. Blackmon Plumbing

    Blackmon Plumbing Wed, 25 Sep 2019

  74. Very interesting topic

    tankless water heater nashville Wed, 25 Sep 2019

  75. I have read your article, it is very informative and helpful for me.I admire the valuable information you offer in your articles. Thanks for posting it.

    — Jason Williams Wed, 25 Sep 2019

  76. Thank you for your step by step tutorials. It really works. Mosaic Tree Counseling

    Mosaic Tree Counseling Wed, 25 Sep 2019

  77. Great post.

    bathroom remodeling nashville tn Thu, 26 Sep 2019

  78. Nice blog.

    electric water heater san diego Thu, 26 Sep 2019

  79. Great post shared

    desktop repair west palm beach Thu, 26 Sep 2019

  80. Nice post shared.

    fence repair nashville Fri, 27 Sep 2019

  81. It is a good article that discusses the topic at hand quite well. I am looking forward to read more articles from your site. Keep up the good work.

    pool screen repair port st lucie Fri, 27 Sep 2019

  82. Great survey, I'm sure you're getting a great response.

    tree pruning wesley chapel Fri, 27 Sep 2019

  83. Nice ideas.

    tree service riviera beach Sat, 28 Sep 2019

  84. Interesting ideas shared.

    tree removal service palm springs fl Sat, 28 Sep 2019

  85. There are a few tips that is not actually working for you to effectively choose the best watch for some guy. Mary Mary Tina Pregnant It is be easy, especially if have not exercised in years, to plan and follow through with your own exercise routine. If you take a the lifestyle you have been leading, you will see that this idea is very logical. First, you have developed life habits that do not
    [url=]How to get pregnant extremely fast[/url]

    ToriHox Sun, 29 Sep 2019

  86. Interesting ideas

    shahi qila Mon, 30 Sep 2019

  87. Interesting ideas shared.

    global asset management tokyo Wed, 2 Oct 2019

  88. function init() {
    isometric.removeEventListener('load', init);

    This function is init()

    — melbourne rendering Sun, 6 Oct 2019

  89. function init() {
    isometric.removeEventListener('load', init);

    This function is init()

    melbourne rendering Sun, 6 Oct 2019

  90. Great function and command prompt

    rockstar2 Sun, 6 Oct 2019

  91. This is an interesting one. I would like to share this with my IT staff. Thank you!
    tree removal bellevue

    Trisha Sun, 6 Oct 2019

  92. Results 1 - 48 of 3304 You can go out right after a HydraFacial treatment with your skin looking fresh and invigorated. . marks, improve acne ice pick scars, and induce hairs regrowth. . Apply to Aesthetician, BTL EMSELLA, BTL Emsculpt, BTL Exilis, A serious IPL machine does much more (and costs much more).
    how to get rid of acne scars

    Baradtoow Sat, 26 Oct 2019

  93. Thanks for sharing this interesting article!

    hobby huren Tue, 29 Oct 2019

  94. nice post.

    hotels Fri, 1 Nov 2019

  95. One of the most interesting articles on isometric engine that I have found! Amazing job!

    geileweiber Sat, 2 Nov 2019

  96. Thanks for sharing this interesting article!

    קייטרינג לאירועים Sun, 3 Nov 2019

  97. Great article and tutorial on isometric engine basics..

    Vista Ultimate Wed, 6 Nov 2019

  98. 16 Jan 2019 They point out that Ferraris are faster…that they have thicker and more give a larger man-made diamond or CZ and still save a ton of money.
    how to save money fast

    Marlovah Thu, 7 Nov 2019

  99. Thanks for sharing this interesting article!

    פרסום בטאבולה Sat, 9 Nov 2019

  100. Der shemale kontakte für deinen privaten Sex wartet schon auf dich

    shemalekontakte Sun, 10 Nov 2019

  101. This is a great article thanks for sharing this informative information. I will visit your blog regularly for some latest post.tree service near me in west palm beach

    — Tyler Worgan Sun, 10 Nov 2019

  102. Diagnotic Immobilier

    MARINE Mon, 11 Nov 2019

  103. Incorrect result value. Please try again:

    american progressive life insurance Thu, 14 Nov 2019

  104. Exactly the same as the first tutorial we loop through the array lengths however the tile positioning code is slightly different.

    fotoitaca Mon, 18 Nov 2019

  105. getroutingnumber

    priyani Mon, 18 Nov 2019

  106. That really is all there is to it as seen in the following Canvas element.

    dados mal Tue, 19 Nov 2019


    nice one good Tue, 19 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. =