Making Tiles, Maps and Sprites

We will be using external software to help us with creating the visuals for our game. There is no need to create original images for your game, in fact, all the resources mentioned below will help you create a visually appealing game without much art knowledge at all.

Tiled

Tiled is an application that will help you create your game’s tilemap. By importing a set of tiles as a new Tileset, you can then build a Tilemap out of those tiles.

Download Tiled here: https://www.mapeditor.org/

There’s an option to Donate, but you can skip it and just download it for free.

IMPORTANT: Your computer may not be able to open it because of your security settings, to fix this issue follow these steps.

1. Open System Preferences.
2. Go to ‘Security and Privacy’.
3. Under “Allow apps downloaded from:” if you’ve recently tried to open Tiled, simply click “Open Anyways” and enter your password.

Tilesets

IMPORTANT: You can only use one tileset per tilemap, otherwise LibGDX is going to render your map with the wrong tilesets in each tile! If you would like to use multiple tilesets, a workaround is to put all the tileset images onto 1 image, or to draw your map and then export your map as an image, and then make a new tileset with that.

Tilesets are a selection of tiles that you can build a Tilemap out of. After opening Tiled, you should see a screen like this:

To create a new Tileset you should click “New Tileset…” and input the name of your new Tileset.

For the Type field, you can choose one of the two ways to make a Tileset, which is to either make all the tiles yourself (which is troublesome) or upload one image with all the different tiles as seen below.

Based on a Tileset Image

In the Source field, select the particular image or directory of images you’d like to be added to your Tileset.

The Tile Width/Height refers to how big each tile is. The Margin refers to how many pixels of space is between the edge of your image and the first tile (this refers to both the top and bottom of the image). The Spacing refers to how many pixels are in between each tile in the image you selected. These fields all depend on the original source image, so be sure to know/find out what they are before pressing Save! If you’re unsure, you can always trial and error until you get the right numbers.

Based on a Collection of Images

If you would like to make your own tilesets, you can make each individual tile as an image, and then put them all together onto 1 tileset. However, keep in mind that each tile’s width and height would be dependent on each image’s width and height, so be sure to make each image the same size! To add tiles, go to ‘Tileset’ > ‘Add Tiles’. Then select all the images you’d like to add to your Tileset.

Tilemaps

A Tilemap is the actual map of your game world made out of tiles from your Tileset. Once you have tilesets ready to use, you can put them all together and draw your first map!

To make a new Tilemap click ‘File’ > ‘New’ > ‘New Map’. The Map Size can be set by you. Keep in mind that this can be adjusted later by going to ‘Map’ > ‘Resize Map’. Your Tile Size is dependent on how big your Tileset tiles are.

IMPORTANT: Make sure your Tile layer format is Base64 (zlib compressed)! If you use another format, especially Zstandard, it’s going to break when you try to load your map in your code.

Layers

There are 3 types of layers to choose from, namely Tile layer, Object layer, and Image layer, but we’ll really only be using the first 2. A Tile layer is where you will draw the tiles on from your Tileset. Think of this as the image/graphics layer. An Object layer is where you will create areas that your code can sense. This will likely be squares around things that the player and other things can collide with, like the ground or buildings. While making your map, you can select the tiles you want to draw with in the bottom right section called ‘Tilesets’.

The Tile toolbar is for the tile layer, drawing and erasing tiles onto/from the canvas. From Left to Right: Stamp Brush (standard drawing tool), Terrain Brush, Wang Brush, Paint Bucket (for filling in a big area with the same tile), Shape Fill (for drawing and filling a square with the same tile), Eraser, Rectangle Selection, Magic Wand

The object toolbar is for the object layer, where you can select different drawing tools to draw the object borders. From Left to Right: Object Selection Tool, Edit Polygons, Insert Rectangle, Insert Point, Insert Ellipse, Insert Polygon (allows you to make custom shapes)

To create Objects on your object layer, click on a new object layer and select the appropriate Object tool on the top toolbar. Then hold down the Command (cmd) key while you’re drawing to snap to grid.

While making your object layers, it is important to keep different interactable objects on different layers. This is so that you can easily distinguish them in your code later on. For example, having your code look for ‘Door’ objects specifically.

Making Sprites

In order for our code to reference each sprite’s image frame, we have to pack our sprite resource images into a texture pack. You can include all the sprite images that you have and put them into 1 big image easily with a tool called GDX Texture Packer.

Note: You can make your own sprites, but it will take a lot of time since you have to draw a new sprite for every frame in your sprite’s movements/actions! Here’s a good website for existing sprite resources: https://www.spriters-resource.com/

Download the latest release of the GDX Texture Packer here: https://github.com/crashinvaders/gdx-texture-packer-gui/releases. Please follow the next few steps closely, otherwise there’s a high chance the application won’t load!

1. Install the newest .zip version (as of now it’s 4.8.2). Please be sure to download the .zip file rather than the .dmg file! If you download the .dmg, it will not work, and you’ll simply see “JRELoadError”.
2. Make sure your Java version is 1.8.0! If it isn’t, change your java version like so in your Terminal:
   1. Check if you have a java version of 1.8.0 installed: /usr/libexec/java_home -V
      • If you don’t, scroll down for instructions to download AdoptOpenJDK’s 1.8.0_222 version.
   2. If you do: export JAVA_HOME=`/usr/libexec/java_home -v 1.8.0_222` (replace 1.8.0_222 with whichever version have, the quotation marks are needed!)
   3. Check if your java version is now 1.8.0: java -version
   4. Sample of outputs in terminal:
      
3. Unzip the .zip file.
4. Now in your terminal, navigate to the folder generated when unzipping the .zip file. This can be done easily by typing cd and then dragging the folder into your terminal window, where the path to the folder should then appear in the command line, and then pressing enter.
5. Type java -jar gdx-texturepacker.jar to launch the .jar.

If you don’t have a 1.8.0 version of Java, or if the application is still not opening after switching java versions, download AdoptOpenJDK’s version of 1.8.0_222 here: https://adoptopenjdk.net/archive.html?variant=openjdk8&jvmVariant=hotspot. Please scroll all the way down and download the JDK for jdk8u222-b10.

If everything works fine, you should see an application that looks like this:

1. In order to use the texture packer, you’ll have to first create a new pack. To do so, press the New pack button located at the top left.
   
2. Set the output directory and change the generated file’s name if needed, located in the middle left.
   
3. We then need to add all the sprite resources that we would like to pack together. To do so, press Add input files located at the bottom left. Tip: even though it says input files, selecting a whole directory also works.
   
4. After adding all the sprite resource images and when you’re ready to pack all of them into 1 big image and file, press Pack all located at the top left.
   
5. After it finishes loading, you’ve successfully packed all your sprite resources together into 1 file and image!

Video Lesson