- Lien Zoom : https://unil.zoom.us/my/isaacpante
- Lien Discord
- Lien vers les informations générales : https://bit.ly/cours-ip
Les projets doivent être annoncés au travers du formulaire en ligne ci-après : https://bit.ly/projet-jv2d. Pour un aperçu global avant remplissage, vous pouvez consulter une version complète au format PDF.
Attention : ce formulaire ne sert qu'à annoncer votre projet et à voir votre idée validée par l'enseignant. Pour voir votre travail évalué à une session, vous devez avoir envoyé un mail contenant le nom du projet et le lien github avant le début de la session durant laquelle vous souhaitez voir votre projet évalué. Des informations plus complètes vous attendent dans la FAQ.
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é le lundi, au SP, chaque semaine, de 16h15 à 17h45. 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.
- Phaser Breakout : code commenté d'un Breakout en JS
- 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 tilemap : importation de tilemap avec deux layers; la carte tire partie du ScaleManager pour s'adapter à l'écran.
- 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.
- Documentation officielle de l'API : la documentation officielle révisée de Phaser 3.54.
- 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.
- 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
-
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
- Tutoriel : importer des cartes et définir des collisions par exclusion
- Exemple d'utilisation de carte sous Phaser
-
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
- Création d'un Broughlike en pur JS
- Site d'Emanuelle Feronato : près de 200 jeux avec code source commenté
- Créer un Tetris en pur JS
- Créer un infinite Jumper
- Créer un très simple "dinojump" en pur JS
- Livre sur le développement Kaboom.js
- Jeux Kaboom sur itch.io
- Jeux Kaboom sur repl.it
- Jeux Kaboom sur newgrounds
- 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
- Outil de rotoscopie en Pixel Art : Paint of Persia
- 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 | $
- Kaboom js
- 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. Plus puissant (et plus lourd) que Kaboom.
- 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. | $
- 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.
- Stage.js : une librairie pour le développement de JV2D multiplateforme en HTML5.
- VoxelSpace : un algorithme de rendu pour générer des mondes en 2.5D.
- Hex engine : un pur moteur JS inspiré de React encore en développement, à surveiller de près.
- 24 a 2 : un moteur de jeu JS pour des jeux dans une grille de 24 par 24.
- Bitsy game maker
- 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).
- Inky : Puissant outil de fiction interactive textuelle exploitant le langage ink. Autorise des exportations web et JSON (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).
- Fungus : Librairie Unity 3D pour le développement de fictions interactives à partir de flowcharts (Recommandé pour les débutant·e·s en programmation).
- "That House" sur itch.io et son archive : une aventure textuelle codée "from scratch" sur les phases du deuil par Joël Rimaz.
- "La bataille de Salesbières et son archive : une visual novel éducative basée sur la littérature française médiévale par Mathilde Ançay, jouable sur itch.io
- "Limited" et son archive : jeu de sensibilisation à l'épuisement des ressources naturelles par Florian Rieder.
- "Cooking for the king" et son archive : jeu de sensibilisation à la diététique médiévale.
- "MuseeX" et son archive : fiction interactive de médiation en histoire de l'art (Raphaël Garnier).
- "Isolation" et son archive : un jeu sur la déprivation sensorielle (Loris Rimaz)
- "Simulateur d'entretien" et son archive : un visual novel de simulateur d'entretien en sciences sociales (Clémence Danesi et Antonin Wyss)
- Vote now ! : variante de Reigns sur les votations suisses. Primé du Swiss Game Developer Award Junior 2022 (Joël Rimaz)
- 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
- 11 et 19.01.2020 : Evénement "Press Start" à l'Espace Arlaud dans le cadre des JOJ.
- 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
- Les jeux vidéo et l'accessibilité
## Projet Anthropole
- Installation de node
- Installation de Github Desktop
- Cloner le répertoire LikeLike-online (Code > Github Desktop)
- Ouvrir le répertoire Github/likelike-online sous VS Code
- Ouvrir un Terminal sous VS Code
- Taper dans le terminal : npm install
- Taper dans le terminal : node server.js
- Aller sur http://localhost:3000 (ou autre port indiqué)
Cette liste ne demande qu'à s'enrichir! Merci d'envoyer vos suggestions à Isaac Pante.
