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.
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
- 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)
- phaser_json : importation de données au format JSON et affichage aléatoire.
- 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).
- 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.
- 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).
- système physique (exemple commenté) : un exemple tout simple de deux sprites qui rebondissent contre le monde et entre eux.
- phaser_jump : réécriture de kontra-jump en Phaser; ajout de scènes.
- animations sans atlas : importation d'une spritesheet et création des animations pour les 4 points cardinaux.
- 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").
- phaser_pool_input : création d'un pool, utilisation pour l'affichage et la suppression d'objets.
- phaser_pool_animation : code de Richard Davey sur la génération de sprites animés tirés d'un pool.
- 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.
- phaser_boilerplate_webpack : installation d'un boilerplate phaser utilisant webpack ; ajout d'un module externe et importation de la fonction de ce dernier.
- phaser_plugin_global : écriture d'un plugin global.
- 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!
- 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.
-
Javascript pur
-
Scènes
-
Spritesheet, Animations & Tweens
-
Pool et cycle de vie des objets
-
Utilisation de webpack
-
Intégrations de plugins
-
Partager votre jeu
- Créer un jeu Phaser complet en 13 vidéos de quelques minutes par Luis Zuno
- Recréer Asteroids en Kontra.js
- Site d'Emanuelle Feronato : près de 200 jeux avec code source commenté
- 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
- 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 : Aseprite | $
- Création de sprites (iPad) : Pixen | $
- Extraction d'images à partir d'une spritesheet : Shoebox
- Eclairage de sprites : Sprite illuminator | $
- 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.
Bientôt rempli par vos contributions !
- 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
- Her story & Telling lies : exploration d'une base de donnée vidéo à partir recherche textuelle
- Papa Sangre : orientation à l'aveugle
- 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
- 24-26.10.19 : Colloque international les langages du jeu vidéo
- 22 novembre 19 : laboratoire de réécriture de jeu vidéo
- 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
Cette liste ne demande qu'à s'enrichir! Merci d'envoyer vos suggestions à Isaac Pante.
