jeux Développer des en HTML 5 & JavaScript Samuel Ronce Multijoueur temps-réel avec Node.js et intégration dans Facebook

Transcription

1 Développer des jeux en HTML 5 & JavaScript Multijoueur temps-réel avec Node.js et intégration dans Facebook Samuel Ronce Groupe Eyrolles, 2013, ISBN:

2 Table des matières Avant-propos... Pourquoi concevoir un jeu en HTML5/JavaScript?... À qui s adresse cet ouvrage?... Structure du livre... VIII Remerciements.... CHAPITRE 1 Mettre au point le concept du jeu... 1 Étude de marché... 2 Quelques géants du Social Gaming... 2 Étude démographique et comportementale... 3 Étude technologique... 5 Votre étude de marché... 6 Positionnement Joueurs ciblés... 6 Prix du jeu... 8 Type du jeu... 8 Action... 9 Jeu de rôle Aventure Action-Aventure Simulation Sport Réflexion Choisir un framework V V VII IX

3 XII Table des matières 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... 45

4 Table des matières XIII 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... 86

5 XIV Table des matières 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

6 Table des matières XV 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

7 XVI Table des matières 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 HTML 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

8 Table des matières XVII 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

9 XVIII Table des matières 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