Tiling a space background in all directions.

[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?

[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!

[Annabelle]

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

[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.

[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

[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.