LibGDX is a game framework and not a game engine. This is why it doesn’t have any editor to place the game objects or to make levels. Tiled is a 2D level/map editor well-suited for this purpose. In this article by Indraneel Potnis, the author of LibGDX Cross-platform Development Blueprints, we will learn how to draw objects and create animations. LibGDX has an excellent support for rendering and reading maps/levels made through Tiled.
(For more resources related to this topic, see here.)
Drawing objects
Sometimes, simple tiles may not satisfy your requirements. You might need to create objects with complex shapes. You can define these shape outlines in the editor easily. The first thing you need to do is create an object layer. Go to Layer | Add Object Layer:
You will notice that a new layer has been added to the Layers pane called Object Layer 1. You can rename it if you like:
With this layer selected, you can see the object toolbar getting enabled:
You can draw basic shapes, such as a rectangle or an ellipse/circle:
You can also draw a polygon and a polyline by selecting the appropriate options from the toolbar. Once you have added all the edges, click on the right mouse button to stop drawing the current object:
Once the polygon/polyline is drawn, you can edit it by selecting the Edit Polygons option from the toolbar:
After this, select the area that encompasses your polygon in order to change to the edit mode. You can edit your polygons/polylines now:
You can also add custom properties to your polygons by right-clicking on them and selecting Object Properties:
You can then add custom properties as mentioned previously:
You can also add tiles as an object. Click on the Insert Tile icon in the toolbar:
Once you select this, you can insert tiles as objects into the map. You will observe that the tiles can be placed anywhere now, irrespective of the grid boundaries:
To select and move multiple objects, you can select the Select Objects option from the toolbar:
You can then select the area that encompasses the objects. Once they are selected, you can move them by dragging them with your mouse cursor:
You can also rotate the object by dragging the indicators at the corners after they are selected:
Tile animations and images
Tiled allows you to create animations in the editor. Let’s make an animated shining crystal. First, we will need an animation sheet of the crystal. I am using this one, which is 16 x 16 pixels per crystal:
The next thing we need to do is add this sheet as a tileset to the editor and name it crystals. After you add the tileset, you can see a new tab in the Tilesets pane:
Go to View | Tile Animation Editor to open the animation editor:
A new window will open that will allow you to edit the animations:
On the right-hand side, you will see the individual animation frames that make up the animation. This is the animation tileset, which we added. Hold Ctrl on your keyboard, and select all of them with your mouse. Then, drag them to the left window:
The numbers beside the images indicate the amount of time each image will be displayed in milliseconds. The images are displayed in this order and repeat continuously. In this example, every image will be shown for 100ms or 1/10th of a second. In the bottom-left corner, you can preview the animation you just created. Click on the Close button.
You can now see something like this in the Tilesets pane:
The first tile represents the animation, which we just created. Select it, and you can draw the animation anywhere in the map. You can see the animation playing within the map:
Lastly, we can also add images to our map. To use them, we need to add an image layer to our map. Go to Layer | Add Image Layer. You will notice that a new layer has been added to the Layers pane. Rename it House:
To use an image, we need to set the image’s path as a property for this layer. In the Properties pane, you will find a property called Image. There is a file picker next to it where you can select the image you want:
Once you set the image, you can use it to draw on the map:
Summary
In this article, we learned about a tool called Tiled, and we also learned how to draw various objects and make tile animations and add images.
Carry on with LibGDX Cross-platform Development Blueprints to learn how to develop great games, such as Monty Hall Simulation, Whack a Mole, Bounce the Ball, and many more.
You can also take a look at the vast array of LibGDX titles from Packt Publishing, a few among these are as follows:
- Learning Libgdx Game Development, Andreas Oehlke
- LibGDX Game Development By Example, James Cook
- LibGDX Game Development Essentials, Juwal Bose
Resources for Article:
Further resources on this subject:
- Getting to Know LibGDX [article]
- Using Google’s offerings [article]
- Animations in Cocos2d-x [article]
