lunes, 27 de febrero de 2017

SpaceInvaderClon - Paso 1

SpaceInvaderClon - Paso 1

Hola buenas, 
Seguimos en nuestro afán, de nuestro primer juego. Aquí puedes ver la parte previa PASO 0
En este paso 1, vamos a crear la lógica entre pantalla, así seguimos avanzando.
Primero creamos la clase Utils y creamos el paquete: sv.com.chuckle.game.spaceinvaderclon.utils
Código clase Utils:
package sv.com.chuckle.game.spaceinvaderclon.utils;

import com.badlogic.gdx.Gdx;

public class Utils {
    public static int ANCHO = 480;
    public static int ALTO = 650;
    public static boolean IS_DEBUG = true;

    public static void log(String tag,String message){
        if(IS_DEBUG)
            Gdx.app.log(tag, message);
    }
}

En esta clase, hemos definido de forma estática, el ancho y alto de nuestra pantalla.
Los valores 480x650, hacen referencia una pantalla en vertical(Portrait). También hemos 
definido una variable tipo booleana llamada "IS_DEBUG", la cual será nuestra bandera 
si deseamos escribir en la consola y para dibujar los elementos geométricos, para las 
colisiones.


Modificar pantalla Desktop y Android
Para ello primero nos dirigiremos a la clase DesktopLauncher, de nuestro subproyecto 
"desktop", aqui agregamos las definiciones del ANCHO y ALTO, de la clase Utils, asi:

package sv.com.chuckle.game.spaceinvaderclon.desktop;
import com.badlogic.gdx.backends.lwjgl.LwjglApplication;
import com.badlogic.gdx.backends.lwjgl.LwjglApplicationConfiguration;
import sv.com.chuckle.game.spaceinvaderclon.GameLoop;
import sv.com.chuckle.game.spaceinvaderclon.utils.Utils;

public class DesktopLauncher {
   public static void main (String[] arg) {
      LwjglApplicationConfiguration config = new LwjglApplicationConfiguration();
      config.width = Utils.ANCHO;
      config.height = Utils.ALTO;
      config.resizable =  false;
      config.title = "Space Invader - CLON";
      new LwjglApplication(new GameLoop(), config);
   }
}
Creo que se entiende que se está haciendo.

Luego vamos por el archivo de configuración de android el AndroidManifest.xml 
del subproyecto "android' y cambiaremos la linea donde se encuentre la etiqueta:
android:screenOrientation, por esto: android:screenOrientation="portrait"


Crear las Pantallas
Para esto creamos el paquete: 
sv.com.chuckle.game.spaceinvaderclon.screen
Y creamos tres clases llamadas: MainScreen, GameScreen y GameOverScreen.
Estas clases deben de implementarse con la interfaz llamada: Screen
Y su constructor debe de recibir como parámetro el objeto GameLoop, que es el que extiéndete de Game(Este controla nuestro juego).
Clase MainScreen:
package sv.com.chuckle.game.spaceinvaderclon.screen;

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

import sv.com.chuckle.game.spaceinvaderclon.GameLoop;
import sv.com.chuckle.game.spaceinvaderclon.utils.Utils;

public class MainScreen implements Screen{
    private GameLoop game;
    private BitmapFont font;
    private Batch batch;

    public MainScreen(GameLoop game){
        this.game = game;
        font = new BitmapFont();
        batch = new SpriteBatch();
    }

    @Override    public void show() {

    }

    @Override    public void render(float delta) {
        Gdx.gl.glClearColor(0, 0, 0, 0);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

        if(Gdx.input.justTouched())
            game.setScreen(new GameScreen(game));
        batch.begin();
        font.draw(batch, "SPACE INVADER", Utils.ANCHO/2-60, Utils.ALTO/2+100);
        font.draw(batch, "Presione sobre la pantalla para iniciar el juego", Utils.ANCHO/2-150, Utils.ALTO/2+50);
        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() {
        font.dispose();
        batch.dispose();
    }
}

Las otras dos clases son iguales, solo cambian las posiciones del texto.
Clase GameScreen:
@Overridepublic void render(float delta) {
    Gdx.gl.glClearColor(0, 0, 0, 0);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

    if(Gdx.input.justTouched())
        game.setScreen(new GameOverScreeen(game));
    batch.begin();
    font.draw(batch, "Pantalla De Juego", Utils.ANCHO/2-50, Utils.ALTO/2+100);
    font.draw(batch, "Presione sobre la pantalla para continuar", Utils.ANCHO/2-120, Utils.ALTO/2+50);
    batch.end();

}

Clase GameOverScreen:
@Overridepublic void render(float delta) {
    Gdx.gl.glClearColor(0, 0, 0, 0);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

    if(Gdx.input.justTouched())
        game.setScreen(new GameScreen(game));
    batch.begin();
    font.draw(batch, "GAME OVER", Utils.ANCHO/2-50, Utils.ALTO/2+100);
    font.draw(batch, "Presione sobre la pantalla para iniciar el juego", Utils.ANCHO/2-150, Utils.ALTO/2+50);
    batch.end();

}
Para fines prácticos, el flujo por el momento es:
MainScreen->GameScreen<->GameOverScreen

Paso Final:
Para nuestro final, solo falta modificar la clase GameLoop, para que sea esta la que controle todo nuestro juego. Para ello limpiamos toda la clase y la extendemos de Game, asi:
package sv.com.chuckle.game.spaceinvaderclon;

import com.badlogic.gdx.Game;

import sv.com.chuckle.game.spaceinvaderclon.screen.MainScreen;

public class GameLoop extends Game {

   @Override   public void create() {
      setScreen(new MainScreen(this));
   }
}
Como Game, tiene la capacidad de poner que pantalla esté activa, de esta forma al iniciar
nuestro juego, la pantalla por defecto será la MainScreen.
Ya podemos ejecutar nuestro subproyectos, y veran como nos quedó.
Aquí el resultado:


Como vemos es super sencillo hacer este juego de pantallas.
Para nuestra próxima entrega,  ya pintaremos nuestra nava y haremos que se mueva y dispare xD

Codigo fuente aqui.

Saludos

Si te gusta mi trabajo y crees que vale la pena que sigamos aprendiendo, pues dona un dólar
para esta buena causa xD

No hay comentarios.:

Publicar un comentario