Tiled
tiled is a free, open source level editor.
macroquad-tiled
- is an optional part of macroquad responsible for tiled editor integration.
Designing the world
This is how the big level made with very basic ideas to what we are going to use here looked in tiled
Loading in macroquad
Drawing: Tilemaps
#
It works, we got our nice static background
Drawing: Sprites
Now we got the world rendered, let's add some characters.
We can draw the player right into the tileset and use draw_tiles
with different source/destination rects on this part of the tilemap right as we did it for the world.
But macroquad-tiled
have some special functions dedicated for sprites drawing.
Retro consoles vibe
Now we can draw sprites from tileset and draw the whole maps from the same tileset.
This actually is pretty close to what we had for game development back into early video console days with hardware sprite controllers!
Also some fantasy consoles like pico-8
use very similar video memory model.
Paralax
In tiled we had two layers - with foreground and background.
First step: draw the background as well:
There is really easy way to add some life to static tiled world: parallax effect.
TODO: figure out order of the chapters to not confuse with suddedenly appeared camera
There are various way to do parallax scrolling, but lets implement some simple hack to demonstrate the idea.
// this (with magically appeared camera) simple formula will give us 0..1 value
// with 0 on left side of the level and 1 on the right
let parallax_offset = level.camera / vec2(deset_rect.w, dest_rect.h);
// we can just draw the background layer slightly bigger than foreground
// to make some room to move it around
let mut dest_rect_parallax = Rect::new(
-PARALLAX_EXTRA_W / 2.,
-PARALLAX_EXTRA_H / 2.,
dest_rect.w + PARALLAX_EXTRA_W / 2.,
dest_rect.h + PARALLAX_EXTRA_H / 2.);
// and now shift it by our offset
dest_rect_parallax += parallax_offset;
self.tiled_map.draw_tiles("back", dest_rect_parallax, level.area);
self.tiled_map.draw_tiles("level", dest_rect, source_rect);
Now the background is moving slightly different than the foreground.