Image:Create, rotate, repeating texture

Tutorial Objective:

Create 4 images:

  1. An Image based on a jpeg.
  2. A rotated Image
  3. An Image with reduced size
  4. An Image using repeating texture (mirroring on edges).

screenshot

Video

Details

  • Create a Stage. Initialize it in your Create method to set it to full screen
private Stage stage;
@Override
public void create () {
  stage = new Stage(new ScreenViewport());
}
  • Change you Render Method to add the stage
@Override
public void render () {
  Gdx.gl.glClearColor(1, 1, 1, 1);
  Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
  stage.act();
  stage.draw();
}
  • Copy the image into your asset folder in your Android project. In you Create method load the Texture
Texture texture = new Texture(Gdx.files.internal("image.jpg"));
  • Create an Image

Image image1 = new Image(texture);
image1.setPosition(Gdx.graphics.getWidth()/3-image1.getWidth()/2,Gdx.graphics.getHeight()*2/3-image1.getHeight()/2);
stage.addActor(image1);
  • Rotate an Image

Image image2 = new Image(texture);
image2.setPosition(Gdx.graphics.getWidth()*2/3-image2.getWidth()/2,Gdx.graphics.getHeight()*2/3-image2.getHeight()/2);
image2.setOrigin(image2.getWidth()/2,image2.getHeight()/2);
image2.rotateBy(45);
stage.addActor(image2);
  • Change Image size

Image image3 = new Image(texture);
image3.setSize(texture.getWidth()/2,texture.getHeight()/2);
image3.setPosition(Gdx.graphics.getWidth()/3-image3.getWidth()/2,Gdx.graphics.getHeight()/3-image3.getHeight());
stage.addActor(image3);
  • Create Image with repeating Texture

Important: if you are going to run your code on iOS make sure you use a texture with a size which is multiple of 64. on iOS it will not work otherwise.

  • Add “setWrap” to the texture, and tells it to “mirror” the edges using “setWrap(Texture.TextureWrap.MirroredRepeat,Texture.TextureWrap.MirroredRepeat);”
  • Create a TextureRegion with the size equivalent to 8 by 4 of this mirored texture.
  • Create Image 4 using that Texture Region
  • Set Image4 size and position.
  • Add it to the stage.
texture.setWrap(Texture.TextureWrap.MirroredRepeat, Texture.TextureWrap.MirroredRepeat);
TextureRegion textureRegion = new TextureRegion(texture);
textureRegion.setRegion(0,0,texture.getWidth()*8,texture.getHeight()*4);
Image image4 = new Image(textureRegion);
image4.setSize(200,100);
image4.setPosition(Gdx.graphics.getWidth()*2/3-image4.getWidth()/2,Gdx.graphics.getHeight()/3-image4.getHeight());
stage.addActor(image4);

Code:

Download tutorial and see supporting code below

public class MyGdxGame extends ApplicationAdapter {
	private Stage stage;

	@Override
	public void create () {
		stage = new Stage(new ScreenViewport());

		Texture texture = new Texture(Gdx.files.internal("image.jpg"));

		Image image1 = new Image(texture);
		image1.setPosition(Gdx.graphics.getWidth()/3-image1.getWidth()/2,Gdx.graphics.getHeight()*2/3-image1.getHeight()/2);
		stage.addActor(image1);

		Image image2 = new Image(texture);
		image2.setPosition(Gdx.graphics.getWidth()*2/3-image2.getWidth()/2,Gdx.graphics.getHeight()*2/3-image2.getHeight()/2);
		image2.setOrigin(image2.getWidth()/2,image2.getHeight()/2);
		image2.rotateBy(45);
		stage.addActor(image2);

		Image image3 = new Image(texture);
		image3.setSize(texture.getWidth()/2,texture.getHeight()/2);
		image3.setPosition(Gdx.graphics.getWidth()/3-image3.getWidth()/2,Gdx.graphics.getHeight()/3-image3.getHeight());
		stage.addActor(image3);

		texture.setWrap(Texture.TextureWrap.MirroredRepeat, Texture.TextureWrap.MirroredRepeat);
		TextureRegion textureRegion = new TextureRegion(texture);
		textureRegion.setRegion(0,0,texture.getWidth()*8,texture.getHeight()*4);
		Image image4 = new Image(textureRegion);
		image4.setSize(200,100);
		image4.setPosition(Gdx.graphics.getWidth()*2/3-image4.getWidth()/2,Gdx.graphics.getHeight()/3-image4.getHeight());
		stage.addActor(image4);

	}

	@Override
	public void render () {
		Gdx.gl.glClearColor(1, 1, 1, 1);
		Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
		stage.act();
		stage.draw();

	}
}
Advertisements

9 thoughts on “Image:Create, rotate, repeating texture

  1. You can enter Presentation mode, so it will be easier for the viewer to read.
    View ==> Enter Presentation Mode.
    Thanks for the tutorial its really clearing up the mess in my head!

    Like

    1. Check which library you import.
      Most likely when you created your image it imported “import java.awt.Image;”
      Remove that statement, and when prompted use “import com.badlogic.gdx.scenes.scene2d.ui.Image;” instead..
      Happened to me a couple of time..
      Let me know if you need help or specific content.

      Like

Leave a Reply to rayboyblue Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s