Share
Phaser es un framework de juegos HTML5 de código abierto creado por Photon Storm. Está diseñado para crear juegos que se ejecutarán en navegadores web de escritorio y móviles. Se prestó mucha atención al rendimiento dentro de los navegadores web móviles, un área creciente e importante de los juegos web. Si el dispositivo es capaz, utiliza WebGL para renderizar, pero de lo contrario, vuelve a Canvas sin problemas. En este artículo, cubriré los recursos para aprender Phaser, además de mostrar lo que puede hacer y algunas de las ideas que surgieron en su diseño..
Es justo decir que se siente como si se lanzara un nuevo framework de juegos HTML5 cada semana, tal es la proliferación de ellos. Entonces, ¿por qué deberías considerar a Phaser entre la gran elección que hay? Me gusta pensar que la razón tiene algo que ver con el legado del equipo involucrado en su construcción..
En Photon Storm nos dedicamos a desarrollar nada más que juegos HTML5 hace varios años, cuando en realidad no había una gran cantidad de opciones de framework, y podías contar la cantidad de desarrolladores de juegos HTML5 en un solo dígito. Al ingresar al espacio tan temprano, y desde Flash, sentimos la necesidad de crear herramientas a las que estábamos acostumbrados en AS3..
Habíamos sido grandes fanáticos de Flixel y habíamos disfrutado del éxito tanto con nuestros propios juegos como con nuestras herramientas de poder de Flixel. Hubo un gran revuelo al ver a otros desarrolladores usarlos para ayudar a lanzar sus juegos, y esto era algo que queríamos duplicar en HTML5.
Sin embargo, para lo que no estábamos preparados era cuán rápido estaba cambiando el panorama de HTML5. Incluso hoy, tengo una diapositiva en mis presentaciones que muestro en conferencias diciendo "Esté preparado para desaprender lo que sabe cada seis meses", y creo que esto sigue siendo cierto. Los proveedores de navegadores están iterando y mejorando a un ritmo fenomenal en este momento. Solo se necesitan unas semanas para que las nuevas funciones lleguen al público, y si está cargado con un marco de juego que se mantiene durante el tiempo libre de alguien o está en un ciclo de liberación lento, entonces no pasa mucho tiempo antes de que las cosas estén muy desfasadas.
Otra señal de este cambio fue en los tipos de trabajo del cliente que se nos encomendó construir. Como empresa, solo hacemos dos cosas: crear juegos HTML5 y construir Phaser. Hemos creado juegos HTML5 para algunas de las marcas de entretenimiento más grandes del mundo, y eso nos ha dado una gran perspectiva del tipo de requisitos que exigen. El área más grande en la que se nos pedía que trabajáramos eran los juegos que se ejecutan dentro del navegador móvil; tantos marcos HTML5 se centran en el escritorio, donde el rendimiento es abundante y las conexiones son rápidas y estables, e ignoran el lado de la vida del navegador móvil. Sin embargo, ahí es donde todavía vemos que la demanda del cliente es más fuerte. Así que fue vital que Phaser pudiera usarse para construir nuestros juegos de clientes, independientemente de la plataforma..
Desde el lanzamiento de Phaser 1.0, las actualizaciones han sido regulares y completas, con muchas características nuevas y correcciones implementadas rápidamente. Trabajamos en un plazo aproximado de un mes desde dev hasta master. Puede ver un registro de cambios completo en GitHub. Curiosamente, ahora estamos viendo una demanda de juegos que se ejecutan dentro de un WebView, por lo que nos aseguraremos de que Phaser funcione bien en este entorno a partir de 2014..
Además de mantener actualizado a Phaser, también fue crucial para nosotros que hayamos construido algo que era De Verdad fácil de usar. Y verás esto reflejado en todo el marco. Esto se debe a nuestra experiencia con Flixel Power Tools, y más allá de eso, cuando solía trabajar para The Game Creators ayudando a definir la forma de sus idiomas de juego. Creo que siempre ha sido parte de mí el hecho de que quisiera que el desarrollo del juego fuera lo más fácil posible para los desarrolladores, una tendencia que seguiré a medida que Phaser evolucione..
Me disculpo antes de cualquiera de los siguientes (¡o más!) Suena un poco "marketing". Phaser es un producto gratuito, no ganamos dinero de que lo utilices y, si me entusiasma, es solo porque me apasiona lo que he creado. Así que por favor tengan paciencia conmigo!
Phaser es una biblioteca de JavaScript diseñada para ejecutarse en los principales navegadores de escritorio. Esto incluye Internet Explorer 9 y superior, Firefox, Chrome y Safari. Antes de IE9, no admitía el lienzo, por lo que si necesita un marco que pueda manejar la representación de DOM, Phaser no será adecuado. Sin embargo, la demanda de este tipo de juegos se está volviendo casi mínima; en todo caso, está cambiando la otra dirección (hacia WebGL).
En dispositivos móviles, Phaser se ejecuta en iOS5 y superior dentro de Mobile Safari. En Android, se ejecuta en 2.2 y superiores tanto en el navegador de valores como en Chrome. Chrome es ahora el navegador estándar de Android, con versiones recientes que incluso admiten WebGL, pero aún así no puede ignorar los millones de dispositivos Android heredados que siguen en uso..
Gracias a Mozilla, recibimos un montón de dispositivos de prueba FFOS y hemos comenzado a garantizar que Phaser se ejecute bien en ellos. Hasta ahora, las cosas se ven bien, y estaremos produciendo guías de implementación en el nuevo año..
También hemos visto que los juegos Phaser funcionan bien en los dispositivos Tizen y sin problemas bajo el envoltorio Kindle HTML5, lo que significa que puede implementarse en esos dispositivos 'listos para usar'. A medida que más teléfonos que funcionan con la red comienzan a ingresar al mercado, nos aseguraremos de mantener Phaser actualizado para ellos..
Hay una selección tan masiva de excelentes paquetes de desarrollo de juegos que apuntan a crear aplicaciones nativas (Unity, Corona, Loom, etc.), que no era un área en la que quisiéramos gastar mucho esfuerzo al principio, especialmente en comparación con los menos atendidos. mercado de navegadores móviles.
Sin embargo, con el desarrollo de envoltorios como CocoonJS y Ejecta, vemos que los desarrolladores que usan Phaser envuelven sus juegos y los lanzan como aplicaciones nativas. Entonces, a partir de 2014, comenzaremos a agregar soporte para CocoonJS directamente en el núcleo, así como soporte para envoltorios de escritorio como node-webkit..
Destacaremos algunas de las características que consideramos más importantes de Phaser desde el punto de vista de un desarrollador:
Esto puede sonar como una 'característica' extraña, pero en realidad debería ser bastante convincente. Phaser no utiliza ninguna práctica de estilo OO falso internamente. No hay una cadena de herencia masiva o un sistema de componentes, y tampoco tiene que forzar a sus objetos en ninguna estructura de clase fija. Es una cadena de prototipos simple y directa, la forma en que se diseñó JavaScript..
Esto no significa que no puedas construir tu juego de una manera estructurada; lejos de ahi. Todo lo que significa es que no hacer cumplir eso. También significa que Phaser es internamente muy fácil de hackear con.
Pero me gusta TypeScript!
¡Bien, porque también tenemos un archivo de definiciones de TypeScript! Hay una guía específica sobre el uso de Phaser con TypeScript disponible.
Phaser tiene un cargador de activos incorporado que puede manejar:
De manera rutinaria, exportamos archivos de textura de atlas directamente desde Flash a nuestros juegos Phaser, y admite atlas completamente recortados. Los activos se pueden cargar parcialmente, almacenar en caché y extraer de diferentes URL (para soporte de CDN), e incluso puede convertir cualquier sprite en una barra de progreso con una sola línea de código.
Internamente, Phaser usa Pixi.js para renderizar. Pixi es una excelente biblioteca de renderización rápida que se centra en Canvas y WebGL. Es una biblioteca en la que continuamos contribuyendo para ayudar a impulsar las cosas..
Para sus juegos, esto significa que si el navegador es compatible con WebGL, el jugador obtendrá una experiencia más fluida. WebGL es común en el escritorio, pero aún está emergiendo en el móvil; aun así, es hacia donde se dirigen los juegos HTML5 en el futuro, por lo que su soporte es vital. La última versión de Phaser presentó el soporte de sombreado y filtro WebGL, y los próximos implementarán mapas normales para que pueda beneficiarse de nuevas herramientas como Sprite Lamp.
El audio ha sido uno de los puntos más débiles de los juegos HTML durante mucho tiempo. Hace solo un par de años, nos enfrentamos a la opción de tener un solo canal de audio de alta latencia que paralizaría el dispositivo durante la reproducción o no tener ningún tipo de audio. Pero los tiempos han cambiado y la Web Audio API llegó a nuestra salvación. Permite un soporte de audio adecuado basado en nodos, con múltiples canales, enrutamiento de nodos y todo tipo de efectos. Así que Phaser es totalmente compatible con Web Audio.
Sin embargo, especialmente en Android, muchos dispositivos aún no son compatibles con Thi, por lo que también admitimos Audio heredado y el uso de Audio Sprites: el método de agrupar varias muestras en un solo archivo y usar marcadores de reproducción para saltar a diferentes efectos Phaser cambiará entre los dos dependiendo de las capacidades del dispositivo y también incluye desbloquear el subsistema de audio automáticamente para ti, algo que atrapa a muchos desarrolladores móviles por primera vez!
Cuando se admite el escritorio y el móvil, hay un número cada vez más variado de posibles opciones de entrada. Phaser admite teclado, mouse, touch, MSPointer (ahora Pointer bajo IE11) y combinaciones de los mismos. Por ejemplo, en los dispositivos Windows Surface, puede cambiar entre usar un mouse y tocar, o incluso usar ambos a la vez..
Para la entrada táctil, Phaser se adapta a los entornos de toque único y multitáctil. Puede definir hasta 10 puntos táctiles y hacer un seguimiento de todos ellos de forma independiente, utilizando sus eventos para manejar las interacciones de Sprite, como arrastrar, tocar y colisión..
En la biblioteca central se incluyen los sistemas ArcadePhysics y ArcadeParticles. Estas son simples bibliotecas de peso ligero AABB que le permiten aplicar la gravedad y el movimiento a cualquier Sprite, y luego realizar pruebas de colisión y separación. Al usar un quadtree basado en el mundo para ayudar a minimizar las pruebas de colisión, puede lograr resultados decentes rápidamente con poco tiempo de procesamiento requerido.
Sin embargo, entendemos que esto no se adaptará a todos los tipos de juegos, por lo que el sistema de física es fácil de reemplazar y ninguna de las propiedades físicas está vinculada a los sprites reales (sino a un componente del cuerpo), por lo que se puede cambiar por Me gusta de Box2D o p2.js. Un sistema de interpolación también está incorporado, lo que le permite interpolar objetos o propiedades fácilmente. Y si el juego se detiene, todas las interpolaciones se detendrán automáticamente y se reanudarán según sea necesario..
Nuestro objetivo es que el núcleo de Phaser finalmente se establezca y alcance un buen equilibrio estable, donde no es probable que lo toquemos más allá de las correcciones y las actualizaciones del navegador. Sin embargo, queremos que Phaser siga creciendo, brindando funciones para todo tipo de juegos pero sin hacer que la biblioteca central explote en crecimiento. Para ello, hemos incorporado un sistema de plugins..
Los complementos de Phaser pueden registrarse en el marco central, actualizarse de acuerdo con el ciclo del juego principal y realizar todo tipo de tareas adicionales útiles. Un gran ejemplo de esto es el complemento EasyStar de búsqueda de ruta recientemente lanzado. Estaremos lanzando complementos para nosotros mismos y esperamos ver más de la comunidad en el futuro..
Aquí cubriremos dónde descargar Phaser, cómo configurar el desarrollo y dónde comenzar..
El proyecto Phaser está alojado en GitHub en https://github.com/photonstorm/phaser. Hay dos ramas principales: master es donde se puede encontrar la última versión estable, y dev es donde se construye la versión de trabajo en progreso. Tan pronto como se completa una nueva versión, pasamos de dev a master y luego se actualiza para preparar la próxima versión. A menos que sepa que necesita la rama dev, siempre debe comenzar con master.
Idealmente, debería usar git y checkout o bifurcar el repositorio, para que pueda actualizarlo fácilmente. Pero si eres nuevo en git o no estás cómodo usándolo, existe la opción de descargar un archivo zip de todo el repositorio también..
Artículos Relacionados
Una vez descargado, le recomendamos encarecidamente que siga la Guía oficial de introducción. Esto lo guiará a través de la configuración de un servidor web local, la selección de un entorno de desarrollo e incluso la creación en la nube si así lo desea..
La guía se desglosa en las siguientes secciones:
También hay una guía equivalente para TypeScript.
Con su entorno de desarrollo configurado, es hora de construir un juego. Recomendamos comenzar con el tutorial de Creación del primer juego de Phaser. Lo guiará a través del proceso de creación de un juego de plataforma simple, le presentará los conceptos centrales de cómo funciona Phaser y lo preparará para expandirse y aprender más..
Cuando realice el pago o descargue Phaser, vendrá con nuestra suite de ejemplos. Este es un sitio web autónomo que consta de más de 170 ejemplos de códigos diferentes, divididos en áreas clave: Física, Colisión, Sprites, Texto y más. Cada ejemplo es una pieza de código autónoma totalmente funcional que puede abrir, editar y aprender fácilmente. Utilizados junto con los documentos de la API, estos son una vía rápida para aprender rápidamente sobre partes específicas de Phaser.
Los documentos API están disponibles en el repositorio de Phaser en el docs carpeta. Hemos estado trabajando duro en los documentos durante algunos meses y, aunque todavía son un poco toscos, ahora son completos y cubren todo el marco..
La versión más reciente (1.1.3) vio otra gran actualización, con muchas áreas llenas de más detalles, y nuestra misión continua es mejorar la documentación con cada nueva versión de Phaser..
Desde la versión 1.1.3 de Phaser, el marco completo ahora se ejecuta a través de JSHint antes del lanzamiento. También proporcionamos nuestro archivo de configuración en el repositorio..
JSHint es una forma de asegurarnos de que el código de marco sigue un conjunto fijo de directrices de estructura de código, desde la forma en que manejamos las pestañas y la sangría hasta los nombres de variables y los estilos de cita. Aquellos que deseen contribuir con Phaser deben verificar sus actualizaciones contra nuestra configuración de JSHint.
Si ha seguido este artículo, comprenderá por qué Phaser es excelente, qué pretendemos lograr al hacerlo y cómo puede aprender a hacer juegos con él. Pero el aspecto más importante de cualquier marco de juego no son las características que presenta en los demos deportivos o las demostraciones de tecnología, sino la comunidad detrás de él..
Hacer un juego es un trabajo duro, punto. Y es aún más difícil de hacer de forma aislada, con un marco completamente nuevo que casi con certeza funciona de forma diferente a cualquier cosa que haya usado en el pasado. Afortunadamente, Phaser tiene una comunidad próspera basada en esto..
Establecimos el foro de desarrolladores de juegos HTML5 hace poco, no específicamente para Phaser, sino simplemente porque hacer juegos HTML5 era un área tan nueva que queríamos poder hablar con otros al respecto. Desde entonces, se ha ido fortaleciendo, con tableros activos, 250,000 vistas al mes y una base de usuarios amigable y profesional..
Tenía sentido que usaríamos esto como el hogar oficial de Phaser, y encontrarás muchos amigos amigables amigables para rebatir ideas y preguntas. El foro también alberga otras excelentes bibliotecas, como Pixi.js y el marco 3D de Babylon.js, y hay una gran área de Exhibición de Juegos para mostrar todo lo que haces cada día es una fuente constante de inspiración para mí, y es realmente genial ver lo que los desarrolladores están logrando para hacer HTML5 en estos días.
El boletín Phaser se publica una vez al mes y contiene detalles sobre nuevos lanzamientos, artículos breves sobre nuevos temas de Phaser, complementos y tutoriales. La suscripción es, por supuesto, gratuita y se administra a través de Campaign Monitor, por lo que puede estar seguro de que no tendrá correo no deseado y de una manera fácil de darse de baja si lo desea..
Puedes ayudar a dar forma a la forma en que Phaser crece. Si encuentra un error, por favor repórtelo. No le llevará mucho tiempo, y hasta la fecha hemos solucionado más del 91% de todos los problemas informados (y todavía estamos trabajando en el otro 9%). También puede emitir solicitudes de extracción contra la rama de desarrollo o liberar sus propios complementos o filtros.
Pasamos muchas horas incansables trabajando en Phaser porque queremos que sea el mejor marco de desarrollo de juegos HTML5 que pueda ser. Entendemos que no será perfecto para todos, y estamos bien con eso. Pero si lo usa y hace algo, no importa cuán pequeño piense que es, por favor háganoslo saber. ¡No lo vas a creer con un real impulso motivador, es cuando los desarrolladores nos muestran los juegos en los que han estado trabajando! Póngase en contacto con nosotros en el foro, a través de Twitter (@photonstorm) o por correo electrónico..
Sin embargo, sobre todo, esperamos que te diviertas haciendo tu juego..
Accentsconagua