Switching between screens Libgdx

Question

Hey everyone I am still working on this libgdx project and I am trying to figure out the best way to change the screens to my game screen Now, when a button is clicked I need it to transition to the game screen. I have seen a few implementations extending the game class but I am not sure what the best approach from here is. If you see some code that could be improved please let me know.

Here is the main application class:

public class ConnectFourApplication implements ApplicationListener {

    private Screen screen;

    public static void main(String[] args) {            
        new LwjglApplication(new ConnectFourApplication(), "PennyPop", 1280, 720,
                true);
    }

    @Override
    public void create() {
        screen = new MainScreen();
        screen.show();

    }

    @Override
    public void dispose() {
        screen.hide();
        screen.dispose();

    }

    /** Clears the screen with a white color */
    private void clearWhite() {
        Gdx.gl.glClearColor(1, 1, 1, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
    }

    @Override
    public void pause() {
        screen.pause();
    }

    @Override
    public void render() {
        clearWhite();
        screen.render(Gdx.graphics.getDeltaTime());
    }

    @Override
    public void resize(int width, int height) {
        screen.resize(width, height);

    }

    @Override
    public void resume() {
        screen.resume();
    }

}


public class MainScreen implements Screen {

    private final Stage stage;
    private final SpriteBatch spriteBatch;

    //Parameter for drawing the buttons
    private final BitmapFont font;
    private final TextureAtlas buttons; 
    private final Button SFXButton;
    private final Button APIButton;
    private final Button GameButton;
    private final Skin images;

    //Parameter for Sound
    private final com.badlogic.gdx.audio.Sound SFXClick;

    //Parameter for the api call
    private final String WeatherUrl;
    private final HttpRequest request;
    private final City SanFrancisco;

    //The screen to load after the game button is hit
    private Screen gamescreen;


    public MainScreen() {

        //Set up our assets
        spriteBatch = new SpriteBatch();
        stage = new Stage(Gdx.graphics.getWidth(), Gdx.graphics.getHeight(), false, spriteBatch);
        font = new BitmapFont(Gdx.files.internal("assets/font.fnt"),
                 Gdx.files.internal("assets/font.png"), false);
        buttons = new TextureAtlas("assets/GameButtons.pack");
        images = new Skin(buttons);
        images.addRegions(buttons);
        SFXButton = new Button(images.getDrawable("sfxButton"));
        SFXButton.setPosition(295, 310);
        APIButton = new Button(images.getDrawable("apiButton"));
        APIButton.setPosition(405, 310);
        GameButton = new Button(images.getDrawable("gameButton"));
        GameButton.setPosition(515, 310);
        SFXClick = Gdx.audio.newSound(Gdx.files.internal("assets/button_click.wav"));

        //Add our actors to the stage
        stage.addActor(SFXButton);
        stage.addActor(APIButton);
        stage.addActor(GameButton);

        //Set up our Url request to be used when clicking the button
        WeatherUrl = "http://api.openweathermap.org/data/2.5/weather?q=San%20Francisco,US";
        request = new HttpRequest(HttpMethods.GET);
        request.setUrl(WeatherUrl);
        SanFrancisco = new City("Unavailable","Unavailable","0","0"); //init san fran to be displayed before they have clicked the button


        //initialize the game screen that we will switch to when the button is pressed
        gamescreen = new GameScreen();

    }

    @Override
    public void dispose() {
        spriteBatch.dispose();
        stage.dispose();
    }

    @Override
    public void render(float delta) {
        stage.act(delta);
        stage.draw();

        //Begin sprite batch
        spriteBatch.begin();


        //Set our on click listeners for our buttons
        if (SFXButton.isPressed())
            SFXClick.play();

        if(APIButton.isPressed())
        {
            CallApi();
        }

        if(GameButton.isPressed())
            LoadGame();


        //Set font color and render the screen
        font.setColor(Color.RED);
        font.draw(spriteBatch, "PennyPop", 455 - font.getBounds("PennpyPop").width/2,
                460 + font.getBounds("PennyPop").height/2);

        font.setColor(Color.BLACK);
        font.draw(spriteBatch, "Current Weather", 900 - font.getBounds("PennpyPop").width/2,
                460 + font.getBounds("PennyPop").height/2);

        font.setColor(Color.LIGHT_GRAY);
        font.draw(spriteBatch, SanFrancisco.Name, 940 - font.getBounds("PennpyPop").width/2,
                420 + font.getBounds("PennyPop").height/2);


        font.setColor(Color.RED);
        font.draw(spriteBatch, SanFrancisco.CurrentCondition, 950 - font.getBounds("PennpyPop").width/2,
                300 + font.getBounds("PennyPop").height/2);


        font.draw(spriteBatch, SanFrancisco.Temperature + " Degrees,", 920 - font.getBounds("PennpyPop").width/2,
                270 + font.getBounds("PennyPop").height/2);

        font.draw(spriteBatch, SanFrancisco.WindSpeed, 1200 - font.getBounds("PennpyPop").width/2,
                270 + font.getBounds("PennyPop").height/2);



        //End or sprite batch
        spriteBatch.end();


    }

    //Handles calling our API
    public void CallApi(){

        //Sends our stored HTTPRequest object
         Gdx.net.sendHttpRequest(request, new HttpResponseListener() {
            @Override
            public void handleHttpResponse(HttpResponse httpResponse) {

                //Uses our private response reader object to give us a the JSON from the api call
                JSONObject json =  HttpResponseReader(httpResponse);

                //Gets the name of the city
                SanFrancisco.Name = (String) json.get("name");      

                //Parsed through our returned JSON for the weather key
                JSONArray WeatherArray = (JSONArray) json.get("weather");
                //Gets the actual weather dictionary 
                JSONObject Weather = (JSONObject) WeatherArray.get(0);
                //Finally get the value with the key of description and assign it 
                //To the San Fran current conditions field
                SanFrancisco.CurrentCondition = (String) Weather.get("description");



                //Gets the actual main dictionary 
                JSONObject main = (JSONObject) json.get("main");            
                //Finally get the values based on the keys
                SanFrancisco.Temperature = (String) Double.toString((double) main.get("temp"));

                //Finally get the wind speed
                JSONObject wind = (JSONObject) json.get("wind");    
                SanFrancisco.WindSpeed = (String) Double.toString((double) wind.get("speed"));

            }

            @Override
            public void failed(Throwable t) {
                Gdx.app.log("Failed ", t.getMessage());

            }
         });
    }

    //When the button game button is clicked should load the connect four game
    public void LoadGame(){
        hide();
        gamescreen.show();
    }



    //Converts our HttpResponse into a JSON OBject
    private static JSONObject HttpResponseReader(HttpResponse httpResponse){

        BufferedReader read = new BufferedReader(new InputStreamReader(httpResponse.getResultAsStream()));  
        StringBuffer result = new StringBuffer();
        String line = "";

        try {
          while ((line = read.readLine()) != null) {
                  result.append(line);
              }

              JSONObject json;
            try {
                json = (JSONObject)new JSONParser().parse(result.toString());
                return json;
            } catch (ParseException e) {
                e.printStackTrace();
            }

        } catch (IOException e) {
            e.printStackTrace();
        }

        return null;

    }

    @Override
    public void resize(int width, int height) {
        stage.setViewport(width, height, false);
    }

    @Override
    public void hide() {
        Gdx.input.setInputProcessor(null);
    }

    @Override
    public void show() {
        Gdx.input.setInputProcessor(stage);
        render(0);
    }

    @Override
    public void pause() {
        // Irrelevant on desktop, ignore this
    }

    @Override
    public void resume() {
        // Irrelevant on desktop, ignore this
    }
}

Answer 1

This is how I always implement screen switching:

First the main class needs to extend Game (From com.badlogic.gdx.Game) and you will need to have a new field of type Game:

public class ConnectFourApplication extends Game{
     private Game game;

Now initialize game in the constructor:

public ConnectFourApplication(){
     game = this; // Since this class extends Game

To set screen to MainScreen, now, all you need to do is to use setScreen(new MainScreen(game)); method (passing game so we can set screens from MainScreen class) You now need a new constructor for MainScreen class, and a new field:

private Game game;
public MainScreen(Game game){
     this.game = game;

Now you can use game.setScreen(new Screen(game)); to set the screen to yet another class that implements Screen.

But now, in the main class, in the render() method you must use super.render(); to make use everything from other screens render!

public void render() {
    clearWhite();
    super.render();
}

PS: Make sure that the class you are making as a screen, actually, implements Screen.