I am new to libgdx and want to know if there is an easy way to alpha animate a BitmapFont I am currently using FreeTypeFont to generate my font style and if I call:
bitmapfont.setColor(1,1,1,alphahere)
then it would render my text back to normal removing the style from my FreeTypeFont.
How can I animate the bitmap font with out removing its style from the FreeType?
You can easily change your font color by using a Label();
In your the creation of your class you'll have :
labelStyle = new LabelStyle(yourFreeTypeFont, new Color(1,1,1,1));
label = new Label("Your Text", labelStyle);
And in the render() you'll have :
labelStyle.fontColor = new Color(1,1,1,0);
label.setStyle(labelStyle);
By this method you can off course change any channels, not only the alpha
Edit : Second method
Now that I think of it, as a Label() is an actor, there is an even better way to change the alpha channel.
You can instantly change the alpha value of the label with :
label.addAction(Actions.alpha(floate alphaValue));
Or you can make a progressive change with :
label.addAction(Actions.alpha(float alphaValue, float duration));
Related
i want to make my JCheckboxes in a JTable bigger (for Touchscreen), but it doesn't change the size.
I tried it with
setPrefferedSize
setSize
What should I do?..
I assume you mean you want a bigger check box. If so then you need to create images to represent the unselected and selected icons of the check box. Then you can create a renderer and editor using these icons. Finally you would need to increase the height of each row in the table. The code might look something like:
Icon normal = new ImageIcon(...);
Icon selected = new ImageIcon(...);
JTable table = new JTable(...);
table.setRowHeight(...);
TableCellRenderer renderer = table.getDefaultRenderer(Boolean.class);
JCheckBox checkBoxRenderer = (JCheckBox)renderer;
checkBoxRenderer.setIcon( normal );
checkBoxRenderer.setSelectedIcon( selected );
DefaultCellEditor editor = (DefaultCellEditor)table.getDefaultEditor(Boolean.class);
JCheckBox checkBoxEditor = (JCheckBox)editor.getComponent();
checkBoxEditor.setIcon( normal );
checkBoxEditor.setSelectedIcon( selected );
IMPORTANT NOTE: This was only tested with the default 'Metal' look and feel. I do not guarantee that this will work for any other look and feel. Also I am not entirely sure how it works because it is admittedly a bit of a hack.
I was able to solve this in a slightly different way.
I wanted to use the existing images and just apply a scale to it. I am already scaling the font of my application using the UI defaults and so I have a rather large font. I wondered if I could leverage that and scale the check boxes accordingly.
After scouring the internet and trying a bunch of things I came up with this method:
public static void scaleCheckBoxIcon(JCheckBox checkbox){
boolean previousState = checkbox.isSelected();
checkbox.setSelected(false);
FontMetrics boxFontMetrics = checkbox.getFontMetrics(checkbox.getFont());
Icon boxIcon = UIManager.getIcon("CheckBox.icon");
BufferedImage boxImage = new BufferedImage(
boxIcon.getIconWidth(), boxIcon.getIconHeight(), BufferedImage.TYPE_INT_ARGB
);
Graphics graphics = boxImage.createGraphics();
try{
boxIcon.paintIcon(checkbox, graphics, 0, 0);
}finally{
graphics.dispose();
}
ImageIcon newBoxImage = new ImageIcon(boxImage);
Image finalBoxImage = newBoxImage.getImage().getScaledInstance(
boxFontMetrics.getHeight(), boxFontMetrics.getHeight(), Image.SCALE_SMOOTH
);
checkbox.setIcon(new ImageIcon(finalBoxImage));
checkbox.setSelected(true);
Icon checkedBoxIcon = UIManager.getIcon("CheckBox.icon");
BufferedImage checkedBoxImage = new BufferedImage(
checkedBoxIcon.getIconWidth(), checkedBoxIcon.getIconHeight(), BufferedImage.TYPE_INT_ARGB
);
Graphics checkedGraphics = checkedBoxImage.createGraphics();
try{
checkedBoxIcon.paintIcon(checkbox, checkedGraphics, 0, 0);
}finally{
checkedGraphics.dispose();
}
ImageIcon newCheckedBoxImage = new ImageIcon(checkedBoxImage);
Image finalCheckedBoxImage = newCheckedBoxImage.getImage().getScaledInstance(
boxFontMetrics.getHeight(), boxFontMetrics.getHeight(), Image.SCALE_SMOOTH
);
checkbox.setSelectedIcon(new ImageIcon(finalCheckedBoxImage));
checkbox.setSelected(false);
checkbox.setSelected(previousState);
}
What it does is get the size of the font from the checkbox's font metrics. Then using that it derives a new icon based on the icon found in the 'Look and Feel'.
One odd thing that I am not able to explain is how the icon for the checkbox in its 'un-selected' or default state, changes to the 'selected' icon, when I am accessing the same property to get each one.
I start by saving the state of the control so I can restore it at the end. This is done because in order for the icons to be set properly, the state needs to be unchecked when you first request the icon from the UIManager and then it will need to be checked when you request the icon the second time to get the 'selected' icon.
I am not entirely sure how the UIManager works or why the checkbox icon changes when we call the same property just by setting the 'selected' value of a single checkbox, but that is what is required in order to get both the necessary icons.
If you did not want to base the size on the font you could easily just pass in the height and width as parameters and use them instead of the font's height when setting the buffered image size.
I might mention that this same methodology works with radiobuttons
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()
}
There are obviously the two methods getWidth and getHeight but they return the old label size if we just changed the Label text value.
For example, in this code, the background is not correctly resized:
Label speedLabel = new Label();
Rectangle backgroundLabel = new Rectangle();
// Some initialization
// Change the label text
speedLabel.setText(connection.getSpeed_bps()); // Sets a bigger number
// Adjust the background
backgroundLabel.setWidth(speedLabel.getWidth());
backgroundLabel.setHeight(speedLabel.getHeight());
After the initialization, my Label is like that:
And after the text change and the background adjustment, my Label is like that:
I had a look at this post but it recommends a deprecated method:
How to get label.getWidth() in javafx
The reason for returning the "old" size that the label actually doesn't get updated on the GUI in the moment when you set the textProperty of it, therefore the size is not changed.
You can listen to the widthProperty and heightProperty of the Label and resize the Rectangle in the listener:
speedLabel.widthProperty().addListener((obs, oldVal, newVal) -> {
backgroundLabel.setWidth(newVal.doubleValue());
});
speedLabel.heightProperty().addListener((obs, oldVal, newVal) -> {
backgroundLabel.setHeight(newVal.doubleValue());
});
or simply use bindings between the properties:
backgroundLabel.heightProperty().bind(speedLabel.heightProperty());
backgroundLabel.widthProperty().bind(speedLabel.widthProperty());
But if you just want to achieve a Label with some background, you don't actually need a Rectangle, just some CSS - you can check this question: FXML StackPane doesn't align children correctly
You can do it in two ways.
Approach 1:
Give the background color of your label as that of rectangle. So that whatever is the Label's size, your background rectangle will take the width accordingly.
label.setStyle("-fx-background-color:grey; -fx-padding:5");
Approach 2:
Bind the Rectangle's size according to your label size
rectangle.prefWidthProperty(label.widthProperty());
rectangle.prefHeightProperty(label.heightProperty());
I can change the color of the font like this
LabelStyle style1 = new LabelStyle(..some font...,
Color.valueOf("FF4500")
);
label.setStyle(style1);
but how do I change the background?
right now the background is the same as the background of whole screen which is set in
render method lke this
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
Gdx.gl.glClearColor(
1.000f, 0.980f, 0.941f
,1);
Label label = new Label(labelText, skin);
Pixmap labelColor = new Pixmap(labelWidth, labelHeight, Pixmap.Format.RGB888);
labelColor.setColor(<your-color-goes-here>);
labelColor.fill();
label.getStyle().background = new Image(new Texture(labelColor)).getDrawable();
Basically, use the getDrawable() function of the Image class to assign the color of your Label's LabelStyles' background Drawable.
This is the simplest workaround I've been able to come up with and, frankly, it's just silly that there is no setBackground() in the Label class.
Actually, maybe the easiest fix is to hack the Label class and add a setBackground() method to it.
[Edit] Be sure to dispose of Pixmaps when you are done with them; i.e. labelColor.dispose();
[Update] #Mitrakov Artem made a good point: The above solution will affect all instances of this LabelStyle. If that's not what you want you can create a new LabelStyle, use the above method on it, then save it to the Label. Quoting Artem: "So I would recommend to create a new style (LabelStyle style = new LabelStyle(label.getStyle());), change its background and then apply it to the label (label.setStyle(style);)"
Actually you do not change the background of the Lable like that. You did just change the clearcolour. Guess you know that.
To change the background you need to change the background at the style of the label. To do so i'd recommend to use a simple NinePatch as background, (can be a square! if its white you can change the colour of the ninepatch and the background colour changes!)
NinePatch temp = new NinePatch(new Texture(....), 10, 10, 10, 10); //edges
For more information about ninepatch take a look here libgdx wiki ninepatch
You need to add that ninepatch to an Skin objekt. For example like this
Skin skin = new Skin();
skin.add("background",temp)
After that you can get a drawable from the skin that you can set as background of the LabelStyle.
style1.background = skin.getDrawable("background");
see libgdx API LabelStyle
You can also use a simple bitmap but that does get scaled to the label size which causes in most of the cases deformation. A Ninepatch can be scaled without having deformation.
If you need a quick and easy solution, you can use the snippet below. It doesn't work well with multiline text because it doesn't take the text width per line into account.
Anyway, the background is automatically adjusted to the width and height of the label widget (i.e. if your text changes).
private Label label = new Label("text", createLabelStyleWithBackground());
private LabelStyle createLabelStyleWithBackground() {
LabelStyle labelStyle = new LabelStyle();
labelStyle.font = new BitmapFont();
labelStyle.fontColor = Color.WHITE;
labelStyle.background = createBackground();
return labelStyle;
}
private Drawable createBackground() {
Pixmap labelColor = new Pixmap(1, 1, Pixmap.Format.RGBA8888);
Color color = new Color(Color.GRAY);
color.a = 0.75f;
labelColor.setColor(color);
labelColor.fill();
Texture texture = new Texture(labelColor);
return new BaseDrawable() {
#Override
public void draw(Batch batch, float x, float y, float width, float height) {
GlyphLayout layout = label.getGlyphLayout();
x = label.getX();
y = label.getY() - (layout.height + 15) / 2; // +15 is some space
batch.draw(texture, x, y, layout.width, layout.height + 15);
}
};
}
here is an example with a multiline label
I can't figure out how to manage checkbox images size. Of course, it is possible to create different size of image in my Texture atlas and take appropriate one, but I don't want to do that.
Here is my code:
AtlasRegion checkboxOn = AssetsHelper.textures.findRegion("checked");
AtlasRegion checkboxOff = AssetsHelper.textures.findRegion("unchecked");
CheckBoxStyle checkBoxStyle = new CheckBoxStyle();
checkBoxStyle.font = AssetsHelper.font66yellow;
checkBoxStyle.checkboxOff = checkboxOff;
checkBoxStyle.checkboxOn = checkboxOn;
CheckBox cbSound = new CheckBox(" Sound", checkBoxStyle);
cbSound object doesn't have such methods to rezise image of checkbox, but there is method getImage(), but seems it doesn't work too.
This is not working:
cbSound.getImage().width = 120;
cbSound.getImage().height = 120;
FYI: for example, when I wanted to draw image I did like that:
batch.draw(textureRegion, 0, 0, widthIwant, heightIwant);
But in CheckBox class there is overrided only this (without setting width and height):
public void draw (SpriteBatch batch, float parentAlpha) {
image.setRegion(isChecked ? style.checkboxOn : style.checkboxOff);
super.draw(batch, parentAlpha);
}
Question: how can I change width and height of checkbox image?
Thanks in advance.
The libgdx widgets are using drawables for drawing images. A drawable gets automatically scaled to fit the cell it is in. So in order to change the image size, change the cell size:
cbSound.getCells().get(0).size(widht, height);
For better results, you should use a nine patch for the drawable.
You need to set the image scaling type. Also method getImageCell is more correct than method getCells().get(0). Default is none.
CheckBox soundCB = new CheckBox("Sound", uiskin);
soundCB.getImage().setScaling(Scaling.fill);
soundCB.getImageCell().size(GameConfig.WIDTH/6);
soundCB.left().pad(PAD);
soundCB.getLabelCell().pad(PAD);
//...
content.add(soundCB).width(GameConfig.WIDTH/1.5f).row(); //add to table