Platformer with Tiled

Prerequisites

• Visionaire Studio 5.3.1 or newer
• The Paper Pixels asset pack by v3x3d (free, donations welcome)
• The Tiled map editor (free, donations welcome)
• Sprite Sheet Slicer by isometric8, a small tool that cuts spritesheets into single frames

Basic knowledge of object oriented programming helps. The game design is simple: reach the end of the level, avoid traps, obstacles and enemies, collect items and use ladders.

Setting up the player

First you cut the player's spritesheet into frames, then import the animations into Visionaire and finally give the player physics with Box2D.

Slicing the spritesheet

In Sprite Sheet Slicer:

1. Import the source image.
2. Choose Slice by cell size and enter 8 × 8.
3. Click Slice. The single frames appear in the right panel.
4. Group the frames: select all images of one animation, for example the run cycle.
5. Enter a file name prefix, for example player_run.
6. Enter the start number, for example 1. The following frames of the group are numbered automatically.
7. Repeat this for every animation (idle, run, jump, hit).
8. Check the output folder and click Write images to disk. All frames are exported, keep the ones you need.

Importing the animations

In Visionaire, create a scene (for example level1) with a new object (for example player) and import the animations. For now, set the idle animation as default animation so you can see the player when you run the game.

Adding physics

To react to collisions and forces, the player needs a Box2D body with a fixture. Add both as components to the player object, as described in the Ilios scripting guide:

Run the game: the player falls off the screen. Next you build the ground for it.

Building the level

The level is built in Tiled, including the collision information, and then imported into Visionaire.

Creating the map in Tiled

The game resolution is 320 × 240 pixels and the tiles are 8 × 8 pixels. Create a map of 960 × 480 pixels, so the level will scroll, and save it as a .tmx file.

Create a tileset from the tiles.png image of the Paper Pixels pack:

Now define the collision information. Do this before you lay out the map: it decides which tiles collide, like walls and ground. In the tileset editor, open the collision editor and adjust the bounding boxes of every tile that needs collision:

Now build your level. With View > Show Tile Collision Shapes you can check the collision boxes at any time:

Important: Visionaire can only read the map if the tilesets (usually .tsx files) are embedded in the .tmx file. Set this in the Tiled preferences:

In the end you only need the map file (.tmx) and the tileset image(s) in the same folder:

Importing the map into Visionaire

1. Create a new scene object for the map, for example level_map.
2. Add a TMX component to it and import the .tmx file. Visionaire reads and displays the map.
3. Add a Box2D body component and set it to Static, so the world's forces do not move the map.

Run the game: the player falls and lands on the ground. The map was imported correctly and the physics work.

You can also check the imported collision information in the console:

Next steps

The original tutorial continues with an input manager: a global script that reads the arrow keys and the space bar and returns the current direction as a 2D vector, for example (-1,0) for left or (1,-1) for right and up at the same time. Such a script is linked under Global Behaviours. This part is still being written, see the original tutorial for updates.