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.absolute("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.absolute("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();

	}
}

Leave a 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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s