[Tutorial] Stage (libGDX)

Buenas gente!

En esta entrada vamos a ver con un poco más de detalle la clase Stage. Esta clase incluye una cámara y un SpriteBatch. Además, guarda los distintos actores que le demos para luego actualizarlos y mostrarlos por pantalla.

También veremos algunos ejemplos de actores que se le pueden incorporar.

Inicialización y uso :

Puedes crear un Stage con los siguientes constructores según tu necesitad:

Puedes asignarle a tu stage los eventos que se produzcan en la aplicación con la línea:

Para cambiar las dimensiones de lo que muestra tu stage puedes hacerlo con la línea:

Puedes añadir actores a tu stage con la línea;

Para actualizar a todos los actores de tu stage, se utiliza la siguiente línea (delta es un flotante que indica la cantidad de tiempo que ha transcurrido desde el último renderizado):

Y para dibujarlos a todos (dibujará los actores en el orden en el que tu los introdujiste en el stage)

Actores:

Un actor es un nodo con posición, tamaño, escala, rotación, color, etc. La clase Actor es extendida para crear nuestros propios actores que pueden cambiar a lo largo del tiempo y que deben ser mostrados en la pantalla de nuestra aplicación.

Un actor tiene una serie de eventos asociados a él que se ejecutan a lo largo del tiempo y son usados para modificarlo (como puede ser moverlo, redimensionarlo, cambiar su animación, etc.).

Estos son algunos de los posibles actores que se pueden añadir a nuestro stage, pudiendo crearte los tuyos propios:

• Table → Base para añadir botones, imágenes, etc. y colocarlos de forma ordenada en la pantalla, pudiendo indicar su tamaño, espaciado entre el resto de elementos, etc.
  
• Image → Imágenes sacadas a partir de una textura o región de esta.
  
• Button → Botones con cualquier acción que tu les indiques.
  
• Entidades → Un actor con animaciones, detección de colisiones, vida y todos los atributos que quieras darle.
  
• Barras de vida, stamina, etc. → Varias imágenes superpuestas que varían según eventos de tu aplicación como la pérdida de vida de tu personaje, uso de ataques, etc.
  
• Controladores táctiles → Para mover otros actores o cámaras, modificar valores, zoom, etc.

Notas:

• Al finalizar la aplicación deberemos llamar al método dispose() de nuestro stage para eliminarlo.

• Los actores por defecto no necesitan tener un método dispose(). Si creamos nuestra propia clase que extienda de Actor y esta tiene variables que necesiten usar dispose() al cerrarse si deberemos crear esta función y llamarla al cerrar nuestra app.
  

• Los actores se mostrarán en pantalla en el orden en el que se introdujeron en el stage, por lo que en el fondo se encontrarán los primeros y se irán superponiendo si fuera necesario hasta llegar al último introducido que estará sobre todos.
  

• Es posible tener más de un stage, cada uno con sus actores y que se muestren simultáneamente en pantalla. Esto será útil cuando veamos más adelante el HUD.

• Es recomendable usar siempre el mismo SpriteBatch, para el stage o para dibujar elementos concretos. Esto mejorará el rendimiento de nuestra app.

Referencias:

• http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/scenes/scene2d/Actor.html
• http://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/scenes/scene2d/Stage.html

[Tutorial] Mostrar imágenes (libGDX)

Buenas gente!

En esta entrada vamos a ver con algo de detalle una de las maneras que nos ofrece libGDX para mostrar imágenes en nuestra aplicación.

Crear cámaras:

Si empezamos un proyecto desde 0, no se nos mostrarán las imágenes a menos que pongamos una cámara. Para ello tenemos que crear en nuestro código principal del proyecto name una variable de tipo OrthographicCamera.

En nuestro método create() crearemos al principio del todo dos variables que nos guarden el ancho y alto de la pantalla del juego, que necesitaremos para crear nuestra cámara:

Justo a continuación inicializamos nuestra cámara:

Como parámetros le hemos pasado el ancho y largo del juego que obtuvimos antes.

Cargar imágenes:

Ya que las resoluciones de pantalla varían de un móvil a otro, o en tabletas, etc. las imágenes que introduzcamos deben seguir unas determinadas normas para que se vean y adapten correctamente a todos los dispositivos.

En primer lugar tanto el ancho como el alto deben ser un número resultado de elevar 2. Por ejemplo: 8, 16, 32, 64, 128, 256, 512... Esto es algo realmente importante. Si intentas cargar una imagen con dimensiones incorrectas libGDX crasheará.

Las imágenes deberás ponerlas en la carpeta assets de tu proyecto name-android para poder cargarlas.

Para usar una imagen en tu código usaremos una variable de la clase Texture.

Inicializamos la imagen en nuestra función create() o en la función en la que vayamos a crear la imagen de la siguiente forma:

En “filepath” pondremos lde donde cargar nuestra imagen. En nuestro caso la imagen está guardada en una carpeta dentro del proyecto, pero existen muchas más formas de cargar imágenes. Por ejemplo, desde una tarjeta SD.

La estructura de nuestro “filepath” debe ser la siguiente:

La función Gdx.files.internal toma como carpeta principal la carpeta assets por lo que si cargamos una imagen de ahí tan solo tenemos que poner su nombre y extensión. Si tuviésemos carpetas dentro de assets ya si tendríamos que indicarle la dirección.

Es muy importante en la función dispose() colocar el código para que se liberen todas las variables de tipo Texture que creemos. Para ello ponemos en esta función:

Si queremos mostrar una imagen de un ancho o alto distinto a una base de dos, exiten muchas maneras de hacerlo. Una de ellas es crear un TextureRegion. En este le indicaremos dentro de nuestra imagen que región coger. Para ello creamos una nueva variable de tipo TextureRegion y la inicializamos, como siempre, en nuestra función create:

En esta inicialización le pasamos la imagen de la que tomaremos una región, las coordenadas w1 y h1 donde comenzará nuestra región y las coordenadas w2 y h2 donde acabará.

Agrupar imágenes: SpriteBatch:

Un SpriteBatch es una clase que agrupa todas las imágenes que quieres ser mostradas en pantalla y mas muestra todas a la vez en vez de cargarlas una a una, lo que mejora muchísimo el rendimiento y tiempo de carga.

Para poner uno en nuestro proyecto, al igual que con la imagen lo declaramos al principio:

Y lo inicializamos después de nuestra cámara en la función create():

Como con las imágenes, es muy importante que coloquemos en la función dispone el código para liberar la memoria que ocupa nuestra variable SpriteBatch. Para ello ponemos la siguiente línea dentro de la función dispose():

Renderizar las imágenes:

Para mostrar las imágenes en pantalla una vez declaradas en nuestro código, debemos irnos a la función render().

Lo primero que debemos hacer es eliminar todas las imágenes que hubiese en la pantalla para volver a pintar las nuevas:

Ahora decimos que comience el batch:

A continuación ponemos todas las imágenes (o regiones de imágenes) que queremos mandarle al batch para que las dibuje en una posición x e y determinada:

Y, tras todas esas imágenes terminamos el batch, que las pintará todas:

Notas:

• Cada vez que modifiques o añadas una imagen, en Eclipse deberás de refrescar (F5) la carpeta assets para que se actualice.
• La posición (0,0) al dibujar nuestra imagen se encuentra abajo a la izquierda de la pantalla mostrada. Esto es por la forma de trabajar de OpenGL.
• Para agilizar nuestra aplicación podemos juntar varias imágenes en una sola y crear varias TextureRegion en esta imagen final.
• Esta forma de cargar imágenes nos sirve para imágenes estáticas. Más adelante veremos como hacer animaciones (Con Sprites).
• Más adelante usaremos la clase Stage, que trae ya integrada un SpriteBatch y una cámara, y nos permite tratar con elementos que cambian a lo largo del tiempo.

Referencias:

• http://www.youtube.com/watch?v=4HMok5-3q_E

[Tutorial] Funciones importantes y ejecutar nuestra app

Buenas gente!

Hoy vengo a explicar algo bastante importante: Para qué sirve cada función de nuestra clase principal. Además veremos como hacer correr nuestra aplicación tanto en el ordenador como en nuestro teléfono móvil.

Descripción de funciones:

Ya que no tenemos una clase main, nuestra clase deberá implementar la interfaz ApplicationListener con una serie de funciones:

El uso que se le da a las funciones es el siguiente:

• create() → Se ejecuta automáticamente al iniciar el juego. Aquí deben inicializarse todas las variables.

• dispose() → Se ejecuta al terminar el juego. Se debe poner aquí las funciones para liberar memoria de imágenes, texturas, etc. Esto se debe a que el recolector de basura no las borra y se quedarían indefinidamente en memoria.

• render() → Se ejecuta cuando se va a dibujar los gráficos de la aplicación. Aquí deben ir el código de actualización de imágenes, animaciones, etc.

• resize(int width, int height) → Se ejecuta cuando se cambia el tamaño de la pantalla del juego o cuando se gira la pantalla del teléfono móvil. Aquí debe ir el código para redimensionar imágenes, etc.

• pause() → Se ejecuta cuando el juego pasa a segundo plano y queda pausado. Aquí debemos poner aquello que queramos guardar cuando se cierra el juego.

• resume() → Se ejecuta cuando vuelve a iniciarse el juego tras una pausa. Aquí debemos tener el código para cargar los datos que hemos guardado al pausar el juego.

Ejecutando nuestra aplicación:

Para ejecutar la aplicación en tu ordenador hay que abrir el proyecto name-desktop y ejecutar el archivo Main.java.

Para ejecutar la aplicación en tu móvil primero, debes tener un móvil (si, estoy graciosa) y un cable USB con el que conectarlo a tu PC.

Tendrás que configurar tu móvil y ponerlo en modo depuración para que el ADT pueda trabajar con la aplicación y conectar con tu móvil.

Para configurar en modo depuración tu móvil debes irte a ajustes → aplicaciones → Desarrollo y en ese menú activar la Depuración de USB.

Una vez conectado por USB el teléfono, vas a la clase MainActivity del proyecto name-android y darle a ajecutar. Si te pregunta, debes marcar Android-application.

Tras esto verás que se carga en tu móvil la aplicación.

Notas:

• Aunque trabajemos en 2D necesitaremos crear una cámara. Esto se debe a que este motor está pensado para gráficos 3D por lo que con esta cámara e imágenes planas crearemos el efecto 2D.
• Más adelante veremos como usar componentes que ya tienen una cámara integrada, por lo que no hará falta crearla en nuestra aplicación.
• Usaremos variables batch que agrupan imágenes. De este modo le pasamos a esta variable las imágenes y las dibuja todas de golpe, mucho más rápido que ir dibujandolas una a una.
• Si no tienes un móvil en el que probar la aplicación, siempre puedes ejecutarla en la máquina virtual de Android que te viene integrada en nuestro Eclipse modificado.

Referencias:

• http://www.youtube.com/watch?v=RXdgH1Dm5pE

[Tutorial] Antes de comenzar: Instalaciones necesarias (DESACTUALIZADO)

Esta entrada está desactualizada, puedes ver la nueva aquí

Buenas gente!

En esta entrada vamos a ver esos pasos previos algo liosos antes de poder comenzar a trastear con el código de nuestra aplicación.

En mi caso voy a usar el SDK de Android y la librería libGDK. Esta librería te permite tener tu juego tanto en el ordenador como en Android, por lo que las pruebas podrán hacerse directamente en tu ordenador y no necesitaremos usar un emulador de Android, lo que agilizará todas las pruebas.

Bueno, comencemos. Yo trabajo en Ubuntu, por lo que todas las instalaciones las haré aquí. No obstante, todo lo que voy a usar tiene su adaptación en Windows o Mac.

Descargas e instalación:

Lo primero es tener instalado Eclipse. Si no lo tenemos, es tan sencillo como instalarlo desde terminal con el comando:

 # apt-get install eclipse

Tenemos que descargarnos un par de cosas:

• La librería libGDX desde esta web.
• El ADT de Android desde esta web.

Descomprimimos el ADT donde queramos tenerlo. En mi caso lo coloqué en mi carpeta personal con el nombre ".adt-eclipse" para que se mantuviese oculta y no estorbase y luego cree un acceso directo al fichero ejecutable ".adt-eclipse/eclipse/eclipse" en mi escritorio, pero puedes ponerla donde y con el nombre que quieras.

Este fichero de antes es una versión modificada de Eclipse denominada Android IDE que viene ya preparado para comenzar a trabajar con Android.

Creación de proyectos:

Ahora nos toca crear los proyectos. Para ello usaremos un programa que nos trae libGDK para la creación automática de proyectos.
Descomprimimos el fichero que nos descargamos de la página de libGDK y ejecutamos el archivo:

gdx-setup-ui.jar

En este programa tendremos que indicarle el nombre de nuestro proyecto, donde queremos que nos lo cree y donde se encuentra el .zip de libGDX (el que nos hemos descargado antes). Tras esto pulsamos el botón de "Open the generation screen" y clickamos en "Launcher".

Tras esto se crearán en la carpeta que le indicamos varios proyectos:

• name: Contendrá el código de nuestro juego.
• name-desktop: Código relacionado con la ejecución de la app en un ordenador.
• name-android: Código relacionado con la ejecución en Android y archivos como imágenes, etc.

Puedes ponerles el nombre que quieras a tus proyectos, pero procura que sea un nombre representativo para no liarte más adelante!

Ahora tenemos que importar los proyectos que ha creado para que podamos usarlos en Eclipse. Para ello entramos dentro de Eclipse con el ejecutable de antes.

Seleccionamos "File -> Import..." y le indicamos la carpeta donde se encuentran nuestro proyectos y le damos a aceptar.

Tras esto se añadirán los proyectos a nuestro workspace y ya tendremos todo nuestro entorno listo para ponernos a trabajar en nuestra aplicación!

Notas:

• Todas las clases y código se crearán en el proyecto name. En los otros proyectos solo habrá una clase para adaptar y crear el proyecto ya sea en Android o en el ordenador y cambiar detalles como la resolución de la pantalla.
• Los archivos estáticos como las imágenes o textos irán en la carpeta assets del proyecto name-android. El resto de proyectos tienen enlazada su carpeta para poder usar estos archivos automáticamente.
• El programa de libGDX que hemos usado permite también crear proyectos para exportar tu aplicación a otras plataformas como IOs o html. Tan solo tienes que seleccionar los proyectos que deseas que te cree y deseleccionar aquellos que no te interesen.

Referencias:

• http://www.makigas.tk/

Eso es todo por ahora! Nos vemos!

Xelun.

[Inicio] Comienzo del blog

Bueno, aquí estamos en la primera entrada del blog!

Ya que nunca he hecho un blog esta será una entrada para probar como queda todo, y ver si esto sale bien, básicamente.

Este blog en un principio tratará de pequeños tutoriales acerca de android centrados mayoritariamente en la creación de un videojuego: mi pequeño gran videojuego aún sin nombre. Puesto que apenas he visto nada de Android, iremos desde cero, creando primero una pantalla de inicio, luego una de opciones... y poco a poco iremos dándole forma al juego.

El juego que tengo en mente será muy simple, peleas con bichos en 2D, con el estilo de gráficos que tanto me gusta. 

Ya que me gusta dibujar, yo misma me encargaré de la parte gráfica haciendo dibujos y animaciones propias, así que dependerá de las ganas que tenga el que haya más o menos bichos entre los que escoger para pelear y que tengan más o menos animaciones ^^"

La imagen de al lado es una primera prueba de como será alguno de los bichos. Ya lo iré cambiando lo más seguro a lo largo del tiempo.

Y bueno, nada más que decir. Comenzamos con este proyecto de videojuego que tendré que compaginar con la facultad y el otro gran proyecto de videojuego *top secret* que ya estaba haciendo desde hace un tiempecito.

Nos vemos pronto!

Xelun.