Refaire la formation "Publier son jeu sur Itch.io" pour en faire un seul chapitre, et l'intégrer à une formation "Distribuer son jeu"

Développement de la page des sections.

• Aside navigation
  • Design mock up
  • Accordéons animations
  • Récupérer données
  • Chapitre actuel fermé par défaut
  • Bouton retour vers la page de formation
• main article
  • Style de base
  • Table, code
  • Vidée Youtube
  • Vidéo .mp4
  • Iframes
  • Boite de dialogues
  • Passer au cours suivant
  • Passer au chapitre suivant BUG
• local table of content
  • Design mock up
  • Récupérer données
  • Bouton modifer la page

• Réorganiser les chapitres

• Introduction

  • Présentation de Pico-8
  • C'est quoi exactement une machine virtuelle ?
  • Pourquoi l'utiliser ?

• Les bases

  • Premiers pas : commandes, splore
  • Dessine-moi un vaisseau
  • The game loop : les 3 grandes fonctions
  • Publier son jeu

• Créer un shooter spatial
  Inspiré de https://ztiromoritz.github.io/pico-8-shooter/

  • Tirer
  • Effet sonore
  • Etoiles
  • Un premier ennemi
  • Collisions balles-ennemi
  • Animation d'explosion (+ son)
  • Vagues d'ennemis
  • Score et game over
  • Perspectives d'amélioration

• Jeu d'aventure
  Inspiré du tutoriel de MBoffin

  • Sprites
  • Création de la carte
  • Déplacement du personnage
  • Déplacer la caméra
  • Interagir avec des objets
  • Système de messages
  • Déplacements et caméra améliorées
  • Conclusion : en combinant ce qu'on a fait dans le shooter (tirs et collisions) vous pourriez créer un top down shooter ou autre chose selon votre imagination.

• Techniques avancées

  • Déplacements pixel par pixel avec collision
  • Ouvrir le jeu dans un autre éditeur (qu'est-ce qu'un éditeur, installer VS Code, plugin VS Code, utiliser Include et le live reload
  • Utiliser la souris et le clavier en jeu
  • Créer un outil de debug : afficher autant de valeurs qu'on veut :
    expliquer les fonctions de debug (afficher cpu...)
  • fade in et fade out (changement de couleur)
  • Conclusion. Pour aller plus loin : page des ressources

Vidéos

• Présentation et bases
  Shooter :
• Vidéo 1
• Vidéo 2
• Vidéo 3
  Aventure :
• Vidéo 1
• Vidéo 2
• Vidéo 3

Notes

vous pouvez utilisez Alt+Flèche pour naviguer entre les fonctions rapidement
CTRL-F to search for text in the current tab
CTRL-G to repeat the last search again
CTRL-L to jump to a line number
CTRL-UP, DOWN to jump to start or end
ALT-UP, DOWN to navigate to the previous, next function
CTRL-LEFT, RIGHT to jump by word
CTRL-W,E to jump to start or end of current line
CTRL-D to duplicate current line
TAB to indent a selection (shift to un-indent)
CTRL-B to comment / uncomment selected block
Navigate tabs by left-clicking, or with ctrl-tab, shift-ctrl-tab.

Conclusion

quand vous allez faire votre propre jeu, il y aura forcément un peu plus de tatonnements à chaque fois que vous découvrirez une nouvelle commande, vous suarez pas toujours quelle est la manière idéale de programmer tel truc... mais heureusement, la simplicité de pico8 fait que vous aurez toujours un résultat rapidement, et c'est pour ça que c'est un super logiciel pour tester des nouvelles idées de jeux et s'améliorer en programmation.

Code pour visualiser écarts vagues d'ennemi

e=5 dans init puis dans draw :

 --bonus
 line(0,0,127,0,15)
 if (btnp(⬇️)) e-=1
 if (btnp(⬆️)) e+=1
 gap=(128-8*e)/(e+1)
 print("ennemis:",0,5,6)
 print(e,32,5,8)
 print("ecart:",0,13,6)
 print("      (128-8* )/( +1)=",0,13,7)
 print(e,52,13,8)
 print(e,68,13,8)
 print(gap,88,13,15)
 for i=1,e do
	 line(gap*i+8*(i-1),0,gap*i+8*(i-1)+8,0,8)
	end

Statut actuel de l'issue : La formation a été ouverte avec un chapitre sur le pixel art préparé par Nev puis réécrit par moi-même. Actuellement, on recherche un ou une adepte de Krita sachant expliquer les autres aspects du logiciel, comme l'animation et le dessin numérique, et je suis disponible pour la rédaction ou la relecture selon comment vous souhaitez travailler.

1. Pixel Art
   • Configurer l'interface
   • Les outils de bases
   • Sélection et transformation

• Animation
• Dessin numérique
• Aller plus loin
  • Ressources utiles

Cours

• Rajouter une intro sympa : à qui ça s'adresse, et pourquoi utiliser Ren'Py
• Chapitre 1
• Chapitre 2
• Chapitre 3 : faire un point n click
• Chapitre 4 : éditer l'interface, Gui
• Chapitre 5 : s'autonomiser

Vidéos

• Vidéo 1
• Vidéo 2
• Vidéo 3
• Vidéo 4 : éditer l'interface, Gui

Développement de la page d'accueil des formations

• Design mock up
• Système de médaille
  • Design
  • Récupération des données
• Navigation
  • Aside nav, toujours ouvert
  • Bouton commencer la formation
• Passer course.json en markdown

Partie gauche

• Liens
  • Page des contributeurs

Partie droite

• Titre du site
• Socials

En plus du guide pour contribuer au contenu du site, il faudrait une page qui explique les règles à suivre pour contribuer au côté technique du site et comment les appliquer.

Je pense pas qu'il y a besoin de montrer au gens comment configurer un éditeur de code (après tout, ils lisent un tutoriel sur comment contribuer au code) mais du moins expliquer que les outils suivants doivent être utilisés afin de respecter les conventions de style du répo:

• ESLint
• Stylelint

Les deux sont disponible sous forme d'outil à utiliser directement (par-exemple eslint .) ou comme extension à installer dans son éditeur de code (ESLint, Stylelint).

Des plugins existent pour les deux pour la plupart des éditeurs, que ce soit les trucs modernes comme VS Code ou Atom ou les trucs avec moins de typing latency comme Emacs ou Vim.

Je recommande de faire installer en extension pour éditeur, ça fait un meilleur workflow avec de l'autofix on save, erreurs affichées en temps réel etc mais de quand même expliquer la possibilité d'installer et d'utiliser manuellement

Également, une troisième extension doit être installée obligatoirement :

• Editorconfig

Cette extension permet de configurer automatiquement l'éditeur de code par-rapport à des règles (par-exemple, utiliser 4 espaces pour l’indentation, utiliser un certain format de retour à la ligne etc) et donc d'éviter les erreurs "basiques" de style.

Quelques trucs à préciser :

• Les pull requests ne seront pas acceptées sauf mention contraire si les règles ne sont pas suivies
• Il ne faut pas commit de fichiers qui ne sont pas pertinent au projet, il faut les ajouter au fichier .gitignore si nécessaire
• Si une dépendance est ajoutée, il faut préciser pourquoi elle est nécessaire si ce n'est pas évident

• Développer la présentation : pourquoi utiliser itch.io ?
• Organiser en plusieurs pages
• Ajouter l'explication du Path au sein du guide butler
• Retravailler les pages pour une qualité exemplaire
• Ajouter divers conseils du portail Distribution pour écrire une bonne description, faire une bonne miniature

Mobile

Global

• Header
  • Menu
    • Bug Fermer le menu mobile de force on click à cause de cette issue
• Footer

Pages

• Page d'accueil
• Section / Course

Tablette

Global

• Header
• Footer

Pages

• Page d'accueil
• Section / Course

Partagés

• Style dans les sections / courses

Ce framework est énormément utilisé dans le monde de l'indépendant, c'est même impossible de parler des indies sans mentionner la période XBLA qui était largement sponsorisé par la facilité d'accès de XNA par-rapport aux autres outils et encore aujourd'hui, il reste le moteur utilisé par des très gros noms de l'indépendant (Stardew Valley, Celeste, Terraria etc). Il faudrait écrire un tutoriel dessus

Les tutos de rbwhitaker sur XNA et MonoGame sont historiquement souvent cités et très apprécié, ça peut être une source d'inspiration peut-être: http://rbwhitaker.wikidot.com/xna-tutorials et http://rbwhitaker.wikidot.com/monogame-tutorials . Son tuto sur C# peut également être intéressant: http://rbwhitaker.wikidot.com/c-sharp-tutorials

Il est possible de voir le problème sur la page contribuer/comment-contribuer/contribuer-au-code.

Bonjour, j'ai un problème pour démarre le site sur localhost.

La commande gridsome develop ne démarre pas le serveur sur localhost.

Pour résoudre se souci, c'est assez facile, la commande "Set-ExecutionPolicy Bypass -Scope LocalMachine" dans un terminal ouvert avec les droits administrateur résout le problème.

Cependant cela créer un autre problème que je n'arrive pas à résoudre.

Je ne pense pas que cela est un lien mais je suis sur windows 11.
Faut-il que j'installe une plus vieille version de node.js?

Essayer de passer un maximum du code tailwind qui est utilisé plusieurs fois dans le fichier de config via AddBase.

• Ajouter AddBase
• Polish

À cause de comment on génère les pages des Sections, ils semblerait que non seulement les transitions ne fonctionnent pas à partir d'une Section (elles fonctionnent dans une Course) mais également comme le changement de page n'est pas consideré correctement, cela brise les components dynamiques (actuellement MobileMenu.vue)

Entre autres, dans le cas du MobileMenu, le menu ne se ferme pas correctement lors d'un changement de page à partir d'une Section. J'ai du mal à voir comment corriger ça en dehors de changer notre stratégie de création des chemins complètement, peut-être qu'il faudrait utiliser des routes dynamiques?

En attendant, si on en peut pas régler ça, on peut forcer le menu mobile à se fermer quand un lien est appuyé et tolérer le manque de transition entre les sections.

Cette formation est out of scope pour le moment. Pour ne pas nous éparpiller, nous allons nous concentrer sur une formation pour débuter par moteur. Pour le moment, nous allons plutôt garder ce type de contenu avancé et plus précis sur le wiki.

• Séparer en plusieurs pages
• Tuto entièrement relu et corrigé
• Refaire les images
• Rajouter une introduction plus sympa à la itch.io
• Indiquer dans la médaille "en cours d'écriture" que la partie "système de quêtes" n'est pas faite.
• Remettre des bulles de discussion dans le chapitre 1

Idée d'amélioration proposée par xvw : "Créer son propre système de quêtes" qui se veut être une suite directe de chifoumi, mais il manque la partie 2, où l'on devait réaliser étape par étape le journal des quêtes et l'intégrer dans le menu. Il ajoute tout de même qu'avec un peu d'intelligence, il serait possible de se servir de qu'on apprend dans chifoumi pour faire la vue des quêtes.

J'y connais pas grand chose en Unity donc j'aurai besoin de vos lumières : parlez-moi des meilleurs tutos existants, les choses incontournables à apprendre...

• Chapitre 1 : FPS
• Chapitre 2 : Platformer 2D
  (C'est plus dur de faire un jeu 2D que 3D dans Unity)

On peut le voir dans pico-8/shooter-spatial/les-3-fonctions-principales par exemple.

Tâches par-rapport à la page d'accueil du site

• Design Mock up (Nev)
• Changements dans le data layer pour les données nécessaire pour la page d'accueil
• Layout Initial
• Fonctionnement (liens cliquables etc)

Formation plus théorique sur la programmation, qui ne vise pas un langage en particulier.

Suggestions de contenu :

• #44 principes de base : instructions, variables, tableaux, boucles, opérateurs, etc
• logique et design : algorithmes et design patterns, paradigmes orienté objet & fonctionnel
• aller plus loin : architectures, choisir un langage, compilateurs, interpréteurs, bas/haut niveau, front/back etc

N'hésitez pas si vous avez des idées à contribuer.

Le minimum syndical pour sortir la formation au niveau bronze a été réalisé. Ça commence par les 3 vidéos principales (elles sont claires mais les intros et les conclusions sont superflues + il manque comment supprimer un évènement, ajouté en texte), puis ça continue avec divers tutos et textes récupérés du wiki.

Créer un premier jeu

• Présentation de RPG Maker : pourquoi l'utiliser ?
• Quelle version choisir ?
• Vidéo 1 + Explication pour supprimer un évènement
• Vidéo 2
• Vidéo 3
• Exporter le projet (vidéo & texte wiki)

Se perfectionner

• Caractéristiques et formules (wiki)
• Vidéo mapping
• Pont amélioré (vidéo & texte wiki)
• Téléportation améliorée (wiki)

Utiliser les plugins

• Personnaliser l'écran d’introduction « Powered by MV » (wiki)
• Installer un plugin (wiki)

Le cours RPG Maker actuellement présent sur FaireDesJeux est une archive mélangeant nos anciennes vidéos et des extraits du wiki (voir #4).

Pour améliorer la qualité de la formation, un premier objectif serait de produire une version texte complète, modernisée avec les nouvelles fonctions et des captures d'écran de RPG Maker MZ. Dans les vidéos, il y a beaucoup de matière à réutiliser, la plupart des infos n'ayant pas besoin d'être changées. Quand la version texte sera terminée, on pourra moderniser les vidéos pour produire une vraie formation vidéo.

Voici quelques idées d'amélioration, actuellement non présentes dans la formation FaireDesJeux mais déjà traitées dans des vieilles vidéos :

• Imaginer une ville crédible (vidéo)
• Créer une mini-carte (exemple du starter pack, vielle vidéo)
• Bruits de pas (vielle vidéo)
• Afficher un nombre à l'écran en images (vielle vidéo)
• Créer son propre écran-titre (vielle vidéo)
• Contrôler 2 personnages (vielle vidéo)

Il serait aussi intéressant d'aborder le parallax mapping.

Perso, je dois m'occuper de la rédaction d'autres formations, donc je donne juste quelques idées. Cela dit, si vous vous lancez je pourrai vous aider avec plaisir si besoin.

Statut actuel de l'issue : La première moitié de la formation a été traduite de l'anglais par Nev et Nolwenn puis relue par moi-même. Actuellement, on cherche un traducteur ou une traductrice pour traduire la deuxième moitié, et je suis toujours disponible pour la relecture et des conseils si besoin.

La traduction demande une certaine aisance et créativité puisque l'idée est de conserver le ton sympathique tout en éliminant les lourdeurs du texte original (il a tendance à partir sur d'énormes pavés pour dire peu de choses parfois).

Même si on peut avoir d'autres tutos pixel art à l'avenir, ça reste cool d'avoir ce tuto pour son importance culturelle et historique !

• The Almighty Grass Tile
• Obliterating "The Grid"
• The Gradient Tool Is Evil
• Breaking Up The Monotony
• De-Mystifying "The Greats"
• Secrets, Shortcuts, And Strategies
• The World Of Sprites
• Finally Making A Sprite
• Making a Fighting Game Sprite
• Breathing Life Into Your Sprites
• Animating a Basic Attack
• Thwarting Criminals With Selective Outlining
• Let There Be Light
• "The Faster You Move, The More You Can Do" va très (trop ?) en détail sur les outils de Photoshop et la discussion sur le choix du logiciel a vieilli. Mais ça reste intéressant à considérer, moderniser avec ce qu'on a écrit dans notre FAQ (ajd c'est plutôt Asprite vs Photoshop vs Paint)
• Running In Cycles
• Image de couverture remplacée (peut toujours être à nouveau changée)

• Introduction : à quoi sert un trailer ? pourquoi doit-on le fignoler ?
• Chapitre 1 : Le concept
  • Que va raconter votre trailer (hook)
  • Structure et rythme
• Chapitre 2 : Capturer le gameplay
  • Logiciels de capture
  • Faire une bonne capture : outils de debug, choisir le moment
• Chapitre 3 : Le montage
  • Logiciels de montage
  • Bases du montage
  • Créer des title cards
  • L'art du cut : rythme, gérer la musique et le son, gérer la fatigue oculaire

Inspiré par GRM et par le blog de XVW.

Après avoir lu une formation, et s'être arrêté en plein milieu, quand on reviens sur la formation, une pop up en haut s'affiche proposant de reprendre là où vous en étiez. Soit à la bonne section, et au bon sous titre de cette section.

zep a remplacé le manuel textuel par une page HTML plus sympa: https://www.lexaloffle.com/dl/docs/pico-8_manual.html
Les ancres ont changé, il faudrait adapter les liens comme par exemple celui pour les bitwise ops en fin de page https://fairedesjeux.fr/pico-8/techniques-avancees/manipuler-la-memoire/

Ajouter ici les petits détails de design à régler que l'on trouve.

• Conserver le sommaire de droite quand on scrolle aa181f0
• Dans le sommaire de droite, montrer la page dans laquelle on est
• Quelques pages pico8 n'ont pas de description. Toujours mettre une description au moins au chapitre.
• Embellir la scrollbar des blocs de code
• Ajouter une theme-color pour Chrome 16d6101
• Animations d'hover sur la page d'accueil
• Les embeds YouTube n'ont pas un ratio de 16:9, donc ça fait des bandes noires
• Aérer le design des tableaux dans l'esprit du wiki (on peut trouver des tableaux sur cette page)
• Fermer le menu mobile quand on appuie sur le logo
• Changer le comportement du sommaire qui s'ouvre/ferme
• Support des titres de profondeur 5 et 6 dans la table de contenu dfff821
• Style pour les h5 c95729e
• Le flex wrap de la liste des cours ne marche pas sur l'accueil, les cartes se chevauchent 5e74377
• Open graph
  • Titre open graph : "Page - Cours - Chapitre - FaireDesJeux.fr" 882f87a
  • Image open graph pour la page d'accueil 882f87a
  • Ajouter les tags pour une carte Twitter (Discord semble lire ces tags aussi) 882f87a
  • Description par page ou par chapitre 0e9bcff
  • Image par page ou par chapitre
• Rythme vertical dans les articles
  • Paragraphes
  • Images (avec ou sans sous-titre)
  • Bloc de code
  • Bulles

Bonjour à tous, nous sommes actuellement en phase de ruée vers la sortie du site. Afin de rendre la collaboration plus facile, nous avons décidé de créer ce ticket qui liste les choses à faire afin de sortir la version bêta du site

• Corriger le bug du menu sur mobile
• Favicon
• Opengraph
• Responsive tablette + #14
• Informations légales et liste des contributeurs dans le menu mobile
• Responsive bubbles
• Ajouter Youtube dans les socials
• Changer le repo ciblé par la liste des contributeurs

$page.section.next renvoie null plutôt que l'URL de la première section du chapitre suivant, depuis la commit d'Erika qui a notamment changer les chapter.json en chapter.md. Cela se traduit concrètement par l'apparition du bouton "Retour à l'accueil" plutôt que "J'ai compris !" à chaque section qui termine un chapitre.

A priori le bug se situerais dans gridsome.server.js, et serait peut-être lié à un moment où on assumerait la longueur du nom du fichier, l'extension étant maintenant plus courte cela pourrait briser le résultat.

Où j'en suis :
-> currentChapterId, tempMap[options.chapter].sectionCount, tempMap[options.chapter].sectionCount semblent renvoyer la bonne valeur
-> options.next dans les deux cas (if sectionCount > currentId et else if chapterCount > currentChapterId) semble renvoyer la bonne valeur
-> ${options.course}/${String(currentChapterId + 1).padStart(2, '0')}/01 renvoie la valeur que l'on veut (!!!) mais elle ne se retrouve pas quand on log options.next

update :
-> currentId ne renvoie pas les dernières sections de chaque chapitre !!!
-> le problème c'est const sectionCount = fs.readdirSync(sectionPath).filter((file) => file.endsWith('.md')).length; qui compte maintenant chapter.md en plus des .md des sections (et comptent donc une section de trop).

Fix in 54cb6e0

Statut actuel de l'issue : le projet est mis en pause pour une durée indéterminée en raison de l'indisponibilité du musicien avec qui je collabore.

Cette formation a pour objectif d'apprendre des concepts de base utiles à la composition pour des jeux indés. C'est un domaine assez complexe, où on apprend généralement beaucoup de théorie avant de donner plus de liberté aux étudiants. L'enjeu est donc de rendre la théorie fun, avec des illustrations concrètes, et de la limiter à ce qui est nécessaire pour commencer à composer des musiques de jeu.

• Introduction
• Solfège (en cours)
• Instrumentation
• Construire un morceau

J'ai testé tous les éléments Markdown qu'on utilise et deux ne fonctionnent pas sur les accueils de formation :

• les listes ordonnées et non ordonnées
• les bulles de personnages

Travail sur le header du site.

• logo
  • design
  • polish
• nav
  • design
  • récupérer données
• social

Actuellement le README du repo est celui de base de Gridsome. Il faudrait en écrire un

Le contenu devrait être assez similaire à ce qui se trouve actuellement dans la formation Comment Contribuer. C'est à dire un guide d'installation du repo, une description qui mentionne qu'est-ce que le projet est etc. On peut prendre pour exemple le README du wiki

"Formation" qui présente le site, son fonctionnement et contient un tutoriel complet pour contribuer sur le site.

• Introduction
• Avant Propos
  • Pourquoi FDJ ?
  • Charte de qualité
• Comment contribuer ?
  • Votre première contribution
  • Installer le site
  • Aide mémoire syntaxe