Using TILED with ugBASIC 1.14.2

Tiled is a 2D level editor that helps to develop the content of any tile-based game. Its primary feature is to edit tile maps of various forms, and to support free image placement as well as powerful ways to annotate your level with extra information, that can be used by ugBASIC.

Introduction Tilesets Tiles Tilemaps

Introduction

For the uninitiated, a tile-based video game is based on the fact that the playing area is made up of small square graphic images (rectangular, parallelogram, hexagonal) called precisely tiles.

Basically it acts like a piece of a puzzle for building large images. These are then arranged in a grid, or a tilemap, which creates a visually appealing slice.

The ugBASIC language gives to programmers access to a real "tile engine", that construit the final graphics by arranging tiles in specific positions, until the intended area is covered.

The complete set of tiles available for use in a play area is together called tileset.


There are several benefits to using a tile engine.

  • limited number of images required - this will shorten development time and reduce the size of games;
  • image compression - having fifty 320x200pixels images for a game of fifty levels, or having a single image with 100 tiles makes a huge difference, in terms of space occupied;
  • isomorphism with hardware - the fact that the screen is made up of such tiles is a wonderfully technical distinction, since many home computers from the late 1970s to the mid-1990s had more or less native support for displaying screens of tiles (ugBASIC try, as usual, to give an isomorphic approach to the topic).

Basic concept: TILESETs

The first primitive that ugBASIC provides is the TILESET. The TILESET is, conceptually, equivalent to the already known IMAGES data type.

With a small but substantial difference: every single image can be "described" and becomes functional for the program written in ugBASIC.

For this reason, a TILESET must necessarily be created with an external tool, such as Tiled, and stored in one of the typical formats such as the tsx format.

So let's take an example file like Kenney's "Tiny Town". This file is made of 132 tiles, which reproduce the typical architectural and landscape elements of a small medieval city.

If we open it, we will see these elements. Now let's write the ugBASIC instruction that will allow loading the tileset in its entirely:

tileset := LOAD TILESET("kenney-tiny-town.tsx")

That's all. From now on we can use the classic syntax of PUT IMAGE (or BLIT IMAGE) with the FRAME instruction, to draw any of the 132 tiles on the screen.

PUT IMAGE tileset FRAME 29 AT 0,0

Note that instead of the keyword FRAME, it is possible to use the keyword TILE. Furthermore, it is possible to limit the drawing to the bitmap component only (therefore without the color component) or possibly carry out BLITTing operations. In other words, these instructions are fully equivalent:

BLIT put AS SOURCE
PUT IMAGE tileset TILE 29 AT 0,0
BLIT IMAGE tileset FRAME 29 AT 0,0 WITH put
BLIT IMAGE tileset TILE 29 AT 0,0 WITH put

example #1

Just a single TILE

Tiled allows you to load an image already made up of tiles and gives access to a convenient panel, which allows you to modify, individually, the properties of each single tile.

In particular, each tile has the following properties:

  • id - identification of the tile (read only);
  • class - class of thet tile;
  • width - width of the tile, in pixels (read-only);
  • height - height of the tile, in pixels (read-only);
  • probability - probability of selecting this tile;

Each of these fields maps to certain keywords or parameters of ugBASIC:

PUT IMAGE tileset TILE [id] AT [x],[y]
class = TILE CLASS( tileset, tile )
width = TILE WIDTH( tileset )
height = TILE HEIGHT( tileset )
probability = TILE PROBABILITY( tileset, tile )

Also, you can draw a tile using its class:

PUT IMAGE tileset TILE #mushroom AT 32,32


example #2

Basic concept: TILEMAPs

With TILESET element we can draw one TILE at a time on the screen, where we want.

However, it would be nice to be able to draw and represent whole maps, exactly as Tiled allows.

The ugBASIC compiler will make available the TILEMAP datatype that will serve just the purpose: to represent a map of those drawn by means of Tiled.

To use it, simply load the "tmx" file:

tilemap := LOAD TILEMAP("kenney-tiny-town.tmx")

To draw it on the screen you can use the PUT TILEMAP statement:

PUT TILEMAP tilemap

Note how the same map draws the same way on different screens. The map is however within the available screen size. But what if the map was bigger?

Simple: it only draws a part of the map, just like we expected. Note that each computer has its own resolution, so it would be appropriate to decline the maps and tiles according to the target.

This is always possible thanks to the mechanism of the folder linked to the target. To scroll the map we have to use the FROM parameter, as follows:


PUT TILEMAP tilemap FROM [dx],[dy]

The [dx] and [dy] values are the offsets (in terms of tiles) starting from which the map will have to be drawn on the screen. So, for example, with this command:

PUT TILEMAP tilemap FROM 2, 1

we are drawing tiles starting one position down and two positions to the right. Obviously we are not forced to consider these values as constants: introducing them in a loop, we can scroll the map along one direction, or both. Using the TILEMAP WIDTH and TILEMAP HEIGHT commands we can obtain, in fact, the extremes within which to scroll. Clearly, scrolling is downright slow. However, it is possible to improve it and make it more fluid, but it requires the introduction of other primitives.
example #3 example #4 example #5 example #6 example #7