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.