Résumé

Alors que les navigateurs sont en constante évolution pour optimiser l’exécution de jeux, HTML5 propose de nouvelles balises et API JavaScript pour gérer la vidéo et l’audio, dessiner en 2D et 3D. De quoi alimenter l’explosion du marché des jeux web, natifs et sociaux, notamment sur les smartphones et tablettes.

De la conception du gameplay à la configuration du serveur Node.js et MongoDB

Cet ouvrage, exemples de code à l’appui, décortique les étapes de création d’un jeu vidéo en HTML5 et JavaScript, de la réalisation d’un concept et de l’étude de la concurrence, à la commercialisation et à l’animation d’une communauté. Tous les aspects du développement sont abordés : conception du scénario et du gameplay, création des niveaux (level design) et des profils de joueurs, gestion de spritesheets, mise au point d’une ambiance, affichage de décors, effets graphiques, animations, collisions et effets sonores (HTML5 Audio)…

L’ouvrage guide également le lecteur dans le choix d’un framework, et la configuration d’un serveur pour du temps réel avec MongoDB et Node.js. Il explique enfin comment intégrer le jeu dans le réseau social Facebook.

Au sommaire

Mettre au point le concept du jeu • Action • Jeu de rôle • Aventure • Réflexion • Choisir un framework • Installer CanvasEngine • Créer l’écran titre • La scène • La barre de progression • Les boutons • Afficher les décors • Utiliser Tiled Map Editor • Les sprites • Animer les éléments sur l’écran • Animation en boucle • Réaction à une action • Concevoir le Gameplay • Plate-forme mobile • Contrôle du joueur avec un clavier, une manette • Accéléromètre • Accélération et décélération • Gravité • Saut • Mouvoir le joueur avec des défilements • Déplacements • Rafraîchissement • Interaction avec les objets • Mise en place des règles du jeu • Affichage du score • Ambiance • HTML5 Audio • SoundManager pour les effets sonores • Effet jour/nuit • Les adversaires • Affichage des dommages • Champ de vision • Réaliser la sauvegarde • Créer un jeu plate-forme • Initialisation et création des classes • Chargement du niveau • Création des animations • Défilement de la carte • Gestion des collisions • Mouvement • Configurer le serveur avec Node.js pour le multijoueur en temps réel • Utiliser le serveur via SSH • Télécharger Node.js. Installer NPM • MongoDB et Mongoose • Intégration du jeu au réseau social Facebook • Authentification et autorisation • Implémentation de la partie Social Gaming • Inviter des amis à jouer • Afficher un score et le partager sur le mur de l’utilisateur • Système de badges • Récupérer des informations pour les utiliser dans le jeu • Stratégie de monétisation • Monnaie virtuelle • Annexes • Rappels sur HTML5 Canvas • Dessiner • Lignes • Arcs • Chemins • Formes • Afficher un texte • Des couleurs • Des ombres • Frameworks JavaScript • Easel.js • RPG JS • Créer des jeux de rôle • 3D avec Three.js • Créer une scène • Ajouter un objet • Des sources de lumière • Rendu • Bouger la caméra avec la souris.

À qui s’adresse cet ouvrage ?

– Aux développeurs web, amateurs ou professionnels, mais initiés au langage JavaScript, qui souhaitent se lancer dans la création de jeux en HTML5 ;

– Aux agences web et de communication souhaitant se renseigner sur le potentiel des jeux communautaires.

Biographie auteur

Samuel Ronce

Spécialisé dans la création d’applications web et de jeux vidéo en JavaScript et HTML5, il est le fondateur de WebCreative5, société qui développe des moteurs de jeux vidéo Open Source en pur HTML5, compatibles avec les dernières technologies.

www.editions-eyrolles.com

Développer des

jeux

en HTML 5 & JavaScript

Multijoueur temps-réel avec Node.js et intégration dans Facebook

Samuel Ronce

ÉDITIONS EYROLLES

61, bd Saint-Germain

75240 Paris Cedex 05

www.editions-eyrolles.com

Remerciements à Romain Pouclet pour sa relecture ainsi qu’à Anne Bougnoux

Attention : la version originale de cet ebook est en couleur, lire ce livre numérique sur un support de lecture noir et blanc peut en réduire la pertinence et la compréhension.

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 l’Éditeur ou du Centre Français d’exploitation du droit de copie, 20, rue des Grands Augustins, 75006 Paris.

© Groupe Eyrolles, 2013, ISBN : 978-2-212-13531-2

DANS LA MÊME COLLECTION

R. RIMELÉ. – HTML 5. Une référence pour le développeur web.

N° 13638, à paraître en 2013, 644 pages (collection Blanche).

J. STARK. – Applications iPhone avec HTML, CSS et JavaScript. Conversions en natifs avec PhoneGap.

N° 12745, 2010, 190 pages (collection Blanche).

R. GOETTER. – CSS avancées. Vers HTML 5 et CSS 3.

N° 13405, 2e édition, 2012, 400 pages (collection Blanche).

E. SARRION. – jQuery Mobile. La bibliothèque JavaScript pour le Web mobile.

N° 13388, 2012, 610 pages.

J.-M. DEFRANCE. – Ajax, jQuery et PHP. 42 ateliers pour concevoir des applications web 2.0.

N° 13271, 3e édition, 2011, 482 pages (collection Blanche).

C. PORTENEUVE. – Bien développer pour le Web 2.0. Bonnes pratiques Ajax.

N° 12391, 2e édition, 2008, 674 pages (collection Blanche).

F. DAOUST, D. HAZAËL-MASSIEUX. – Relever le défi du Web mobile. Bonnes pratiques de conception et de développement.

N° 12828, 2011, 300 pages (collection Blanche).

E. DASPET, C. PIERRE DE GEYER. – PHP 5 avancé.

N° 13435, 6e édition, 2012, 900 pages environ (collection Blanche).

J. PAULI, G. PLESSIS, C. PIERRE DE GEYER. – Audit et optimisation LAMP.

N° 12800, 2012, 300 pages environ (collection Blanche).

P. BORGHINO, O. DASINI, A. GADAL. – Audit et optimisation MySQL 5.

N° 12634, 2010, 282 pages (collection Blanche).

S. JABER. – Programmation GWT 2.5. Développer des applications HTML5/JavaScript en Java avec Google Web Toolkit.

N° 13478, 2e édition, 2012, 540 pages (collection Blanche).

CHEZ LE MÊME ÉDITEUR

J. ENGELS. – HTML5 et CSS3. Cours et exercices corrigés.

N° 13400, 2012, 550 pages.

E. SARRION. – jQuery 1.7 & jQuery UI.

N° 13504, 2e édition, 2012, 600 pages.

E. SARRION. – Mémento jQuery.

N° 13488, 2012, 14 pages.

K. DELOUMEAU-PRIGENT. – CSS maintenables avec Sass & Compass. Outils et bonnes pratiques pour l’intégrateur web.

N° 13417, 2012, 272 pages (collection Design web).

C. SCHILLINGER. – Intégration web : les bonnes pratiques. Le guide du bon intégrateur.

N° 13370, 2012, 400 pages (collection Design web).

I. CANIVET et J-M. HARDY. – La stratégie de contenu en pratique. 30 outils passés au crible.

N° 13510, 2012, 176 pages (collection Design web).

S. DAUMAL. – Design d’expérience utilisateur. Principes et méthodes UX.

N° 13456, 2012, 208 pages (collection Design web).

E. SARRION. – Prototype et Scriptaculous. Dynamiser ses sites web avec JavaScript.

N° 85408, 2010, 342 pages (e-book).

G. SWINNEN. – Apprendre à programmer avec Python 3.

N° 13434, 3e édition, 2012, 435 pages.

J. ENGELS. – PHP 5. Cours et exercices.

N° 12486, 2009, 638 pages.

P. ALEXIS et H. BERSINI. – Apprendre la programmation web avec Python et Django. Principes et bonnes pratiques pour les sites web dynamiques.

N° 13499, 2012, 344 pages (collection Noire).

H. BERSINI. – La programmation orientée objet.

N° 12806, 5e édition, 2011, 644 pages.

C. SOUTOU. – Programmer avec MySQL.

N° 12869, 2e édition, 2011, 450 pages.

T. BAILLET. – Créer son propre thème WordPress pour mobile.

N° 13441, 2012, 128 pages (collection Accès libre).

E. SLOÏM. – Mémento Sites web. Les bonnes pratiques.

N° 12802, 3e édition, 2010, 18 pages.

A. BOUCHER. – Ergonomie web illustrée. 60 sites à la loupe.

N° 12695, 2010, 302...

Avant-propos

Pourquoi concevoir un jeu en HTML5/JavaScript ?

Depuis des années, le langage Javascript était utilisé avec parcimonie pour quelques interactions avec l’utilisateur. Toutefois, les nouvelles versions de navigateurs web ont accéléré l’interprétation du Javascript, autorisant la création d’applications plus sophistiquées, et particulièrement de jeux. Et surtout, HTML5 a fait son apparition ; il propose de nouvelles balises et API pour JavaScript, afin de manier notamment la vidéo et l’audio, ainsi que la possibilité de dessiner en 2D ou 3D.

COMPATIBILITÉ Les balises de dessin

Les balises de dessin (<canvas>) existaient déjà dans Safari en 2004. Cependant, elles étaient très peu exploitées ; car, d’une part, les autres navigateurs ne les utilisaient pas et, d’autre part, les navigateurs n’étaient pas assez puissants pour réaliser des jeux. La technologie Flash était encore bien présente.

HTML5 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 %...

Table des matières

Avant-propos

Pourquoi concevoir un jeu en HTML5/JavaScript ?

À qui s’adresse cet ouvrage ?

Structure du livre

Remerciements

CHAPITRE 1

Mettre au point le concept du jeu

Étude de marché

Quelques géants du Social Gaming

Étude démographique et comportementale

Étude technologique

Votre étude de marché

Positionnement

Joueurs ciblés

Prix du jeu

Type du jeu

Action

Jeu de rôle

Aventure

Action-Aventure

Simulation

Sport

Réflexion

Choisir un framework

Easel.js

Kinetic.js

Crafty.js

Caat.js

CanvasEngine.js

Installer CanvasEngine

CHAPITRE 2

Créer l’écran titre

Qualité des images

Chargement initial

Création de la scène de chargement

Schéma des données

Affichage de la barre de progression

Écran titre

Création de la scène de l’écran titre

Initialisation des boutons

Association des événements

Écrans additionnels

Options

Niveaux

CHAPITRE 3

Affichage des décors

Level Design

Insertion des données

Une carte

Un niveau

Utiliser Tiled Map Editor

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

CHAPITRE 4

Animer les éléments sur l’écran

Déformer pour animer

Animation en boucle

Animer en réaction à une action

Animation temporaire

CHAPITRE 5

Concevoir le Gameplay

Mouvement

État d’un élément

Exemple : plate-forme mobile

Contrôle du joueur

Clavier

Souris

Accéléromètre

Accélération et décélération

Accélération

Décélération

Gravité pour le saut

Initialisation

Gravité

Saut

CHAPITRE 6

Avancer le joueur avec des défilements

Défilement classique

Définir les éléments à déplacer

Rafraîchissement du déplacement

Défilement différentiel

CHAPITRE 7

Interaction avec les objets

Collision

Au bord de la carte

Sur le décor et les objets

Collision sur des objets

Interaction

Déclenchement automatique au contact

Selon une action

CHAPITRE 8

Mise en place des règles du jeu

Situation initiale du joueur

Inventaire

Application du concept

Affichage des points de vie

Explication des règles au joueur

Affichage du score

Fin de partie : gagnée ou perdue

Le joueur termine un parcours

Le joueur sort de l’écran vers le bas

CHAPITRE 9

Ambiance du jeu

Ajouter des effets sonores

HTML5 Audio

SoundManager

Effectuer des fondus musicaux

Dynamiser avec des effets graphiques

Ton de l’écran : effet jour/nuit

Flash visuel

CHAPITRE 10

Les adversaires

Paramètres des adversaires

Modèle et affichage des points de vie

Calcul des dégâts

Zones spécifiques d’interaction

Champ de vision

Zone de détection

Réaction

CHAPITRE 11

Réaliser la sauvegarde

Sérialisation des classes

Chargement des données

CHAPITRE 12

Cas pratique : créer un jeu plate-forme

Règles du jeu

Initialisation et création des classes

Chargement du niveau

Création des animations

Défilement de la carte

Gestion des collisions

Mouvement, gravité et saut

Effectuer un mouvement selon une touche

CHAPITRE 13

Configurer le serveur pour le multijoueur

Utiliser le serveur via SSH

Télécharger Node.js

Installer NPM

Installer Socket.io

Tester l’installation

CHAPITRE 14

Utilisez Node.js pour votre jeu multijoueur en temps réel

Comment fonctionne Socket.io ?

Fonctionnement dans CanvasEngine

Définir les événements

Composer la structure du jeu

Créer des modules dans Node.js

Créer un modèle

Base de données

Schéma

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 à la base et schéma

Sauvegarder des données

Chargement

CHAPITRE 15

Intégration du jeu à un réseau social : Facebook

Déclaration du jeu dans Facebook

Authentification et autorisation

CHAPITRE 16

Implémentation de la partie Social Gaming

Intégration du jeu HTML5

Intégration du SDK et initialisation

L’utilisateur est-il connecté ?

Scène pour demander une connexion

Inviter des amis à jouer

Supprimer la notification

Afficher un score et le partager sur le mur de l’utilisateur

Système de badges

Récupérer des informations (amis, groupes, etc.) pour les utiliser dans le jeu

Données générales

Liste des groupes

Liste des amis

CHAPITRE 17

Stratégie de monétisation

Monnaie virtuelle

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 l’image en fond

Transformation

Translation

Rotation

Redimensionnement

Transformation personnalisée

Manipulation des pixels

CHAPITRE B

Frameworks JavaScript

Easel.js

Installer

Premiers pas

Ajouter des formes

Appeler le canvas en boucle

Afficher un texte

Ajouter des conteneurs

Insérer et animer une image

RPG JS : créez des jeux de rôle

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 scène

Ajouter un objet

Former un groupe d’objets

Source de lumière

Rendu

Bouger la caméra avec la souris

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 d’horizon sur le marché actuel, le comportement des joueurs et les types des jeux.

Étude de marché

L’émergence des ordinateurs « de poche » (smartphones, tablettes tactiles) et le développement 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 l’année 2012 était de 1,26 milliards de dollars (selon Forbes). Cette croissance s’explique par l’omniprésence des réseaux sociaux dans la vie quotidienne des gens. Une statistique montre par ailleurs que 20 % des internautes ont dépensé de l’argent réel dans un jeu, majoritairement des femmes (selon PopCap Games).

Quelques géants du Social Gaming

Facebook

Bien sûr, le succès de tous les acteurs du Social Gaming suscite la convoitise, principalement 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 l’argent réel, utilisables dans le jeu après l’achat. Le réseau social y trouve un intérêt majeur puisqu’il perçoit une commission de 30 % sur chaque transaction effectuée, augmentant 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 succès 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, et a dû se résoudre à 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...

2

Créer l’écran titre

Avant de commencer le jeu, le joueur appréciera le dynamisme des écrans titres. Comment charger les graphismes et diriger le joueur vers le jeu ?

L’écran titre est le premier visuel de votre jeu. Le joueur aura un avant-goût de la qualité et des possibilités de votre produit. Ne négligez donc pas cette partie. Le chargement au départ évitera les attentes ultérieures dans le jeu ; pensez donc à charger les images récurrentes en vérifiant leur bonne résolution.

Qualité des images

Une réflexion préalable est nécessaire sur la qualité des images du jeu. Plus leur résolution est haute, plus le joueur appréciera la beauté du jeu. Mais qui dit forte résolution, dit fichier volumineux ! Comment proposer la meilleure qualité sans que le temps de chargement en pâtisse ?

Cette réflexion est d’autant plus importante que le chargement sur le Web n’est pas natif. Chaque ressource étant téléchargée sur un serveur, imaginez le temps d’attente si les images font plusieurs méga-octets ! Par ailleurs, les utilisateurs sur mobiles vous sauront gré de ne pas consommer tout leur forfait avant d’avoir commencé à jouer.

L’idée est de proposer une résolution selon la nature de la plate-forme utilisée par le joueur. Sur un mobile ayant une résolution de 854 × 480 pixels, il n’est pas forcément nécessaire d’afficher des images HD au détriment du chargement. A contrario, sur une tablette tactile avec un écran Retina (comme le Nouvel iPad), les images HD rendent une expérience de jeu plus appréciable.

Ainsi, nous aurons deux dossiers :

• les images HD ;

• les images SD.

Une problématique apparaît dans cette façon de procéder. Si nous augmentons l’échelle de l’affichage, cela signifie que les positions des éléments sur l’écran ne sont plus les mêmes. Dans un premier temps, on aurait le réflexe de redimensionner avec des méthodes de HTML5 telles que scale. Toutefois, il ne faut pas...

3

Affichage des décors

Un jeu repose beaucoup sur les décors : disposition, aspect, animation, enchaînements, harmonisation de la structure des niveaux et cartes construisent une expérience de jeu agréable pour le joueur.

Level Design

Le Level Design est le développement des différents niveaux selon le Gameplay (façon de jouer) et les règles du jeu établies. Techniquement, nous devons définir un schéma de données pour ensuite afficher les différents éléments sur l’écran.

Puisque nous souhaitons réaliser un jeu multijoueur par la suite, nous penserons dès maintenant à séparer d’un côté les données du jeu et de l’autre l’affichage.

Figure 3-1
Un niveau tiré du jeu Alex The Allegator

Insertion des données

Créons donc le modèle comprenant les calculs.

Création d’un simple modèle

Class.create("Game_Map", {

loadMap: function() {

// Chargement de la carte

}

}

});

SANS FRAMEWORK Créer un modèle

Créer un modèle revient à créer une classe :

function Game_Map() {

// Constructeur

}

Game_Map.prototype = {

loadMap: function() {

// Chargement de la carte

}

};

Pour instancier une classe :

var game_map = new Game_Map();

Dans ce modèle, récupérons les données dans un fichier JSON et envoyons-les à la scène, qui les affiche.

REMARQUE Multijoueur

Pour le multijoueur, il est indispensable de séparer le calcul ou la récupération des données de l’affichage côté client. Le framework CanvasEngine prend en considération cette séparation même pour un jeu en local.

Scène chargeant la première carte

canvas.Scene.new({

name: "map",

ready: function(stage) {

this.game_map = Class.new("Game_Map");

this.game_map.loadMap();

}

});

Nous instancions un attribut game_map de la classe créée précédemment. Un simple appel à la méthode loadMap permet de récupérer les données du modèle pour les afficher ensuite.

Une carte

Schéma

Dans un jeu de rôle, le décor est affiché isométriquement ou avec une vue de dessus. Dans les différents cas, la rotation de la carte change, mais ses données restent identiques.

Figure 3-2
Exemple d’une carte du jeu BrowserQuest

Nous allons créer un fichier JSON contenant le schéma de notre carte, c’est-à-dire sa structure.

Pour dessiner notre décor, nous nous servirons d’un tableau à trois dimensions :

• largeur de la carte ;

• hauteur de la carte ;

• couches de superposition.

Il nous faut également un Tileset,...

4

Animer les éléments sur l’écran

Les animations sont indispensables pour donner du dynamisme aux éléments présents sur l’écran. Ce chapitre explique comment les réaliser.

Les animations rendent le jeu très dynamique. Elles se réalisent en fonction des actions du joueur ou dans un contexte particulier, pour éviter d’avoir seulement des images figées. Nous pouvons distinguer différents types d’animations :

• les déformations (agrandir/rétrécir, faire tourner un élément) ;

• les automatismes répétitifs ;

• les réactions à une action du joueur ;

• les animations temporaires (afficher une explosion pendant un court temps).

Toutes les animations s’affichent sur la scène. Il est inutile de prendre les données vers le modèle ou le serveur (pour le jeu multijoueur).

Dans un premier temps, il faut ajouter la classe des animations lors de l’initialisation du canvas :

Ajouter la classe des animations

var canvas = CE.defines(["canvas_id"]).

extend(Animation).

ready(function(ctx) {

});

Vous pouvez maintenant utiliser les méthodes de la classe canvas.Animation.

Déformer pour animer

Ces animations déplacent des éléments sur la scène pour rendre dynamiques des transitions ou des interactions.

Le framework dispose d’une ligne...

5

Concevoir le Gameplay

Le mouvement et la gestion des entrées font partie du Gameplay. Apprenez les différents moyens de les mettre en œuvre.

Le Gameplay est très important dans un jeu vidéo et est différent selon le type du jeu. La jouabilité, combinée à une difficulté croissante, donnera une bonne expérience du jeu.

Pour concevoir le Gameplay, nous devons distinguer plusieurs parties de création :

• mouvement ;

• accélération, décélération ;

• contrôle avec le clavier, la souris, l’accéléromètre et la manette.

VOCABULAIRE Gameplay

Le Gameplay est une combinaison entre la jouabilité, la maniabilité et la difficulté donnant une expérience de jeu agréable au joueur. Il varie beaucoup selon le type de jeu : un jeu d’action recherche l’agilité et la dextérité du joueur, contrairement au jeu d’aventure plus basé sur l’exploration d’un univers.

Mouvement

Le plus souvent, le mouvement est contrôlé par le joueur. Voyons comment affecter un objet sur l’écran avec un mouvement.

État d’un élément

L’élément est caractérisé par un état. Selon ce dernier, ses positions vont changer. Bien sûr, s’il doit aller à un point éloigné de la carte, il faut le déplacer progressivement jusqu’à son nouvel emplacement.

Pour un adversaire, son état changera selon sa détection du personnage principal. L’intelligence artificielle déterminera son déplacement, sa vitesse ainsi que son animation.

Pour des objets ou des plates-formes, le mouvement sera aléatoire ou selon un chemin prédéfini. L’état est donc neutre et constant.

Dans tous les cas, c’est dans le rendu de la scène qu’il faut changer les positions des éléments.

Exemple : plate-forme mobile

Nous avons une image représentant une plate-forme mobile. Elle se nomme platform.png et se trouve dans le dossier images du jeu.

Figure 5-1
L’image de la plateforme mobile

Figure 5-2
Représentation de la plateforme mobile dans un jeu

Le code qui suit ne comporte pas tout le contenu de la page, mais juste le modèle nommé Game_Entity et la scène où il est utilisé.

La plate-forme aura un mouvement linéaire et répétitif sur l’abscisse entre les positions 50 et 100 pixels. Sa direction s’inverse lorsque la plate-forme atteint une extrémité du décor.

Le mouvement de l’entité est caractérisé par plusieurs propriétés :

• speed : sa vitesse ;

• x : sa position X ;

• y : sa position Y ;

• frequence : sa fréquence d’affichage pour doser la vitesse du mouvement ;

• dir : sa direction (droite ou gauche).

Création d’une plate-forme mobile

Class.create("Game_Entity", {

speed: 1,

x: 0,

y: 0,

frequence: 2,

currentFrequence: 0,

dir: "right",

initialize : function(x, y) {

this.x = x;

this.y = y ;

},

moveLoop: function(a, b) {

var new_x = this.x;

// Fréquence de rafraîchissement

if (this.currentFrequence >= this.frequence) {

if (new_x >= b) {

this.dir = "left";

}

else if (new_x <= a) {

this.dir = "right";

}

// Application de la vitesse selon la direction

switch (this.dir) {

case "left":

new_x -= this.speed;

break;

case "right":

new_x += this.speed; ...

6

Avancer le joueur avec des défilements

Le défilement du décor donne l’illusion que le personnage contrôlé 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 l’écran et le joueur ne pourra plus le contrôler. C’est donc la carte qu’il faut faire défiler en arrière-plan pour donner l’illusion que le personnage se déplace. On nomme cette procédure scrolling. On a coutume de distinguer défilement classique et défilement différentiel.

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 où le joueur doit avancer de gauche à droite dans un niveau et éviter les murs, la collision est fatale. Dans un RPG, si un coffre est présent sur la carte, l’interaction se fait seulement à l’appui d’une touche et le héros gagnera sûrement un objet pour continuer son aventure.

Voyons comment réaliser, de façon 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, c’est particulièrement 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 :

• la 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 l’affichage ;

• le modèle Game_Map qui teste la praticabilité entre les positions du joueur et les entités.

BONNE PRATIQUE

Rappelez-vous que cette façon de procéder améliore la structure de votre code, mais aussi une compatibilité future du multijoueur.

Le personnage a une zone d’interaction nommée Hitbox. Généralement, cette dernière est un rectangle placé sur la surface du Sprite.

Figure 7-1
Hitbox sur un personnage

Dans la pratique, c’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 à l’aide des dimensions du personnage :

• Point (2) : Position X₂ = Position X₁ + Largeur

• Point (3) : Position X₃ = Position X₁+ Largeur et Position Y₃ = Position Y₁ + Hauteur

• Point (4) : Position Y₄ = Position Y₁ + Hauteur

Admettons que les propriétés se nomment width pour la largeur et height pour la hauteur, la classe Game_Player se résume à :

Classe Game_Player simplifée

...