-
Notifications
You must be signed in to change notification settings - Fork 0
Tilesets
This page will show you how to create new tile art and add it to the game's tileset. You may want to read Intro to Tiled before this page.
Table of Contents
A tileset is the collection of 32x32 images that make up all the tiles in a map. To open a tileset in Tiled, select File>Open in Tiled and then navigate to the appropriate .tsx file. From the game's main folder, the tilesets are located in assets/tilesets/. This game only uses one tileset: default. (There is another tileset called mobs, but it works a little bit differently and should not be used for normal map tiles).
Each tile's properties can be edited in the panel on the left side of the program. The Type property does not currently do anything in the game engine, but it does allow you to define a name for each tile, which is nice. Ignore the Probability property; it currently does nothing. There are also several custom properties for our game engine:
- collides: If enabled, this tile will function as a platform/wall. If disabled, the player will pass through this tile (it will basically become background decoration).
- ice: If enabled, this tile will turn on ice physics and thus be very slippery to walk on.
- kill: If enabled, the player will instantly die if they touch this tile.
There will likely be many more custom properties added as game development progresses.
To add new tiles, you will need to create a new 32x32 texture and place it in the assets/tilesets/default/ directory. The sprite must be a PNG, and it must be named like X-name.png, where X is an ID number for the tile starting from 0. The tiles will be filled into the tilesheet row by row in numerical order by ID number. The 'name' part of the filename will be ignored by our toolset, so you can set it to whatever you like. You can set the ID values go as high as you want; the tilesheet will automatically expand to include all the tiles.
Warning: Once you have started using a particular tile in your maps, you should not change its ID number. If you do, you will have to manually update the maps to use the new version of the tile.
Once you have all the individual tiles correctly named within the directory, you'll need to generate the tilesheet. All the tiles must be combined into one large tilesheet image that both Tiled and the game use.
We have a script generates this tilesheet, which you can run in the terminal with the command: npm run make-tilesheet (as a reminder, you can get to the terminal from GitHub Desktop with Repository>Open in Terminal or Repository>Open in Command Prompt).
Once you have run the make-tilesheet command, your new tiles should appear in Tiled when you view the .tsx file (you may need to click a "Reload" button or reopen the file for Tiled to update). Now, you need to set all the properties for your new tiles; see the Configuring tile properties section above for more info.
In order to keep things simple, we're only going to use one tileset (the "default" one) for all the ground tiles in this game. If you were going to make a tilesheet other than the "default" one, however, you'd need to specify which tileset you're generating with: npm run make-tilesheet -- -n "NAME OF TILESET".
Currently, all tiles have a 32x32 square hitbox that covers their entire texture. This means that you should avoid using textures with large transparent sections, as the player will still be able to stand on the transparent parts.
You may notice that Tiled has a feature to edit the collision hitboxes for tiles. However, this feature is not supported by our physics engine; any changes you make to the hitbox will not show up in the game. If you need a custom hitbox, it will have to be specially programmed in.