Create a Space Background with Sean Perryman

Today’s post is a guest post by Sean Perryman. Sean is an IT professional by day, and a programmer by night. He has been working with Corona SDK for a little over a year, and is hoping to release his first game in the next couple of months. In this tutorial, Sean will be teaching you how to create a space background using Corona SDK. Before you start reading, you can watch this short demo video of today’s tutorial.

Recently I had the idea that I wanted to make a space game. The two main concepts I had were that there would be a ship that could move vertically and a background of stars that kept scrolling, making it seem like the ship was flying through space. An early attempt at making this star background proved to be a little cumbersome. Here is the code:

local makeStar = function()
local star = display.newCircle( display.contentWidth + math.random( 20 ), math.random(  display.contentHeight ), 1 );
star:setFillColor( math.random( 200 ) + 50 );
physics.addBody( star, { density = 50, friction = 0, bounce = 0, radius = 1 } );
star:applyLinearImpulse( 0, -1, star.x, star.y );
end

I used a thin rectangle off the left side of the screen as a collision sensor, and when the star hit that rectangle it would be removed. This actually worked will in the Mac iPhone simulator, but for some reason I loaded the code in the Windows version of the simulator the stars would continually collide with the ship object and knock it off the screen. I decided that there had to be a better way of getting the stars moving, so I started thinking about how I could move non-physics circles across the screen. Here is how I did it:

for i = 1, 20 do

Here we start a for loop to generate the initial stars that are on the screen. This is an arbitrary number i chose because I liked the amount of stars and the look of the background, feel free to adjust this number  as you see fit.

local star = display.newCircle( math.random( display.contentWidth ), math.random(display.contentHeight), 1 );
star:setFillColor( math.random(200) + 55 );

Here is where we actually create the star itself. Note that for the x/y values I substituted math.random() calls. This places the stars in random positions throughout the content area. The last number, 1, is specifying the size of the star. The setFillColor call is used to pseudo-randomize the stars coloring. This adds to the effect that the stars are different distances, and makes the field look a bit more realistic.

;local moveStar = function()
if star.x ~= nil then
if star.x <= 0 then
star:removeSelf();
elseif star.x > 0 then
star.x = star.x - 5;
end
end
end

This section of code works to move the star across the screen, as well as destroying it once it moves off the left side of the screen. There is a pre-check for nil in before the movement code, because on occasion the if test would return nil instead of the star.x value and would generate a console error.

timer.performWithDelay( 1, moveStar, display.contentWidth + 50 );

This is the timer function that moves the star across the screen. Notice that I set the maximum iterations of the timer to display.contentWidth + 50, meaning that the maximum a star could move is 50px off the left side of the screen.

local makeStar = function()
local star = display.newCircle( display.contentWidth + math.random( 20 ), math.random(display.contentHeight), 1 );
star:setFillColor( math.random(200) + 55 );
local moveStar = function()
if star.x ~= nil then
if star.x <= 0 then
star:removeSelf();
elseif star.x > 0 then
star.x = star.x - 5;
end
end
end
timer.performWithDelay( 1, moveStar, display.contentWidth + 50 );
end

A similar section of code is used to generate the continuous star field. Note that instead of a strictly random call for x, I used a display.contentWidth + math.random( 20 ) value. This starts the star off the right hand side of the screen, as well as randomizing its position a little. It gives the stars a nice spacing between them, and makes them look a bit more random.

timer.performWithDelay( 75, makeStar, 0 );

This timer works to produce the stars at 75ms intervals. This has been tuned to more closely match the initial star offering of 20 on screen, andcan be easily adjusted (along with the above mentioned for loop) if you want more or less stars.

In this form, memory usage is pretty low:

2013-08-08 08:47:29.976 Corona Simulator[444:707] Memory Usage: 339.271484375
2013-08-08 08:47:29.976 Corona Simulator[444:707] Texture Memory Usage:

compared to almost 500 when using the physics version. This can be lowered even further by decreasing the amount of initial stars and increasing the timer intervals when creating new ones. (Note, this reading was taken using the Corona simulator on Mac. The video provided is using Corona simulator on PC)

Finally, here is the code in its completed form:

local createStars = function()

for i = 1, 20 do
local star = display.newCircle( math.random( display.contentWidth ), math.random(display.contentHeight), 1 );
star:setFillColor( math.random(200) + 55 );
local moveStar = function()
if star.x ~= nil then
if star.x <= 0 then
star:removeSelf();
elseif star.x > 0 then
star.x = star.x - 5;
end
end
end
timer.performWithDelay( 1, moveStar, display.contentWidth + 50 );
end

local makeStar = function()
local star = display.newCircle( display.contentWidth + math.random( 20 ), math.random(display.contentHeight), 1 );
star:setFillColor( math.random(200) + 55 );
local moveStar = function()
if star.x ~= nil then
if star.x <= 0 then
--print( "removing" );
star:removeSelf();
elseif star.x > 0 then
star.x = star.x - 5;
end
end
end
timer.performWithDelay( 1, moveStar, display.contentWidth + 50 );
end

timer.performWithDelay( 75, makeStar, 0 );

end

Again, many thanks to Sean Perryman for writing this great tutorial on Corona SDK! If you have questions or comments, please leave them below.


9 Comments
  1. it doenst work , what am i doing wrong

    • Hello! Unfortunately, posting ‘it doesn’t work’ does not allow for anyone else to troubleshoot your code. While I’ve tried to read minds, I haven’t been successful yet. What errors did you receive? What exactly doesn’t work? Did you check for typos?

      • > <— is the problem.

        • I know, the wordpress plugin I used converted everything from less than or greater than signs to the HTML entity equivalent.

  2. I have entered this code, and the program compiles, but nothing shows up in the corona simulator, can you please help?

    • Did you include the graphics? Can you post some of your code?

  3. Yeah this doesnt work. When I first just straight up copied what you put it had so many errors it hated the &lt and &gt parts of the code. I fixed it so the errors were gone and it just shows a blank screen.

    • Hello, sorry about that! The plugin to show I used didn’t translate less than signs and greater than signs very well.

  4. Hey guys, this is Sean; I wrote this tutorial. I apologize for not following it to respond to these comments, but if you are still having trouble please reply and I will help any way I can.

    As was stated above, the code display window converted all the greater-than and less-than symbols to HTML. You can get around this by doing a search and replace, replacing > with > and < with <.

    The problem the user above was having with the thing compiling and not ever doing anything is probably because you didn't call the createStars() function after all the code. I should have put that in there, my mistake.

Leave a Reply