Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

The bottom region of the screen is filled by a repeated texture:

enter image description here

grassTexture = new Texture(Gdx.files.internal("images/grass.png"));
grassTexture.setWrap(TextureWrap.Repeat, TextureWrap.Repeat);
grassSprite = new Sprite(grassTexture, 0, 0, width,grassTexture.getHeight());

However, The grass should also be scrolled to the left (looping texture from edge to edge). I have got this in the render() method:

scrollTimer += 0.0007f;
if (scrollTimer > 1.0f)
        scrollTimer = 0.0f;
grassSprite.setU(scrollTimer);
grassSprite.setU2(scrollTimer+1);
grassSprite.draw(spriteBatch);

The scrolling part now works. However, the grass texture is not repeated anymore. It looks like this:

broken repetition of grass texture

share|improve this question
    
Looks more like the textures are being stretched than they are being repeated. –  Byte56 Jan 28 '13 at 18:08
    
Look at the set U(V) coordinates, there's no repetition right now. –  Mario Jan 28 '13 at 19:39

1 Answer 1

up vote 3 down vote accepted

I don't know libgdx enough, but I can hint you at a general approach I'd use:

  • Draw the texture using a quad with a wide of screenWidth + textureWidth (instead of textureWidth you could use tileableWidth in case the texture itself repeats the tile already).
  • Draw the quad at position x where x is animated using this formula: x = (x + dx) % textureWidth (again textureWidth could be tileableWidth; dx is the change per iteration, which could be fixed or time based depending on your implementation).

This will cause your texture to loop indefinitely, without requiring shaders, changing texture coordinates, etc. and without wasting unnecessary drawing time (only minimal overhead when trying to draw parts outside the screen).


Edit: With the attached pictures, I'd imagine the issue is this line:

grassSprite.setU2(scrollTimer+1);

By setting your right border to scrollTimer+1 you essentially tell the engine to repeat the texture exactly 1 time. This is wrong and the culprit here. The solution depends on the number of repetitions you need to fill the available space. For example, the following line should do the trick in case you have to repeat the texture 5 times to fill the given space:

grassSprite.setU2(scrollTimer+5);

Edit 2: Just noticed another mistake in your code that might make the textures "jump":

if (scrollTimer > 1.0f)
    scrollTimer = 0.0f;

This part should rather be something like this:

if (scrollTimer > 1.0f)
    scrollTimer -= 1.0f;
share|improve this answer
    
Yes I have tried this, but it doesn't seem to work. The repetitions part worked well. But when I include the scrolling part, it messes everything up. Here is the initial texture. i.imgur.com/Rx8P1Kg.png –  lotusight Jan 29 '13 at 22:42
    
How does it look with my last line of code? –  Mario Jan 29 '13 at 23:56
    
sorry for the late reply. scrollTimer+5 did the trick. Thanks :) –  lotusight Apr 4 '13 at 18:59

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.