martes, 24 de septiembre de 2013

Assets Manager, añadiendo música, imágenes y sonido.


Assets

Saludos otra vez, éste artículo lo dedicaré a los assets, un ejemplo de assets son las imágenes, el sonido y la música entre otros, que son los que a continuación voy a explicar.

Imágenes

Existen 2 tipos de imágenes planas estáticas en libgdx, la Texture y la TextureRegion. 

La Texture es una imagen jpg o png que debemos cargar en memoria y luego dibujarla en el render con el objeto Spritebatch.  Para cargarla en memoria antes tenemos que guardarla en nuestro proyecto de android en la carpeta assets, es recomendable separar los assets en carpetas por tipos, así que yo crearé mis carpetas Music, Sounds and Images.

Vamos a preparar nuestra imagen de fondo para el juego, he pensado hacer un juego de un pequeño pez en el oceano que tenga que recojer plancton para alimentarse, un ejemplo muy chorra pero nos servirá para ir desarrollando poco a poco.

La imagen debe ser POT, es decir, potencia de 2, no podemos hacer una imagen de 800x480 y colocarla y ya está, debemos alojarla en otra imagen con unas dimensiones de 512,1024,16,64, etc.

Así que cojo el Photoshop o el GIMP me creo mi fondo de 800x480.

 Y después lo añado a una imagen de 1024x1024.
 Y la guardo en la carpeta Assets/Images.

Ahora antes de instanciar la imagen ajustaré la resolución de la camara.

Para ello borraré todos los datos creados por el proyecto de prueba dejando únicamente los métodos y eliminando los atributos de la clase de mi juego. Os muestro mi clase para que observeís como colocar la imagen de fondo, guiaros por los comentarios.

package com.Firedark.libgdxspain;

import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.g2d.TextureRegion;

public class LibgdxSpain implements ApplicationListener {
   
    //Creamos los 4 Objetos que usaremos para éste Tutorial, Camara, SpriteBatch,Textura y Region
    private OrthographicCamera camera;
    private SpriteBatch batch;
    private Texture texture;
    private TextureRegion region;

    @Override
    public void create() {       
        // Estas variables las usaremos para ajustar la resolución a 800x480
        float w = 800;
        float h = 480;
        //Instanciamos Camara y le ajustamos con el metodo SetToOrtho la resolución anterior.
        camera = new OrthographicCamera();
        camera.setToOrtho(false,w,h);
        //Instanciamos Spritebatch
        batch = new SpriteBatch();   
        //Instanciamos la Textura, para ello tenemos que darle la localización dentro de la carpeta ASSETS
        texture = new Texture(Gdx.files.internal("data/Images/oceanbackground.jpg"));
        //Usaremos la region para determinar la zona que queremos cojer de la imagen de 1024 x 1024 como empieza por la
        //esquina superior izquierda escojemos 0,0 de coordenadas X e Y y 800 de ancho y 480 de alto.
        region = new TextureRegion(texture,0,0,800,480);
       
    }

    @Override
    public void dispose() {
        // NO olvidaros vaciar la memoria en el metodo dispose de los objetos que vamos subiendo a memoria.
        batch.dispose();
        texture.dispose();
       
    }

    @Override
    public void render() {       
        //Esto limpiaria lo que es la pantalla en negro, al colocarle la imagen de fondo encima no lo apreciaremos
        Gdx.gl.glClearColor(1, 1, 1, 1);
        Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
        // Ajustamos la camara con el SpriteBatch
        batch.setProjectionMatrix(camera.combined);
        //Empezamos a dibujar
        batch.begin();
        //usamos el metodo del spritebatch draw para dibujar la region,(OJO! no la textura, podriamos dibujarla también
        //pero deberiamos cuadrarla en la pantalla con las coordenadas (0,-544).
        batch.draw(region,0,0);
        //Fin de dibujar.
        batch.end();
    }

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

    @Override
    public void pause() {
    }

    @Override
    public void resume() {
    }
}
Bien, ahora que tenemos el fondo voy a explicar como instanciar la música y el sonido, es más sencillo aún que colocar una imagen.

Sonido. 

Debe ser un archivo .wav, .mp3 o OGG. Es recomendable que useís algún programa para transformarlos todos a mp3 ya que ocupan menos, yo utilizo el AVS Audio Converter y la verdad es que me va genial.

Debemos crear un objeto Sound.
private Sound sound;

Metodo Create:
sound = Gdx.audio.newSound(Gdx.files.internal("data/mysound.mp3"));
 
Hay varios metodos para usar el sonido, es cuestión de experimentar un poco, los más 
comunes son sound.play(), sound.play(float Volumen).

Aquí teneís el link del objeto sound:
 
http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/audio/Sound.html


Musica

Voy a colocar una música de fondo a mi juego. Me la he descargado de la página de freesounds.

http://www.freesound.org/people/KaiLietzke/sounds/185063/ 

Una vez descargada la renombro a musica.wav y la meto en la carpeta assets/data/Music.

Creo el objeto Music de libgdx en los atributos de mi clase, y en el metodo create añado ésto.

        //Instancia la música.
        musica = Gdx.audio.newMusic(Gdx.files.internal("data/Music/musica.wav"));
        //La pone en bucle continuo
        musica.setLooping(true);

        //La pone en play.
        musica.play(); 
 
 Problemas y Consejos
-  No metaís en memoria assets en métodos cíclicos o sobrecargareís la memoria.
 - No añadais un sónido o una música en el metodo render sin condición alguna, al ser cíclico lógicamente lo pondreís en play cada ciclo y sonará mal. ( Existe un método isLooping que te devuelve un boolean si la música esta en loop)
-  Acordaós de usar el método dispose() de Músicas y Sonidos.
- Cuidado con los Path de los archivos de los assets, en desktop no te detectará mayúsculas, pero en android si, y os podeís liar.

Gestor de Assets

Es conveniente intentar separar los datos de la lógica del juego para tener mayor control de la carga de assets y acceder fácilmente a ellos desde cualquier punto del programa, ahora con 1 classe principal creada no es muy necesario pero con el tiempo y con el juego mas avanzado resultará realmente útil. Para ello vamos a crear una classe llamada AssetsManager en el proyecto núcleo de nuestro juego.

Aqui crearemos nuestros objetos de texturas y nuestros 2 métodos de carga y liberación de memoria de nuestras imágenes, música y sonido.

Éste es un ejemplo de la clase del tutorial anterior:

package com.Firedark.libgdxspain;

import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.audio.Music;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.TextureRegion;


public class AssetsManager {
   
    public Texture Tbackground;
    public TextureRegion background;
    public Music musica;
   
    public void cargarAssets(){
        Tbackground = new Texture(Gdx.files.internal("data/Images/oceanbackground.jpg"));
        background = new TextureRegion(Tbackground,0,0,800,480);
        musica = Gdx.audio.newMusic(Gdx.files.internal("data/Music/musica.wav"));       
    }
   
    public void disposeAssets(){
        Tbackground.dispose();
        musica.dispose();
    }
   
}





Finalmente deberemos ir a la classe principal de nuestro juego y acceder a los datos a través de la instancia de esta classe AssetsManager.

package com.Firedark.libgdxspain;

import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;


public class LibgdxSpain implements ApplicationListener {
   
    //Creamos los 4 Objetos que usaremos para éste Tutorial, Camara, SpriteBatch,Textura y Region
    private OrthographicCamera camera;
    private SpriteBatch batch;
    private AssetsManager assets;

    @Override
    public void create() {    

        // Creamos el AssetManager
         assets = new AssetsManager();
        //Si nos olvidamos de cargar los assets en memoria nos dará NullPointerException porque no los encontrará.
        assets.cargarAssets();
       
        float w = 800;
        float h = 480;
        camera = new OrthographicCamera();
        camera.setToOrtho(false,w,h);

        batch = new SpriteBatch();   
    //accedemos a assets.musica, el atributo de musica de la clase assets.
        assets.musica.setLooping(true);
        assets.musica.play();
    }

    @Override
    public void dispose() {
   
        batch.dispose();
        //Llamamos al metodo para liberar Assets.
        assets.disposeAssets();
       
    }

    @Override
    public void render() {       

        Gdx.gl.glClearColor(1, 1, 1, 1);
        Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

        batch.setProjectionMatrix(camera.combined);

        batch.begin();
        //Aqui accedemos al atributo TextureRegion background de la clase assets.
        batch.draw(assets.background,0,0);
        batch.end();
    }

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

    @Override
    public void pause() {
    }

    @Override
    public void resume() {
    }
}
 




 

Gracias, para el siguiente artículo explicaré un poco de entradas y empezaremos a mover rectángulos y hacer que actúen. A programar! 

miércoles, 18 de septiembre de 2013

Primeros pasos II


Primeros Pasos (II)

Adentrándose en LibGDX.

Partimos de la base, tenemos nuestro proyecto nuevo y listo para empezar. Nos encontramos con un minimo de 3 proyectos.

Proyecto Núcleo

MiJuego <- Núcleo del proyecto , donde se alojará el código del juego.

Abrimos la clase principal que ya viene creada para encontrarnos con un código que lo primero que hace es instanciar 4 objetos, nos centraremos en explicar 3 de ellos y dejaremos los sprites para más adelante.

    private OrthographicCamera camera;
    private SpriteBatch batch;
    private Texture texture;


No vamos a adentrarnos en el uso de cámaras, ya que mas adelante se explicará todas sus funciones y propiedades.

El Objeto SpriteBatch es el encargado de dibujar en pantalla las diferentes imágenes.

El objeto Texture carga una imagen, ya sea png o jpg.

Finalmente el núcleo del juego tiene 6 métodos distintos.

Método Create() : Es el método que se ejecuta cuando crea la actividad, el método donde debemos cargar las imágenes, sonidos y músicas en memoria para poder usarlas.

Método Dispose() : Método llamado al terminar la actividad, es el contrario al método Create y liberar el espacio de memoria que hemos usado en el método create, para ello podemos usar el método dispose() de cualquier clase Texture, Sound etc.

Método Render() ; Método cíclico que se ejecuta continuamente, este método será donde vamos a ir dibujando las imágenes y acciones.

Método Resize() : Se llama al cargar una pantalla, más adelante lo usaremos para más cosas.

Método Pause(): Cuando recibes una llamada, o tu teléfono te obliga a parar lo que estés haciendo se llama al método Pause().

Método Resume(): Se llama al volver al juego desde el método Pause().

En ésto consiste la clase principal de nuestro juego hasta ahora, pero no es lo único que tenemos en el proyecto ya que tenemos dos partes más que comentar el proyecto de android y el proyecto de escritorio.

Proyecto Android

Dentro del proyecto android tendremos una clase Main igual, que únicamente se dedicará por el momento a generar una instancia de nuestro juego, y crear una configuración para esa aplicación como si se debe usar o no el acelerómetro, el compass, etc. Si la leéis veréis que no tiene complicación alguna.

Proyecto Desktop

Similar al proyecto de android pero en el éste proyecto podremos cambiar la resolución de la pantalla.
 Simplemente crea un objeto LwjglApplicationConfiguration, le ajusta las propiedades, titulo, ancho, alto, etc. y luego crea otro objeto LwjglApplication con la clase principal de nuestro juego y la configuración anterior en el constructor.

Probando la aplicación

Una vez visto lo que tenemos vamos a probar el programa actual, ya que tenemos la aplicación de prueba.
Para el proyecto Android, crearemos una AVD (Maquina virtual de Android), para ello vamos a la pestaña Window de eclipse a Android Virtual Devices Manager.


- Si pulsamos sobre New nos aparecerá otra pantalla para crear un nuevo emulador de dispositivo, no obstante, si cambiamos de pestaña a "Device Definitions" tendremos ya la configuración básica de algunos de los dispositivos del mercado, si seleccionamos uno como el Nexus One y clickamos en create AVD nos saldrá la pantalla de creación del AVD con los datos ya configurados, al pulsar OK, ya tendremos el emulador listo para probar nuestro proyecto.
(Algunas AVD cuando las creas desde un dispositivo les falta seleccionar la CPU que emularán, y algunas fallan al tener demasiada RAM asignada, reducirla si os da problemas)

- Una vez creada nuestro dispositivo virtual probaremos dando click derecho en el proyecto de android, Run as... , Android Application, nos arrancará el emulador de android y después de arrancar el dispositivo, iniciará nuestra aplicación, apareciéndonos una imagen.



Podéis probar varias maquinas virtuales entrando en Run configurations, al pulsar sobre Run As... en vuestro proyecto android, en la pestaña de "Target" tendréis la opción de seleccionar otra maquina por defecto o que os de la opción en cada prueba de seleccionar la maquina deseada.

Para la versión desktop únicamente deberéis hacer click derecho sobre el proyecto desktop y pulsar:

Run as... > Java Application, os aparecerá una pantalla donde tendréis que escoger vuestra clase Main.



Para el siguiente articulo aprenderemos a manejar sonidos, imágenes, música y a separar la gestión de "Assets" de la parte lógica de nuestra aplicación.

Espero que os haya servido y cualquier duda consultármela en un comentario.









miércoles, 11 de septiembre de 2013

Primeros Pasos I, Espacio de trabajo.

Primeros pasos (I) 


Empezando con libGDX

Bienvenid@s a LibGdx en español, en mi primer articulo explicaré que es LibGdx y como preparar las herramientas para lanzarte al mundo de la programación para juegos de android y otras plataformas. No recomiendo éste blog para alguien que no tenga conceptos minimos de programación orientada a objetos. Aviso que no soy un experto en ésto y intentaré resolver las dudas que puedan surgir en los tutoriales. 

LibGDX es una libreria especializada en la creación de juegos, permite escribir el código una vez y desplegarlo en varias plataformas (Windows,Linux,Mac OS X,Android, iOS,...).

Antes de nada explicaré el entorno de programación que uso y como instalarlo y prepararlo para empezar a comprender como funciona ésta libreria.


Software a instalar

Java Development Kit. (JDK)

Hay que descargar la plataforma java jdk para poder compilar código java en tu PC. Os facilito el enlace

http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html#javasejdk

Para encontrar el enlace, entrando en la página de java, abajo en letra pequeña en la opción "Dessarrolladores" podrás leer un poco más acerca de para que sirve ésta plataforma.


ADT Bundle para Windows.

ADT Bundle es una versión de Eclipse IDE + Android SDK ya preparada para el dessarrollo de aplicaciones android la descargaremos de http://developer.android.com/sdk/index.html



Justo en el botón "Download the SDK ADT Bundle for Windows"

Una vez descargado, simplemente tendrás que descomprimirlo en una carpeta cualquiera. Si has instalado correctamente el JDK de java podrás ejecutar el programa eclipse.

GWT

Ya teniendo el programa debemos instalar el plugin GWT (Google Web Toolkit) para poner en marcha después nuestro proyecto Gdx.

Para ello al entrar en eclipse debemos :
- Ir a la pestaña Help, Install New Software
- Dentro del campo de texto Work With: colocaremos el siguiente enlace:

http://dl.google.com/eclipse/plugin/4.3

- Al darle al enter nos encontrará varios plugins para instalar en nuestro "Eclipse" ADT.
- Debemos buscar la pestaña SDKs y instalar el Google Web Toolkit GWT.


- Le damos a Next y seguimos las intrucciones para instalarlo.

API y Emuladores de Android

Una vez instalado el GWT pasamos instalar todas las API de las versiones de android y plugins.
Para ello debes ir a eclipse y en la pestaña Window accedemos al SDK Manager. Una vez dentro debemos seleccionar menos los extras todos los paquetes y instalarlos.


Proyecto LibGdx


Bien ya tenemos el eclipse preparado para insertar nuestro proyecto de libGdx, así que vamos a la web y buscamos la interfaz grafica ya preparada.

- Una vez en la web, ve a la pestaña de Downloads y selecciona Nightly Builds.
- Se abrira un sistema de archivos donde tendremos que entrar en la carpeta "dist".
- Al abrir la carpeta "dist" buscaremos el archivo .jar llamado Gdx-setup-ui.jar y lo descargaremos.

Creando el proyecto

- Al ejecutar el archivo Gdx-setup-ui se nos abrirá una pantalla con 2 opciones Create, y Update.
- Como queremos crear un proyecto nuevo pulsamos Create.



Bien, al darle a crear, nos aparecerá esta pantalla de configuración del proyecto, en la pestaña 1 deberemos escribir el nombre del juego, nombre del paquete en el que tendrás que poner com."tu nombre, apodo, nick"."nombre del juego". En la tercera pestaña Game Class, la clase principal de tu juego así que ponle el nombre empezando por mayúscula. Finalmente escoje la carpeta de destino del proyecto.

A continuación hay varias pestañas para elegir con las plataformas que queremos que funcione nuestro juego, para los siguientes tutoriales solo usaré la version android y desktop así que quitaré la versión HTML y iOS.

En la 2ª parte le daremos al botón de la ultima versión estable donde pone LibGdx, se nos descargará la libreria. Una vez descargada le daremos a "Open the Generation Screen" y lanzaremos el proceso.


Llevando el proyecto a eclipse (ADT).

Volvemos a eclipse, y en explorador de paquetes (Package Explorer) damos click derecho y le damos a Importar, pestaña General y "Existing projects into Workspace". Buscamos la carpeta de los proyectos de libgdx ( la que seleccionamos anteriormente al crear el proyecto) y añadimos los proyectos existentes.


Bien, a partir de aqui tenemos un proyecto de LibGdx con una pequeña demo que carga una imagen, en el proximo tutorial explicaré la estructura del proyecto y los primeros pasos para empezar a entenderlo. Espero que os haya servido de ayuda y cualquier duda dejarla en los comentarios,

Saludos! Se agradecen los comentarios.