Hojas de sprites y Tiled – juego web

¡Obtén hojas de sprites gratis y construye mapas con Tiled!

Hojas de sprites y Tiled

Hojas de sprites y Tiled

Bases para construir mapas: hojas de sprites y Tiled

Ya construidos los aspectos más básicos del juego, el siguiente paso es trabajar en los mapas. Esto es más o menos sencillo ya que sólo necesitamos dos elementos. En primer lugar, necesitaremos hojas de sprites para darle algún aspecto a los mapas. En segundo lugar, necesitaremos alguna herramienta para construir los mapas.

Para resolver lo primero, acudieremos a la web opengameart.org. En esta página encontraremos una vasta colección de hojas de sprites. Aun mejor: todas las hojas son gratuitas y muchas de ellas tienen licencias permisivas.

En cualquier caso, tal y como se explica en el vídeo, usaremos dos hojas concretas. Esto ayuda a que todos trabajemos con los mismos materiales. Las hojas en cuestión pertenecen al usuario surt. La primera hojas se llama “another NES-like village“. Esta hoja es de estilo 2D lateral retro y nos servirá para crear algún nivel. La segunda hoja se llama “blowhard-2-blow-harder“. Esta hoja en cambio es 2D cenital y nos servirá para el mapa del mundo.

Si por cualquier circunstancia la web no estuviera disponible, también puedes conseguir las hojas en mi Google Drive.

Ya resuelto el tema de las hojas de sprites, centrémonos en la herramienta para crear mapas. Usaremos el fantástico y gratuito editor Tiled. Está disponible para Windows, Mac y Linux.

Con Tiled podrás crear mapas laterales, cenitales o isométricos. Aparte de eso, Tiled permite insertar diferentes objetos en los mapas. Esto es útil para crear colisiones o zonas especiales. Pero sin duda, la utilidad más interesante es la de exportar mapas en diferentes formatos. Entre ellos, se encuentra JSON, ideal para trabajar con Javascript en la web.

Elige una hoja de sprites cenital, otra lateral e instala Tiled para tu sistema operativo. Después, ¡podrás comenzar a construir mapas!

¿Te ha gustado? ¡Colabora en Patreon!

15 comentarios

  • Hola de nuevo!!!
    Estoy tratando de ir entendiendo el mundo de la programación, en éste caso JavaScript, estoy con tu serie de las torres de Hanói, y se me ocurrió una vez el jugador gane, en lugar de poner presione F5 para jugar de nuevo, presione la tecla ESPACIO para jugar el siguiente nivel y agregarle un bloque más a las cajas, en lugar de ser 4 bloques y 1 vacío, que sean 5 bloques sólidos y uno vacío. Pero no consigo realizarlo. Digamos que mi lógica sería, cuando se llega al lugar donde se realiza el método victoria, ahí, que aparezca titulo que digo lo de presionar la tecla espacio para siguiente nivel, pero de inmediato me di cuenta que al ejecutar el método iniciar no aparecen las cajas con sus bloques en la primera como sí pasa al presionar F5, ya ahí tengo el primer gran inconveniente.
    Si en una de esas tienes tiempo y me das alguna idea, o me puedes explicar cómo hacer para que aparezcan nuevamente las cajas como al principio, es decir, que se comporte mediante código de la misma manera que lo hace cuando presionamos F5. Luego veo como modifico para que aparezca un bloque mas.
    Desde ya muchas gracias. Saludos Leopoldo.

    • En primer lugar, si está todo encerrado en un DIV, puedes acceder desde Javascript y borrar todo el contenido HTML. Una vez vacío, puedes volver a añadir el contenido generado HTML que quieras y colocar los eventos que consideres necesarios (con algún método que genere el juego y lo añada a un contenedor DIV, sólo variando la forma en que se genera el juego, podrías ir reiniciando el juego hasta el infinito).

  • Hola! Estaba mirando que tienes un proyecto en javaScript “Torres de Hanói”. Cómo puedo hacer para correrlo con xampp? Es muy complicado? Calculo que debo iniciar el php de uno u otro?

    Ah y con Apache Cordova se puede exportar para Windows?

    Muchas gracias. Leopoldo.

    • ¡Hola Leopoldo!

      No es complicado ejecutar el proyecto. Sólo necesitas instalar XAMPP, colocar la carpeta del proyecto en htdocs, encender el servidor Apache y entrar en la ruta localhost/nombredetuproyecto.

      Y sí, Apache Cordova permite exportar a aplicaciones de Windows 🙂

  • Hola JavaDevOne!
    Estoy muy entusiasmado con éste canal. Enseñas de todo un poco, especialmente los cursos de juegos desde cero. Una pregunta (futurista), existe la posibilidad de, una vez finalizado el juego web, nos enseñes a transformarlo en un juego de escritorio, modificandolo para que se guarden los avances en el disco rígido?
    La idea que fuera Web es genial. Sólo que luego pretendo realizar algo (un juego), una vez aprendido todo el proceso, y quizás se me haga más fácil para que lo pruebe un amigo o familiar, y además sumar mas conocimiento.
    Y una última pregunta, tenes pensado luego realizar otro curso paso a paso sobre un juego en 3D? O ya es algo fuera de nuestro alcance?
    Muchas gracias como siempre por hacernos llegar tanto conocimiento! Abrazo Leopoldo.

    • ¡Gracias por el apoyo!

      Sí que puedes modificar el juego, no sería excesivamente difícil. Tal cual lo tengo planeado, los avances se van a guardar en una base de datos con todos los objetos relativos a la partida. Sin embargo, esto se podría cambiar para guardar los datos en el localStorage de Javascript. Esencialmente, el localStorage es un espacio de memoria que cada navegador otorga a cada web. Dentro se puede guardar un número limitado de datos, aunque suficiente para el 99% de los casos. Además, si luego portas el juego con Apache Cordova, haciendo uso del localStorage, esa funcionalidad se puede portar a lo que sería equivalente a “guardar en un archivo” en Windows, en Mac o en Android.

      En cuanto a lo del 3D, sinceramente no me preocupa tanto hacer un juego que funcione como conseguir los recursos necesarios (recordemos que no se trata en esta ocasión de hojas de sprites o imágenes, se trataría de modelos 3D y yo de modelar no tengo ni idea…). Si en los próximos meses encuentro alguna colección decente de modelos 3D para poder montar un juego, seguramente podamos hacer una serie (ya veríamos si desde cero con un lenguaje, usando algún framework para ahorrar algo de esfuerzo o directamente usando algo más automático como Unity, Unreal Engine o algún otro motor.

      ¡Saludos!

      • Perfecto! Gracias por la respuesta!
        Nos tienes súper enganchados! Gracias por todo!!! Acá en Argentina te seguimos unos cuantos!
        Saludos Leopoldo!

  • Hola estuve viendo tu canal y me parecen muy bien hechos los tutoriales, me gustaria que enseñaras como cargar correctamente el mapa en el juego, pensando en cargar mapas muy extensos, mapas exportados con la extension .json y .js. Estuve buscando información y no he encontrado mucho acerca de esto, solo en tu canal. Sigue asi y muchas gracias de antemano.

    • Eso está hecho, es justamente lo que cubriremos en próximos episodios e intentaremos que sea lo más eficiente posible.

      • :). Amigo es que tengo algunas dudas veo que en tus tutoriales usas objetos de la forma var object = {}; he visto que en la mayoria de los tutoriales de juegos estructuran el código con base a funciones como objetos me podrias decir cual es mejor para realizar un buen desarrollo de juegos, no entiendo cual me haria el desarrollo más ameno. y además ¿porqué no usas canvas para realizar el dibujado de los graficos?. Muchas Gracias.

        • Estoy realizando un desarrollando modular en javascript con requirejs.

        • En primer lugar, ten en cuenta que no es lo mismo crear objetos estáticos que instanciables. El tipo object = {} es un objeto estático, así que sólo puede haber uno en todo el programa (también se le suele llamar namespace). En cambio, un objeto tipo object = new Object() es instanciable. No es que ninguno de los dos sea mejor o peor. En mi proyecto, la idea es que si el objeto sólo podrá existir una vez, lo hago estático. Si necesitare muchos del mismo tipo, entonces será instanciable.

          En cuanto al canvas, me parece bastante obsoleto hoy en día. Tiene un rendimiento muy malo, casi imposible alcanzar 60 FPS si no tienes un ordenador con un procesador muy potente (y eso ya descarta automáticamente a los teléfonos móviles, así se pierde mucho público para el juego). Incluso aunque alcance los 60 FPS, el juego se suele atascar cuando hay mucho movimiento en pantalla; de nuevo, lejos de lo ideal. Por supuesto, todo esto se refiere al canvas 2D, en el canvas 3D con Web-GL la cosa cambia, pero es demasiado complicado en mi opinión y no tiene sentido en un juego 2D usar algo así.

          ¿Entonces por qué uso CSS? CSS está acelerado por hardware (tarjeta gráfica) y funciona de forma muy rápida incluso en ordenadores y móviles más antiguos y menos potentes. Es perfecto para hacer un juego que funcione en muchas plataformas diferentes. Además, luego se podría portar con Apache Cordova el proyecto a Windows, Linux, Mac, Android, etc. Al aceptar Cordova sólo programas HTML5, la mezcla de Javascript y CSS para el juego cumple los requisitos y serviría.

          Si no lo ves claro, espera a que lleguemos al episodio de los gráficos y verás 🙂

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *