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).

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();

	}
}