{"id":20073781,"url":"https://github.com/drgomesp/fibula-js","last_synced_at":"2025-10-24T00:33:46.441Z","repository":{"id":16337742,"uuid":"19087444","full_name":"drgomesp/fibula-js","owner":"drgomesp","description":":game_die: A tile-based HTML5 Canvas \u0026 WebGL engine with support for orthogonal and isometric projections","archived":false,"fork":false,"pushed_at":"2014-05-06T23:01:18.000Z","size":532,"stargazers_count":58,"open_issues_count":6,"forks_count":0,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-09T04:26:04.002Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/drgomesp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-04-23T22:14:06.000Z","updated_at":"2024-11-01T01:09:51.000Z","dependencies_parsed_at":"2022-09-03T19:00:15.696Z","dependency_job_id":null,"html_url":"https://github.com/drgomesp/fibula-js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drgomesp%2Ffibula-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drgomesp%2Ffibula-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drgomesp%2Ffibula-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drgomesp%2Ffibula-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drgomesp","download_url":"https://codeload.github.com/drgomesp/fibula-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252580001,"owners_count":21771248,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T14:47:53.354Z","updated_at":"2025-10-24T00:33:46.392Z","avatar_url":"https://github.com/drgomesp.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"Fibula 1.0.0\n======\nA tile-based HTML5 Canvas \u0026 WebGL engine with support for orthogonal and axonometric – isometric, dimetric and trimetric – projections.\n\n\nVersion: 1.0.0 – Released 6th May 2014\n\nBy **Daniel Ribeiro**, [@drgomesp](http://twitter.com/drgomesp).\n\nFeatures\n-----\n\n- WebGL rendering\n- Orthogonal tile maps\n- Isometric tile maps\n- Tile map layers with visibility and opacity\n- Camera simulation on tile maps\n\n*Coming soon*\n\n- Dimetric tile maps\n- Trimetric tile maps\n- [Tiled](http://www.mapeditor.org/) support for easily creating tile maps\n\nDependencies\n-----\n\n- [Pixi.js](https://github.com/GoodBoyDigital/pixi.js) – 2d WebGL renderer with canvas fallback\n\nNavigation\n-----\n\n- [Getting Started](https://github.com/drgomesp/Fibula#getting-started)\n    - [The simplest way](https://github.com/drgomesp/Fibula#the-simplest-way)\n        - [Orthogonal tile map](https://github.com/drgomesp/Fibula#orthogonal-tile-map)\n        - [Isometric tile map](https://github.com/drgomesp/Fibula#isometric-tile-map)\n\nGetting Started\n-----\n[Go back to top](https://github.com/drgomesp/Fibula#navigation)\n\n### The simplest way\n[Go back to top](https://github.com/drgomesp/Fibula#navigation)\n\nThe simplest way to draw a tile map is to manually create the tile set, the layers \nand the actual map itself. Those are the basic components that make a tile map at the end.\n\n\u003e **Notice:** **Fibula** requires all image resources to be previously loaded. You can solve this\n\u003e issue by using asset management libraries, such as [PxLoader](https://github.com/thinkpixellab/PxLoader).\n\n#### Orthogonal tile map\n[Go back to top](https://github.com/drgomesp/Fibula#navigation)\n\n\u003e **Notice:** This example was built using this [tutorial](http://blog.sklambert.com/create-a-canvas-tileset-background/). \n\u003e Thanks to [Steven Lambert](https://github.com/straker) for writing such an amazing\n\u003e guide full of examples!\n\nSuppose you have the following tile set:\n\n![orthogonal-tileset](http://i1.wp.com/blog.sklambert.com/wp-content/uploads/2013/07/tileset.png?resize=512%2C512)\n\nTo get a simple example working, you first need to create a `TileSet` object. We're going to use\nPxLoader to show you how to solve the asset management issue:\n\n```javascript\nvar loader = new PxLoader(),\n    tileSetImage = loader.addImage(\"http://i1.wp.com/blog.sklambert.com/wp-content/uploads/2013/07/tileset.png\");\n```\n\nNow, we'll place our code inside of the callback function of the PxLoader library,\nwhich will run as soon as the image is loaded and ready:\n\n```javascript\nloader.addCompletionListener(function() {\n    var tileSet = new Fibula.TileSet(tileSetImage);\n});\n```\n\nHere, we've passed the background image.\n\nAfter having created a `TileSet` object, we need two more steps: \n\n1. Create a first tile layer\n2. Create the tile map and add the first layer to it\n3. Create a renderer and actually render the tile map\n\nSo let's create the first tile layer, using the `TileMapLayer` object:\n\n\u003e *Notice:* All code from here will be place inside the addCompletionListener callback\nfunction.\n\n```javascript\nloader.addCompletionListener(function() {\n    var tileSet = new Fibula.TileSet(tileSetImage);\n});\n```\n\nNow, let's create a first layer that will go on the tile map:\n\n```javascript\nloader.addCompletionListener(function() {\n    var tileSet = new Fibula.TileSet(tileSetImage),\n        layer1data = [\n            [172, 172, 172, 79, 34, 34, 34, 34, 34, 34, 34, 34, 56, 57, 54, 55, 56, 147, 67, 67, 68, 79, 79, 171, 172, 172, 173, 79, 79, 55, 55, 55],\n            [172, 172, 172, 79, 34, 34, 34, 34, 34, 34, 146, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 155, 142, 172, 159, 189, 79, 79, 55, 55, 55],\n            [172, 172, 172, 79, 79, 34, 34, 34, 34, 34, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 159, 189, 79, 79, 79, 55, 55, 55],\n            [188, 188, 188, 79, 79, 79, 79, 34, 34, 34, 36, 172, 172, 143, 142, 157, 79, 79, 79, 79, 79, 79, 187, 159, 189, 79, 79, 79, 55, 55, 55, 55],\n            [79, 79, 79, 79, 79, 79, 79, 79, 34, 34, 36, 172, 159, 158, 172, 143, 157, 79, 79, 79, 79, 79, 79, 79, 79, 79, 39, 51, 51, 51, 55, 55],\n            [79, 79, 79, 79, 79, 79, 79, 79, 79, 34, 36, 172, 143, 142, 172, 172, 143, 157, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 55],\n            [79, 79, 79, 79, 79, 79, 79, 79, 79, 34, 52, 172, 172, 172, 172, 172, 172, 143, 156, 157, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79],\n            [79, 79, 79, 79, 79, 79, 79, 79, 79, 34, 52, 172, 172, 172, 172, 172, 172, 159, 188, 189, 79, 79, 79, 79, 79, 171, 172, 172, 173, 79, 79, 79],\n            [79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 188, 158, 172, 172, 172, 172, 173, 79, 79, 79, 79, 79, 79, 79, 187, 158, 159, 189, 79, 79, 79],\n            [79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 172, 159, 188, 189, 79, 79, 79, 79, 79, 79, 79, 79, 171, 173, 79, 79, 79, 79],\n            [79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 172, 173, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 173, 79, 79, 79, 79],\n            [155, 142, 157, 79, 79, 79, 79, 79, 79, 79, 79, 79, 187, 188, 188, 189, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 173, 79, 79, 79, 79],\n            [171, 172, 173, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 173, 79, 79, 79, 79],\n            [171, 172, 143, 156, 157, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 187, 189, 79, 79, 79, 79],\n            [187, 188, 158, 172, 173, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79],\n            [79, 79, 79, 188, 189, 79, 79, 79, 79, 79, 79, 155, 156, 156, 157, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 155, 156],\n            [34, 34, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 172, 173, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 155, 142, 172],\n            [34, 34, 34, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 172, 173, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 172],\n            [34, 34, 34, 34, 79, 79, 79, 79, 79, 79, 155, 172, 172, 159, 189, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 172],\n            [34, 34, 34, 34, 34, 34, 79, 79, 79, 79, 171, 172, 172, 173, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 155, 142, 172, 172]\n        ];\n            \n    var layer1 = new Fibula.TileMapLayer({\n         name: 'layer 1',\n         tileSet: tileSet,\n         data: layer1data,\n         visible: true,\n         opacity: 1\n     });    \n});\n```\n\nHere we are doing some basic 2D mapping. The `layer1data` variable holds a simple 2d array\nwith 20 rows and 32 columns – which are the dimensions – in *tiles* – for our tile map, as you'll see\nlater. The numbers of each individual cell represents a spot on the tile set.\n\nTo understand this better, imagine you have each individual tile on the tile set\nmarked with a number - considering each tile having 32x32 dimensions, like the \nfollowing image:\n\n![orthogonal-tileset-marked](http://i2.wp.com/blog.sklambert.com/wp-content/uploads/2013/07/tileset_marked.png?resize=513%2C513)\n\nSo the next step is to create the `TileMap` object and the `Renderer` that will render it:\n\n```javascript\nloader.addCompletionListener(function() {\n    var tileSet = new Fibula.TileSet(tileSetImage),\n        layer1data = [\n            [172, 172, 172, 79, 34, 34, 34, 34, 34, 34, 34, 34, 56, 57, 54, 55, 56, 147, 67, 67, 68, 79, 79, 171, 172, 172, 173, 79, 79, 55, 55, 55],\n            [172, 172, 172, 79, 34, 34, 34, 34, 34, 34, 146, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 155, 142, 172, 159, 189, 79, 79, 55, 55, 55],\n            [172, 172, 172, 79, 79, 34, 34, 34, 34, 34, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 159, 189, 79, 79, 79, 55, 55, 55],\n            [188, 188, 188, 79, 79, 79, 79, 34, 34, 34, 36, 172, 172, 143, 142, 157, 79, 79, 79, 79, 79, 79, 187, 159, 189, 79, 79, 79, 55, 55, 55, 55],\n            [79, 79, 79, 79, 79, 79, 79, 79, 34, 34, 36, 172, 159, 158, 172, 143, 157, 79, 79, 79, 79, 79, 79, 79, 79, 79, 39, 51, 51, 51, 55, 55],\n            [79, 79, 79, 79, 79, 79, 79, 79, 79, 34, 36, 172, 143, 142, 172, 172, 143, 157, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 55],\n            [79, 79, 79, 79, 79, 79, 79, 79, 79, 34, 52, 172, 172, 172, 172, 172, 172, 143, 156, 157, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79],\n            [79, 79, 79, 79, 79, 79, 79, 79, 79, 34, 52, 172, 172, 172, 172, 172, 172, 159, 188, 189, 79, 79, 79, 79, 79, 171, 172, 172, 173, 79, 79, 79],\n            [79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 188, 158, 172, 172, 172, 172, 173, 79, 79, 79, 79, 79, 79, 79, 187, 158, 159, 189, 79, 79, 79],\n            [79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 172, 159, 188, 189, 79, 79, 79, 79, 79, 79, 79, 79, 171, 173, 79, 79, 79, 79],\n            [79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 172, 173, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 173, 79, 79, 79, 79],\n            [155, 142, 157, 79, 79, 79, 79, 79, 79, 79, 79, 79, 187, 188, 188, 189, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 173, 79, 79, 79, 79],\n            [171, 172, 173, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 173, 79, 79, 79, 79],\n            [171, 172, 143, 156, 157, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 187, 189, 79, 79, 79, 79],\n            [187, 188, 158, 172, 173, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79],\n            [79, 79, 79, 188, 189, 79, 79, 79, 79, 79, 79, 155, 156, 156, 157, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 155, 156],\n            [34, 34, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 172, 173, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 155, 142, 172],\n            [34, 34, 34, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 172, 173, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 172],\n            [34, 34, 34, 34, 79, 79, 79, 79, 79, 79, 155, 172, 172, 159, 189, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 172],\n            [34, 34, 34, 34, 34, 34, 79, 79, 79, 79, 171, 172, 172, 173, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 155, 142, 172, 172]\n        ];\n            \n    var layer1 = new Fibula.TileMapLayer({\n         name: 'layer 1',\n         tileSet: tileSet,\n         data: layer1data,\n         visible: true,\n         opacity: 1\n     });\n     \n    var tileMap = new Fibula.TileMap({\n        tileWidth: 32,\n        tileHeight: 32,\n        layers: [layer1]\n    });\n    \n    var renderer = new Fibula.OrthogonalRenderer({\n        tileMap: tileMap\n    });\n});\n```\n\nHere you see the usage of the `OrthogonalRenderer`, that knows how to render an\northogonal tile map, and the actual `TileMap` object, holding the first layer.\n\nThe last step is to render the tile map. Here's an interesting part: you get to \nsimulate a camera viewport and choose what part of the map is going to be rendered\nand also the size of the camera viewport:\n\n```javascript\nrenderer.render({\n    x: 0,\n    y: 0,\n    width: 1024,\n    height: 640\n});\n```\n\nHere, we are rendering the whole map, starting by 0 on the `x` axis – left to right – and\n0 on the `y` axis – from top to bottom.\n\nNow, outside of the PxLoader callback function, we'll start to load the images and\nthe callback function will be triggered as soon as everything is ready:\n\n```javascript\nloader.start();\n```\n\nWe should get a result like this:\n\n![orthogonal-tilemap-ground](http://i1.wp.com/blog.sklambert.com/wp-content/uploads/2013/07/tileset_ground.png?resize=512%2C320)\n\nAs you can see, this is a one-layer tile map - which represents the ground of our \nmap, and it's not very interesting. Let's create a second layer to add some objects \non top of the ground:\n\n```javascript\nvar layer2data = [\n    [0, 0, 32, 33, 0, 236, 0, 0, 236, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 69, 0, 0, 0, 0, 0, 32, 33],\n    [0, 0, 48, 49, 0, 236, 220, 220, 236, 0, 0, 147, 72, 73, 70, 71, 72, 73, 83, 83, 84, 85, 0, 0, 0, 0, 0, 48, 49],\n    [0, 0, 64, 65, 54, 0, 236, 236, 0, 0, 162, 163, 84, 89, 86, 87, 88, 89, 99, 99, 100, 101, 0, 0, 0, 0, 7, 112, 113],\n    [0, 0, 80, 81, 70, 54, 55, 50, 0, 0, 0, 179, 100, 105, 102, 103, 104, 105, 0, 0, 0, 0, 0, 0, 16, 22, 23, 39],\n    [0, 0, 96, 97, 86, 70, 65, 144, 193, 0, 0, 37, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 48, 49],\n    [0, 0, 0, 0, 102, 86, 81, 160, 161, 0, 0, 37, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 64, 65, 174, 175, 67, 66, 54],\n    [0, 0, 0, 0, 0, 102, 97, 176, 177, 0, 0, 37, 0, 252, 0, 0, 0, 201, 202, 0, 0, 0, 0, 0, 80, 81, 190, 191, 83, 82, 70, 71],\n    [0, 0, 0, 0, 0, 0, 0, 48, 49, 0, 0, 53, 0, 0, 0, 0, 0, 217, 218, 0, 0, 0, 0, 0, 96, 97, 222, 223, 99, 98, 86, 87],\n    [201, 202, 0, 0, 0, 0, 0, 64, 65, 66, 68, 69, 0, 0, 0, 0, 0, 233, 234, 0, 0, 0, 0, 0, 238, 239, 0, 0, 238, 239, 102, 103],\n    [217, 218, 0, 0, 0, 0, 0, 80, 81, 82, 84, 85, 0, 0, 0, 0, 0, 249, 250, 0, 0, 0, 0, 0, 254, 255, 0, 0, 254, 255],\n    [233, 234, 0, 0, 0, 0, 0, 96, 97, 98, 100, 101, 0, 0, 0, 0, 0, 0, 0],\n    [249, 250, 0, 0, 201, 202, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 238, 239, 0, 0, 238, 239],\n    [0, 0, 0, 0, 217, 218, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 254, 255, 0, 0, 254, 255],\n    [0, 0, 0, 0, 233, 234, 196, 197, 198],\n    [2, 3, 4, 0, 249, 250, 228, 229, 230],\n    [18, 19, 20, 8, 0, 0, 244, 245, 246, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 201, 202],\n    [0, 35, 40, 24, 25, 8, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 0, 0, 0, 0, 0, 0, 0, 0, 217, 218],\n    [0, 0, 0, 40, 41, 20, 8, 9, 0, 0, 0, 0, 0, 0, 0, 16, 17, 18, 19, 20, 21, 0, 0, 0, 0, 0, 0, 0, 233, 234],\n    [0, 0, 0, 0, 40, 19, 24, 25, 8, 9, 0, 0, 0, 0, 0, 48, 49, 50, 51, 52, 115, 3, 4, 0, 0, 0, 0, 0, 249, 250],\n    [0, 0, 0, 0, 0, 0, 40, 41, 20, 21, 0, 0, 0, 0, 0, 64, 65, 66, 67, 52, 19, 19, 20, 21]\n];\n\nvar layer2 = new Fibula.TileMapLayer({\n    name: 'layer 2',\n    tileSet: tileSet,\n    data: layer2data,\n    visible: true,\n    opacity: 1\n});\n```\n\nAfter the render, the result should look like this:\n\n![orthogonal-tilemap-two-layers](http://i0.wp.com/blog.sklambert.com/wp-content/uploads/2013/07/tileset_ground_and_layer.png?resize=512%2C320)\n\nAmazing, right?!\n\nWith the layering system, you can work with collision detection by having the ability\nto decide which layer will the player collide against and which the player will not. \n\nNow, you can simulate a camera by passing custom view areas for the renderer:\n\n```javascript\nrenderer.render({\n    x: 200,\n    y: 200,\n    width: 300,\n    height: 300\n});\n```\n\nHere, we're using a camera with 300x300 dimensions and we start rendering the map on the \n200 pixel of the `x` axis and 200 pixel of the `y` axis. The result should look like this:\n\n![orthogonal-tilemap-two-layers-camera](http://s13.postimg.org/9gdse24tz/Captura_de_Tela_2014_04_29_s_20_45_13.png)\n\n#### Isometric tile map\n[Go back to top](https://github.com/drgomesp/Fibula#navigation)\n\nIf you want to create an isometric tile map, the code for it is almost the same as\nfor the orthogonal. Suppose you have the following isometric tile set:\n\n![isometric-tileset](http://s27.postimg.org/6c9sa3s0j/isometric_grass_and_water.png)\n\nThe first thing we need to do is create the first layer that will go into the tile map:\n\n```javascript\nvar loader = new PxLoader(),\n    tileSetImage = loader.addImage('assets/isometric.png');\n\nloader.addCompletionListener(function() {\n    var tileSet = new Fibula.TileSet(tileSetImage),\n        layer1data = [\n        [3, 3, 3, 3, 3],\n        [3, 3, 3, 3, 3],\n        [3, 3, 3, 3, 3],\n        [3, 3, 3, 3, 3],\n        [3, 3, 3, 3, 0]\n    ];\n\n    var layer1 = new Fibula.TileMapLayer({\n        name: 'layer 1',\n        tileSet: tileSet,\n        data: layer1data,\n        visible: true,\n        opacity: 1\n    });\n});\n```\n\nNow, we need to create our tile map object and the renderer:\n\n```javascript\nvar loader = new PxLoader(),\n    tileSetImage = loader.addImage('assets/isometric.png');\n\nloader.addCompletionListener(function() {\n    var tileSet = new Fibula.TileSet(tileSetImage),\n        layer1data = [\n        [3, 3, 3, 3, 3],\n        [3, 3, 3, 3, 3],\n        [3, 3, 3, 3, 3],\n        [3, 3, 3, 3, 3],\n        [3, 3, 3, 3, 0]\n    ];\n\n    var layer1 = new Fibula.TileMapLayer({\n        name: 'layer 1',\n        tileSet: tileSet,\n        data: layer1data,\n        visible: true,\n        opacity: 1\n    });\n    \n    var tileMap = new Fibula.TileMap({\n        tileWidth: 64,\n        tileHeight: 32,\n        layers: [layer1]\n    });\n\n    var renderer = new Fibula.IsometricRenderer({\n        tileMap: tileMap\n    });\n});\n```\n\nNow let's render our tile map:\n\n```javascript\nrenderer.render({\n    x: 0,\n    y: 0,\n    width: 320,\n    height: 320\n});\n```\n\n\u003e Notice here the usage of a 64x32 tile size for the map, which differs from the size\n\u003e of the tiles on the tile set in this case – 64x64 on tile set.\n\nThe result should look like this:\n\n![isometric-tilemap-ground](http://s27.postimg.org/nqlsh6kr7/Captura_de_Tela_2014_04_25_s_15_31_15.png)\n\nNow, let's add a new layer and make this map a little bit more interesting:\n\n```javascript\n var layer2data = [\n    [null, null, null, 4, 16],\n    [null, null, null, 19, 23],\n    [null, null, null, 19, 23],\n    [null, null, null, 19, 23],\n    [null, null, null, 19, 23]\n];\n\nvar layer2 = new Fibula.TileMapLayer({\n    name: 'layer 2',\n    tileSet: tileSet,\n    data: layer2data,\n    visible: true,\n    opacity: 1\n});\n```\n\nAfter the render, the result should look something like this:\n\n![isometric-tilemap-two-layers](http://s14.postimg.org/po0e3sic1/Captura_de_Tela_2014_04_25_s_15_34_12.png)\n\nAmazing, right!?\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrgomesp%2Ffibula-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrgomesp%2Ffibula-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrgomesp%2Ffibula-js/lists"}