Createing Endless Texture Background

[OdnsRvns]

Working on a game project mainly for fun/myself. I'm to a problem right now as a new programmer that I'm not sure how to solve. I have a background texture(2048 x 2048) of a star field that moves with the WASD keys. I want to reuse this texture over and over again to create the illusion of movement through space. Basically creating a never ending star field. Anyone have an easy idea on how to accomplish this task. I'm sure its simple I just for the life of me cant put together something that works.

Thanks

[Kyrremann]

Depending on how smooth you want to make it, you could detect when player is nearing the end of the background image, and then just draw another one.

But I'm not sure if it's such a good idea to use that big of an image, it's a lot to draw that the user will not see. As long as your not expecting the user to sit on 2048 x 2048 screens. Since it's just start you could draw them randomly with love.graphic.point() or small love.graphics.rectangle(). Just drawing them randomly at a slow rate will simulate a simple starry sky.

[Azhukar]

Fraction your image into chunks, draw chunks based on intersection with drawn area.

[OdnsRvns]

Fraction your image into chunks, draw chunks based on intersection with drawn area.

Thanks can you walk me through how this works. I'm a new programmer so this is something I could use in other projects.

[Azhukar]

can you walk me through how this works.

It separates input imageData into a 2d table of smaller images created by copying parts of the original imageData. These small square images are then drawn based on the input of :draw(). This is done by first determining the top left and bottom right chunks intersecting the input drawn area rectangle (x,y,width,height) and afterwards drawing the relevant images from the chunk table. Note that drawn images are loaded as needed, that individual chunks are processed only once they are requested and then they are memorized, this is to smooth out the loading/parsing of possibly huge images.

This ensures you're not needlessly drawing giant images as only fractions of the image is drawn by each chunk, it only draws as many chunks as is needed to fill the drawn area. You can specify the chunk size at objects creation, in case of the example it's set to 200.

To use it, all you need to do is determine which part of your space is being drawn and input the coordinates to the draw function. The draw function must be called after your coordinate translations as if you were drawing a world object.

[s-ol]

You can also use a screen-sized quad and set the wrap options to repeat.

[OdnsRvns]

You can also use a screen-sized quad and set the wrap options to repeat.

How would I go about doing that.

[micha]

How would I go about doing that.

I attached a working .love.
The code is this:

Code: Select all

function love.load()
	thisQuad = love.graphics.newQuad(0,0,400,400,32,32)
	thisImage = love.graphics.newImage('tile.png')
	thisImage:setWrap('repeat','repeat')
end

function love.draw()
	love.graphics.draw(thisImage,thisQuad,0,0)
end

Note, that the quad is larger than the image! This is the important part.

[OdnsRvns]

Ok I understand making the quad and repeating the image across the open window. My issue is as the player moves, I am moving the quad under him. How do I add and remove textures from the quad as needed to create a seem less world. Check out the .love file i edited for a better description. I'm trying to create the illusion of an open world/space.

CODE

Code: Select all

function love.load()
	width = love.window.getWidth()
	height = love.window.getHeight()
	px, py = 0, 0
	playerImage = love.graphics.newImage('player.png')
	thisImage = love.graphics.newImage('tile.png')
	thisQuad = love.graphics.newQuad(px,py,width,height,32,32)
	thisImage:setWrap('repeat','repeat') 
end

function love.update( dt )
	if love.keyboard.isDown('a') then px = px + 1 end
	if love.keyboard.isDown('d') then px = px - 1 end
	if love.keyboard.isDown('w') then py = py + 1 end
	if love.keyboard.isDown('s') then py = py - 1 end
end

function love.draw()
	love.graphics.draw(thisImage,thisQuad,px,py)
	love.graphics.print(px .. 'x:y' .. py, 5, 5) 
	love.graphics.print(width .. ':' .. height, 5, 20)
	love.graphics.draw(playerImage,width/2,height/2)
end

[Ref]

This is what micha is suggesting.
Can obviously improve math to make more generic.