Page 1 of 2
Createing Endless Texture Background
Posted: Fri Jan 30, 2015 10:43 pm
by 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
Re: Createing Endless Texture Background
Posted: Fri Jan 30, 2015 11:45 pm
by 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.
Re: Createing Endless Texture Background
Posted: Sat Jan 31, 2015 12:56 am
by Azhukar
Fraction your image into chunks, draw chunks based on intersection with drawn area.
Re: Createing Endless Texture Background
Posted: Sat Jan 31, 2015 2:44 am
by OdnsRvns
Azhukar wrote: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.
Re: Createing Endless Texture Background
Posted: Sat Jan 31, 2015 3:12 am
by Azhukar
OdnsRvns wrote: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.
Re: Createing Endless Texture Background
Posted: Sat Jan 31, 2015 12:39 pm
by s-ol
You can also use a screen-sized quad and set the wrap options to repeat.
Re: Createing Endless Texture Background
Posted: Sat Jan 31, 2015 2:55 pm
by OdnsRvns
S0lll0s wrote:You can also use a screen-sized quad and set the wrap options to repeat.
How would I go about doing that.
Re: Createing Endless Texture Background
Posted: Sat Jan 31, 2015 3:52 pm
by micha
OdnsRvns wrote: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.
Re: Createing Endless Texture Background
Posted: Sun Feb 01, 2015 5:42 am
by 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
Re: Createing Endless Texture Background
Posted: Sun Feb 01, 2015 6:48 pm
by Ref
This is what micha is suggesting.
Can obviously improve math to make more generic.