Scrolling tutorial

In this tutorial we are going to make a small 2D tilemap and scroll it horizontally on the screen. The plan is to make an instance of the layer object and add some tiles to it. Each tile is going to be a separate sprite. Then, a camera will be added and moved horizontally to produce the desired scrolling effect. We will not be discussing parallax for now, although this technique could easily be applied to multiple layers simultaneously.

Generating the tilemap

Our tilemap is going to be represented as a two dimensional Lua table. This example will have seven different types of tiles so the tilemap will contain number values from 1 to 7. Each tile is 32x32 pixels in size. We are going to iterate over the tilemap with a nested "for" loop in order to create the actual sprite objects which will be shown on the screen. The first row of the tilemap table should be rendered above the second and so forth. To determine the position of each tile sprite we take its index in the tilemap and multiply it by 32. Notice that the vertical or Y position of the sprite is negated. This is because in AGen sprites are rendered higher on the screen as their Y positional value increases. Another thing to note is that the tile images are rendered at the center of each sprite.


Figure 1: Positions of the tile sprites

Attaching a camera

After generating the tilemap we add a camera object to the same layer where the tiles are contained. The camera is then positioned near the center of the tilemap and is assigned to the default viewport. Lastly, we allow the user to move the camera horizontally using the arrow keys. We do so by polling the keyboard continually using a timer. These are the basic mechanics of our scrolling tutorial.

display:create ( "Scrolling example", 320, 240, 32, true )

scene = Layer ( )

map = {}
map[1] = { 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 }
map[2] = { 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 }
map[3] = { 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 }
map[4] = { 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4, 5, 6, 1 }
map[5] = { 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4, 5, 7, 7, 7, 5 }
map[6] = { 1, 1, 1, 1, 1, 1, 4, 5, 5, 6, 1, 1, 1, 4, 7, 7, 7, 7, 7, 7 }
map[7] = { 1, 1, 4, 5, 5, 5, 7, 7, 7, 7, 5, 6, 4, 7, 7, 7, 7, 7, 7, 7 }
map[8] = { 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3 }
map[9] = { 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2 }

images = {}
images[1] = Image ( "tiles/1.bmp" )
images[2] = Image ( "tiles/2.bmp" )
images[3] = Image ( "tiles/3.bmp" )
images[4] = Image ( "tiles/4.bmp" )
images[5] = Image ( "tiles/5.bmp" )
images[6] = Image ( "tiles/6.bmp" )
images[7] = Image ( "tiles/7.bmp" )

-- create and position sprites based on a tilemap table
for y = 1, #map, 1 do
  for x = 1, #map[y], 1 do
    local tile = map[y][x]
    local sprite = Sprite ( x * 32, y * -32 )
    sprite.canvas:set_source_image ( images[tile] )
    sprite.canvas:paint ( )
    scene:add_child ( sprite )
  end
end

-- create the camera
camera = Camera ( )
camera:set_position ( 10 * 32, 5 * -32 )
scene:add_child ( camera )

display.viewport.camera = camera

timer = Timer ( )
timer:start ( 32, true )

timer.on_tick = function ( timer )
  -- move the camera while the arrow keys are pressed
  local delta = timer:get_delta ( )
  if keyboard:is_down ( KEY_LEFT ) then
    camera.x = camera.x - delta
  elseif keyboard:is_down ( KEY_RIGHT ) then
    camera.x = camera.x + delta
  end
end
Download:  scrolling.lua
1.bmp
2.bmp
3.bmp
4.bmp
5.bmp
6.bmp
7.bmp