miércoles, 9 de enero de 2013

Escenas AndEngine GLES 2.0 : Splash, Menú y Principal.


En este tutorial os voy a enseñar como cambiar de escena con AndEngine Gles2. También aprenderemos como crear una escena splash y un menú.
Para empezar creamos nuestro proyecto andengine como se indica en un tutorial anterior
Creamos una clase java, a la que yo le voy a llamar Principal que sera la que extienda a SimpleBaseGameActivitiy.
Tras crearla tendra este aspecto:
public class Principal extends SimpleBaseGameActivity {
@Override
public EngineOptions onCreateEngineOptions() {
// TODO Auto-generated method stub
return null;
}

@Override
protected void onCreateResources() {
// TODO Auto-generated method stub

}

@Override
protected Scene onCreateScene() {
// TODO Auto-generated method stub
return null;
}

}

Y creamos las clases java EscenaPrincipal, EscenaSplash y EscenaMenu. Las dos primeras extienden a Scene y la del menu extiende a MenuScene.


Ya tenemos creadas nuestras cuatro clases y os voy a explicar en que va ha consistir nuestro proyecto.
Empezara con una escena Splash en la que saldra un texto , luego iremos a un menu que contendra un boton Sprite y uno de texto. En este menu tendremos una imagen con forma de X que cerrara la aplicación si hacemos click y un texto que nos llevara a la EscenaPrincipal al cliquearlo.
En nuestra clase Principal tenemos que cargar todas la texturas la camara y todo los recursos que utilizara nuestra aplicacion.
Empezamos creando nuestra carpeta gfx  dentro de la carpeta assets para introducir ahí nuestra imagen.
Ahora abrimos nuestra clase principal y empezamos a definir las variables:
static final int CAMARA_ANCHO = 800;
static final int CAMARA_ALTO = 480;
public Camera mCamara;
public BitmapTextureAtlas mBitmapTextureAtlas;
public ITextureRegion imagen;
public Font mFont;
public Scene mActualEscena;
public static Principal instance;
La mayoría ya las conocéis ya que las he utilizado en otros tutoriales. La unica que cambian son la Font que se refiere a la fuente de texto y la public static Principal instance que nos servira para hacer refencia en otras clases a nuestra clase principal.
Ahora insertamos el método:
public static Principal getSharedInstance() {
return instance;
}
Con este método es con el que haremos referencia a nuestra clase Principal.
Continuamos insertando código en onCreateEngineOptions() :
public EngineOptions onCreateEngineOptions() {
instance = this;
mCamara = new Camera(0, 0, CAMARA_ANCHO, CAMARA_ALTO);
return new EngineOptions(true, ScreenOrientation.LANDSCAPE_FIXED,new RatioResolutionPolicy(CAMARA_ANCHO, CAMARA_ALTO), mCamara);
}


Esta parte consiste en definir la cámara y sus propiedades.
ahora nos vamos a onCreateResources(), que es la parte donde cargamos las texturas y las fuentes de texto, esto esta explicado en otros tutoriales . Aquí tenéis el código:
protected void onCreateResources() {
//Fuentes de texto
this.mFont = FontFactory.create(this.getFontManager(), this.getTextureManager(), 500, 500, Typeface.create(Typeface.DEFAULT, Typeface.BOLD), 60);
this.mFont.load();
//Sprites
BitmapTextureAtlasTextureRegionFactory.setAssetBasePath("gfx/");
mBitmapTextureAtlas = new BitmapTextureAtlas(this.getTextureManager(),
300, 300, TextureOptions.NEAREST_PREMULTIPLYALPHA);
imagen = BitmapTextureAtlasTextureRegionFactory.createFromAsset(
this.mBitmapTextureAtlas, this, "x.png", 0, 0);
mBitmapTextureAtlas.load();
}
Lo único que no he explicado en tutoriales anteriores son las fuentes de texto pero funcionan casi igual que los sprite y el numero en rojo es el tamaño de la fuente. Haré un tutorial de textos.
Continuamos con onCreateScene():
protected Scene onCreateScene() {
mEngine.registerUpdateHandler(new FPSLogger());
mActualEscena = new EscenaSplash();
return mActualEscena;

}

En esta parte lo que le decimos es que la escena que cargue primero es la EscenaSplash.
Ahora añadimos el método para cambiar de una escena a otra y ya tenemos finalizada la clase Principal.
public void setCurrentScene(Scene escena) {

mActualEscena = escena;

getEngine().setScene(mActualEscena);
}


Ahora abrimos nuestra clase SplashEscena y vamos a definirla.
public class EscenaSplash extends Scene {
Principal activity;
public Text borjaAnselmo;
public EscenaSplash(){
setBackground(new Background(0.5f, 0.6f, 0.8f));
activity = Principal.getSharedInstance();
borjaAnselmo= new Text(0, 0, activity.mFuente, ("BORJAANSELMO.COM"),
activity.getVertexBufferObjectManager());
borjaAnselmo.setPosition(400-borjaAnselmo.getWidth(),240-borjaAnselmo.getHeight());
attachChild(borjaAnselmo);
DelayModifier dMod = new DelayModifier(3,
new IEntityModifierListener() {
public void onModifierStarted(IModifier arg0, IEntity arg1) {
}

public void onModifierFinished(IModifier arg0, IEntity arg1) {
activity.setCurrentScene(new EscenaMenu());
}
});
registerEntityModifier(dMod);
}

El definir como activity Principal.getSharedInstace() es solo para ahorrar escritura de codigo, podriamos hacerlo igual escribiendo todo en vez de actitvity. Luego tenemos un texto centrado y al final definimos un retardo de 3 segundos que es el numero en rojo para que nuestra escena se mantenga durante ese tiempo, y al finalizar nos lleve a la escenaMenu.
Tras definir nuestra escenaSplash vamos a crear nuestro menu. Abrimos la clase EscenaMenu y lo primero que hacemos es implementar IOnMenuItemClickListener.
Luego creamos el constructor de la escena y el método  IOnMenuItemClickListener(). Aquí esta el código de la escena completa y mas tarde lo explico:
public class EscenaMenu extends MenuScene implements IOnMenuItemClickListener {
Principal activity;
public EscenaMenu()
{
super(Principal.getSharedInstance().mCamara);
activity = Principal.getSharedInstance();
setBackground(new Background(0.3f, 0.7f, 0.7f));
IMenuItem BotonImagen = new SpriteMenuItem(0 , activity.imagen, activity.getVertexBufferObjectManager());
IMenuItem BotonTexto = new TextMenuItem(1 ,activity.mFuente,"Principal", activity.getVertexBufferObjectManager());
BotonImagen.setPosition(100,100);
BotonTexto.setPosition(500,150);
addMenuItem(BotonImagen);
addMenuItem(BotonTexto);
setOnMenuItemClickListener(this);
}
public boolean onMenuItemClicked(MenuScene pMenuScene, IMenuItem pMenuItem,
float pMenuItemLocalX, float pMenuItemLocalY) {
switch (pMenuItem.getID()) {
case 0:
activity.setCurrentScene(new EscenaPrincipal());
    return true;
case 1:
activity.finish();
    return true;
default:
           break;
   }
   return false;

}

}
En esta escena lo que hemos hecho es definir un botón de texto y otro que es una imagen los números en rojo indican el caso que vamos a utilizar en nuestro switch al hacer click en los botones y creo que lo demas ya esta en otros tutoriales.
Y por ultimo la clase EscenaPrincipal lo único que he hecho es ponerle un color de fondo.

public class EscenaPrincipal extends Scene {
public EscenaPrincipal()
{
setBackground(new Background(0.2f, 0.2f, 0.2f));
}

}
Con esto ya hemos terminador nuestra aplicación.
Tenéis los java y la imagen en mi página de gitHub.

Saludos y hasta otro tutorial.



No hay comentarios:

Publicar un comentario