{"id":717,"date":"2017-11-23T20:40:17","date_gmt":"2017-11-23T19:40:17","guid":{"rendered":"http:\/\/www.pixnbgames.com\/blog\/?p=717"},"modified":"2017-11-23T21:02:26","modified_gmt":"2017-11-23T20:02:26","slug":"como-usar-libgdx-tiled-crear-el-tileset","status":"publish","type":"post","link":"https:\/\/www.pixnbgames.com\/blog\/libgdx\/como-usar-libgdx-tiled-crear-el-tileset\/","title":{"rendered":"C\u00f3mo usar libGDX + Tiled: crear el Tileset"},"content":{"rendered":"

Como vimos en el art\u00edculo anterior<\/a>, el tileset es la imagen que contiene las porciones del escenario. A continuaci\u00f3n veremos algunas reglas sencillas a tener en cuenta para dibujar nuestro tileset.<\/p>\n

Dimensiones<\/h4>\n

Lo primero es decidir las dimensiones de cada tile: 16×16, 32×32, 48×48, … En realidad esto es bastante subjetivo y depender\u00e1 de cada videojuego, gustos personales y resultado esperado. No estamos limitados a usar el mismo tama\u00f1o para el alto y para el ancho de cada tile: podemos usar por ejemplo 128×64.<\/p>\n

Un aspecto a considerar en este punto es la resoluci\u00f3n de pantalla para la que se dise\u00f1a el videojuego. Por ejemplo, si vamos a proyectar el videojuego a una resoluci\u00f3n de 320×240 p\u00edxeles, podemos utilizar tiles de 16×16, mientras que si el juego est\u00e1 dise\u00f1ado para 1280×720 interesar\u00eda usar tiles m\u00e1s grandes, por ejemplo de 64×64 o 128×128.<\/p>\n

Editor gr\u00e1fico<\/h4>\n

Se puede utilizar cualquier editor gr\u00e1fico con el que nos sintamos c\u00f3modos. En mi caso, para pixel art suelo utilizar Aseprite<\/a> y GIMP<\/a>, aunque existen muchas aplicaciones en el mercado tanto de pago como gratuitas. Algunas dise\u00f1adas espec\u00edficamente para pixel art, como pueden ser Aseprite o Piskel, y otras m\u00e1s gen\u00e9ricas pero que tambi\u00e9n nos servir\u00e1n en esta tarea, como pueden ser GIMP o Krita.<\/p>\n

Una de las cosas que ayuda bastante es que permita mostrar una rejilla o cuadr\u00edcula. Esto es una funcionalidad b\u00e1sica que ofrecen la mayor\u00eda de editores.<\/p>\n

Paleta de colores<\/h4>\n

Aqu\u00ed no tengo mucho que decir porque no tengo conocimientos sobre arte gr\u00e1fico. Simplemente comentar que escoger bien la paleta de colores utilizados dar\u00e1 a nuestro juego un aspecto consistente, a la vez que lo dota de ese aspecto retro que a menudo se busca en los videojuegos pixelados.<\/p>\n

 <\/p>\n

Tileset con Aseprite<\/h3>\n

Desde que descubr\u00ed esta herramienta de pixel art, la he ido utilizando cada vez m\u00e1s en mis proyectos. En mi \u00faltimo proyecto, Rainbow Diamonds<\/a>, pr\u00e1cticamente todo est\u00e1 dibujado con Aseprite<\/em><\/a>. La aplicaci\u00f3n posee una interfaz intuitiva que nos permite trabajar de forma sencilla.<\/p>\n

Para este ejemplo, usar\u00e9 una imagen de 128×128 p\u00edxeles con tiles de 16×16 p\u00edxeles, lo que me permite crear un total de 64 tiles. Una vez creado un nuevo archivo, lo primero que voy a hacer es configurar la rejilla para usarla como gu\u00eda de cada tile. Esto lo hacemos desde las opciones View<\/em> > Grid<\/em> > Grid Settings<\/em>. Establecemos el ancho y alto de cada casilla, en este caso 16 pixeles en ambos, y pulsamos OK<\/em>. Autom\u00e1ticamente se mostrar\u00e1 la rejilla que nos servir\u00e1 de gu\u00eda para dibujar los tiles.<\/p>\n

\"\"<\/p>\n

Utilizando las herramientas de dibujo, creamos los tiles que iremos necesitando. Para este ejemplo, como se puede ver en la siguiente imagen, he dibujado unos tiles para el suelo del escenario, otros para hacer agua, una casa y un arbusto.<\/p>\n

\"\" Si nos fijamos, la casa y el arbusto ocupan m\u00e1s de un tile. Esto no es problema ya que simplemente a la hora de dise\u00f1ar el escenario, colocaremos estos tiles juntos para se muestren estos elementos correctamente. Lo que s\u00ed hay que tener en cuenta es que en un mismo tile no haya trozos de imagen de elementos distintos.<\/p>\n

Para finalizar, exportaremos el archivo con el nombre tileset.png<\/em><\/strong>.<\/p>\n

A continuaci\u00f3n dise\u00f1aremos el escenario<\/a> a partir de nuestro tileset.<\/p>\n

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

Como vimos en el art\u00edculo anterior, el tileset es la imagen que contiene las porciones del escenario. A continuaci\u00f3n veremos algunas reglas sencillas a tener en cuenta para dibujar nuestro tileset. Dimensiones Lo primero es decidir las dimensiones de cada Seguir leyendo C\u00f3mo usar libGDX + Tiled: crear el Tileset<\/span>→<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":736,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[14],"tags":[56,15,55],"language":[5],"_links":{"self":[{"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/posts\/717"}],"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=717"}],"version-history":[{"count":12,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/posts\/717\/revisions"}],"predecessor-version":[{"id":769,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/posts\/717\/revisions\/769"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/media\/736"}],"wp:attachment":[{"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/media?parent=717"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/categories?post=717"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/tags?post=717"},{"taxonomy":"language","embeddable":true,"href":"https:\/\/www.pixnbgames.com\/blog\/wp-json\/wp\/v2\/language?post=717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}