3
\$\begingroup\$

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

\$\endgroup\$
2
  • \$\begingroup\$ Looks more like the textures are being stretched than they are being repeated. \$\endgroup\$
    – House
    Jan 28, 2013 at 18:08
  • \$\begingroup\$ Look at the set U(V) coordinates, there's no repetition right now. \$\endgroup\$
    – Mario
    Jan 28, 2013 at 19:39

1 Answer 1

4
\$\begingroup\$

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;
\$\endgroup\$
3
  • \$\begingroup\$ 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 \$\endgroup\$
    – lotusight
    Jan 29, 2013 at 22:42
  • \$\begingroup\$ How does it look with my last line of code? \$\endgroup\$
    – Mario
    Jan 29, 2013 at 23:56
  • \$\begingroup\$ sorry for the late reply. scrollTimer+5 did the trick. Thanks :) \$\endgroup\$
    – lotusight
    Apr 4, 2013 at 18:59

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .