I have a class that initiates a table with 3 cells filled like so:
[leftButton] [ImageButton] [rightButton]
ImageButton is created & added to characterSelection array:
Texture characters2 = TrafficGame.res.getTexture("chevy");
characterImageStyle = new ImageButton.ImageButtonStyle();
car = new TextureRegion(characters2, 32, 32);
characterImageStyle.imageUp = new TextureRegionDrawable(new TextureRegion(car));
characterImageChevy = new ImageButton(characterImageStyle);
characterSelection.add(characterImageChevy);
Adding to table when player selection is initiated:
table.add(characterSelection.pop());
Now when the user clicks the left/right button, moveLeft/Right() gets called:
public void moveLeft(){
table.getChildren().get(1).clear();
}
This where I'm stuck. It obviously clears the cell but I have no idea how to add an ImageButton back to it from the array.
Table doesn't support swapping actors into the same cell. Instead of clearing the image button, you should hide it. When you're ready for it to show another image, change its image and show it.
characterImageChevy.hide();
((TextureRegionDrawable)characterImageChevy.getStyle().imageUp).setTexture(...);
characterImageChevy.show();
You can directly change the contents of a Scene2D cell. You can obtain the Cell by asking the table to return Cell for a particular Actor. After that you can clear the Cell and set new Actor for its contents.
// first, grab the Actor that you wish to replace
ImageButton actor = characterImageChevy; // you know where to get it from
// next, take the Cell where it's at
Cell<Table> cell = table.getCell(characterImageChevy);
// remove the actor
cell.clearActor();
// set new Actor
cell.setActor(characterImageChevy);
Related
I want to make sub Table in a Cell to fill to that cell as a parent.
// Main Table
Table mainTable = new Table();
// Sub Table
Table subTable = new Table();
mainTable.add( ).expand().row(); // cell-1
mainTable.add(subTable).expand().row(); // cell-2
mainTable.add( ).expand().row(); // cell-3
The Code result:
When I make subTable.setFillParent(true), it will fill to mainTable. Ok its well.
But I want to make subTable fill to expand size of the cell-2.
I mean:
How can I make this?
Check LibGDX wiki: https://github.com/libgdx/libgdx/wiki/Table#fill
The fill method causes a widget to be sized to the cell. Like expand,
there are also fillX and fillY methods.
table.add(nameLabel).expand().bottom().fillX();
...
I have an ImageButton. The texture for it is basically a white square, with black text in the center. I want to be able to dynamically change the color of this button. The problem is that ImageButton.setColor does not do anything. I can call tint on the ImageButtonStyle which does work, but I want to be able to change the color later down the road if for instance the player clicks on the button. Thanks! Here is some code :
ImageButton.ImageButtonStyle style_button_music = new ImageButton.ImageButtonStyle();
style_button_music.imageChecked = new SpriteDrawable(new Sprite((Texture) Game.assetManager.get("button_music.png")));
style_button_music.imageUp = new SpriteDrawable(new Sprite((Texture) Game.assetManager.get("button_music.png")));
style_button_music.imageDisabled = new SpriteDrawable(new Sprite((Texture) Game.assetManager.get("button_music.png")));
button_music = new ImageButton(style_button_music);
button_music.setColor(new Color(22f/255f, 100f/255f, 255f/255f, 1f));
table.setFillParent(true);
table.setDebug(true);
table.top();
table.pad(100);
table.add(button_music).width(200).height(200);
stage.addActor(table);
Use
button_music.getImage().setColor(Color color)
The setColor() on ImageButton is just inherited method from Actor but it doesn't do anything.
Actor color doesn't cascade down to children (except for the alpha component). Since the Image of an ImageButton is a child of the Button, the Image does not inherit the color of the Button.
However, the way in which you're currently using it, I think you could use a plain Button, and set the background image instead. That does get tinted.
style_button_music.checked = new TextureRegionDrawable(new TextureRegion(Game.assetManager.get("button_music.png")));
style_button_music.up = style_button_music.checked;
style_button_music.disabled = style_button_music.checked;
You should probably be using TextureRegionDrawable instead of SpriteDrawable. It's a much lighter-weight object, and it's rare to need the extra overhead of Sprites for buttons.
If you do need to use an actual ImageButton, and you're recoloring it dynamically, you could subclass ImageButton and use it's act method to transfer it's color to its child. That way you can use ColorActions with it.
#Override
public void act (float delta) {
super.act(delta);
Color color = getColor();
getImage().setColor(color.r, color.g, color.b, 1f); //leave opaque, alpha transferred in draw()
}
What I'm trying to do is add a label to follow a slider knob and display the knob's value. I currently have a vertical slider and a label stacked inside a table cell. I'm able to position the label to where the knob is and update it's text correctly but am having a problem while moving the knob.
When I move the knob I can make the label follow it as long as I don't update the text. But if I update the text then the label re-centers itself in the cell till the knob has stopped moving at which point it places itself on the knob.
How do I make it so that the label doesn't reposition while it's updating text?
Here's some sample code of what I have going on:
public class OptionsWindow implements Screen {
private Stage stage;
private Table table;
private Slider slider;
private Label label;
private Skin textSkin = new Skin(Gdx.files.internal("skins/skin.json"),
new TextureAtlas(Gdx.files.internal("skins/text.pack")));
private Skin sliderSkin = new Skin(Gdx.files.internal("skins/skin.json"),
new TextureAtlas(Gdx.files.internal("skins/text.pack")));
private min = 1, max = 2;
#Override
public void show() {
stage = new Stage();
table = new Table();
slider = new Slider(min, max, 0.001f, true, sliderSkin);
label = new Label(""), textSkin);
table.stack(label, slider).height(1000);
table.setFillParent(true);
stage.addActor(table);
Gdx.input.setInputProcessor(stage);
}
#Override
public void render() {
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
label.setY(slider.getValue() - min);
label.setText(slider.getValue());
stage.act();
stage.draw();
}
}
I've done a lot of searching for an answer to this question but have yielded no results. I have also tried placing the label in a container and moving the container while changing the label text, but the same result happens. I'm sure somebody had done this before. It seems like something people would want. Please, any help is welcome.
Never done it before, I always show the amount in a label next to or above the slider to give feedback. But the result you are after gives a nice touch. Did you try adding a ChangeListener to your slider? Everytime the slider changes this would be called. So if you insert the new position and text in there it should be updating correctly.
//Slider has to be "final" for the listener.
final Slider slider = new Slider(0, 10, 1, true, skin);
slider.addListener(new ChangeListener() {
#Override
public void changed(ChangeEvent event, Actor actor) {
label.setY(slider.getValue() - min);
label.setText(slider.getValue());
}
});
This does not need to be in your render method. It's a listener so whenever something happens the listener listens for it will execute.
Ok, so I came up with a work around. It would seem that labels move back to their cell alignment position while updating text. to solve this I simply placed my label in a table with a row on either side like so:
Table subTable = new Table();
subTable.add().row();
subTable.add(label).row();
subTable.add();
Then in render I calculate new height values for the exterior cells and apply them:
float topH, botH;
// Calculate heights
topH = (1 - slider.getPercent()) * parentTable.getHeight();
botH = slider.getPercent() * parentTable.getHeight();
// Apply heights to exterior table cells
subTable.getCells().get(0).height(topH);
subTable.getCells().get(2).height(botH);
// Update label text
label.setText(slider.getValue());
This is just a simple form of what I have. You'll want to take into account the label height to get it to position correctly. Also if you want it to follow with the slider at the slider's set animateDuration, you'll want to use getVisualPercent() instead of getPercent(). However this causes issues when your finger flies out of the cell. For some reason the visual percent is linked to where the slider knob is when your finger leaves the cell, not where it ends up.
My work around for this was to just set the animateDuration to 0.0f and just use getPercent(). If I or someone comes up with a solution to the getVisualPercent() option, then that would be nice to have posted as well.
I'm trying to make a shop for my game.
In this shop, there should be 2 scroll pannel : one with your iventory's stuff, the other one with what the dealer sells.
(It 'd like to make it this way)
http://i.stack.imgur.com/5gLUr.jpg
So at first, I tried to put a list in my ScrollPane, but I can't put both image of my weapons and text in those.
So I tried to put a table in my ScrollPane : as long as I have stuff in my inventory, I add cells with the item's texture, another one with the name of the weapon, ...)
But there's no way I found to select the table ...
So I'm a bit confused : if I use a List, I can't put texture and make it look fancy, but with Tables, I can't select the items ...
Have you guys got any ideas of how I should do that ?
Thanks !
EDIT : Here is some code, but no everything since it's pretty ugly !
Table test3 = new Table(skin2);
for(WeaponElement weapon : GameScreen.dataLoader.getWeaponArray()){
Image img = new Image(new Texture(weapon.getIconPath()));
test3.add(img).width(32);
test3.add().width(10);
test3.add(weapon.getName()).align(Align.left).row();
}
panelShop = new ScrollPane(test3, skin2);
panelShop.layout();
So basically, I add all my weapons into my test3 table rows add it into my ScrollPane, but i'd like to make them selectable, with I can do by using lists but if I do so, I can't use anymore tables to make it look great...
What about using Buttons to push? The example below shows a table with one button a row. Use a Button with the text you want to display and add a picture beside it.
Table scrollableTable = new Table(skin);
scrollableTable.setBounds(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
for(WeaponElement weapon : GameScreen.dataLoader.getWeaponArray()){
final TextButton button = new TextButton(wapon.name, skin, "default");
button.addListener(new ClickListener() {
#Override
public void clicked(InputEvent event, float x, float y) {
// do stuff
});
scrollableTable.add(button).center();
// add a picture
Image img = new Image(new Texture(weapon.getIconPath()));
scrollableTable.add(img).width(32);
// finish a row
scrollableTable.row();
}
Try Tree ui component and use it as table. It is selectable and accepts Actor as node (use Table as row layout).
See com.badlogic.gdx.tests.TestTree (link) example.
My intention is to use the ListCellRenderer in order to highlight red cells that contain links that have been visited(or clicked) and green those which have not been visited this works partially but not quite. It seems that the renderer works as far as it concerns marking the cells red. If I however add more rows, they come all red colored thereafter. In addition if I mark two cells that are not adjacent then it marks them all red as well.
I have a class Feed, where I initially had a boolean variable, but I have modified the code so that the m_isRead variable is in the listModel here is the constructor:
public Feed (URL url, String urlName) {
this.m_urlName = urlName;
this.m_observers = new ArrayList<Observer>();
this.m_isRead = isRead;
}
Now this instance variable is set to false in the listModel Class which is the one that contains the renderer.
m_isRead = false.
When using the ListCellRenderer which I now have adjusted so that it does not require this method:
m_feeds.get(index).getM_urlName();
I proceed as follows:
class MyCellRenderer extends JLabel implements ListCellRenderer {
public MyCellRenderer() {
setOpaque(true);
}
public Component getListCellRendererComponent(JList list,
Object value,
int index,
boolean isSelected,
boolean cellHasFocus) {
setText(value.toString());
Color background = Color.GREEN;
Color foreground = Color.BLACK;
//find out if the specific has been read or not
if (m_feeds.get(index).isM_isRead() == true) {
background = Color.RED;
foreground = Color.WHITE;
} else {
background = Color.GREEN;
foreground = Color.BLACK;
};
setBackground(background);
setForeground(foreground);
return this;
}
}
Then I have another inner class with a method which I use to get the selected item, at that point I set m_isRead to true (to read) this is now independent from the Feed class and the code which related to it has been commented out:
public class ChangeSelectedIndex implements ListSelectionListener {
#Override
public void valueChanged(ListSelectionEvent e) {
for (int i = 0; i < m_listModel.size(); i++) {
if (m_listModel.getElementAt(i) != null) {
m_urlName = m_list.getSelectedValue();
initiateParsing();
m_updateFeedButton.setEnabled(true);
// TODO fix behavior for cell renderer
//this sets the value of the feed being clicked to true
// m_feeds.get(i).setM_isRead(true);
m_isRead = true;
}
}// end for
}
}
Now the result is the same, if I add the rows they are green and that is correct, if I click on each row each turns read provided that I have clicked the adjacent rows to the first one I click but if I, for example, have four rows and I click the first row and the last row, all the rows, including those in between (which I have not clicked) turn red. Likewise, if I add new rows they come in red. That is if I click even one of those rows then the ones I add thereafter will be red.
Can anybody help?
Thank you in advance,
Cheers
After a while thinking about it I have concluded that there was nothing wrong my original cell renderer, it has had to do with the list model itself. The JList simply did not support multiple NON contiguous selection without clicking the Ctrl button right out of the box. This is what triggered further searching on my side on how to emulate the Ctrl click down; which I found here on answer number 8 (working code):
Individual and not continuous JTable's cell selection
The interesting here is adding the mouse event to the list. This mouse event emulates a Ctrl down event, which the ListSelectionModel which is used by JList as well as JTable is set to MULTPLE_SELECTION_INTERVAL it behaves as desired. That is, the user now able to click on whatever feed, even if it is not contiguous, and it will color the desired feed or feeds without coloring whatever unclicked feed may lay in between.
As for the renderer, it would suffice to use the isSelected parameter which comes in through with its method getListCellRenderer(). However, in my case, what I had done has the same effect with the addition that I was using an array to add all the statuses of the feeds, meaning, read or unread. Proceeding this way, I had in mind that if I closed the program and save the feed list, including its isRead parameter set to either true or false, then later on upon retrieving the feed list, the same feed status would be restored from, for example, a file, or at least that is what I had in mind.