I'm writing a new program in LibGDX handling Backgroundtextures and have just begun to implement the screens. But when I test it, it just shows me a black cleared screen with the given resolution.
I call the screen with the setScreen(screen)- Method in an implemented Game class.
So here is the code:
public class MenuScreen implements Screen{
Table table;
Stage stage;
TextButton button;
TextField textField;
Texture texture;
Pic2Box2d game;
public MenuScreen(Pic2Box2d gameH)
{
this.game = gameH;
stage = new Stage(0, 0, true);
table = new Table();
}
public void create()
{
final TextFieldStyle fieldStyle = new TextFieldStyle(new BitmapFont(), Color.WHITE, new BitmapFont(), Color.GRAY, null, null, null);
textField = new TextField("path", fieldStyle);
final TextButtonStyle buttonStyle = new TextButtonStyle();
buttonStyle.font = new BitmapFont();
buttonStyle.fontColor = Color.WHITE;
buttonStyle.pressedOffsetY = 1f;
buttonStyle.downFontColor = new Color(0.8f, 0.8f, 0.8f, 1f);
button = new TextButton("Übernehmen", buttonStyle);
button.setClickListener(new ClickListener() {
#Override
public void click(Actor actor, float x, float y) {
if(textField.getText() != "" && textField.getText() != "path")
{
texture = new Texture(textField.getText());
game.setScreen(new Workscreen(texture));
}
}
});
table.row();
table.add(textField);
table.add(button);
stage.addActor(table);
}
#Override
public void render(float delta) {
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
Gdx.gl.glClearColor(0, 0, 0, 1);
stage.act(Gdx.graphics.getDeltaTime());
stage.draw();
}
}
#idaNakav is correct about using show() and setting the Stage dimensions. However, that will still give you a black screen because your table doesn't have any size. Try changing your show() code to include table.setFillParent(true).
It should look something like this (code based on the example that you provided).
#Override
public void show() {
final TextFieldStyle fieldStyle = new TextFieldStyle(new BitmapFont(), Color.WHITE, null, null, null);
textField = new TextField("path", fieldStyle);
final TextButtonStyle buttonStyle = new TextButtonStyle();
buttonStyle.font = new BitmapFont();
buttonStyle.fontColor = Color.WHITE;
buttonStyle.pressedOffsetY = 1f;
buttonStyle.downFontColor = new Color(0.8f, 0.8f, 0.8f, 1f);
button = new TextButton("Übernehmen", buttonStyle);
button.addListener(new ClickListener() {
#Override
public void clicked(InputEvent event, float x, float y) {
if (textField.getText() != "" && textField.getText() != "path") {
texture = new Texture(textField.getText());
game.setScreen(new Workscreen(texture));
}
}
});
table.row();
table.add(textField);
table.add(button);
// Make the table fill the stage.
table.setFillParent(true);
stage.addActor(table);
}
When screen is becoming the current screen show method is called (not create like in your case), try changing your create method to show
also you are init the stage wrong , you should send it width and height , you sent 0,0
try something like
stage = new Stage(Gdx.graphics.getWidth(),Gdx.graphics.getHeight(),false);
Related
I am trying to pause a progress bar. How would I go about it? I have a listener on a Pause button where I could do the pause but I cannot stop the animation.
Here is the code that currently runs the progress bar.
Pixmap pixmap = new Pixmap(100, 50, Pixmap.Format.RGBA8888);
pixmap.setColor(Color.CYAN);
pixmap.fill();
TextureRegionDrawable drawable = new TextureRegionDrawable(new TextureRegion(new Texture(pixmap)));
pixmap.dispose();
ProgressBar.ProgressBarStyle progressBarStyle = new ProgressBar.ProgressBarStyle();
progressBarStyle.background = drawable;
pixmap = new Pixmap(0, 50, Pixmap.Format.RGBA8888);
pixmap.setColor(Color.RED);
pixmap.fill();
drawable = new TextureRegionDrawable(new TextureRegion(new Texture(pixmap)));
pixmap.dispose();
progressBarStyle.knob = drawable;
pixmap = new Pixmap(100, 50, Pixmap.Format.RGBA8888);
pixmap.setColor(Color.RED);
pixmap.fill();
drawable = new TextureRegionDrawable(new TextureRegion(new Texture(pixmap)));
pixmap.dispose();
progressBarStyle.knobBefore = drawable;
ProgressBar bar = new ProgressBar(0.0f, 1.0f, 0.01f, false, progressBarStyle);
bar.setBounds(100, 1600, 875, 50);
bar.setAnimateDuration(25)
bar.setValue(1f);
stage.addActor(bar);
One option is to bypass the animation completely, update the progress bar from your render callback (by default libgdx combines these callbacks into one), and rely on the pause + resume callbacks at the application-level. Here's an example based on your initial code. Note the bar has no animation and a max value of 25, just to make the progress updates a bit more intuitive.
public class ProgressBarTest implements ApplicationListener {
boolean active;
SpriteBatch batch;
Stage stage;
int width = 380;
int height = 180;
ProgressBar bar;
#Override
public void create () {
active = true;
batch = new SpriteBatch();
stage = new Stage(new FitViewport(width, height));
Pixmap pixmap = new Pixmap(100, 50, Pixmap.Format.RGBA8888);
pixmap.setColor(Color.CYAN);
pixmap.fill();
TextureRegionDrawable drawable = new TextureRegionDrawable(new TextureRegion(new Texture(pixmap)));
pixmap.dispose();
ProgressBar.ProgressBarStyle progressBarStyle = new ProgressBar.ProgressBarStyle();
progressBarStyle.background = drawable;
pixmap = new Pixmap(0, 50, Pixmap.Format.RGBA8888);
pixmap.setColor(Color.RED);
pixmap.fill();
drawable = new TextureRegionDrawable(new TextureRegion(new Texture(pixmap)));
pixmap.dispose();
progressBarStyle.knob = drawable;
pixmap = new Pixmap(100, 50, Pixmap.Format.RGBA8888);
pixmap.setColor(Color.RED);
pixmap.fill();
drawable = new TextureRegionDrawable(new TextureRegion(new Texture(pixmap)));
pixmap.dispose();
progressBarStyle.knobBefore = drawable;
bar = new ProgressBar(0f, 25f, 0.01f, false, progressBarStyle);
bar.setBounds(100, 1600, 875, 50);
stage.setRoot(new Table() {
{
add(bar);
setFillParent(true);
setSize(width, height);
}
});
}
#Override
public void resize(int x, int y) {
}
#Override
public void render () {
if (active && bar.getValue() < bar.getMaxValue()){
bar.setValue(bar.getValue() + Gdx.graphics.getDeltaTime());
if (bar.getValue() >= bar.getMaxValue()){
System.out.println("Filled up!");
}
}
stage.act();
ScreenUtils.clear(0, 0, 0, 1);
batch.begin();
stage.draw();
batch.end();
}
#Override
public void pause() {
System.out.println("Paused!");
active = false;
}
#Override
public void resume() {
System.out.println("Resumed!");
active = true;
}
#Override
public void dispose () {
batch.dispose();
stage.dispose();
}
}
Maybe something like this works for your use case?
EDIT: Also, if you want to keep the animation, you can probably get away with conditionally calling stage.act() when active is true.
I have a problem with size of ImageButton(s), buttons are not strectched/scaled because screen size of device its 1920x1080 and button picture is 342x129. (it is viewed smaller than original picture seems).
When I draw it through this game.batch.draw(playBtn, ...);
It works fine, but I need ImageButtons. What is wrong ?
Note: WIDTH = 480, HEIGHT = 800
picture: https://imgur.com/IJs4uPB
public MenuScreen(PlumberGame game) {
this.game = game;
camera = new OrthographicCamera();
viewport = new FitViewport(WIDTH,HEIGHT, camera);
stage =new Stage(viewport, spriteBatch);
background = new Texture("background.png");
title = new Texture("title.png");
camera.setToOrtho(false, WIDTH, HEIGHT);
}
#Override
public void show() {
stage = new Stage(); //Set up a stage for the ui
Gdx.input.setInputProcessor(stage); //Start taking input from the ui
atlas = new TextureAtlas("ui/buttons.pack");
skin = new Skin(atlas);
table = new Table(skin);
table.setBounds(0,0, WIDTH, HEIGHT);
ImageButton.ImageButtonStyle playBtnStyle = new ImageButton.ImageButtonStyle();
playBtnStyle.up = skin.getDrawable("playBtn");
playBtnStyle.down = skin.getDrawable("playBtnOn");
playBtn = new ImageButton(playBtnStyle);
playBtn.setSize(playBtn.getWidth(), playBtn.getHeight());
playBtn.getImage().setScaling(Scaling.fit);
playBtn.invalidateHierarchy();
playBtn.setPosition((float)(WIDTH * 0.15 ), (float) (HEIGHT * 0.5));
stage.addActor(playBtn);
}
#Override
public void render(float delta) {
stage.getBatch().setProjectionMatrix(camera.combined);
renderer.setProjectionMatrix(stage.getBatch().getProjectionMatrix());
renderer.setTransformMatrix(stage.getBatch().getTransformMatrix());
renderer.translate(WIDTH, HEIGHT, 0);
stage.act(Gdx.graphics.getDeltaTime()); //Perform ui logic
stage.getBatch().begin();
stage.getBatch().draw(background, 0, 0, WIDTH,HEIGHT);
stage.getBatch().draw(title, (float)(WIDTH * 0.12), (float) (HEIGHT * 0.75));
stage.getBatch().end();
stage.draw(); //Draw the ui
}
#Override
public void resize(int width, int height) {
stage.getViewport().update(width, height, true);
table.invalidateHierarchy();
table.setSize(width, height);
camera.update();
}
You are setting playBtn size wrong way.
This line doesn't make sense:
playBtn.setSize(playBtn.getWidth(), playBtn.getHeight());
I would recommend using Table which is really convinient when designing UIs. You specify the size of the actor when adding it to the table.
I can't try it out now since I'm not at home but it would look something like:
#Override
public void show() {
stage = new Stage(); //Set up a stage for the ui
Gdx.input.setInputProcessor(stage); //Start taking input from the ui
atlas = new TextureAtlas("ui/buttons.pack");
skin = new Skin(atlas);
table = new Table(skin);
table.setBounds(0,0, WIDTH, HEIGHT);
ImageButton.ImageButtonStyle playBtnStyle = new ImageButton.ImageButtonStyle();
playBtnStyle.up = skin.getDrawable("playBtn");
playBtnStyle.down = skin.getDrawable("playBtnOn");
playBtn = new ImageButton(playBtnStyle);
playBtn.setPosition((float)(WIDTH * 0.15 ), (float) (HEIGHT * 0.5));
Table table = new Table();
table.setFillParent(true);
table.add(playBtn).expand().fillX().height(yourHeight);
stage.addActor(table);
}
EDIT:
Another alternative is to set min size of the drawables you put in the image button style:
ImageButton.ImageButtonStyle playBtnStyle = new ImageButton.ImageButtonStyle();
playBtnStyle.up = skin.getDrawable("playBtn");
playBtnStyle.down = skin.getDrawable("playBtnOn");
playBtnStyle.up.setMinWidth(yourWidth);
playBtnStyle.up.setMinHeight(yourHeight);
playBtnStyle.down.setMinWidth(yourWidth);
playBtnStyle.down.setMinHeight(yourHeight);
I create the menu button in the table.
I did not point anywhere in the border the table but it is displayed.
I ran in the emulator or in desktop mode border appears
maybe I create the wrong table?
#Override
public void show() {
table.setBounds(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
//Button PLAY
//скин кнопки плай
btnplayStyle = new ImageButton.ImageButtonStyle();
btnplayStyle.up = buttonsSkin.getDrawable("play");//кнопка не нажата
btnplayStyle.over = buttonsSkin.getDrawable("play");
btnplayStyle.down = buttonsSkin.getDrawable("play"); // кнопка нажата
playSkin = new ImageButton(btnplayStyle);
playSkin.setSize(300, 200);
stage.addActor(playSkin);
playSkin.addListener(new ClickListener() {
#Override
public void clicked(InputEvent event, float x, float y) {
game.setScreen(new GameScreen(game));
}
});
//Button score
btnscoreStyle = new ImageButton.ImageButtonStyle();
btnscoreStyle.up = buttonsSkin.getDrawable("records");//кнопка не нажата
btnscoreStyle.over = buttonsSkin.getDrawable("records");
btnscoreStyle.down = buttonsSkin.getDrawable("records"); // кнопка нажата
scorebutton = new ImageButton(btnscoreStyle);
scorebutton.setSize(300, 200);
stage.addActor(scorebutton);
scorebutton.addListener(new ClickListener() {
#Override
public void clicked(InputEvent event, float x, float y) {
game.setScreen(new Score(game) {
});
}
});
//Button EXIT
btnexitStyle = new ImageButton.ImageButtonStyle();
btnexitStyle.up = buttonsSkin.getDrawable("exit");//кнопка не нажата
btnexitStyle.over = buttonsSkin.getDrawable("exit");
btnexitStyle.down = buttonsSkin.getDrawable("exit"); // кнопка нажата
exxitbutton = new ImageButton(btnexitStyle);
exxitbutton.setSize(300, 200);
stage.addActor(exxitbutton);
exxitbutton.addListener(new ClickListener() {
#Override
public void clicked(InputEvent event, float x, float y) {
Gdx.app.exit();
}
});
// table.add(heading);
table.add(playSkin).width(400).height(100);
table.getCell(playSkin).spaceBottom(30);
table.row();
table.add(scorebutton).width(400).height(100);
table.getCell(scorebutton).spaceBottom(30);
table.row();
table.add(exxitbutton).width(400).height(100);
table.getCell(exxitbutton).spaceBottom(30);
table.row();
table.debug();
stage.addActor(table);
}
After the start button will work properly, in the middle, but the border on each side as well created en understand because of what
The problem is that at the very end of your code you have :
table.debug();
Which according to the LibGDX Scene2d.ui documentation
(https://github.com/libgdx/libgdx/wiki/Scene2d.ui)
"enables debug lines for tables"
So, simply just remove that line of code and it should work!
I am having issues with libgdx sound inside a ClickListener for my button.
I am getting the error Syntax error on token "PlayButtonSound", Identifier expected after this token
SoundManager:
import utils.Constants;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.audio.Music;
import com.badlogic.gdx.audio.Sound;
public class SoundManager {
private static Sound buttonSound = Gdx.audio.newSound(Constants.buttonSound);
private static Music song = Gdx.audio.newMusic(Constants.song);
public static void PlayMusic() {
song.setLooping(true);
song.setVolume(0.2f);
song.play();
}
public static void PlayButtonSound() {
buttonSound.play();
}
public void DestryoAudio() {
buttonSound.dispose();
song.dispose();
}
}
And MainMenu:
public class MainMenu implements Screen {
private Stage stage;
private Sprite sprite;
private TextureRegion menuBackgroundImg;
private TextureAtlas menuButton;
private Skin skin;
private BitmapFont font;
private Table table;
private TextButton playButton;
#Override
public void show() {
// Set stage
stage = new Stage();
Gdx.input.setInputProcessor(stage);
SoundManager.PlayMusic();
// Set menu baggrund
menuBackgroundImg = new TextureRegion(new Texture(Gdx.files.internal(Constants.menuBackgroundImg)));
sprite = new Sprite(menuBackgroundImg);
sprite.setSize(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
// Set menuknapper
menuButton = new TextureAtlas(Constants.menuButton);
skin = new Skin(menuButton);
// Set font
font = new BitmapFont(Constants.font, false);
// Set table
table = new Table(skin);
table.setBounds(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
// Create button styling
TextButtonStyle textButtonStyle = new TextButtonStyle();
textButtonStyle.up = skin.getDrawable("menuButtonUp");
textButtonStyle.down = skin.getDrawable("menuButtonPressed");
textButtonStyle.pressedOffsetX = 1;
textButtonStyle.pressedOffsetY = -1;
textButtonStyle.font = font;
textButtonStyle.fontColor = Color.BLACK;
// Create buttons
playButton = new TextButton(Constants.play, textButtonStyle);
playButton.addListener(new InputListener() {
SoundManager.PlayButtonSound(); // This is the error
});
// Button padding
playButton.pad(20, 100, 20, 100);
// Setting the table
table.add(playButton).row();
// Setting stage actor
stage.addActor(table);
}
#Override
public void render(float delta) {
Gdx.gl.glClearColor(0, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
// Tegn baggrund
stage.getBatch().begin();
sprite.draw(stage.getBatch());
stage.getBatch().end();
// Tegn resten
stage.act(delta);
stage.draw();
}
...
#Override
public void dispose() {
stage.dispose();
menuButton.dispose();
skin.dispose();
font.dispose();
}
}
I can't really grasp what I am doing wrong and a search for the error gives vague answers that dosen't really solves my issue.
P.S. I have imported SoundManager but left it out due to length of the code snippet.
You need to implement one of the InputListener interface methods, most likely touchDown(InputEvent event, float x, float y, int pointer, int button).
Check out the API for InputListener. It lists all the methods and gives a pretty good example.
playButton.addListener(new InputListener() {
public boolean touchDown (InputEvent event, float x, float y, int pointer, int button) {
SoundManager.PlayButtonSound();
return false;
}
});
I've got a GameScreen where I have 100 "dots" randomly bounce around the screen. I'm currently adding a UI button in order to rotate the screen; one on the left and one on the right. The button works, however, the button is "linked" to the camera because as the screen rotates (the playing field for the dots spins because the camera rotates), the button rotates with it. I want the button(s) to be fixed to the device screen, and not rotate with the underlying field of dots.
Do I have to unproject the button somehow, or create a separate stage for any UI elements (buttons, statusbar title alone the top, etc)? Many thanks.
Here's my code:
public class GameScreen implements Screen {
final jGdxDots game;
final MyGestureListener myGestureListener;
OrthographicCamera camera;
private Skin skin;
final int NUMBER_OF_DOTS = 100;
int dotTotal;
private Stage stage;
FPSLogger fpsLogger;
float cameraRotate = 0f;
public GameScreen(final jGdxDots gam) {
this.game = gam;
fpsLogger = new FPSLogger();
camera = new OrthographicCamera();
camera.setToOrtho(false, 800, 480); //boolean = YDOWN or YUP axis.
//create stage
stage = new Stage(Gdx.graphics.getWidth(),Gdx.graphics.getHeight(),true);
//set stage to handle the inputs
//Gdx.input.setInputProcessor(stage);
stage.setCamera(camera);
//stage.setViewport(800, 480, true);
//multiplex the gesture listeners (both for stage and my listener)
myGestureListener = new MyGestureListener();
GestureDetector gd = new GestureDetector(myGestureListener);
InputMultiplexer im = new InputMultiplexer(gd, stage); // Order matters here!
Gdx.input.setInputProcessor(im);
//UI button
skin = new Skin(Gdx.files.internal("data/uiskin.json"));
final TextButton button = new TextButton("Rotate", skin, "default");
button.setWidth(100f); //200f
button.setHeight(100f); //20f
button.setPosition(10f, 10f);
button.addListener(new ClickListener(){
#Override
public boolean touchDown(InputEvent event, float x, float y,
int pointer, int button) {
// TODO Auto-generated method stub
cameraRotate = 1f;
return super.touchDown(event, x, y, pointer, button);
}
#Override
public void touchUp(InputEvent event, float x, float y,
int pointer, int button) {
// TODO Auto-generated method stub
super.touchUp(event, x, y, pointer, button);
cameraRotate = 0f;
}
});
stage.addActor(button);
spawnDots(stage);
}
private void spawnDots(Stage theStage) {
//Rectangle raindrop = new Rectangle();
for (int i=0; i < NUMBER_OF_DOTS; i++) {
DotActor dot = new DotActor();
dot.setOrigin(8,8); //(dot.getWidth()/2, dot.getHeight()/2);
dot.vector.set(MathUtils.random(1,4), MathUtils.random(1,4));
dot.actorX = MathUtils.random(0, 800 - dot.getWidth());
dot.actorY = MathUtils.random(0, 480 - dot.getHeight());
stage.addActor(dot);
}
dotTotal = NUMBER_OF_DOTS;
}
#Override
public void dispose() {
stage.dispose();
}
#Override
public void render(float delta) {
//clear screen
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
//logger
fpsLogger.log();
//camera.zoom += 0.005f;
camera.rotate(cameraRotate); //(1.0f);
camera.update();
//run act() method of each actor
stage.act(Gdx.graphics.getDeltaTime());
//run each actor's draw() method who are members of this stage
stage.draw();
}
}
I had this problem too. Create a separate stage, or you might just want to draw directly with a sprite batch in a 'renderer' class
Mine looks something like this:
public OverlayRenderer()
{
this.spriteBatch = new SpriteBatch();
this.loadTextures();
}
public void render(String _message)
{
this.spriteBatch.begin();
this.spriteBatch.draw(TEXTURES.UI, 0, 0);
....
}
and directly after your
stage.draw();
line, I would add
overLayRenderer.render();