Tutorial Objective:
Create 4 images:
- An Image based on a jpeg.
- A rotated Image
- An Image with reduced size
- 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(); } }
Very nice article. I absolutely love this site.
Continue the good work!
LikeLike
very good guide for beginner
LikeLike
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!
LikeLike
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!
LikeLike
Portraits can be retouched in numerous ways.
LikeLike
I had to change:
Texture texture = new Texture(Gdx.files.absolute(“image.jpg”));
to
Texture texture = new Texture(Gdx.files.internal(“image.jpg”));
I figured out based on this: https://stackoverflow.com/questions/32816723/save-and-retrieve-an-image-file-in-libgdx
LikeLike
Thanks, correcting now!
LikeLike
This isn’t working for me. Image is an abstract class so it won’t let me create an instance.
LikeLike
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.
LikeLike