{"id":720,"date":"2017-11-23T21:01:53","date_gmt":"2017-11-23T20:01:53","guid":{"rendered":"http:\/\/www.pixnbgames.com\/blog\/?p=720"},"modified":"2017-11-23T21:01:53","modified_gmt":"2017-11-23T20:01:53","slug":"como-usar-libgdx-tiled-diseno-del-escenario","status":"publish","type":"post","link":"https:\/\/www.pixnbgames.com\/blog\/libgdx\/como-usar-libgdx-tiled-diseno-del-escenario\/","title":{"rendered":"C\u00f3mo usar libGDX + Tiled: dise\u00f1o del escenario"},"content":{"rendered":"

Opciones existentes<\/h3>\n

Tenemos muchas posibilidades para generar el mapa del escenario a partir de nuestro tileset. Podemos crear el archivo de forma manual, utilizar un editor de mapas gen\u00e9rico, o utilizar un editor incluido en el propio motor del juego.<\/p>\n

Generaci\u00f3n propia<\/h4>\n

Si creamos el mapa de forma manual o nos hacemos nuestro propio editor tendremos total libertad para definir el formato del mapa en base a nuestras necesidades. Necesitaremos dos funciones b\u00e1sicas: poder identificar cada tile del tileset, e indicar c\u00f3mo se distribuyen esos tiles. Como ejemplo, una aproximaci\u00f3n muy simple ser\u00eda tener un solo tile, y un archivo de texto formado por ceros y unos que indica que partes del escenario est\u00e1n rellenas y cuales no:<\/p>\n

\"\"<\/p>\n

Hacernos nuestra propia implementaci\u00f3n de mapas implica que tambi\u00e9n tendremos que crear el c\u00f3digo necesario para leer y dibujar el mapa en nuestro juego. Esto puede suponer una desventaja para algunos programadores por el tiempo y conocimiento necesarios para hacerlo.<\/p>\n

Editor gen\u00e9rico<\/h4>\n

Presenta la ventaja de que son programas espec\u00edficos para el dise\u00f1o de mapas y ofrecen las herramientas necesarias para ello. Conviene tener en cuenta si el motor sobre el que desarrollaremos nuestro videojuego soporta el tratamiento de mapas en el formato generado por el editor. En caso contrario, siempre podremos crearnos nuestras propio c\u00f3digo para interpretar y dibujar los mapas.<\/p>\n

Incluido en el motor del juego<\/h4>\n

Alguno motores como Unity<\/em>, GameMaker<\/em> o SpriteKit<\/em> ofrecen su propio dise\u00f1ador de niveles a partir de tiles. Adem\u00e1s de poder gestionar todo el proceso de dise\u00f1o desde la misma herramienta, tenemos garantizada la compatibilidad con el motor al 100%. Como contrapartida encontramos que de esta forma en principio estamos ligados a utilizar un motor de juegos concreto.<\/p>\n

 <\/p>\n

Tiled Map Editor<\/h3>\n

En mi caso, utilizo Tiled Map Editor<\/em><\/a> porque cubre sobradamente mis necesidades para crear niveles y adem\u00e1s tiene un buen soporte por parte de libGDX<\/em>, por lo que resulta sencillo combinar ambas herramientas.<\/p>\n

Partiendo del tileset creado en el art\u00edculo anterior<\/a>, crearemos un nuevo proyecto en Tiled<\/em> con orientaci\u00f3n Ortogonal<\/em>, y definiendo el tama\u00f1o del patr\u00f3n usado por nuestros tiles: 16 p\u00edxeles de ancho y 16 de alto. Adem\u00e1s, este mapa tendr\u00e1 un tama\u00f1o de 30 tiles de ancho x 20 tiles de alto.<\/p>\n

\"\"<\/p>\n

Guardamos el archivo con el nombre level.tmx<\/strong><\/em> en la misma ruta donde se encuentra nuestro tileset (esto no es necesario pero facilitar\u00e1 seguir este turorial).<\/p>\n

A continuaci\u00f3n cargamos nuestro tileset al proyecto. Esto lo hacemos desde el panel \u00abConjunto de patrones<\/em>\u00ab, situado en la parte inferior derecha de la aplicaci\u00f3n. Pulsamos sobre el icono \"\" > Seleccionamos nuestro archivo tileset.png<\/em>, establecemos 16 p\u00edxeles como ancho y alto del conjunto de patrones, y pulsamos OK<\/em>.<\/p>\n

\"\"<\/p>\n

Ahora podemos ver nuestro tileset cargado en el conjunto de patrones. Utilizando la herramienta Brocha de Estampar<\/em>, vamos dibujando nuestro escenario utilizando nuestros tiles. Mi composici\u00f3n es la siguiente:<\/p>\n

\"\"<\/p>\n

En el siguiente art\u00edculo comenzaremos a dibujar nuestro escenario con libGDX<\/em>.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Opciones existentes Tenemos muchas posibilidades para generar el mapa del escenario a partir de nuestro tileset. Podemos crear el archivo de forma manual, utilizar un editor de mapas gen\u00e9rico, o utilizar un editor incluido en el propio motor del juego. Seguir leyendo C\u00f3mo usar libGDX + Tiled: dise\u00f1o del escenario<\/span>→<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":738,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[14],"tags":[15,55],"language":[5],"_links":{"self":[{"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/posts\/720"}],"collection":[{"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/comments?post=720"}],"version-history":[{"count":10,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/posts\/720\/revisions"}],"predecessor-version":[{"id":768,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/posts\/720\/revisions\/768"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/media\/738"}],"wp:attachment":[{"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/media?parent=720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/categories?post=720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/tags?post=720"},{"taxonomy":"language","embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/language?post=720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}