Aprende Java Aprende Php Aprende C++ Aprende HTML 5 Aprende JavaScript Aprende JSON Aprende MySQL Aprende SQLServer Aprende Visual Basic 6 Aprende PostgreSQL Aprende SQLite Aprende Redis Aprende Kotlin Aprende XML Aprende Linux VSC Aprende Wordpress Aprende Laravel Aprende VueJS Aprende JQuery Aprende Bootstrap Aprende Netbeans Aprende Android
Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube Sigueme en TikTok Sigueme en Whatsapp
Home / Android / Uso de Tile Map en LibGDX

Uso de Tile Map en LibGDX

Por 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

Artículos similares

Crear archivos JNLP con Netbeans

¿Que son los archivos JNLP? Java Network Launching Protocol (JNLP) es una especificación usada por Java Web Start. Esta[...]

Ejemplo RESTFul Webservice en Java

En este post construiremos un Servicio Web en Java bajo el estandar REST (Representational State Transfer), el cual hace[...]

Utiliza 2 bases de datos diferentes en una aplicación parte I

Cuando se desarrolla una aplicación, puede ser un requisito que este tenga soporte para varias tipos de base de datos, s[...]

Reconocimiento Óptico de Caracteres con Tess4J

El reconocimiento óptico de caracteres o OCR (Optical Character Recognition), es un proceso dirigido a la digitalización[...]

Crear un Exe para programas Java con JavaExe

En este videotutorial veremos la forma de crear un ejecutable para programas hechos en lenguaje Java con el software Jav[...]

Crear Helpers en Laravel 10

El archuivo helpers.php en Laravel contiene funciones globales de PHP los cuales se pueden utilizar en cualquier parte d[...]