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:48]
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 17: Line 19:
 ## Creating a new tilemap step by step ## Creating a new tilemap step by step
  
-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+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 mapeditor.org and launch it. Choose to create a **New map...**:+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}} {{:gdevelop5:objects:tilemap:pasted:20210104-112522.png}}
  
Line 34: Line 36:
 {{:gdevelop5:objects:tilemap:pasted:20210104-113221.png}} {{:gdevelop5:objects:tilemap:pasted:20210104-113221.png}}
  
-You 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".+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: Draw your map in Tiled:
Line 46: Line 48:
  
 {{:gdevelop5:objects:tilemap:pasted:20210104-114824.png}} {{: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 85: 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).