I have added buttons to my code, but when I go to "resize", they get bigger or wider and it looks very bad. How can I resize the window and keep the button aspect ratio?
This is my code:
1)Main:
`package com.mygdx.game;
import com.badlogic.gdx.Game;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.mygdx.game.screen.MainMenuScreen;
public class gamename extends Game {
public static final int WIDTH = 760;
public static final int HEIGHT = 520;
public SpriteBatch batch;
#Override
public void create() {
batch = new SpriteBatch();
this.setScreen(new MainMenuScreen(this));
}
#Override
public void render(){
super.render();
}
}`
2)And this is the menu, here i use the image to view the buttons. MainMenu:
package com.mygdx.game.screen;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.Texture;
import com.mygdx.game.gamename;
public class MainMenuScreen implements Screen{
private static final int PLAY_BUTTON_WIDTH = 150;
private static final int PLAY_BUTTON_HEIGHT = 80;
private static final int OPTIONS_BUTTON_WIDTH = 150;
private static final int OPTIONS_BUTTON_HEIGHT = 80;
gamename game;
Texture playButtonActive;
Texture playButtonInactive;
Texture optionsButtonActive;
Texture optionsButtonInactive;
public MainMenuScreen (gamename game){
this.game = game;
playButtonActive = new Texture("play1.png");
playButtonInactive = new Texture("play2.png");
optionsButtonActive = new Texture("options1.png");
optionsButtonInactive = new Texture("options2.png");
}
#Override
public void show() {
}
#Override
public void render(float f) { //Colore e carica bottoni
Gdx.gl.glClearColor(1, 1, 1, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
game.batch.begin();
game.batch.draw(playButtonActive, 240, 150, PLAY_BUTTON_WIDTH, PLAY_BUTTON_HEIGHT);
game.batch.end();
}
#Override
public void resize(int i, int i1) {
}
#Override
public void pause() {
}
#Override
public void resume() {
}
#Override
public void hide() {
}
#Override
public void dispose() {
}
}
I would like the button to be the same even if I manually increase the page size. Some say they use viewport but I have never used it and I don't know how to do it. Can someone help me?
Related
the Menu Class
package com.gdx.game.screens;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.Texture;
import com.gdx.game.HuntersGame;
public class InfoScreen implements Screen {
HuntersGame game;
Texture background,backBefore,backAfter,textInfo;
/**
* Constructor, Links the Game instance
* #param game the Game instance provided by the GameScreen, contains the sprite batch
* which is essential for rendering
*/
public InfoScreen(HuntersGame game){
this.game = game;
//play button as image
backBefore = new Texture("backBefore.png");
backAfter = new Texture("backAfter.png");
//text
textInfo = new Texture("info.png");
//background
background = new Texture("grass-info.jpg");
}
#Override
public void show() {
}
#Override
public void render(float delta) {
Gdx.gl.glClearColor(1, 0, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
//positions of back button
int xb= backBefore.getWidth();
int yb= backBefore.getHeight();
//positions of the mouse
int x=Gdx.input.getX(),y=Gdx.input.getY();
//start batch
game.batch.begin();
game.batch.draw(background,0,0,Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
game.batch.draw(textInfo,0,-30,Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
//start script for touch and click by mouse
if(x>=0 && x<=backBefore.getWidth() && y>=0 && y<=backBefore.getHeight()){
game.batch.draw(backAfter,0,Gdx.graphics.getHeight()-backBefore.getHeight());
if(Gdx.input.isTouched()){
this.dispose();
game.setScreen(new MenuScreen(game));
}
}else{
game.batch.draw(backBefore,0,Gdx.graphics.getHeight()-backBefore.getHeight());
}
game.batch.end();
}
#Override
public void resize(int width, int height) {
}
#Override
public void pause() {
}
#Override
public void resume() {
}
#Override
public void hide() {
}
#Override
public void dispose() {
}
}
I wanted to do a test for this class I don't know how and I tried to import Mockito as every other code did but not work with me I tried for like 6 hours with no result cause I don't know how that Mockito works and search too much with no benefits and I want just an example for that class then I will try to do advanced examples
thank you in advance
PS: for the images i used you can use any image to check the code and for HunterGame class is down
package com.gdx.game;
import com.badlogic.gdx.Game;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.glutils.ShapeRenderer;
import com.gdx.game.screens.GameScreen;
import com.gdx.game.screens.MenuScreen;
public class HuntersGame extends Game {
public SpriteBatch batch;
#Override
public void create () {
batch = new SpriteBatch();
this.setScreen(new MenuScreen((this)));
}
#Override
public void dispose () {
batch.dispose();
}
}
[the info class looks like][1]
Hi I'm trying to add tiled map but all time I'm getting the same error:
"Exception in thread "LWJGL Application" com.badlogic.gdx.utils.SerializationException: Error parsing file: mar.tmx
at com.badlogic.gdx.utils.XmlReader.parse(XmlReader.java:83)
at com.badlogic.gdx.maps.tiled.TmxMapLoader.load(TmxMapLoader.java:70)
at com.badlogic.gdx.maps.tiled.TmxMapLoader.load(TmxMapLoader.java:59)"
I saw a similar post and there someone said that my map has the wrong format but I tried every format and still the same. After debugging I got map = null. Anyone have any idea why it doesn't work?
LLL-----------------------
LLL------------------------
LLL-------------------------
LLL--------------------------
LLLL---------------------------
LLL-------------------------
LLL-----------------------
package Screens;
import Scenes.Hud;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.maps.tiled.TiledMap;
import com.badlogic.gdx.maps.tiled.TmxMapLoader;
import com.badlogic.gdx.maps.tiled.renderers.OrthogonalTiledMapRenderer;
import com.badlogic.gdx.utils.viewport.FitViewport;
import com.badlogic.gdx.utils.viewport.Viewport;
import com.mygdx.game.Marioxx;
public class PlayScreen implements Screen
{
private com.mygdx.game.Marioxx game;
private OrthographicCamera gamecam;
private Viewport gamePort;
//Tiled map variables
private TmxMapLoader maploader;
public TiledMap map;
private OrthogonalTiledMapRenderer renderer;
private Hud hud;
public PlayScreen(com.mygdx.game.Marioxx game)
{
this.game = game;
gamecam = new OrthographicCamera();
gamePort = new FitViewport(Marioxx.V_WIDTH, Marioxx.V_HEIGHT, gamecam);
hud = new Hud(game.batch);
maploader = new TmxMapLoader();
map = maploader.load("mar.tmx");
renderer = new OrthogonalTiledMapRenderer(map);
gamecam.position.set(gamePort.getScreenWidth()/2, gamePort.getScreenHeight()/2, 0);
}
#Override
public void show()
{
}
#Override
public void render(float delta)
{
Gdx.gl.glClearColor(1,0,0,1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
game.batch.setProjectionMatrix(hud.stage.getCamera().combined);
hud.stage.draw();
renderer.render();
}
public void handleInput(float dt )
{
if(Gdx.input.isTouched())
{
gamecam.position.x += 100* dt;
}
}
public void update(float dt)
{
handleInput(dt);
gamecam.update();
renderer.setView(gamecam);
}
#Override
public void resize(int width, int height)
{
gamePort.update(width, height);
}
#Override
public void pause() {
}
#Override
public void resume() {
}
#Override
public void hide() {
}
#Override
public void dispose() {
map.dispose();
renderer.dispose();
}
}
According to documentation the ExtendViewportshould extend the view and keep the aspect ratio, but whenever I try Implemented this viewPort Ive got two bars in the side of the phone screen. (this is sample background image,with some text and button on it to check how stretch will be).
Code:
public class Overlap2d extends Game {
public static float ASPECT_RATIO ;
public static final int GAME_SCREEN_WIDTH = 40;
public static final int GAME_SCREEN_HEIGHT = 80;
#Override
public void create () {
ASPECT_RATIO=(float)Gdx.graphics.getWidth()/(float)Gdx.graphics.getHeight() ;
ScreenManager.getScreenManager().init(this);
ScreenManager.getScreenManager().showScreen( ScreenName.MAIN_MENU );
}}
public abstract class AbstractScreen extends Stage implements Screen {
public AbstractScreen() {
super(new ExtendViewport(GAME_SCREEN_WIDTH,GAME_SCREEN_HEIGHT,new OrthographicCamera()));
}
public abstract void buildStage();
#Override
public void render(float delta) {
Gdx.gl.glClearColor(0, 1, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
super.act(delta);
super.draw();
}
#Override
public void resize(int width, int height) {
getViewport().update(width,height);
}
#Override
public void show() {
Gdx.input.setInputProcessor(this);
}
#Override
public void resume() {}
#Override
public void pause() {}
#Override
public void hide() {}}
public class MenuScreen extends AbstractScreen{
private Texture txtrBg;
public MenuScreen() {
super();
txtrBg = new Texture( Gdx.files.internal("test.png") );
}
#Override
public void buildStage() {
getCamera().position.set(GAME_SCREEN_WIDTH / 2, GAME_SCREEN_HEIGHT / 2, 0);
Image bg = new Image(txtrBg);
bg.setSize(GAME_SCREEN_WIDTH,GAME_SCREEN_HEIGHT);
bg.setPosition(0,0);
addActor(bg);
}
#Override
public void dispose() {
super.dispose();
txtrBg.dispose();
}}
public static final int GAME_SCREEN_WIDTH = 40;
public static final int GAME_SCREEN_HEIGHT = 80;
you're using width and height ratio 1:2 but only very view device fits in this ratio so why don't you try 48 and 80 as viewport width and height.
Question is almost same so explanation can fit here also
https://stackoverflow.com/a/43398153/3445320
package com.Darth377Apps.DeepShadow;
import com.badlogic.gdx.*;
import com.badlogic.gdx.graphics.g2d.*;
import com.badlogic.gdx.scenes.scene2d.*;
import com.badlogic.gdx.scenes.scene2d.ui.*;
import com.badlogic.gdx.scenes.scene2d.ui.TextButton.TextButtonStyle;
import com.badlogic.gdx.graphics.*;
import com.badlogic.gdx.utils.viewport.*;
public class MainMenu implements Screen
{
private Stage stage;
private Table table;
private TextureAtlas atlas;
private TextButton buttonPlay, buttonExit;
private Label heading;
private BitmapFont white;
private Skin skin;
private TextButton TextButton;
#Override
public void create(){
stage = new Stage(new ScreenViewport());
Gdx.input.setInputProcessor(stage);
atlas = new TextureAtlas("ui/button.pack");
skin= new Skin(atlas);
table=new Table(skin);
table.setBounds(0,0,Gdx.graphics.getWidth(),Gdx.graphics.getHeight());
white= new BitmapFont(Gdx.files.internal("Font/white.fnt"),false);
TextButtonStyle textButtonStyle = new TextButtonStyle();
textButtonStyle.up = skin.getDrawable("button.up.9");
textButtonStyle.down = skin.getDrawable("button.down.9");
textButtonStyle.pressedOffsetX = 1;
textButtonStyle.pressedOffsetY = -1;
textButtonStyle.font = white;
textButtonStyle.fontColor = Color.BLACK;
buttonExit = new TextButton("EXIT",textButtonStyle);
buttonExit.pad(20);
table.add(buttonExit);
stage.addActor(table);
}
#Override
public void render(float p1)
{
Gdx.gl.glClearColor(0,0,0,1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
stage.act(p1);
stage.draw();
}
#Override
public void resize(int p1, int p2)
{
// TODO: Implement this method
}
#Override
public void show(){
}
#Override
public void hide()
{
}
#Override
public void pause()
{
// TODO: Implement this method
}
#Override
public void resume()
{
// TODO: Implement this method
}
#Override
public void dispose()
{
// TODO: Implement this method
}
}
When I run the app, only a white screen appears. The app definitely runs this code, as I ha e tested through logcat.
I am extremely confused as to why the text button does not appear. Any help would be greatly appreciated. Thank you.
Try to not set the bounds of the Table, but to use table.setFillParent(true) instead. Furthermore you need to implement resize(...) in the following way:
public void resize(int p1, int p2)
{
stage.getViewport().update(p1, p2, true);
}
I'm trying to display 2 different screens, changing when the user touches the screen. So far with the code below the screens change but the text just keeps overlapping and piling up. I need to dispose of EVERYTHING on the screen before switching.
One of the 2 similar pages(only the text is different on the 2)
package com.me.mygdxgame;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.scenes.scene2d.ui.Label;
public class MainMenu implements Screen {
OrthographicCamera camera;
SpriteBatch batch;
Screens game;
BitmapFont font;
public MainMenu(Screens game) {
this.game = game;
}
#Override
public void dispose() {
batch.dispose();
font.dispose();
}
#Override
public void resize(int width, int height) {
}
#Override
public void pause() {
}
#Override
public void resume() {
}
#Override
public void render(float delta) {
CharSequence str = "Main Menu";
batch = new SpriteBatch();
font = new BitmapFont();
batch.begin();
font.draw(batch, str, 200, 200);
batch.end();
if (Gdx.input.justTouched()) // use your own criterion here
game.setScreen(game.anotherScreen);
}
#Override
public void show() {
// TODO Auto-generated method stub
}
#Override
public void hide() {
// TODO Auto-generated method stub
}
}
Screens.java
package com.me.mygdxgame;
import com.badlogic.gdx.Game;
public class Screens extends Game {
MainMenu mainMenuScreen;
AnotherScreen anotherScreen;
#Override
public void create() {
mainMenuScreen = new MainMenu(this);
anotherScreen = new AnotherScreen(this);
setScreen(mainMenuScreen);
}
}
Change your render function to:
#Override
public void render(float delta) {
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT); //clears the buffer
CharSequence str = "Main Menu";
batch = new SpriteBatch();
font = new BitmapFont();
batch.begin();
font.draw(batch, str, 200, 200);
batch.end();
if (Gdx.input.justTouched()) // use your own criterion here
game.setScreen(game.anotherScreen);
}