Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
gdevelop5:objects:tilemap [2021/01/04 11:13]
4ian
gdevelop5:objects:tilemap [2021/11/22 23:06] (current)
Line 3: Line 3:
 The Tilemap object can be used to display tile-based objects. It's a good way to create **maps** for RPG, strategy games or create objects by **assembling tiles**, useful for platformer, retro-looking games, etc... The Tilemap object can be used to display tile-based objects. It's a good way to create **maps** for RPG, strategy games or create objects by **assembling tiles**, useful for platformer, retro-looking games, etc...
  
-For now, this object is meant for advanced users as it requires Tilemaps to be authored in an **external editor called [[https://www.mapeditor.org/|Tiled]]**.+For now, this object is meant for advanced users as it requires Tilemaps to be authored in an **external editor called [[https://www.mapeditor.org/|Tiled]]**.   
 + 
 +<note>You can also create tilemaps using [[https://ldtk.io/|LDtk (Level Designer Toolkit)]], but it requires an extra step: Export your LDtk world into TMX format and import that TMX file into Tiled.  This will allow you to follow the instructions below.</note>
  
 {{:gdevelop5:objects:tilemap:pasted:20210104-105043.png}} {{:gdevelop5:objects:tilemap:pasted:20210104-105043.png}}
Line 9: Line 11:
 ## Known limitations ## Known limitations
  
-* Only **orthogonal** tilemaps are supported - **isometric tilemaps** are not for now. +  * Only **orthogonal** tilemaps are supported - **isometric tilemaps** are not for now. 
-* **Tilemaps that use more than one tilesets** are not supported. One tileset per tilemap is supported for now. +  * **Tilemaps that use more than one tilesets** are not supported. One tileset per tilemap is supported for now. 
-* Unfortunately **collisions from tiled** files are not supported - you will need to manually create them as separate invisible objects in GDevelop for now. +  * Unfortunately **collisions from tiled** files are not supported - you will need to manually create them as separate invisible objects in GDevelop for now. 
-* Maps and tilesets must be saved as **JSON files** (.json) with Tiled. +  * Maps and tilesets must be saved as **JSON files** (.json) with Tiled. 
-* Don't resize your atlas (image file) after you've started making a tilemap in Tiled: GDevelop won't render it, because its texture size and the one that is set in the Tiled file are different. If you need to resize your tileset, create a new map in Tiled (where you can copy your existing map).+  * Don't resize your atlas (image file) after you've started making a tilemap in Tiled: GDevelop won't render it, because its texture size and the one that is set in the Tiled file are different. If you need to resize your tileset, **create a new map** in Tiled (where you can copy your existing map).
  
-* If you have **animated tiles**, they will need to be arranged in the right order in single row on the atlas to work.  +## Creating new tilemap step by step
-  * Tiled will let you put tile frames from any places of the atlas and repeat some frames - but the GDevelop object will not be able to properly interpret the animation if you do that.  +
-  * Tiled also lets you put a different duration for each frame - this extension only supports uniform duration for all frames. You can configure how fast the animation is played, but you can't go granular on a per frame basis. +
  
-{{:gdevelop5:objects:tilemapanimationlimitation.png?nolink}}+Start by finding or creating your tileset and save it in a PNG file. For this example, we'll use the *Cavernas* public domain tileset that can be [[https://adamatomic.itch.io/cavernas|downloaded here]]. Save the file in your project folder. 
 + 
 +Download Tiled on [[https://www.mapeditor.org/|mapeditor.org]] and launch it. Choose to create a **New map...**: 
 +{{:gdevelop5:objects:tilemap:pasted:20210104-112522.png}} 
 + 
 +Choose CSV, Base 64 or Base 64 (zlib compressed) for the tile layer format (Zstandard compressed is not supported). Choose the size of the tilemap and the size of the tiles: 
 + 
 +{{:gdevelop5:objects:tilemap:pasted:20210104-112656.png}} 
 + 
 +Choose a file where to save the map, as a JSON file. It's recommended that you save the JSON file in your project folder. 
 + 
 +In Tiled, choose then to create a new tileset: 
 +{{:gdevelop5:objects:tilemap:pasted:20210104-112850.png}} 
 + 
 +Enter a name, and choose the image file (also called the "Atlas") that you saved in your project folder: 
 +{{:gdevelop5:objects:tilemap:pasted:20210104-113221.png}} 
 + 
 +You can choose **Embed in map** so that the tileset data is stored inside the Tilemap JSON file. If you don't, you'll be asked where to save the Tileset JSON file, and you'll need to select this file in GDevelop too when setting up the tilemap. See the section "Choosing between a bundled or external tileset"
 + 
 +Draw your map in Tiled: 
 +{{:gdevelop5:objects:tilemap:pasted:20210104-114523.png}} 
 + 
 +Finally, to display the map in GDevelop, choose to create a new **Tilemap** object. Then configure it by choosing your Atlas image (the image containing the tiles) and the **Tilemap JSON file**: 
 + 
 +{{:gdevelop5:objects:tilemap:pasted:20210104-114702.png}} 
 + 
 +You can then click **Apply** and drag'n'drop the object on the scene if it's not there already: 
 + 
 +{{:gdevelop5:objects:tilemap:pasted:20210104-114824.png}} 
 + 
 +### Handling collisions 
 + 
 +Collision tiles set in Tiled are for now not supported by GDevelop. Instead, you can create objects that will act as invisible obstacle or platforms. Here is an example when using the platformer behavior: 
 + 
 +{{:gdevelop5:objects:tilemap:pasted:20210104-122010.png}} 
 + 
 +Create objects with placeholder images (probably just a colored rectangle), then add to them the Platform behavior:  
 +{{:gdevelop5:objects:tilemap:pasted:20210104-115630.png}} 
 + 
 +Hide the invisible obstacles/platforms at the start of the scene using events: 
 +{{:gdevelop5:objects:tilemap:pasted:20210104-120406.png}} 
 + 
 +You can also put these objects on a separate layer in GDevelop and hide the layer.
  
 ## Choosing between a bundled or external tileset ## Choosing between a bundled or external tileset
Line 39: Line 81:
 * If you set a tileset JSON file in the object, this tileset will be used. Note that if at the same time, another tileset is bundled in your Tilemap JSON file, the external tileset JSON file will still be used by the object: the bundled tileset will be ignored. * If you set a tileset JSON file in the object, this tileset will be used. Note that if at the same time, another tileset is bundled in your Tilemap JSON file, the external tileset JSON file will still be used by the object: the bundled tileset will be ignored.
 * If you do not provide a tileset JSON file, the object will look for a tileset inside the Tilemap JSON and load it if present. * If you do not provide a tileset JSON file, the object will look for a tileset inside the Tilemap JSON and load it if present.
 +
 +## Using animated tiles
 +
 +If you have **animated tiles**, they will need to be arranged in the right order in a single row on the atlas to work. 
 +
 +<note warning>Tiled will let you put tile frames from any places of the atlas and repeat some frames - but the GDevelop object will not be able to properly interpret the animation if you do that. </note>
 +
 +Tiled also lets you put a different duration for each frame - this extension only supports uniform duration for all frames. You can configure how fast the animation is played, but you can't go granular on a per frame basis. 
 +
 +{{:gdevelop5:objects:tilemap:pasted:20210104-112051.png}}
 +
 +In GDevelop, you can choose the speed of the animation(s) of the Tilemap, which is by default 4 FPS (4 images per second, which means 1000/4 = 250ms between each image):
 +
 +{{:gdevelop5:objects:tilemap:pasted:20210104-112229.png}}
  
 ## Future development ## Future development
Line 45: Line 101:
  
 - A basic editor might be developed inside GDevelop to allow creating and editing maps directly in the scene editor. - A basic editor might be developed inside GDevelop to allow creating and editing maps directly in the scene editor.
 +- Support for collisions could be added.
 - Isometric tiles support could be added. - Isometric tiles support could be added.
  
 Technical note: this extension uses [[https://github.com/pixijs/pixi-tilemap|pixi-tilemap]]. Since this project is open-source, feel free to contribute back to it or to GDevelop to improve the object (or report a bug). Technical note: this extension uses [[https://github.com/pixijs/pixi-tilemap|pixi-tilemap]]. Since this project is open-source, feel free to contribute back to it or to GDevelop to improve the object (or report a bug).