Développement de jeux vidéo 2D - Ressources

Retrouvez ici les différents ressources pédagogique mobilisées dans le cours Développement de jeux vidéo 2D dispensé par Isaac Pante en Section des sciences du langage et de l'information de l'Université de Lausanne.

Informations sur l'enseignement

Dispensé au SA2019, toutes les deux semaines, de 16h15 à 18h en salle 5183. Première séance le 23 septembre 2019. Les informations sur la validation, le nombre de crédits ECTS, les prérequis et les plans autorisés sont disponibles sur la page de l'enseignement. Attention, en 2019, ce cours ne sera dispensé qu'au semestre d'automne! Il sera ensuite dispensé – dès 2021 – chaque semestre de printemps.

• Un laboratoire de réécriture de jeu vidéo est prévu le 22 novembre 2019 ! Inscriptions ouvertes
• Liste des jeux en cours de développement*

Liste des travaux pratiques

1. kontra_jump : exemple de jeu complet en kontra.js; interaction utilisateur, exemple de saut "cran par cran", génération aléatoire d'obstacles et cycle de vie des sprites (bonus : stockage et récupération du highScore dans le localStorage)
2. phaser_json : importation de données au format JSON et affichage aléatoire.
3. phaser_scenes_sequentielles : exemple simple de transition entre trois scènes avec et sans interaction utilisateur; chaque scène dispose de sa propre classe écrite dans des fichiers distincts; des données sont transmises entre les scènes 2 et 3 (bonus : chargement de musique de fond et accélération de cette musique dans la scène finale).
4. phaser_scenes_paralleles : exemple de scènes parallèles avec interaction ; le déplacement du pointeur dans la scène principale se répercute sur une "minimap" dessinée dans une autre scène.
5. phaser_input : exemple de déplacement d'objet au clavier, coup par coup avec des combinaisons de touche ou de manière continue avec les curseurs (bonus : ajout d'une police bitmap pour les instructions ; ajout d'un point d'arrêt contre les bords du monde avec physics : arcade).
6. système physique (exemple commenté) : un exemple tout simple de deux sprites qui rebondissent contre le monde et entre eux.
7. phaser_jump : réécriture de kontra-jump en Phaser; ajout de scènes.
8. animations sans atlas : importation d'une spritesheet et création des animations pour les 4 points cardinaux.
9. animations avec atlas et tweens : importation de deux spritesheet ainsi que d'un atlas JSON; les animations sont soumises à deux transformations (tweens) chaînées (bonus : évocation de l'alternative "timeline").
10. phaser_pool_input : création d'un pool, utilisation pour l'affichage et la suppression d'objets.
11. phaser_pool_animation : code de Richard Davey sur la génération de sprites animés tirés d'un pool.
12. phaser_runner : un jeu complet d'Emanuele Feronato qui illustre l'utilisation de "pool" pour créer un infinite runner ; les identifiants ont été francisés pour faciliter la compréhension et des commentaires ajoutés.
13. phaser_boilerplate_webpack : installation d'un boilerplate phaser utilisant webpack ; ajout d'un module externe et importation de la fonction de ce dernier.
14. phaser_plugin_global : écriture d'un plugin global.

Liste des ressources externes

Documentation officielle de Phaser

• Phaser Notes : la documentation officielle de l'API de Phaser 3 est souvent difficile à lire. Ces notes reprennent l'essentiel de la documentation sous une forme nettement plus adaptée.
• Documentation officielle de l'API : la documentation officielle (et brute) de Phaser 3.
• Liste d'exemples en Phaser 3 : des exemples classés par thématiques sur la plupart des composantes essentielles de Phaser 3.
• PhaserWorld : la newsletter de Phaser, soit la meilleur source de tutoriels et d'informations sur les évolutions du framework. Abonnez-vous pendant la durée de ce cours!

Demande de support (Phaser)

• Forums Phaser 3 : le meilleur endroit où poser une question spécifique au framework. Grande réactivité et information à la source.
• Phaser sur StackOverflow : questions sur le framework ainsi que sur Javascript en général.
• Demande de tutoriels : un tutoriel vous manque? Demandez-le sur ce thread. Egalement un excellent lieu où retrouver une liste de tutoriels suggérés par les participant·e·s.

Ressources thématiques

• Javascript pur

  • Typescript en 50 minutes
  • ES6 : Objets, méthodes et prototype (Ocean Digital)
  • ES6, idem autre tutoriel
  • ES6, idem, autre tutoriel
  • ES6, idem, autre tutoriel

• Scènes

  • Rapide introduction vidéo aux scènes
  • Guide des scènes dans Phaser 3 (partie 1)
  • TP : phaser_scenes_sequentielles
  • TP : phaser_scenes_paralleles
  • Guide des scènes dans Phaser 3 (partie 2)
  • Ajouter des transitions à vos scènes

• Spritesheet, Animations & Tweens

  • Rapide introduction vidéo aux spritesheets & aux animations
  • Tutoriel vidéo d'animations avec et sans texture atlas
  • TP : animation sans atlas
  • TP : animation avec atlas et tweens

• Pool et cycle de vie des objets

  • TP : phaser_pool_input
  • TP : phaser_pool_animation
  • TP : phaser_runner

• Cartes

  • Vidéo : créer une carte avec Tiled
  • Vidéo : intégrer la carte à un jeu Phaser
  • Tutoriel : créer une carte avec Tiled
  • Tutoriel : ajouter une carte avec Tiled et gérer la physique avec Matter.js
  • Tutoriel : créer des cartes dynamiques
  • Tutoriel : changement de pièce

• Utilisation de webpack

  • TP : création d'un projet à partir d'un Boilerplate

• Intégrations de plugins

  • TP : phaser_plugin_global
  • Documentation sur les types de plugin (scene et global)
  • Documentation complète sur le plugin mananger
  • Liste des exemples spécifiques aux plugins

• Partager votre jeu

  • Sur Facebook Instant Game
    • Documentation officielle de Facebook
    • Tutoriel officiel Phaser
    • Tutoriel d'Emanuele Feronato
    • Tutoriel de Zenva
    • Procédure de publication & checklist
    • Forum dédié sur Phaser forums

Tutoriels de jeux complets

• Créer un jeu Phaser complet en 13 vidéos de quelques minutes par Luis Zuno
• Recréer Asteroids en Kontra.js
• Création d'un Broughlike en pur JS
• Site d'Emanuelle Feronato : près de 200 jeux avec code source commenté

Jeux complets (avec code source)

• Bunny game (Phaser)
• Mario Bros (Phaser)
• A day in the life (Kontra)

Demande de support (Phaser)

• Forums Phaser 3
• Phaser sur StackOverflow
• Demande de tutoriels

---

Logiciels

Logiciels génériques de développement informatique

• Editer du code : Visual Studio Code
  • Lancer un serveur local (VSCode): Extension live server
  • Accéder directement aux librairies JS (VSCode) : Extension CDNJS
  • Coder collaborativement (VSCode) : Extension VS Live Share
• Gérer votre espace Github : Github Desktop

Logiciels spécifiques au développement de jeux vidéo

• Création de cartes : Tiled
• Création de Texture Atlas : Free Texture Packer
• Création de Texture Atlas : Atlas Packer Phaser 3
• Création d'Atlas (webservice) : Atlas Packer Phaser 3
• Pixellisation d'images : Pixel Art Camera
• Création de sprites : Piskel
• Création de sprites : Aseprite | $
• Création de sprites (iPad) : Pixen | $
• Extraction d'images à partir d'une spritesheet : Shoebox
• Eclairage de sprites : Sprite illuminator | $

Moteurs de jeu recommandés

• Phaser.js : le plus célèbre des frameworks de développement de jeux vidéo en Javascript. Suppose une bonne connaissance de la programmation Javascript.
• Kontra.js : le plus léger des moteurs de jeu en Javascript, développé pour la compétition js13k. Se limite au strict minimum des fonctions proposées par Phaser.js.
• Construct 3 : webservice wysiwyg de développement web, il facilite grandement le développement de jeux vidéo Javascript. Reste qu'une connaissance de la programmation est nécessaire pour en tirer parti. | $
• Twine 2 : moteur de développement de récits interactifs. Twine 2 est disponible en version logicielle et sous forme de webservice. Facile d'accès, il offre aussi des possibilités de scriptage avancé via du Javascript (Recommandé pour les débutant·e·s en programmation).
• Monogatari : moteur de développement de visual novels. Facilite la prise en charge des dialogues et l'affichage des différentes scènes. Facile d'accès, il offre des possibilités d'animation et de scriptage avancés via du CSS et du Javascript (Recommandé pour les débutant·e·s en programmation).
• Unity : le plus célèbre des environnements de développement de jeux vidéo. La difficulté de la prise en main dépend de la complexité de votre projet et des sommes investies dans différents kits d'assets. A recommander aux étudiant·e·s les plus chevronné·e·s. | $
• Script-8 : un développemnt pur web ! Assets, son, musique et logique de jeu peuvent être créés directement dans Script-8, à l'instar de Pico-8, dont ce moteur s'inspire largement.
• Bitmelo : un développement pur web à l'instar de Script 8. Bitmelo propose également un éditeur de carte.

Boilerplates Phaser 3

• Avec Brunch
• Avec Webpack
• Avec Webpack (Platformer)

---

Assets

Banques de sprites

• Opengameart.org
• Assets sur itch.io
• The Spriters Resource

Banques de sons

• Soundtracks itch.io
• The sounds Resource
• Bensound

---

Projets d'étudiant·e·s

Bientôt rempli par vos contributions !

---

Inspirations

jeux de médiation

• La confiance en psychologie sociale : L'évolution de la confiance par Nicky Case
• Simulateur de pauvreté : Spent
• La vision du monde en psychologie sociale : La sagesse et/ou la folie des foules par Nicky Case
• Simulateur de gestion des données personnelles : Datak
• Simulateur de banalité du mal : Papers Please
• Street Fighter autour de l'anxiété : Adventures with anxiety par Nicky Case
• Simulateur de harcèlement journalistique (attention, Phaser 2!) : Sorry to bother you
• Simulateur de charge mentale et de harcèlement psychologique (merci à Melissa Corboz pour la suggestion) : Behind every great one

jeux singuliers (interface atypique)

• Her story & Telling lies : exploration d'une base de donnée vidéo à partir recherche textuelle
• Papa Sangre : orientation à l'aveugle

annuaires de jeux

• Jeux créés avec Phaser sur Itch.io

Livres

• Théorie du jeu
  • Johan Huizinga, Homo Ludens (1938)
• Game Design
  • George Skaff Elias, Richard Garfield and K. Robert Gutschera, Characteristics of Games, MIT Press (2012)
• Développement
  • Emanuelle Feronato, HTML5 Cross Platform Game Development Using Phaser 3

Evénements

• 24-26.10.19 : Colloque international les langages du jeu vidéo
• 22 novembre 19 : laboratoire de réécriture de jeu vidéo

Varia

• Liste des codes clavier
• Optimiser le chargement des assets
• L'aléatoire dans les jeux
• Apprendre js13k en 4 vidéos
• Différents Plugins Phaser (interface, notamment)
• Tutoriels Twine
• Tutoriel d'un RTS 3D en moins de 13k
• Un excellent post-mortem de XyCore pour le js13k
• Mario Kart en pur CSS

Cette liste ne demande qu'à s'enrichir! Merci d'envoyer vos suggestions à Isaac Pante.

©Louiza pour les sprites