Développer des a jeux en HTMLS § JavaScript Multijoueur temps-réel avec Node.js et intégration dans Facebook EYROLLES geeEyr 2013 ht © Developer des jeux en HTMLS s JavaScript ‘Alors que les navigateurs sont en constante évoltion pour optimiser exécution de jeux, HTMILS propose de nowelles balises et API JavaScript pour gérer la vidéo et audio, dessiner en 2D et 3D. De q alimenter explosion du marché des jeux web, natifs et sociaux, notamment sur les smartphones et tablettes. De Ia conception du gameplay a la configuration du serveur Node.js et MongoDB Cet owrage,exemples de code & lappui, décortique les étapes de création dun jeu vidéo en HTMLS et JavaScript, de la réalisation dun concept et de Tétude de la concurrence, & la commercialise et & Tenimation dune com rmunauté, Taus les aspects du développement sent eoordé : conception du scénaro et du gernepay, création des niveau (evel design) et des profs de jqueurs, gestion de spritesheets, mise au point dune ambience, efichage de décars, efets graphiques, animations, colisions et effets sonores (HTMLS Aucia), LLausrage guide également le lecteur dans le choix dun framework, et la configuration din serveur pour du temps réel veo MangoDB et Nodes. Il expique enfin comment irtégrer le eu dans le réseau social Fecebook Au sommaire Mettre au pont le concept du jeu © Aten # Jou do rile © verwae © Reson © Choish un frame © Installer CanasEagine + Créer [dora titre» La sobre + La barre de progression + Les boutons « Aficher las décors + Wiliser ‘Wed Map fdtor + Les sprites + fnimor les éléments cur Técran « Animation en boule * Réaction & une action « Conceveir fe Gameplay + Plet2“orme mobile » Conte du jaueur avec un claver, une manette + Acceléromtre * Accé- leraton et decsération« Grouta « Saut * Mewoirejoueur avec des défilements + Céplocements « Roteicissement inter jets + Mise en place des rigls du jeu + Afichaye du soe + Arionce + HTML Au SoundManager pour ac eave sonore « at ournit» Les aversares + Mfichage des dommages * Champ de vision ‘ Réalser la sauegarde » Créer un jeu plate-orme * ineilisazin et création des classes * Chargement cu niveau # Création ds animations + Dstlemert do I caro * Gestion des ealisions » Moworent * Configurer le serveur avee Node pur le multjoueur ex temps rel» Ulisse ls serveur va SSH #Teléchenge Node je staler NPM © MangoDE ‘et Mengoose Intégration du jeu au réseau socal Facebook + Azheniication et axtorisation + Implémentaton de lz rie Socal Gaming «Inver des amis 8 jouer * AMicher un seare etl partager sur le mur de Futilisateur « Sjcteme de badges » Récupérer des infrmetions pour les uiliser dans le eu * Stratégie de mentisation * Wonnsi virwole ‘+ Amaxas » Rapp sur MTMLS Canvas + Dassiner« Lignes + Arcs + Cherins + Formas + Aches un teate * Des ‘couleurs + Des ombres » Frameworks JavaScript» Easels * BPG JS » Créer des jeux de réle * 30 avec Tree.js © Crér une seéna + Ajouter un abjat « Dec souroes de lurire + Rondu » Bougr la eaméra ave la cours, A qui s'adresse cet ouvrage? ~ fu développeurs web, amateurs ou professionels, mes iitiés au langage JavaScript, qui souhaiten se lancer dans ls oréstion de jeux en HTMLS ~ Aux egences web et de communication sousitant se rensegner sur le potertel des jeux commrunautsres. Ronce Spécialisé dans la création applications web et de Jeux video en JavaScript et HTMLS, il est le fondateur de WebCreativeS, societé qui développe des matours de jeux vidéo Open Source en pur HTMLS, compatibles avec les dernidres. technologies. ode tau» 619531 ween a7eaproTaseT2 Pee ennDévelopper des jeux en HTMLS § JavaScript2013 & >pyright Dans La wae conurcrion’ R. Riweté,— HTML 5, Une référence pour le développeur web, 1N°13638, a paraitre en 2013, 644 pages (collection Blanche). 4, Stank. ~ Applications iPhone avee HTML, CSS et JavaScript. Conversions en natifs avee PhoneGap. 1N°12745, 2010, 190 pages (collection Blanche). R. Gorrrex. - CSS avaneées. Vers HTML 5 et CSS 3. 1N°13408, 2 édition, 2012, 400 pages (collection Blanche). E, Santos. - jQuery Mobile. La hiblothdque JavaScript pour le Web mobile IN°13388, 2012, 610 pages J-M, Deveance, ~Ajax, JQuery et PHP, 42 ateliers pour concevoir des applications web 2.0. 1N°13271, 3 €dition, 2011, 482 pages (collection Blanche). C. Porrentuve, — pratiques Ajax 1N°12391., 2 édition, 2008, 674 pages (collection Blanche). jen développer pour le Web 2.0. Bonnes (Chex Le we enereR F. Daoost, D. Haxzabi-Masstiuix.— Relever le défi du Web mobile. Bonnes pratiques de conception et de développement. N*12828, 2011, 300 pages (collection Blanche). E, Dasper, C, Prere be Geyer, - PHP avaneé, N°13435, 6 édition, 2012, 900 pages environ (collection Blanche. J. Pavut,G. Pusssis, C. Pienee: be Greve. — Audit et optimisation LAMP. N°12800, 2012, 300 pages environ (collection Blanche). P. Borcits0, ©. Dasint, A. GADAL MySQL. N°12634, 2010, 282 pages (collection Blanche). 8. Inner. - Programmation GWT 25. Développer des “applications HTMLSiJavaScript en Java avec Google Web Toolkit N°13478, 2 édition, 2012, 540 pages (collection Blanche). Audit et optimisation J. Ents. - HTMLS et C883. Cours et exercices corrigés. 1N°13400, 2012, 550 pages. E, Sannion, - jQuery 1.7 & jQuery UL 1N°13504, 2 édition, 2012, 600 pages. E. Saewion. ~ Mémento jQuery. 1N°13488, 2012, 14 pages. K, Drzovweat-Paicent, ~ CSS maintenables avee Sass & Compass. Outils et bonnes pratiques pour l'intégrateur web. N°13417, 2012, 272 pages (collection Design web) CC. Scat incer, ~ Intégration web : les bonnes pratiques. Le ‘guide du bon intégrateur 1N°13370, 2012, 400 pages (collection Design web), 1. Caniver et -M, Harpy. ~ La stratégie de contenu en pratique. 30 outils passés au crible. 1N°13510, 2012, 176 pages (collection Des gn web). S. Dauwat.— Design d’expérience utilisateur. Principes et méthodes UX. 1N°13456, 2012, 208 pages (collection Design web), E, Sarnion. ~ Prototype et sites web avee JavaScript. 1N°85408, 2010, 342 pages (e-book). G. Swoyvew. ~ Apprendre & programmer avec Python 3, 1N°13434, 3 6dition, 2012, 435 pages. rriptaculous. Dynamiser ses J. Exorts. ~ PHP, Cours et exercices. 1N°12486, 2009, 638 pages. P.Aupas et H. Bersint, ~ Apprendre la programmation web vee Python et Django. Principes et bonnes pratiques pour les sites web dynamiques. 13499, 2012, 344 pages (collection Noire) H, Bexsist, - La programmation orientée objet. 1N°12806, 5° édition, 2011, 644 pages. C. Sovtou. ~ Programmer avee MySQL. 1N°12869, 2" édition, 2011, 450 pages. ‘T. Banuier. - Créer son propre theme WordPress pour N°13441, 2012, 128 pages (collection Accés libre). E. Stoin, ~ Mémento Sites web. Les bonnes pratiques N°12802, 3 édition, 2010, 18 pages. A. Boucuer. — Ergonomie web illustrée. 60 sites d la loupe. 1N°12695, 2010, 302 pages. (Design & Interface). 1. Caxiver. ~ Bien rédiger pour le Web. Stratégie de contenu pour améliorer son référencement naturel. 1N°12883, 2 édition, 2011, 552 pages. N. Cu. Réussir un projet de site web, N°12742, 6 édition, 2010, 256 pages. 1, Coceiqwonr, ~ Réussir son premier site Joomla! 2.5. N°13425, 2012, 160 pages. S. Borpace,, D. TutveNow, L. Dursguiee, F. Baousst. — Conduite de projet Web. N°13308, 6 édition, 2011, 480 pages.Développer des Oo jeux en HTMLS §& JavaScript Multijoueur temps-réel avec Node.js et intégration dans Facebook Samuel Ronce EYROLLES geEDITIONS EYROLLES 61, bd Saint-Germain 75240 Paris Cedex 05 wwweditions-eyrolles.com Remerciements 4 Romain Pouclet pour sa relecture ainsi qu’a Anne Bougnoux En application de la loi du 11 mars 1957, il est interdit de reproduire intégralement ou partiellement le présent ouvrage, © sur quelque support que ce soit, sans l'autorisation de I’Editeur ou du Centre Frangais d’exploitation du droit de copie, 520, rue des Grands Augustins, 75006 Paris, © Groupe Eyrolles, 2013, ISBN : 978-2-212-13531-2Avant-propos oncevoir un jeu en HTML5/JavaScript Depuis des années, le langage Javascript était utilisé avec parcimonie pour quelques interactions avec 'utilisateur. Toutefois, les nouvelles versions de navigateurs web ont accéléré l'interprétation du Javascript, autorisant la création d’applications plus sophisti- {quées, et particuligrement de jeux. Et surtout, HTMLS a fait son apparition; il propose de nouvelles balises et API pour JavaScript, afin de manier notamment la vidéo et 'au- dio, ainsi que la possibilité de dessiner en 2D ou 3D. Couparisiurré Les balises de dessin Les balises de dessin () existalent déja dans Safari en 2004, Cependant, elles étaient trés peu exolcitées; car, d'une part, les autres navigateurs ne les utiisaient pas et, d'aulre part, les navigateurs ‘étaient pas assez puissants pour réaliser des jeux. La technologie Flash était encore bien présente. HTMLS permet de dynamiser des pages web comme Flash le faisait antérieurement. ‘Alors pourquoi ne pas rester sur des développements Flash, accessibles pour 99 % des utilisateurs, quand environ 40 % de ces derniers comprennent HTMLS ? La question se pose moins en termes d'accessibilité qu'en termes d'évolution : développer maintenant en HTMLS, cest anticiper sur la mise en place de produits sur de nouveaux marchés. Il suffit de constater lexplosion du marché des Smartphones ~ 1 milliard dans le monde prévu en 2013 ~ et des tablettes tactiles. Lintérét de HTMLS réside dans sa disponi- bilité pour de nombreuses plates-formes. Votre jeu fonctionnera aussi bien sur iOS ou Android que sur les télévisions connectéesJeux multijoueurs et sociaux en HTMLS et JavaScript Concunnence Que devient Flash? ‘Adobe a abandonné Flash Player pour les mobiles et déclaré sur son blog : « HTMLS est désormais pris en charge par les principaux appareils mobiles, dans certains cas exclusivement. Cola en fait la ‘meilleure solution pour créer et difuser des contenus dans le navigateur sur diférentes plates-formes ‘mobiles ». ‘Adobe a tout de méme tenté dimplanter sa technologie AIR qui permet de « cross-compiler » vers ‘ces nouvelles plales-formes. AIR élant sans doute plus mature que HTMLS aujourd’hul, il pourrat étre ‘envisage de continuer avec Act onscr ipt. Néanmoins, sile jeu est porté sur navigateur et essayé sur iPad, comment e joueur peut 'essayer sans HTML 5? Rewaroue Jeu natif lest possible de faire tourer un jeu nativement en utilisant PhoneGap ou Adobe AIR 3. Certes, HTMLS est encore jeune et en cours de standardisation, mais cela nvempéche pas des facteurs importants du Web den faire la promotion dés maintenant, voire de utiliser. Par exemple, il est possible de développer des applications en HTMLS sur Windows 8 UI de Microsoft. Inutile d’hésiter, utiliser HTMILS nlest pas une décision delicate pour une entreprise. Toutefois, selon le public visé, pensez a adapter votre appli- cation pour des navigateurs plus anciens tels que Internet Explorer 7 et 8, Anicienncs versions La rétro-compatibilité pour des joux La balise pour les jeux HTMLS riexistait pas du tout sur la plupart des anciens navigateurs. ExplorerCanvas est un code JavaScript obligeant EB 4 interpréter cette balise. lest conseillé de demander @ lintemaute de mettre jour son navigateur, pour que son experience du ju soit plus aaréable. > htipdicode.google.com/plexplorercanvas Devanterthousiasme général soulevé par HTMLS, de nombreux projets adaptation ont été pratique- ment abandonnés : demier commit en 2010 pour ExplorerCanvas, demiére release de FlashCanvas ‘en 2011. Créer un jeu en HTMLS, est-ce possible? On est loin de la petite interaction de la part de Vutilisateur. Non seulement des algorithmes doivent étre codés, ce qui implique une interprétation plus ardue du JavaScript, mais Vaffichage graphique est également plus poussé avec des rafraichissements continuels. Heureusement, les navigateurs web ont été largement améliorés et donnent désormais au développeur la poss § un jeu en HTMLS. © Cependant, cela niexclut pas les limites de linterprétation et ne remplace pas a puissance de langages comme C ou C++, plus adaptés pour des jeux de trés grande qualité que l'on retrouve sur des consoles de salon, Restons-en pour I'instant a la 2D en HTMLS; pro- 2 grammer en 3D est actuellement prématuré, mais le jour viendra... Bien entendu, cela 5 ne vous empéche pas de travailler sur Ia 3D avec WebGL. ilité de concevoiroe Aperorono1n WebGL et Three.js La demiére annexe de fouvrage présente succinctement la conception d'éléments 3D avec Three.s. Réaliser un jeu en 2D, nest-ce pas un probléme stratégique si l'on soubaite attaquer le marché des jews vidéo? Cela dépend de votre positionnement. A priori, si vous eréez. un jeu en HTMLS, il sera distribué en ligne, ainsi que sur les nouvelles technologies (smartphones et tablettes tactiles). En ligne, soit vous créez votre propre site contenant votre jeu, soit vous utilisez les réseaux sociaux. On ne peut que conseiller la deuxitme option (ou les deux) puisque les réseaux sociaux, tels que Facebook ou Googlet, ont des millions d'utilisateurs qui sont autant de joueurs occasionnels ne cherchant pas la 3D HD mais 'amusement temporaire, seuls ou entre joueurs. Sraristioves Qui sont les joueurs des réseaux sociaux? {69 % des joueurs sont des femmes et ont en moyenne 43 ans (PopCap Games 2011). Ces statistiques sont loin des clichés sur les joueurs adolescents. Un public varie, des plates-formes différentes... un jeu 2D, s'il est bien congu, nfaura aucun mal & se placer dans ce marché, méme en pleine génération 31 HD. Prenons des ‘exemples concre! + Angry Birds, réalisé par Rovio, a engendré plus de 50 millions d'euros de chiffre affaires pour un budget déenviron 100 000 curos. Pourtant, le concept du jew est trés simple ct la 3D n'est pas présente. + FarmVille de Zinga, simulateur de vie agricole, est une application trés populaire sur Facebook avec plus de 82 millions d’utilisateurs actif’, Bien sir, les échecs sont également nombreux dans le monde des jeux, mais cest moins en raison de la 2D que pour des critéres de « jouabilité » : sans mobiliser un budget conséquent, il suffit d’éditer un jeu addictif et amusant, pour lequel la compétitivité centre amis (faire le meilleur score, la plus grosse ville, etc.) devient trés intéressante quand les réseaux sociaux sen mélent. A qui s'adresse cet ouvrage? Que vous soyez. amateur ou professionnel, cet ouvrage vous fournira les bases pour la création d'un jeu en HTMLS. Toutefois, il s'adresse aux personnes connaissant le lan- gage JavaScript. Si vous souhaitez attaquer le marché des jeux vidéo, le livre complétera tout aspect technique par un chapitre sur les stratégies de monétisation pour récom- penser vos efforts.STATE _-Jeux multijoueurs et sociaux en HTMLS et JavaScript Structure du livre Le livre s‘organise en trois parties dans un ordre logique : 1 Ia réalisation d’un concept de jeu; 2 le développement technique; 3 Pintégration dans les réseaux sociaux. Le concept est une réflexion préalable sur la réalisation du jeu. Le chapitre 1 vous aide dans votre étude du marché et & vous diriger vers un contexte de jeu (Gameplay) attrayant. Le et les différents éerans qui donneront la premie: ppitre 2 mentionne le chargement des ressources graphiques et audio avant le j ¢ impression au joueur. Le chapitre 3 vous apprend & construire une structure pour I’importation des données dans le jeu afin de réaliser une carte ou un niveau et de sider d'un éditeur OpenSource. Le chapitre 4 explique comment concevoir des animations & partir d'une image, ou déformer un élément selon une frise temporelle virtuelle. Le chapitre 5 expose la réalisation du Gameplay avec le clavier, la souris, Vaccélérometre ou la manette. Il enseigne comment diriger un personnage en se souciant de son accé- lération, sa gravité, etc. Le chapitre 6 détaille les méthodes de défilement de la carte pour pouvoir se déplacer dans Pintégralité du décor. Le chapitre 7 montre comment créer les interactions entre le joueur et les décors pour xgérer les collisions ainsi que les interactions entre le joueur ét les autres personnages pour déclencher des événements. Le chapitre 8 aide & mettre en place le concept avec application des régles du jeu. Le chapitre 9 vous apprend a amplifier Tambiance du jeu par des musiques et effets sonores ainsi quiavee des effets graphiques. Le chapitre 10 explique la conception des adversaires et le calcul des dégits lors d’une attaque entre le joueur et 'adversaire. Le chapitre 11 retrace les moyens pour sauvegarder et charger les données du jeu. Le chapitre 12 résume les chapitres précédents par un cas pratique : la création d’un jeu plate-forme. ; Le chapitre 13 mentionne l'installation de Node,js pour réaliser un jeu multijoueur. Le chapitre 14 explique création des modeles cb serveur pour le partge des données en temps récl. Le chapitre 15 montre comment intégrer le jeu sur le réseau social Facebook avec authentification ct autorisation du jeu. Le chapitre 16 détaille la récupération des informations du joueur pour les partager avec ses amis et les inviter a leur tour de jouer.oe Le chapitre 17 explique comment utiliser la monnaie virtuelle de Facebook comme stratégic de monctisation. Lannexe Rappels sur HTMLS Canvas traite des différentes méthodes de I’élément can- vas de HTML, utiles dans le dessin et Vaffichage dans le jeu. Nous vous conseillons de la lire attentivement si vous n’étes pas encore familiarisé avec cette balise. Tlexiste plusieurs frameworks pour réaliser des jeux en HTMLS. Liannexe Frameworks Javascript en mentionne deux : Easel js et RPG js. La derniére annexe évoque la création de jeux 3D en WebGL avec l'aide da framework ‘Three. Remerciements Je remercie + ’équipe des éditions Eyrolles pour la publication de cet ouvrage, et particuli¢rement ‘Muriel Shan Sei Fan pour le suivi de ’écriture; + David Dany pour quelques illustrations tirées d'un jeu coproduit ensemble; + Romain Pouclet pour la relecture techniques + Anne Bougnoux et Lauréne Gibaud pour la relecture générale.“saljouda ET0z @ wSuAdoDTable des matiéres Avant-propos... Pourquoi concevoir un jeu en HTMLS/JavaScript ? . . seveeens v A qui s’adresse cet ouvrage? . Structure du re Remerciements. CHAPITRE 1 Mettre au point le concept du jeu............... eee eee eiet 1 Etude de marché . tease Quelques géants du Social Gaming ......... 0... Etude démographique et comportementale . Etude technologique. Voire étude de marché . Positionnement. .. Joueurs ciblés... Prix du jew ‘Type du jeu. Action Jeude roles... Aventure 10 Action-Aventure . ‘Simulation. Sport... Réflexion. ...... Peele ee Bee eet see i Choisir un framework. .a) Table des matieres. Easel js... Kineticjs Craftyjs Caatjs.... CanvasEngine js Installer CanvasEngine .....000...220000000ccseeeeees CHAPITRE 2 Créer I'écran titre Création de la sce de chargement Schéma des données. . . . Shage de la barre de progression . Keran titre. . Création de la scOne de Véeran tite... Initialisation des boutons Association des événements Ecrans additionnel Options Niveaux...........0.6565 CHAPITRE 3 Affichage des décors. Level Design ..... Insertion des données Une carte . Un niveau U Créer la carte Intégrer la carte dans la scéne .. Obtenir des données de la carte... Objets principaux : les sprites............... Ensembles d’éléments graphiques ou Spritesheets. Cas particulier er Tiled Map Editor............Table des matiéres El CHAPITRE 4 Animer les éléments sur l’écran ....... 0.0... 47 Déformer pour animer 00.2... 0.06 e cece vee eeeeeeeeeeeee 48 Animation en boucle... 49 Animer en réaction 3 une action. 32 Animation temporaire ................ 53 CHAPITRE 5 Concevoir le Gameplay 37 Mouvement.............222.00200088 Ee ee Steers Etat d'un élément 38 Exemple : plate-forme mobile .......... 58 Contrdle du joueur ol Clavier ... 63 Souri 64 Accélérometre 65 Accélération et décélération. 1 Accélération ....... n Déodldratioh 2.22... censeeeeeeeeeeeeseeeeeeeeesteeeceeesnenenee OB Gravité pour Ie saut. 5 Initialisation .. .. 76 Gravité ... 1 Saut 7 CHAPITRE 6 Avancer le joueur avec des défilements .....................005. 81 Défilement classique... 0000000 c occ eee e cece eee 82 Définir les éléments & déplacer. 82 7 Rafraichissement du déplacement ....... 83 a Défilement différentiel 2.2.6... 6666. e coco eeeeeeeeeeees 83 8 CHAPITRE 7 Interaction avec les objets ................0.0 000 cceeeeeeeeeees 85 Collision eee eee ee tenes 86Table des matieres. roy ‘Au bord de la carte... 87 Sur le décor et les objets....... - 89 Collision sur des objets. 93 Interaction ...... vneee eee . 96 Déclenchement automatique au contact........66.ccceeteeeeseeeeees 96 Selon une action... ....ceeeeeeeese 99 CHAPITRE 8 een place des régles du jeu .. . : 101 Situation initiale du joueur . 102 Inventaire . 103 Application du concept.............. Geeta et 10: Affichage des points de vie... peer aes .. 104 Explication des régles au joueur. 106 Affichage du score........ . wees wee 108 Fin de partie : gagnée ou perdue . ; : -. 109 Le joueur termine un parcours............. 109 Le joueur sort de Pécran vers le bas... 0... preserves |() CHAPITRE 9 Ambiance du jeu ..............0..02. UL Ajouter des effets sonores. ....... ; : U2 RES eR ata tata tt 12 SoundManager..... Bie pUsaaeiat Sereda Effectuer des fondus musicaux. 14 Dynamiser avec des effets graphiques 115 ‘Ton de l’écran : effet jour/nuit . 1S Flash visuel. 15 = CHAPITRE 10 Les adversaires 7 z Paramitres des adversaires us Modéle et affichage des points de vie........ feat $e £ Calcul des dégits 121 e Zones spécifiques d’interaction . . 124Table des mati fable des mat os Champ de vision . See See : 127 Zone de détectiON eee adeeu clay Reaction ee ere ete eee eee ee eee ee ee ea 128 CHAPITRE 11 Réaliser la sauvegarde..... ace cs ‘ freer eecai Sérialisation des classes ..... 132 Chargement des données 133 CHAPITRE 12 Cas pratique : créer un jeu plate-forme............. eters DBS Régles du jeu : oie ee : 136 Initialisation et création des classes ...........06606 0000 cece 136 Chargement du niveau ........0 006060000 eeeeeeeeeees 138 Création des animations. ..........000600000 0000 ceeveeeeeeeeeee eee 139 Défilement de la carte... .. 6... eee 140 Gestion des collisions . . Bepeeteei eet ee eeeeeeftere tal Mouvement, gravité et saut . 143 Effectuer un mouvement selon une touche. 145 CHAPITRE 13 Configurer le serveur pour le multijoueur ....................... 149 Utiliser le serveur via SSH... 0.00.00 000000 ceeeeeeeeeeeees 150 ‘Télécharger Node,js.. 151 Installer NPM 152 Installer Socket.i 152 i ‘Tester installation ce cee . ce 1B é CHAPITRE 14 Utilisez Node.js pour votre jeu multijoueur en temps réel....... 155 Comment fonctionne Socket.io?....... tet . vee 156 z Fonetionnement dans CanvasEngine.........0000..0000000ce0000ee2 197 2 Définir les événements . Poe TescETccrEnas reer IseA] Table des matieres. ‘Composer la structure du jeu . Créer des modules dans Node,js Créer un modéle.... 0... Base de données......... Scheme taste Données dans le modéle.. ... . . - Gérer les connexions et déconnexions Données communes. . . Partage des données entre joueurs . Sauvegarde et chargement avec Mongoose . . Installation de MongoDB et Mongoose Connexion a la base et schéma. . Sauvegarder des données Chargement CHAPITRE 15 Intégration du jeu a un réseau sot Déclaration du jeu dans Facebook : Facebook . Authentification et autorisation. CHAPITRE 16 Implémentation de la partie Social Gaming. . . Intégration du jeu HTMLS Integration du SDK et initialisation... Lutilisateur est-il connecté? Scéne pour demander une connexion Inviter des amis A jouer .... Supprimer la noti Afficher un score et le partager sur le mur de Putilisateur Systéme de badges.........00500.205 Récupérer des informations (amis, groupes, etc.) pour les utiliser dans le jew eae Données générales . Liste des groupes .........6.0.0600e0eees 158 159 159 162 162 163 164 165 166 168 168, 169 169, 170 m1 m2 173 m7 178, 178, 179 180 18 182 183 185 186 187 188,Table des matiéres pal} Liste des ai CHAPITRE 17 Stratégie de monétisation. Monnaie virtuelle cee Pourquoi une monnaie virtuelle ? Configuration et déploiement .. CHAPITRE A Rappels sur HTML5 Canvas Initialiser et charger le canvas Dessiner dans le canvas Les lignes . Les arcs. . . Chemins . Les formes Recadrer Les dégradés, Afficher un texte Couleurs. Les ombres . . Composite Insérer des images. Redimensionner . Couper ... Répéter rimage en fond ‘Transformation ‘Translation Rotation ‘Transformation personnalisée . Manipulation des pixels... 188 191 192 192 193PATTIE. Table des matiéres CHAPITRE B Frameworks JavaScript . .. Easel js. . Installer. Premiers pas . Ajouter des forme: Appeler le canvas en boucle.... 0.6.6.0. Afficher un texte Ajouter des conteneurs.. Insérer et animer une image RPG JS : créez des jeux de rile ...... Premiers pas ‘Transférer le joueur sur une autre carte . Créer un événement . ‘Commandes événements ..... Ajouter dynamiquement des événements Ajouter une animation . .. Créer des actions .... CHAPITRE C 3D avec Three.js Installation .. .. ‘Créer une scene ... Ajouter un objet Former un groupe dobjets Source de lut Rendu...... Bouger la caméra avec la souris2013 Eyrolles. ‘opyright © 1 Mettre au point le concept du jeu La création d'un jeu se base préalablement sur un concept réfléchi, Voici un tour horizon sur le marché actuel, le comportement des joueurs et les types des jeux.Ea Jeux multijoueurs et sociaux en HTMLS et JavaScript Etude de marché Léémergence des ordinateurs « de poche » (smartphones, tablettes tactile) et le dévelop- pement gigantesque des réseaux sociaux ouvrent un nouveau marché, Les personnes qui se connectent sur les réseaux sociaux ne le font pas dans le seul but de discuter ou partager des informations : 50 % des utilisateurs de Facebook se connectent seulement pour jouer (selon AllFacebook.com). Peut-on penser sérieusement que le Social Gaming est un marché financiérement intéressant? En analysant le comportement des joueurs et le chiffre d'affaires des entreprises sur ce marché, nous pouvons répondre de maniére positive sans hésitation. En 2016, le marché du Social Gaming est estimé & 11,3 milliards de dollars (Selon le dernier rapport de l'industrie IBISWorld). De plus, le montant des dépenses sur les biens virtuels dans la premiére moitié de Pannée 2012 ét: de 1,26 milliards de dollars (selon Forbes). Cette croissance sexplique par Yomnipr sence des réscaux sociaux dans la vie quotidienne des gens. Une statistique montre par ailleurs que 20 % des internautes ont dépensé de Vargent récl dans un jeu, majoritaire~ ment des femmes (selon PopCap Games). Quelques géants du Social Gaming Facebook Bien sir, le succés de tous les acteurs du Social Gaming suscite la convoitise, principa- ement celle du réseau social Facebook lui-méme. En juillet 2011, une monnaie virtuelle est imposée. Le principe en est simple : le joueur achéte des « crédits Facebook » avec de Pargent réel, utilisables dans le jeu aprés achat. Le réseau social y trouve un intérét majeur puisqu’il pergoit une commission de 30 % sur chaque transaction effectuée, aug- mentant son chiffre d'affaires de plusieurs centaines de millions d’euros. Zynga Avec 600 millions de dollars de chiffre d'affaires, Zynga décroche sans aucun complexe la premiére place dans les entreprises présentes sur le Social Gaming. Son succes lui a permis de s'introduire en bourse en décembre 2011 & 1 milliard de dollars. Depuis, en moins d'un an, Zynga a perdu beaucoup de sa valeur, eta di se résoudre a lancer un plan social. Ses jeux les plus connus sont CityVille, FarmVille, PlayFish ou Mafia Wars et totalisent 350 millions de joueurs sur Facebook en 2011, dont 80 millions uniquement pour le jeu FarmVille. Pour satisfaire tous ces joueurs et 8 lapter & toutes les plates-formes, Zynga a racheté Yentreprise Dextrose en 2011, spéci isée dans le HTMLS. Disney Avec Rocketpack, Disney siaffranchit de la technologie Flash d’Adobe, qui est deve- nue l'un des standards de fait du jeu en ligne. De plus, au fur et & mesure de l'adoption du HTMLS, le groupe peut aussi passer outre I'écosystéme exigeant d’Apple pour laMettre au point le concept du jeu [a Cnapirae 1 istribution d'applications. Le groupe peut enfin imaginer des portages sur toutes les plates-formes, du PC aux terminaux mobiles, en passant par les tablettes tactiles Technotocies RocketPack Rocketpack est un moteur de jeu en HTMLS quia fat nai fin 2010 sur Facebook, le premier jeu dans ‘cat technologie : Warimals. Lentreprise Rocketpack, basée & Helsinki en Finlande, a misé sur cette technologie pour un jeu disponible sur plusieurs piates-formes. Electronic Arts En novembre 2009, Electronic Arts a racheté Playfish pour 275 millions de dollars. Son principal jeu est Sims Social, reprenant le concept des jeux Sims sur PC, avee plus de 50 millions de joueurs. Concurrencé fortement par The Ville de Zinga, Electronic Arts veut prendre une place dans le milieu du Social Gaming. Son modéle commercial agres- sif incite les joueurs a dépenser malgré la gratuité des jeux. D’autres jeux trés connus sont adaptés sur Facebook, notamment Fifa Superstars, un jeu de simulation de football ot une bonne configuration de Péquipe offre une chance de gagner le match. Etude démographique et comportementale Diprés une étude réalisée en 2011 par PopCap Games, concepteur de jeux vidéo, les internautes aux USA et au Royaume-Uni jouent significativement plus aux jeux sociaux. depuis janvier 2010 : 41 % des internautes ont joué 4 un jeu social au cours des 3 deniers mois et plus de 15 minutes par semaine, contre 24 9% en janvier 2010. Tableau 3-1. Proportion du temps consacré au jeu social en 2010 et 2011 ‘aux Etats-Unis et au Royaume-Uni (selon PopCap Games) Etats-Unis Royaume-Uni__ Etats-Unis Royaume-Uni 2010 2011 2010 2011 ‘Aucoursdes3derniers mois | 28 % 42% 29% 42% ‘Au moins 15 minutes / 24% 41% 25% 41% ‘Au moins 6 heures / 8% 16% 6% 13% semaine Contrairement 4 ce que Yon pourrait penser, les internautes jouant sur les réseaux sociaux sont surtout des femmes (69 %) et I'ige moyen est de 39 ans (2011).} 2013 Eyrolles. Copyright En Jeux multijoueurs et sociaux en HTMLS et JavaScript ‘Tableau 3-2. Proportion des joueurs en 2010 et 2011 par sexe ‘aux Etats-Unis et au Royaume-Uni (selon PopCap Games) Homme 46 % 46% 2% A2% Femme 54% | 54% 58 % 58% Tableau 3-3. Proportion des joueurs en 2010 et 2011 par age ‘aux Etats-Unis et au Royaume-Uni (selon PopCap Games) Moyenne 45,0 ans 41,2 ans 38,0 ans 35,5 ans 21 et en dessous 4% 9% 9% 9% 229 1% N% 22% 25% 30-39 20% 17% 25% 26% 40-49 20% 14% 22% 21% 50-59 26% 18% 15% 13% 60+ 20% 20% 8% 7% Les raisons de jouer ces jeux sont bien entendu avant tout de s‘amuser, mais aussi dentrer en compétition contre les amis et de se déstresser du travail quotidien. Tableau 3-4, Proportion des joueurs en 2010 et 2011 par raison (selon PopCap Games) Pour s‘amuser 53% | 57% Par esprit de compétition 3% | 43% Pour se déstresser 3% | 2% Pour entrainement mental 32% | 32% Pour accomplir des objectifs 20% | 24% ‘Communiquer avec d'autres personnes 2% | 24% ‘Améliorer la coordination main-yeux wo% | 9%Mettre au point le concept du jeu Casa Exprimer ma personnalité Interargir avec des contacts du réseau social 7% 5% 7% 6% Le nombre des joueurs qui achétent de la monnaie virtuelle avec de l'argent réel a nette- ment augmenté de janvier 2010 (14%) & 2011 (26 %). ‘Tableau 3-5. Proportion des joueurs qui font un achat en 2010 et 2011 par sexe ‘aux Etats-Unis et au Royaume-Uni (selon PopCap Games) Etats-Unis Royaume-Uni__— Etats-Unis Royaume-Uni 2010 2011 2010 2011 Gagner ou dépenser 55% 2% 48% 53% la monnaie virtuelle ‘Achat de la monnaie 16% 27% 12% 25% virtuelle avec de argent réel (Se du total) ‘Achat d'un cadeau vir 35% 31% 28% 34% ‘uel pour quelqu'un Etude technologique Lordinateur de bureau était beaucoup utilisé en 2010, mais il est de plus en plus fré- quemment remplacé aujourd’hui par les tablettes tactiles. Un milliard de smartphones est prévu pour 2015-2016, Créer un jeu en HTMLS pour les différentes plates-formes revient a toucher un nombre d'utilisateurs non négligeable; en France, 12,8 millions de personnes jouent sur les téléphones mobiles (selon afjv.com). Tableau 3 . Proportion des technologies utilisées en 2010 ‘aux Etats-Unis et au Royaume-Uni (selon PopCap Games) Ordinateur Téléphone standard ou compatible Web ‘Smartphone Console de jeu Tablette tactile Etats-Unis Royaume-Uni 96% 92% 8% 13% 28% 29% 20% 19% 2% 8%[6] Jeux multijoueurs et sociaux en HTMLS et JavaScript Votre étude de marché Le monde du jeu en ligne est en perpétuelle évolution, aussi les noms et chiffres que nous venons de citer évolucront également, souvent trés rapidement. Avant de vous lancer dans quelque développement que ce soit, il est important que vous établissiez votre propre étude, Connaitre le milieu dans lequel vous allez vous lancer (ses acteurs, ses composantes technologiques et économiques) est de la premiére importance pour Pétape suivante : votre positionnement par rapport & vos concurrents. Positionnement Le positionnement du jeu est important pour justifier son prix — dans le cas dun jeu payant — mais surtout pour se démarquer de la concurrence. Plusicurs questions doivent étre posées : + Comment me démarquer de la concurrence selon l'étude de marché? + A qui sadresse le jeu? Quelles sont les attentes? + Quel est le prix du jeu? ine serait pas judicieux de reprendre un concept existant par manque d'information, IL ne serait pas non plus envisageable de créer un jeu avec une difficulté intellectuelle trop Alevée s'il Sadresse & des enfants de moins de huit ans. Joueurs ciblés Lorsque vous ciblez des joueurs, il faut connaitre plusieurs points : + leur ages * Tear sexe; + leurs centres d’intérét; + lear temps disponible; + leur technologie préférée Lage influe non seulement sur la difficulté du jeu, mais aussi sur le type de graphismes employé. Par exemple, un jeu trés coloré sera plus approprié pour des joucurs jeunes, voire trés jeunes (moins de 8 ans); il pourra sorienter vers le jeu d’apprentissage, type tus apprécié par les parents (avoublions pas que ce sont eux qui achéteront... ou non).Mettre au point le concept du jeu Chapirne 1 ‘Remnaue Facebook interdit aux enfants de moins de 13 ans aux Etats-Unis Officielement, aux Etats-Uris, le texte COPPA (Children's Online Privacy and Protection Act) protége {es enfants de moins de 13 ans de la récolte de leurs données privées & des fins commerciales, Ans, ‘Yentant doit demander autorisation & ses parents, procédure longue et fastidieuse. Facebook a donc ‘choisi de refuser Facoée & ses services aux enfants de moins de 13 ans. Tenez-en compte dans votre positionnement! Figure 3-1 Univers coloré et enfantin {du jeu ClickySticky sur iPad Le sexe a une incidence sur l'univers du jeu. Sans tomber dans les elichés oii un jeu ayant pour but de chercher des chaussures talon aiguille dans un univers rose bonbon est destiné a un public féminin, un jeu conforme a leurs centres d’intérét a des chances d’at- tirer plus de joueuses. Croire qu'il y a plus d’hommes jouant & des jeux sociaux est une pensée infondée; d'aprés une étude de MocoSpace, les joueuses y sont plus présentes (comme ‘The Sims Social) que sur les consoles de salon. Figure 3-2 The Sims SocialEZ Jeux multijoueurs et sociaux en HTMLS et JavaScript Prix du jew Pour déterminer un prix, il faut prendre en compte plusieurs critéres + Te prix de la concurrence; + le prix attendu par les joueurs potentiels; + Te rapport qualité / prix du jeu. Paradoxalement, un prix faible nuit parfois & image d'un jeu car les joueurs potentiels peuvent sous-estimer la qualité. Estimez. un prix convenable, du méme ordre de gran- deur que ceux de la concurrence, tout en pensant a la rentabilisation de votre travail ou de votre équipe. A Vinverse, des jeux gratuits attirent plus facilement les joueurs. Une solution souvent adoptée consiste & proposer quelques niveaux gratuitement et la suite du jeu payante, ou encore le jeu gratuit seulement pendant une période d’essai au-deli de Inquelle il faudra payer pour continuer & s'en servir, Pour un jeu de Social Gaming, pensez a lz monnaie virtuelle; le jeu est gratuit mais des extensions, des objets ou bonus deviennent payants. Renvol Monnaie virtuelle Reportez-vous au dernier chapitre pour lintégration de la monnaie viruelle dans votre jeu. Type du jeu Le concept doit également tenir compte du type du jeu. Il faut se souvenir que certains types de jeux sont plus longs a produire, plus compliqués a réaliser que d'autres : par exemple, le scenario d'un jeu de role implique de passer beaucoup de temps & créer un univers riche en détails, alors quun jeu de simulation ou de gestion ne demande que la création dalgorithmes sans pour autant rentrer dans des développements de moult scenes complexes. Voici quelques conseils : + Choisissez le type de jeu selon vos moyens financiers. Jtés qui vous seront néce + Estimez correctement le temps et les capa ires; ne vous lancez pas dans un projet qui risque de vous dépasser et que vous ne terminerez peut- tre pas. + Si le scénario est la racine de votre jeu, réfléchissez sur son attrait auprés des joueurs avant de vous lancer dans le développement. + Dans votre étude de marché, prenez en compte le type de jeu le moins présent. Vous pourrez, vous démarquer de la concurrence. + Sachez qulun concept n'a pas besoin d’étre complexe pour devenir trés populaire, + Dans le cadre du développement, informez-vous sur les outils disponibles pour créer le type de jeu retenu.Action Mettre au point le concept du jeu [ea Cnapirae 1 + Si vous souhaitez créer un jeu multijoucur, tenez compte la masse de travail. Par exemple, créer un jeu de simulation ne demande pas autant de travail qu’un jeu de role MMORPG (voir ci-aprés), dans lequel il faut intégrer des univers, des personnalisa- tions de personnages, des modes de combat... + Nous présentons succinctement les divers types de jeux. N’hésitez pas a chercher plus @informations dans des livres spécialisés ou sur Internet, Cela peut vous donner des idées pour votre concept. Le jeu d'action demande au joueur dextérité et réflexes pour avancer dans les différents niveaux. II en existe plusieurs sortes : + EPS (First Person Shooter): jeu avec une vue subjective dans un milieu 3D (ex. Doom); + Combat : par des combinaisons de touches, le joueur doit combattre intelligence artificielle (ex. Street fighter); + Beat Them All : jcu caractérisé par un nombre important d’ennemis dans le niveau, que le joueur devra tous éliminer. Pour augmenter la difficulté, les ennemis inter viennent successivement pour combattre le héros (ex. Devil May Cry). Jeu de réle Dans ce type de jeu, aussi appelé RPG (Role Playing Game), le joueur doit faire évoluer un personage dans un univers pour améliorer ses caractéristiques (sa force, sa défense, son attaque...) et apprendre de nouvelles techniques et compétences lorsquiun niveau est gagné. Ces derniéres sont obtenues par I’intermédiaire de points d'expérience, acquis, principalement en combatant des ennemis plus en plus difficiles selon la progression du joueur. Le héros du jeu progresse dans Vhistoire en parlant au personage non joueur (PNJ) qui lui indique des chemins, donne des objets indispensables ou déclenche de nouvelles actions possibles dans le jeu. Généralement, le héros posséde une somme d'argent, gagnée lors des combats ou trou- vée dans des endroits spécifiques sur Ia carte, qui sert & acheter des armes plus puissantes et des montures plus résistantes pour vainere des ennemis diffciles. Les RPG sont regroupés en deux catégories + Japanese RPG : jeu basé principalement sur le seénario, souvent linéaire A cause de Vhistoire fixée dés le début; personnages possédant une personnalité propre (ex. Final Fantasy); + Occidental RPG : univers plus ouvert que dans les J-RPG, laissant au joueur une plus grande liberté, aussi bien sur le choix des personnages que sur le scénario (ex. série des ‘The Elder Scrolls)Ew Jeux multijoueurs et sociaux en HTMLS et JavaScript ‘Traditionnellement, un RPG propose un combat par tour. Le joueur peut prendre le temps de choisir ses actions pour attaquer Vennemi, Lorsque son tour est terminé, c'est i Padversaire d’effectuer Ia méme démarche. Cependant, il existe dautres modes de combat : + A-RPG (detion-RPG). Le combat seffectue en temps réel. Le personage doit attaquer l'ennemi sans prendre le temps de choisir une technique précise. C'est prin- Cipalement des combinaisons de touches qui lui permettront d’attaquer (ex. Kingdom Hearts). + T-RPG (Tactical-RPG). Chaque personnage est caractérisé par une zone de dépla- coment et une zone dattaque. Comme dans le jeu des échecs, Ia stratégie entre en vigueur. Le terrain et la notion de déplacement sont des paramétres supplémentaires, dans le déroulement du combat (ex. Final Fantasy Tactics). Dans le cadre du multijoueus, on appelle ce type de jen MMORPG (Massive Multi- player Online Role Playing Game »). Le principe est le méme, mais cest 'aspect interactif entre les joueurs qui est mis en avant, Par exemple, des groupes peuvent se former pour appliquer des tactiques communes, mais aussi pour échanger, acheter ou vendre des objets entre partenaires (ex. Dofus). Aventure Le jeu daventure classique est le Point&Clic. Ce mode est basé sur Fexploration d'un univers sans exiger aucune habileté du joueur; Cest sa réflexion qui est sollicitée pour comprendre des situations, trouver des objets, créer des combinaisons afin de poursuivre son aventure Ce type de jeu est trés intéressant pour les nouvelles plates-formes. En effet, les tablettes tactiles s‘accommodent bien de interaction entre un joueur et un décor : Yergonomie se préte bien A cette utilisation, donnant une expérience de jeu plus agréable (ex. Les Chevaliers de Baphomet). Action-Aventure Comme son nom l'indique, ce type de jeu conjugue laction et Vaventure, clest-A-dire la résolution de problémes dans un univers ouvert pouvant étre exploré par le joueur. Les actions se déroulent en temps réel. Le mode de combat A-RPG s'inspire de ce genre $ (ex. The Legend of Zelda). jimulation Le jeu de simulation est assez utilisé dans le Social Gaming. Le joueur a la capacité de sadapter dans un environnement pré-défini, de réfléchir & la gestion de son avancée z pour atteindre un objectif. Beaucoup de jeux de simulation intégrent une monnaie vir- tulle que le joucur doit bien gérer pour progresser dans le scénario (ex. The Sims City).Mettre au point le concept du jeu zn Cnapirae 1 Sport Un sport particulier est représenté dans le jeu. Le joueur doit diriger une équipe ou un personage contre un adversaire en suivant les régies de ce sport (ex. Fifa). Reflexion Les jeux de réflexion ne se basent pas sur la dextérité du joueur, contrairement aux jeux daction, mais sur leurs capacités intellectuelles pour atteindre un but ou établi une stratégie; V'aléatoire est trés peu présent. II sagit principalement de jeux de so (Géchecs, dames...) et de quelques jeux de simulation. un framework Vous n'étes pas le premier & souhaiter concevoir et réaliser un jeu en ligne. D'autres avant vous se sont frottés & un certain nombre de difficultés récurrentes (graphismes, animations, controles...) et ont développé des outils (Frameworks) facilitant considéra~ blement Ie travail. Plusicurs frameworks existent pour la réalisation d’un jeu en HTMLS; certains pri legient le dessin, d'autres les animations, ainsi que les controles. Aucun framework ne sort réellement du lot. Mettez-les a l’épreuve et ciblez celui vraiment approprié a vos besoins. Frawewore Comment choisir? Dans la majorité des cas (pour ne pas dire tous), les frameworks ont été concus par des développeurs indépendants,Iin'y a pas vraiment de framework en premier plan, Easels (voir annexe A) est intéres- sant mais son évolution est assez lente (de la version 04.2 vers la version 0.5 aprés plus de de 6 mois). Kinetic commence & avoir un soution mais il est tres orienté vers le dessin sur HTMLS Canvas et moins sur le jeu vidéo (Scroling, Level design, contrdle, etc). lest important de choisir un outl qui corresponde & la fois au type de jeu que vous souhaitez dévelop- Per et a vos gotten matiere de programmation. Easels est une bibliothéque assez poussée oit la syntaxe de API est proche de Flash. Les éléments sont placés hiérarchiquement et intégrent une interactivité avec la souris. Des notions supplémentaires améliorent le framework : * Tes animations; + les SpriteSheets (fichiers images regroupant plusieurs des illustrations d'un site, que Ton « découpe » ensuite pour les utiliser); + les filtres : application dVeffets de couleur et de outage sur un élément,Ea Jeux multijoueurs et sociaux en HTMLS et JavaScript > hilp:inwwcreates.com Par ailleurs, Easel,js saccompagne d’autres bibliothéques + Tween, : animation de déformation durant un temps (basé sur une frise temporelle virtuelle); * Sound gestion des sons et musiquess + Preload js : gestion des pré-chargements avant le commencement du jeu. Rewor Pré-chargement "Nous parlerons de lintérét du pré-chargement au cours du chapitre 2. Rewo! Apprendre a utiliser Easels annexe 8 explique comment se servir de Easols. Kineticjs Ce framework utilise plusieurs couches définies par l'utilisateur, chacune possédant deux contextes : + Vaffichages + une couche pour la détection des évenements (clic, passage de la souris). La scene est composée de nocuds virtuels, semblables au DOM, intégrant des formes et des images. Ressemstances Flash est toujours Ia Les noouds virtuels de Kinetics ressemblent beaucoup a Flash, ses scenes et ses MovieClip, En fat, ‘ous les frameworks reprennent la structure de Flash. La différence avec Easel/s est la syntaxe : Easel js reprend les noms des classes de Flash, Kinetics est une surcouche de conves qui permet de gagner du temps dans le dessin de formes complexes : + Cercles; * Polygones; + Ellipse; + Etoile. La notion des Sprites ainsi que les animations sont présents dans le framework et utiles pour la création des jeux. » http:liwvw.kineticjs.comMettre au point le concept du jeu Ea Cnapirae 1 Crafty js Framework traditionnel pour eréer des jeux en HTMLS, Craftyjs incorpore une ges- tion des scénes (pause, réglage, etc.) et dautres fonctionnalités : + SpriteSheet; + gestion des collisions + gestion du claviers + gestion dune frise temporelle virtuelle; * animations; + gestion de la sauvegarde avec plusieurs solutions : IndexedDB, WebSQL, LocalSto- rage ou Cookies; + gestion du pré-chargement. Détail supplémentaire, Crafty, vous laisse le choix entre la création avec HTMLS can- vas ou en DOM/CSS (en gardant le méme code). > hitferattyjs.com Caatjs Caat propose d'utiliser la technologie de votre choix : HTMLS Canvas, DOM/CSS ou WebGL. Dans tous les cas, l’API restera identique : + animations; + gestion du clavier; + création de chemin : I’élément suit le chemin avec une vitesse prédéfinie (interpola- tion de mouvement); + SpriteSheet; + gestion du pré-chargement; + filtres; * interpolation et transformation, > hitp:llabs.hyperandroid.comistatic/caat! CanvasEngine,js Utilisé dans cet ouvrage, CanvasEngine est un jeune framework orienté vers les jeux en HMLS. Sa particularité est de se servir d'une structure prédéfinie pour les scenes du jeu. Elle intégre le préchargement et Vaffichage en boucle des éléments toutes les £60 images par seconde (avec requestAninatonFrane).Jeux multijoueurs et sociaux en HTMLS et JavaScript La hiérarchie des éléments est semblable au DOM. Enfin, un modéle pour la concep tion d'un jeu multijoucur est présent. D’autres fonctionnalités permettent l’élaboration du jeu: * animations; + frise temporelle virtuelle; + gestion du clavier et de la manettes + gestion des sons; + gestion du défilement des cartes (Scrolling); + intégration des cartes créées avec Tiled Map Editor + gestion de la sauvegarde; + SpriteSheet. » http:/eanvasengine.net Installer CanvasEngine Dans la suite de Pouvrage, nous utiliserons CanvasEngine pour Ia création d'un jeu vidéo en H'TMLS. Lidée est d'avoir un framework facilitant le travail en intégrant des notions basiques comme le défilement ou la création des niveau. Qui plus est, le fra- mework définit une structure bien précise pour la conception d'un jeu et vous prépare & étendre vers le multijoucur en séparant le calcul — le modéle ~ l'affichage ~ la vue. Pour linstaller, suivez ces étapes 1 Téléchargez la dernigre version du framework. 2 Enen-téte de la page, insérez le code suivant : Insertion de CanvasEngine “canvasengine-X.¥.Z.all.min.js"> Test de la compatibilité de la manette Si le joueur connecte une manette non compatible, il faut pouvoir Ten avertir. Testez avec ia propriété supported : Manette reconnue? if (Gamepad. supported) { / Code } £ Test de la connexion de la manette Dans la méthode ready de la scéne, nous initialisons la manette© 201 Concevoir le Gameplay Cuapirne 5 Initalisation de la manette this.genepad = canvas. Input .Ganepad. init(function() { console. og("Manette connectée") ; 3, function() { console. log("Manette déconnectée"); Dv Les deux paramétres sont facultatifs mais permettent de déclencher une fonction quand Ja manette est connectée et une autre lorsquelle est déconnectée. Ecouteurs des boutons Nous allons affecter un écouteur sur un bouton : ‘this. ganepad. addListener("faceButtond", function() { console. Log("Bouton A enfoncé") ; 3, funetion() { console. Log("Bouton A laché"); Ds Le premier paramétre est lidentifiant du bouton, Ici, faceButton0 représente le bou- ton A, Deux fonctions interviennent ensuite : + Lune se déclenche dés que le bouton est enfoncé. + Lautre se déclenche des le relichement du bouton, Les noms des boutons viennent de PAPI de Gamepads. En voici la liste complete : Tableau 5-2. Liste des boutons de la manette ldentifiant Bouton faceButton0 A faceButton! | B faceButon? y faceButton’ x leftshoulderO | 1B rightShoulderO 8 leftShouldert fa rightShouldert ar select | Back star start leftstckButton soystick gauche appuye rightstickuiton Joystick dot appuéJeux multijoueurs et sociaux en HTMLS et JavaScript dad Haut des touches directions dpaddown fas des touches diretionneles dadiett Gauche des touches arectionnelles dpadight Dicte des touches directionneles Si des écouteurs sont deja uffectés aux touches du clavier, i est fastidieux de devoir répé- ter des opérations. Un raccourci dans CanvasEngine permet de déclencher une fonction d'un écouteur du clavier : [Attacher la méme fonction de la touche Droite du claver& la manette canvas. Input.keyDoun(Input.Right, function() { Code ns this.ganepad = canvas. Input .Ganepad.init(); this. ganepad.addListener("dpadRight™, Input Right) 5 Ici, si le joueur appuie sur la touche Droite du clavier, la fonction de I'écouteur sera déclenchée pour, par exemple, faire bouger son personage. Le bouton Droite de la manette fera de méme. Mise & jour des entrées de la manette Pour le moment, nous avons uniquement créé des écouteurs. Mettons a jour les entrées de la manette. Pour cela, ajoutez la ligne de code suivante dans la méthode render: Mise & jour des entrées de la manette this. gamepad.update() ; Dans cette méthode, si vous voulez tester directement la valeur d'une touche, procédez de la maniére suivante : var pad = Ganepad.getStates() [0]; if (pad) { ‘if (pad. faceButton) { Code + } Nous récupérons les états de la premigre manette (position 0 dans le tableau renvoyé ¢ par la méthode getStates). Si la manette existe, nous testons la valeur de faceButtond. La o valeur est 1 si le bouton est enfoncé, 0 sinon. Le code a l'intérieur de la condition sera 3 exécuté en boucle tant que le bouton A est enfoncé. Pour le déplacement des joysticks, le procédé est équivalent, sauf que la valeur est com- prise entre -1 et 1. La valeur 0 indique que le joystick est 4 sa position initiale. Plus le 6Concevoir le Gameplay ral Cuapirne 5 joystick est tiré dans ses extrémités, plus sa valeur sapproche de 1 ou -1 pour autre sens. Les identifiants sont les suivants : ‘Tableau 5-3. Liste des identifiants du Joystick lestckx Joystick gauche sur axe X lefstcey Joystick gauche sur 'axe Y rightsickx Joystick droit sur Vaxe X rightticky Joystick droit sur Vaxe Y Prenons un exemple. Nous souhaitons tester le pourcentage du joystick gauche tiré sur Vaxe X: Tester le joystick gauche sur axe X var pad = Ganepad.getStates () [0]; if (pad) { Gf (pad. leFtStickX < -0.2 pad.leFtStickx > 0.2) { if (pad.leftstickx > 6) { console.log("Dro‘te", Hath.abs(pad.leftStickx * 109) + } else { console. log("Gauche", Hath. abs(pad.leftStickx * 190) +"); } } } Puisque le joystick est sensible, nous testons une condition pour nlavoir que les valeurs inférieures a 20 % ou supérieurs a 20 9. Si la valeur sapproche de 1, cela signifie que le joueur titre le joystick sur la droite, Si la valeur tend vers -1, le joystick part sur la gauche. Accélération et décélération F Laccélération consiste & augmenter progressivement la vitesse. La décélération est la démarche inverse. Nous retrouvons souvent ces mouvements dans les jeux de type plate-forme.© 201 6 Jeux multijoueurs et sociaux en HTMLS et JavaScript Figure 5-5 Décelération sur le lace pour donner la sensation d'un glssement (Rayman Origins) Rappelons que tous les calculs se font sur le modele, La méthode render de la scéne ne sert qu’ afficher les éléments. Accélération Laccélération seffectue dés le départ du mouvement, cest-a-dire lorsque le joueur appuie sur une touche, Un facteur multiplicatif a, initialisé 4 0, augmente a chaque rendu pour augmenter la vitesse par relation de cause & effet. Propriété «a» utilisée comme facteur Class.create("Gane Player", { speed: 4, Reprenons la méthode move du début du chapitre : en voici le code modifié : ‘Méthode move sur faxe X seulement move: function(dir) { this.dir = dirs this.a += .05; if (this.a this.a } var speed = this.speed * this.a; switch (dir) { case "left" this.x -= speed; break; case "right" this.x += speed; break; } return this.x; }Concevoir le Gameplay 73 Cuairne 5 Le prineipe du mouvement ne change pas. Ici, nous restons sur l'axe X puisque axe ¥ est réserve A la gravité. A chaque fois que la méthode nove est appelée, la propriété 2 est bien augmentée pour la multiplier & la vitesse. La premiére condition limite Yaccéléra- tion afin que le mouvement du joueur puisse devenir stable. La propriété de l'accélération gardera sa valeur lors du deuxiéme mouvement de la part du joueur. Laccélération ne recommencera pas. Pour résoudre ce probléme, nous devons séinitialiscr la propriété 4 0 lorsque la touche est relichée. Dans un premier temps, ajoutez la méthode noveclear dans le modéle pour la réinitialisation : Réinitialisation du facteur «a» moveClear: function() { this.a = 0; } Dans la méthode reacy de la scéne, ajoutez des écouteurs sur les touches du clavier : Ecouteurs sur les touches du clavier var self = this; Canvas. Input.keyUp(Input-Right, function() { self.player.moveC lear (); J] Animation et autres’ codes D Canvas. Input.keyUp(Input-Left, function() { self. player.moveClear (); Animation et autres code: Ds Les fonctions appellent notre méthode précédemment créée. Décélération La vitesse diminue quand le joueur reliche la touche correspondant i la direction. Cela signifie que le mouvement doit tout de méme continuer sur une courte durée. Comme pour Paccélération, nous devons initialiser une propriété ¢, facteur multiplicatif de la vitesse de élément, Initalisation de la propriété d Class.create("Gane Player", { a: 0, // Accélération 3 dz 1, // Décélération 8 dece dir: false, z Di cJeux multijoueurs et sociaux en HTMLS et JavaScript La valeur initiale est 1 car elle décroitra pour diminuer la vitesse, Une autre propriété annonce la direction de la décélération en cours. Elle vaudra right pour la droite, \e*t pour la gauche ou le booléen #2) se si aucune décélération est en cours, Ajoutons dans le modéle la méthode éecelerationlpdate : Gestion de la décélération decelerationUpdate: function() { var dir = this.dece_dirs if (dir) { this.d -= .05; if (this.d <0) { this.d = 0; this.dece dir = false; } var speed = this.speed * this.d; switch (dir) { case "Left" this.x break; case "right" this.x $= speed; break; = speed; 3 } return this.x; , Cette méthode est appelée en boucle dans le rendu de la scéne pour vérifier si une décélération est en cours. Si cest le cas, nous récupérons la direction et appliquons de nouvelles positions au joueur. La propriété « fonctionne de la méme maniére que l’accélération mais avec une décré- mentation. Arrivés a la valeur 0, nous indiquons que la décélération est terminée en redonnant le booléen fs1se A la propriété dece dir. ‘Nous ajoutons un modificateur pour la direction de Vaccélération : Modificateur dela direction function(dir) { dirs setDeceleratio ‘this.dece_dir } Dans la méthode rencer de la scéne, nous appliquons le calcul effectué a I’élément repré- 9 sentant le joueur : 20: | this.el.x = this.player.decelerationupdate(); Copyright €Concevoir le Gameplay a Cuapirre 5 Nous avons déclaré au début de la section que la décélération a lieu quand le joueur reliche Ia touche. Nous devons ajouter des écouteurs sur les touches en question pour changer la valeur de la direction de la décélération et ainsi fuire tourner la méthode decelerationladate créée plus haut : ‘Affectation de la décélération lorsque la touche est relachée var self = this canvas. Input.keyUp(Input-Right, function() { self. player.moveClear (); self player setDeceleration(*right"); ]/ Animation et autres codes Ds canvas. Input. keyUp(Input Left, function() { self.player.moveclear (); self.player-setDeceleration("Left") ; // Animation et autres codes Ds ‘Nous avons gardé la méthode move! ear pour réinitialiser aussi la propriété ¢ du modele = Reinitialisations des facteurs moveClear: function() { this.a = 03 // Accélération this.d = 1} // DécéLération t Gravité pour le saut La gravité est souvent utilisée dans un jeu de plate-forme : elle tire le héros vers le bas de écran tant qu’aucune plate-forme nest sur son chemin. Le joueur peut ainsi sauter de plate-forme en plate-forme en appuyant sur une touche du ciavier. Figure 5-6 Saut et aravité dans Super Mario World © 201 6Jeux multijoueurs et sociaux en HTMLS et JavaScript ‘Vous devez retenir que le personnage dirige a plusieurs état + en contact avec une plate-forme; + en train de sauter; + en train de tomber. Ces états permettent de bloquer certaines actions ou d’en autoriser d'autres. Trois régles Sappliquent : 1 Le saut n'est possible que si le héros est au contact d’une plate-forme. 2 Sile héros tombe, il ne peut pas sauter. 3 Le héros ne tombe pas ii cause de la gravité sil est en train de sauter. ‘Nous utiliserons Vextrémité basse du canvas pour les collisions et arréter la gravité, ialisation Intialistion des proprités pour la gravité et le saut Class.create("Game_ Player", { velocity: 1 ‘Trois propriétés définissent la gravité, état du joueur et le saut : + currentState est un identifiant désignant l'état courant du joueur : ~ platform: au contact avec une plate-forme; jumping : en train de sauter — sodown : en train de tomber. — gravity est un objet indiquant la puis dans une direction) pour la gravité, + _iunp est identiqui sance du saut et un facteur de vélocité (vitesse la gravité mais pour le sautConcevoir le Gameplay Cuairne 5 uA Gravité La méthode gravitylipdate que nous allons créer permet de faire tomber le personnage avec une vitesse ralentie progressivement jusqu’a ce qu’il atteigne le bas de l'écran et, bien str, s'il n'est pas en train de sauter : Application de la gravité gravityUpdate: function() { $f (this.currentState != "junping") { if (this.y + this.height + this.speed <= this.map_height) { this. gravity.velocity += .055 if (this._gravity.velocity 1 { this. _gravity.velocity 3 this.y += (this. gravity.power * this. gravity. velocity); 3 else { this.currentstate = "platfora’ this. gravity.velocity = 9; Fee return thi! 3 La premiére condition teste l'état du joueur (régle 3) et la deuxidme vérifie s'il ya colli- sion, Les propriétés heisht (hauteur du personnage) et speed (vitesse) sont utilisées dans ‘cot exemple. Ainsi, on peut tester la prochaine position Y du coin inférieur gauche de l’élément. Si clle ne dépasse pas le bas du niveau, nous appliquons une accélération (voir la section précédente) sur la propriété y. Dans le cas contraire, cest-a-dire lorsque In prochaine position Y touche le bas du niveau, nous changcons I’état du joucur et réinitialisons a 0 la valeur de la propriété velocity. Dans la méthode render de la scene, nous appelons constamment gravitylipdate pour appliqucr la gravité a n’importe quel moment : ‘Changement de la position Y selon la gravité $ this.player.y = this.player.gravityundate(); Saut a Pour le saut, le processus est le contraire de la gravité : on diminue la valeur de la posi- e tion Y avec une vitesse accélérée. Dans le modéle, on ajoute 6Jeux multijoueurs et sociaux en HTMLS et JavaScript Application du saut jumpUpdate: function() { if (this.currentstate this._junp.velocity -= . ‘if (this.junp.velocity <= 0) { this._junp.velocity = 1; this.currentState = "godown; "jumping") { 25 t else { this.y -= this._jump.power * this. junp.velocity; } + return this.y5 } La premiére condition vérifie que le joueur est en train de sauter pour éviter de sauter lorsqu’il tombe (régle 2). Une accélération est alors effectuée (voir section précédente). Lorsque le personnage arrive au sommet de son saut, le statut devient sodown pour que Ja gravite rentre en jeu. La méthode junplpdate est appelée 4 Venfoncement d'une touche, dans la méthode ren- der de la scéne : Faire sauter sla touche Haut est enfoncée if (canvas. Input. isPressed(Input.Up)) { this.player. junpUpdate(); } Cependant, la méthode fonctionne seulement lorsque I’état du personnage est jumping. Nous devons changer I’état 4 'enfoncement de la touche ainsi qu’a son relichement. Dans le modéle, on ajoute : Changer état du saut jump: function(state) { if (state && this.currentstate this.currentState = "jumping! y else if (state && this.currentState == "junping") { this._jump.velocity = 1; this.currentState y "platforn") { "godown"; , La parametre state est un booléen, S'il vaut true, cela signifie qu'un saut est déclenché. Dans le cas contraire, le personnage doit retomber. La premiére condition permet de respecter la régle 1. Le personnage peut sauter seule- ‘ment sil est sur une plate-forme. 6olles. Ey ht © 201 Copyr Concevoir le Gameplay Cuapirne 5 La deuxiéme condition indique au personnage de retomber en cours de saut. Cela per~ met d’établir une intensité sur le saut selon la durée d’appui sur la touche, Dans la méthode reacy de la scéne, nous ajoutons deux écouteurs pour changer l'état du personage : Ecouteurs sur fa touche Haut var self = this; canvas. Input. press(Input.Up, function() { self.player.jump(true) ; JJ Animation et autres codes Ds canvas. Input. keyUp(Input Up, function() { self player. jump( false) ; // Animation et autres codes ps 79*sajjosAa €TOz @ aYyBuAdo>,Copyright 6 Avancer le joueur avec des défilements Le défilement du décor donne Villusion que le personnage contrOlé avance sur la carte ou le niveau. Une carte ou un niveau peut dépasser la taille de l’écran, Dans ce cas, lorsque le joueur bouge, il risque de sortir de I’écran et le joueur ne pourra plus le controler. Crest donc la carte qu'il faut faire défiler en arriére-plan pour donner I'illusion que le personnage se déplace. On nomme cette procédure scrolling, On a cou- tume de distinguer défilement classique et defilement différentiel.6 multijoueurs et sociaux en HTMLS et JavaScript Défilement classique Le décor se déplace i la méme vitesse que le joucur, CanvasEngine propose la classe sero} ling pour gérer le défilement. Définir les éléments a déplacer ‘Tout d’abord, nous ajoutons la classe lors de Vinitialisation du convas = Ajout du Scrolling var canvas E defines ("canvas"). extend (Scrolling). ready(function(ctx) { Ds Dans la méthode ready de la scéne, nous ajoutons le défilement en spécifiant trois parametres : + la scéne; + Ia largeur du carreau en pixel; + In hauteur du carreau en pixel. Définir un nouveau Scroling var WTILE = 32, HOTILE = 32; this.scrolling = canvas.ScroULing.new(this, W_TILE, HTILE); Lobjet sero} ling est une instance de la classe accessible depuis la méthode render. Pour Ie moment, définissons I'élément principal qui reste centré lorsqu'il bouge (générale- ment, cest le personnage principal) : Ajout du héros var player = this.createElenent(); this.scrolling.setMainELement (player) ; Nous procédons de la méme maniére pour ajouter avec la méthode sddSero1| les élé- ments du décor, qui doivent défiler dans le sens contraire & celui du héros. ‘Ajout du décor var map = this.createElement(); var scroll_map = this.scrolling-addScroll ({ elenent: nap, // Velément créé représentant le décor speed: 3, // la vitesse du défilenent en pixels lock: true, // Vélenent ne défile plus quand les extrémités \ touchent le bord du canvasAvancer le joueur avec des défilements. (CHapirae 6 width: 129, J largeur du niveau en pixels height: 59 J hauteur du niveau en pixels Ds Rafraichissement du déplacement Dans la méthode render de la scéne, ajoutons Ia ligne suivante : ‘Mise & jour du Scrolting this.scroLling.update() ; Le déplacement de la carte est désormais opérationnel! Défilement différentiel Le défilement différenticl est une technique pour accentuer une sensation de profondeur sur les arriére-plans. II consiste a diminuer la vitesse de défilement par rapport 2 celle du personage. Figure 6-41 Défilement différentie! dans Angry Birds Sur la figure, nous distinguons Varriére plan (1) et le premier plan (3) avec les Sprites (2). Etablir un défilement différentiel sur un arriére-plan var WILE = 32 HOTILE = 32; var background = this.createElenent(); background. dranTmage ("background"); stage.append( background) ; this.scroLLing = canvas.Scrolling.new(this, W_TILE , H_TILE ); this.scroLLing. setMainElenent (player) ; 2 this.scroLLing.addScroll({ 5 speed: 1, CopyJeux multijoueurs et sociaux en HTMLS et JavaScript element: background, block: true, parallax: true, width: 120, height: 58 ns Le principe de la déclaration ne change guére. La propriété paral lax indique a l’élément de se déplacer sans se soucier du centrage du personnage. Remarquez que la vitesse défi- nie dans la propriété speed est plus faible que le défilement dans la section précédente. © 2017 Interaction avec les objets Comment faire interagir le personnage avec les éléments du décor (collisions, déclenchement d'actions) ? Un décor peut bloquer le mouvement, déclencher un passage ou faire perdre le joueur. Tout dépend du type de jeu. Dans un jeu d’arcade ot le joueur doit avan- cer de gauche a droite dans un niveau et éviter les murs, Ia collision est fatale. Dans un RPG, siun coffre est présent sur la carte, interaction se fait seulement a Vappui d’une touche et le héros gagnera sirement un objet pour continuer son aventure. 3 Eyroll 01Ea Jeux multijoueurs et sociaux en HTMLS et JavaScript Voyons comment réaliser, de fagon basique et précise, des collisions, des interactions avec le décor et selon une action de la part du joueur. Collision Une collision est un contact entre deux éléments. Dans un jeu, cest particuligrement le joueur qui rentre en collision avec le décor, ce qui arréte son mouvement. Dans la gestion des collisions, nous allons séparer notre code en trois parties : + Ia scéne qui insére la carte, ajoute les Sprites et déclare les entités dans le modéle; + les Sprites qui gérent seulement Vaffichage + le modele Gone Map qui teste Ia praticabilité entre les positions du joueur et les entités. Bone pranique appelez-vous que cette facon de procéder ameliore la structure de votre code, mais aussi une com- patibilté future du mutijoueur. Le personnage a une zone d'interaction nommée Hitbox. Généralement, cette derniere cest un rectangle placé sur la surface du Sprite Figure 7-1 Hitbox sur un personage Dans la pratique, est les quatre sommets du rectangle qui nous servent pour calculer les collisions et les interactions. Les positions X, et Y, du héros correspondent au point (1). Les autres points se calculent Taide des dimensions du personnage * Point (2) : Position X. + Point 3): + Point (4): Position Y, = Position Y, + Hauteur “sition X, + Largeur sition X, = Position X,+ Largeur et Position Y, = Position Y, + Hauteur Admettons que les propriétés se nomment with pour la largeur et hei ont pour la hau- teur, la classe Game Player se résume Classe Game_Playersimplifée Class.create("Gane Player", { speed: 4, 2 Meight™, height: 32, width : 32,Interaction avec les objets Lg CHapirae 7 mitialize: function(x, y) { this.x = x5 this.y = y5 Ds La classe nlest pas compléte car les mouvements et autres données sont ajouter. Pour le mouvement, reportez-vous au chapitre 5. Nous allons ajouter une condition de pratica- bilité dans la méthode nove. Au bord de la carte Le schéma de données (chapitre 3) détermine les bords du niveau. C'est principalement le modele Gane_ ap qui teste si le joueur arrive au bord de la carte : La classe Game_Map pour tester la praticabilté Class.create("Game_Map", { map: null, initialize: function(nap) { this.map = map; ‘sPassable: function(player, nenw.x, nen_y) { if (newx <6 (new_x + player.width) > this.map.getWidthPixel()) { return false; } Ds Dans la gestion des collisions, nous devons tester la prochaine position du héros. Si elle est impraticable, le calcul effectué sur le mouvement rest pas altéré, Dans le cas contraire, le héros bouge normalement. La propriété nap est un objet comportant les informations de la carte. Voyons comment bloquer le mouvement du joucur. Nous vérifions les bords gauche et droite de la carte par rapport aux points (1) et (2). La classe Game_Plaer avec la méthode du mouvement Class.create("Gane Player", 4 speed: 4, x: 8, yi 8, dirs Wright", 9 height: 32, 8 width: 32, ; nmap: null, ¢ initialize: function(x, y, map) { z this.x = x3 : thissy = y5 cCopyright © 2013 Eyrolles. Jeux multijoueurs et sociaux en HTMLS et JavaScript ‘this.map = map; function(dir) { this.dir = dir, x = this.x; switeh (dir) { case "Left": x += this.speed; } if (this.nap.isPassable(this, x, this.y)) { this.x = x5 3 return this.x; i Ys Si nous reprenons Ia classe Gane Player du chapitre 5, le personnage bouge selon une vitesse, Maintenant cependant, la variable x avec la nouvelle valeur sera attribuée a la propriété x sculement sila prochaine destination est praticable, La scéne utilise la classe TiTed pour récupérer plusieurs informations surla carte : La scéne déctarant es modéles canvas. Scene.new( { name: "Map" , materials: { ‘images: { player: "player.png", tileset: "tileset.png” 1 function(stage) { var self = this; var tiled = canvas.Tiled.new() ; tiled.load(this, stage, "map/map. json"); tiled. ready(function() { var tile. = this.getTilewidth() tile_h = this.getTileHeight(); self.gane_map = Class.new("Gane_Map", [this]); self.gane_player = Class.new("Gane Player", [8 * tile.w, 12 * w tileh, self.game_mapj); + render: t function(stage) {Interaction avec les objets (CHapirae 7 Sur le décor et les objets Au chapitre 3 sur le Level Design, nous avons vu que les carreaux ainsi que les Sprites possédent des propriétés comme la superposition et la praticabilité. Cette derniére nous intéresse justement pour bloquer le mouvement du personage. Collision sur le décor Tout d’abord, reprenez I'éditeur passable sur un carreau. -d Map Editor et ajoutez une propriété nommée 1 Cliquez-droit sur le carreau et choisissez Propristés des Tiles. Figure 7-2 Affecter des propriétes aa 2 Cliquez. sur . Rentrez passable pour le nom et 0 comme valeur pour indiquer que le carreau est impraticable. Propriété passable sur le carreau Il suffit maintenant de modifier la méthode ‘sPassable dans les codes précédents : Test de la praticablité sur les carreaux 4 Class.create("Game_Map", { nap: null, initialize: function(map) { this.map = map; dy ‘sPassable: function(player, new_x, new_y) { var ent, self = this; if (new_x <6 && (new_x + player.width) > this.map.getwidthPixel()) { | return false;En Jeux multijoueurs et sociaux en HTMLS et JavaScript 3 var tilew tilelh this. map. getTilewidth() , this. map. getTileHeight(); function pointIsPassablelnTile(x, y) ( @ var nap_x = Math. floor(x / tilew), @ nap_y = Math.floor(y J tile_h); @ var props = seLf.map.getTileProperties(null, map_x, map_y); @ for (var i= ; 4 < props.length ; i++) { @ if (props[i] && props[ 4] passable return false; } } return trues 3 if (IpointIsPassableInTile(new_x, new_y) && !pointIsPassableInTile(new_x + player.width, new_y) && IpointIsPassableInTile(new_x, new_y + player-height) && tpointIsPassableInTile(new_x + player.width, new_y + player. w height)) ¢ 3 return true; return false; @ ys Les quatre points du Sprite nécessitent un test. Si T'an deux ne satisfait pas les eritéres des conditions, nous renvoyons f21se pour indiquer au joueur que le carreau est imprati- cable @. La fonction privée permet de réaliser les différents tests & plusieurs reprises @. 1 Selon les positions du personnage en pixels, nous devons récupérer la position dans le tableau. La conversion reste enfantine : divisez. la position par la taille du carreau @. 2 La méthode getT/eProperties de la classe Ti1ed renvoie un tableau des différentes couches avec les propriétés du carreau selon les positions dans le tableau @. 3 Nous parcourons le tableau @ pour, dans un premier temps, verifier si ln donnée $ existe et, dans un deuxiéme temps, observer la praticabilité du carreau selon sa pro- priété passable @. Collision sur le décor selon une direction Dans plusieurs jeux, un carreau peut étre franchissable ou non selon la direction du personnage. Ainsi, si ce dernier se déplace vers la droite, il pourra traverser un carreau infranchissable dans la direction inverse.es. 3 Eyrol 201 Copyright © ‘Nous utilisons les combinaisons hexadécimales pour les tests des collisions selon une direction, Lintérét majeur est de n’écrire qu'une seule condition et, par conséquent, cléviter de multiples tests fastidiewx. Figure 7-4 Le personage peut ‘raverser la plate-forme seulement vers le haut (Super Mario World), ‘Chaque bit représente une direction. Interaction avec les objets ‘Tableau 7-1. Valeur hexadécimale des quatre directions Hexadécimal _Binaire Direction 1 0001 Haut 2 0010 Droite 4 0100 Bas 8 1000 Gauche (CHapirae 7 On affecte au carreau une valeur hexadécimale cumulant les directions autorisées. Tableau 7-2. Exemples de valeurs hexadécimales Yalow au Binal Direction(s) autorisée(s) 8 1000 Seulement sur la gauche c 1100 Sur la gauche et vers le bas F mn Les 4 directions Eh)EZ Jeux multijoueurs et sociaux en HTMLS et JavaScript Le code pour tester la praticabilité change un peu dans la fonetion privée : Test des directions avec 'hexadécimal function pointIsPassablelaTile(x, y) { var map_x = Math.floor(x / tilew), map_y = Math. floor(y / tile_h); var dir_hexa = 0x0; switch (player.dir) { case "left": dir_hexa = 9x8; @ break case "right": dir-hexa break 5 @ } var props = self.map.getTileProperties(null, map_x, map_y); for (var 4:0 ; 1 < props.length ; it+) { if (props[i] && (parseInt(props[i].passable, 16) & dir_hexa) dirhexa) £@ return false; } } return true; } Selon la direction du joueur (deux seulement sont représentées ici @), nous indiquons la valeur hexadécimale correspondante. La condition binaire vérifie si le bit de la direction cst présent dans la valeur du carreau @. Rape Hexadécimal et condition binaire LLhexadécimal est un systéme de numerotaion sur une base 16 utilisant les « citfres » suivants: 0, 1, 2,8,4,5,6,7,8,9, A,B,C, D, EF. Ainsile nombre 10 en base 10 est égal & A en base 16. En Javascript, les nombres sont préfixs de 0x pour indiquer la base. Lintérétcutiiser une base dune puissance de 2 est de manier les combinaisons binaires plus facle- ment (base 2) La condition binaire est représentée par les symboles & pour le « Et binaite » et | pourle « Ou binaire ». Dans notre cas, pour chaque bit, nous éalisons une multiplication pour avoir un résultat final : 4010 & 1100 est égal a 1000 1110 & 0011 est égal 8 0010 ‘Transformé en hexadécimal OxA & OxC est égal 0x8 OxE & 0x3 est égal a x2 0132013 Eyrolles, Copyright Interaction avec les objets CHapirae 7 Collision sur des objets Contrairement au décor qui reste fixe, nous devons comparer les positions du héros & celles des objets présents sur la carte : Gestion de la collision sur une entité Class.create("Gane_Map", { entities: (1, jmitialize: function() { mn addintity: function(id, data) { var entity = Class.new("Game_Entity", [data.x, data.y, data.width, w= data-height]); this.entities.push(entity) ; return entity; h isPassable: function(player, nenx, new.y) { var ents || Test de la praticabilité du décor function pointIsPassable(ent, x, y) { $f (x >= ent.x Uk x < entx + ent.width && y >= ent.y && y <= ent.y + ent height) { return false; tt return true; } for (var 4=0 ; i ¢ this.entities.length ; i++) { ent = this.entities[i]; if (pointIsPassable(ent, new.x, new_y) &&e ipointIsPassable(ent, nen_x + player.width, new_y) & IpointIsPassable(ent, new_x, new_y + player.height) && ipointIsPassable(ent, new_x + player.width, new_y + player > height) ( return false; + return true; } vs Les objets ou entités sont ajoutés avec Ia méthode addént ity dans la scéne. Pour la classe des entités, nous reprenons celle présentée au chapitre 5 sur les mouvements.Jeux multijoueurs et sociaux en HTMLS et JavaScript 6 Les tests des collisions ne ne sont pas trés différents de ceux pour le décor. Nous testons si un des 4 points du personnage est a l'intérieur de Ventité, Si cest le cas, nous ren- voyons la valeur fe)se pour empécher au joueur de bouger. Affichage des entités Définissons, pour lexemple, une classe Sprite_Coins pour afficher des pices dans le jeu. Classe pour Faffichage d'un Sprite Class.create("Sprite_Coins", { el: null, initialize: function(id, scene, layer, data) { this.id = id; @ this.el = scene.createElement (data.width, data-height); @ // Code this.setPosition(data.x, data.y); layer-append(this.el); @ hs setPosition: function(x, y) this.el.x = x; this.el.y } ns Le plus important est de créer un élément en lui attribuant une taille @. Ces para- métres nous serviront dans la gestion des collisions. Nvoubliez pas l’identifiant @. Il crée un lien entre les entités dans le modéle et l'afi- chage sur la scene car "identifiant est identique dans les deux classes Enfin, la couche (paramétre Tayer) est celle des objets au méme niveau que le héros du in. ‘Scéne ajoutant les Sprites dans le modéle canvas. Scene.new({ name: "Map", materials: { ‘images: { player: "player.png", tileset: "tileset.ong", coin: "coin. png", i h sprites: (J, addCoin: function(id, layer, data) < this.sprites[id] = ClasS.new("Sprite_coins", [id, this, layer, = data}; @ this.gane_map.addéntity(id, data); @ hy ready: function(stage) {Copyright © 2013 Eyrolles. Interaction avec les objets CHapirae 7 var self = this; var tiled = canvas.Tited.nen(); tiled.load(this, stage, "nap/nap.json") ; tiled.ready(function() £ var tile.w = this.getTilewidth(), tile_h = this.getTileHeight(), layer event; self.gane_nap = Class.new("Gane_Map", [this]); @ self.gane_player = Class.new("Gane Player", [8 * tile, 12 * w tileh, self.gane_nap]); @ self.player = self.createtlement(32, 32); self player .drawimage("player"); self.player.x = self. game player .x; self.player.y = self.gane_player.y; layer_event = this.getLayerObject(); self-addCoin(1, layer_event, { : 58, y? 258, width: 32, height: 32 D: Layer event. append(self.player) 5 ) render: function(stage) { / code d Ds La méthode ready reprend le Level Design du chapitre 3. Désormais, nous eréons une instance de la classe Gane_Mep @, décrite plus haut, injectée en troisiéme parametre du constructeur de la classe Gane Player @ (chapitre 5). La méthode sdécoin effectue deux créations : + un Sprite pour Paffichage ©; + un appel dans la classe cane sap pour eréer une entité ©. Dans les deux cas, l'identifiant ainsi que les positions sont identiques. Les entités Voici une classe trés simple qui ne fait qu’identifier la position et la taille d'une entité : Classe simple représentant les données d'une enti Class.create("Gane Entity", { x,Ea Jeux multijoueurs et sociaux en HTMLS et JavaScript yi 8) width: 0, height: 6, initialize: function(x, y, width, height) { this.x this.y this.width this.height = height; } ns Interaction interaction consiste a déclencher une action ou un événement au contact de I’élément. ‘Nous reprenons le systéme de collisions en ajoutant des fonctions a appeler pour affecter les Sprites sur la scéne. Figure 7-5 Animation lorsque Je poisson rentre en colision avec la piece Déclenchement automatique au contact ‘Nous aurons besoin d'une propriété qui indique si lentité est en contact ou non. Les fonctions sont exécutées selon les conditions suivantes : + sile joucur est en contact pour la premiére fois; + sile joueur nfest plus en contact (mais I’ été) Test de l'interaction des modéles Déclaration de fonctions des contacts Class.create("Gane_Entity", { speed: 1, x: 8 y: width: 6, height: 6, dir: "right", 201 ht © CopyrCopyright © 2013 Eyrolles. Interaction avec les objets CHapirae 7 chit: false, Ceall_hit: 0, initialize: function(x, y, width, height) { thi thisy = yj this.width = width; this.height = height; mn callit: function(on, off) { @ this._call_hit.on = on; this._call_hit.off = off; , init: function(val) { if (val && this, hit) (@ if (this.cail_hit.on) this. call_hit.on.call(this); } else if (ival && this. hit) { ‘if (this. call_hit.off) this._call_hit.off.call(this); } this. hit = val; h isHit: function() return this. hits } Ds La méthode coT1tiit @ attribue une fonction pour le contact et une autre lorsque ce contact est rompu. Ces fonctions seront déclenchées dans la méthode hit @. Si vo! vaut trve, autrement dit si un contact se produit, nous appelons la fonction seulement la pre~ miére fois @. La deuxiéme condition réagit de la maniére inverse. Reprenons la fonction privée point TsPossable dans la classe Gane Hop. ‘Appel des fonctions & interaction de Ventité function pointIsPassable(ent, x, y) { iF (x >= ent.x && x <= entx + ent.width && y >= ent.y && y < enty + ent.height) { ent.hit(true); @ return false; } ent.hit(false); @ return trues } Nous appelons la méthode hit de Ventité en signalant si Ie joueur est au contact ou non. 97En Jeux multijoueurs et sociaux en HTMLS et JavaScript Affichage de l'interaction Apres le calcul et la vérification des interactions, nous devons les afficher sur un élé- ment, Pour cela, reprenons la classe Sprite Coins, Affichage d'une animation au contact Class.create("Spritecoins", { el: null, ‘initialize: function(id, scene, layer, data) { this.el = scene.createElenent (data.width, data.height) ; this.el.setOriginPoint("middle") ; // Carré rouge pour le test this.el.fillstyle = "red"; this.el.fillRect(0, 0, data.width, data.height); i this.setPosition(data.x, data.y); this.on = canvas.TineLine.new(this.el) -to({ scaleX: 1.2, scaleY: 1.2 }, 48, Ease.easeouttlastic); @ ‘this.off = canvas.Tineline.new(this.el) .to({ scaleX: 1, scaleY: 1 }, 48, Ease.easedutElastic); @ layer ‘append (this.el); hs setPosition: function(x, y) { this.el.x = x; thisvelyy = yj hb init: function(val) ( @ if (val) { this.on.call()5 } else { this.off call); } + Mm La classe contient un peu plus de code. Dans le constructeur, deux animations pour grossir le texte ont été insérées @ (voir chapitre 4), Enfin, Ia méthode hit applique Fanimation selon le type du contact @. Dans la méthode add¢oin de la scene, nous faisons la liaison entre le modele et le Sprite : olles. Ey ht © 201 CopyrCopyright © 2013 Eyrolles. Interaction avec les objets CHapirae 7 Déclenchement des animations adéCoin: function(id, layer, data) ( var coins = this.gane_nap.addéntity(id, data); var sprite = this.sprites[id] = Class.new("Sprite_coins", [id, this, layer, = data]); coins.callHit(function() { sprite.hit(true); @ function() { sprite.hit(false); @ ns } Des fonctions sont attribuées a Ventité, Leur déclenchement appelle la méthode hit du Sprite pour afficher l'animation ©, Selon une action Linteraction se déclenche cette fois-ci lorsqulune touche est enfoncée par le joucur. Le principe est identique & celui de l'interaction selon le contact du héros, du moins pour le modéle. Voici la modification sur la scéne : [Modification des méthodes dans la scéne sprites: (}, coins: (, addCoin: function(id, layer, data) { this.coins[id] = this.gane_map.addéntity(id, data); this. sprites[id] = Class.neu("Sprite_Coins", [id, this, layer, data]); }, pressCoins: function() { var self = this; canvas. Input.press(Input.Enter, function() { for (var id in self.coins) { if (self.coins[id] .ishit()) { seLf-sprites[id] .hit(true) 5 } y; ds ready: function(stage) { this.presscoins(); If Code2013 Eyro 6 allt} Jeux multijoueurs et sociaux en HTMLS et JavaScript La méthode ready déclare un événement du clavier une seule fois. Dans ce eas, il faut parcourir les différentes entités pour vérifier si un contact est présent. Si le test est posi- tif, nous appelons V'animation du Sprite grace a Pidentifiant.8 Mise en place des régles du jeu Sans régle, le joueur ne saurait comprendre le sens du jeu ni arriver aux objectifi j ij i demandes. Voyons comment intégrer les régles du jeu dans le code. 5 8 gles du j Les ragles du jeu servent & définir non seulement un but dans le parcours du gles du j P joueur A travers les différentes cartes ou niveaux, mais aussi la difficulté pour y parvenir. 6Pry !cux multijoueurs et sociaux en HTMLS et JavaScript existe de multiples régles de jeu. Dilleurs, ce sont les régles qui forment le concept. ‘Nous allons distinguer 4 régles courantes : + situation ir tiale du joueur; + application du scénario; + affichage du score; + partie gagnée ou perdue. Situation initiale du joueur On parle de Vinitialisation des données du joueur. Nous V'avons déja partiellement abor- dée dans les chapitres précédents (positions de départ, direction). Si nous reprenons le premier chapitre, nous remarquons que la description des types de jeu contient des paramétres spécifiques. Par exemple, le joueur dans un RPG posséde des points d’expé- rience, des niveaux, une attaque, une défense, des équipements, un inventaire, ete. Dans tous les cas, est le modele qui gere le joueur. Le modi avec les paramétres initiaux pour un RPG Class.create("Game Player", { speed: 3, die: "right", level: 1, hp: 6, hp_max: 100, attack: [0, 622, 684, 746, 807, 869, 939, 992, 1053, 1115, 1176], exp: [6, 0, 25, 65, 127, 215, 337, 499, 709, 974, 1302], tens: [], initialize: function(x, y) ¢ this = this.y =y3 this.hp = this.hp_max; ds SetLevel: function(level) { ‘this.level = level; 4 7 getattack: function(){ return this.attack[this. level]; } © Ds ny © 201 Les paramatres attack et exp sont des tableaux dont chaque élément représente une valeur correspondant au niveau du joueur. Par exemple, si le joueur est au niveau 5, il sera possible de récupérer la valeur de Pattaque pour ce niveau : pyright cMise en place des régles du jeu = Affectation du niveau 5 au joueur this.player = Class.new("Gane Player", (10, 16]);, this. player.setLevel (5); console. log(this.player .getattack()); Les positions (10;10) sont des données initiales importantes, Il faut définir en deux temps la carte ou Te niveau & charger, puis le placement du jouenr sur cette carte Inventaire Dans le code précédent, une propriété nommée itens est un tableau, vide & Vinitialisa- tion, qui contindra les objets récoltés par le joucur. Beaucoup de jeux ont unc notion d'inventaire. Prenons quelques exemples : + Point&Click : le joueur récupére des objets en les sélectionnant dans le décor. Les paramétres sont basiques car ils nlaltérent pas le héros. C’est sculement la possession de objet qui influencera le déroulement du scénario. ure 8-41 Exemple d'un inventaire (Runaway) + RPG : un objet posséde généralement un prix et des paramétres changeant les capa~ cités de base du héros. + Plate-forme : les objets changent Iétat du héros ou son score et permettent quelque- fois d’accéder & un nouveau niveat. Défniton dela classe Game_Item Class.create("Game_Iten", { id: 0, price: 8, description: "™, initialize: function(data) { this.id = data.id; this.price = data. price; this.description = data.description: this.name = data.name;Pryryg !cux multijoueurs et sociaux en HTMLS et JavaScript this.hp = data.hps hh use: function() { this.used++5 7 getinfo: function() { return { description: this.description, name: this.nane, price: this.price iF hb Gsused: function() { return this.used > 05 } Ds } La classe Gane_Iten informe le joueur de la description et du nom de Vobjet (pour V'affi- cher dans un menu) et précise si Vobjet a dgja été utilisé ou non, Le constructeur a un parametre désignant les données de Vobjet, lesquelles sont récupé- 60s d'une base de données ou directement inscrites dans la scene. Des propriétés comme price ajoutent une dimension financiére virtuelle pour concevoir des magasins ou des moyens de débloquer ces objets dans le jeu selon largent virtuel récolté. La propriété hp est un exemple d'une donnée pour Vobjet. Ici, si sa valeur vaut 5, on peut admettre que Vobjet va faire récupérer 5 points de vie au héros. Application du concept Affichage des points de vie Ajoutons les méthodes dans la classe Gane Player pour que le joueur puisse ajouter des objets dans son inventaire et les utiliser. : Diaprés notre concept — qui revient souvent dans les jeux — Ie personage gagne ou perd des points de vie. Ajout de méthodes dans la classe Game_Player a addtten: function(data) { @ g this. items.push(Gane_Tten(data)) 5 ¢ by 2 getlten: function(id) { 5 for (var 128 ; 1 < this.items.length ; i++) (@ 5 if (this items [1] id == id) { cCopyright © 2013 Eyrolles. Mise en place des régles du jeu CHapirne 8 alts) return this.itens[4]; ) > is uselten: function(id) { var iten = this.getitem(id) ; Hten.use()s if (iten.np) this.gainkP(iten.hp); @ }, BainkP: function(oum) { @ var hp = this.hp; hp += num; 4f (hp > this.hp_max) ¢@ hp = this.hp_max; return hp; h VostHP: function(num) { return this.gainHP(-nun) ; } 1 Lajout dobjet se fait avec Ia méthode eeciter @, qui ajoute un élément du type ane_tten dans le tableau, 2 Nous récupérons lobjet en parcourant ce tableau grice a son identifiant @. 3 Sifobjet posséde la propriété hp ©, nous appelons la méthode gaink? pour redonner des points de vie au héros @. 4 Nous vérifions si les points de vie gagnés ne dépassent pas le maximum déclaré dans la propriété np_nax ©. Pour donner une indication au joueur, nous devons aficher les points de vie du héros sur la scéne. Affichage d'une barre de vie sur la scene canvas. Scene. new({ name: "map", widthbar: 100, @ ready: function(stege) { var self = this; this.player = Class.new("Gane Player", (50, 50]); @ this.bar = this.createéLenent(); this.bar.fillstyle = "green"; ® this.bar.fillRect(0, 0, this.width.bar, 26);Pray Jcux multijoueurs et sociaux en HTMLS et JavaScript this.bar.strokestyle = "black"; @ this.bar.strokeRect(9, @, this.width_bar, 20); stage.append( this. bar); JJ Pour le test, Le joueur p u Va Vappui a touche Espace canvas. Input.keyDown(Input.Space, function() { @ seLf.refreshBar (self player. lostHP(18), self.player.hp_max); @ Ds hb refreshBar: function(hp, hpnax) { var width = hp * this.width_bar / hp_nax; @ this.bar.filtRect(®, 0, width, 20); hb render: function(stage) { stage.refresh(); 3 Ys Apres avoir créé une instance de la classe Gane Player @, nous concevons un rectangle avec une bordure noire @ et un fond vert @. Repeaon de I) la barre de vie La taille du fond vert changera selon le nombre de points de vie du joueur, Pour le ‘moment, nous décidons d'une taille fixe définie dans la propriété w\cth_bar @, qui sert & déterminer la nouvelle taille dans le rafraichissement de la barre @. ci, pour tester Ia perte de points de vie, nous avons simulé une diminution de la barre de vie lors de Pappui sur la touche Espace ©. Nous appelons la méthode lost? @ de la classe Gane Player, qui renvoie le nombre de points de vie possédés par le joueur. ‘A noren Méthode lostHP La méthode |ost#P sert & diminuer le nombre de points de vie. Nous I'avons définie pour faciliter la lecture du code car son nom est plus parlant que gainP(-~10).. Explication des régles au joueur Dans tous les jeux, il faut expliquer les régles au joueur. C'est lorsque ce dernier intro~ duit une nouveauté du Gameplay qu’elle lui est expliquée. pyright cMise en place des régles du jeu woes Cette démarche n'a rien de complexe. Nous affichons une boite de dialogue en mettant le jeu en pause. Figure 8-3 Boite de dialogue ‘Méthode couverture d'une boite de dialogue dans la scéne ‘openDialog: function(stage, msg) var canvas = this.getCanvas(), @ self = this, dialog = this.createElement(), text = this.createElenent(); dialog.drawinage("box"); dialog.x = _canvas.width / 2 @- dialog.ing.width / 2 @; dialog.y = _canvas.height - dialog. img-height - 10 text.font = ‘normal 15px Arial'; text.fillstyle = '#FFF'; text. FillText(msg, 2, 30); dialog.append(text); @ stage. append (dialog) ; this.pause = true; @ stage. refresh(); canvas. Input.keyPress(Input.Enter, function() { self.pause = false; @ dialog.renove(); @ = ns € } 2 Cette méthode erée un élément juste le temps d’afficher la boite de dialogue avec une g image en fond. Dailleurs, noubliez pas de charger cette image : Copyralt Jeux multijoueurs et sociaux en HTMLS et JavaScript Charger image de la botte de dialogue canvas. Scene.new({ name: "MyScene" nateriali ‘image: Pour centrer la boite de dialogue ct la placer en bas, nous prenons la largeur du canvas @ et nous centrons l’éément en Ie décalant de moitié vers la gauche @ par rapport au milieu du canvas @. Pour la hauteur, nous attribuons une marge de 10 pixels @. Un texte est affiché dans la boite de dialogue @ et nous mettons la propriété pause sur ‘rue @ pour bloquer le rendu et donner la sensation d’une pause. Quand le joucur appuie sur la touche Entrée, la pause est supprimée @ et la boite de dialogue effacée @. Bloquer le rendu avec la propriété pause render: function(stage) { if (this.pause) { returns } code stage.refresh(); } Sila propriété pause est sur true, nous empéchons le code qui suit de sexécuter en pla- sant retuen dans la condition. Affichage du score Le score est une indication de la performance du joueur. Dans les régles du jeu, on peut décider que le joueur doit atteindre un certain score pour étre autorisé 4 poursuivre son aventure, Dans un premier temps, initialisons dans méthode ready de la scéne, un élément qui correspond au score : Intialisation de élément score this.score = this.createELenent(); this.score.font = 'bold 24px Arial; this.score.fillstyle = "#898"; this.score.x = 103 this.score.y = 10;© 2013 Eyrolles. hit Copy! Mise en plat des ragles du jeu Ea Cuore 8 Mu stage.append(this.score) ; Llément est un texte noir de 24 pixels, I est affiché en haut & gauche de I’écran, Ajou- tons une méthode pour rafraichir le score Afichage du score GisplayScore: function(nunber) { this. score. FillText(nunber, 0, 190); } Aprés la création de I'élément, initialisons le score : Initalisaton du score this.displayScore(a) La méthode displayScore est done utilisée a chaque fois que Fon soubaite changer et afficher le nouveau score. Fin de partie : gagnée ou perdue Ty a mille et une fagons d’indiquer Ia victoire ou la défaite du joueur. Bien stir, Cest ig au type du jeu, Nous allons voir le principe avec quelques exemples. Dans la section précédente, nous avons vu comment afficher une barre de vie et un score, Dans la plupart des jeux, quand les points de vie tombent & 0, le joueur perd. Le joueur termine un parcours Dans un jeu d’arcade, un personnage peut se déplacer de la gauche vers Ia droite, en évitant des obstacles, pour terminer un parcours. Figure 8-4 Le poisson termine tun parcours,PPR Jeux multioueurs et sociaux en HTMLS et JavaScript ‘Nous devons vérifier, dans la méthode render de la scéne, la position du joueur par rap- port @ une valeur constante représentant lextrémité du parcours : Tester la fin dun parcours dans la méthode render var END_X = 5060; var canvas = this.getCanvas(); if (this.player.x >= END_X) { @ this.player.x += 10; @ if (this. player.x > _canvas.width) { canvas.Scene.call ("World"); @ return; } Ici, si la position X du joueur est supérieure a la constante (qui définit la position X de la fin du parcours) @, nous faisons sortir le joueur de I’écran @ pour changer de scéne ensuite @. Le joueur sort de ’écran vers le bas Dans quelques jeux de plates-formes, lorsque le personnage touche le bas de I'écran, le joueur perd et doit recommencer soit tout le niveau, soit i partir d'un endroit précis du Le principe est identique & la finition d'un parcours. Nous testons les positions du joueur pour déterminer s'il sort de I’écran vers le bas. Plus précisément, cest la position Y qui est concernée : Tester sie joueur sort de F'écran vers le bas dans la méthode render var canvas = this.getCanvas(); if (this.player.y >= _canvas.height) { console.log("Touche le bas de U*écran"); } pyright © 21 c2013 6 Ambiance du jeu Lambiance du jeu contribue beaucoup a la réussite de ce dernier auprés des joueurs; pensez a ajouter des sons, des musiques, mais aussi des effets graphiques. Les effets sonores ne sont pas indispensables pour le fonctionnement du jeu, le bon déroulement du scénario et la fluidité d'un Gameplay. Pourtant, ils agré- mentent considérablement Pambiance du jeu en accentuant une action, un suspense, etc. Les effets graphiques quant a eux évitent d/avoir des décors inchangés. Les effets de lumiére, V'assombrissement, le brouillard ou un flash ajoutent du cachet dans Yambiance du jeu.© 2013 Copyright Pp Jeux multijoueurs et sociaux en HTMLS et JavaScript Ajouter des effets sonores Deux solutions soffrent & nous pour la manipulation de Paudio. Nous utiliserons : + soit PAPI de base de HTMLS; + soit PAPI de SoundManager. Avant tout, eréons dans notre projet un dossier consacré au son et préchargeons-le au début de la scéne. Précharger le son au début de a scéne canvas. Scene.new({ name: "Map", materials: { sounds: { mymusic: "sounds/music.mp3", } Is ready: function(stage) { t Ys HTMLS Audio Une des particularités de HTMLS est de proposer un élément de type Audio, Trois for- mats peuvent étre lus : MP3, OGG et WAV. Toutefois, des disparités existent quant a leur compatibilité sur les différents navigateurs. Covrnainve Prise en charge audio par les navigateurs Il faudra passer par SoundManager pour gérer les formats en fonction des divers navigateurs. Tableau 9-1. Compatibilité des sons sur les navigateurs Navigateur MP3, oGG wav Internet Explorer 94 Oui Non Non Google Chrome ui oui oui Firefox 44 Non oui oui Safari $+ Oui Non Oui Opera 10.6+ Non oui Oui Cette | mn contraint : * soit avoir le méme son en format MP3 et OGG;Ambiance du jeu Ea Cuanrrae 9 Mle * soit utiliser Flash si le format n'est pas reconnu; + soit privilégier un navigateur (peu recommandé). Pour insérer la musique, utilisons la méthode get sur Vobjet Sound : Insertion de la musique par son identiiant var music = canvas.Sound.get("nymusic") ; LAPI de HTMLS Audio permet ensuite de jouer, stopper, etc. Jouer la musique music.play( Voici les différentes méthodes et propriétés disponibles Tableau 9-2. Propriétés de HTMLS Audio Propriete Explication volume Changer le volume. Valeur comprise en 0 et 1 currentTime Se positionner sur un temps (en secondes) buffered Récupare les temps intial et final du son. Exemple : sound. buffered. start(0): sound. buffered.end(0) paused Savoir sila lecture du son est en pause muted Savoir si le son est coupé duration Connaitre la durée du son (en secondes) Tableau 9-3. Méthodes de HTMLS Audio Méthodes Explication play) Joue le son paused Met en pause le son ¥ canPlayType() \Véfifie si le type du son est jouable. Exemple : sound, canP layType( ‘audio/mpeg"): SoundManager SoundManager a la particularité d'utiliser Flash si le navigateur ne reconnait pas le format.BPP Jeux multijoueurs et sociaux en HTMLS et JavaScript » httpy/wwwschillmania.com/projects/soundmanager2 Pour utiliser, cest trés simple. Insérez tout d’abord le dossier suf de SoundManager a Ja racine de votre jeu. Si vous souhaitez changer le chemin, définissez-le dans l'initiali- sation du canvas ‘Changer le chemin du dossier swt CE.defines("canvas", { 'swf_sound: ‘path/to/swf/" Ds Insérez le lien vers le Javascript : Insertion de SoundManager "ibs/soundnanager2.js"> /socket.i0/socket.i0.js"> @ Nous réalisons une connexion au serveur en indiquant Padresse IP et le port. © Nous réceptionnons les données de I’événement news.Utilisez Node.js pour votre jeu multijoueur en temps réel (Cuaprae 14 © Nous émettons des données vers le serveur. Fonctionnement dans CanvasEngine Vous avez le principe des événements avec Socket.io. Dans CanvasEnging, il faut dis- tinguer plusieurs parties : + scene; + vue; + modele, Dans les premiers chapitres, nous avons vu comment réaliser un jeu en séparant les dif {férentes parties sans pour autant en avoir réellement 'utilité. En fait, cela vous préparait A concevoir un jeu multijoucur. Les événements existent toujours sauf qu’ils sont camouflés par des classes, afin de pri- vilégicr la programmation orientée objet. Avant tout, installez le modéle de CanvasEngine qui fait une surcouche de Socket-io de facon a utiliser des classes plutdt quun systéme événementiel : Installation du module CanvasEngine pm install canvasengine ‘Vous avez désormais un fichier nommé server. js possédant le code suivant Code initial cité serveur var CE = require("canvasengine" @).Listen(9333); @ CE.odel.init("Main" @, { initialize: function() { } ns @ Nous importons le module cenvesengine. Il contient la déclaration des classes de type « modele » sur le serveur et plusicurs modules dont Socket.io. @ Lec jeu écoute les paquets sur le port 8333, y © Nous définissons la classe principale appelée lors de la connexion du joueur : son nom est Nain et la méthode {n‘tia1ize est son constructeur. 9 Définir les événements G Comment définir les événements dans notre classe? Nous ajoutons un paramétre décla- w rant les noms des événements correspondant aux méthodes de la classe :6 Pry Jeux multijoueurs et sociaux en HTMLS et JavaScript Définition un événementcbté serveur var CE = require("canvasengine") . Listen(8333) ; CE.Model.init("Main", ("start"), { initialize: function() { h Start: function() { this.scene.emit("Load", "Go 1"); } ys Voyons le code Javascript Complet edté client Définition ’un événement cbté cent var Wodel = 4o.conect( ‘http: //127.6.8.1:8333°)5 var canvas = CE.defines ("canvas") ready (function(ctx) { canvas .Scene.call("MaScene") ; Ds canvas. Scene.new( { "WaScene" , Model, events: ["load"], @ ready: function(stage) { this.model.emit ("start"); @ in Load: function(text) { console. log(text) ; } Mm Contrairement a un simple jeu, le modéle ne sert qu’ envoyer des données au serveur. Nous appelons la méthode start @, présente dans la classe Main définie dans le ser veur, De la méme maniére, des données sont envoyées i la scéne et la méthode load est appelée, Composer la structure du jeu CanvasEngine impose une structure permettant d/avoir un modéle c6té serveur et une scéne cote client. Cela ne signifie pas pour autant que votre jeu aura une structure bien fondée. 11 faut retenir que la scéne ne fait que récupérer des données du modele et les afficher sur le canvas. Ainsi, ne créez pas des classes possédant des propriétés inutiles pour la scene.Utilisez Node.js pour votre jeu multijoueur en temps réel : ES} Marae 14 Prenons un exemple. Vous soubaitez afficher un personnage sur une carte. Ce person~ nage est caractérisé par des positions X et Y, une direction, une apparence et un état (debout, marche, etc.) pour les animations. 1 Le modele calcule les positions du personnage. S'il se déplace, il appliquera état «marche » et sa direction. 2 Le modele envoie a la scéne (i.e. le serveur envoie au client) les valeurs des positions, de la direction et de ’état. 3 La scéne dispose d'une classe des Sprites pour afficher des images ou animations sur Vécran, Lors de la récupération des données, elle met & jour les éléments sur l’écran. lest inutile de stocker les parametres puisque le serveur posséde deja I'informa- tion; ils ne serviront qu’a mettre & jour les images, ‘Nous avons vu précédemment comment définir les événements d'une classe nommée vain, Cependant, estil logique d’insérer des méthodes pour le déplacement d'un joueus, le chargement d'une carte ou lenvoi d'un message, alors qu'il n'y a pas de lien entre ces actions? Non, ne mélangeons pas tout! Dans un jeu, il faut définir plusieurs classes pour xgérer les différentes parties de celui-ci. Ainsi, nous pouvons avoir + une classe pour la gestion des joueurs + une classe pour la gestion des objets sur le niveau ou la carte; + une classe pour la gestion des cartes; + ete. Nous allons eréer un module dans Node,js pour définir les classes de notre jeu. Créer des modules dans Node.js Nodejs charge des modules avec la fonction require. Le module est un fichier avec extension .js (fichier Javascript interprété), .json ou .node (extension de Node,js chargé avec open). Le chemin du fichier peut étre absolu (commengant par /) ou relatif (commengant par ./), Si aucun des deux symboles nlest indiqué, le module sera cherché dans le dossier node_nodues, Nodes comporte plusieurs modules compilés — décrits dans la documentation du site. Is sont définis dans le répertoire 1i9/ des sources du programme. Ces modules sont chargés grace a leur identifiant. Par exemple, require(«http») retourne le module HTTP méme s'il en existe déja un de méme nom. Créer un modéle Nous allons eréer une classe pour la gestion des cartes du jeu. Elle servira a charger une carte, obtenir des informations comme largeur ou hauteur, connaitre les propriétés des carreaux (identifiants, praticabilité), et. 6Brey Jeux multijoueurs et sociaux en HTMLS et JavaScript Créons a la racine un fichier nommé are ap..js et ajoutons-y les dépendances. Exporter un module exports.Class = function(Ce) { ub Point élémentaire & retenir, il faut utiliser Vobjet exports pour exporter une valeur du module, La variable fait partie du systéme de modules de Node,js. Ainsi, vous pourrez récupérer la fonction précédente de cette fagon : Récupération du module var GameMap = require(". /Game_ Map") .Class Pour le moment, restons dans le modéle. Le paramétre cE sert pour définir un nouveau modele. (Création du modéle exports.Class = function(Ce) { CE.Model.create( "Gane Map" @, ["load"] @, initialize: function’) {@ he load: function() { @ } }).attr_reader([ "nap_id" © Ds return CE.Nodel.new("Gane_Map"); h @ Le modeale est nommé sane. Nap. @ Nous définissons le tableau des noms des événements. © Nous eréons les méthodes (ainsi que le constructeur init a1 ze). @ Nous déclarons les attributs. Ici nap_i¢ est l'identifiant de la carte.Utilisez Node.js pour votre jeu multijoueur en temps réel ECE (Cuaprae 14 Reuanoue Les attributs Les attrbuts sont les propriétés de la classe. CanvasEngine inlogre leur décleration par lintermédiaire ‘des méthodes attr_accessor, attr_reader et attr_writer (noms inspirés du Ruby). Ces dernigres respectent le principe de encapsulation en définissant trois niveaux de visibilité: + attr_accessor :attribut accessible et modifiable; + attr_reader :attribut seulement accessibl ‘+ attr_writer :altrbut seulement modifiabl + Ces atiributs sont & rapprocher de get et set. Par exemple, une propriété nommée foo possede un accesseur : var val is. Foo. get()5 + etun modiicateur: Lins. Foosset(val) ; + Pat ailleurs, dans la classe elle-méme, on peut accéder& une propriété privée avec le préfixe _: his. of val Ici, quand la scéne appelle I’événement Joad, la méthode du méme nom de la classe Game Map est exécutée. Lintérét est de travailler dans cette classe et avec ses propri nous allons le déclarer dans la classe principale. Declaration du modéle dans la classe principale var CE = require("canvasengine") .Listen(8333) ; CE.Model.init("ain", { initialize: function() { ‘this.GameHap = require("./Game Map") .Class(CE) 5 Ds La méthode 1isten (en réalité, une surcouche de la méthode | sten de netp.ereateserver) écoute le port 8333, La méthode init appartient & la classe CE.Model et ajoute un écou- teur i l’événement connection de Socket.io. La variable c€ sert & importer le module du méme nom, que nous injectons dans les paramétres de notre classe Gane Nap . Nous effectuons deux actions en une ligne : 1 Importation du module, 2 Exécution de la fonction qui crée la classe pour Vaffecter & Vinstance Genelia. La variable GaneHap est une instance de la classe Hein, dont elle peut utiliser les méthodes. En revanche, si vous créez un second module (éane_Player par exemple) et souhaitez y utiliser les propriétés de Gane-Nop, cela sera impossible. Lastuce est de rendre ces variables communes a tous les modules. Nodejs propose une variable nommée lobe). C'est un objet disponible pour tous les modules. instance GaneMap sera transformée de la fagon suivante :pyright © 21 c Prey Jeux multijoueurs et sociaux en HTMLS et JavaScript Varlable globale global.Ganelap = require("./Gane_ Map") .Class(CE);, Base de données Nous allons stocker dans un fichier & part toutes les données fixes du programme. Nous utiliserons le format JSON comme pour les niveaux ou les cartes. ‘Schéma Formez une collection des objets de votre jeu : ‘Schéma des objets fe wim { "name": "Potion", “hols 5 "name": "Mega Potion", "hots 15 Les objets possédent trois propriétés : + id: Videntifiant pour récupérer les données dans le modéle; + nave : le nom pour Vaffichage; + hp : le nombre de points de vie que le joueur récupérera. De la méme maniére, voici comment les adversaires du jeu peuvent étre schématisé Schéma des adversaires { mi: "atk": 10, deft: 2)Utilisez Node.js pour votre jeu multijoueur en temps réel ra 163 Marae 14 Un adversaire posséde quatre propriétés “4 + identifiant comme pour les objets + atc rune valeur d’attaques + def rune valeur de défense + np tle nombre maximal de points de vie. Les propriétés sont utilisées pour les caleuls. Dans les deux exemples, les données sont séparées. Nous allons les fusionner dans un seul fichier JSON : Ensemble des schémas: { "items": { //Données des objets "ennemies": { Données des adversaires Données dans le modéle Les données sont stockées dans Date/Detebase. json, Pour les obtenir, seulement en lec~ ture, nous utilisons la méthode habituelle getJ50N. Afectation de la base de données a une variable globale global. CE. get3S0N("Data/Database. json", function(data) { global.data = data; bs Dera getJSON été serveur La méthode gotJS0N réalise une requéte Ajax. Copendant, cété serveur, elle utiisara le syst8me de fichiers de Nodes. Lecture des données for (var id in global.data.itens) { 2 console. Log(global data. itens(id})5 8 1 2 Bicn sar, il est recommandé de regrouper dans unc classe les méthodes de gestion des S données. Créez un fichier Gane_!ters pour un nouveau module.Copyright © 2013 Eyrolles. a3 Jeux multijoueurs et sociaux en HTMLS et JavaScript Création du modele pour la gestion des objets du jeu exports.Class = function(Ce) { CE.Model .create("Gane_Items", { initialize: function() { this.itens = global data. itens; b get: function(id) { return this.itens[id]; } Ds return CE.Nodel.new("Gane_Itens"); Gérer les connexions et déconnexions Pour se connecter au serveur, le modéle affecté la scéne est tout simplement Socket io: Connexion au serveur var model = io.connect(*http: //1P:8333") ; canvas. Scene.new({ ane: "Scene", nodel: model, ready: function(stage) { } Ms Lorsque nous faisons référence au modéle dans Ia scéne, nous appelons en réalité les méthodes de Socket.io. Pour intercepter la connexion établie, ajoutez un événement nommé connect : Evénement dans la scéne canvas. Scene.new({ "Scene", + [connect], model: model, ready: function(stage) { ts connect: function() { + ysUtilisez Node.js pour votre jeu multijoueur en temps réel : 65 Marae 14 Deval. Autre méthode Pour savoir slejoueur est connecté, vous pouver aus user la méthode tradtionnelle de Socket.o : this.nodel.on("connect™, function() { 11 Code Ds ‘Coté serveur, la connexion est captée dans l'initialisation de la classe principale. Cette dernigre possede une méthode éisconnact qui sexécute dés que le joueur se déconnecte. Déconnexion cté serveur var CE = require("canvasengine") . Listen(8333) ; CE.Model.init("Main", { ‘initialize: function() { / Connexion du joueu disconnect: function() { / Déconnexion du joueur. Appel de la sc this.scene.disconnect() ; ns Sur la scéne, c6té client, la déconnexion se déroule de la méme maniére que la connexion. ‘Nous ajoutons un événement nommé disconnect. Déconnexion cté client canvas. Scene. new( { ane: "Scene", events: nodel: model, ready: function(stage) { 4 connect: function() { ), disconnect: function() { 4 ) Ds 3 Données communes C Lorsque le joueur se connecte au jeu, des données peuvent dé étre présentes. Les z données sont done communes et gardées en mémoire sur le serveur. La procédure est cPrey Jeux multijoueurs et sociaux en HTMLS et JavaScript extrémement simple : il suffit de créer des variables globales et de les lire dans la classe contenant les données communes. var users = []; var CE = require("canvasengine") . Listen (8333) ; CEModel.init("Main", { initialize: function() { h addUser: function(data) { users.push(data}; // data : {nam "Non", pseudo: "pseudo"} ty getUsers: function() { ‘this.scene.emit("users", users); } ys La variable globale users est un tableau contenant tous les utilisateurs connectés. Les éléments sont des objets ((nane: slow, pseuce: , La réception dans la scéne ne change pas. Sauvegarde et chargement avec Mongoose Installation de MongoDB et Mongoose Mongoose est un module de Node js basé sur le gestionnaire de bases de données Mon- goDB. Ce dernier est un systéme de stockage orienté documents n’utilisant pas le SQL. Dans un premier temps, installez MongoDB : 1 Allez sur hitp:/mww.mongodb.orgidownloads pour télécharger les paquets ou taper. la ligne suivante sur Linux : sudo opt-get instoT! mongodb-10gen 2 Démarrez MongoDB : sudo /ete/init.a/mongodb start 6© 2 pyright Utilisez Node.js pour votre jeu multijoueur en temps réel : 69 Marae 14 \Winoows Démarrer MongoDB ‘Sur Windows, ouvtez invite de command ‘commande cc. ‘Tapez iongo pour démarrer le service, En cas de probleme, tapez nongod pour avoir un retour de ‘échec. Ilse peut que MongoDB vous demande de créer les dossiers dat.a/db ala racine du disque. 3t accédez au dossier bin du fichier téléchargé avec la Ensuite, installez le module Mongoose : Installation de Mongoose pm install mongoose Connexion a la base et schéma ‘Nous importons le module dans notre projet (c6té serveur) et établissons une connexion : Connexion la base de données var mongoose = require(‘mongoose’) db = mongoose.createConnection(‘Localhost’, ‘test’); Nous créons un objet cb qui effectue la connexion sur la base de données tast et tourne sur le serveur Jocatrost, Pour définir les entrées, nous ini isons un schéma : Création du schéma var schena = mongoose.Schena({ name: ‘string? }); var User = do.model(‘User?, schema) ; Notre schéma portera seulement le nom de l'utilisateur compilé dans le modele User pour effectuer des requétes. Sauvegarder des données Les données sont ensuite sauvegardées en utilisant la méthode sove. Si des erreurs sur- gissent, traitez-les dans la condition. Insertion une donnée var data = new User({ name: ‘San’ }); data.save( function (err) { if (err) { y Ds Pour mettre a jour les données, utilisez la méthode update.Per Jeux multijoueurs et sociaux en HTMLS et JavaScript Mise a jour d'une donnée Usersupdate({ nane : ‘Sam’} @, {nane: "Jin") if (err) { throw err; } ” , function (err) © { Les paramétres sont les suivants : * O condition; + @lamise a jour; * © fonction de rappel. Chargement Pour charger, il faut reprendre le modele eréé (composé du schéma). Ensuite, appliquez a méthode find + Recherche dune donnée User.find({nane: /San/i}, null, function (err, data) { console. log(data); // object Ds Le premier paramétre cherche le nom « Sam » dans le champ nane. La fonction de rappel récupére les erreurs mais surtout les données renvoyées sous la forme d’un objet. Le deuxiéme paramétre indique les champs & rechercher. C’est une chaine de caracteres lt les champs sont séparés d'un espace. Par exemple, imaginons que nous avons le champ friends dans le schéma du modéle Rercherche d’une donnée dans plusieurs champs User.find({name: /Sam/i}, ‘name friends’, function (err, data) { console. log(data); // object Di Ici, le nom sera recherché dans les champs nane et friends Expression nécuuitne Les drapeaux Une expression réguliére dans Javascript est comprise entre deux barres obliques et peut se terminer o par un drapeau aprés la demiére barre oblique : ‘+g : Rechercher global (sur plusieurs lignes) @ + 1 tlgnorer la casse typographique 3 + 1: Trait les caractees du debut a afin (Set §) sur plusiours lignes délimitées par \n ou \rCopyright © 2013 Eyrolles. 15 Intégration du jeu a un réseau social : Facebook Intégrer un jeu un réseau social nécessite une authentification et une autorisa~ tion de Papplication. Ce chapitre explique cette procédure sur le réseau social le plus connu : Facebook.Copyr Ber Jeux multijoueurs et sociaux en HTMLS et JavaScript Déclaration du jeu dans Facebook loevrié Nest pas développeur Facebook qui veut. Sic'est la premisre fois que vous déclarez une application sur Facebook, il vous faut dabord confirmer votre identite avec un telephone portable (en rentrant le code que Facebook vous envoie par SMS) ou par lintermédiaire dun numéro de carte de orédit. Avant toute procédure, il faut déclarer la nouvelle application dans Facebook pour uti- liser les fonctionnalités : 1 Allez sur lien http://developers facebook.com/apps. 2 Cliquez. sur le bouton Créer une application. Une fenétre apparait : Figure 15-1 Créer une nouvelle application dans Facebook Tableau 15-1. Explications des champs. Champ Explication ] Nom de Fapplication Nom qui apparaitra dans la recherche, les favors et autres ‘App Namespace Identifiant qui s‘affichera dans I'URL de la maniére suivante : apps facebook. com/mysocialgaming ‘Web Hosting Si vous souhaite2 faire héberger votre application. Laissez décoché. Figure 15-2 Informations supplémentaires sur fapplicationIntégration du jeu un réseau soci Facebook Cuaprrne 15 Tableau 15-2. Explication des champs ‘champ Explication ‘App Domains Autoriser 'authentification sur un domaine ou sous domaine Catégorie Catégorie de votre application. ki, nous sélectionnons Jeux Hosting URL Espace web attribué (ignoré) Mode Baca Sable —__Activez-le pour vous assurer que les développeurs y ont acces lors de la programation. 5 Sélectionnez Application sur Facebook pour rentrer les liens vers le jeu : Figure 15-3 Liens vers le jew 6 Mettez le lien dans Mobile Web. A perenne + Les lions doivent se terminer par /sivous fits rélérence a une page index. + Lenom de domaine uiisé, App Domains, dot re présent dans les lens. 7 Cliquez. sur Enregistrer les modifications. Authentification et autorisation 4 Pour obtenir une autorisation, nous devons utiliser le SDK en PHP de Facebook. ‘Our. Télécharger le SDK en PHP de Facebook 9 ‘Teléchargez le ichler IP sur 3 > hitps:oithub.convfacebook/tacebook:php-sck 173Copyright © 2013 Eyrolles. are Jeux multijoueurs et sociaux en HTMLS et JavaScript Figure 15-4 - Téléchargement du SK tarebock/acebook-php-sck de Facebook sur Github sais . facedock-phpack Une page demandera V'autorisation de Vapplication dans Facebook, Créez done une page index.php dans un dossier externe aut jeu. Demande d'autorisaton 8 Facebook <2php require ‘src/facebook.php?; @ define(*APP_ID’, ‘386722191395435"); @ define(‘APP_SECRET’, ‘5e2c6440583743a47bde***** define(‘APP_NANESPACE?, ‘nysocialganing’); @ define(‘APP_URL', ‘http://apps.facebook.con/? . APP_NAMESPACE . ‘/°); @ $scope = ‘email,publish_actions’; @ $facebook = new Facebook(array( @ ‘appld? => APP_ID, ‘secret? => APP_SECRET, »s fuser = $facebook->getuser(); © if (1Suser) (© SloginUrl = $facebook->getLoginUrl(array( @ ‘scope? => $scope, Sredirect_uri! =>" APP_URL, Ys print(‘ top.Location.href=\"? . SloginUrl . *\’’); @ + Le dossier sre de Facebook SDK se trouve au méme endroit que cette page. + Nous Vimportons avec require @. 2 Nous créons quatre constantes : + aP_10 est lidentifiant de V'application @.