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
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.
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 BLIT
Ting 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
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:
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 )
PUT IMAGE tileset TILE #mushroom AT 32,32
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