Tutorial 2

Basic tile operations

For this tutorial it is assumed the user has a basic understanding of how LOVE operates and how to structure LOVE game files.

To get Advanced Tiled Loader (ATL) up and running you first need to download the latest version from github as well as install LOVE and Tiled.

Goal
To demonstrate basic operation on tiles and implement a simple camera system

Step 1
If you don't have the files from Tutorial-1 then download them here.

Step 2
To create the camera we're going to need to define a translation vector and love.update(). Append this to the end of main.lua created in tutorial1:

-- Define the translation
local tx, ty = 0, 0

-- Move the camera
function love.update(dt)
	if love.keyboard.isDown("up") then ty = ty + 250*dt end
	if love.keyboard.isDown("down") then ty = ty - 250*dt end
	if love.keyboard.isDown("left") then tx = tx + 250*dt end
	if love.keyboard.isDown("right") then tx = tx - 250*dt end
end

Step 2
We need to redefine love.draw() to include the camera changes. Let's also set the Draw Range while we're at it.

-- Redefine love.draw to include the camera features
function love.draw()
	
	-- Apply the translation
	love.graphics.translate( math.floor(tx), math.floor(ty) )
	
	-- Set the draw range. Setting this will significantly increase drawing performance.
	map:autoDrawRange( math.floor(tx), math.floor(ty), 1, pad)
	
	-- Draw the map
	map:draw()
	
end

Notice that we floored the translation value. Rendering does some funny things if the translation coordinants aren't integers.

Step 3
Now that we have our camera and we can move around. Let's play with the tiles a bit. Let's swap the tiles (0,12) and (1,13). Append this to the end of the file:

-- Save the tiles
local greenBush = map("Ground")(0,12)
local brownBush = map("Ground")(1,13)

-- Swap the tiles
map("Ground"):set(0,12, brownBush)
map("Ground"):set(1,13, greenBush)

Step 4
Now let's go nuts and replace all green bushes with brown bushes and vica versa. Let's suppose that we didn't know tile(0,12) was a brown bush and (1,13) was a green bush. How do we tell them apart? To do this set some property inside Tiled to identify them.

Now that we've changed the tile properties we need to go through each tile and find the ones we want. All of the tile types are stored inside map.tiles so we just need to iterate through them all and find the ones we want.

-- Go through each tile and store the ones that have names
local tiles = {}
for id, tile in pairs(map.tiles) do
	if tile.properties.name then
		tiles[tile.properties.name] = tile
	end
end

Great! If you did everything correctly then tiles["Green Bush"] and tiles["Brown Bush"] should exist.

Step 5
Ok. So we found the right tiles. Let's go through all of the tiles in the "Ground" layer and swap the brown and green bushes. To do this we need to iterate through the layer like we did with map.tiles in step 4. TileLayers have a special function to do this called iterate(). This is how you use it:

-- Go through each tile and swap the brown and green bushes
for x, y, tile in map("Ground"):iterate() do
	if tile.properties.name == "Green Bush" then
		map("Ground"):set(x, y, tiles["Brown Bush"])
	elseif tile.properties.name == "Brown Bush" then
		map("Ground"):set(x, y, tiles["Green Bush"])
	end
end

You can iterate over tiles in rectangle, line, and circle shapes as well. See Grid for more information.

Finished
We learned how to use the draw range and manipulate the tiles. Next we'll learn about custom layers and how to effectively use object layers.

Previous: Tutorial 1 - Setting up and drawing a map
Next: Tutorial 3 - Using custom layers and callbacks
Home