I am using libgdx + scene2d + box2d. Everything looked ok until I decided to replaced my TextButtons to ImageButton.
I can't get my ImageButton rezided, it always follows the image dimensions.
Here is my Stage:
stage = new Stage(new StretchViewport(camera.viewportWidth,camera.viewportHeight));
This how a create my Button:
ImageButtonStyle style = new ImageButtonStyle();
style.imageUp = new TextureRegionDrawable(textureButtonPlay);
ImageButton buttonPlay = new ImageButton(style);
buttonPlay.setSize(50, 20); //this does not work
This how a create my Window and add my Button to it:
WindowStyle windowStyle = new WindowStyle(new BitmapFont(), Color.WHITE, null);
windowTryAgain = new Window("", windowStyle);
windowTryAgain.setMovable(false);
//windowTryAgain.padTop(20);
windowTryAgain.setSize(150,150);
windowTryAgain.setPosition(camera.viewportWidth/2 - windowTryAgain.getWidth()/2,
camera.viewportHeight/2 - windowTryAgain.getHeight()/2);
windowTryAgain.row().fill().expandX();
windowTryAgain.add(buttonPlay).padTop(25).expandX().fillX();
windowTryAgain.center();
Is it possible to resize the Texture or TextureRegion? What would be the best approach?
My has issue has been resolved with following piece of code:
windowTryAgain.add(buttonMenu).width(100).height(100);
Then the image will resized accordiantly to the cell width and height.
Credits:
scene2d button scaling with libgdx
Related
I'm using a table to layout my menu buttons, but the spacing between buttons is big enough to drive a car through. What can I do to gain more control over the apparent cell padding? I've searched StackOverflow posts, read through the API, typed '.' after table and actor to browse the autocompletes, manually adjusted values in the skin file, and looked at other people's projects on Github. Some of the methods I've tried include sizeBy(), scaleBy(), pad(), setFillParent(), space(), fillY(), and grow()
A helpful answer would describe how to get buttons to stack on top of each other, touching.
Gdx.input.setInputProcessor(stage);
// Create a table that fills the screen. Everything else will go inside this table.
Table table = new Table();
table.setFillParent(true);
table.setDebug(true);
stage.addActor(table);
table.setBackground(new TiledDrawable(background));
//create buttons
TextButton newGame = new TextButton("New Game", skin);
TextButton preferences = new TextButton("Preferences", skin);
TextButton exit = new TextButton("Exit", skin);
TextButtonStyle tbs = new TextButtonStyle(newGame.getStyle());
NinePatch np = new NinePatch(skin.getPatch("button"));
np.setColor(np.getColor().sub(0f, 0f, 0f, .4f));
tbs.up = new NinePatchDrawable(np);
newGame.setStyle(tbs);
preferences.setStyle(tbs);
exit.setStyle(tbs);
table.bottom().right().padBottom(40f).padRight(40f);
//add buttons to table
table.add(newGame).bottom().right().fillX().uniformX();
table.row();//.pad(1, 0, 1, 0);
table.add(preferences).bottom().right().fillX().uniformX();
table.row();
table.add(exit).bottom().right().fillX().uniformX();
It was my skin. I used the sample "Rusty Robot UI", but it doesn't crop it's button images tightly. Tried another one and saw the stacking I was looking for.
To make my question clearer , I created a simple test class as below.
`public void create () {
stage = new Stage();
// GP
Texture texture1 = new Texture(Gdx.files.internal("data/badlogic.jpg"));
TextureRegion tr = new TextureRegion(texture1);
Image image = new Image(tr);
Group gp = new Group();
ImageButton ib = new ImageButton(new Image(tr).getDrawable());
ib.setSize(90, 256);
gp.addActor(ib);
gp.setPosition(0, 0);
stage.addActor(gp);
gp.debugAll();
}`
The size of badlogic logo is 256*256. I set it to 90*256 in the test.But the outcome looks like this http://imgsrc.baidu.com/forum/w%3D580/sign=fb0e4402d21373f0f53f6f97940e4b8b/0958c32397dda1448779b0cbb1b7d0a20df486e2.jpg
If i set the image size before sending it to imagebutton, then it will rendered as 256*256 ,the full original size. This function is so simple. I can not figure out where is going wrong.
First of all, last update of Libgdx project is 1.4.1: http://libgdx.badlogicgames.com/download.html
The problem is the Drawable object that you are sending to the ImageButton, if you want to change the size of the Image or Texture before adding it to the ImageButton (so you will solve the problem asked), you will just need to use the .setBounds() method
I write down a little example:
1. Initialize Image object with your image file:
`Image image = new Image( new Texture ( Gdx.Files.internal("yourPathFile.png") ) );`
2. .setBounds() javadoc: (x coordinate, y coordinate, width of the image, height of the image)
image.setBounds(0f, 0f, 50f, 60f)
then you can send the image to the ImageButton object as Drawable.
`ImageButton myButton = new ImageButton(image.getDrawable());'
That's all.
Here you have some constructors of ImageButton object from the Libgdx official javadoc.
See also:
Release versions: http://libgdx.badlogicgames.com/releases/
ImageButton javadoc: http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/scenes/scene2d/ui/ImageButton.html
I am using libGDX 1.0 and not sure if it is a bug or not.
My ImageButton is displayed correctly on a LG OPtimus and HTC Desire using TextureAtlas. However, on a Galaxy Tab2 the it becomes completely back, but it is still clickable.
If I load its texture from the AssetsManger, everything works fine on any device.
Here is the relevant part of the code:
stage = new Stage(new StretchViewport(fontCamera.viewportWidth,fontCamera.viewportHeight));
ImageButtonStyle styleButtonPlay = new ImageButtonStyle();
//this works
//textureButtonPlay = new TextureRegion(game.manager.get("data/ui/play.png",Texture.class));
//styleButtonPlay.imageUp = new TextureRegionDrawable(textureButtonPlay);
//this don't on Samsung Tab2
atlas = new TextureAtlas("data/shot/atlas.pack");
styleButtonPlay.imageUp = new TextureRegionDrawable(atlas.findRegion("ui/play"));
buttonPlay = new ImageButton(styleButtonPlay);
buttonPlay.addListener(
new ClickListener() {
public boolean touchDown(InputEvent event, float x, float y, int pointer, int button)
{
startGame();
return true;
}
});
buttonPlay.setSize(80, 60);
buttonPlay.setPosition(camera.viewportWidth/2 - buttonPlay.getWidth()/2,5);
stage.addActor(buttonPlay);
I now am concerned about packing all my sprites onto single imaged.
The problem has been resolved by creating a texturepack.png with the size smaller than 4096x4096.
For some reason it was ok only on some devices and no similar problem has been noticed on the desktop.
Hope this help someone...
see your code here:
atlas = new TextureAtlas("data/shot/atlas.pack");
style.imageUp = new TextureRegionDrawable(atlas.findRegion("ui/play"));
^^^^^
buttonPlay = new ImageButton(styleButtonPlay);
^^^^^^^^^^^^^^^
it looks like you assign the wrong style to your imageButton, try putting the drawable into the correct button style ("styleButtonPlay" instead "style"):
styleButtonPlay.imageUp = new TextureRegionDrawable(atlas.findRegion("ui/play"));
I'm attempting to use LibGDX Stage for my GUI elements, but I'm having loads of difficulty getting it to render properly. Right now, I'm attempting to render a chat window in the lower left corner of the screen.
Here is the construction of the GUI objects:
stage = new Stage();
stage.setCamera(controller.getCamera());
uiSkin = new Skin(Gdx.files.internal("res/gui/skin/uiskin.json"));
Table table = new Table(uiSkin);
stage.addActor(table);
table.setSize(300, 260);
table.setPosition(0, 0);
table.setFillParent(false);
table.bottom();
table.left();
table.pad(10);
lblChatLabel = new Label("", uiSkin);
lblChatLabel.setWrap(true);
final ScrollPane scroll = new ScrollPane(lblChatLabel, uiSkin);
txtChatBar = new TextField("do a chat", uiSkin);
txtChatBar.setName("txtChatBar");
table.add(txtChatBar).width(300f);
table.row();
table.add(scroll).expand().fill().colspan(4);
txtChatBar.addListener(new InputListener() {
public boolean keyDown(InputEvent event, int keycode) {
if (keycode == Input.Keys.ENTER) {
sendMessage();
// Close the chat bar
showChat = false;
return true;
}
return false;
}
});
And here is my render() method:
Log.debug("void", "x: " + stage.getCamera().position.x + ", y: " + stage.getCamera().position.y);
stage.act();
for (Actor a : stage.getActors()) {
a.draw(spriteBatch, 1);
}
In another section of code elsewhere, the game's camera object is translated to center on the player:
camera.translate(targetPosition.x, targetPosition.y);
camera.update();
So that all said, the chat window renders properly, but it only does so at 0, 0. I've also changed called stage.draw() rather than iterate through the Actors individually, but that causes the same issue. Here is a screenshot illustrating the issue:
http://i.imgur.com/8uz5lV6.jpg
Finally, I've tried to translate the stage manually by setting the viewport, but that causes an even weirder issue.
float cx = controller.getCamera().getX();
float cy = controller.getCamera().getY();
float width = controller.getCamera().viewportWidth;
float height = controller.getCamera().viewportHeight;
stage.act();
stage.setViewport(width, height, true, cx, cy, width, height);
stage.draw();
Image here:
http://i.imgur.com/JpSLq1s.jpg
Certainly I am doing something wrong, but I have no idea at this point. I would have assumed that the stage follows the Camera translation, but that doesn't appear to be the case. Any suggestions are welcome! Thanks!
I believe the issue is this line of code:
stage.setCamera(controller.getCamera());
If I'm reading correctly, you want the chat window to always render from (0,0), no matter where the camera is on the screen. If that's the case, then the stage shouldn't have any relation with the camera, which moves around and just further complicates getting the stage in the right position to be rendered properly.
Without that line of code, you should be able to just call
stage.act();
stage.draw();
and it should work fine.
I use Stage in libGDX for drawing GUI and adding listeners to controls in my game.
But when I draw text on ImageTextButton I get mirrored text as displayed on image below.
Can some help me and tell me how to draw normal text, not mirrored ?
stage = new Stage(Constants.VIEWPORT_GUI_WIDTH, Constants.VIEWPORT_GUI_HEIGHT);
stage.clear();
....
ImageTextButtonStyle imageTextButtonStyle = new ImageTextButtonStyle();
imageTextButtonStyle.font = Assets.instance.fonts.defaultSmall;
ImageTextButton imageTextButton = new ImageTextButton("ddsds", imageTextButtonStyle);
imageTextButton.setBackground( gameUISkin.getDrawable("fil_coins"));
imageTextButton.setPosition(50, 600);
imageTextButton.setHeight(85);
imageTextButton.setWidth(183);
stage.addActor(imageTextButton);
....
public void render (float deltaTime) {
stage.act(deltaTime);
stage.draw();
}
Thanks
Edit:
Button images are shown correct, only text has mirrored view
As #Springrbua suggest me in comment below, my bitmap font was flipped when creating.
defaultSmall = new BitmapFont(Gdx.files.internal("images/font.fnt"), true);
should be
defaultSmall = new BitmapFont(Gdx.files.internal("images/font.fnt"), false);
Even it's not case here it may be useful for someone - if font size parameter is set to negative value, text will be rendered upside-down (Y-scale).