I am trying to add to my game a less sliding menu(left and right) at the bottom of the screen.
My problem is that I can not adjust the table at the bottom of the screen, this is my code:
private void initUI() {
// inizializzazione dello stage
stage = new Stage(new ExtendViewport(Gdx.graphics.getWidth(),Gdx.graphics.getHeight()/4));
Skin skin = new Skin(Gdx.files.internal("ui/uiskin.json"));
Gdx.input.setInputProcessor(stage);
// inizializzazione della tabella
container = new Table();
container.setFillParent(true);
stage.addActor(container);
Table table = new Table();
table.debug();
final ScrollPane scroll = new ScrollPane(table, skin);
scroll.setFillParent(true);
InputListener stopTouchDown = new InputListener() {
public boolean touchDown (InputEvent event, float x, float y, int pointer, int button) {
event.stop();
return false;
}
};
table.pad(20).defaults().expandY().space(5);
for (int i = 0; i < 15; i++) {
table.row();
TextButton button = new TextButton(i + "dos", skin);
table.add(button);
button.addListener(new ClickListener() {
public void clicked (InputEvent event, float x, float y) {
System.out.println("click " + x + ", " + y);
}
});
}
container.add(scroll).expandY().fill().colspan(1);
container.row().space(10).padBottom(10);
}
render(){
Gdx.gl.glViewport(0, 0, Gdx.graphics.getWidth(),Gdx.graphics.getHeight()/4);
Gdx.input.setInputProcessor(stage);
stage.draw();
stage.act(Gdx.graphics.getDeltaTime());
Gdx.gl.glViewport(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
}
In this way I can split the screen into 2 parts (top and bottom), but the input is not correct: to activate the first button I have to press the top of the screen but the buttom is "designed" at the bottom.
How i can create a table with a scrollpane in the bottom of the screen?
There seems some misunderstanding of the viewport, table and how to use them:
Use one Viewport for your rendering your total screen. Split the screen up by using a Table. Hence change the first line in initUI to
stage = new Stage(new ExtendViewport(Gdx.graphics.getWidth(),Gdx.graphics.getHeight())); (remove the /4)
and adjust your render method to something like:
#Override
public void render(float delta) {
Gdx.gl.glClearColor(0, 0, 0, 0);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT | GL20.
stage.act(delta);
stage.draw();
}
Clear your color buffer, to make sure that animations, or button-press operations are drawed correctly. Do not set stage as InputProcessor every frame call. Once this is done in initUI it is ok.
To the size of the Table: I assume that the table does not match the containing elements. Hence everytime you add a button with table.add(button) add the information about its height and width with table.add(button).height(...).width(...). Then the Table and the corresponding Scroll pane is adjusted right.
Currently I only see that container contains the scroll object that fills its parent that fills the whole screen. So make sure to add a further table to the container after you add the scroll to the container after container.row().space(10).padBottom(10);. This table will be drawn below the scroll pane.
THANK YOU, i have done, this is my new code:
// inizializzazione dello stage
stage = new Stage(new ExtendViewport(Constants.VIEWPORT_GUI_WIDTH,Constants.VIEWPORT_GUI_HEIGHT/4));
Skin skin = new Skin(Gdx.files.internal("ui/uiskin.json"));
Gdx.input.setInputProcessor(stage);
// inizializzazione della tabella
container = new Table();
container.setFillParent(true);
container.bottom();
stage.addActor(container);
Table table = new Table();
table.debug();
table.bottom();
final ScrollPane scroll = new ScrollPane(table, skin);
//scroll.setFillParent(true);
scroll.setupFadeScrollBars(0f, 0f);
InputListener stopTouchDown = new InputListener() {
public boolean touchDown (InputEvent event, float x, float y, int pointer, int button) {
event.stop();
return false;
}
};
table.pad(20).defaults().space(5);
for (int i = 0; i < 15; i++) {
TextButton button = new TextButton(i + "dos", skin);
table.add(button).height(scroll.getHeight()).width(Constants.VIEWPORT_GUI_WIDTH/8);
button.addListener(new ClickListener() {
public void clicked (InputEvent event, float x, float y) {
System.out.println("click " + x + ", " + y);
}
});
}
container.bottom();
container.add(scroll).height(Gdx.graphics.getHeight()/3);//.expandY().fill().colspan(1);
container.row().space(10).padBottom(10);
Related
Trying to place two buttons in a table row.
Right-most button appears slightly offscreen.
Adding to table with .add(btn).right() but seems not to have any effect.
Documentation says something about removing the Align.left and vise-versa but I'm not sure what they're saying.
Working from mobile.
Took pic, uploaded to ImageBucket but can't see whole thing so took two more (top + bottom of screen) just in case.
Top of screen:
https://i1161.photobucket.com/albums/q501/StudioGilliam/Screenshot_20190430-224041_TextBasedRPG.jpg
As you can see, the labels display fine.
Bottom of screen:
https://i1161.photobucket.com/albums/q501/StudioGilliam/Screenshot_20190430-224024_TextBasedRPG.jpg
The offending code:
public class TextBasedRPG implements ApplicationListener
{
private Stage stage;
private TextButton btnNext;
private TextButton btnItems;
private Label lblPlayer1;
private Label lblEnemy1;
private Label lblInfo;
#Override
public void create()
{
stage = new Stage(new ScreenViewport());
Gdx.input.setInputProcessor(stage);
// UI STUFF
// Labels
Label.LabelStyle styleL = new Label.LabelStyle(new BitmapFont(), Color.BLACK);
lblPlayer1 = new Label("Player data", styleL);
lblPlayer1.setFontScale(3.5f);
lblEnemy1 = new Label("Enemy data", styleL);
lblEnemy1.setFontScale(3.5f);
lblEnemy1.setAlignment(Align.right);
lblInfo = new Label("Information", styleL);
lblInfo.setFontScale(4.0f);
// Buttons
TextButton.TextButtonStyle styleTB = new TextButton.TextButtonStyle();
styleTB.font = new BitmapFont();
styleTB.up = new NinePatchDrawable(new NinePatch(new Texture(Gdx.files.internal("ButtonGreyUp.png")), 10, 10, 10, 10));
styleTB.down = new NinePatchDrawable(new NinePatch(new Texture(Gdx.files.internal("ButtonGreyDown.png")), 10, 10, 10, 10));
btnNext = new TextButton("Next Turn", styleTB);
btnNext.setTransform(true);
btnNext.setScale(6.0f);
btnNext.setTouchable(Touchable.enabled);
btnNext.align(Align.right);
btnItems = new TextButton("Play", styleTB);
btnItems.setTransform(true);
btnItems.setScale(6.0f);
btnItems.setTouchable(Touchable.enabled);
// Table
Table table = new Table();
table.setBounds(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
table.setFillParent(true);
table.pad(50);
table.add(lblPlayer1).expandX().left();
table.add(lblEnemy1).expandX().right();
table.row();
table.add(lblInfo).expandY().colspan(2);
table.row();
table.add(btnItems).expandX().left();
table.add(btnNext).expandX().right();
table.debugAll();
stage.addActor(table);
}
#Override
public void render()
{
Gdx.gl.glClearColor(1, 1, 1, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
stage.act();
stage.draw();
}
#Override
public void dispose(){stage.dispose();}
#Override
public void resize(int width, int height){}
#Override
public void pause(){}
#Override
public void resume(){}
I don't recommend using setScale() since it only affects the representation of the actor and causes problems with the actual dimensions within the table.
You should use a fitting width and height for your buttons and use a font with a bigger textsize.
You could use GDX Freetype to generate your fonts with the correct size on startup.
Here is an example approach for the solution:
I use the following approach for my UI elements here as an example for a Label:
This is in my static UIHelper Class:
public static Cell addToTable(Table table, Label label, float width) {
Label.LabelStyle style = new Label.LabelStyle(skin.get("default", Label.LabelStyle.class));
float aspectRatio = style.background.getMinWidth()/style.background.getMinHeight();
float height = width / aspectRatio;
style.font = Assets.font;
style.fontColor = Assets.font.getColor();
label.setStyle(style);
label.setAlignment(Align.center);
return table.add(label).width(width).height(height);
}
Then I can just call:
float width = (float)Gdx.graphics.getWidth()*0.8f; // I want my label to be 80% of the screen width
UIHelper.addToTable(table, levelLabel, width).colspan(3).pad(20);
For my fonts, I do this:
private static BitmapFont generateFont(){
FreeTypeFontGenerator generator = new FreeTypeFontGenerator(Gdx.files.internal("skins/beemelon/passion-one-regular.ttf"));
FreeTypeFontGenerator.FreeTypeFontParameter parameter = new FreeTypeFontGenerator.FreeTypeFontParameter();
parameter.size = (int) (38 * Gdx.graphics.getDensity()); // Change the 38 to a value fit for your game
parameter.color = new Color(255f / 255f, 165f / 255f, 23f / 255f, 1f); // Divide by 255f to get a value between 0 and 1
parameter.borderWidth = parameter.size / 10f;
parameter.borderColor = Color.BLACK;
BitmapFont bitmapFont = generator.generateFont(parameter);
generator.dispose();
return bitmapFont;
}
Hope this helps or pushes you in the right direction.
I cant seem to find an answer to this. Why does my start button freeze after a certain amount of clicks(3)? It works for the first 3 clicks and then decides to stop working. I can still see that the screen is responding(the button becomes red when clicked), but the text on it doesn't change. It's like the click listener stopped responding.
public class MainMenu implements Screen{
private Game game;
private Stage stage;
private TextButton Start_btn;
private TextButton LocalWifi_btn;
private TextButton Internet_btn;
private TextButton Settings_btn;
private boolean Start_clicked = false;
private boolean LocalWifi_clicked = false;
private boolean Internet_clicked = false;
private boolean Settings_clicked = false;
public MainMenu(Game g){
game = g; //The Wasteland
stage = new Stage(new ExtendViewport(Gdx.graphics.getWidth(),
Gdx.graphics.getHeight())); //create a new stage with viewport to draw 2d stuff on
Gdx.input.setInputProcessor(stage); //all input set to stage
Skin skin = new Skin(Gdx.files.internal("gui/uiskin.json"), new TextureAtlas(Gdx.files.internal("gui/uiskin.atlas"))); //need this before you can make a gui
Start_btn = new TextButton("" + Start_clicked, skin);
Start_btn.setPosition(500, 500);
Start_btn.setSize(200, 200);
Start_btn.getLabel().setFontScale(10, 10); //change text size
Start_btn.addListener(new ClickListener(){
#Override
public void touchUp(InputEvent e, float x, float y, int point, int button){
onStartClicked();
}
});
stage.addActor(Start_btn);
}
private void onStartClicked(){
if(!Start_clicked){
Start_clicked = true;
Start_btn.setText("" + Start_clicked);
Gdx.app.log("Button", "" + Start_clicked);
}
else{
Start_clicked = false;
Start_btn.setText("" + Start_clicked);
Gdx.app.log("Button", "" + Start_clicked);
}
}
#Override
public void render(float delta) {
//this has to be before anything or else it will be drawn on top of everything else
Gdx.gl.glClearColor(0, 0, 0, 1); //set background color
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT); //clears the screen
stage.act(delta); //send ammount of time since last render call, tells it to keep a steady fps
stage.draw();
}
#Override
public void resize(int width, int height) {
// use true here to center the camera
// that's what you probably want in case of a UI
stage.getViewport().update(width, height, true);
}
}
What am I doing wrong?!?!?!
Don't override touchUp() without calling super.touchUp(), because its messing up the functionality of ClickListener. But that's not what you want to override anyway. You should override clicked() so it only triggers if you release the click while still over the button. Or better yet, use a ChangeListener. Buttons already have a ClickListener built in that fires a change event when the button is clicked. Adding another ClickListener is redundant when you can just use a ChangeListener.
I'm building a paint program using JavaFX. I'm trying to draw a Rectangle using GraphicsContext and have managed to get it to draw on the canvas. However, no matter where I click, it always starts from the origin. The rectangle stops being drawn when I release the mouse (this is done correctly) but isn't drawn from when I press down on the mouse. Here is my code:
public RectController(Canvas c, Scene s, BorderPane borderPane){
this.borderPane = borderPane;
this.scene = scene;
this.graphicsContext = canvas.getGraphicsContext2D();
rectangle = new Rectangle();
rectangle.setStrokeWidth(1.0);
rectangle.setManaged(true);
rectangle.setMouseTransparent(true);
//when you first press down on the mouse
pressMouse = event -> {
// borderPane.getChildren().add(rectangle); --> REMOVED
double startX = event.getX();
double startY = event.getY();
};
releaseMouse = event -> {
borderPane.getChildren().remove(rectangle);
double width = Math.abs(event.getX() - startX);
double height = Math.abs(event.getY() - startY);
graphicsContext.strokeRect(startX, startY, width, height);
borderPane.setOnMousePressed(null);
borderPane.setOnMouseDragged(null);
borderPane.setOnMouseReleased(null);
};
dragMouse = event -> {
rectangle.setWidth(event.getX());
rectangle.setHeight(event.getY());
};
}
Any help would be much appreciated.
Is this close to what you are asking?
#FXML AnchorPane apMain;
Rectangle rectangle;
#Override
public void initialize(URL url, ResourceBundle rb) {
}
#FXML void handleOnMouseClick(MouseEvent event)
{
double x = event.getSceneX();
double y = event.getSceneY();
rectangle = new Rectangle();
rectangle.setX(x);
rectangle.setY(y);
rectangle.setWidth(25);
rectangle.setHeight(25);
apMain.getChildren().add(rectangle);
}
#FXML void handleOnMouseDrag(MouseEvent event)
{
rectangle.setWidth(event.getSceneX() - x);
rectangle.setHeight(event.getSceneY() - y);
}
#FXML void handleOnMouseRelease(MouseEvent event)
{
apMain.getChildren().remove(rectangle);
}
You will need to do work to this. It's crude.
So I have a game I am working on and once you finish playing I want to be able for the user to tap on the "Play Again" button and be able to reset at the start.
To do this I create a Rectangle over the Texture and use the contains() method.
if(cloud.contains((float)Gdx.input.getX(),(float)(Gdx.graphics.getHeight()-Gdx.input.getY()))){
reset();
}
Reset method:
public void reset(){
speed=0;
paraY = Gdx.graphics.getHeight() - para[parachuteState].getHeight();
gameState=0;
backY = 0-Gdx.graphics.getHeight();
bach=0;
Gdx.input.setCursorPosition(Gdx.graphics.getWidth()/2,Gdx.graphics.getHeight()/2);
}
So what is happening is the program recognizes the button being pressed and resets but when the game is over again it automatically resets without displaying the end screen. I think that the cursor is not being moved to the center and is instead remaining on top of the button. Am I incorrectly using the setCursorPosition() method or is there another way to do this?
The button would be just right. It might looks more complex, but it's recommended way to do what you want to do.
So, to create a button you should do something like this:
Skin skin = new Skin();
skin.addRegions(uiTextureAtlas);
TextButton.TextButtonStyle buttonStyle = new TextButton.TextButtonStyle();
buttonStyle.up = skin.getDrawable("textureName");
buttonStyle.font = font;
Button button = new Button(buttonStyle);
button.addListener(new InputListener() {
#Override
public boolean touchDown(InputEvent event, float x, float y, int pointer, int button) {
reset();
return true;
}
});
button.setSize(100, 100);
button.setPosition(300, 400);
then in your Screen class you create
Stage stage = new Stage();
stage.addActor(button);
Gdx.input.setInputProcessor(stage);
public void render(float delta) {
Gdx.gl.glClearColor(0, 0, 0.2f, 1);
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
stage.act(delta);
batch.setProjectionMatrix(camera.combined);
batch.begin();
if (lifeCount > 0) {
/*
When stage.draw is called here, it only displays the exit button.
The game still operates, but everything is invisible.
If I leave the game on, the game over screen is shown,
*/
stage.draw();
text.setColor(1.0f, 1.0f, 1.0f, 1.0f);
text.draw(batch, score + scoreCount, 25, 100);
text.draw(batch, lives + lifeCount, 25, 120);
text.draw(batch, speed + raindropSpeed, 25, 80);
batch.draw(bucketTexture, bucket.x, bucket.y);
for (Rectangle clearDrop : clearDrops) {
batch.draw(clearDropTexture, clearDrop.x, clearDrop.y);
}
for (Rectangle healthDrop : healthDrops) {
batch.draw(healthDropTexture, healthDrop.x, healthDrop.y);
/*
If I place stage.draw here, health drops are invisible.
This also happens if I place it in the raindrop for-loop and the
cleardrop for-loop
*/
}
for (Rectangle raindrop : raindrops) {
batch.draw(raindropTexture, raindrop.x, raindrop.y);
}
/*
If I place stage.draw here, the bucket, score, life, and speed
display correctly. The drops are still invisible.
*/
} else {
pause();
raindrops.clear();
game.setScreen(new GameOver(game));
}
batch.end();
What I have been trying to do is have an exit button in the top right corner of the GameScreen, although drawing the stage which the button resides in gives me difficulties (see comments in code).
Here is my code for the exit button and stage (resize()):
if (stage == null)
stage = new Stage(width, height, true);
stage.clear();
Gdx.input.setInputProcessor(stage);
TextButtonStyle styleQuit = new TextButtonStyle();
styleQuit.up = skin.getDrawable("buttonnormal");
styleQuit.down = skin.getDrawable("buttonpressed");
styleQuit.font = text;
quitButton = new TextButton(" ", styleQuit);
quitButton.setWidth(128);
quitButton.setHeight(128);
quitButton.setX(800 - 128);
quitButton.setY(480 - 100);
quitButton.addListener(new InputListener() {
public boolean touchDown(InputEvent event, float x, float y,
int pointer, int button) {
return true;
}
public void touchUp(InputEvent event, float x, float y,
int pointer, int button) {
Gdx.app.log(RainCatcher.LOG, "Quit Button Pressed");
game.setScreen(new MainMenu(game));
}
});
stage.addActor(quitButton);
And the rest (in show())
atlas = new TextureAtlas("gamebuttons.pack");
skin = new Skin();
skin.addRegions(atlas);
text = new BitmapFont();
Is there any special trick to allow a stage to be rendered alongside with the falling raindrops, bucket, and text? My friends and I have been stumped and couldn't find a solution anywhere.
Move stage.draw() after batch.end() or before batch.begin()
This is not the right approach you're taking in my opinion. If you're using a stage in libgdx, then you should benefit from other components of Scene2d. So, rather than drawing your raindrops and other game entities separately (and making your job complicated), you should make them actors and add them to stage wherever you need and then draw the stage in the render.
For example:
public class RaindDrop extends Actor {
TextureRegion region;
public RaindDrop () {
region = new TextureRegion(...);
}
public void draw (SpriteBatch batch, float parentAlpha) {
Color color = getColor();
batch.setColor(color.r, color.g, color.b, color.a * parentAlpha);
batch.draw(...);
}
}
So on for other entities. Initialise and add them to your stage.
Here's the official wiki to read more:
https://code.google.com/p/libgdx/wiki/scene2d