Tutorial 10: Tilemaps
In this tutorial you will learn how to create neat tilemaps!
Before starting this tutorial be sure to setup an empty project with the Setup Tutorial.
What is a "tilemap"?
In it's most basic form, a tilemap is a matrix of chunks of textures (sprites) that compose the level layout. you can read more about it here.
That's it. :)
Now that you know about tilemaps, time to learn about lightings!
continue to next tutorial -->
Ness::TileMapPtr map = scene->create_tilemap("tilemap.jpg", Ness::Sizei(100, 100), Ness::Sizei(32, 32));
map->get_sprite(Ness::Ponti(5, 10))->change_texture("new_text.png");
Ness::SpritePtr chosenTile = map->get_sprite_by_position(SomePos);
#include <NessEngine.h>
class IsoTilemap : public Ness::TileMap
{
public:
// constructor (just call the TileMap's ctor and then fix tiles position to be isometric)
IsoTilemap(Ness::Renderer* renderer, const Ness::String& spriteFile,
const Ness::Sizei& mapSize, const Ness::Size& singleTileSize,
const Ness::Size& tilesDistance = Ness::Size::ZERO,
Ness::TCreateTileSprites createSpriteFunction = nullptr) :
TileMap(renderer, spriteFile, mapSize, singleTileSize, tilesDistance, createSpriteFunction)
{
for (int i = 0; i < m_size.x; i++)
{
for (int j = 0; j < m_size.y; j++)
{
m_sprites_distance.y = m_tile_size.y * 0.45f;
if (j % 2) m_sprites[i][j]->set_position(m_sprites[i][j]->get_position() - Ness::Point(m_tile_size.x * 0.5f, 0.0f));
m_sprites[i][j]->set_position(Ness::Point(m_sprites[i][j]->get_position().x, j * m_sprites_distance.y));
m_sprites[i][j]->set_blend_mode(Ness::BLEND_MODE_BLEND);
}
}
}
protected:
// override function to get how many tiles in screen on x axis, adds +2 /bc we change every second line position
virtual int get_tiles_in_screen_x()
{
return TileMap::get_tiles_in_screen_x() + 1;
}
};
Ness::TileMapPtr map = ness_make_ptr<IsoTilemap>(&render, "tilemap.png", Ness::Sizei(100, 100), TileSize);
scene->add(map);
while the most common use of a tilemap is for rpg-style of games like the example above, you can be creative with tilemap and use it for platformer games as well as other purposes.
Creating a tilemap
To create a tilemap, simple use the built-in tilemap scene node:
let's go over the parameters:
first param is the texture to use for the tilemap. you can later replace texture for individual tiles, but the given texture will be used by default on all tiles.
second param is how many tiles we should have in our tilemap (rows and columns), in this case 100x100 = 10,000 tiles.
last param is the size of a single tile in the tilemap, in this case, 32x32 pixels.
the object 'map' we now have is simply a scene node with a built-in matrix of sprites representing the tiles.
Using a tilemap
Once the tilemap is created, you can access invidiual tiles and use them just like sprites. for example, let's say we want to change the texture of a specific tile, indexed (5, 10):
You can also get tile from the tilemap based on position (useful to "pick" tiles from mouse input or character position):
Nodemap
In some cases you will want to create a tilemap with nodes rather then sprites. for example, if you want every tile to be a combination of several different sprites, you will need a node representing every tile you can append your sprites to.
Just for that, there is the Nodesmap.
This object behaves just like a normal tilemap, but generate scene nodes instead of tiles and it's up to you to create the sprites and attach them to the nodes. you create nodesmap with create_nodesmap().
Tilemap editor demo
To see the tilemap object in action, you can have a look at the following example project.
Just copy the cpp and the texture file and fix the paths (change all "../ness-engine" into "ness-engine", the examples use different path), and you should get a basic tilemap editor that looks something like this:
Isometric tilemap
Isometric tilemap is a tilemap made from isometric tiles (tiles that appeared to be "rotated" by 45 degrees torward the camera):
you can easily create an isometric tilemap by inherting from the tilemap node and add some minor changes:
what we do to turn a tilemap into isometric is simple: we create a constructor that gets the same parameters as the tilemap node, and we call the TileMap constructor with them.
then, we loop over all the tiles in the matrix and we rearrange them so that every second line will be half the tile distance to the left and we also tighten the distance on y axis by little. eventually our isometric sprites matrix would look like this:
now to use our customized isometric map:
You can find a running example of isometric map here, which should looks like this:
for more information about tilemaps simply refer to the tilemap header file.
Help ness-engine grow!