Grid Scrolling

[DB]

Hi,

I'm trying to make this RPG and everything's going quite well so far, but I'm a bit new when it comes to grid creation and scrolling through a level that has been created with tiles. Like I had mentioned before I'm trying to create a typical Japanese Roleplaying Game like Golden Sun or Final Fantasy; The effect I want to create is what can be seen in this playthrough of Golden Sun: http://www.youtube.com/watch?v=471MozBfrrE ( at 3.05 ). The problem I'm having is that the formula I'm using right now just works on one map and changing the resolution of my screen jumbles it up as well. I also don't really know how I can get my grid to stop moving once it reaches the -end- of the map. I hope this makes some sense at least. Anyway.. the code I have so far is this;

Code: Select all

function load_level(level)
	love.filesystem.load(level)()
end

--new_map gets called in level
function new_map(mapwidth, mapheight, tile_w, tile_h, tilemap)
	
	map_w = mapwidth
	map_h = mapheight
	tilewidth = tile_w
	tileheight = tile_h

	
	map = tilemap
	tile = {}
	
	Tileset = love.graphics.newImage("images/tilesheet.png")
	local tilesetW, tilesetH = Tileset:getWidth(), Tileset:getHeight()
	
	--temp quads, will probably use some sort of for loop for this later
	firstQuad = love.graphics.newQuad(0,0,tile_w,tile_h,tilesetW,tilesetH)
	secondQuad = love.graphics.newQuad(40,0,tile_w,tile_h,tilesetW,tilesetH)
	thirdQuad = love.graphics.newQuad(80,0,tile_w,tile_h,tilesetW,tilesetH)
	
	-- temp tiles, will probably use some sort of for loop for this later
	tile[0] = firstQuad
	tile[1] = secondQuad
	tile[2] = firstQuad
end

function playerinit()
	Player = love.graphics.newImage("images/player.png")
	Playermovement = 0
	Player_x = love.graphics.getWidth() / 2;
	Player_y = love.graphics.getHeight() / 2;
	
end

-- temp variables
Grid_x = 0
Grid_y = 0

function draw_map()

	local map_x = 0
	local map_y = 0

	for y=1, map_h do
		for x=1, map_w do
			love.graphics.drawq(Tileset, tile[map[y+map_y][x+map_x]], Grid_x + (x*tilewidth-tilewidth), Grid_y + (y*tileheight-tileheight))
		end
	end
end

function love.load()
	load_level("levels/level1.lua")
	playerinit()
end

function love.draw()
	draw_map()
	love.graphics.draw(Player, Player_x,Player_y)
end

function love.update(dt)
	
	print(Grid_x)

	if love.keyboard.isDown("lalt") and love.keyboard.isDown("f4") then
		love.event.quit()
	end
	if love.keyboard.isDown( "right" ) then
        Grid_x = Grid_x - 500 * dt
    end
	if love.keyboard.isDown( "left" ) then
		 Grid_x = Grid_x + 500 * dt
	end
	if love.keyboard.isDown( "up" ) then
        Grid_y = Grid_y + 500 * dt
    end
	if love.keyboard.isDown( "down" ) then
		 Grid_y = Grid_y - 500 * dt
	end
-- bounding box for the edges of the map, here's one of the main problems I'm having as it doesn't seem to work with other tilemaps and screen resolutions
	if	Grid_x >= (table.getn(map[1]) * tilewidth / 2) then
		Grid_x = (table.getn(map[1]) * tilewidth / 2)
	end
	if	Grid_x <= -(table.getn(map[1]) * tilewidth / 2) then
		Grid_x = -(table.getn(map[1]) * tilewidth / 2)
	end
	if	Grid_y >= (table.getn(map) * tileheight / 2) then
		Grid_y = (table.getn(map) * tileheight / 2)
	end
	if	Grid_y <= -(table.getn(map) * tileheight / 2) then
		Grid_y = -(table.getn(map) * tileheight / 2)
	end
end 

my map looks like this:

Code: Select all

local map=
{
   {0,0,1,0,2,0,1,0,2,1,0,0,1,0,2,0,1,0,2,1,1},
   {0,0,1,0,2,0,1,0,2,1,0,0,1,0,2,0,1,0,2,1,1},
   {0,0,1,0,2,0,1,0,2,1,1,0,1,2,2,0,1,0,0,1,1},
   {0,0,1,0,2,0,1,0,1,1,0,0,1,0,2,0,1,0,2,1,1},
   {0,0,1,0,2,0,1,0,2,1,0,0,1,0,2,0,1,0,2,1,1},
   {0,0,1,0,2,0,1,0,2,1,0,0,1,0,2,0,1,0,2,1,1},
   {0,0,1,0,2,0,1,0,2,1,0,0,1,0,2,0,1,0,2,1,1},
   {0,0,1,0,2,0,1,0,2,1,0,0,1,0,2,0,1,0,2,1,1},
   {0,0,1,0,2,0,1,0,2,1,0,0,1,0,2,0,1,0,2,1,1},
   {0,0,1,0,2,0,1,0,2,1,0,0,1,0,2,0,1,0,2,1,1},
   {0,0,1,0,2,0,1,0,2,1,0,0,1,0,2,0,1,0,2,1,1},
   {0,0,1,0,2,0,1,0,2,1,0,0,1,0,2,0,1,0,2,1,1},
   {0,0,1,0,2,0,1,0,2,1,0,0,1,0,2,0,1,0,2,1,1},
   {0,0,1,0,2,0,1,0,2,1,0,0,1,0,2,0,1,0,2,1,1},
   {0,0,1,0,2,0,1,0,2,1,0,0,1,0,2,0,1,0,2,1,1},
   {0,0,1,0,2,0,1,0,2,1,0,0,1,0,2,0,1,0,2,1,1},
   
}

new_map(21, 16, 40, 40, map)

My code need some re factoring as I'm really trying to get it to -work- right now but any suggestions on how I can improve my code is welcome I hope I'm not too vague.

Thanks in advance

[Roland_Yonaba]

You're looking for Tiled-based-scrolling, then.
See these tutorials on the wiki:

Efficient tiled based scrolling
Fine tiled based scrolling

They both offer a good logic, as a starting point.
You can also make use of love's graphics stack. Basically, you draw the entire scene (as you aready do), then you set a camera which moves in the world's bounds. See this very comprehensive tutorial series on camera-scrolling : part1 - part2 - part3
This can be optimized later on by rendering only the part of the world wich is actually in the camera viewing area.

Hope this helps, and good luck for your further projects!

EDIT: Well, you asked for comments on the code. Just my two cents.
You can reduce the args passed to new_map() function. Assuming that the resulting map width and height are basically the same as the grid passed as argument, you can prototype new_map() as follows:

Code: Select all

function new_map(tile_w, tile_h, tilemap)
  local map_w = #tilemap[1]
  local map_h = #tilemap
 -- same as before
end

And consider using local variables, instead on global ones, which pollutes the global environment and makes code messy and hard to maintin in the long run.

[DB]

Whoo, I finally got it to work Thanks a lot! Those links really helped me out. I had already taken a look at those tile scrolling tutorials but I had a hard time understanding them properly. Just took some thinking I guess :p Thinking is hard! Anyway.. thanks again