Adjusting screen and tilemap drawing

[Strelok]

So, I managed to finish a tutorial on tilemaping but I am to make the code even better. This is how my map is drawed on the screen.



But I would like the map to be centered.

Here is the code I've got:

main.lua

Code: Select all

require "functionsmapa"
require "config"

function love.load()
	loadMap('/mapas/mapa-teste1.lua')
end

function love.draw()
	drawMap()
end

functionsmapa.lua

Code: Select all

local tileW, tileH, tileset, quads, tileTable

function loadMap(caminho)
  love.filesystem.load(caminho)()
end

function newMap(tileWidth, tileHeight, tilesetCaminho, tileString, quadInfo)

	tileW = tileWidth
	tileH = tileHeight
	Tileset = love.graphics.newImage(tilesetCaminho)

	tilesetW, tilesetH = Tileset:getWidth(), Tileset:getHeight()

	quads = {}

	local tilesetW, tilesetH = Tileset:getWidth(), Tileset:getHeight()

	for _, info in ipairs(quadInfo) do
		quads[info[1]] = love.graphics.newQuad(info[2], info[3], tileW, tileH, tilesetW, tilesetH)
	end

	tileTable = {}
	
	local width = #(tileString:match("[^\n]+")) 

	for x = 1, width, 1 do tileTable[x] = {} end

	local x, y = 1, 1 
	for row in tileString:gmatch("[^\n]+") do
		assert(#row == width, 'Map is not aligned: width of row ' .. tostring(y) .. ' should be ' .. tostring(width) .. ', but it is ' .. tostring(#row))
		x = 1 
		for character in row:gmatch(".") do 
			tileTable[x][y] = character 
			x = x + 1 
		end 
		y = y + 1 
	end 

end

function drawMap()

	for columnIndex, column in ipairs(tileTable) do
		for rowIndex, char in ipairs(column) do
			x, y = (columnIndex-1)*tileW, (rowIndex-1)*tileH
			love.graphics.draw(Tileset, quads[char], x, y)
		end
	end

end

mapa-teste1.lua

Code: Select all

	local tileString = [[
#########################
X                    0  X
X  0                    X
X              0        X
X                       X
X    XX  XX   XXX X X   X
X   X  X X  X X   X X   X
X   X  X X  X X   X X   X
X   X  X XXX  XXX X X   X
X   X  X X  X X    X  0 X
X 0 X  X X  X X    X    X
X   X  X X  X X  X X    X
X    XX  XXX  XXX  X    X
X                       X
X   <><><><><><><><>    X
X                       X
X  0                  0 X
X#######################X
]]

local quadInfo = {
	{' ', 0, 0	 },	-- = chão
	{'0', 16, 0	 },	-- = alçapão fechado
	{',', 32, 0	 },	-- = borda superior-esquerda
	{'-', 48, 0	 },	-- = borda superior
	{'*', 64, 0	 },	-- = borda superior-direita
	{'#', 0, 16  },	-- = chão gradeado
	{'X', 0, 32	 },	-- = caixa
	{'C', 0, 48  }, -- = caixa superior-parede
	{'c', 0, 64	 },	-- = caixa inferior-chão
	{'O', 16, 16 },	-- = alçapão aberto
	{'<', 16, 32 }, -- = mesa esquerda
	{'B', 16, 48 },	-- = caixa2 superior-parede
	{'b', 16, 64 },	-- = caixa2 inferior-chão
	{'e', 32, 16 },	-- = borda esquerda
	{'>', 32, 32 }, -- = mesa direita
	{'T', 32, 48 },	-- = caixa3 superior
	{'t', 32, 64 }, -- = caixa3 inferior-chão
	{'p', 48, 16 }, -- = borda inferior esquerda
	{'P', 48, 32 }, -- = borda inferior
	{'D', 48, 48 }, -- = porta aberta superior
	{'d', 48, 64 },	-- = porta aberta inferior
	{'r', 64, 16 },	-- = borda direita
	{'R', 64, 32 }, -- = borda inferior direita
	{'u', 64, 48 },	-- = parede superior
	{'U', 64, 64 }  -- = parede inferior
	}

newMap(16, 16 , '/imagens/tileset001.png', tileString, quadInfo)

And what I tried to do: config.lua

Code: Select all

function love.config(t)
	t.version = '0.0.1'
	t.screen.width 	= x
	t.screen.height	= y
end

Unfortunately I got a little confused on the "functionsmapa.lua" code and I don't know what to do here. It is the last thing I want to modify before starting to implement movimentation and obstacles. Help me, guys, I am really stuck.

[micha]

config.lua is the wrong place to look.

You can apply a transform before you draw the map. The transform you need is a translation. Call

Code: Select all

love.graphics.tranlate(xOffset,yOffset)

to shift everything xOffset pixels to the right and yOffset pixels down. You have to put this function in the line before you draw the map.

What values do you need for x and y? This is a bit math: In the newMap function you have the two variables tileW and width. If you multiply them, you get the width of the map in pixels. To center the map on screen you first have to move it to the right by half of the screen width (then the top left corner is in the center) and then back to the left by half of the map width.

Code: Select all

xOffset = love.window.getWidth() / 2 - tileW*width / 2
yOffset = love.window.getHeight() / 2 - tileH*height / 2

The variables height and width are the size of the map in tiles. To get them you can do this:

Code: Select all

width = #tileTable
height = #tileTable[1]