LibGDX - ImageButton - setting image with background
In my opinion, the ImageButton
inside LibGDX
is the frame containing the image. Is it possible to set the background of the frame?
For example, I would like to use the background of a Button and apply an icon over that image.
Current code
Skin with background:
"com.badlogic.gdx.scenes.scene2d.ui.ImageButton$ImageButtonStyle": {
"default": {
"imageDown": "button-down",
"imageUp": "button-up"
}
}
Creating ImageButton:
// Getting imageButtonStyle with "default" style, as it just has the background.
ImageButton.ImageButtonStyle imageButtonStyle = skin.get( "default", ImageButton.ImageButtonStyle.class );
ImageButton button = new ImageButton( imageButtonStyle );
// Set the image on the button to something.
Background image.
A background image with an overlay icon.
Thank you for your help.
source to share
The trick is to use two different styles. ImageButtonStyle to set the attributes of the icon, but because ImageButtonStyle extends ButtonStyle, the background attributes are set to ButtonStyle. Something like:
ImageButtonStyle style = new ImageButtonStyle();
style.up = background;
style.down = background;
style.checked = background;
style.imageUp = icon_up;
style.imageDown = icon_down;
style.imageChecked = icon_checked;
style.unpressedOffsetY = -20; // to "not" center the icon
style.unpressedOffsetX = -30; // to "not" center the icon
ImageButton heartButton = new ImageButton(style);
ImageButton envelopeButton = new ImageButton(envelopeStyle);
Something like this (backround for me, icon_ * Drawable). But this is the basics and worked like a charm for me.
source to share
You can implement your own button class that extends ImageButton. Then, if you overload the constructor, you can pass either Drawables or Textures for imageUp, imageDown, and a background for it:
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.Sprite;
import com.badlogic.gdx.scenes.scene2d.ui.ImageButton;
import com.badlogic.gdx.scenes.scene2d.utils.Drawable;
import com.badlogic.gdx.scenes.scene2d.utils.SpriteDrawable;
public class myButton extends ImageButton
{
public myButton(Texture texture_up, Texture texture_down, Texture background)
{
super(new SpriteDrawable(new Sprite(texture_up)),
new SpriteDrawable(new Sprite(texture_down)));
this.setBackground(new SpriteDrawable(new Sprite(background));
}
}
Now you can use your own Button class and create it like this:
Texture textureUp = new Texture(Gdx.files.internal("data/image_up.png"));
Texture textureDown = new Texture(Gdx.files.internal("data/image_down.png"));
Texture background = new Texture(Gdx.files.internal("data/background.png"));
MyButton myButton = new MyButton(textureUp, textureDown, background);
Maybe play with it a bit and you will find out what else you can do with it. Just make sure you have the correct resolution images. The background does not have to be an image.
source to share
By definition, a button will have three states:
imageDown - when the mouse is pressed on the button
imageUp - When the mouse is released on the button
imageChecked - When the mouse hovers over the button
There is no way in the scene2d api yet to manually set the background image of the imageButton, but if you want something like this it is better to have an array of images and an index relative to which image you want and render with a sprite pack like:
Texture[] images;
int currentImage;
source to share