## Tiling a space background in all directions.

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Annabelle
Prole
Posts: 13
Joined: Sun Feb 19, 2017 1:37 pm

### Tiling a space background in all directions.

So I'm working on a very simple space game at the moment. And I implemented the following so far:
• Scrolling the background,
• Attaching a camera to player. (HUMP)
• Moving player around (basically moving the background in opposite direction.)
• Using mouse to go where player is.
However I have the problem that my background. (Tiled in a quad currently since I have a 256x256 image.) Only fills up that quad, so when I move around, I get a background and rest is all default black. How would I tile this background so it's always on screen yet gives illusion of moving? I attached the Love file.

Also how would I implement a simple parallax camera using HUMP, so I can have different stars and ships moving around in the background?
Attachments
Planet Explorer.love

Santos
Party member
Posts: 383
Joined: Sat Oct 22, 2011 7:37 am

### Re: Tiling a space background in all directions.

Hi Annabelle,

One way would be to:
• Make the the quad one tile bigger in each direction.
• "Wrap around" the quad's x/y position when it passes the width/height of a tile.
• Draw the quad up/left one tile.

Code: Select all

bgQuad = love.graphics.newQuad(0, 0, 896 + bgImg:getWidth(), 600 + bgImg:getHeight(), bgImg:getDimensions())


I haven't used HUMP camera before, sorry!

Annabelle
Prole
Posts: 13
Joined: Sun Feb 19, 2017 1:37 pm

### Re: Tiling a space background in all directions.

Wow that worked perfectly! Thank you sooooooo much. Now I just need parallax scrolling.

Nixola
Inner party member
Posts: 1940
Joined: Tue Dec 06, 2011 7:11 pm
Location: Italy

### Re: Tiling a space background in all directions.

In order to have parallax scrolling, you basically displace different layers by different amounts, multiplying one set of coordinates (or just one coordinate, if you only need parallax on one axis) by a number. If you wanted to have three layers, for example, you would draw one at quadCoord.x - imgWidth, one (which is below and further) at quadCoord.x * 0.9 - imgWidth (a different image), and another one at quadCoord.x * 0.8 - imgWidth (again, a different image) from the bottom up. In pseudocode:

Code: Select all

quadCoord.x = (quadCoord.x - math.cos(mouse_angle) * player.v * dt) % bgImg:getWidth()

love.graphics.draw(layer1, layer1Quad, quadCoord.x - layer1:getWidth(), quadCoord.y - layer1:getHeight())
A further note: 0.8 and 0.9 are, in this case, "magic" numbers; I chose them arbitrarily, with no testing, and in an ideal scenario you would have them stored in a variable, possibly controlled by user settings or different scenarios and such.
lf = love.filesystem
ls = love.sound
la = love.audio
lp = love.physics
li = love.image
lg = love.graphics

Annabelle
Prole
Posts: 13
Joined: Sun Feb 19, 2017 1:37 pm

### Re: Tiling a space background in all directions.

Oh! Okay thanks again! I had one last question. How would I go about generating items off screen and then having the player able to find them? As well as having items scroll across the background? (Or would that auto just work from generating the item and having parallax move?) I assume I'll be able to use this for my other stuff too if I can figure that out.

Right now I try the parallax and it stutters (in place) for some reason and doesn't scroll the images across the screen as I want, not sure what I'm missing.

Lastly I'm messing up my math for the code to make the boost work, somehow. I'm not sure where it's going wrong tho. What happens is basically that I accelerate with space, but I can keep accelerating even when it's empty. It's supposed to go down to normal speed then. How do I fix it? Relevant code for that:

Code: Select all

if love.keyboard.isDown('space') then
if player.v < 3000 and UICounters.currentboost > 0 then
player.v = player.v + 200
UICounters.currentboost = UICounters.currentboost - 1
end
else
if player.v > 1000 then
player.v = player.v - 25
end
if UICounters.currentboost < UICounters.maxboost then
UICounters.currentboost = UICounters.currentboost + dt
end
end
-- Normal move.
if love.keyboard.isDown('w') then
if player.v < 1000 then
player.v = player.v + 100
end
else
if player.v > 0 then
player.v = player.v - 25
end
end
Sorry to ask so many! Very newbie to game dev

Annabelle
Prole
Posts: 13
Joined: Sun Feb 19, 2017 1:37 pm

### Re: Tiling a space background in all directions.

Okay! I figured out the speed boosting issue. Thankfully that wasn't that bad. Only one problem left I don't know how to approach now:

Oh! Okay thanks again! I had one last question. How would I go about generating items off screen and then having the player able to find them? As well as having items scroll across the background? (Or would that auto just work from generating the item and having parallax move?) I assume I'll be able to use this for my other stuff too if I can figure that out.

Right now I try the parallax and it stutters (in place) for some reason and doesn't scroll the images across the screen as I want, not sure what I'm missing.

### Who is online

Users browsing this forum: No registered users and 27 guests