domingo, 28 de diciembre de 2014

Tiled + Box2D Parte 2

En la parte 1 del tutorial aprendimos que es Tiled y como crear mapas con el, ahora vamos a aprender a como crear objetos con propiedades para utilizarlos dentro de nuestra aplicacion.

Agregar objetos

Los objetos que agregemos son de mucha utilidad ya que pueden nos pueden decir donde va colisionar un cuerpo con otro. Para agregar objetos se necesita una capa de objetos para esto seleccionamos la opcion Layer > Add Object Layer. Ahora tenemos una nueva capa de objetos como se puede ver en la siguiente imagen.


Despues seleccionamos una opcion para agregar un objeto en este ejemplo seleccionamos Add Rectangle:


Seleccionamos el punto en el mapa donde queremos agregar el objeto y creamos el rectangulo. Como se ve en la siguiente imagen se agrego un rectangulo para cada una de las plataformas.


Tambien vamos a agregar un objeto para el piso, pero ahora seleccionamos la opcion de Insert Polyline y ponemos el objeto como se ve en la imagen siguiente


Ya hemos agregado objetos a las plataformas y al piso, tambien vamos a agregar otros pequeños objetos que una vez pasados a Libgdx seran las monedas del juego. Nuestro mapa se vera de esta forma:


Ya se han agregado los objetos de las monedas pero hay un problema cuando sea necesario crear los cuerpos en Box2d ¿como vamos a diferenciar cual es el piso, las monedas y cuales son la plataformas? Para esto es necesario agregar propiedades.

Agregar propiedades a los objetos

En este ejemplo las propiedades van ayudar a diferenciar cada uno de los objetos ya sean las monedas, el piso o las plataformas.
Primero vamos a agregar colores a los distintos tipos de objetos. Seleccianmos Tiled > Preferences... > Object Types. Damos click en el + para agregar un nuevo tipo de objeto y le damos un nombre y seleccionamos un color. Despues de agregar la moneda, el piso y la plataforma debe quedar asi:


Es importante notar que tenemos 3 tipos de moneda diferente esto porque se podra agregar monedas que valen 1, 5 y 10.
El siguiente paso es muy sencillo solo es necesario agregar las propiedades a los objetos, para esto se da click derecho al objeto y se selecciona la opcion Object Properties...


En la ventana que aparece podemos ver que existen muchas propiedades (Name, Type, Position, etc). Nosotros vamos a modificar la opcion Type y vamos a escribir uno de los tipos que agregamos en el paso anterior.


Como se puede ver al seleccionar el tipo, el objeto cambia al color negro de esta forma es mas facil reconocer a que objetos ya le hemos dado propiedades.
Despues de dar propiedades a todos los objetos el mapa se vera de asi:


Con esto ya todos los objetos tienen propiedades por lo que podremos diferenciar cada uno cuando los pasemos a Libgdx.

Con esto terminamos con la parte 2 de este tutorial en la parte 3 podremos ver como pasar el mapa creado a Libgdx asi como crear los cuerpos de Box2d dependiento de cada una de las propiedades que agregamos en Tiled.

viernes, 10 de octubre de 2014

Tiled + Box2D Parte 1

En esta parte del tutorial vamos a utilizar Tiled para crear mapas.

¿Que es Tiled?

Tiled es un editor que permite el uso de "tiles" para crear facilmente mapas. Tambien se pueden agregar mas cosas como las posiciones de los enemigos, las posiciones de monedas, items del juego, etc. La siguiente imagen muestra un juego echo con Tiled.



¿Como funciona Tiled?

La creacion de mapas con Tiled es muy sencilla.
  • Se selecciona el tamaño del mapa
  • Se agregan las imagenes (tilesets) al mapa
  • Se colocan los tilesets en el mapa
  • Se agregan objetos al mapa
  • Se guarda el mapa como un archivo tmx
  • Se importa el archivo tmx al juego


Crea tu primer mapa

En esta parte del tutorial utilizaremos el tileset creados por Kenney. Se puede descargar directamente aqui el tileset que utilizaremos a lo largo de este tutorial.

Configuración

Despues de abrir Tiled vamos a File > New... para crear un nuevo mapa. Aparecera la siguiente ventana donde tenemos que configurar algunas opciones:


Orientation: Existen dos opciones que son isometric y orthogonal. Para este tutorial seleccionaremos Orthogonal. En cuanto a la vista isometrica se puede decir que es una forma de representar un objeto ee 3D en 2D.

Layer Format: Es el tipo de codificacion y compresion del mapa, en este tutorial se utilizara Base64(uncompressed) ya que la documentacion de LibGdx dice que si queremos que el mapa sea soportado en GWT debe tener este formato.

Tile size: Es el tamaño que tiene queda tile del tileset, en este caso cada tile es de 70x70 pixeles.

Map size: Es el tamaño de tiles que tendra nuestro mapa de ancho y de alto, en este caso 15 tiles de ancho y 15 tiles de alto.

Ahora es necesario agregar el tileset. Vamos a Map > New TileSet... Aparece la siguiente ventana:


Name: Nombre del tileset.

Image: Es la ruta donde esta el tileSet. En este tutorial hay que seleccionar el que descargamos anteriormente.

Use transparent color: Esta opcion hace que el color de la transparencia se muestre del color que seleccionamos. No se seleccionara esta opcion.

Tile width y Tile height: Es el ancho y la altura de cada tile, en este caso son de 70x70 pixeles.

Las demas opciones las dejaremos con valor de 0 pixeles ya que no son necesarias para este tutorial.

Al dar clic en OK Tiled se vera asi:


Agregar tiles

El siguiente paso es agregar los tiles al mapa, para esto es necesario ir a parte inferior derecha y seleccionar un tile. Se pueden seleccionar uno o muchos tiles al mismo tiempo en este caso solo seleccionare el tile del piso. Despues nos vamos al area gris donde podemos estampar los tiles en la cuadricula.


Si quisieras borrar algun tile en la parte superior se encuentra la opcion para borrar. Tambien es posible rotar e invertir los tiles presionando las teclas X y Z.

Despues de agregar algunos tiles, se tiene el siguiente mapa:


Agregar tiles en primer plano

En Tiled es posible agregar tiles que se sobrepongan sobre otros tiles para esto es necesario crear una nueva capa. Se selecciona la opcion Layer > Add Tile Layer.
Ahora se tiene una nueva capa llamada Tile Layer 2. Con la capa Tile Layer 2 seleccionamos una roca y la colocamos sobre algun tile del Tile Layer 1.


Despues de agregar algunos tiles en las diferentes capas tenemos un mapa como el siguiente:


Con esto terminamos la primera parte de este tutorial, en la parte 2 vamos a ver como agregar objetos y propiedades a estos para despues utilizalos en Libgdx y crear cuerpos de Box2D.

sábado, 28 de junio de 2014

Libgdx + Gradle + Admob (Google Play Services).

Este tutorial es especifico para android. Vamos a agregar un banner en la parte superior y mostraremos un anuncio de pantalla completa a nuestro juego.

Comenzamos con un proyecto nuevo, pueden revisar el tutorial de como crear proyectos Setting up, al cual agregarmos Google Play Services.


1.- Creamos una interfaz en el proyecto principal (core) en este ejemplo la interfaz se llamara AdHandler.


2.- Agrego un funcion que servira para mostrar el anuncio de pantalla completa cada vez que sea llamada.

3.- Creamos una objeto de la interfaz AdHandler en la clase MyNewGame y lo inicializamos en el constuctor.

4.- Despues creamos una interfaz grafica que solo va contener un boton, cada vez que este sea presionado se mostrara un anuncion de pantalla completa.

Como se puede ver creamos un ImageButton este boton servira para llamar la funcion showInterstitial() de la interfaz AdHandler, En nuestro ejemplo este es llamado en la funcion touchUp().

Si corremos nuestra aplicacion debe aparecer la siguiente pantalla. Podemos presionar la imagen pero no mostrara nada ya que aun no agregamos el codigo de los anuncios.



5.- Agregamos Google Play Services al proyecto de Android. Para esto es necesario abrir el archivo 'build.gradle' y agregar la siguiente linea al proyecto de android
  •   compile "com.google.android.gms:play-services:4.2.+"




6.- Hacemos un "refresh all" para que se actualizen las librerias.


"Despues de realizar el paso 6 la libreria de Google Play Services se debe agregar al proyecto, pero ya que el gradle aun se encuentra en sus etapas iniciales en Eclipse tambien es necesario agregar Google Play Services como una libreria."

Para agregar Google Play Services damos click derecho a nuestro proyecto de android, seleccionamos la opcion de propiedades y se abrira la siguiente ventana. 


Como se puede observar en la parte inferior derecha tenemos la opcion para agregar la libreria, la agregamos y damos click en OK.

7.- Agregamos los permisos necesarios al archivo Manifest.xml

8.- Agregamos el metadata tag y la actividad de admobs al archivo Manifest.xml

9.- Despues vamos a agregar un banner y un anuncio de pantalla completa como se puede ver en el siguiente codigo.
Una vez terminado nuestra aplicación se vera asi:

Recuerden si presionamos el boton del centro debe mostrar un anuncio de pantalla completa.

Y como siempre aqui les dejo el codigo: Codigo fuente