2D Space Shooter Part 2: Background

A bit of set up

Let's begin by setting up our scene.

We want a scrolling starry background. For this we'll use the repeatable texture on the right.

Our background

Because it is repeatable, its dimensions must be a power of two. I choosed a width of 512 for the texture, so let's configure our project according to that width.

In your project settings (create a new project for this tutorial if not already done!), go the 'Graphics' tab and set:

• Scale mode to 'Fit Width'
• Logical dimensions to 512 x 1024
• Orientation to portrait

This will ensure that whatever the phone size is, our canvas will have a width of 512. The height doesn't matter actually, you can use anything instead of 1024 but it is convenient to specify something sensible, that is taller than large, since we want our game to be in portrait.

However we'll need to figure out the actual height and logical position of our screen at run time, in order to place our graphics on the stage.

The code below will do what we want, and we'll place it at the very top of our main.lua:

-- Compute top and bottom screen bounds
local _,scr_top,_,scr_bottom=application:getLogicalBounds()

Next step is to create our background and put it on stage. To keep our code clean, let's handle the background image as an object of class Background. We'll define it after.

-- Create the background object with the screen size (width is 512 per project settings)
local background=Background.new(512,scr_bottom-scr_top)
-- Add it to stage
stage:addChild(background)
background:setY(scr_top)

Our background will move as our spaceship progress through the game. We'll make it 'advance' in our game loop:

-- This is our game loop
stage:addEventListener(Event.ENTER_FRAME,function ()
	background:advance(1)
end)

The code of our game loop will be called on each animation frame, 60 times per second. In it, we call the 'advance' method of the background object with a parameter telling it by how much we want to 'move'. This will allow us to alter game speed later if we ever need to.

So far our main.lua contains:

-- Compute top and bottom screen bounds
local _,scr_top,_,scr_bottom=application:getLogicalBounds()

-- Create the background object with the screen size (width is 512 per project settings)
local background=Background.new(512,scr_bottom-scr_top)
-- Add it to stage
stage:addChild(background)
background:setY(scr_top)

-- This is our game loop
stage:addEventListener(Event.ENTER_FRAME,function ()
	background:advance(1)
end)

You can try to launch your project, but obviously it won't run yet, because we didn't define the 'Background' class.

A basic background object

Create a new lua file and call it 'background.lua'. In this file, we'll define the 'Background' class. Our background object will mostly display an image, so let our Background class be a subclass of Gideros Pixel object:

-- Our Background will be a subclass of Gideros Pixel.
-- Here we pass an empty constructor function so that the pixel is initialized with defaults
-- We'll intilialize it by code later
Background=Core.class(Pixel,function () end)