Share
Phaser est un framework de jeu HTML5 open source créé par Photon Storm. Il est conçu pour créer des jeux qui fonctionneront sur les navigateurs Web de bureau et mobiles. L'accent a été mis sur les performances des navigateurs Web mobiles, un domaine important et en pleine croissance des jeux sur Internet. Si le périphérique en est capable, il utilise WebGL pour le rendu, mais sinon, il revient de manière transparente à Canvas. Dans cet article, je vais couvrir les ressources pour apprendre Phaser, ainsi que montrer ce qu’il peut faire et certaines des idées qui ont présidé à sa conception..
Il est juste de dire que c'est comme si un nouveau framework de jeu HTML5 est publié toutes les semaines, telle est leur prolifération. Alors, pourquoi devriez-vous même considérer Phaser comme un choix énorme? J'aime penser que la raison est liée à l'héritage de l'équipe impliquée dans sa construction.
Chez Photon Storm, nous nous sommes consacrés à ne développer que des jeux HTML5 il y a plusieurs années, à une époque où le choix du framework était très limité et où vous pouviez compter le nombre de développeurs de jeux HTML5 à un chiffre. En entrant dans l'espace si tôt et en venant de Flash, nous avons immédiatement ressenti le besoin de créer des outils auxquels nous étions habitués dans AS3..
Nous avions de grands fans de Flixel et nous avions eu du succès avec nos propres jeux et avec nos outils électriques Flixel. Il y a eu un véritable bourdonnement lorsque d'autres développeurs les ont utilisés pour aider à la sortie de leurs jeux. C'est quelque chose que nous souhaitions dupliquer en HTML5..
Ce à quoi nous n’étions pas préparés, c’était la rapidité avec laquelle le paysage HTML5 changeait. Même aujourd’hui, j’ai une diapositive dans mes présentations que je montre lors de conférences "Préparez-vous à désapprendre ce que vous savez tous les six mois", et je crois que cela reste toujours vrai. Les éditeurs de navigateurs itératifs et s’améliorent à un rythme phénoménal. Il ne faut que quelques semaines pour que de nouvelles fonctionnalités fassent leur apparition au public, et si vous êtes confronté à un framework de jeu qui est maintenu pendant le temps libre de quelqu'un ou est sur un cycle de publication lent, alors il ne faut pas longtemps avant que les choses soient très obsolètes.
Un autre signe de ce changement réside dans les types de travail des clients que nous étions chargés de construire. En tant que société, nous ne faisons que deux choses: créer des jeux HTML5 et Phaser. Nous avons créé des jeux HTML5 pour certaines des plus grandes marques de divertissement au monde, ce qui nous a permis de mieux comprendre le type de besoins qu’elles exigent. Le domaine le plus important sur lequel on nous a demandé de travailler était les jeux exécutés dans le navigateur mobile; tant de structures HTML5 se concentrent sur le bureau, où les performances sont abondantes, les connexions rapides et stables et ignorent le côté de la vie du navigateur mobile. Pourtant, c’est là que la demande des clients est toujours la plus forte. Il était donc essentiel que Phaser puisse être utilisé pour créer les jeux de nos clients, quelle que soit leur plateforme..
Depuis la sortie de Phaser 1.0, les mises à jour ont été régulières et complètes. De nombreuses nouvelles fonctionnalités et corrections ont été mises en place rapidement. Nous travaillons sur un délai d’environ un mois, de dev à master. Vous pouvez voir un changelog complet sur GitHub. Fait intéressant, nous constatons actuellement une demande de jeux fonctionnant dans une WebView. Nous allons donc nous assurer que Phaser fonctionne correctement dans cet environnement à partir de 2014..
En plus de tenir Phaser à jour, il était également primordial pour nous de construire quelque chose de vraiment facile à utiliser. Et vous verrez cela reflété dans tout le cadre. Cela découle de notre expérience avec les outils électriques Flixel, et au-delà, lorsque je travaillais pour The Game Creators en aidant à définir la forme de leurs langues de jeu. Je suppose que depuis toujours, je souhaite rendre le développement de jeux aussi simple que possible pour les développeurs, une tendance que je poursuivrai au fil de l'évolution de Phaser..
Je m'excuse par avance de tout ce qui suit (ou au-dessus!) Sonne un peu "marketing". Phaser est un produit gratuit, vous ne gagnez rien en l'utilisant. Si j'enthousiasme à ce sujet, c'est uniquement parce que je suis passionné par ce que j'ai créé. Restez avec moi!
Phaser est une bibliothèque JavaScript conçue pour fonctionner sur tous les principaux navigateurs de bureau. Cela inclut Internet Explorer 9 et les versions ultérieures, Firefox, Chrome et Safari. Avant IE9, elle ne supportait pas la toile, donc si vous avez absolument besoin d'un framework capable de gérer le rendu DOM, alors Phaser ne conviendra pas. Cependant, la demande pour ces types de jeux devient presque minimale; si quelque chose, il change de direction (vers WebGL).
Sur mobile, Phaser fonctionne sur iOS5 et les versions supérieures de Mobile Safari. Sur Android, il fonctionne à partir de la version 2.2 dans le navigateur de stock et dans Chrome. Chrome est désormais le navigateur Android standard, avec des versions récentes prenant même en charge WebGL, mais vous ne pouvez toujours pas ignorer les millions d'appareils Android hérités qui restent utilisés..
Grâce à Mozilla, nous avons reçu un grand nombre de périphériques de test FFOS et avons commencé à nous assurer que Phaser fonctionne correctement sur ceux-ci. Jusqu'à présent, les choses se présentent bien et nous produirons des guides de déploiement dans la nouvelle année..
Nous avons également constaté que les jeux Phaser fonctionnaient bien sur les appareils Tizen et parfaitement sous l'encapsuleur Kindle HTML5, ce qui signifie que vous pouvez effectuer un déploiement «prêt à l'emploi» sur ces appareils. Alors que de plus en plus de téléphones utilisant le Web commencent à entrer sur le marché, nous veillerons à ce que Phaser reste à jour pour eux..
Il existe un choix si vaste d’excellents packages de développement de jeux qui ciblent la création d’applications natives (Unity, Corona, Loom, etc.), et c’est un domaine dans lequel nous souhaitions consacrer beaucoup d’efforts au début, en particulier par rapport aux systèmes mal desservis marché des navigateurs mobiles.
Cependant, avec le développement de wrappers tels que CocoonJS et Ejecta, nous voyons des développeurs utiliser Phaser pour emballer leurs jeux et les publier sous forme d'applications natives. Ainsi, à partir de 2014, nous commencerons par ajouter une prise en charge de CocoonJS directement dans le noyau, ainsi qu'une prise en charge des wrappers de bureau tels que node-webkit..
Nous allons souligner quelques-unes des principales caractéristiques de Phaser du point de vue d'un développeur:
Cela peut sembler une "fonctionnalité" étrange, mais cela devrait en fait être assez convaincant. Phaser n'utilise pas de pratiques de style OO fausses en interne. Il n'y a pas de chaîne d'héritage massive ni de système de composants, et vous n'avez pas non plus à forcer vos objets dans une structure de classe fixe. C'est une chaîne de prototypes simple et directe, à la manière dont JavaScript devait être utilisé.
Cela ne signifie pas que vous ne pouvez pas construire votre jeu de manière structurée; loin de là. Tout ce que cela signifie, c'est que nous ne le faisons pas imposer il. Cela signifie également que Phaser est en interne très facile à pirater avec.
Mais j'aime bien TypeScript!
Bien car nous avons aussi un fichier de définitions TypeScript! Il existe un guide spécifique sur l'utilisation de Phaser avec TypeScript.
Phaser dispose d'un chargeur intégré capable de gérer:
Nous exportons régulièrement des fichiers d’atlas de texture de Flash directement vers nos jeux Phaser, qui prennent en charge des atlas entièrement découpés. Les actifs peuvent être partiellement chargés, mis en cache et extraits de différentes URL (pour la prise en charge de CDN), et vous pouvez même transformer n'importe quel sprite en une barre de progression avec une seule ligne de code..
En interne, Phaser utilise Pixi.js pour le rendu. Pixi est une excellente bibliothèque de rendu rapide axée sur Canvas et WebGL. C'est une bibliothèque à laquelle nous continuons à contribuer pour faire avancer les choses.
Pour vos jeux, cela signifie que si le navigateur prend en charge WebGL, le lecteur obtiendra le plus souvent une expérience plus fluide. WebGL est courant sur les ordinateurs de bureau mais continue d’émerger sur les mobiles; même dans ce cas, c’est l’avenir des jeux HTML5, il est donc essentiel de le soutenir. La dernière version de Phaser introduit la prise en charge des filtres et du shader WebGL, et les versions à venir implémenteront des cartes normales afin que vous puissiez bénéficier de nouveaux outils tels que Sprite Lamp..
L’audio est depuis longtemps l’un des points faibles des jeux HTML. Il y a quelques années à peine, nous avions le choix entre un seul canal d'audio à latence élevée qui paralyserait le périphérique pendant la lecture ou n'aurait aucun son. Mais les temps ont changé et l'API Web Audio est venue à notre salut. Il permet une prise en charge audio appropriée basée sur les nœuds, avec plusieurs canaux, le routage des nœuds et toutes sortes d’effets. Donc, Phaser prend entièrement en charge Web Audio.
Cependant, sur Android en particulier, de nombreux périphériques ne prennent toujours pas en charge cette technologie. Nous prenons également en charge les systèmes audio hérités et l'utilisation de Sprites audio: méthode consistant à regrouper un grand nombre d'échantillons dans un seul fichier et à utiliser des marqueurs de lecture pour accéder à différents types de fichiers. effets. Phaser permutera entre les deux en fonction des capacités de l'appareil et inclura également le déverrouillage automatique du sous-système audio, ce qui capturera de nombreux développeurs pour la première fois.!
Lors de la prise en charge des ordinateurs de bureau et mobiles, le nombre d'options d'entrée potentielles est de plus en plus varié. Phaser prend en charge le clavier, la souris, les éléments tactiles, MSPointer (désormais Pointeur sous IE11) et leurs combinaisons. Par exemple, sur les appareils Windows Surface, vous pouvez permuter entre utiliser une souris et toucher, ou bien utiliser les deux ensemble..
Pour la saisie tactile, Phaser s'adapte aux environnements monotouches et multitouches. Vous pouvez définir jusqu'à 10 points de contact et les suivre tous indépendamment, en utilisant leurs événements pour gérer les interactions Sprite telles que le glissement, la frappe et la collision..
Les systèmes ArcadePhysics et ArcadeParticles sont intégrés à la bibliothèque principale. Ce sont de simples bibliothèques légères AABB qui vous permettent d’appliquer la gravité et le mouvement à n’importe quel Sprite, puis de tester la collision et la séparation. En utilisant un arbre à quatre branches mondial pour minimiser les tests de collision, vous pouvez obtenir des résultats décents rapidement avec peu de temps de traitement..
Cependant, nous comprenons que cela ne conviendra pas à tous les types de jeux. Le système de physique est donc facile à remplacer et aucune des propriétés de la physique n'est liée à des sprites réels (mais plutôt à un composant du corps), elle peut donc être remplacée par la goûts de Box2D ou p2.js. Un système d'interpolation est également intégré, vous permettant d'interpoler facilement des objets ou des propriétés. Et si le jeu est en pause, alors tous vos tweens se mettront en pause et reprendront au besoin.
Notre objectif est que le noyau de Phaser finisse par s’installer et atteigne un bon équilibre stable, où nous ne pourrons probablement pas le toucher au-delà des correctifs et des mises à jour du navigateur. Cependant, nous souhaitons que Phaser poursuive sa croissance, fournissant des fonctionnalités pour tous les types de jeux mais sans que la bibliothèque principale n'explose en croissance. À cette fin, nous avons construit un système de plugin.
Les plugins Phaser peuvent s’enregistrer eux-mêmes avec le cadre principal, être mis à jour conformément à la boucle de jeu principale et effectuer toutes sortes de tâches supplémentaires utiles. Le plug-in de recherche de chemin EasyStar, récemment publié, en est un excellent exemple. Nous publierons nous-mêmes des plugins et espérons en voir plus de la communauté à l'avenir.
Nous verrons ici où télécharger Phaser, comment se préparer au développement et par où commencer..
Le projet Phaser est hébergé sur GitHub à l'adresse https://github.com/photonstorm/phaser. Il existe deux branches principales: master est l'endroit où se trouve la dernière version stable, et dev est celui où la version en cours de développement est construite. Dès qu'une nouvelle version est terminée, nous passons de dev à master, puis dev est mis à jour pour préparer la prochaine version. Sauf si vous savez que vous avez besoin de la branche dev, vous devez toujours commencer par master.
Idéalement, vous devez utiliser git et checkout ou créer un dépôt pour le référentiel afin de pouvoir le mettre à jour facilement. Mais si vous êtes nouveau sur Git ou que vous ne l'utilisez pas encore, vous pouvez également télécharger un fichier zip de tout le référentiel..
Articles Similaires
Une fois téléchargé, nous vous suggérons fortement de suivre le Guide de démarrage officiel. Cela vous guidera à travers la configuration d'un serveur Web local, la sélection d'un environnement de développement et même la construction dans le cloud si vous le souhaitez..
Le guide se compose des sections suivantes:
Il existe également un guide équivalent pour TypeScript.
Avec votre environnement de développement configuré, il est temps de créer un jeu. Nous vous recommandons de commencer par le didacticiel Comment créer votre premier jeu Phaser. Il vous guidera tout au long du processus de création d'un jeu de plate-forme simple, vous présentera les concepts de base du fonctionnement de Phaser et vous préparera à développer et à en apprendre davantage.
Lorsque vous passez à la caisse ou que vous téléchargez Phaser, elle est fournie avec notre suite d’exemples. Il s'agit d'un site Web autonome composé de plus de 170 exemples de codes différents, répartis en domaines clés: Physique, Collision, Sprites, Texte, etc. Chaque exemple est un morceau de code entièrement fonctionnel que vous pouvez ouvrir, éditer facilement et apprendre. Utilisés conjointement avec les documents de l'API, ils constituent un moyen rapide de se familiariser rapidement avec des parties spécifiques de Phaser..
Les documents API sont disponibles dans le référentiel Phaser dans le répertoire docs dossier. Nous travaillons dur sur la documentation depuis quelques mois maintenant et, bien que restant un peu rude, ils sont maintenant complets et couvrent l'ensemble du cadre..
La version la plus récente (1.1.3) a fait l’objet d’une autre mise à jour importante, avec de nombreux domaines remplis avec plus de détails. Notre mission consiste à améliorer les docs à chaque nouvelle version de Phaser..
Depuis la version 1.1.3 de Phaser, la structure complète est maintenant exécutée dans JSHint avant la publication. Nous fournissons également notre fichier de configuration dans le référentiel.
JSHint nous permet de nous assurer que le code de framework suit un ensemble fixe de règles de structure de code, allant de la manière dont nous traitons les tabulations et l'indentation aux noms de variables et aux styles de citation. Ceux qui souhaitent contribuer à Phaser doivent vérifier leurs mises à jour par rapport à notre configuration JSHint.
Si vous avez suivi cet article, vous comprendrez pourquoi Phaser est si bon, ce que nous avons cherché à réaliser en le fabriquant et comment vous pouvez apprendre à en faire des jeux. Mais l’aspect le plus important de tout framework de jeu n’est pas tant les fonctionnalités qu’il présente ou les démonstrations techniques, c’est la communauté qui se cache derrière..
Faire un jeu est un travail difficile, point final. Et c'est encore plus difficile à faire de manière isolée, avec un tout nouveau cadre qui fonctionne presque certainement différemment de tout ce que vous avez utilisé dans le passé. Heureusement, Phaser s'appuie sur une communauté florissante.
Nous avons récemment mis en place le forum HTML5 Game Devs, pas spécifiquement pour Phaser, mais tout simplement parce que la création de jeux HTML5 était un domaine tellement nouveau que nous voulions pouvoir en parler à d’autres. Depuis lors, il a connu une croissance fulgurante avec des conseils actifs, 250 000 vues par mois et une base d'utilisateurs conviviale et professionnelle..
Il était logique que nous l'utilisions comme résidence officielle de Phaser, et vous y trouverez de nombreux collègues développeurs sympathiques pour échanger des idées et des questions. Le forum héberge également d’autres bibliothèques de qualité, notamment Pixi.js et le framework 3D Babylon.js. Il existe également un superbe espace de jeux où vous pourrez montrer ce que vous faites chaque jour est une source constante d’inspiration pour moi. c'est vraiment génial de voir quels développeurs parviennent à obtenir HTML5 à faire ces jours-ci.
Le bulletin d'information Phaser est publié une fois par mois et contient des informations détaillées sur les nouvelles versions, de courts articles sur les nouveaux sujets, plugins et tutoriels Phaser. L'abonnement est, bien sûr, gratuit et géré par Campaign Monitor. Vous pouvez donc être assuré qu'il n'y a pas de spam et un moyen facile de vous désabonner si vous souhaitez.
Vous pouvez contribuer à façonner la croissance de Phaser. Si vous trouvez un bug, merci de le signaler. Cela ne vous prendra pas longtemps et à ce jour, nous avons résolu 91% de tous les problèmes signalés (et nous travaillons toujours sur les 9% restants). Vous pouvez également envoyer des demandes d'extraction à la branche de développement ou publier vos propres plugins ou filtres..
Nous passons de nombreuses heures sans relâche à travailler sur Phaser, car nous voulons que ce soit le meilleur framework de développement de jeux HTML5 possible. Nous comprenons que ce ne sera pas parfait pour tout le monde, et nous sommes cool avec ça. Mais si vous l'utilisez et fabriquez quelque chose, aussi minime soit-il, merci de nous le faire savoir. Vous ne croirez pas avec un réel élan de motivation lorsque les développeurs nous montrent les jeux sur lesquels ils travaillent! Contactez-nous soit sur le forum, via Twitter (@photonstorm) ou par courrier électronique..
Mais surtout, nous espérons vraiment que vous vous amuserez à faire votre jeu..
Accentsconagua