Layering Tiles
Hello there! Today I will be demonstrating how to layer your images using a tile map system I saw here.
This is what my main.lua looks like:
require "map"
function love.load() --Run only at start of game
love.graphics.setBackgroundColor( 255, 255, 255 )
end
You have to require 'map' (the name of the file that does all the tile mapping) so that you can call all of the functions in 'main.lua'
function love.draw() --Run every time game can
draw_map()
end
function love.update(dt) --Run every time the game can
end
function love.focus(bool) --Run if mouse goes in or out of window
end
function love.keypressed( key, unicode ) --Run if key is pressed
move_map(key)
end
function love.keyreleased( key, unicode ) --Run if key is released
end
function love.mousepressed( x, y, button ) --Run if mouse is pressed
end
function love.mousereleased( x, y, button ) --Run if mouse is released
end
function love.quit() --Run right before game is closed
end
The rest of the code is self explanatory: you draw the tiles, and then check to see if a key is pressed to move the map.
Here is the 'map.lua' that I based off of the aforementioned code, broken down step by step.
layers = {}
tile = {}
for i = 0, 4 do -- change 3 to the number of tile images minus 1.
tile[i] = love.graphics.newImage( "tiles/tile"..i..".png" )
end
What this does is makes two tables called 'layers' and 'tile'. It then uses a for loop to register each picture instead of doing it separately. Note that I have my pictures stored in a folder called 'tiles'.
layers[1] = {
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
}
layers[1].map_w = 20 --defines the width of the map. IMPORTANT: this (as well as the map_h) must match the vertical and horizontal dimensions you have made
layers[1].map_h = 20 --defines the height of the map.
layers[1].map_x = 0 --where you start drawing the map horizontally.
layers[1].map_y = 0 --where you start drawing the map vertically.
layers[1].map_offset_x = -50 --size of tile width for best results
layers[1].map_offset_y = -50 --size of tile height for best results
layers[1].map_display_w = 800/50 --for best results divide the screen width by the width of the tile
layers[1].map_display_h = 700/50 --divide the screen height by the height of the tile
layers[1].tile_w = 50 --should correlate with your picture
layers[1].tile_h = 50 --should correlate with your picture
What this does is make a map using all '0' (a clear image for my purposes). If you were to run this right now (which you can't, since you haven't made the draw_map yet) it would look like white background. [1]
layers[2] = {
{ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 },
{ 1, 0, 2, 0, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 0, 2, 0, 1 },
{ 1, 3, 0, 2, 0, 2, 0, 2, 0, 0, 0, 0, 2, 0, 2, 0, 2, 0, 3, 1 },
{ 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 3, 1 },
{ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1 },
{ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 },
{ 1, 0, 2, 0, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 0, 2, 0, 1 },
{ 1, 3, 0, 2, 0, 2, 0, 2, 0, 0, 0, 0, 2, 0, 2, 0, 2, 0, 3, 1 },
{ 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 3, 1 },
{ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1 },
{ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 },
{ 1, 0, 2, 0, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 0, 2, 0, 1 },
{ 1, 3, 0, 2, 0, 2, 0, 2, 0, 0, 0, 0, 2, 0, 2, 0, 2, 0, 3, 1 },
{ 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 3, 1 },
{ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1 },
{ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 },
{ 1, 0, 2, 0, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 0, 2, 0, 1 },
{ 1, 3, 0, 2, 0, 2, 0, 2, 0, 0, 0, 0, 2, 0, 2, 0, 2, 0, 3, 1 },
{ 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 1, 2, 3, 3, 1 },
{ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 },
}
layers[2].map_w = 20 --defines the width of the map. IMPORTANT: this (as well as the map_h) must match the vertical and horizontal dimensions you have made
layers[2].map_h = 20 --defines the height of the map.
layers[2].map_x = 0 --where you start drawing the map horizontally.
layers[2].map_y = 0 --where you start drawing the map vertically.
layers[2].map_offset_x = -50 --negative size of tile width for best results
layers[2].map_offset_y = -50 --negative size of tile height for best results
layers[2].map_display_w = 800/50 --for best results divide the screen width by the width of the tile
layers[2].map_display_h = 700/50 --divide the screen height by the height of the tile
layers[2].tile_w = 50 --should correlate with your picture
layers[2].tile_h = 50 --should correlate with your picture
Same thing, but 1 is green, 2 is blue, 3 is red. It would look a bit like this: [2]
ayers[3] = {
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 4, 4, 4, 4, 0, 0, 4, 4, 4, 4, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 4, 4, 4, 4, 0, 0, 4, 4, 4, 4, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 4, 4, 4, 4, 0, 0, 4, 4, 4, 4, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 4, 4, 4, 4, 0, 0, 4, 4, 4, 4, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
{ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
}
layers[3].map_w = 20 --defines the width of the map. IMPORTANT: this (as well as the map_h) must match the vertical and horizontal dimensions you have made
layers[3].map_h = 20 --defines the height of the map.
layers[3].map_x = 0 --where you start drawing the map horizontally.
layers[3].map_y = 0 --where you start drawing the map vertically.
layers[3].map_offset_x = -50 --negative size of tile width for best results
layers[3].map_offset_y = -50 --negative size of tile height for best results
layers[3].map_display_w = 800/50 --for best results divide the screen width by the width of the tile
layers[3].map_display_h = 700/50 --divide the screen height by the height of the tile
layers[3].tile_w = 50 --should correlate with your picture
layers[3].tile_h = 50 --should correlate with your picture
And finally the last one. 4 is orange. It should look like this: [3]
function draw_map()
for l = 1, #layers do
for y = 1, layers[l].map_display_h do
for x = 1, layers[l].map_display_w do
love.graphics.draw(
tile[layers[l][y+layers[l].map_y][x+layers[l].map_x]],
(x*layers[l].tile_w)+layers[l].map_offset_x,
(y*layers[l].tile_h)+layers[l].map_offset_y)
end
end
end
end
This draws the map. See the article to understand how it works (just edited).
function move_map(key)
for l = 1, #layers do
if key == 'up' then
layers[l].map_y = layers[l].map_y-1
if layers[l].map_y < 0 then
layers[l].map_y = 0;
end
end
if key == 'down' then
layers[l].map_y = layers[l].map_y+1
if layers[l].map_y > layers[l].map_h - layers[l].map_display_h then
layers[l].map_y = layers[l].map_h - layers[l].map_display_h;
end
end
if key == 'left' then
layers[l].map_x = math.max(layers[l].map_x-1, 0)
end
if key == 'right' then
layers[l].map_x = math.min(layers[l].map_x+1, layers[l].map_w - layers[l].map_display_w)
end
end
end
Again, see previous article.
![[1]](https://www.love2d.org/w/images/c/c4/pic_1.png){kind=link}
![[2]](https://www.love2d.org/w/images/d/d8/pic_2.png){kind=link}
![[3]](https://www.love2d.org/w/images/6/6f/pic_3.png){kind=link}