Question about setting a background image / stretching to fit the screen,

nickthelibra · April 16, 2015, 7:32pm

So, I’m following a tutorial to make a Balloon Pop game. Here’s the link:

http://www.raywenderlich.com/22064/how-to-make-a-simple-game-with-corona

I followed directions making all the necessary files (config.lua, main.lua, build.settings), but when I entered the first line of code (which sets the background image), it doesn’t stretch to fit the screen.

Can someone tell me what I’m doing wrong? Was this game made on an older version of Corona?

The image is attached to this message.

Thanks in advance.

_memo · April 16, 2015, 10:17pm

The tutorial is from 2012 and the SDK has changed a lot since then, so you probably won’t be able to use it without some tweaking.

Instead of

local background = display.newImage(“images/clouds.png”);

try something like

local background = display.newImageRect(“images/clouds.png”, display.contentWidth, display.contentHeight)

background.x, background.y = display.contentCenterX, display.contentCenterY

nickthelibra · April 16, 2015, 10:32pm

Thanks! I managed to figure it out.

Now I’ve run into a different issue. I’m following the directions to place invisible walls around the screen, to keep the balloons from floating off the screen. The code provided only makes the walls and ceiling cover half the screen, so the balloons are still flying away.

Do you know a better way to make the invisible walls cover the entire borders? Sorry if I’m a pain in the ass. I’m just really trying my best to learn and understand the language.

Here’s the code to create invisible borders:

–[[ Create “walls” on the left, right and ceiling to keep balloon on screen
    display.newRect(x coordinate, y coordinate, x thickness, y thickness)
    So the walls will be 1 pixel thick and as tall as the stage
    The ceiling will be 1 pixel thick and as wide as the stage
–]]
local leftWall = display.newRect (0, 0, 1, display.contentHeight);
local rightWall = display.newRect (display.contentWidth, 0, 1, display.contentHeight);
local ceiling = display.newRect (0, 0, display.contentWidth, 1);

– Add physics to the walls. They will not move so they will be “static”
physics.addBody (leftWall, “static”, { bounce = 0.1 } );
physics.addBody (rightWall, “static”, { bounce = 0.1 } );
physics.addBody (ceiling, “static”, { bounce = 0.1 } );

_memo · April 16, 2015, 10:43pm

I think your walls are the right size, they’re just in the wrong location. Try

local leftWall = display.newRect (0, display.contentCenterY, 1, display.contentHeight); local rightWall = display.newRect (display.contentWidth, display.contentCenterY, 1, display.contentHeight); local ceiling = display.newRect (display.contentCenterX, 0, display.contentWidth, 1);

Also, I would probably make the walls wider than 1px (say, 10px), as physics objects can glitch if they’re too thin.

_memo · April 16, 2015, 10:17pm

The tutorial is from 2012 and the SDK has changed a lot since then, so you probably won’t be able to use it without some tweaking.

Instead of

local background = display.newImage(“images/clouds.png”);

try something like

local background = display.newImageRect(“images/clouds.png”, display.contentWidth, display.contentHeight)

background.x, background.y = display.contentCenterX, display.contentCenterY

nickthelibra · April 16, 2015, 10:32pm

Thanks! I managed to figure it out.

Now I’ve run into a different issue. I’m following the directions to place invisible walls around the screen, to keep the balloons from floating off the screen. The code provided only makes the walls and ceiling cover half the screen, so the balloons are still flying away.

Do you know a better way to make the invisible walls cover the entire borders? Sorry if I’m a pain in the ass. I’m just really trying my best to learn and understand the language.

Here’s the code to create invisible borders:

–[[ Create “walls” on the left, right and ceiling to keep balloon on screen
    display.newRect(x coordinate, y coordinate, x thickness, y thickness)
    So the walls will be 1 pixel thick and as tall as the stage
    The ceiling will be 1 pixel thick and as wide as the stage
–]]
local leftWall = display.newRect (0, 0, 1, display.contentHeight);
local rightWall = display.newRect (display.contentWidth, 0, 1, display.contentHeight);
local ceiling = display.newRect (0, 0, display.contentWidth, 1);

– Add physics to the walls. They will not move so they will be “static”
physics.addBody (leftWall, “static”, { bounce = 0.1 } );
physics.addBody (rightWall, “static”, { bounce = 0.1 } );
physics.addBody (ceiling, “static”, { bounce = 0.1 } );

_memo · April 16, 2015, 10:43pm

I think your walls are the right size, they’re just in the wrong location. Try

local leftWall = display.newRect (0, display.contentCenterY, 1, display.contentHeight); local rightWall = display.newRect (display.contentWidth, display.contentCenterY, 1, display.contentHeight); local ceiling = display.newRect (display.contentCenterX, 0, display.contentWidth, 1);

Also, I would probably make the walls wider than 1px (say, 10px), as physics objects can glitch if they’re too thin.