jueves, 14 de abril de 2016

Tutorial 8: Manejo de Pantallas

Hola buenas.
Es de mi agrado informarle que solo faltan dos tutoriales(incluyendo este), para el gran proyecto del blog. Es correcto haremos un juego completo xD

El presente tutorial tratare de explicar cómo interactuan las diferentes pantallas de nuestros juegos.
Por ejemplo:

  1. El juego inicia y presenta la pantalla del logo(SplashScreen).
  2. Luego se presenta la pantalla principal(MainScreen o MenuScreen).
  3. Dependiendo de la acción del jugador, puede dirigirse a otras pantallas, para nuestro ejemplo el usuario presiona jugar y se carga la pantalla del juego(GameScreen).
  4. Estando en la pantalla del juego pueden suceder que perdamos(GameoverScreen) o pausemos nuestro juego(PauseScreen).
En los numerales anteriores hemos visto más o menos como fluyen las iteraciones entre las pantallas.


El diagrama anterior ejemplifica la iteraciones del ejemplo que narre.
Después de un poco de teoriza vamos a nuestro amado libgdx.
Estrategia: Nuestro ejemplo tendrá dos pantallas, la primera que indicara que presionando sobre la pantalla, nos llevará a la segunda pantalla. Estando en la segunda pantalla un mensaje nos indicara que presionando sobre la pantalla, nos llevara a la pantalla anterior. Una vez estemos de vuelta en la pantalla primera, cambiara el mensaje y dirá que si presionamos en la pantalla el programa cerra.

Preparamos nuestro proyecto:

Importamos nuestro proyecto. Y nos dirigimos a la clase: "Tuto6",y hacemos:

package sv.chuckles.tuto6;

import com.badlogic.gdx.Game;

public class Tuto6 extends Game {

@Override
public void create() {
setScreen(new GameScreen(this));
}
}

Limpiamos nuestra clase y extendemos de la clase Game, la cual nos pedirá, implementar un método llamado create. Libgdx nos proporciona esta clase, para controlar las pantallas, aqui lo importante es la setScreeen, la cual iremos poniendo la pantalla que se ira presentando.
Para este caso estamos creando la pantalla GameScreen.

La clase GameScreen es implementada de la clase Screeen:

package sv.chuckles.tuto6;

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.g2d.BitmapFont;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;

public class GameScreen implements Screen{
private Tuto6 game;
private BitmapFont bitmapFont;
private SpriteBatch batch;
private String texto;
private boolean isRetorno;
public GameScreen(Tuto6 game){
this.game = game;
batch = new SpriteBatch();
bitmapFont = new BitmapFont();
isRetorno = false;
}

@Override
public void show() {
bitmapFont.setColor(Color.GOLD);
if(!isRetorno)
texto = "Presione sobre la pantalla";
else
texto = "Presione sobre la pantalla, para salir";
}

@Override
public void render(float delta) {
Gdx.gl.glClearColor(0.4f, 0.4f, 0.4f, 0);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.begin();
bitmapFont.draw(batch, 
"Pantalla: GameScreen\n"+texto, 
Gdx.graphics.getWidth()/2-90, 
Gdx.graphics.getHeight()/2+50);
batch.end();
if(Gdx.input.justTouched()){
if(!isRetorno){
game.setScreen(new SecondScreen(game,this));
isRetorno = true;
}else
Gdx.app.exit();
}
}

@Override
public void resize(int width, int height) {
}

@Override
public void pause() {
}

@Override
public void resume() {
}

@Override
public void hide() {
if(isRetorno)
dispose();
}

@Override
public void dispose() {
Gdx.app.log("GameScreen", "Entra al dispose");
batch.dispose();
bitmapFont.dispose();
}
}
Explicacion: 
  • En el constructor GameScreen, recibimos de parámetro la clase que hereda de Game, esta clase hay que llevarla por todas las pantallas, puesto es el que controla que pantalla esta ejecutándose.
  • Hemos creado BitmapFont bitmapFont, para pintar mensajes en nuestras pantallas, con esta clase podemos escribir nuestros mensajes con Font, que podemos diseñar o descargar; para efectos de pruebas, vamos a utilizar el default.
  • He creado una variable tipo boolean isRetorno, para controlar si ya fue visitada la segunda pantalla.
  • Después del create, se ejecuta el show, y luego el render. En el método render, escribimos el mensaje: "Pantalla: GameScreen\nPresione sobre la pantalla" y luego observamos que se espera que solo se presione sobre la pantalla. Si cumple con la condición primera hacemos uso otra vez del setScreeen, veremos que en el constructor de la segunda pantalla, se envia otro parametro(this), este parametro es la GameScreen.
La segunda escena es igual que la GameScreen, a difetencia que en el render solo esta: game.setScreen(gameScreen):
@Override
public void render(float delta) {
Gdx.gl.glClearColor(0.1f, 0.1f, 0.1f, 0);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.begin();
bitmapFont.draw(batch, 
"Pantalla: SecondScreen\nPresione sobre la pantalla,\npara regresar a la pantalla anterior", 
Gdx.graphics.getWidth()/2-90, 
Gdx.graphics.getHeight()/2+50);
batch.end();
if(Gdx.input.justTouched()){
game.setScreen(gameScreen);
}
}

Ya podemos ejecutar nuestro proyecto, tanto en el proyecto de android o el del escritorio.
Ejecutando en sub proyecto Desktop:


Al presionar en la pantalla, nos llevara a la segunda pantalla:

Si volvemos a presionar sobre la pantalla, nos llevara a la primera pantalla, esto es una forma de implementar la acción de Pausa en nuestros juegos.

Listo, ya podemos interactuar con muchas pantallas, según sean nuestras necesidades.
Un Saludo

Si te gusta mi trabajo y quisieras ver mas y mas rápido, puedes donar $1.00 vía donación paypal:




No hay comentarios.:

Publicar un comentario