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
Before you make a thread asking for help, read this.
Post Reply
Annabelle
Prole
Posts: 13
Joined: Sun Feb 19, 2017 1:37 pm

Tiling a space background in all directions.

Post by Annabelle » Sun Feb 19, 2017 1:48 pm

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
(12.36 KiB) Downloaded 41 times

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

Re: Tiling a space background in all directions.

Post by Santos » Sun Feb 19, 2017 6:06 pm

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
Prole
Posts: 13
Joined: Sun Feb 19, 2017 1:37 pm

Re: Tiling a space background in all directions.

Post by Annabelle » Sun Feb 19, 2017 8:53 pm

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

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

Re: Tiling a space background in all directions.

Post by Nixola » Sun Feb 19, 2017 8:59 pm

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.
lf = love.filesystem
ls = love.sound
la = love.audio
lp = love.physics
lt = love.thread
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.

Post by Annabelle » Mon Feb 20, 2017 12:35 am

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
Prole
Posts: 13
Joined: Sun Feb 19, 2017 1:37 pm

Re: Tiling a space background in all directions.

Post by Annabelle » Tue Feb 21, 2017 2:07 pm

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.

Post Reply

Who is online

Users browsing this forum: No registered users and 27 guests