{"id":15899152,"url":"https://github.com/prozi/tiled-utils","last_synced_at":"2025-03-20T18:30:42.522Z","repository":{"id":29236787,"uuid":"116614527","full_name":"Prozi/tiled-utils","owner":"Prozi","description":"Tiled Utils","archived":false,"fork":false,"pushed_at":"2024-04-15T17:55:39.000Z","size":484,"stargazers_count":9,"open_issues_count":2,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-01T00:36:35.348Z","etag":null,"topics":["commonjs-modules","forked-repo","pixijs","tiled-map-editor"],"latest_commit_sha":null,"homepage":"https://github.com/Prozi/tiled-utils","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Prozi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-08T01:37:52.000Z","updated_at":"2023-04-04T01:30:52.000Z","dependencies_parsed_at":"2024-04-15T18:58:34.996Z","dependency_job_id":null,"html_url":"https://github.com/Prozi/tiled-utils","commit_stats":{"total_commits":28,"total_committers":7,"mean_commits":4.0,"dds":0.7142857142857143,"last_synced_commit":"80ea86984e4b8d7b1b95509dcca42cb8db829247"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prozi%2Ftiled-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prozi%2Ftiled-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prozi%2Ftiled-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prozi%2Ftiled-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Prozi","download_url":"https://codeload.github.com/Prozi/tiled-utils/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244077837,"owners_count":20394353,"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":["commonjs-modules","forked-repo","pixijs","tiled-map-editor"],"created_at":"2024-10-06T10:11:17.683Z","updated_at":"2025-03-20T18:30:42.209Z","avatar_url":"https://github.com/Prozi.png","language":"JavaScript","readme":"# Tiled Utils for Pixi.js\n\nusable also in node.js\n\n[![npm](https://badge.fury.io/js/tiled-utils.svg)](https://badge.fury.io/js/tiled-utils.svg)\n[![npm](https://img.shields.io/npm/v/tiled-utils.svg)](https://www.npmjs.com/package/tiled-utils)\n[![npm](https://img.shields.io/npm/l/tiled-utils.svg)](https://gitlab.com/griest/tiled-utils/LICENSE)\n\n---\n\nThis is an unofficial fork with commonjs require compatibility [and some bugfixes] forked from:\n[https://gitlab.com/griest/pexi/tree/master/src/tile-utilities](https://gitlab.com/griest/pexi/tree/master/src/tile-utilities)\n\n---\n\nTile Utilities is a collection of helpful methods and objects for using [Tiled Editor](http://www.mapeditor.org) with the [Pixi renderering engine](https://github.com/pixijs/pixi.js).\n\n`makeTiledWorld` is the most important method, so read the documentation\nahead to find out how it works, and then read about how you can use\nthe other methods for supplementary features.\n\nYes, Tile Utilities also contains a full suite of tools for working with isometric maps! That means: isometric collision detection, mouse/touch pointer selection of isometric tiles, and importing of isometric maps created in Tiled Editor.\n\nYou can find working examples of how all these methods are used by the\n[Hexi game engine](https://github.com/kittykatattack/hexi) in the\nlinks below (click\nthe image links to play the examples and use the arrow keys to\nmove the game characters):\n\n[![Basic Scene](https://gitlab.com/griest/pexi/raw/master/src/tile-utilities/images/01.png)](https://gitcdn.xyz/repo/kittykatattack/hexi/master/examples/36_tiledEditorSupport.html)\n\nHere's the [source code](https://github.com/kittykatattack/hexi/blob/master/examples/src/tiledEditorSupport.js).\n\n[![Complex scrolling world](https://gitlab.com/griest/pexi/raw/master/src/tile-utilities/images/02.png)](https://gitcdn.xyz/repo/kittykatattack/hexi/master/examples/37_scrollingWorldCamera.html)\n\nHere's the [source code](https://github.com/kittykatattack/hexi/blob/master/examples/src/scrollingWorldCamera.js).\n\nThese two examples are the best place to start learning about how to\nuse the Tile Utilities methods and objects.\n\nBut Tile Utilities also works with isometric maps.\n\n[![Isometric map](https://gitlab.com/griest/pexi/raw/master/src/tile-utilities/images/07.png)](https://gitcdn.xyz/repo/kittykatattack/hexi/master/examples/42_isometricDepthLayering.html)\n\nHere's the [source code](https://github.com/kittykatattack/hexi/blob/master/examples/src/isometricDepthLayering.js).\n\nAnd, it has a `shortestPath` function that will tell you the shortest path between two index points on a map array.\n\n[![Shortest path](https://gitlab.com/griest/pexi/raw/master/src/tile-utilities/images/10.png)](https://raw.githack.com/kittykatattack/hexi/master/examples/52_shortestPath.html)\n\nWhich can be used to help a game character navigate through a maze.\n\n[![Walk the path](https://gitlab.com/griest/pexi/raw/master/src/tile-utilities/images/11.png)](https://gitcdn.xyz/repo/kittykatattack/hexi/master/examples/53_walkThePath.html)\n\nIf you need to implement a scrolling camera to your game world,\nuse the `worldCamera` method from the [Game Utilities](https://github.com/kittykatattack/gameUtilities) library.\n\nIf you have any questions about how any of these methods work, just ask in this repository's **Issues**.\n\n## Table of Contents\n\n[Installation](#installation)\u003cbr\u003e\n[Setting up](#settingup)\u003cbr\u003e\n[makeTiledWorld](#maketiledworld): Create a Pixi game scene from a Tiled Editor JSON data file.\u003cbr\u003e\n[getObject](#getobject): Access an object from a Tiled Editor map as a Pixi sprite.\u003cbr\u003e\n[Create sprites from map objects](#createsprites): Use a Tiled Editor object to make a Pixi sprite.\u003cbr\u003e\n[Layer groups](#layergroups): Access a Tiled Editor layer group.\u003cbr\u003e\n[GID values](#gidvalues): Accessing and using Tiled Editor GID map array values.\u003cbr\u003e\n[Using the data array](#dataarray): Accessing and using Tiled Editor `data` array values.\u003cbr\u003e\n[getObject](#getobjects): Accessing multiple sprites in a Tiled Editor map.\u003cbr\u003e\n[hitTestTile](#hittesttile): An all-purpose collision method for tile-based games.\u003cbr\u003e\n[getIndex](#getindex): Convert a sprite's x and y position to a map index value.\u003cbr\u003e\n[getTile](#gettile): Convert a map index value into a sprite's x and y screen position.\u003cbr\u003e\n[surroundingCells](#surroundingcells): Find all the map array index numbers surrounding a center index number.\u003cbr\u003e\n[getPoints](#getpoints): Find all the map array index numbers surrounding a center index number.\u003cbr\u003e\n[byDepth](#bydepth): And array `sort` function for isometric maps that depth-sorts sprites according to their `z` properties.\u003cbr\u003e\n[hitTestIsoTile](#hittestisotile): Collision detection for isometric sprites.\u003cbr\u003e\n[getIsoPoints](#getisopoints): The isometric equivalent of `getPoints`.\u003cbr\u003e\n[makeIsoPointer](#makeisopointer): Add isometric properties to a mouse/touch pointer so that you can select isometric tiles.\u003cbr\u003e\n[isoRectangle](#isorectangle): Creates an isometric rectangle that's useful for prototyping isometric maps.\u003cbr\u003e\n[addIsoProperties](#addIsoPorperties): Adds isometric properties to any sprite to automatically convert between Cartesian and isometric coordinates.\u003cbr\u003e\n[makeIsoTiledWorld](#makeisotiledworld): Creates an isometric world from a Tiled Editor JSON data file. The isometric verision of `makeTiledWorld`.\u003cbr\u003e\n[shortestPath](#shortestPath): An A-Star algorithm that finds the shortest path between two points in a map array.\u003cbr\u003e\n[tileBasedLineOfSight](#tileBasedLineOfSight): Find out whether two sprites\nare visible to each other inside a tile-based maze environment.\u003cbr\u003e\n\n\u003ca id=\"installation\"\u003e\u003c/a\u003e\nInstalling Tile Utilities\n\n---\n\n#### NPM\n\n```bash\nnpm install tiled-utils --save\n```\n\n#### CDN\n\n```html\n\u003cscript src=\"https://unpkg.com/tiled-utils/es2015/index.js\"\u003e\u003c/script\u003e\n```\n\n\u003ca id=\"settingup\"\u003e\u003c/a\u003e\nSetting up\n\n---\n\nLink the `tileUtilities.js` file from this repository's `bin` folder\nto your HTML document with a `\u003cscript\u003e` tag. (Or, load it into your JS\nfile using any module system you prefer.) Next, instantiate\n`TileUtilites` in your JS file like this:\n\n```js\nconst tu = new TileUtilities(PIXI)\n```\n\nThe constructor requires a reference to the `PIXI` object you have running in your application.\nIf you don't supply one, `tileUtilites.js` will look for a global `PIXI` object. If it can't find Pixi for\nsome reason, it will throw you an error to let you know.\n\nYou can now access all the `TileUtilities` methods with the `tu` object in\nyour application.\n\n\u003ca id=\"maketiledworld\"\u003e\u003c/a\u003e\nmakeTiledWorld\n\n---\n\n`makeTiledWorld` is a quick and easy way to display a game world designed in\nTiled Editor. Supply `makeTiledWorld` with 1 **string** argument:\n\n1. A JSON file generated by Tiled Editor. **Important:** the **Tile Layer Format** has to be `CSV` format (Comma Seperated Value.)\n\n```js\nconst world = tu.makeTiledWorld('tiledEditorMapData.json')\n```\n\n(Note: `makeTiledWorld` looks for the JSON data file in Pixi's `loader.resources` object. So,\nmake sure you've loaded the JSON file using Pixi's `loader`.)\n\n`makeTiledWorld` will return a Pixi `Container` that contains all the things in your Tiled Editor\nmap as Pixi sprites.\n\nAll the image tiles you create in Tiled Editor are automatically converted into Pixi sprites\nfor you by `makeTiledWorld`. You can access all of them using two methods: `getObject` (for\nsingle sprites) and `getObjects` (with an \"s\") for multiple sprites. Let's find out how they work.\n\n\u003ca id=\"getobject\"\u003e\u003c/a\u003e\nworld.getObject\n\n---\n\nTiled Editor lets you assign a \"name\" property to any object.\nYou can access any sprite by this `name` using the `getObject` method. `getObject` searches for and\nreturns a sprite in the `world` that has the same `name` property that you assigned\nin Tiled Editor. Here's how to use `getObject` to look for an object called \"alien\"\nin the Tiled map data and assign it to a variable called `alien`\n\n```js\nconst alien = world.getObject('alien')\n```\n\n`alien` is now an ordinary Pixi sprite that you can control just like any other Pixi\nsprite in your games.\n\n\u003ca id=\"createsprites\"\u003e\u003c/a\u003e\nCreating sprites from generic objects\n\n---\n\nTiled Editor lets you create generic objects. These are objects that don't have images associated\nwith them. Generic objects are handy to use, because they let you create complex game objects inside\nTiled Editor, as pure data. You can then use that data your game code to build complex game objects.\n\nFor example, imagine that you want to create a complex animated walking sprite called \"elf\".\nFirst, create the elf object in Tiled Editor as a generic object, but don't assign any image tiles\nto it. Next, in your game code, create a new Pixi `AnimatedSprite` called `elf` and give it any textures you want\nto use for its animation states.\n\n```js\nconst elf = new PIXI.extras.AnimatedSprite(elfSpriteTextures)\n```\n\nThen use the `x` and `y` data from the generic \"elf\" object you created in Tiled Editor to position the\n`elf` sprite.\n\n```js\nelf.x = world.getObject('elf').x\nelf.y = world.getObject('elf').y\n```\n\nThis is a simple example, but you could make very complex data objects in Tiled Editor and\nuse them to build complex sprites in the same way.\n\n\u003ca id=\"layergroups\"\u003e\u003c/a\u003e\nAccessing Tiled Editor layer groups\n\n---\n\nTiled Editor lets you create **layer groups**. Each layer group you create\nin Tiled Editor is automatically converted by `makeTiledWorld` into a Pixi `Container`\nobject. You can access those containers using `getObject` to extract the layer group\ncontainer.\n\nHere's how you could extract the layer group called \"objects\" and add the\n`elf` sprite to it.\n\n```js\nconst objectsLayer = world.getObject('objects')\nobjectsLayer.addChild(elf)\n```\n\nIf you want to add the sprite to a different world layer, you can do it like this:\n\n```js\nworld.getObject('treeTops').addChild(elf)\n```\n\nIf you want to access all the sprites in a specific Tiled Editor layer, just supply\n`getObject` with the name of the layer. For example, if the layer name is \"items\", you\ncan access it like this:\n\n```js\nconst itemsLayer = world.getObject('items')\n```\n\n`itemsLayer` is now a Pixi container with a `children` array that contains all the sprites\non that layer.\n\nTo be safe, clone this array to create a new version\nthat doesn't point to the original data file:\n\n```js\nconst items = itemsLayer.children.slice(0)\n```\n\nYou can now manipulate the `items` array freely without worrying about changing\nthe original array. This can possibly help prevent some weird bugs in a complex game.\n\n\u003ca id=\"gidvalues\"\u003e\u003c/a\u003e\nFinding the \"gid\" values\n\n---\n\nTiled Editor uses \"gid\" numbers to identify different kinds of things in the world.\nIf you ever need to extract sprites with specific `gid` numbers in a\nlayer that contains different kinds of things, you can do it like this:\n\n```js\nconst items = itemsLayer.children.filter(({ gid }) =\u003e gid !== 0)\n```\n\nThis example will give you a new array called `items` that contains sprites\nthat **don't** have `gid` values of 0.\n\nEvery sprite created by `makeTiledWorld` has a `gid` property with a value that matches its\nTiled Editor \"gid\" value.\n\n\u003ca id=\"dataarray\"\u003e\u003c/a\u003e\nAccessing a layer's \"data\" array\n\n---\n\nTiled Editor's layers have a `data` property\nthat is an array containing all the grid id numbers (`gid`) of\nthe tiles in that array. Imagine that you've got a layer full of similar\ntiles representing the walls in a game. How do you access the array\ncontaining all the \"gid\" numbers of the wall sprites in that layer? If the layer's name is called \"wallLayer\", you\ncan access the `wallLayer`'s `data` array of sprites like this:\n\n```js\nwallMapArray = world.getObject('wallLayer').data\n```\n\n`wallMapArray` is now an array of \"gid\" numbers referring to all the sprites on that\nlayer. You can now use this data for collision detection, or doing any other kind\nof world building.\n\n\u003ca id=\"getobjects\"\u003e\u003c/a\u003e\nworld.getObjects\n\n---\n\nThere's another method called `getObjects` (with an \"s\"!) that lets you extract\nan array of sprites from the Tiled Editor data. Imagine that you created three\ngame objects in Tiled Editor called \"marmot\", \"skull\" and \"heart\". `makeTiledWorld`\nautomatically turns them into sprites, and you can access\nall of them as an array of sprites using `getObjects` like this:\n\n```js\nconst gameItemsArray = world.getObjects('marmot', 'skull', 'heart')\n```\n\n\u003ca id=\"hittesttile\"\u003e\u003c/a\u003e\nhitTestTile\n\n---\n\n`hitTestTile` checks for a collision between a sprite and a tile in any map array that you\nspecify. It returns a `collision` object. `collision.hit` is a Boolean\nthat tells you if a sprite is colliding with the tile that you're checking.\n`collision.index` tells you the map array's index number of the colliding sprite. You can check for\na collision with the tile against \"every\" corner point on the\nsprite, \"some\" corner points, or the sprite's \"center\" point.\n\n```js\ntu.hitTestTile(sprite, array, collisionGid, world, pointsToCheck)\n```\n\nThe `world` object (the 4th argument) has to have these properties:\n`tileheight`, `tilewidth`, `widthInTiles`. `pointsToCheck` can have\nthe string value \"some\", \"every\" or \"center\".\n\nHere's how you could use `hitTestTile` to check for a collision between a sprite\ncalled `alien` and an array of wall sprites with map gid numbers of 0.\n\n```js\nconst alienVsFloor = tu.hitTestTile(alien, wallMapArray, 0, world, 'every')\n```\n\n`alienVsFloor` will be object with two properties: `hit` and `index`.\nYou can use these values to resolve the collision.\n\nFor working example of `hitTestTile`, and how to resolve collisions, [see this example](https://github.com/kittykatattack/hexi/blob/master/examples/src/tiledEditorSupport.js) from the [Hexi game engine](https://github.com/kittykatattack/hexi).\n\n\u003ca id=\"getindex\"\u003e\u003c/a\u003e\ngetIndex\n\n---\n\nThe `getIndex` helper method converts a sprite's x and y position to an array index number.  \nIt returns a single index value that tells you the map array index number that the sprite is in.\n\n```js\ntu.getIndex(sprite.x, sprite.y, tileWidth, tileHeight, mapWidthInTiles)\n```\n\n\u003ca id=\"gettile\"\u003e\u003c/a\u003e\ngetTile\n\n---\n\nThe `getTile` helper method converts a tile's index number into x/y screen\ncoordinates, and captures the tile's grid index (`gid`) number.\nIt returns an object with `x`, `y`, `centerX`, `centerY`, `width`, `height`, `halfWidth`\n`halffHeight` and `gid` properties. (The `gid` number is the value that the tile has in the\n`mapArray`) This lets you use the returned object with 2D geometric collision functions like `hitTestRectangle`\nor `rectangleCollision` from the [Bump collision library](https://github.com/kittykatattack/bump).\n\nSupply `getTile` with a map array index number, the map array, and the\n`world` object that represents your game world.\n\n```js\ntu.getTile(index, mapArray, world)\n```\n\nThe `world` object requires these properties: `x`, `y`, `tilewidth`, `tileheight` and `widthInTiles`\n\n\u003ca id=\"surroundingcells\"\u003e\u003c/a\u003e\nsurroundingCells\n\n---\n\nThe `surroundingCells` helper method returns an array containing 9\nindex numbers of map array cells around any given index number.\nUse it for an efficient broadphase/narrowphase collision test.\nThe 2 arguments are the index number that represents the center cell,\nand the width of the map array.\n\n```js\nconst cells = tu.surroundingCells(index, widthInTiles)\n```\n\n\u003ca id=\"getpoints\"\u003e\u003c/a\u003e\ngetPoints\n\n---\n\nThe `getPoints` method takes a sprite and returns\nan object that tells you what all its corner points are. The return\nobject has four properties, each of which is an object with `x` and `y` properties:\n\n- `topLeft`: `x` and `y` properties describing the top left corner point.\n- `topRight`: `x` and `y` properties describing the top right corner point.\n- `bottomLeft`: `x` and `y` properties describing the bottom left corner point.\n- `bottomRight`: `x` and `y` properties describing the bottom right corner point.\n\nIf the sprite has a `collisionArea` property that defines a\nsmaller rectangular area inside the sprite, that collision\narea can be used for collisions instead of the sprite's dimensions. Here's\nhow you could define a `collsionArea` on a sprite called `elf`:\n\n```js\nelf.collisionArea = { x: 22, y: 44, width: 20, height: 20 }\n```\n\nHere's how you could use the `getPoints` method to find all the collision area's corner points.\n\n```js\nconst cornerPoints = tu.getPoints(elf.collisionArea)\n```\n\n\u003ca id=\"bydepth\"\u003e\u003c/a\u003e\nbyDepth\n\n---\n\nIf your sprites in an isometric map have `z` properties that define their depth layers, you can depth-sort them using the array `byDepth` method like this:\n\n```js\nworld.children.sort(tu.byDepth)\n```\n\n\u003ca id=\"hittestisotile\"\u003e\u003c/a\u003e\nhitTestIsoTile\n\n---\n\nSame API as `hitTestTile`, except that it works with isometric sprites.\nMake sure that your `world` object has properties called\n`cartTileWidth` and `cartTileHeight` that define the Cartesian width and\nheight of your tile cells, in pixels.\n\n\u003ca id=\"getisopoints\"\u003e\u003c/a\u003e\ngetIsoPoints\n\n---\n\nGet all the map index numbers surrounding an isometric map cell. The isometric equivalent to `getPoints`\n\n\u003ca id=\"makeisopointer\"\u003e\u003c/a\u003e\nmakeIsoPointer\n\n---\n\nUsed to add a isometric properties to any mouse/touch `pointer` object with\n`x` and `y` properties. Supply `makeIsoPointer` with the pointer object and\nthe isometric `world` object. As long as your `pointer` object has `x` and `y` position values, it should work.\n\n```js\ntu.makeIsoPointer(pointer, world)\n```\n\nIt adds the following properties to the `pointer` object:\n\n```js\npointer.cartX //The Cartesian x position on the isometric map\npointer.cartY //The Cartesian y position on the isometric map\npointer.column //The isometric column over which the pointer is touching\npointer.row //The isometric row over which the pointer is touching\npointer.index //The map array index value of the current isometric tile\n```\n\n\u003ca id=\"isorectangle\"\u003e\u003c/a\u003e\nisoRectangle\n\n---\n\nCreates an isometric rectangle (squashed diamond shape) that's useful for prototyping isometric maps. Its first two arguments are the Cartesian width and height of your map's tile cells, and the third is the color. For example:\n\n```js\nconst sprite = tu.isoRectangle(\n  world.cartTilewidth,\n  world.cartTileheight,\n  0xccccff\n)\n```\n\n\u003ca id=\"addisoproperties\"\u003e\u003c/a\u003e\naddIsoProperties\n\n---\n\nAdds isometric properties to any sprite:\n\n```\ntu.addIsoProperties(anySprite);\n```\n\nThe sprite now has these properties: `cartX`, `cartY`, `isoX`, `isoY`, `cartWidth`, `cartHeight`.\n\n\u003ca id=\"makeisotiledworld\"\u003e\u003c/a\u003e\nmakeIsoTiledWorld\n\n---\n\nCreates an isometric world using Tiled Editor JSON map data.\n\n[![Isometric map made using Tiled Editor](https://gitlab.com/griest/pexi/raw/master/src/tile-utilities/images/09.png)](https://gitcdn.xyz/repo/kittykatattack/hexi/master/examples/43_isometricTiledEditorSupport.html)\n\nHere's the [source code](https://github.com/kittykatattack/hexi/blob/master/examples/src/isometricTiledEditorSupport.js).\n\n`makeIsoTiledWorld` uses the same API as its Cartesian equivalent `makeTiledWorld` method. However, you need to make sure you set Tile Editor up correctly and add some custom map properties to make it work. Let's find out how.\n\n###Configuring and building the map\nBefore you start creating your Tiled Editor map, prepare a sprite sheet with the isometric tiles that you want to use. And, very importantly, note down the isometric dimensions of sprites. Here are the pixel dimensions you need to know:\n• `tilewidth`: The width of the sprite, from its left to right edge.\n• `tileheight`: The height of the tileheighte’s base area. This is just the height of the squashed diamond shape which defines the base on which the isometric sprite is standing. Usually its half the `tilewidth` value.\n\n![The tilewidth and tileheight property values](https://gitlab.com/griest/pexi/raw/master/src/tile-utilities/images/03.png)\n\nThese properties are the property names that are used by Tiled Editor, and you’ll be able to access them in the JSON data file that Tiled Editor generates.\n\nYou can now use the values to create a new isometric map in Tiled Editor. Open Tiled Editor and select File ~TRA New from the main menu. In the New Map dialog box, select isometric as the Orientation, and use the tilewidth and tileheight values I described above for the Width and Height.\n\n![Create an new isometric map in Tiled Editor](https://gitlab.com/griest/pexi/raw/master/src/tile-utilities/images/04.png)\n\nBut we’re not done yet! There are three more values we need to figure out:\n\n• tileDepth: The total height of the isometric sprite, in pixels.\n• cartWidth: The Cartesian width of each tile grid cell, in pixels.\n• cartHeight: The Cartesian height of each tile grid cell, in pixels.\n\n![The tileDepth property describes the total height of the isometric sprite](https://gitlab.com/griest/pexi/raw/master/src/tile-utilities/images/05.png)\n\nYou need to add these values as custom properties in Tiled Editor’s Map Properties panel.\n\n![Create an new isometric map in Tiled Editor](https://gitlab.com/griest/pexi/raw/master/src/tile-utilities/images/06.png)\n\nWhen Tiled Editor generates the JSON map data, you'll be able to access these values in the `properties` field.\n\n```js\n\"properties\":\n    {\n     \"cartTileheight\":\"32\",\n     \"cartTilewidth\":\"32\",\n     \"tileDepth\":\"64\"\n    },\n```\n\nNow that you’ve got the Map Properties all set up, use your isometric tileset to build your world. Here's an example of what your Tiled Editor workspace might look like.\n\n![Build your isometric map](https://gitlab.com/griest/pexi/raw/master/src/tile-utilities/images/08.png)\n\nYou can see in the image above that I’ve given the red cube a custom `name` property with the value `“player”`. I’ve also built the map using two layers: the `playerLayer` just contains the red cube, and the `wallLayer` contains all the maze walls.\nWhen you're finished designing your map, export it as a JSON file, and you’re now ready to use it to start coding a game. Here's how to use `makeIsoTiledWorld` from the JSON map data and isometric `cubes.png` tileset.\n\n```js\nconst world = tu.makeIsoTiledWorld(\n  'https://gitlab.com/griest/pexi/raw/master/src/tile-utilities/images/cubes.json',\n  'https://gitlab.com/griest/pexi/raw/master/src/tile-utilities/images/cubes.png'\n)\n```\n\n\u003ca id=\"shortestPath\"\u003e\u003c/a\u003e\nshortestPath\n\n---\n\nAn A-Star search algorithm that returns an array of grid index numbers that\nrepresent the shortest path between two points on a map. Use it like this:\n\n```js\nconst shortestPath = tu.shortestPath(\n  startIndex, //The start map index\n  destinationIndex, //The destination index\n  mapArray, //The map array\n  mapWidthInTiles, //Map wdith, in tiles\n  [1, 2], //Obstacle gid array\n  'manhattan', //Heuristic to use: \"manhatten\", \"euclidean\" or diagonal\"\n  true //Use diagonal routes (true) or orthogonally adjacent routes ()\n)\n```\n\n\u003ca id=\"tileBasedLineOfSight\"\u003e\u003c/a\u003e\ntileBasedLineOfSight\n\n---\n\nUse the `tileBasedLineOfSight` function to find out whether two sprites\nare visible to each other inside a tile based maze environment.\n\n```js\nconst hasLineOfSight = tu.tileBasedLineOfSight(\n  spriteOne, //The first sprite, with `centerX` and `centerY` properties\n  spriteTwo, //The second sprite, with `centerX` and `centerY` properties\n  mapArray, //The tile map array\n  world, //The `world` object that contains the `tilewidth\n  //`tileheight` and `widthInTiles` properties\n  (emptyGid = 0), //The Gid that represents and empty tile, usually `0`\n  (segment = 32), //The distance between collision points\n  (angles = []) //An array of angles to which you want to\n  //restrict the line of sight\n)\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprozi%2Ftiled-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprozi%2Ftiled-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprozi%2Ftiled-utils/lists"}