miércoles, 14 de diciembre de 2016

Las 12 Uvas Game Jam

¿Quiéres hacer un juego en 15 días? ¿Estás listo para experimentar con ideas innovadoras y divertirte en el proceso?

las12uvas

El foro Gamedev Hispano presenta su primera game jam, un evento donde tendrás que desarrollar un juego de cero, teniéndolo que acabar antes de que termine el año.

Se trata de las 12 uvas game jam y cualquiera puede participar tanto de forma individual como por equipos. Esta competición tiene pocas reglas y es ideal si es tu primera game jam, aunque seguro que si has participado en otras también te gustará. El tema elegido es: Hasta la vista 2016.

Se puede programar el juego como quieras (Unity, Phaser, libGDX, Corona, LUA,...) siempre que sea capaz de funcionar al menos en Windows, Linux, Mozilla Firefox (HTML5) o Android. Se valorará creatividad y diversión, pero también se puntuará el uso que le dan los participantes al foro.

¿A qué esperas? Tienes toda la información en el foro.

lunes, 5 de diciembre de 2016

Inauguramos el foro Gamedev Hispano

Hoy tenemos el honor de anunciar la inauguración del foro en español Gamedev Hispano. Un foro para preguntar, debatir y descubrir. En esta primera fase nos hemos centrado en juegos HTML5, con dos motores en particular: Phaser y Babylon.js, aunque el foro en sí no está restringido (de hecho hay categorías para SDL, Godot, libGDX, Ogre3D y PyGame).

http://gamedevhispano.com



Creemos que solo con este blog no podemos satisfacer todas las necesidades de información sobre Phaser que necesitan los desarrolladores, por eso el foro nos parece una idea fantástica, donde la comunidad podrá ayudarse mutuamente. Sin embargo no temáis, esta web seguirá subiendo tutoriales.

Desde esta web os animamos a que os registreis y hagáis de Gamedev Hispano un sitio de referencia para el aprendizaje de Phaser.

miércoles, 30 de noviembre de 2016

Llega Phaser CE (Community Edition)

Si solo hace unos días hablábamos de que Phaser 3.0, ahora Richard Davey anuncia Phaser CE, una versión comunitaria de la rama 2.x.

Mientras el desarrollo principal se sigue centrando en Phaser 3.0 y la última versión oficial de Phaser sigue siendo la 2.6.2, se creará en GitHub una rama separada, derivada de la inconclusa Phaser 2.7. Esta versión dispone de otro nombre en npm (phaser-ce en vez de phaser). Y se ha anunciado que prácticamente todas las pull-request hechas en la rama de Phaser CE serán aceptadas.



Así pues, la rama 2.x seguirá viva en Phaser CE, cuyo progreso dependerá únicamente de la gente que se anime a colaborar. Un modelo innovador que veremos si consigue mejorar de forma significativamente la rama 2.x.


viernes, 25 de noviembre de 2016

Se acelera el desarrollo de Phaser 3.0

En diciembre de 2014, Richard Davey comenzó el desarrollo de Phaser 3.0, también conocido como Lazer. Sus objetivos eran rediseñar Phaser para adaptarlo a las novedades que introducía ES6 (la nueva versión de JavaScript). Y de esa manera conseguir aprovechar al máximo la potencia de los navegadores manteniendo a Phaser como una librería moderna.



Durante este tiempo, Phaser 3.0 se ha ido desarrollando de forma paralela a la rama Phaser 2.x. Phaser 3.0 introduce varios cambios, que detallaremos en profundidad en otro artículo, siendo uno de los más controvertidos la eliminación de PIXI como librería de renderizado. En su lugar, Phaser traerá consigo un nuevo y mejorado motor de renderizado, que a diferencia de PIXI, será únicamente desarrollado por y para Phaser.

Hace dos semanas, Richard Davey lanzó una encuesta. En ella preguntaba que les gustaría más. Centrarse definitivamente en Phaser 3.0 o lanzar Phaser 2.7, que entre otras cosas solucionaba problemas encontrados en la versión actual, Phaser 2.6.2.

En vista a los resultados de la encuesta, Richard va a centrarse en Phaser 3.0 (74% de los votos). Sin embargo, como un cuarto de los desarrolladores querían lanzar Phaser 2.7, se ha lanzado esta de forma extraoficial y su uso solo se ha recomendado para aquellos que tuvieran problemas graves con sus juegos en Phaser 2.6.

Así pues, cada vez falta más para Phaser 3.0, una versión que sin duda promete.

jueves, 17 de noviembre de 2016

Introducción a Phaser por Juan David Nicholls

Juan David Nicholls ha preparado esta fantástica presentación con ejemplos reales para conocer un poquito más sobre Phaser.

domingo, 13 de noviembre de 2016

Sonidos y música

El aspecto sonoro de un juego es vital y sin embargo muchas veces es menospreciado. Una mala ejecución en este apartado puede arruinar un juego sobresaliente.

En un juego además hay que diferenciar entre música y efectos de sonido. Phaser no los distingue, pero tú deberías tenerlo en cuenta cuando diseñes tus juegos. Los efectos de sonidos son cortos y tienen que reproducirse nada más realizarse la acción que los desencadena. La música por otro lado es de larga duración y puede no estar sincronizada con la acción del juego.

Formatos soportados

Phaser no impone ningún formato de audio. Los formatos que pueden y no pueden usarse vienen dados por el navegador donde se ejecute el juego. A día de hoy (13 de noviembre de 2016) el soporte de los distintos navegadores a los distintos formatos de audio es el que sigue:




 Cargando los archivos

Los archivos de audio se cargan de manera similar a los sprites.

function preload(){
    game.load.audio("MiSonido","audios/MiSonido.mp3");
}

Después podremos acceder al objeto de tipo Phaser.Sound de forma fácil.


var sonido = game.add.audio("MiSonido");

Los archivos MP3 son comprimidos y su decodificación no es instantánea. Para ello puede usarse la función setDecodedCallback.

game.sound.setDecodedCallback([ sonido ], function(){
   // Es seguro usar los sonidos
}, this);

Reproducir el audio, cambiar el volumen

Ahora para reproducir el audio podemos usar cuatro funciones muy sencillas: play, pause, resume y stop.


sonido.play();
sonido.pause();
sonido.resume();
sonido.stop();

Si queremos cambiar el volumen de ese audio modificamos la propiedad volume.


sonido.volume = 0.5 // Un valor entre 0 y 1

Es posible realizar transiciones (fades) usando fadeTo. Especificamos el volumen que tendrá al finalizar la transición y el tiempo que vamos a dar para que se realice el cambio. Una vez especificado, se modificará el volumen de forma gradual en el tiempo especificado llegando al volumen que indicamos.


sonido.fadeTo(1000,0.8); // Subir el volumen progresivamente durante 1 segundo (1000 milisegundos hasta 0.8)

domingo, 2 de octubre de 2016

The Bézier Game, un juego para ayudarte a usar la herramienta pen

Hoy os traigo un interesante juego para aprender a usar la herramienta pen. La herramienta pen es la herramienta básica de los programas de diseño vectorial como Adobe Illustrator o Inkscape, que seguro que has usado alguna vez para los recursos gráficos de tu juego. Sin embargo dominar esta herramienta puede ser difícil y costoso. Para hacerlo más ameno, Mark MacKay ha construido un juego donde tendrás que dibujar las formas que te propone el juego The Bézier Game.
Al principio empezaremos con el tutorial, que nos dirá como se hacen ciertas formas sencillas. Nosotros después intentaremos replicar lo que hemos visto. Una vez acabado el tutorial empezaremos con la primera figura seria del juego, un coche.
Los trazos se consideran correctos si no nos salimos de la línea gorda ya dibujada. Hay que prestar atención también al número de nodos, pues dispondremos de una cantidad limitada de ellos. Una vez hayamos acabado la figura correctamente el juego nos dirá la cantidad mínima de nodos con los que puede dibujarse la figura. En el caso del coche nos dan 15 nodos, pero puede dibujarse en 7.
Anímate a jugar y practica la herramienta pen. Te será muy útil.




viernes, 16 de septiembre de 2016

Suscríbete a las novedades de Phaser.js Hispano por correo electrónico

Phaser.js Hispano es una web a la que intento traer siempre contenido de calidad. No obstante, la regularidad de las publicaciones nunca está garantizada. Mucha gente como vosotros quiere aprender cosas sobre Phaser, pero no quiere ir visitando un día sí y otro también las mismas páginas para comprobar si se han actualizado. Es una pérdida de tiempo para vosotros.


Yo recomiendo usar los feeds RSS, que en la mayoría de software de blogs se generan por defecto y avisan a los usuarios cuando una nueva entrada ha sido publicada. No obstante, mucha gente no sabe o no quiere utilizar estos sistemas. Para todos ellos, a partir de hoy, queda inaugurada la lista de correo de Phaser.js Hispano. Simplemente pon tu correo electrónico y sigue las instrucciones. Cada vez que publique una nueva entrada te llegará a ti a tu buzón de correo. Sin más complicaciones. ¿A qué esperas? En cualquier momento te puedes desuscribir siguiendo los enlaces que aparecen debajo de los correos que mande.


Suscríbete a Phaser.js Hispano


lunes, 12 de septiembre de 2016

FreeSFX, efectos de sonido gratis

FreeSFX es un veterano sitio donde podemos encontrar efectos de sonidos gratuitos para nuestros juegos. Fundado por Alan McKinney, el sitio recoge sonidos que han sido expresamente autorizados para su difusión y su uso por parte del público. Todos los sonidos que encontremos se encuentran bajo la misma licencia y todos han sido subidos por los administradores de FreeSFX. Antes era posible subir sonidos pero debido a que muchos incumplían normas de copyright se decidió eliminar esta posibilidad.

Términos de la licencia

La licencia de FreeSFX especifica que siempre debes incluir un enlace hacia FreeSFX. Se permite el uso tanto en proyectos comerciales como no comerciales. Sin embargo los sonidos no podrán ser usados en:
  • Un producto en el que los efectos de sonido sean lo principal
  • De manera individual
  • Proyectos musicales de forma independiente (vender los efectos de sonido en un CD, por ejemplo)
  • Compartirlos en redes P2P o similares
  • No podrás reclamar que estos sonidos son obra tuya

Formato y calidad

Los archivos de los efectos de sonido se pueden descargar en formato MP3 y normalmente cuentan con bitrates elevados, por lo que su calidad es buena. No obstante es práctica habitual en el desarrollo de juegos guardar los efectos de sonido en ficheros WAV, pues se cargan prácticamente al instante al no necesitar códec. Para la conversión recomiendo ffmpeg. Antes de descargar los archivos necesitarás crearte una cuenta en el sitio.

FreeSFX es un sitio con calidad, otra web a tener en cuenta cuando busques material y recursos para tus juegos.

lunes, 1 de agosto de 2016

Texto y tipografías

Un elemento muchas veces menospreciado en los juegos es el manejo de texto en pantalla y las tipografías. En primer lugar hay que diferenciar entre dos tipos de fuentes: vectoriales y bitmap. Las vectoriales son las habituales en el día a día. Las que usamos en Internet, en Word, etc. Se pueden hacer grandes y pequeñas. Hay varios formatos, pero la mayoría son en formato TrueType, OpenType y derivadas. Estas fuentes pueden ser cargadas usando CSS3, pero ten cuidado pues al principio puede que no estén cargadas.

Texto en Phaser: fuentes vectoriales

Las fuentes vectoriales las solemos encontrar en formato TTF (TrueType), OTF (OpenType) o WOFF (versión 1 o 2, son TrueType u OpenType optimizados para la web). Deberemos añadir esto al fichero CSS.

@font-face{
    font-family: 'NombreDeLaFuente';
    src: local('NombreDeLaFuente'), url('fonts/fuente.woff') format('woff');
}
Ahora podemos usar esa fuente para dibujar texto sobre la pantalla.

game.add.text(100,50,"Phaser.js Hispano",{
    font: 'NombreDeLaFuente',
    fontSize: 32,
    fill: 'purple'
});
var texto = game.add.text(200,100,"http://www.phaser-hispano.gq");
texto.font = "Agency FB";
texto.fontSize = 24;
texto.fill = "green";

Texto en Phaser: fuentes de tipo bitmap

En videojuegos también es común usar fuentes de tipo bitmap. Estas son simplemente imágenes de cada caracter.

game.load.bitmapFont('desyrel', 'assets/fonts/bitmapFonts/desyrel.png', 'assets/fonts/bitmapFonts/desyrel.xml');
...
game.add.bitmapText(200, 100, 'desyrel', 'Phaser & Pixi\nrocking!', 64);

Spritesheets

En el tutorial anterior vimos como manejar sprites. Quizá te parezca un proceso muy largo una vez tengas cientos o miles de imágenes. Los spritesheets son la solución.

¿Qué son los Spritesheets?

Los spritesheets son imágenes que contienen imágenes más pequeñas en su interior separadas por una distancia común. Esto es un spritesheet:
Phaser soporta spritesheets el uso de spritesheets en muchos lugares. A la hora de cargarlos deberemos especificarlo.

function preload(){
    ...
    game.load.spritesheet("IDdeSpritesheet","img/ArchivoSpritesheet.png",32,32,64,0,0);
    // ID de spritesheet, archivo, ancho de cada imagen, alto de cada imagen, número de imágenes (-1 las buscará automáticamente), espacio en píxeles que hay que dejar de margen al empezar el archivo (margin), espacio en píxeles de separación entre imágenes (spacing)
    ...
}
Cuando queramos usar alguna de las imágenes indivualmente, por ejemplo, cuando creamos un Sprite, debemos especificar el ID del Spritesheet así como el número asignado.

game.add.sprite(100,50,"IDdeSpritesheet",12);
Para contar llamaremos 0 a la imagen situada arriba a la izquierda. Seguiremos hacia la derecha y cuando acabemos la línea bajaremos a la siguiente (igual que si leyésemos un texto).

Creando Spritesheets

Con ImageMagick

Si tienes instalado ImageMagick es fácil generar nuevos spritesheets desde la línea de comandos con montage.
montage ImagenPrimera.png ImagenSegunda.png ImagenTercera.png -tile 4x4 -geometry 128x128+0+0 -background transparent Spritesheet.png
Indicamos las imágenes independientes al principio, con -tile indicamos como van a estar organizadas las imágenes, en este caso la rejilla será de 4 filas y 4 columnas. -geometry indica el tamaño de cada imagen (128 píxeles de ancho y alto). El fondo con -background se asigna a transparente y finalmente indicamos donde vamos a guardar el resultado.

Con GIMP

Con GIMP tendrás que copiar manualmente cada archivo a su lugar correspondiente en un nuevo archivo con las rejillas activadas.

Otros programas

Hay más programas, algunos de pago como TexturePacker o SpriteSheet Packer. Sin embargo hay que tener cuidado pues TexturePacker puede generarnos TextureAtlas en vez de SpriteSheets. Phaser soporta ambos pero no del mismo modo, aquí solo hemos visto los Spritesheets.

Sprites

Hemos visto como crear rectángulos y otras formas geométricas simples, pero posiblemente también quieras cargar imágenes. En Phaser es muy sencillo. Recuerda en el tutorial de cargar recursos como cargábamos imágenes o audios. Si recuerdas era algo parecido a esto:


function preload(){
   ...
   game.load.image("MisterPhaser","img/MisterPhaser.png");
   ...
}
Al recurso, en este caso una imagen PNG, le asignamos un ID ("MisterPhaser" en el ejemplo). Ahora para añadir la imagen a la pantalla simplemente la añadimos, por ejemplo, dentro de la función create.


function create(){
    ...
    var sprite = game.add.sprite(300,100,"MisterPhaser");
    ...
}
Se añadirá el sprite con una imagen de ID "MisterPhaser" en las coordenadas X e Y indicadas

¿Qué es un Sprite?

No, no es la bebida. En Phaser un sprite podemos entenderlo como una superimagen o una "imagen con extras". A diferencia de una simple imagen que dibujemos en pantalla (que en Phaser también existen y se pueden hacer), un sprite contiene:
  • Funcionalidad para el motor de físicas
  • Funcionalidad para gestionar el input, la entrada de datos
  • Funcionalidad para gestionar eventos
  • Soporte para animaciones
  • Y mucho más
Por defecto todas estas funcionalidades extras vienen desactivadas y requieren de configuración extra.


Input con un Sprite

Vamos a ver como manejar la entrada de datos de un sprite con la funcionalidad de entrada de datos. En primer lugar es necesario activarlo, poniendo inputEnabled = true. Después podemos añadir eventos:


sprite.inputEnabled = true;
sprite.events.onInputDown.add(function(){
    // el sprite ha sido pulsado on el ratón o tocado en una pantalla táctil
});

Manipulando el tamaño del sprite

Es posible que el sprite sea demasiado grande o pequeño para la pantalla a la que lo estas añadiendo. En ese caso usa las propiedades width y height.

sprite.width = 200;
sprite.height = 200;

Rotando el sprite

Puedes usar radianes o grado sexagesimales. Las operaciones con radianes son ligeramente más rápidas, pero mucha gente está acostumbrada a usar grados sexagesimales por lo que se incluye su soporte aunque debe realizar la conversión a radianes.

sprite.rotation = Math.PI/6; // En radianes
sprite.angle = 30; // En grados sexagesimales

Propiedades visuales

Los sprites vienen con un conjunto de herramientas para modificar el aspecto final. Podemos por ejemplo tintar una textura con tint y especificando un color en hexadecimal

sprite.tint = 0xAA0000;
También es posible cambiar la imagen del sprite una vez ha sido creado con loadTexture.

sprite.loadTexture("CocheDeMisterPhaser");
Otra propiedad interesante es smoothed. Si queremos un elemento Pixel Art es importante que esté en false, de lo contrario Phaser tratará de redondear las esquinas.

Propiedades del juego

Los sprites son los personajes, las balas, los coches, las cajas de Mario Bros, ... todo son sprites. Phaser ha añadido unas propiedades configurables, de cuyo uso únicamente decidimos nosotros, para albergar los datos específicos de cada sprite.

La propiedad data esta vacía y es totalmente configurable. Podemos crear, editar y destruir variables dentro de ella sin afectar al funcionamiento de Phaser. Además, incluye ya prehechas las propiedades damage, heal, health, maxHealth, setHealth.


sprite.data.nombre = "Teresa";
sprite.data.inventario = ["VISA", "Teléfono móvil"];
sprite.damage = 50;
sprite.maxHealth = 100;
El coche ha sido rotado, deformado y tintado

sábado, 30 de julio de 2016

Entrada táctil, ratón y teclado

En este tutorial vamos a ver como manejar la entrada del usuario en nuestro juego con Phaser. Hoy en día existen muchos dispositivos diferentes, cada uno con sus peculiaridades. Donde hace unas décadas solo era teclado ahora tenemos ratón, pantallas táctiles y joysticks. Phaser intenta gestionar todas las diferencias de control simplificando conceptos, así, aunque es posible controlar el ratón y la entrada táctil por métodos distintos, Phaser recomienda simplificar y denominarlos punteros con botones, de los cuáles siempre puede haber varios (para gestionar el multitouch) y que no sabremos si son ratones o dedos. Adicionalmente el teclado puede seguir usándose, pero deberás saber que en móviles y tablets los usuarios no tienen acceso a teclado. También con los joysticks o gamepads, Phaser trae funciones para gestionarlos pero no todos los usuarios de tu juego tienen porque tener esos dispositivos. El control que uses será en definitiva una decisión tuya.

Teclado

Vamos a empezar por el teclado. Hay varias maneras de detectar una tecla. Principalmente hay 3 sistemas:
  • Ha sido pulsada (genera un evento)
  • Comprobamos si actualmente esta pulsada
  • Ha sido liberada (genera un evento)
Las opciones que generan eventos son mejores en juegos, donde no se requiera mantener pulsadas las teclas. La mayoría de juegos, sin embargo, irán mejor con el sistema de enmedio.

Muchos juegos usan las teclas en forma de flecha para el control. Phaser trae la función createCursorKeys para facilitarle la vida a los desarrolladores de esos juegos.


var cursor = game.input.keyboard.createCursosKeys();
Luego, en la función update del juego podemos comprobar si alguna tecla esta pulsada y actuamos en consecuencia. Por ejemplo, en un juego con un personaje, mantener pulsada la tecla será seguir dándole velocidad al personaje para que siga avanzando.

function update(){
    if(cursor.up.isDown){
        // La tecla de flecha hacia arriba está pulsada, actuaríamos en consecuencia
    }
    if(cursor.left.isDown){
        // La tecla de flecha hacia la izquierda está pulsada
    }
}
Si quieres añadir más teclas que funcionen manteniendo pulsado puedes usar la función isDown proveyendola del identificador de tecla o keycode.

function update(){
    if(game.input.keyboard.isDown(Phaser.KeyCode.SPACEBAR)){
        /// La barra espaciadora está pulsada
    }
}

En ocasiones que el usuario pulse una tecla puede interferir con el funcionamiento del navegador. Podemos bloquear este comportamiento con addKeyCapture. Se encargará de que las teclas pulsadas no se transmitan más que a Phaser.

addKeyCapture(Phaser.KeyCode.SPACEBAR);

Si deseas que las teclas no sean de mantener, sino que propaguen acciones inmediatamente (por ejemplo, cambiar de radio en el GTA, solo es un toque, mantenerlo pulsado no hace nada más) podemos sobreescribir onUpCallback. Una vez se haya disparado el evento comprobaremos que tecla es la que ha sido pulsada.


game.input.keyboard.onUpCallback = function(key){
    if(key.keyCode === Phaser.KeyCode.G){
       // La tecla G acaba de ser pulsada y soltada. Si se mantuviese la tecla pulsada no pasaría nada.
    }
}

Punteros (ratón y táctil)

Phaser unifica el ratón y los gestos táctiles en los llamados punteros. Para acceder al puntero por defecto podemos usar la propiedad activePointer. Al igual que con el teclado soporta mantener pulsado y un simple toque.

// Mantener pulsado, dentro de la función update
if(game.input.activePointer.isDown){
    if(game.input.x > 500){ // Se comprueban las coordenadas del click
        // Esta tocando o haciendo click en el borde derecho de la pantalla
    }
}

// Pulsar una sola vez
game.input.onUp.add(function(){
    // Se ha presionado y levantado el dedo o el botón del ratón
});


jueves, 28 de julio de 2016

Rectángulos, círculos y formas geométricas

En este tutorial vamos a aprender cómo dibujar figuras geométricas simples, usando el módulo Phaser.Graphics. Las funciones son parecidas a las de la API Canvas 2D de HTML5 pero mejoradas y con una gran ventaja, funcionan tanto en el renderizado via WebGL como en el de Canvas 2D. Las funciones pueden ser llamadas desde cualquier parte del código, pero es recomendable situar las operaciones de dibujado de escenario en la función create.

Creando un objeto gráfico o lienzo

Antes de dibujar tenemos que crear un lienzo u objeto gráfico. Podemos tener tantos lienzos como queramos. Cuando creemos el lienzos indicaremos la posición de la esquina superior izquierda del lienzo en la pantalla del juego. Es decir, el punto desde el cual el lienzo crece horizontalmente a la derecha y verticalmente hacia abajo, según nuestras necesidades.


var lienzo = game.add.graphics(0,0);

En este caso el lienzo puede ocupar toda la pantalla, pues empieza en las mismas coordenadas que la pantalla del juego. Para aclararte con las coordenadas en Phaser he aquí un gráfico.

Colores

Lo primero que hay que hacer al trabajar con Phaser.Graphics es asignar el estilo de dibujado, es decir, los colores que tendrán diversas partes de la figura. Existen dos funciones para trabajar con ellas: beginFill y lineStyle. beginFill se refiere al color del relleno y lineStyle se refiere a los bordes.

El procedimiento de dibujado es muy sencillo. Todas las operaciones con relleno han de comenzar con beginFill y acabar con endFill. Entre medias, todas las figuras geométricas que dibujemos tendrán los colores especificados por beginFill. Si dibujamos una figura sin relleno solo veremos el borde, según lo especificado en lineStyle. Así, si tenemos beginFill/endFill tendremos un círculo, mientras que si usamos lineStyle solamente, dibujaremos la circunferencia correspondiente de ese círculo. 


function create(){
    var lienzo = game.add.graphics(0,0);
    lienzo.beginFill(0xfa33aa);
    // dibujar las figuras ... lienzo.drawRect, lienzo...
    lienzo.lineStyle(20,0xff5500,1);
    // dibujar figuras con borde
    lienzo.endFill();
}

El color ha de especificarse en formato hexadecimal. 


Rectángulos y círculos

Los rectángulos se dibujan con drawRect. Indicamos las coordenadas de la esquina superior izquierda y de el ancho y alto del rectángulo.

lienzo.beginFill(0xfa33aa);
lienzo.drawRect(10,10,200,50); // coordenada X, coordenada Y, ancho y alto
lienzo.endFill();

Este código, en la función create nos dará el siguiente resultado.
Podemos especificar rectángulos con bordes redondeados. Muy útiles cuando creemos interfaces de usuario. Usaremos drawRoundedRect e indicamos el radio de lo bordes.

lienzo.drawRoundedRect(10,10,200,50,10); // coordenada X, coordenada Y, ancho, alto y radio


Para dibujar círculos usaremos drawCircle, indicando las coordenadas X e Y junto con el diámetro del círculo.

lienzo.drawCircle(50,50,50); // coordenada X, coordenada Y, diámetro del círculo


Si usamos lineStyle para el borde

lienzo.lineStyle(10,0xFF00FF,1);
lienzo.drawCircle(50,50,50);

Líneas

Las líneas se dibujan con moveTo y lineTo. moveTo nos permite mover un puntero imaginario por el espacio 2D, especificando las coordenadas. Cuando llamamos a lineTo se dibuja una línea entre la posición actual del puntero y unas nuevas coordenadas. El puntero se desplaza a esas nuevas coordenadas.

lienzo.moveTo(50,50);
lienzo.lineTo(100,100);

Polígonos complejos

Los polígonos complejos, que no son rectángulos, pueden ser dibujados si especificamos una lista de sus vértices con drawPolygon. Los vértices deben ser objetos Phaser.Point.


lienzo.drawPolygon([new Phaser.Point(100,100),new Phaser.Point(200,100),new Phaser.Point(200,200)]);


Arcos y curvas de Bézier

Para figuras más complejas, Phaser soporta arcos y curvas de Bézier. Los arcos son trozos que corresponden a partes del círculo. Usando la función arc se debe indicar el centro del círculo, el radio del círculo y los ángulos de inicio y de finalización. Además hay más ajustes opcionales. Los ángulos se expresan en radianes.

lienzo.arc(50,50,50,0,Math.PI/2); // coordenada X, coordenada Y, radio del círculo, ángulo de inicio, ángulo de finalización (radianes)

Las curvas de Bézier son un método de representar curvas complejas de forma precisa. Phaser soporta las curvas cúbicas de Bézier, es decir: punto de inicio, punto de destino y dos puntos de control.
En Phaser el punto de inicio se especifica con moveTo y el resto de puntos con bezierCurveTo, sin embargo


lienzo.lineStyle(10,0xffffff,1);
lienzo.moveTo(100,100);
lienzo.bezierCurveTo(150,150,300,0,300,400);

Con esto ya tienes más que suficiente para dibujar en Phaser sin necesidad de recurrir a imágenes.

martes, 26 de julio de 2016

Iniciar Phaser.js y pantalla de carga

Una vez ya tengamos instalado Phaser.js y tengamos la estructura de carpetas podemos empezar a escribir en el fichero main.js. Puedes usar cualquier editor de texto. Los mejores son Sublime Text, Atom y Visual Studio (tanto Community, solo Windows, como Code, multiplataforma). También es bueno y rápido Notepad++.

Para iniciar Phaser tenemos que crear un nuevo objeto Game. En Phaser todos los objetos y componentes se encuentran bajo el prefijo Phaser, para que no choquen con otras librerías o nuestros propios componentes. Además Phaser necesita 3 funciones importantísimas, preload, create y update.

  • preload, se ejecuta nada más Phaser es iniciado. La usaremos para cargar los recursos del juego. Haremos una pantalla de carga
  • create, se ejecuta cuando Phaser ha terminado de cargar todo lo necesario. La usaremos para crear los escenarios y personajes.
  • update, se ejecuta constantemente. La usaremos para la lógica del juego (¿has pulsado esta tecla?, ¿el malo te ha dado?,...) pues comprueba constantemente el universo ficticio que creamos en Phaser.



var game = new Phaser.Game(600,480,Phaser.AUTO,{preload: preload, create: create, update: update});
function preload(){

}

function create(){

}
function update(){

}
¿Qué parámetros necesita Phaser.Game?
  • Los dos primeros números son las dimensiones del juego. En este caso, 600 de ancho por 480 de alto.
  • El tercer argumento, Phaser.AUTO, indica a Phaser que motor de renderizado ha de usar. Phaser está basado en Pixi.js y este soporta 2D de dos formas. A través de OpenGL, usando WebGL (modo por defecto, pues usa la tarjeta gráfica y teóricamente es más rápido) y con la API Canvas 2D de HTML5. Esta es soportada por muchos más navegadores, teléfonos, etc. Indicando AUTO le decimos que intente usar WebGL, y si no está disponible, use la API Canvas 2D.
  • El cuarto argumento tiene las funciones básicas de Phaser. En este caso las hemos llamado iguales que como las llama la API de Phaser. Abajo las hemos declarado, pero están vacías.

Una pantalla de carga

La función preload como hemos dicho sirve para cargar todo lo que necesitemos en el juego. Phaser gestiona las cargas de una manera muy sencilla, a través de un objeto Phaser.Loader accesible en game.load. Lo primero que tenemos que hacer es añadir una lista de recursos que deben ser cargados.

function preload(){
    game.load.image("imagen","img/imagen.png"); // Cargar una imagen, con ID imagen, ubicada en img/imagen.png
    game.load.images(["chico","chica","policia"],["img/chico.png","img/chica.png","img/policia.png"]); // Añade imágenes en lote
    game.load.audio("disparo","sfx/disparo.ogg"); // Carga un audio en formato Ogg
    game.load.audio("disparo",["sfx/disparo.ogg","sfx/disparo.wav"]); // Carga un audio y elije el formato que más convenga según el navegador
    game.load.pack("nivel1","maps/nivel1.json"); // Carga los recursos especificados en el fichero PACK
    game.load.tilemap("casa","maps/casa.json",Phaser.Tilemap.TILED_JSON); // Carga un mapa de Tiled en formato JSON 
}
Con estas funciones tendrás suficiente para ir cargando tus recursos, pero Phaser dispone de más funciones, cargar tipografías, textos, ficheros XML, vídeos, shaders, definiciones de cuerpos físicos, binarios,...

Ahora vamos a añadir una pantalla de carga para que el jugador esté informado del progreso de la carga. Usaremos un rectángulo, veremos las formas primitivas en el siguiente tutorial.

function preload(){
    var progress = game.add.graphics(0,0);
    game.load.onFileComplete.add(function(prg){
        progress.beginFill(0xFF3300);
        progress.drawRect(0,0, prg*4.8,100);
        progress.endFill();
    });
    game.load.image....
    ....
}
Esta barra mostrará una barra en la parte superior que irá avanzando hasta llenar el ancho de la pantalla.

Instalando Phaser.js

Estas a punto de proseguir en tu aventura vital con algo que seguro, te ha rondado muchas veces la cabeza. Tu propio juego. Quizá ya hayas hecho alguno, pero por alguna razón te has interesado en Phaser.js. Nosotros creemos que es de lo mejorcito que hay. ¿Ya sabes todo en lo que Phaser.js destaca? Revisa este artículo si no lo tienes claro. Ahora vamos a enseñarte como instalar Phaser.

Phaser.js es una librería JavaScript como otra cualquiera

 Esto es importante. Quiere decir que hay muchas opciones de instalar Phaser.js. La clave es que en el juego final tengamos 3 archivos mínimo.
  • Un fichero HTML. Los navegadores solo comienzan a leer HTML cuando entran a una página. El fichero HTML le puede decir al navegador que hay que cargar más archivos. En los juegos HTML5, por paradójico que pueda resultar, se usa muy poco HTML. En casi todos tus juegos puede ser el mismo.
  • Un fichero JavaScript con la lógica del juego. Es el núcleo del juego. Es de lo que hablamos en esta web, cómo programar este archivo (pueden ser varios, pero no vamos a liarnos todavía)
  • Otro fichero JavaScript con Phaser.js. En JavaScript para añadir una librería simplemente la añadimos al HTML, igual que si la hubiésemos programado nosotros. No hay diferencia.

¿Cómo se añade un fichero JavaScript a un fichero HTML?

Es muy simple. En HTML contamos con la etiqueta SCRIPT. Esta etiqueta nos permite añadir ficheros con código para que sean ejecutados. SCRIPT no solo contempla JavaScript, en algunos navegadores hay otros lenguajes como VBScript (Internet Explorer) o Dart (Chrome), pero solo JavaScript es universalmente aceptado por todos los navegadores. La etiqueta SCRIPT tiene dos modos de funcionamiento. En uno se introduce el código directamente, en otro se indica el archivo. Nosotros usaremos la segunda opción por ser más legible.

Con eso bastaría. Los archivos phaser.min.js y mijuego.js (o main.js) deben de estar en la misma carpeta que el archivo HTML.

Descargar Phaser.js, ¿qué versión elijo?

Descarga Phaser desde la web oficial. Verás que hay varias versiones.
A la izquierda puedes ver que hay versiones Stable, Beta, Antiguas y personalizadas. Nosotros siempre recomendamos usar Stable. Dentro de cada versión hay distintos botones. Descarga la versión ".min.js". Esto quiere decir que es un único archivo, que pondremos al lado del HTML. La versión ".js" funciona exactamente igual pero ocupa más espacio. Esto es porque la versión "min.js" ha sido minificada, es decir ofuscada y comprimida para ocupar menos espacio y además cargar más rápido.

Creando el espacio de trabajo del juego

La organización es vital en cualquier cosa. Si mantenemos una estructura de trabajo organizada desde el principio tendremos menos dolores de cabeza después.
 No todas las carpetas son obligatorias. Según las necesidades del juego podemos borrar carpetas. ¿Qué va en cada cosa?
  • img: Recursos visuales como texturas, imágenes vectoriales, pixel art, etc...
  • js: la lógica del juego
  • locales: traducciones del juego, en muchos casos no la necesitamos pero siempre me gusta dejarla
  • maps: niveles o mapas si estos han sido creados con un editor como Tiled
  • music: canciones de la banda sonora de nuestro juego
  • sfx: efectos de sonido, son audios de corta duración
  • ttf: tipografías
  • index.html, el HTML del juego. El navegador leerá este archivo el primero. Normalmente no necesita ser modificado entre juegos.
  • main.js, el comienzo de nuestro juego. En juegos simples puede ir todo allí, en juegos complejos puede llamar a archivos dentro de la carpeta js
  • main.css, el CSS básico para ajustar algunas opciones visuales. Normalmente no necesita ser modificado entre juegos.
  • phaser.min.js, el fichero con Phaser.js. No lo modifiques.

 El fichero index.html

 El fichero index.html es muy similar entre juegos, aquí va una versión completamente funcional.

El fichero main.css

El fichero main.css tiene como finalidad ajustar el juego a la pantalla a la perfección. Tienes que pensar que los navegadores se pensaron para manejar webs de texto, no juegos, por eso los ajustes por defecto de los navegadores no son los idóneos. Aquí tienes un archivo que podrás copiar a tu ordenador.


¡Ya tienes instalado Phaser.js y tienes hecha la estructura básica de carpetas y archivos del juego! En el siguiente tutorial veremos como iniciar Phaser.js.

viernes, 8 de julio de 2016

Transformando imágenes con ImageMagick (JPEG a PNG, SVG a PNG, ...)

ImageMagick es un estupendo programa para realizar operaciones con imágenes de forma rápida y sencilla. Una vez le cojas el tranquillo, ImageMagick se convertirá en un programa que siempre querrás llevar contigo. ImageMagick se suele usar desde la línea de comandos, no obstante existen programas gráficos de los que sin embargo no vamos a hablar aquí.

Convertir entre formatos de imagen


Uno de los usos más comunes de ImageMagick es convertir entre formatos de imagen. Podemos convertir imágenes entre prácticamente todos los formatos conocidos.


convert fichero_origen.tga fichero_destino.webp
Simplemente al especificar la extensión de ambos archivos ImageMagick los reconocerá y los convertirá.

Cambiar tamaño de una imagen

Otro uso muy común de ImageMagick es para escalar, cambiar de tamaño, una imagen. Por ejemplo, tenemos una imagen de 3000x1000 píxeles y no necesitamos tanta resolución. Para facilitar tiempos de carga en el juego podemos hacer una versión de menor resolución.


convert fichero_origen.xcf -resize 1500x500 fichero_destino.png
Si no queremos conservar la relación de aspecto de la imagen (aspect ratio) deberemos indicarlo de forma explícita.

convert fichero_origen.gif -resize 1500x1000! fichero_destino.jpg
Así la imagen se achatará o se alargará hasta ser del tamaño exacto especificado.

viernes, 1 de julio de 2016

Juego de carreras HTML5 con Phaser.js

Vamos a hacer un microjuego con Phaser.js. Va a consistir en una pista de carreras sobre la cual podemos conducir un coche. Vista ortogonal.

Primero vamos a ver los gráficos que usaremos para nuestro microjuego. Necesitamos una pista y un coche. En este caso he diseñado ambos con GIMP, os recuerdo que si vamos a hacer un juego profesional y el arte no es lo nuestro lo mejor es ir a Fiverr o a foros donde encontraremos artistas especializados en estos asuntos. La textura del césped es de MyFreeTextures y el castillo es el de Montealegre en Valladolid.
http://opengameart.org/content/castillo-de-montealegre-circuit 
http://opengameart.org/content/futuristic-racing-car

  
Ahora creamos un archivo HTML e importamos Phaser

Una vez en hayamos hecho eso en nuestro fichero de JavaScript empezamos a escribir.

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'racing_game', { preload: preload, create: create, update: update });
Con eso iniciamos Phaser. Hay 3 funciones importantes en Phaser: preload, create y update. Preload se encarga de cargar todo lo necesario, Create se encargará de crear la escena jugable y Update se repetirá indefinidamente hasta que termine el juego.

function preload() {
    game.load.spritesheet('circuito','circuito.png');
    game.load.spritesheet('coche','coche.png');
}
Con esto cargamos las dos imágenes para un uso posterior.

function create() {
    var circuito = game.add.sprite(0,0,'circuito');
    coche = game.add.sprite(300,100,'coche');
}
Con esto añadimos dos sprites a la escena, cada uno de ellos con una posición X e Y y un recurso dentro de las imágenes precargada.

Conduciendo el coche

 

Ahora vamos a hacer que el coche sea "conducible". Para ello creamos una variable global llamada cursors. Luego en create la inicializaremos para que maneje las teclas cursor (arriba, abajo, izquierda, derecha). De paso creamos la variable velocidad, que iniciamos a 0;

var cursors;
var velocidad = 0;
y en create()

cursors = game.input.keyboard.createCursorKeys();
También en create iniciamos el sistema de físicas, que nos ayudará para calcular la velocidad

game.physics.startSystem(Phaser.Physics.P2JS);
game.physics.p2.enable(coche);
coche.body.angle = 90;
Ahora la función update() se encarga de manejar todo esto. Detecta si alguna tecla está pulsada y actúa en consecuencia modificando la velocidad.
  • Primero se comprueba si la tecla flecha arriba está pulsada. Si además la velocidad acumulada es menor de 400 se le suman 7. En caso contrario la velocidad disminuye.
  • Después se ajusta la velocidad en los ejes X e Y. Se usa trigonometría para ello.
  • Por último se comprueban las teclas derecha e izquierda y si alguna de ellas está pulsada se modifica su velocidad angular.

function update()
{
    if (cursors.up.isDown && velocidad <= 400) {
        velocidad+=7;
    } else {
        if (velocidad >= 7)
            velocidad -= 7;
    }
                        
    coche.body.velocity.x = velocidad * Math.cos((coche.angle-90)*0.01745);
    coche.body.velocity.y = velocidad * Math.sin((coche.angle-90)*0.01745);
                
    if (cursors.left.isDown)
        coche.body.angularVelocity = -5*(velocidad/1000);
    else if (cursors.right.isDown)
        coche.body.angularVelocity = 5*(velocidad/1000);
    else
        coche.body.angularVelocity = 0;
}
Aquí está el código completo Descargar código fuente: http://sh.st/FRhIN | http://bc.vc/VjgLlxW | http://ouo.io/YeHKk8 | http://fas.li/3x5jg | http://adf.ly/1bf2ku

martes, 28 de junio de 2016

OurMusicBox, música sin copyright

OurMusicBox es un proyecto del compositor Jay Man. Allí podremos descargar música sin copyright para nuestros proyectos, incluidos los comerciales. Todas las canciones son creaciones originales y además se editan dos pequeñas introducciones de 4-6 segundos y de 10-12 segundos siguiendo la temática original de la canción larga. Los estilos son numerosos, encontraremos desde Euro Pop 80's hasta Canto Coral. Jay Man, el compositor de todas las canciones, afirma haber trabajado más de 20 años en grandes proyectos de compañías como Vodafone, Hilton, Dominos o Siemens pero que ahora quiere hacer mucho más visible la música que compone.

¿Quiéres usar las canciones en tu proyecto? Hay dos opciones. La primera es que cites la canción y el autor en tu proyecto, en algún lugar visible. Así cumples la licencia Creative Commons 4.0 Atribución (BY). ¿No quieres citar? ¿Además quieres obtener audios de mejor calidad? Por 5$ al mes puedes tener una suscripción mensual a OurMusicBox, donde además de no necesitar citar por la canciones pueden obtener los MP3 a 320kb.

lunes, 6 de junio de 2016

Tema de inicio de sesión en GNU/Linux con Phaser (MDM)

Nos llega la noticia vía el blog de Phaser Editor de que Sam Riggs ha creado un tema de inicio de sesión para el gestor de inicio de sesión MDM.

MDM, el gestor de inicio de sesión mantenido por Linux Mint y también usado en Manjaro y algunas distros más permite temas en HTML5. Así pues, Sam Riggs decidió programar usando Phaser un tema interactivo. Decidió usar Phaser ya que te posibilita realizar animaciones mucho más complejas que con CSS. Al principio era escéptico, pero al hacer de primera prueba se convenció de que no había ningún fallo, todo salió como tenía previsto y continuó con la programación.

Una muestra más de que Phaser es flexible y lo puedes utilizar donde menos te lo imagines. El post original con código se encuentra en: http://samsstuffsoftware.blogspot.com.es/2016/04/mdm-theme-created-with-phaser-framework.html

sábado, 4 de junio de 2016

Creando Pixel Art con GIMP

GIMP es un fantástico programa gratuito, software libre, de edición fotográfica. Su uso más corriente es el de editar fotos ya existentes, sin embargo, también es posible crear recursos gráficos desde cero.

El Pixel Art es un estilo visual bastante conocido y popular dentro de los videojuegos. Consiste en dibujar todo con unos mínimos detalles, de aspecto cuadrado, que serían los "píxeles" (no lo son porque la resolución de las pantallas es inmensa y si fuesen píxeles reales se verían muy pequeños). No es muy difícil de realizar y el resultado es muy satisfactorio, por eso el mundo de los videojuegos (y el indie sobretodo) ha adoptado este estilo.

GIMP se puede configurar para trabajar con Pixel Art. Veamos como:

Crea una imagen nueva en GIMP. Configura su tamaño para ser de 16x16 y que sea transparente.


En Vista marcamos:
  • Mostrar rejilla
  • Ajustar a la rejilla
En Imagen vamos a Configurar la rejilla
 Lo normal es ajustar la anchura y la altura a 1 píxel, pero cualquier combinación cuadrada valdría. Podemos configurar el color de la rejilla y si es continua, punteada, rayada, ... Pero los ajustes por defecto están bien.

Seleccionamos la herramienta lápiz y  seleccionamos el pincel píxel.
Este tiene opacidad de 100 y es cuadrado. Cambiamos su tamaño abajo y lo bajamos hasta 1.

¡Y ya está! Ahora podemos pintar con GIMP en la rejilla nuestros diseños Píxel Art.



jueves, 2 de junio de 2016

OpenGameArt, encuentra assets y recursos para tu juego en Phaser

OpenGameArt es un sitio clásico dentro del desarrollo de juegos. Entre sus páginas encontramos recursos para nuestros juegos con licencias libres.

El contenido se organiza en las siguientes categorías:
  • Arte 2D
  • Arte 3D
  • Arte conceptual
  • Texturas
  • Música
  • Efectos de Sonido
  • Documentales
  • Tutoriales
Siempre que usemos recursos o assets de OpenGameArt es importante tener en cuenta la licencia, si necesitamos citar al autor en nuestras obras, si se puede usar en proyectos con fines comerciales, etc. Además siempre es recomendable agradecer al autor su trabajo, para que vea que su esfuerzo ha ayudado a otras personas como nosotros.

¿Conocías OpenGameArt? ¿Qué te parece? ¿Conoces más sitios de este estilo?

martes, 31 de mayo de 2016

Tutorial de Tiled - Capas y atributos

Continuamos el tutorial de Tiled donde lo dejamos. Seguro que has dibujado un bonito mapa con ese tileset, puedes enseñarnos la foto en los comentarios y la pondré. Ahora avanzamos a las capas. Si has trabajado con alguno programa de diseño (Photoshop, GIMP, AutoCAD,...), seguro que ya conoces lo básico de las capas.

Las capas son submapas que comparten el mismo espacio que el mapa final y que al superponerse forman el mapa final. Por ejemplo, una capa pueden ser Paredes y otra Ventanas. En la capa de las paredes tenemos las paredes de un edificio solo eso. Encima de esa capa ponemos otra, solo con ventanas. Cuando combinemos ambas capas veremos como las ventanas se dibujan encima de las paredes ya dibujadas. Además las capas pueden estar desactivadas, eso significa que sus datos están pero ya no forman parte del mapa final. Luego vía programación las podemos activar/desactivar a nuestro gusto. En Tiled además cada capa puede tener atributos distintos.

Por defecto en Tiled tenemos ya una capa. Vamos a borrarla para empezar de cero. Las capas se encuentran arriba a la derecha.

En Tiled hay tres tipos de capas.
  • Capa de Imagen. Es usada para poner una imagen de fondo. En juego de plataformas es una muy buena opción.
  • Capa de Objetos. Los objetos son figuras geométricas ajenas a las celdas. No las vamos a usar de momento.
  • Capa de Patrones. Estas son las básicas. Permiten poner elementos del tileset dentro de la rejilla.
Vamos a crear dos capas de patrones. Una se va a llamar Paredes y la otra será Suelo. El orden de las capas es importante. Las que están más arriba se aplican más tarde. En este caso Paredes debe ir por encima de suelo, aunque en este ejemplo no afectará mucho lo contrario. Con la capa Suelo seleccionada, cogemos la cubeta y pintamos el suelo. Ahora nos cambiamos a Paredes y dibujamos algunas paredes. Como ves, se pintan por encima del suelo. Si tratas de borrar el suelo verás que es imposible, tienes que cambiar antes a la capa Suelo.

Añadiendo atributos a las capas en Tiled

Imagina ahora un juego. Normalmente serás capaz de caminar por el suelo pero serás bloqueado por las paredes. ¿Cómo indicamos a Tiled que una capa tiene propiedad distinta que otra? Con atributos. Podemos especificar que en una capa el personaje no puede caminar (porque es una pared, por ejemplo) o que sí pueda hacerlo. Los detalles de la implementación se programarán en Phaser pero podemos indicar los datos con las propiedades de cada capa. En la parte izquierda está la pestaña Atributos personalizados. Le damos al botón + abajo. Nos pedriá un nombre del atributo y un tipo. Nombre puede ser pasable y el tipo será bool. Es decir, solo puede ser verdadero o falso. Hacemos lo mismo con la otra capa y en la capa Suelo marcamos la opción como verdadera.

Con esto ya tenemos suficiente para crear mapas impresionantes. En el próximo tutorial veremos la integración con Phaser.

domingo, 29 de mayo de 2016

Tiled, el editor de mapas 2D compatible con Phaser.js

Tiled es quizá el programa editor de mapas más famoso que existe. Con Tiled podemos crear mapas en 2D y 2.5D que podrán ser usados por una gran cantidad de motores, entre ellos Phaser. Para diseñar los mapas necesitamos previamente un tileset, es decir un conjunto de gráficos que puedan ser usados en múltiples casillas para formar algo más complejo. Piensa en ello como bloques de Lego (¡o de Minecraft!). Tiled es gratuito, software libre, usa las librerías Qt y está disponible para Windows, Mac OS X y Linux.


Instalando Tiled

Visita la página oficial de Tiled
Y sigue los pasos para tu sistema operativo. También lo encontrarás en Itch.io, donde podrás donar al autor si lo consideras conveniente.

Primeros pasos con Tiled, un mapa ortogonal y un tileset gratuito


Para este tutorial vamos a usar un tileset gratuito, a mi modo de ver muy completo.
DawnLike - 16x16 Universal Rogue-like tileset v1.81 de DragonDePlatino. Lo encuentras en OpenGameArt bajo la licencia Creative Commons 3.0 Attribution-ShareAlike. Descárgatelo y descomprime el fichero ZIP.

Ahora abre Tiled y verás algo como esto.
Selecciona Archivo -> Nuevo
En el diálogo asegúrate de elegir ortogonal (nuestro tileset es ortogonal) y formato de capa de patrones escoge CSV. Ahora en el tamaño del mapa elige la dimensión del mapa, lo que te guste, yo elegí 20 y 20. Lo importante viene a la derecha, en el tamaño del patrón. Tenemos que indicar cuanto ocupa una casilla, una celda en nuestro tileset. El nuestro es de 16x16 así que pon 16 y 16.
Ahora abajo a la derecha busca la pestaña Conjunto de patrones. Dentro selecciona la hoja blanca que significa Nuevo conjunto de patrones. Selecciona un archivo cualquiera del tileset. Yo he elegido la imagen Walls.png que estaba dentro de Objects.
 
Ahora tendrás disponibles si todo va bien las piezas para montar el mapa.
Con esto ya puedes hacer click en la pieza e ir dibujando tu mapa. Usa el estampador para poner elementos de uno en uno, la cubeta para pintar todos los elementos que antes eran iguales con el mismo tile y usa la goma para borrar. Puedes añadir más imágenes del tileset añadiendo más Conjuntos de patrones.
En el siguiente tutorial de Tiled veremos más herramientas y utilidades de Tiled como las capas y los atributos.