Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Android / Uso de Tile Map en LibGDX

Uso de Tile Map en LibGDX

Autor jc mouse jueves, octubre 3, 2013

En esta ocasión vemos un ejemplo sencillo de como usar Tile Map en nuestros juegos android con la librería LibGDX utilizando como IDE, Eclipse Indigo.

sony games

Comencemos por el principio 🙂

¿Que es un Tile Map y porque usarlo en los juegos?

tile

Un tile maps es una imagen formada por polígonos generalmente cuadrados donde cada celda contiene una imagen que no se repite en las demás celdas. A primera vista un tile maps parece una imagen sin sentido, pero su poder radica en crear a partir de esas celdas imágenes complejas y de gran tamaño (escenarios para juegos) que pueden ser cargados en el juego rápidamente y con bajo consumo de recursos.

¿Qué necesito para usar Tile Map en mis juegos android?

Existen varios editores de mapas, sin embargo el recomendado por el propio LibGDX es Tiled Map Editor que es Free, pequeño y fácil de usar. Ademas genera el archivo *.TMX que es un archivo de texto con código XML en donde se indica los parámetros del mapa creado con Tiled Map Editor y que es necesario para su uso en android.

Implementar el tiled map en una aplicación android es bastante sencillo, a continuación explicamos como.

1. Una ves que tenemos nuestro archivo Tile Map creado ya sea desde un editor de imágenes o descargado de internet, debemos cargarlo en el Tiled Map Editor.

Archivo -> Nuevo -> y completamos los siguientes datos

Orientación: Ortogonal

Tamaño de mapa: 50×30 (Es una matriz)

Tamaño del Patrón: 16×16 (Tamaño de cada celda)

Esto da como resultado un mapa de dimensiones 800 x 480 pixeles

Para cargar el archivo de imagen, Mapa -> Nuevo conjunto de patrones -> buscamos la imagen en disco y cargamos.

Nos tomamos nuestro tiempo en crear un escenario y cuando estemos listos, creamos nuestro archivo *.TMX

2. Ahora trabajamos en eclipse, debemos colocar el Tile Map (archivo de imagen) y el archivo *.TMX en la carpeta ASSETS.

OJO: Verifica que la dirección de la imagen sea la misma que la del archivo tmx, para esto abre el archivo con un editor de texto y busca la etiqueta “<image source=’mitilemap.png’ “.

3.  La clase que implementa ApplicationListener llevara el siguiente código:

01 package com.bolivia.libgdxtiledmap;
02 
03 import com.badlogic.gdx.ApplicationListener;
04 import com.badlogic.gdx.Gdx;
05 import com.badlogic.gdx.graphics.GL10;
06 import com.badlogic.gdx.graphics.OrthographicCamera;
07 import com.badlogic.gdx.maps.tiled.TiledMap;
08 import com.badlogic.gdx.maps.tiled.TmxMapLoader;
09 import com.badlogic.gdx.maps.tiled.renderers.OrthogonalTiledMapRenderer;
10 
11 public class MiMundo implements ApplicationListener{
12  
13  TiledMap map;
14  OrthogonalTiledMapRenderer renderer; 
15  OrthographicCamera camera;
16  float unitScale = 16;
17  
18  @Override
19  public void create() {
20   //se carga el tilemap
21   map = new TmxMapLoader().load("mimundo.tmx");
22   
23   camera = new OrthographicCamera();
24   camera.setToOrtho(false, 800 / unitScale, 480 / unitScale);
25     
26   renderer = new OrthogonalTiledMapRenderer(map, 1 / unitScale );
27   renderer.getSpriteBatch().disableBlending();
28   renderer.setView(camera); 
29   
30  }
31 
32  @Override
33  public void dispose() { /*...*/ }
34 
35  @Override
36  public void pause() { /*...*/ }
37 
38  @Override
39  public void render() { 
40   Gdx.gl.glClearColor( 0, 0, 0.5f, 1);
41   Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
42   //habilita transparencia
43   Gdx.gl10.glAlphaFunc(GL10.GL_GREATER, 0.5f);
44   Gdx.gl10.glEnable(GL10.GL_ALPHA_TEST);
45   //
46   camera.update();
47   renderer.setView(camera);   
48   renderer.render();
49  }
50 
51  @Override
52  public void resize(int arg0, int arg1) { /*...*/ }
53 
54  @Override
55  public void resume() { /*...*/ }
56 
57 }

#21 Se carga el archivo *.tmx

#23 … #28 Creamos OrthographicCameray el OrthogonalTiledMapRenderer de acuerdo al numero de celdas que tenemos en el escenario, en este caso una matriz de 50×30 con una dimensión de 16x16px por celda nos da un escenario de 800×480

#43,#44 nuestro tile map tiene un formato *.PNG con transparencia, así que debemos habilitar las transparencias en LibGDX

#46…#48 Finalmente mostramos el escenario

sony games

Descargate el ejemplo completo + los archivos tile map y tmx utilizados en estepost exactamente desde AQUI

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Empaquetar aplicación android para su distribución

Empaquetar aplicación android para su distribución

Cuando tenemos nuestra aplicación android terminada, lo siguiente es distribuirla ya sea en el Google Play o independien...

JSCRUM .:. Gestor de Proyectos

JSCRUM .:. Gestor de Proyectos

¿Qué es SCRUM? SCRUM es un modelo de referencia que define un conjunto de prácticas y roles, y que puede tomarse como pu...

Minimizar aplicación al SystemTray/Bandeja del Sistema

Minimizar aplicación al SystemTray/Bandeja del Sistema

El SystemTray/Bandeja del Sistema o como también se le llama “Área de Notificación” es la sección de la barr...

Instalación de Netbeans en Ubuntu

Instalación de Netbeans en Ubuntu

Netbeans es uno de los entornos de desarrollo integrado (Integrated Development Environment – IDE)  más conocidos...

Borrar código protegido en Netbeans

Borrar código protegido en Netbeans

Cuando programamos visualmente desde Netbeans, el IDE nos ayuda mucho al generar rapidamente código predefinido, sin emb...

Crea un servicio web REST con PHP y MYSQL

Crea un servicio web REST con PHP y MYSQL

Servicio Web Un servicio web (en inglés, Web Service o Web services) es una tecnología que utiliza un conjunto de protoc...

16 comentarios en “Uso de Tile Map en LibGDX”

  1. ASHLEYCOLE dice:

    Hola que tal..muy bueno tu tutorial…………….Una pregunta sabes estoy aciendo una aplicacion en netbeans y sql…en la cual debo guardar imagenes (DE BEANS A SQL)..La cosa es que ya tengo la imagen en Label …(la importe con OpenFile)..pero no encuentro la manera de enviarla a mi base de datos SQL…Me podrias dar algunas pautas xfa….GRACIAS DE ANTEMANO.Y SALU2 DESDE PERU

    1. Mouse dice:

      para guardar la imagen en la base de datos, necesitas el fichero de imagen, cuando pones la imagen en el jlabel , la estas cargando de alguna parte, debes usar esa direccion a la hora de guardar la imagen en la base de datos

  2. juan dice:

    He bajado el proyecto pero al momento de seleccionar una pestaña no pinta el color de selección??

    Hace falta realizar algo mas?

  3. Albert dice:

    Hola, muy buena explicación, espero que no te moleste mi pregunta pero lo que entendí es que:

    ¿Solamente guardaste un String (Mi Objeto en DAT) y 2 métodos (Suma(int, int) y Resta(int, int))?
    Es correcto?

    Saludos

  4. darwinzitto dice:

    buenisimo amigo jc-mouse

  5. Oscar dice:

    hola,

    que paso si tengo un lector de huellas y una webCam?,
    el lector también es una camara y me selecciona el lector por defecto

  6. juan carlos dice:

    hola, me ayudo mucho tu post, pero tengo un problema, y es que en el Jtable antes de aplicar tu ejemplo podía seleccionar varia filas, y se podia ver las filas seleccionadas porque se pintaban de azul. ahora ya despues de aplicar tu ejemplo puedo seleccionar varia filas pero no me las colorea de azul, solo me colorea la margen de una celda que este seleccionando; pero si selecciona las filas. la pregunta es como puedo volver a darle color cuando selecciona varias filas.

  7. juan carlos diaz dice:

    Amigo una pregunta si quiero que el detalle del subreporte no crezca osea se muestro solo lo que cabe en el espacio definido se puede?

  8. Kristian dice:

    Interesante tutorial..He seguido al pie de la letra las instruccones…en NetBenas 7.3.1
    y tenia un porblema por error de sintaxis..(Ya lo solucione) …muchachos hay k tener bastante cuidado en cada line de codigo….Esa es mi experiencia de este tutorial…

  9. jean paul dice:

    muy bueno muchas graciasss

  10. ASHLEYCOLE dice:

    TA XEVERE PERO COMO SERIA CON SQLServer……………..XFA AYUDAME……EN UNA SEMANA VOY A PRESENTAR MI PROYECTO….ESTARIA XEVERE SI LE AUMENTO ESTO

  11. Mauricio dice:

    Broder una pregunta, nesesito en un jtable tener una columna con botones, la cual al pinchar aumente el valor de la etiqueta, y al dar click derecho un reset que ponga el valor de la columna a 0, estoy algo perdido, no se como manipular el cellredered de java.

  12. dawinzito dice:

    muybueno jcmouse pero podrias subirlo de nuevo porfa o actulizar no se puede descargar…gracias brother

    1. Mouse dice:

      el link esta activo

      1. JEN dice:

        Muy bueno pero no lo puedo descargar

  13. Jahir Figueroa dice:

    Hola muy buen tutorial, tengo una duda sobre estas lineas de codigo.
    camera.setToOrtho(false, 800 / unitScale, 480 / unitScale);
    renderer = new OrthogonalTiledMapRenderer(map, 1 / unitScale );
    probe con otros valores y no se ajustan a la pantalla y con tus medidas si cubre toda.
    ¿Hay alguna logica al escoger la unidad?
    Gracias de antemano y saludos sigue asi.

Los comentarios estan cerrados

Comparte lo que sabes

Categorias

Últimas entradas

“MyBatis es una herramienta de persistencia Java que se encarga de mapear sentencias SQL y procedimientos almacena...

MyBatis es un framework de persistencia Java que se encarga de mapear sentencias SQL y procedimientos almacenados a part...

Webcam Capture es un API  que permite usar una cámara web incorporada o externa directamente desde código Java utilizand...

im4java es una interfaz pura de Java para la línea de comandos de ImageMagick. La interfaz de la línea de comandos de IM...

Herramientas

Generador de Enlaces a Whatsapp