Skip to content

Grid based Camera Movement

BearThorne edited this page Oct 18, 2017 · 12 revisions

I know there's already another tutorial on a scrolling camera...
https://github.com/nesbox/TIC-80/wiki/Camera-tutorial

the above tutorial is really good, and even shows you how to make a "passive" camera!
but I prefer Grid-based Movement for my games. and it didn't work well for me to use a smooth moving camera when my character simply jumps from one tile to the next. So Here's a quick tutorial on camera movement for a Grid-based game.

You can play the Completed Game here: https://tic.computer/play?cart=250

the entire code is only 29 lines, and half of those is just for making the player move in the first place!

-- title:  Grid-Based Camera
-- author: Bear Thorne
-- desc:   A grid based scrolling camera demo
-- script: lua

MAXX=30
MAXY=17

p={x=0,y=0}

function TIC()

 if btnp(0) and mget(p.x,p.y-1)<1 then 
	 p.y=p.y-1 
	end
	if btnp(1) and mget(p.x,p.y+1)<1 then
	 p.y=p.y+1
	end
	if btnp(2) and mget(p.x-1,p.y)<1 then
	 p.x=p.x-1
	end
	if btnp(3) and mget(p.x+1,p.y)<1 then
	 p.x=p.x+1
 end

	cls(3)
	map(p.x-15,p.y-8,MAXX,MAXY)
        spr(256,15*8,8*8,0)
end

Here's how it works...notice our player object:

p={x=0,y=0}

This keeps track of our player...sure that's normal. but look at the spr() function in charge of drawing the player to the screen:

spr(256,15*8,8*8,0)

It doesn't change to show the players current position! it just draws the player floating in the center of the screen! (30x17 visible map area...half is about 15x8...multiply by 8 for cell size to get the pixel coordinates)

now look at the map function:

map(p.x-15,p.y-8,MAXX,MAXY)

this is where the magic happens. The map() function is told to draw the map starting at 15 cells to the left of the player, and 8 cells above the player. since that agrees with our player sprite's position...the "static" sprite always floats over our hero,

NOTE...the various drawing functions in TIC-80: rect() circ() spr() etc. draw graphics to the screen space...NOT to the map space. I haven't had to deal with minions and NPC's running around my levels so I'm not sure how it will work yet. I'm pretty sure we're going to have to modify their (x,y) coors by the camera somehow to get them to move with the map...That other camera tutorial did mention something about that, but i'm just going to have to sit down and hammer out the details.

feel free to use any of the above code in your own projects, and if you're feeling generous, leave a credit for me at the top of your file!

if you have questions, or requests for future tutorials, you can email me at bearknucklesketching@gmail.com

Clone this wiki locally