Le guide complet de construction Jeux HTML5 avec Canvas et SVG - SitePoint
Mais pourquoi tant de personnes qui sont actuellement intéressés par HTML5 Gaming?
Eh bien, tout simplement parce que, aujourd'hui, nous pouvons vraiment utiliser HTML5 pour cibler multi-plateformes en utilisant le même code: pour les machines de bureau bien sûr (avec IE9 / IE10, Firefox, Chrome, Opera et Safari), pour les tablettes iOS et Android et téléphones et Windows 8 (et son avenir associé des millions de tablettes et PC, est également voir chaleureusement accueillants Jeux HTML5! Je puis souvent des projets de jeux HTML5 portés à chacune de ces plates-formes avec presque aucun effort.
Note: nous ne parlerons que de la
Canvas et SVG: deux façons de dessiner sur l'écran
La première chose que vous devez comprendre avant de construire votre premier jeu HTML5 est comment dessiner des objets agréables à l'écran. Il y a deux façons de le faire et de mieux comprendre leurs différences, vous devriez commencer par lire cet article de Patrick Dengler (membre du groupe de travail SVG du W3C): Réflexions sur quand utiliser Canvas et SVG.
Vous devriez également regarder ces deux grandes sessions de MIX11:
Une fois que vous avez passé en revue tout ce contenu, vous probablement mieux comprendre pourquoi presque tous les jeux HTML5 utilisent Canvas plutôt que SVG. Canvas offre un modèle de développement bien connu pour les développeurs de jeux (API de dessin bas niveau) et est maintenant très bien l'accélération matérielle par la plupart des navigateurs récents. Toujours SVG et sa technologie à base de vecteurs, est naturellement mieux armés à l'échelle sur tous les appareils sans perte de qualité. Vous avez juste besoin d'utiliser la propriété magique ViewBox de SVG, qui se chargera pour vous. Vos jeux actifs seront alors échelle de 3 écrans 'à 80' d'une manière très facile!
Parfois, il est même possible d'obtenir le même jeu exactement en utilisant les deux technologies. Par exemple, voici le même jeu simple en utilisant d'abord SVG puis Canvas: SVG et Canvas Racketball racquetball. Ils ont tous deux sont sortis de cette documentation MSDN: Programmation Jeux simples à l'aide de toile ou SVG.
Mais rien ne vous empêche de se mélanger les deux technologies. En effet, on pourrait parfaitement imaginer utiliser une première couche à base de SVG pour afficher les menus de jeu avec une deuxième couche en arrière-plan en utilisant une toile pour le jeu lui-même. Vous utiliserez alors ce que nous appelons le moteur de compositing du navigateur. Cependant, vous devez faire attention réelle aux résultats finaux de performance car les navigateurs et les périphériques sont loin d'être égaux dans ce domaine. Ne pas oublier que l'intérêt principal de HTML5 est de cibler toutes les plateformes.
bibliothèques et d'outils utiles
L'écriture des noeuds XML de SVG manuellement ou même jouer avec les API de bas niveau de toile pourrait être amusant un moment, mais pas très productif. Voici donc un ensemble utile d'outils et de bibliothèques j'aime qui pourraient vous aider à construire les parties de votre jeu HTML5.
Pour générer des SVG. voici quelques outils cool:
- Inkscape. un logiciel de bureau libre et open source
- Editor SVG. un logiciel en ligne en cours d'exécution directement dans votre navigateur
Adobe Illustrator prend en charge également SVG comme cible d'exportation, mais il est un peu plus cher. ;-)
Si vous êtes à la recherche de vos actifs de jeu (pour les menus ou les contrôles), vous devriez jeter un oeil à cette bibliothèque d'icônes gratuit. Le nom du projet. Donc, si vous n'êtes pas assez chanceux pour travailler avec un designer, il pourrait vous sauver. Il y a une autre bibliothèque un contenu SVG gratuit également ici: Open Clip Art Library.
moteur physique
Bien sûr, l'affichage graphique est loin d'être la seule tâche que vous devez faire dans un jeu. Il y a aussi l'IA (intelligence artificielle), vous devez coder pour donner vie à vos personnages. Malheureusement, vous devez coder que seul et faire preuve de créativité. Mais vous serez heureux de savoir que vous n'avez pas à vous soucier de la physique et des collisions partie de votre jeu. simplement apprendre à comment utiliser Box2D JS. Va jouer avec les différents échantillons et vous serez étonné:
Manipulation des événements multi-touch
Si vous souhaitez construire un jeu multi-appareils, vous devrez appuyer toucher. À l'heure actuelle, il existe deux spécifications existantes autour d'événements tactiles. Donc, il n'y a pas de norme officielle pour l'instant. Si vous souhaitez en savoir un peu plus sur pourquoi, voici un article intéressant: Obtenir chatouilleux sur les brevets
Vous aurez besoin d'écrire du code qui fonctionne bien dans IE10 et Windows 8 ainsi que la mise en œuvre provenant des appareils Apple. Pour cela, vous devez certainement jeter un oeil à cet exemple démontrant un modèle possible pour soutenir les deux types d'événements tactiles: Peinture au doigt et son article associé: Gestion multi-touch et la souris d'entrée dans tous les navigateurs. Mais si vous êtes intéressant à vérifier dans quelle mesure vous pouvez maintenant en manipulant multi-touch à l'intérieur IE10, testez cette démo cool: Surface du navigateur. Vous aurez besoin d'une version plus récente IE10 et matériel multitouch exécuter.
Boris Smus a commencé à travailler pour sa part sur une bibliothèque nommée Pointer.js. L'idée est de consolider pour vous simplifier la vie des développeurs tous les types de contact (IE10, iOS comme, souris et stylo). Vous pouvez lire son article à ce sujet ici: entrée Généralisée sur le web multi-appareils. À l'heure actuelle, la bibliothèque est juste un projet et ne supporte pas encore le MSPointer * de IE10. Alors, ne hésitez pas à contribuer au projet pour l'aider! (Je l'ai prévu d'essayer de l'aider quand j'ai un peu de temps libre)
jeux de construction connectés
Si vous souhaitez construire des jeux multi-joueurs ou tout simplement un jeu connecté à un serveur pour une raison quelconque, vous naturellement intéressé à utiliser WebSockets. Cette spécification du W3C (et le protocole sous-jacent géré par l'IETF) est en effet assez stable pour commencer à utiliser dans la production.
Mais si vous souhaitez soutenir le plus grand nombre possible d'utilisateurs, vous devez envisager une solution de repli pour les navigateurs ou les appareils qui ne sont pas encore soutiennent WebSockets ou soutenir une ancienne version dépréciée. Nous pourrions rêver de solutions comme tomber automatiquement à une ancienne méthode de mise en commun ou à long mise en commun pour les navigateurs comme IE9, et offrant Sockets Web aux navigateurs plus récents comme IE10. Et oui, pourrait-il être possible aussi d'avoir un code unique manipulation qui?
Eh bien, arrêtez de rêver: la communauté fait. Il y a deux solutions que je connais de le faire:
- la bibliothèque Socket.IO pour Node.js
- SignalR travaillant au-dessus de IIS et ASP.NET
Les deux bibliothèques vous aideront à gérer tous les navigateurs et appareils avec leur variété de niveaux de soutien.
Certains cadres de jeu
Pour construire un jeu HTML5 2D, il y a plusieurs choses dont vous avez besoin de se soucier de:
1 - Manipulation sprites. les séparer en une séquence, les animant, effets, etc.
2 - Manipulation de vos sons et de la musique (et ce n'est pas toujours facile en HTML5!)
3 - Chargement de manière asynchrone vos actifs à partir du serveur Web via un chargeur dédié / gestionnaire d'actifs
4 - Construire un moteur de collision. une logique de haut niveau pour vos objets de jeu, etc.
Eh bien, vous pouvez le faire à partir de zéro ou vous pouvez tester et examiner ce que d'autres développeurs brillants ont déjà fait sur le web. Je vous conseille vraiment de prendre la deuxième option que les cadres de jeu JS commencent à vraiment mature et être testés dans les jeux en production.
Comme il y a une tonne de cadres de jeu JS sur le web (bien, il y a une tonne de quoi que ce soit en fait .js), voici les cadres les plus connus pour construire des jeux HTML5 2D travaillant dans tous les navigateurs:
- MelonJS. un cadre libre qui expose un grand nombre de services utiles. Son grand avantage est que cela fonctionne très bien avec l'outil Map Editor carrelé.
- CraftyJS que malheureusement je ne sais pas très bien
- ImpactJS. un cadre bien connu de haute qualité. Ce n'est pas gratuit, mais pas trop cher.
- EaselJS. mon préféré! Écrit par un ancien développeur Flash. Donc, si vous avez écrit des jeux en Flash, vous devriez vous sentir à l'aise avec ce cadre. Cela fait partie de la suite CreateJS. Il est très complet, bien documenté et ... gratuit.
Donc, vous devriez maintenant être averti. Comme EaselJS est le cadre que je connais le plus, je ne serai pas impartial. Il est à vous pour tester les autres et former votre propre opinion.
Les tutoriels de certains débutants
Quelques mois plus tard, j'ai ajouté trois autres articles amélioration / extension du même jeu:
- Tutoriel: comment créer des applications HTML5 sur Windows Phone grâce à PhoneGap où je vais vous montrer comment au port le même jeu sur Windows Phone grâce à PhoneGap / Cordova. Mais vous serez en mesure de suivre les mêmes instructions pour votre appareil Android ou iOS.
- Modernisez vos jeux HTML5 canvas partie 1: mise à l'échelle du matériel et CSS3 où nous allons utiliser CSS3 3D Transform, transitions et mise en page Grille pour améliorer l'expérience de jeu
- Modernisez vos jeux HTML5 Canvas Partie 2: API hors ligne, et l'API Drag'n'Drop du fichier où nous permettra de jouer au jeu en mode hors ligne. Vous serez même en mesure de créer vos propres niveaux et les directement dans le simple glisser-déposer jeu.
Après les suivre, vous allez construire ce jeu:
Eh bien, logiquement, grâce à ces six tutoriels, vous devriez être en mesure d'écrire votre propre jeu HTML5 quel que soit le navigateur ou le périphérique que vous ciblez.
Pour conclure, je voudrais vous recommander deux autres articles « avancés », mais très instructif de lire. Le premier est écrit par David Catuhe de Microsoft: Déchaînez la puissance de HTML 5 Canvas pour les jeux. Il partagera avec vous une certaine optimisation, il a trouvé tout en travaillant sur une « démo » comme celle que nous écrivions dans la « démo scène ». Les conseils trouvés pourraient vous apporter quelques idées pour vos propres jeux HTML5. Le second est écrit à nouveau par Boris Smus de Google: L'amélioration de la performance HTML5 Canvas et il contient une tonne de bons conseils.
Certains jeux de travail en ligne intéressants et retours d'expérience
Encore une fois, ceci est mon préféré. Vous trouverez probablement d'autres exemples cool sur le web à partager. Quel que soit le jeu que vous aimez, il est intéressant d'analyser la façon dont les développeurs les faits. Merci à la magie du web, il vous suffit de clic droit et « voir la source ». Même si le code sera probablement minifiés, vous pouvez encore apprendre quelques choses intéressantes en regardant l'architecture globale du jeu.
Commençons par quelques productions en utilisant le cadre EaselJS. Le premier a été Pirates amour Marguerites écrit par Grant Skinner:
Grant a commencé son EaselJS cadre tout en construisant ce jeu HTML5.
Windows 8 Note: vous remarquerez que vous trouverez le même jeu travailler à l'intérieur de Windows 8 dans le Windows Store ici: Pirates amour Marguerites pour Windows 8. En effet, si vous avez un jeu HTML5 fonctionne très bien à l'intérieur IE9 ou IE10, la construction de la windows 8 version est presque en train de faire un simple copier-coller! Le jeu va alors travailler directement dans l'expérience Windows 8 App. Mais pour un vrai bon jeu de Windows 8, vous devrez également prêter attention à l'expérience Windows 8 unique que nous construisons. Ceci est décrit ici: Conception de grands jeux pour Windows
Un autre jeu en utilisant EaselJS est BKOM GAME ROBOT qui utilise sprites 3D I love:
Les deux plus célèbres jeux HTML5 actuellement sont bien sûr Angry Birds (qui utilise la bibliothèque Box2D je mentionnais ci-dessus):
Vous trouverez également une version Windows 8 de celui-ci dans le Windows Store ici: Cut the Rope pour Windows 8
Il était très simple au port dans Windows 8. Voici le processus:
1 - Copier / Coller la version Web dans un projet de style HTML5 App pour Windows 8
2 - Ajout du support pour le toucher
3 - Ajout du support pour la vue et Snapped mettre en pause le jeu
4 - Construire des actifs à haute résolution (1366 × 768 et 1920 × 1080) de proposer la meilleure expérience pour tous les comprimés de Windows 8 et PC entrants.
J'aime aussi l'histoire autour de « couper la corde ». Il est très intéressant de lire. Ce fut un jeu à succès écrit en Objective-C pour les appareils Apple iOS. Il a été porté en HTML5 / toile et les développeurs qui ont fait ce détail leurs commentaires dans cet article: couper la corde - Dans les coulisses. Jetez un coup d'oeil, vous apprendrez probablement quelques points intéressants.
J'ai aussi eu le plaisir de lire ce retour d'expérience: HTML5 Wooga aventure.
Enfin, voici une liste de 40 plus ou moins bons jeux HTML5. 40 Addictive Jeux Web Propulsé par HTML5 avec quelques autres disponibles aussi ici: HTML5games.com
J'espère maintenant que toutes ces ressources vous aideront à construire votre propre jeu HTML5. Si vous le faire et / ou si vous avez des suggestions pour fournir de bons cadres sur / tutoriels / concepts que vous souhaitez partager, s'il vous plaît partager vos idées avec moi!