I have an issue with libgdx BitMapFont, I display labels inside of a scene2d table, but the font is "cut" at some parts of the text (see below).
Here is my code :
For declaring the font :
font12 = new BitmapFont(Gdx.files.internal("fonts/text.fnt"));
font12.setUseIntegerPositions(false);
font12.getData().setScale(0.2f);
For declaring the table :
Table table = new Table();
table.top();
table.setFillParent(true);
LabelStyle lblStyle = new LabelStyle();
lblStyle.font = font12;
scoreLabel =new Label("SCORE", lblStyle);
timeLabel = new Label("TIME", lblStyle);
levelLabel = new Label("LEVEL", lblStyle);
Thank you for your help.
[EDIT]
Here is the code I tried using freetype but this doesn't look smooth :
FreeTypeFontGenerator generator = new FreeTypeFontGenerator(Gdx.files.internal("fonts/OpenSans-Regular.ttf"));
FreeTypeFontParameter parameter = new FreeTypeFontParameter();
parameter.size = 18;
parameter.color = Color.BLACK;
generator.scaleForPixelHeight(18);
parameter.minFilter = Texture.TextureFilter.Linear;
parameter.magFilter = Texture.TextureFilter.Linear;
parameter.mono = false;
parameter.gamma = 2f;
font12 = generator.generateFont(parameter); // font size 12 pixels
font12.setUseIntegerPositions(false);
font12.getRegion().getTexture().setFilter(TextureFilter.Linear, TextureFilter.Linear);
generator.dispose(); // don't forget to dispose to avoid memory leaks!
First thing, you should always avoid scaling fonts because the result is pixelated and looks really bad. You can generator fonts to the correct size that you need within your program using the FreeTypeFontGenerator:
https://github.com/libgdx/libgdx/wiki/Gdx-freetype
When adding components to a table the table sets the size on its child components. Essentially, the table will override the size of the label when the label is added to the table.
To make sure the label keeps the same size, set the size on the table's cell that is holding the label like this:
table.add(label).size(label.getWidth(), label.getHeight());
You can also apply a different size to the label when adding it to the table (if for example you wanted to have extra space around the label):
table.add(label).size(500, 100);
EDIT
This code works for me, give this a try.
private Stage stage;
#Override
public void create () {
stage = new Stage();
stage.setViewport(new ScreenViewport(stage.getViewport().getCamera()));
Table table = new Table();
table.setFillParent(true);
stage.addActor(table);
FreeTypeFontGenerator gen = new FreeTypeFontGenerator(Gdx.files.internal("internal/arialbd.ttf"));
FreeTypeFontGenerator.FreeTypeFontParameter param = new FreeTypeFontGenerator.FreeTypeFontParameter();
param.size = 18;
param.borderColor = new Color(Color.BLACK);
param.borderWidth = 1;
BitmapFont font = gen.generateFont(param);
gen.dispose();
Label.LabelStyle style = new Label.LabelStyle();
style.font = font;
Label label = new Label("Hello World", style);
table.add(label).size(label.getWidth(), label.getHeight());
}
#Override
public void render() {
Gdx.gl.glClearColor(0.6f, 0.8f, 0.8f, 1.0f);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
stage.act(Gdx.graphics.getDeltaTime());
stage.draw();
}
#Override
public void resize(int width, int height) {
stage.getViewport().update(width, height, true);
}
Related
My app provides two buttons in a table row. Each image has a width of 300 pixel (source). The app shows all parts of both buttons if I provide an initial window width which is greater than 600. Even resizing the window to a smaller size works smoothly. Both buttons are shown fully and they get scaled down if needed when resizing the window. The buttons are cut off once I provide an initial window size which is smaller than 600 pixel. How can I show the whole buttons on small screens by default?
Screenshots:
My code looks like this:
public class LevelChooserState extends GameState {
private Stage stage;
private Texture bgTexture;
private Pixmap bgPixmap;
private Viewport viewportStage;
private Container<Table> container;
private Table table;
public LevelChooserState(final GameStateController gsc) {
super(gsc);
Gdx.app.log(TAG, "Setup Level Chooser State.");
// Setup Background Color
bgPixmap = new Pixmap(1, 1, Pixmap.Format.RGB565);
bgPixmap.setColor(Color.WHITE);
bgPixmap.fill();
bgTexture = new Texture(bgPixmap);
TextureRegionDrawable textureRegionDrawableBg = new TextureRegionDrawable(new TextureRegion(bgTexture));
// Setup viewports
viewportStage = new ExtendViewport(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
viewportStage.setScreenBounds(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
// Setup stage
stage = new Stage(viewportStage);
Gdx.input.setInputProcessor(stage);
// Setup font
int Help_Guides = 12;
int row_height = Gdx.graphics.getWidth() / 12;
FreeTypeFontGenerator generator = new FreeTypeFontGenerator(Gdx.files.internal("fonts/PatrickHand-Regular.ttf"));
FreeTypeFontGenerator.FreeTypeFontParameter parameter = new FreeTypeFontGenerator.FreeTypeFontParameter();
parameter.size = 30;
parameter.borderWidth = 1;
parameter.color = Color.BLACK;
BitmapFont myFont = generator.generateFont(parameter);
generator.dispose();
// Setup background pictures
TextureAtlas textureAtlas = new TextureAtlas("atlas/onoff.atlas");
TextureRegion backgroundTR1 = textureAtlas.findRegion("onoff_off");
TextureRegion backgroundTR2 = textureAtlas.findRegion("onoff_on");
// Setup TextButtons
TextureRegionDrawable up1= new TextureRegionDrawable(backgroundTR1);
TextureRegionDrawable down1= new TextureRegionDrawable(backgroundTR2);
TextureRegionDrawable checked1= new TextureRegionDrawable(backgroundTR2);
String text1 = "Deceptive dance in the poultry house.";
ClickListener clickListner1 = new ClickListener() {
#Override
public void clicked(InputEvent event, float x, float y) {
Gdx.app.log(Constants.TAG, "Button click received.");
gsc.setState(GameStateController.State.PLAY);
}
};
TextButton textButton1 = createTextButton(myFont, text1, up1, down1, checked1, clickListner1);
// ... created some more buttons at this point
// Setup Layout
container = new Container<Table>();
container.setBounds(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
container.setBackground(textureRegionDrawableBg);
container.align(Align.bottomLeft);
table = new Table();
table.setBounds(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
table.setTouchable(Touchable.enabled);
table.setDebug(true);
table.debugAll();
table.setBackground(textureRegionDrawableBg);
table.setFillParent(true);
table.align(Align.top);
// TODO take care of scaling too when setting padding
float padding = 10;
table.row();
table.add(textButton1).expandX().pad(padding);
table.add(textButton2).expandX().pad(padding);
table.row();
table.add(textButton3).expandX().pad(padding);
table.add(textButton4).expandX().pad(padding);
table.row();
container.setActor(table);
stage.addActor(container);
}
private TextButton createTextButton(BitmapFont font, String text, TextureRegionDrawable up, TextureRegionDrawable down, TextureRegionDrawable checked, ClickListener clickListener) {
Label.LabelStyle labelStyle = new Label.LabelStyle();
labelStyle.font = font;
Label label = new Label(text,labelStyle);
label.setWrap(true);
TextButton.TextButtonStyle style = new TextButton.TextButtonStyle();
style.up = up;
style.down = down;
style.checked = checked;
style.font = font;
TextButton button = new TextButton(label.toString(), style);
//button.setSize(50,100);
button.setLabel(label);
button.getLabelCell().pad(20f);
button.getLabel().setAlignment(Align.topLeft);
button.setPosition(0,0);
button.addListener(clickListener);
return button;
}
#Override
public void update(float delta) {
}
#Override
public void render() {
Gdx.gl.glClearColor(1f,1f,1f,1f);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.setProjectionMatrix(camera.combined);
batch.begin();
stage.getViewport().apply();
stage.draw();
stage.act();
batch.end();
}
#Override
public void dispose() {
Gdx.app.log(TAG, "dispose(); Level Chooser");
stage.dispose();
bgPixmap.dispose();
bgTexture.dispose();
}
#Override
public void resize(int w, int h) {
Gdx.app.log(TAG, "resize() LevelChooserState;");
stage.getViewport().update(Gdx.graphics.getWidth(), Gdx.graphics.getHeight(), true);
container.setFillParent(true); // makes sure the container will expand on resize
}
}
LibGDX uses real-pixel-to-screen-pixel mapping.
You're using an ExtendViewport to initialize the game, which takes its minimum height and width from the actual window size in Gdx.graphics.getWidth(), Gdx.graphics.getHeight().
This means that the 'fake screen' you have, which you can then resize as much as you want, is actually determined by the size of the window.
I would advise you start with a fixed size for the ExtendViewport - say, 600 width, 400 height - and later you can change this to suit different sizes if necessary.
ExtendViewport with fixed sizes works fantastically well, even when displaying on extremely large screens.
It works smoothly once I calculate and set the desired button manually. Width and height are calculated depending on screen size.
I changed this:
table.add(textButton1).expandX().pad(padding);
to this:
float buttonWidth = Gdx.graphics.getWidth()/2 * 0.9f;
float buttonHeight = buttonWidth * 1.3f;
table.add(textButton1).width(buttonWidth).height(buttonHeight).expandX().pad(padding);
I want the text to grow when hovering over it, I understand how to add the event listener and detect when it's being hovered over, just don't understand how to actually execute the growing part.
I don't want it immediately skipping from one size to another either, I want it to actually show it growing, basically it will quickly grow to lets say 2x the normal size if you hover over it, these are the buttons for the home screen so I want the buttons to be noticeable when you are hovering over it.
public function _H_o(_arg1:String, _arg2:int, _arg3:Boolean) {
name = _arg1;
this.text_ = new SimpleText(_arg2, 0xD85A00, false, 0, 0, "Myriad Pro");
this.text_.setBold(true);
this.text_.text = _arg1.toLowerCase();
this.text_.updateMetrics();
this.text_.filters = [new DropShadowFilter(0, 0, 0, 0.5, 12, 12)];
addChild(this.text_);
this._U_r = _arg3;
this._0H_X_ = width;
this._N_a = height;
this.activate();
}
public function activate():void{
addEventListener(MouseEvent.MOUSE_OVER, this.onMouseOver2);
this.active = true;
}
protected function onMouseOver2(_arg1:MouseEvent):void {
//the code that makes the text medium-paced grow to 2x it size
}
Here is a very basic example using greensock as twinning library:
public class Main extends Sprite
{
private var _textField:TextField;
private var _textFormat:TextFormat;
public function Main()
{
_textField = new TextField();
_textFormat = new TextFormat();
_textFormat.size = 50;
_textField.defaultTextFormat = _textFormat;
_textField.text = "text";
addChild(_textField);
//repeat -1 so the animation continue forever
//yoyo to go both ways from the begining to the end and from the end to the begining
TweenMax.to(_textFormat, 1, {size:10, yoyo:true, repeat: -1, onUpdate:updateTextSize});
}
private function updateTextSize():void
{
//text needs to be preset again
_textField.text = "text";
_textField.defaultTextFormat = _textFormat;
trace(_textFormat.size);
}
}
I hope it helps you.
I am developing a game in which i am making a Game Over Screen but the components are not rearranging properly.
What i am Getting on 1024 * 720 screen is:
and what it should look like:
and the code is:
#Override
public void show() {
stage = new Stage(new ScreenViewport());
camera = new OrthographicCamera(Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
Gdx.input.setInputProcessor(stage);
font = new BitmapFont(Gdx.files.internal("newfont.fnt"));
verysmallfont = new BitmapFont(Gdx.files.internal("verysmallfont.fnt"));
smallfont = new BitmapFont(Gdx.files.internal("smallfont.fnt"));
atlas = new TextureAtlas("ui/buttons.pack");//add atlas
skin = new Skin(atlas);
table = new Table(skin);
actiontable = new Table(skin);
actionbar = new Table(skin);
actionbar2 = new Table(skin);
table.setBounds(0,0,Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
actiontable.setBounds(0,0,Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
actionbar.setBounds(0,0,Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
actionbar2.setBounds(0,0,Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
TextButton.TextButtonStyle buttonback = new TextButton.TextButtonStyle();
buttonback.up = skin.getDrawable("back");
buttonback.pressedOffsetX = 1;
buttonback.pressedOffsetY = -1;
buttonback.font = font;
buttonBack = new TextButton("",buttonback);
TextButton.TextButtonStyle lifebuttonstyle = new TextButton.TextButtonStyle();
lifebuttonstyle.up = skin.getDrawable("life");
lifebuttonstyle.pressedOffsetX = 1;
lifebuttonstyle.pressedOffsetY = -1;
lifebuttonstyle.font = font;
buttonlife = new TextButton("",lifebuttonstyle);
TextButton.TextButtonStyle textButtonStyle = new TextButton.TextButtonStyle();
textButtonStyle.up = skin.getDrawable("heart_game_continue");
textButtonStyle.pressedOffsetX = 1;
textButtonStyle.pressedOffsetY = -1;
textButtonStyle.font = font;
buttonPlay = new TextButton("",textButtonStyle);
TextButton.TextButtonStyle adsfreeStyle = new TextButton.TextButtonStyle();
adsfreeStyle.up = skin.getDrawable("Video");
adsfreeStyle.pressedOffsetX = 1;
adsfreeStyle.pressedOffsetY = -1;
adsfreeStyle.font = font;
buttonVideo = new TextButton("",adsfreeStyle);
TextButton.TextButtonStyle sharebuttonStyle = new TextButton.TextButtonStyle();
sharebuttonStyle.up = skin.getDrawable("Replay");
sharebuttonStyle.pressedOffsetX = 1;
sharebuttonStyle.pressedOffsetY = -1;
sharebuttonStyle.font = font;
buttonReplay = new TextButton("",sharebuttonStyle);
Label.LabelStyle headingstyle = new Label.LabelStyle(font,Color.WHITE);
label = new Label("Game Over",headingstyle);
label.setFontScale(1.7f);
Label.LabelStyle contstyle = new Label.LabelStyle(smallfont,Color.WHITE);
cont = new Label("Continue?",contstyle);
cont.setFontScale(2f);
Label.LabelStyle replaystyle = new Label.LabelStyle(verysmallfont,Color.WHITE);
replay = new Label("Replay",replaystyle);
shortVideo = new Label("(Short Video)",replaystyle);
replay.setFontScale(2f);
shortVideo.setFontScale(2f);
table.align(Align.top);
table.padTop(197f);
table.add(label);
table.getCell(label).spaceBottom(150f);
table.row();
table.add(cont);
table.getCell(cont).spaceBottom(80f);
table.row();
table.add(buttonPlay).size(200f,200f);
actiontable.add(buttonVideo).size(200f,200f);
actiontable.add(buttonReplay).size(200f,200f);
actiontable.align(Align.bottom);
actiontable.getCell(buttonVideo).spaceBottom(20f).padRight(100f);
actiontable.getCell(buttonReplay).spaceBottom(20f).padLeft(100f);
actiontable.row();
actiontable.add(shortVideo).padRight(100f);
actiontable.add(replay).padLeft(100f);
actiontable.padBottom(197f);
actiontable.setFillParent(true);
actionbar.align(Align.topLeft).setWidth(Gdx.graphics.getWidth());
actionbar.add(buttonBack).align(Align.left).size(90f,90f);
actionbar2.align(Align.topRight);
actionbar2.add(buttonlife).align(Align.right).size(90f,90f);
actionbar.getCell(buttonBack).pad(43f);
actionbar2.getCell(buttonlife).align(Align.right).pad(43f);
stage.addActor(actionbar2);
stage.addActor(actionbar);
stage.addActor(table);
stage.addActor(actiontable);
buttonPlay.addListener(new ClickListener(){
#Override
public void clicked(InputEvent event, float x, float y) {
((Game) Gdx.app.getApplicationListener()).setScreen(new Main(level,a,start,sweep,collide,innerarcs,out,mid,arcsleft,left,pointerColor));
};
});
buttonReplay.addListener(new ClickListener(){
#Override
public void clicked(InputEvent event, float x, float y) {
int total = out+mid+innerarcs;
((Game) Gdx.app.getApplicationListener()).setScreen(new Main(level,a,total,pointerColor));
}
});
buttonBack.addListener(new ClickListener(){
#Override
public void clicked(InputEvent event, float x, float y) {
((Game) Gdx.app.getApplicationListener()).setScreen(new Menu(level));
}
});
}
SpriteBatch batch;
#Override
public void render(float delta) {
Gdx.gl.glClearColor(0.184f,0.184f,0.184f,1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
stage.act(delta);
stage.draw();
}
private OrthographicCamera camera;
#Override
public void resize(final int width, final int height) {
table.setTransform(true);
table.setSize(width,height);
actiontable.setTransform(true);
actiontable.setSize(width,height);
actionbar.setTransform(true);
actionbar.setSize(width,height);
}
I am new to libgdx please help i dont have any knowledge about how to use camera and viewports.
Thanks in advance..
€dit: sorry my bad - there's nothing like "stage.resize"
But I'll let the answer in, because it'll fix your problem, though not as fast as you wish, but in a more clear way.
(THE FOLLOWING TEXT IS NOT NECESSARRY FOR THE ANWSER AND ARE ONLY SUGGESTIONS)
(if you follow the following steps, you'll save yourself time & headaches in the future)
I'd suggest a viewport, because they'll kill many problems with scaling, and there are quite a few, from which you can choose, as you need.
LibGdx Viewports
A viewport takes care for different screen sizes with the help from different techniques (e.g. scaling, black bars)
Additionally a viewport is SUPER easy to implement.
You'll do the following(e.g. FitViewport(stretches content, if necessary)):
stage = new Stage();
OrthographicCamera cam = new OrthographicCamera();
cam.setToOrtho(false, 800, 600);
stage.setViewport(new FitViewport(800, 600, cam));
TADA. You implemented a viewport. Was not so hard.
(but make sure to call stage.getViewport().update(w, h) in the resize(w, h) method!! AND DON'T FORGET IT!!)
Second suggestion I'd do is:
Use a main table.
So you do following
Table myMothershipTable = new Table();
myMothershipTable.setFillParent(true);
myMothershipTable.add(add);
myMothershipTable.add(all);
myMothershipTable.add(content);
stage.addActor(myMothershipTable);
Now you've only one actor, which is the table, and you can be damned sure, that this table will fill the whole screen.
Your screen is 10999x3? yeah. the table will be 10999x3.
Good. If you've refactored your whole stuff into one table I'd suggest the next step:
stage.setDebugAll(true); //this will help you to see the actual buildup from your actors & elements
So heres the why:
The viewport takes care for your stage size
the single table makes sure, that your complete content will be within the screen ==> now you can add one item after another, and make sure with..
stage.setDebugAll(true).. that your content is placed properly.
If you follow this simple steps, you'll save yourself a lot of time and headache with designing the UI.
I'm trying to use Skins with TextButtons. However I'm having an issue where the TextureRegions of the Skin are NOT being scaled down to the tablesize.
This is leading to an issue like in this image:
As you can see that is the e from the word Hello. I managed to scale that down to a more reasonable size (still wrong). However the Button textures are still way too large.
Any ideas? Because I am pulling my hair out. I am using a custom viewport with a custom screenspace width and height. Here is the create method for the menu.
public void create(){
menuStage = new Stage();
camera = new OrthographicCamera();
viewPort = new StretchViewport(SCREEN_SPACE_WIDTH, SCREEN_SPACE_HEIGHT, camera);
viewPort.setWorldSize(SCREEN_SPACE_WIDTH, SCREEN_SPACE_HEIGHT);
menuStage.setViewport(viewPort);
devTexture = new Sprite (new Texture(Gdx.files.internal("data/16by9.png"), true));
Image newActor = new Image(devTexture.getTexture());
newActor.setSize(
viewPort.getWorldWidth(),
viewPort.getWorldHeight()
);
menuStage.addActor(newActor);
skin = new Skin(Gdx.files.internal("data/uiskin.json"));
menuTable = new Table();
skin.getFont("default-font").setScale(0.08f);
menuTable.debugAll();
menuTable.setFillParent(true);
TextButton a,b,c;
a = new TextButton("hello", skin);
b = new TextButton("hello", skin);
c = new TextButton("hello", skin);
a.getStyle().up.setMinWidth(2.0f);
b.getStyle().up.setMinHeight(2.0f);
b.getStyle().up.setMinWidth(2.0f);
c.getStyle().up.setMinHeight(2.0f);
c.getStyle().up.setMinWidth(2.0f);
menuTable.row();
menuTable.add(a).size(2.0f, 1.0f);
menuTable.add(b).size(2.0f, 1.0f);
menuTable.add(c).size(2.0f, 1.0f);
menuStage.addActor(menuTable);
camera.translate(
newActor.getWidth() / 2,
newActor.getHeight() / 2
);
}
As you can see in my code below, I create a camera using the width and height of the device target. Then I create stage with the size of the camera viewport and add a Window to it (everything works fine till here in any device).
However, when add a TextButton to the Windows is not re-sized accordingly to the Stage size.
So, how can I re-size a TextButton to looks good in any device?
#Override
public void create() {
.
.
.
// Define camera our view port in meters because of Box2D
camera = new OrthographicCamera(20,
20 * (Gdx.graphics.getHeight() / (float) Gdx.graphics.getWidth()));
// create stage with the size of the viewport
stage = new Stage(new StretchViewport(camera.viewportWidth,camera.viewportHeight));
// create restart button
atlas = new TextureAtlas("data/ui/atlas.pack");
skin = new Skin(Gdx.files.internal("data/ui/menu_skin.json"), atlas);
TextButton restartButton = Util.createTextButton("Restart", skin, "red",
new ClickListener() {
#Override
public void clicked(InputEvent event, float x, float y) {
timer=timeMax;
}
});
// create a window and add the restart to it
skin.add("texture", new Texture("data/texture.png"));
WindowStyle windowStyle = new WindowStyle(new BitmapFont(), Color.WHITE, skin.newDrawable("texture"));
windowTryAgain = new Window("", windowStyle);
windowTryAgain.setMovable(false);
//windowTryAgain.padTop(20);
//stage.addActor(window);
windowTryAgain.setPosition(0, 0);
windowTryAgain.setSize(2,2);
windowTryAgain.row().fill().expandX();
windowTryAgain.add(restartButton).fill(0f, 0f);
windowTryAgain.center();
windowTryAgain.setVisible(false);
stage.addActor(windowTryAgain);
.
.
.
}
public class Util {
public static TextButton createTextButton(String text, Skin skin,
String styleName, EventListener listener) {
TextButton textButton = new TextButton(text, skin, styleName);
textButton.pad(10);
//Set height does not work in my case
//textButton.setHeight(0.1f);
textButton.addListener(listener);
return textButton;
}
}
You can make a secondary camera and attach it to your stage. To scale the table just scale the viewport size of the secondary camera
An example would be:
//Heres where you set the scale of your buttons and your table
Camera secondaryCamera = new Camera(Gdx.graphics.getWidth() * scale,
Gdx.graphics.getHeight() * scale);
Stage stage = new Stage();
Table table = new Table();
ImageButton button = new ImageButton(drawableUp, drawableDown, drawableChecked);
table.setFillParent(true);
stage.getViewport().setCamera(secondaryCamera);
table.add(ImageButton);
stage.addActor(table);
This works great when your using it for touch controls. You can use a table for the entire UI and scale it to your liking independent of your other game items;