Multi-layers

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
0rigins
Prole
Posts: 1
Joined: Fri Aug 16, 2019 8:44 am

Multi-layers

Post by 0rigins » Fri Aug 16, 2019 9:38 am

Hello,

I just started the language LUA / Love2d and I test myself on an ISO map, so I managed to make a base but I would add entities over (walls, trees, rocks, ect ...) someone has a trick to give me to superpose layers ?

best regards

Image

Code: Select all

local BRIQUE_LARGEUR = 64
local BRIQUE_HAUTEUR = 64

local camera = {}
camera.x = (love.graphics.getWidth() / 2) - BRIQUE_LARGEUR/2
camera.y = 0

local _MapSol = {}

local _ImgTiles = {}
_ImgTiles["1"] = love.graphics.newImage("img/tile_Grass1.png")
_ImgTiles["2"] = love.graphics.newImage("img/tile_Stone1.png")
_ImgTiles["3"] = love.graphics.newImage("img/tile_Road1.png")

function LoadMap(  )

	_MapSol[1]  = "2222332222"
	_MapSol[2]  = "2111331112"
	_MapSol[3]  = "2111331112"
	_MapSol[4]  = "2111331112"
	_MapSol[5]  = "3333333333"
	_MapSol[6]  = "3333333333"
	_MapSol[7]  = "2111331112"
	_MapSol[8]  = "2111331112"
	_MapSol[9]  = "2111331112"
  _MapSol[10] = "2222332222"
	
end

function love.load()

	love.window.setTitle( "ISOMETRIQUE TEST" )
	love.window.setMode(800, 600, {fullscreen=false, vsync=true, minwidth=800, minheight=600})
	LoadMap()
	
end

function love.update(dt)

end

function love.draw()

	local ligne,colonne,char
	for ligne=1,10 do
		for colonne=1,10 do
			char = string.sub(_MapSol[ligne],colonne,colonne)
			if _ImgTiles[char] ~= nil then
				local x = (colonne - ligne) * BRIQUE_LARGEUR/2;
				local y = (colonne + ligne) * BRIQUE_HAUTEUR/4;
				love.graphics.draw(_ImgTiles[char], x + camera.x, y + camera.y)
			end
		end
	end
	
end

function love.keypressed(key)

	if key == "escape" then
		love.event.quit()
		return
	end
	
end

User avatar
rougan
Citizen
Posts: 58
Joined: Wed Aug 12, 2015 10:30 am

Re: Multi-layers

Post by rougan » Fri Aug 16, 2019 3:21 pm

There's no 'trick' to it really, aside from just drawing more images at a greater y position than the base tile.

The best thing to do with isometric grids is to create a 2D table of the map, storing the screen drawing co-ordinates in each element of the table. So store these values:

Code: Select all

local x = (colonne - ligne) * BRIQUE_LARGEUR/2;
local y = (colonne + ligne) * BRIQUE_HAUTEUR/4;
Like this:

Code: Select all

map = {
{{x=..,y=..},{x=..,y=..},{x=..,y=..}},
{{etc},{},{}},
{{},{},{}}
}

and then you can draw multiple objects on the current square:

Code: Select all

for ligne = 1, #map, 1 do 
	for colonne = 1, #map[1] do 
		...
		love.graphics.draw(_ImgTiles[char], map[ligne][colonne].x + camera.x, map[ligne][colonne].y + camera.y)
		local rockOffset = {x=5,y=-20}
		love.graphics.draw(rock,map[ligne][colonne].x + camera.x + rockOffset.x, map[ligne][colonne].y + camera.y + rockOffset.y)
	end 
end 
rockOffset will change depending on where you want your object drawn on the tile. Play around with the values.
There are better ways of storing the objects+offsets on each tile, but I'm sure you can work it out :awesome:

Post Reply

Who is online

Users browsing this forum: Bing [Bot] and 53 guests