() translation by (you can also view the original English article)
Phaser es un marco de juego de código abierto HTML5 creado por Photon Storm. Está diseñado para crear juegos que se ejecutarán en navegadores web de escritorio y móviles. Se dio mucha importancia al rendimiento dentro de los navegadores web móviles, un área cada vez más importante de los juegos web. Si el dispositivo es capaz, a continuación, utiliza WebGL para la representación, pero de lo contrario, vuelve a la transparencia a Canvas. En este artículo, voy a cubrir los recursos para el aprendizaje de Phaser, así como mostrar lo que puede hacer y algunos de los pensamientos que entraron en su diseño.
Sin embargo, ¡¿otro marco de juego HTML5?!
Es justo decir que se siente como si un nuevo marco de juego HTML5 se publica cada semana, tal es la proliferación de ellos. Entonces, ¿por qué debería considerar Phaser entre la gran opción que existe? Me gusta pensar que la razón es 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 mucha elección de framework, y se podía contar el número de desarrolladores de juegos HTML5 en un solo dígito. Al entrar en el espacio tan temprano, y viniendo de Flash, nos sentimos instantáneamente la necesidad de construir las herramientas que estábamos acostumbrados en AS3.
Hemos sido grandes fans de Flixel y hemos disfrutado del éxito tanto con nuestros propios juegos como con nuestras Flixel Power Tools. Hubo un verdadero revuelo al ver que otros desarrolladores los usaban para ayudar a que sus juegos fueran lanzados, y esto era algo que queríamos duplicar en HTML5.
Lo que no estábamos preparados, sin embargo, era la rapidez con la que cambiaba el paisaje HTML5. Incluso hoy, tengo una diapositiva en mis presentaciones que demuestro en las conferencias diciendo "esté preparado para desaprender lo que usted sabe cada seis meses", y creo que esto sigue siendo verdad. Los proveedores de navegadores están iterando y mejorando a un ritmo fenomenal ahora mismo. Se tarda sólo una cuestión de semanas para que las nuevas características de burbuja a través del público, y si usted está ensillado con un marco de juego que se mantiene durante el tiempo libre de alguien o está en un ciclo de lanzamiento lento, entonces no toma mucho tiempo para que as cosas esten muy anticuadas.
Otra señal de este cambio fue en los tipos de trabajo de clientes que se estaban encargando de construir. Como empresa solo hacemos dos cosas: construir 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 visión profunda de los requisitos que exigen. La mayor área en la que se nos pedía que trabajáramos eran juegos que corrían dentro del navegador móvil; Por lo que muchos marcos HTML5 se centran en el escritorio, donde el rendimiento es abundante y conexiones rápidas y estables, e ignorar el navegador móvil. Sin embargo, es donde todavía vemos que la demanda del cliente es más fuerte. Por lo tanto, era vital que Phaser pudiera ser utilizado para construir nuestros juegos de cliente, independientemente de la plataforma.
Desde el lanzamiento de Phaser 1.0, las actualizaciones han sido regulares y completas, con muchas nuevas características y arreglos en su lugar rápidamente. Trabajamos en un cambio de aproximadamente un mes de dev a master—puedes ver un historial de cambios completo en GitHub. Curiosamente, ahora vemos una demanda de juegos que se ejecutan dentro de un WebView, por lo que nos aseguraremos de que Phaser funcione bien en este entorno en 2014.
Además de mantener actualizada a Phaser, también fue crucial para nosotros que construyéramos algo que fuera realmente fácil de usar. Y verá esto reflejado en todo el marco. Esto se deriva de nuestra experiencia con Flixel Power Tool, y más allá de eso cuando trabajaba para The Game Creators ayudando a definir la forma de sus lenguajes de juego. Supongo que siempre ha sido parte de mí que quería hacer el desarrollo de juegos tan fácil como sea posible para los desarrolladores, una tendencia que seguirá como Phaser evoluciona.
Pido disculpas por adelantado de cualquiera de los siguientes (o arriba!) Suena un poco "marketing". Phaser es un producto gratuito, no ganamos dinero de usted, y si me entusiasma, es sólo porque me apasiona lo que he creado. Así que por favor, tenga paciencia conmigo!
¿Qué plataformas puedo utilizar con Phaser?
Navegadores de escritorio
Phaser es una biblioteca JavaScript diseñada para ejecutarse en todos los principales navegadores de escritorio. Esto incluye Internet Explorer 9 y superior, Firefox, Chrome y Safari. Anteriores a IE9 no soportan Canvas, por lo que si necesita un marco que pueda manejar DOM, entonces Phaser no será adecuado. Sin embargo, la demanda de estos tipos de juegos se están convirtiendo en mínimos; Si algo, está cambiando la otra dirección (hacia WebGL).
Navegadores móviles
En dispositivos móviles, Phaser se ejecuta en iOS5 y superior dentro de Mobile Safari. En Android, se ejecuta en 2.2 y superiores en el navegador de valores y en Chrome. Chrome es ahora el navegador estándar de Android, con versiones recientes que incluso soportan WebGL, pero todavía no puedes ignorar los millones de dispositivos legados de Android que permanecen en uso.
Firefox OS, Tizen y Kindle
Gracias a Mozilla, recibimos un montón de dispositivos de prueba FFOS, y hemos empezado a garantizar que Phaser funciona bien en ellos. Hasta ahora, las cosas se ven bien, y vamos a estar produciendo guías de implementacion en el proximo año.
También hemos visto los juegos de Phaser funcionando bien en los dispositivos de Tizen y perfectamente bajo el envoltorio de HTML5 de Kindle, lo que significa que puede desplegar a esos dispositivos "de fabrica". A medida que más teléfonos con tecnología web comiencen a entrar en el mercado, estaremos seguros de mantener Phaser actualizado para ellos.
Aplicaciones nativas y EXE de escritorio
Hay una gran variedad de excelentes paquetes de desarrollo de juegos que apuntan a la creación de aplicaciones nativas (Unity, Corona, Loom, etc), que no era un área que queríamos gastar mucho esfuerzo cubriendo al principio, especialmente en comparación con el mercado de navegadores móviles.
Sin embargo, con el desarrollo de envolturas como CocoonJS y Ejecta, estamos viendo los desarrolladores que usan Phaser envuelven sus juegos y los liberan como aplicaciones nativas. Por lo tanto, en 2014 comenzaremos a añadir soporte para CocoonJS directamente en el núcleo, así como soporte para envolturas de escritorio como node-webkit.
Características principales
Destacamos algunas de las características que consideramos más importantes de Phaser desde el punto de vista de un desarrollador:
Es solo JavaScript normal
Esto puede sonar como una extraña "característica", pero en realidad debe ser bastante convincente. Phaser no utiliza prácticas falsas de tipo OO internamente. No hay una cadena de herencia masiva ni un sistema de componentes, y tampoco hay que forzar a los objetos a formar una estructura de clase fija. Es una simple cadena de prototipos sencillos, la forma en que JavaScript estaba destinado a ser utilizado.
Esto no significa que usted no puede construir su juego de una manera estructurada; lejos de ahi. Todo lo que significa es que no lo hacemos cumplir. También significa que Phaser es internamente muy fácil de hackearlo.
¡Pero me gusta TypeScript!
Bien—¡porque también tenemos un archivo de definiciones de TypeScript! Hay una guía específica sobre usar Phaser con TypeScript disponible.
Fácil carga de activos
Phaser tiene un cargador de activos incorporado que puede manejar:
- Imágenes
- Coleccion de Hojas (marcos de tamaño fijo)
- Textura Atlas (incluyendo Texture Packer, Hash JSON, JSON Array, Flash CS6 / CC, Starling y formatos XML)
- Archivos de sonido
- Archivos de datos (XML, JSON, texto sin formato)
- Archivos JavaScript (para que pueda cargar parcialmente sus juegos o recursos basados en JS)
- Tilemaps (formatos de mapa CSV y mosaico)
- Fuentes Bitmap
De forma rutinaria, exportamos archivos de atlas de textura desde Flash directamente a nuestros juegos de Phaser, y soporta atlas totalmente recortados. Los activos pueden cargarse parcialmente, almacenarse en caché y extraerse de diferentes URL (para compatibilidad con CDN), e incluso puede convertir cualquier sprite en una barra de progreso con una sola línea de código.
Representación: WebGL y Canvas
Internamente, Phaser utiliza Pixi.js para renderizar. Pixi es una gran biblioteca de renderización rápida que se centra en Canvas y WebGL. Es una biblioteca a la que seguimos contribuyendo para ayudar a impulsar las cosas.
Para sus juegos, esto significa que si el navegador admite WebGL, el jugador obtendrá una experiencia más rapida. WebGL es común en el escritorio pero sigue emergiendo en el móvil; Aún así, es donde los juegos HTML5 se dirigen en el futuro, por lo que apoyarla es vital. La última versión de Phaser ha presentado el soporte de sombreado y filtros de WebGL y los que se publicarán próximamente implementarán mapas normales para que pueda beneficiarse de nuevas herramientas como Sprite Lamp.
Audio: Audio Web y Audio Legacy
El audio ha sido uno de los puntos más débiles de los juegos HTML por mucho tiempo. Hace sólo 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 audio en absoluto. Pero los tiempos han cambiado, y la API de audio web llegó a nuestro rescate. Permite un soporte de audio apropiado basado en nodos, con múltiples canales, enrutamiento de nodos y todo tipo de efectos. Así que Phaser es compatible con Web Audio.
Sin embargo, especialmente en Android, muchos dispositivos todavía no son compatibles con esto—asi que, también apoyamos el audio legacy y el uso de Audio Sprites: el método de empaquetar un montón de muestras en un único archivo y usar marcadores de reproducción para saltar a diferentes Efectos. Phaser se intercambiará entre los dos en función de las capacidades del dispositivo y también incluye desbloquear el subsistema de audio de forma automática para usted, ¡algo que atrapa a un montón de desarrolladores móviles que lo hacen por primera vez!
Entrada: Multi-Touch, Teclado, Puntero, Ratón
Al apoyar el escritorio y el móvil hay un número cada vez más variado de opciones de entrada potenciales. Phaser soporta teclado, mouse, touch, MSPointer (ahora Pointer bajo IE11), y combinaciones de los mismos. Por ejemplo, en los dispositivos Windows Surface se puede intercambiar entre el uso de un ratón y el tacto, o incluso utilizar ambos juntos.
Para la entrada táctil, Phaser se adapta a los entornos de un solo toque y multitoque. Puede definir hasta 10 puntos táctiles y rastrearlos de forma independiente, utilizando sus eventos para manejar interacciones Sprite como arrastrar, tocar y colisión.
Física, preadolescentes, y partículas
Se incluyen en la biblioteca principal los sistemas ArcadePhysics y ArcadeParticles. Estas son simples bibliotecas livianas AABB que le permiten aplicar la gravedad y el movimiento a cualquier Sprite, a continuación, probar una colisión y separación. Usando un árbol cuaternario 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 adapta 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án vinculadas a los sprites reales (sino a un componente del cuerpo), por lo que se puede intercambiar por el Le gusta Box2D o p2.js. Un sistema tweening también está incorporado, lo que le permite interponer objetos o propiedades fácilmente. Y si el juego se detiene, todos los tweens se detendrán automáticamente y se reanudarán según sea necesario.
Complementos
Nuestro objetivo es que el núcleo de Phaser finalmente se establezca y llegue a un equilibrio estable agradable, donde no es probable que lo toque mucho más allá de las correcciones y actualizaciones del navegador. Sin embargo, queremos que Phaser continúe creciendo, proporcionando características para todo tipo de juegos, pero sin que la librería principal explote en crecimiento. Con este fin, hemos creado un sistema de complementos.
Los complementos de Phaser pueden registrarse con el framework principal, ser actualizados en línea con el loop del juego central y realizar todo tipo de útiles tareas adicionales. Un gran ejemplo de esto es el reciente complemento de búsqueda de rutas EasyStar. Estaremos liberando plugins nosotros mismos y esperamos ver más de la comunidad en el futuro.
Primeros pasos
Aquí veremos dónde descargar Phaser, cómo configurarlo para el desarrollo y dónde empezar.
Descargar Phaser
El proyecto Phaser está alojado en GitHub en https://github.com/photonstorm/phaser. Hay dos ramas principales: master es donde se encuentra 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 dev se actualiza para prepararse para la próxima versión. A menos que sepa que necesita la rama dev, siempre debe comenzar con el 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 te sientes cómodo de usarlo todavía, existe la opción de descargar un archivo zip de todo el repositorio también.
La guía de introducción
Una vez descargado, le recomendamos encarecidamente que siga la Guía de inicio oficial. Esto lo guiará a través de la configuración de un servidor web local, escogiendo un entorno de desarrollo e incluso construyendo en la nube si así lo desea.
La guía se divide en las siguientes secciones:
- Introducción
- Instalación de un servidor web
- Ejecucion en la nube
- Eleccion de un editor
- Descarga de Phaser
- Hello World!
- Los ejemplos de Phaser
- Próximos pasos
También hay una guía equivalente para TypeScript.
Haciendo su primer juego
Con su entorno de desarrollo creado, es el momento de construir un juego. Recomendamos comenzar con el tutorial Haciendo su primer juego Phaser. Le guiará a través del proceso de creación de un juego de plataforma simple, le presentará los conceptos básicos de cómo funciona Phaser y lo preparará para ampliarlo y aprender más.
Los ejemplos de Phaser
Al hacer el checkout o al descargar Phaser, terminara en nuestra suite de ejemplos. Este es un sitio web independiente que consta de más de 170 ejemplos de código diferentes, divididos en áreas clave: Física, Colisión, Sprites, Texto y más. Cada ejemplo es un código de trabajo autónomo que puede abrirse, editarse fácilmente y aprender de él. Utilizados conjuntamente con los documentos de la API, estos son una vía rápida para aprender rápidamente sobre partes específicas de Phaser.
Documentacion de la API
La Documentacion de la API están disponibles en el repositorio de Phaser en la carpeta docs. Hemos estado trabajando duro en los documentos desde hace unos meses y, aunque todavía esta faltan detalles, ahora están completos, abarcando todo el marco.
La versión más reciente (1.1.3) Vimos otra gran actualización para ellos, con muchas áreas llenadas con más detalles, y es nuestra misión en curso para mejorar los documentos con cada nueva versión de Phaser.
JSHint
Desde la versión 1.1.3 de Phaser, el marco completo ahora se ejecuta a través de JSHint antes de su lanzamiento. También proporcionamos nuestro archivo de configuración en el repositorio.
JSHint es una forma de asegurarnos de que el código del marco siga 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 estilos de citas. Aquellos que deseen contribuir a Phaser deben revisar sus actualizaciones en contra de nuestra configuración de JSHint.
Próximos pasos
Si ha seguido este artículo, comprenderá por qué Phaser es genial, lo que hemos intentado lograr al hacerlo y cómo puede aprender a crear juegos con él. Pero el aspecto más importante de cualquier marco de juego no es tanto las características deportivas o demostraciones de tecnología, es 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 nuevo marco que casi ciertamente funciona de manera diferente a cualquier cosa que haya utilizado en el pasado. Afortunadamente, Phaser tiene una comunidad próspera.
Foro Devs de Juegos HTML5
Hemos creado el foro HTML5 Game Devs hace poco, no específicamente para Phaser, sino simplemente porque hacer juegos HTML5 era una área tan nueva que queríamos poder hablar con otros acerca de ella. Desde entonces, con foros activos, 250.000 visitas 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 un montón de amigos amigos allí para charlar ideas y preguntas. El foro es también el hogar de otras grandes bibliotecas, incluyendo Pixi.js y el Babylon.js marco 3D, y hay un gran área de Games Showcase para mostrar lo que haces—yendo allí todos los días es una fuente constante de inspiración para mí, y es realmente genial ver qué desarrolladores están logrando que HTML5 lo haga en estos días.
Boletín informativo
El boletín informativo de Phaser se publica una vez al mes y contiene detalles sobre nuevos lanzamientos, artículos breves sobre nuevos temas y complementos y tutoriales de Phaser. 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 hay spam y una forma fácil de cancelar la suscripción si así lo desea.
Contribuir
Usted puede ayudar a dar forma a la forma en que Phaser crece. Si encuentra un error, por favor infórmelo. No le tomará mucho tiempo, y hasta la fecha hemos fijado más del 91% de todos los problemas reportados (y todavía estamos trabajando en el otro 9%). También puede emitir PR en la rama de desarrollo o liberar sus propios complementos o filtros.
¡Muéstrenos sus juegos!
Pasamos muchas horas incansables trabajando en Phaser porque queremos que sea el mejor marco de desarrollo de juegos HTML5 que posiblemente pueda ser. Entendemos que no será perfecto para todos, y estamos bien con eso. Pero si lo usas y haces algo, no importa lo pequeño que creas que es, por favor háznoslo saber. ¡No creerás que un verdadero mensaje motivacional es cuando los desarrolladores nos muestran los juegos en los que han estado trabajando! Llegue a nosotros en el foro, a través de Twitter (@ photonstorm) o por correo electrónico.
Por sobre todo, sin embargo, realmente esperamos que te diviertas haciendo tu juego.
