Page 1 of 1
Tiling a space background in all directions.
Posted: Sun Feb 19, 2017 1:48 pm
by Annabelle
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?
Re: Tiling a space background in all directions.
Posted: Sun Feb 19, 2017 6:06 pm
by Santos
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())
quadCoord.x = (quadCoord.x - math.cos(mouse_angle) * player.v * dt) % bgImg:getWidth()
quadCoord.y = (quadCoord.y - math.sin(mouse_angle) * player.v * dt) % bgImg:getHeight()
love.graphics.draw(bgImg, bgQuad, quadCoord.x - bgImg:getWidth(), quadCoord.y - bgImg:getHeight())
I haven't used HUMP camera before, sorry!
Re: Tiling a space background in all directions.
Posted: Sun Feb 19, 2017 8:53 pm
by Annabelle
Wow that worked perfectly! Thank you sooooooo much. Now I just need parallax scrolling.
Re: Tiling a space background in all directions.
Posted: Sun Feb 19, 2017 8:59 pm
by Nixola
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()
quadCoord.y = (quadCoord.y - math.sin(mouse_angle) * player.v * dt) % bgImg:getHeight()
love.graphics.draw(layer3, layer3Quad, quadCoord.x * 0.8 - layer3:getWidth(), quadCoord.y * 0.8 - layer3:getHeight())
love.graphics.draw(layer2, layer2Quad, quadCoord.x * 0.9 - layer2:getWidth(), quadCoord.y * 0.9 - layer2:getHeight())
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.
Re: Tiling a space background in all directions.
Posted: Mon Feb 20, 2017 12:35 am
by Annabelle
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
quadCoord.x = (quadCoord.x - math.cos(mouse_angle) * player.v * dt) % bgImg:getWidth()
quadCoord.y = (quadCoord.y - math.sin(mouse_angle) * player.v * dt) % bgImg:getHeight()
else
if player.v > 0 then
player.v = player.v - 25
end
quadCoord.x = (quadCoord.x - math.cos(mouse_angle) * player.v * dt) % bgImg:getWidth()
quadCoord.y = (quadCoord.y - math.sin(mouse_angle) * player.v * dt) % bgImg:getHeight()
end
Sorry to ask so many! Very newbie to game dev
Re: Tiling a space background in all directions.
Posted: Tue Feb 21, 2017 2:07 pm
by Annabelle
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.