My favorites | Sign in
Project Home Downloads Wiki Issues Source
Search
for
ScrollingTexture  
This page describes how to quickly make scrolling sprite/texture
Phase-Implementation
Updated Sep 13, 2011 by PiotrAJa...@gmail.com

WARNING

Technique described below works by looping Texture from edge to edge. It will draw all there is from one side to the other depending on scroll direction. Red square represents sprite, rest is texture we are using:

So if you have some other stuff in your texture place them so they wont interfere with scrolling part. That would be above or under in previous example.

CREATING SPRITE

Creating scrolling sprite is quite simple. We start with creating new Texture:

 Texture spriteTexture = new Texture(Gdx.files.internal("data/spriteTexture.png"));
 

We set wrapping of texture in both directions:

 spriteTexture.setWrap(!TextureWrap.Repeat, !TextureWrap.Repeat);
 

Then we create Sprite from this texture:

 sprite = new Sprite(spriteTexture, 0, 0, 64, 64);
 
SCROLLING SPRITE

Now we are ready to animate it.

Code below needs to be called every time game is rendered.

We need to know how much we need to move texture region of the sprite. For this we will use simple timer.

 float scrollTimer+=Gdx.graphics.getDeltaTime();
 if(scrollTimer>1.0f)
    scrollTimer = 0.0f;
 	
 

Texture coordinates go from 0 to 1, if you want to show only part of the texture at given frame you need to scale timer value proprietorially. This code will scroll the texture from right to left, horizontally.

			
 sprite.setU(scrollTimer);
 sprite.setU2(scrollTimer+1);
 

To scroll bottom to top, vertically, use this:

			
 sprite.setV(scrollTimer);
 sprite.setV2(scrollTimer+1);
 

You can use negative values to reverse the directions.

Finally we draw our sprite within a SpriteBatch:

 sprite.draw(spriteBatch);	
 

Full code below. This requires working bare bones project, paste this in class that implements ApplicationListener.

 SpriteBatch spriteBatch;
 Texture spriteTexture;
 Sprite sprite;
 float scrollTimer = 0.0f;
 	
 @Override
 public void create() {
     spriteBatch = new SpriteBatch();
     spriteTexture = new Texture(Gdx.files.internal("data/spriteTexture.png"));
 	         
     spriteTexture.setWrap(!TextureWrap.Repeat,!TextureWrap.Repeat);
     sprite = new Sprite(spriteTexture, 0, 0, 64, 64);
     sprite.setSize(256, 256);
 }
 

@Override public void render() { scrollTimer+=Gdx.graphics.getDeltaTime(); if(scrollTimer>1.0f) scrollTimer = 0.0f; sprite.setU(scrollTimer); sprite.setU2(scrollTimer+1); spriteBatch.begin(); sprite.draw(spriteBatch); spriteBatch.end(); }

Comment by tonyzzp@gmail.com, Mar 15, 2012

I can't understand u and v all the time.

Comment by bilal.ak...@gmail.com, Feb 14, 2014

This works perfectly on Desktop, but when I'm running it on Android the background doesn't load. The texture is not a power of two though, so could that be the problem?

Comment by vr.sz...@gmail.com, Feb 18, 2014

how can i set the speed of the scrolling?

Comment by ex3m1...@gmail.com, Feb 20, 2014

perhaps try multiplying scrollTimer and scrollTimer + 1 by a float (speed variable)?

Comment by pjb...@smcm.edu, Mar 28, 2014

bilal - your image file is too large.

Comment by PedroOrt...@gmail.com, Apr 18, 2014

what if i want it to go vertically?

Comment by PedroOrt...@gmail.com, Apr 18, 2014

Figured it out. Solution: sprite.setRotation(90);

Comment by lundstro...@gmail.com, Apr 25, 2014

How do I change to speed of the scrolling? I have read the previous answer to this comment but couldn't figure out how. Thanks for answering.

Comment by edogaru....@gmail.com, Jun 2, 2014
lundstro:

3 times faster: ... if(scrollTimer>1.0f)

scrollTimer = 0.0f;

scrollTimer = 3f; ...

Comment by edogaru....@gmail.com, Jun 2, 2014
PedroOrt?:

I think this is a better solution:

sprite.setV(scrollTimer); sprite.setV2(scrollTimer + 1);


Sign in to add a comment
Powered by Google Project Hosting