{"id":709,"date":"2017-11-23T20:35:15","date_gmt":"2017-11-23T19:35:15","guid":{"rendered":"http:\/\/www.pixnbgames.com\/blog\/?p=709"},"modified":"2017-11-23T20:35:15","modified_gmt":"2017-11-23T19:35:15","slug":"como-usar-libgdx-tiled-introduccion","status":"publish","type":"post","link":"https:\/\/www.pixnbgames.com\/blog\/libgdx\/como-usar-libgdx-tiled-introduccion\/","title":{"rendered":"Como usar libGDX + Tiled: introducci\u00f3n"},"content":{"rendered":"<h3>Tiles<\/h3>\n<p>Uno de los m\u00e9todos utilizados para crear videojuegos 2D es el sistema de tiles. Explicado de forma muy gen\u00e9rica, consiste en tener una imagen global que contiene porciones del escenario a modo de azulejos, y esos \u00abazulejos\u00bb son combinados para formar un escenario completo.<\/p>\n<h4>Tileset<\/h4>\n<p>La imagen que contiene los tiles se conoce como <em>Tileset<\/em>. El siguiente es un ejemplo de uno de los tilesets utilizados en mi juego <a href=\"http:\/\/www.pixnbgames.com\/rainbowd.html\" target=\"_blank\" rel=\"noopener\">Rainbow Diamonds<\/a>:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-712\" src=\"http:\/\/www.pixnbgames.com\/blog\/wp-content\/uploads\/2017\/11\/tileset_0.png\" alt=\"\" width=\"255\" height=\"183\" \/><\/p>\n<h4>Mapa<\/h4>\n<p>El mapa es el archivo que define como se combinan los tiles para formar el escenario completo. Este archivo podemos generarlo nosotros manualmente, o podemos utilizar alguno de los editores existentes que nos facilitar\u00e1n enormemente el trabajo.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-medium wp-image-714\" src=\"http:\/\/www.pixnbgames.com\/blog\/wp-content\/uploads\/2017\/11\/Captura-de-pantalla-2017-11-20-a-las-20.52.50-300x205.png\" alt=\"\" width=\"300\" height=\"205\" srcset=\"https:\/\/www.pixnbgames.com\/blog\/wp-content\/uploads\/2017\/11\/Captura-de-pantalla-2017-11-20-a-las-20.52.50-300x205.png 300w, https:\/\/www.pixnbgames.com\/blog\/wp-content\/uploads\/2017\/11\/Captura-de-pantalla-2017-11-20-a-las-20.52.50-768x525.png 768w, https:\/\/www.pixnbgames.com\/blog\/wp-content\/uploads\/2017\/11\/Captura-de-pantalla-2017-11-20-a-las-20.52.50-1024x700.png 1024w, https:\/\/www.pixnbgames.com\/blog\/wp-content\/uploads\/2017\/11\/Captura-de-pantalla-2017-11-20-a-las-20.52.50.png 1144w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>Algunos motores de videojuegos incluyen su propio editor de tiles y mapas (<em>GameMaker<\/em>, <em>Unity<\/em>, <em>SpriteKit<\/em>, &#8230;), y tambi\u00e9n existen editores gen\u00e9ricos que no est\u00e1n ligados a ning\u00fan motor concreto, como pueden ser <em>Tile Studio<\/em>, <em>Mappy Editor<\/em> o el que usar\u00e9 en estos ejemplos: <a href=\"http:\/\/www.mapeditor.org\/\">Tiled Map Editor<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<h3>Motor de juegos<\/h3>\n<p>Una vez que tenemos nuestros tileset y mapas necesitaremos interpretarlos desde nuestra aplicaci\u00f3n, ya que como m\u00ednimo necesitaremos dibujarlos en nuestras escenas. Una de las razones por las que utilizo <em>Tiled Map Editor<\/em> es precisamente que <em>libGDX<\/em> contiene funciones para dibujar y tratar los mapas generados con esta herramienta, por lo que no tendremos que preocuparnos por implementar el c\u00f3digo necesario para ello.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-medium wp-image-598\" src=\"http:\/\/www.pixnbgames.com\/blog\/wp-content\/uploads\/2017\/08\/rd_libgdx-300x146.png\" alt=\"\" width=\"300\" height=\"146\" srcset=\"https:\/\/www.pixnbgames.com\/blog\/wp-content\/uploads\/2017\/08\/rd_libgdx-300x146.png 300w, https:\/\/www.pixnbgames.com\/blog\/wp-content\/uploads\/2017\/08\/rd_libgdx.png 705w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3>Consideraciones<\/h3>\n<p>Existen muchos tipos de videojuegos en los que podemos usar tiles. En general, esta t\u00e9cnica funciona muy bien con videojuegos pixelados porque es m\u00e1s f\u00e1cil encajar los tiles entre s\u00ed que si usamos, por ejemplo, un estilo de pintura digital.<\/p>\n<p>En posteriores art\u00edculos iremos viendo c\u00f3mo crear y dibujar tiles con Tiled y libGDX.<\/p>\n<p>Saludos,<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tiles Uno de los m\u00e9todos utilizados para crear videojuegos 2D es el sistema de tiles. Explicado de forma muy gen\u00e9rica, consiste en tener una imagen global que contiene porciones del escenario a modo de azulejos, y esos \u00abazulejos\u00bb son combinados <a class=\"more-link\" href=\"https:\/\/www.pixnbgames.com\/blog\/libgdx\/como-usar-libgdx-tiled-introduccion\/\">Seguir leyendo <span class=\"screen-reader-text\">  Como usar libGDX + Tiled: introducci\u00f3n<\/span><span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":714,"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\/709"}],"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=709"}],"version-history":[{"count":5,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/posts\/709\/revisions"}],"predecessor-version":[{"id":725,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/posts\/709\/revisions\/725"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/media\/714"}],"wp:attachment":[{"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/media?parent=709"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/categories?post=709"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/tags?post=709"},{"taxonomy":"language","embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/language?post=709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}