La Gran Guía de Phaser.js en Español

¿Quiéres crear tu juego HTML5? ¿Quiéres hacerlo de forma rápida y sencilla pero no sabes por donde empezar? Este es el lugar adecuado. Aquí tienes todos los pasos para convertirte en un experto de Phaser.js

¿Por qué elegir Phaser.js para tu próximo juego?

Foro para preguntar y ayudar a otros desarrolladores

Libros que todo desarrollador de juegos debe leer

Primeros pasos 

  1. Instalando Phaser.js
  2. Iniciar Phaser.js y pantalla de carga
  3. Rectángulos, círculos y formas geométricas
  4. Entrada táctil, ratón y teclado
  5. Sprites
  6. Spritesheets
  7. Texto y tipografías

Tiled

  1. Primeros pasos con Tiled, editor de mapas
  2. Capas y atributos en Tiled
  3. Usando mapas de Tiled en Phaser

Nivel intermedio

  1. Sonidos y música
  2. Motor de físicas
    1. Diferencias entre Arcade, Ninja y P2
    2. Colisiones entre objetos complejos con P2 
  3. Animaciones
  4. Interfaz gráfica (UI)

Nivel avanzado

  1. Multijugador
  2. Inteligencia Artificial
  3. Partículas
  4. Gamepad

Distribuir tu juego

  1. Servidor web gratuito con Netlify 
  2. Convertir juego en Phaser en APK de Android con Apache Cordova
  3. Electron / Windows, Mac OS X y Linux
  4. Chrome Apps
  5. UWP / Windows 10 y Xbox ONE
  6. Nintendo Web Framework / Wii U
  7. FGL
  8. MelonJS
  9. Clay.io
  10. Kongregate
  11. Chupamobile
  12. Itch.io

Publicidad en tu juego

  1. Integrar anuncios de AdMob en tu juego
  2. RevenueHits

Plugins

Recursos gráficos

  1. Fiverr, encuentra recursos para tu juego
  2. OpenGameArt
  3. GIMP para Pixel Art
  4. Transformando imágenes con ImageMagick

Recursos sonoros

  1. FreeSFX
  2. Audacity
  3. OurMusicBox, música sin copyright

Game Jams/Competiciones

  1. LudumDare
  2. js13k
  3. Itch.io Game Jam
  4. OneGameAMonth
  5. Las 12 Uvas 

Ideas

  1. Tema de inicio de sesión en GNU/Linux con Phaser.js 
  2. Twisted City

 

 

20 comentarios:

  1. Respuestas
    1. Actualmente estoy escribiéndolos, en cuento esten listos los publicaré.

      Eliminar
  2. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  3. Tengo una consulta, actualmente estoy trabajando con Phaser y gracias frameword e podido crear los juegos de ejemplo y ademas crear las apk para android y todo funciona, lo malo es que el juego se ejecuta muy lento.
    Mi pregunta es si hay alguna linea de codigo que arregle ese problema.
    Gracias de ante mano por su respuesta.
    Att.: Luis Alas desde El Salvador

    ResponderEliminar
    Respuestas
    1. ¿Qué estas usando para generar el APK? Si estas usando PhoneGap o Cordova hay un plugin que puede mejorar mucho el rendimiento a costa de que el APK sea mucho más pesado, se llama Crosswalk (https://crosswalk-project.org/), desarrollado por Intel. Crosswalk también se puede usar independientemente, en ambos casos notarás una mejora del rendimiento. Si ya usas Cordova no hay que hacer nada, solo instalar el plugin, si no lo usas puedes seguir los pasos de la guía o instalar el Intel XDK, que es un editor muy fácil de usar y genera los proyectos para Android con Crosswalk.

      Eliminar
    2. Si no necesita nada de Cordova puede probar CocoonJS para mejorar el performance usando Canvas+
      Saludos, Nicholls

      Eliminar
  4. Hola man, excelente idea de crear una guía para Phaser!

    Mira mis ejemplos:
    - http://nicholls.co/blog/post/Creando-Juegos-HTML5-con-Phaser-en-Monaco
    - http://slides.com/juandavidnicholls/phaser

    Saludos!

    ResponderEliminar
    Respuestas
    1. ¡Gracias por los enlaces! Con tu permiso voy a enlazar esa presentación tan chula que has montado.

      Si quieres colaborar en el blog algún día quedas invitado.

      Eliminar
  5. Wow, esto es oro puro. Continua con el resto de tutoriales de Phaser, eres un crack!. Es justo lo que busco mi amigo. Muchas gracias.

    ResponderEliminar
  6. En horabuena excelente guia de phaser, me encantaría ver mas contenido, estoy adentrandome en el mundo de phaser, saludos !

    ResponderEliminar
  7. hola gracias por el aporte, me pueden ayudar con el tema de las dimensiones del juego para que se vea bien en cualquier dispositivo? (desktop, tablet, smartphone).. probe unos codigos para forzar la vista en horizontal pero no me funciona en phaser 2.6 .. gracias por sus aportes.

    ResponderEliminar
    Respuestas
    1. Es un problema difícil de resolver y que trataré de abordar en esta web. Dicho sea de paso, la solución en Phaser es mucho más sencilla que en otros frameworks de JavaScript.

      Básicamente, tienes que elegir unas dimensiones y luego las puedes escalar sin afectar a su funcionamiento gracias a Phaser Scale Manager.

      En cuanto a la dimensión de partida, elige la más pequeña que quieras soportar (típicamente la pantalla de algún teléfono móvil) y haz el juego que se vea bien con el tamaño más pequeño.

      Eliminar
    2. me imagine algo asi, muchas gracias por tu respuesta, quedo atento a novedades de esta web.

      Eliminar
  8. Genial tu trabajo de traduccion. Estoy seguro de que es una gran ayuda para muchos hispanohablantes :D

    ResponderEliminar
    Respuestas
    1. ¡Gracias por tus palabras! Y no olvides que para cualquier duda puedes usar el foro Gamedev Hispano (http://gamedevhispano.com)

      Eliminar
  9. HOLA monstruo, una pregunta.. el resto de los videos amigo qu eno pueod verlos... gracias eres un pro!

    ResponderEliminar
    Respuestas
    1. ¡Estoy en ello! De momento puedes suscribirte por correo electrónico o seguirnos en Facebook/Twitter/Google+ y así saber cuando voy publicando cosas. ¡Un saludo!

      Eliminar
  10. se agradece el aporte.. me ha ayudado un monton!

    ResponderEliminar
  11. Se puede conectar Phaser con una base de datos?

    ResponderEliminar
    Respuestas
    1. yo tengo entendido que no tiene modulos para conectarse directamente pero es posible utilizar ajax/json a algun servicio web creado con php/asp/jsp para obtener datos.

      Eliminar