Présentation de l’atelier et accompagnement au suivi du tutoriel stencyl crash course en accompagnement avec les participants.

Déroulé de la première séance :
1. Accueil des participants (5 minutes).
2. Présentation de l'atelier (5 minutes).
3. Présentation des "types de jeux vidéo" sous forme ludique.
4. Présentation des métiers du jeu vidéo (5 minutes).
5. Timeline avec les grands jeux marquants afin d'échanger sur "la petite histoire du jeux vidéo", leurs dates de sorties et l'âge conseillé pour y jouer (10 minutes).
6. Création d'un jeu vidéo avec le tutoriel d'initiation "//Stencyl Crash Course//".

Matériel: PC sous Mac OS, Windows, ou Linux

Logiciel utilisé : Stencyl

Stencyl est un outil de développement de jeu vidéo qui permet de créer des jeux vidéo en 2D, à destination d'ordinateurs, de téléphones et du web. Son utilisation globale est gratuite et certaines options sont proposées en supplément payant. (source Wikipedia)

Stencyl utilise un langage de programmation par blocs, adapté à son utilisation par des débutants, des enfants et adolescents.

Tutoriel détaillé aux formats texte et vidéo sur notre page: **Stencyl, première prise en main avec le Kit de cours accéléré**

Définition du game design : processus de création et de mise au point des règles et autres éléments constitutifs d'un jeu.

Source : Wikipédia



Déroulé de la deuxième séance :
1. Accueil des participants (5 minutes).
2. Présentation de l'atelier (5 minutes).
3. Présentation des types de jeux réalisables avec Stencyl (voir liste ci-après) afin de découvrir les possibilités du moteur de création de jeu (15 minutes).
4. Création de l’univers, esquisse et game design sur papier (25 minutes).
5. Création d'un jeu vidéo avec Stencyl.

Jeux créés sous Stencyl

1. Reaching Finality, RPG Zelda like



2. Skull Face, jeu de plateforme



3. Tiny Island Adventure, jeu de plateforme



4. Reflex and dexterity test, jeu de réflexes



5. Autres exemples de Game Design
- Notice Me: jeu en équipe ; le but du jeu est de se faire remarquer, dans un espace public. Les points sont marqués en faisant plus de bruit que le bruit ambiant.
- Control, réflexion sur un game design où le pointeur de la souris est un personnage.

Définition du character design : spécialisation du game design dans la création des personnages et élements de décor interactifs.



Character designer, ou concepteur de personnages, est un terme utilisé notamment dans le monde de l'animation, de la bande dessinée (principalement comics et manga), au cinéma et dans les séries télévisées (notamment de science-fiction), ainsi que dans le jeu vidéo, pour désigner une personne chargée de créer la charte graphique, d'animation, et parfois, psychologique, des personnages d'un projet.

Le character designer peut aussi être la personne (ou une des personnes) qui doit représenter les personnages qu'il a créés tout au long du projet, mais son travail consiste avant tout à imaginer une représentation graphique des personnages. (source wikipédia)

Logiciel utilisé : Piskel
- Création des sprites acteurs
Voir le tutoriel de Piskel

Définition du level design : processus qui s'occupe de la réalisation des niveaux, ou « cartes », de jeu (level ou map en anglais). C'est une phase importante qui a son influence sur le gameplay final du jeu. Plutôt que de concevoir des règles comme le Game designer, le level designer applique les mécaniques de gameplay dans le niveau, essayant de tirer un tout plausible, cohérent et varié. Son rôle n'est pas de concevoir graphiquement les éléments mais de décider comment ils seront disposés à l'intérieur du niveau (obstacles, ennemis, bonus, décors...).

Le level design est bien plus que de la création de cartes jouables ; c'est la prise en compte de nombreux paramètres comme le gameplay général du jeu, l'évolution et le niveau du joueur, la crédibilité de la carte dans le seul but de procurer du plaisir ludique.

Source : Wikipédia



Différence entre level design et game design : Fonctions distinctes mais proches

Logiciel utilisé : Tiled
Création des tuiles : Tutoriel complet sur Tiled Map Editor

• Meshport
• THE MOD pour pouvoir convertir la map en format exploitable, STL ou OBJ, par un Slicer
• WorldEdit
• Beaucoup de fonctionnalités dans ce mod. Celle qui m'a intéressé et la fonction "deleteblocks" qui permet de supprimer des constructions entières d'un seul coup en délimitant une zone
• Simple Skins
• Un mod simple qui ajoute un onglet Skins à l'ouverture de l'inventaire. Parce que c'est chouette d'avoir un perso trop stylé et différents des autres joueurs
• Folks
• Le mod le plus simple que j'ai pu essayer afin d'ajouter des PNJ sur la map. De plus couplé avec Simpleskins on peut changer la tronche des PNJ
• Letters
• Permet d'ajouter des blocs avec des lettres et donc de pouvoir écrire sur les constructions (panneau etc.). Une lettre par bloc !
• More Ores
• Permet d'ajouter d'autres matériaux à l'inventaire (argent, or etc.)
• Multidecor
• Permet d'ajouter des fournitures, des décorations et divers éléments à l'inventaire (horloge, tables, chaises etc.)

• Minetest 5.
• Blender
• Prusa Slicer

• Wiki de Minetest
• Forum officiel de Minetest
• Wiki Zoomacom projet MVC Givors
• Site officiel de Minetest
• Guide utilisateur Minetest sur rennescraft
• IGN Minecraft pour générer la map
• Dépôt officiel des Mods Minetest

Téléchargez le kit du Cours accéléré

Ce cours accéléré nécessite le kit correspondant, appelé Crash Course Kit en anglais.

1- Téléchargez le dossier disponible ici.

Télécharger

Créer un nouveau jeu (partie 1 sur 5)

Centre d'accueil

Quand vous ouvrez Stencyl, vous arriverez sur un écran qui ressemble à celui-ci.


Ceci est le Centre d'accueil. A partir de celui-ci, vous pouvez soit créer un jeu, soit ouvrir un jeu existant.

Créer un nouveau jeu

1. Cliquez sur le rectangle en pointillé appelé "Cliquez ici pour créer un nouveau jeu"


2. Sélectionnez "Crash Course Kit" puis cliquez sur "Suivant" pour utiliser les ressources du fichier.

• Qu'est-ce qu'un kit ?
• Souvent, quand vous créez un jeu sur Stencyl, vous voudrez démarrer avec un kit. Un kit est un gabarit complet de jeu livré avec des ressources, des paramétrages et des logiques de jeu pré-construites.
• Le kit avec lequel vous commencez possède toutes les ressources nécessaires pour le Cours accéléré.

3. Ensuite, vous verrez apparaitre une fenêtre de dialogue s'ouvrir dans laquelle vous pouvez décider de la taille de la fenêtre de jeu (en pixels) et nommer votre jeu.

Nous allons l'appeler "Crash Course Game", mais vous pouvez l'appeler comme vous voulez.

À propos de cette étape Si vous animez un atelier consistant à accompagner des personnes à suivre ce tutoriel: si vous savez que plusieurs personnes différentes vont faire le même exercice sur le même ordinateur, demandez leur de mettre leur prénom dans le nom du nouveau jeu. En effet les différents jeux créés restent visibles dans le tableau de bord.

En paramétrant la Hauteur et la Largeur dans la section "Taille de l'écran (Web)", vous déterminez la taille de la fenêtre que verra le joueur quand il-elle joue à votre jeu. Dans notre exemple, nous partons avec une largeur de 640 et une hauteur de 480.

Cliquez sur le bouton Créer.


4. Vous êtes maintenant sur le Tableau de Bord, une zone centrale à partir de laquelle vous pouvez voir et ouvrir vos ressources de jeu (Types d'Acteurs, Arrières-plans, Sons, Comportements d'Acteurs,...)

Ressources de jeu (partie 2 sur 5)

Lors de cette seconde étape, on se contentera d'explorer les différentes ressources. Vous commencerez à programmer dans la troisième partie.


À partir du Tableau de Bord, vous pouvez créer de nouvelles ressources, ainsi qu'en importer et en ouvrir des existantes. Dans le Cour accéléré, nous avons ajouté toutes les ressources dont vous avez besoin pour commencer. Faisons un petit tour de l'interface.

Acteur Joueur

Nous commencerons par trouver le "Type d'Acteur" qui nous servira de personnage joueur.

Définition : dans Stencyl, tout ce qui peut bouger ou avec quoi il est possible d'avoir une interaction est considéré comme un Acteur. Ceci inclut les personnages joueurs, les ennemis, les éléments d'interface,... Un Type d'Acteur est un gabarit pour les Acteurs, alors que l'Acteur désigne un spécimen particulier appartenant à cette catégorie. Souvent, la communauté utilise les deux mots de manière indifférenciée.
Nous allons donc choisir notre personnage de départ, qui sera Noni, notre bloc vert.

Allez dans RESSOURCES, sélectionnez le Noni dans « Types d’Acteurs », double cliquez dessus pour le faire apparaître dans un nouvel onglet, qui sera l’éditeur de Noni, notre personnage.


L’éditeur de personnage est très important, c’est celui qui nous permet de personnaliser notre personnage, pour lui donner des actions. Si vous cliquez sur « Walk Right » par exemple, vous verrez toutes les animations image par image que Noni fera pour marcher vers la droite.

• Définition : l’Éditeur de type d'Acteur est l'un des nombreux éditeurs de ressources à l'intérieur de Stencyl. Il vous permet de customiser l'apparence, le comportement et les propriétés physiques d'un Acteur.

Acteur Ennemi

Revenez sur le Tableau de bord, grâce a l’onglet, et répétez l’action pour le Clown, qui jouera notre ennemi.


Tip: Prefer to open things up using the keyboard? Type Ctrl-O (or Command-O on Mac). This will bring up a dialog in which you can type the name of any resource. Use the arrow keys to fine-tune your selection and press Enter/Return to confirm your selection.

Tileset

Définition : un Tileset est un ensemble de tuiles rectangulaires qui peuvent être utilisé pour construire des niveaux de jeu (connues sous le nom de Scènes sur Stencyl), des éléments du décor.
Allez dans le tableau de bord, Jeux de Tuiles, double cliquez sur « Grass Land Tileset » (set de tuiles Herbe), vous l’ouvrirez dans un nouvel onglet, qui sera un éditeur de tuile. En l’occurrence, cette tuile sera le décor de notre jeu.

Sons

Vous remarquerez qu’il y a des sons, qui s’appellent « Jump » (Sauter) et « Stomp » (Écraser), vous pouvez les ouvrir dans un nouvel éditeur, celui du son, mais vous n’avez pas besoin de les modifier.

Comportements d'Acteurs

Dans LOGIQUE, allez dans Comportements d’Acteurs. Vous pouvez voir ci-dessous les cinq Comportements que nous utiliserons dans le Cours accéléré :


Vous pouvez ouvrir par curiosité « Die in a Pit and Reload » (Mourrir dans une fosse et Recharger), qui s’ouvrira dans un nouvel onglet, qui vous permettra de voir l’étendue de personnalisation possible.

Cette personnalisation se fait sous forme de programmation par blocs. Dans ce que Stencyl appelle Aperçu de Code ou Design Mode.

Toutes ces lignes expliquent en fait que « Si Noni tombe dans un trou, il meurt, et le jeu recharge à un point antérieur, avant la mort ».

Remarque : les Comportements contrôlent toutes les logiques de jeu et les interactions des joueurs ; c'est ce qui fait "avancer" le jeu.

Jetons un coup d'oeil rapide à l'intérieur de ces Comportements. Double-cliquez sur "Walking" pour l'ouvrir, à l'intérieur du Design Mode.


Il y a de nombreuses choses à voir ici, mais nous n'en parlerons pas dans ce tutoriel. Le Design Mode est un outil puissant qui permet de concevoir des logiques de comportement complexes. Stencyl propose un tutoriel complet (en anglais) portant sur ce sujet pour vous aider à appréhender les possibilités de cet éditeur de code. Pour le moment, contentez-vous de savoir qu'il existe.

Note: Stencyl propose aussi un "vrai" éditeur de code pour ceux qui préfèraient tout coder à la main au clavier.

Sauvegarde

N’oubliez pas de SAUVEGARDER fréquemment !

Personnalisation des personnages (partie 3 sur 5)

(Nous avons déjà quelques Types d'Acteurs dans notre jeu, mais ils ne sont pas encore très intéressants, car sans Comportements, les Types d'Acteurs ne peuvent pas faire grand chose.)

Créer un groupe d'Ennemis

Avant de passer à l’étape de customisation de nos Acteurs, créons rapidement un Groupe pour y mettre les Ennemis.

Définition : les Groupes sont utilisés pour déterminer quels Types d'Acteurs entrent en collision avec quels autres Types d'Acteurs. Les Groupes vous permettent également de traiter différemment les classes de Types d'Acteurs. Un article entier (en anglais) est dédié aux Groupes et à leur impact sur les collisions.
Allez dans « Paramètres », au dessus des onglets, sélectionnez Groupes, Créer Nouveau (bouton vert ), appelez-le « Ennemis ».

Cliquez ensuite sur Joueurs et Tuiles : tout ce qui trouve dans ce groupe peut rentrer en collision avec les Joueurs et les Tuiles.


Cliquez sur Ok.

Personnalisons Noni

Ouvrez l’onglet Noni.

Nous avons un personnage, il nous faut maintenant lui dire comment nous voulons qu'il agisse et réagisse (des Comportements) dans certaines conditions. Nous voudrions qu'il puisse:
- regarder à gauche et à droite
- marcher, dans les deux directions
- sauter, dans les deux directions
- sauter sur des ennemis
- "mourrir s'il tombe dans un trou"

Allez dans propriétés afin de vérifier que Noni se trouve dans le groupe des Joueurs.


Allez dans Physiques pour vous assurer que Noni ne puisse pas tourner. Ici c’est une mauvaise traduction du logiciel, en anglais le logiciel utilise le terme « Rotate », cochez Non afin que les pieds de notre personnage soient toujours au sol.


Allez ensuite dans la section Comportements, là où se déroule l'essentiel de la personnalisation. En cliquant sur le bouton Comportements, vous verrez apparaitre l'image suivante :


Double cliquez sur Walking pour ouvrir l’éditeur de comportements. Vous remarquez alors que le logiciel n’est pas complètement traduit en français :
- Right veut dire Droite
- Left veux dire Gauche

Paramétrez de la façon suivante :
- Pour Move right key, qui signifie "Touche pour se déplacer à droite", choisissez Right sur la liste déroulante.
- Pour Move left key, choisissez Left.

Cela veut simplement dire que si vous appuyez sur la touche qui fait se déplacer à droite, Noni ira à droite.

Laissez la Speed (Vitesse)à 15

Pour Idle Right Animation, qui signifie "Animation du déplacement sur la droite", cliquez sur Choisir une Animation, sélectionnez celle qui s'appelle Idle Right.


Répétez pour les 3 autres animations en dessous.

BRAVO, vous avez édité votre personnage de base ; il peut regarder à droite, et à gauche, il peut aussi marcher à droite, et à gauche !


Maintenant, faisons-le sauter

Pour ajouter un comportement, cliquez sur la flèche sur le côté gauche.


Vous pouvez ensuite cliquer sur la case centrale en pointillés Cliquez ici pour ajouter un Comportement à attacher à ce Type d'Acteur.


Sélectionnez « Jumping » en double cliquant :
- pour Jump Key mettez Action 1
- laissez la force du Jump à 40
- ajoutez le son Jump
- Mettez les animations Jump Left et Jump Right dans les cases adéquates

Voilà le rendu que vous devez obtenir, ci-dessous.


Recommencez la manœuvre pour ajouter un Comportement et sélectionnez Stomp on Enemies (Écraser les ennemis), puis :
- mettez "Enemis" dans Stompable Groupe
- et "action 1" pour Jump Key



Ajoutez de la même manière Die in a Pit and Reload, vous n’avez rien a configurer dedans.


VOILA ! Vous avez fini avec Noni : il se déplace, il saute, ses deux pieds seront toujours sur le sol et s’il saute sur un élément que vous avez ajouté dans le groupe Ennemis (à savoir le Clown, dans notre exemple), il va l'écraser. Par contre s’il tombe dans un trou, il meurt.

À propos de cette étape Si vous animez un atelier consistant à accompagner des personnes à suivre ce tutoriel, il peut être plus intéressant de ne pas ajouter le comportement Die in a Pit and Reload à l'étape de personnalisation de Noni. Lorsque les participants en seront à l'étape de Test du jeu, ajoutez une "fosse" à la scène et faites-y tomber Noni hors de l'écran. Constatez qu'il ne se passe rien mais qu'on perd le personnage: le jeu continue mais on ne peut plus jouer! Expliquez alors pourquoi et montrez comment faire pour corriger le bug.

Astuce : les contrôles attribués aux différentes actions et touches se réglent dans Paramètres > Contrôles. Par ex. Action 1, que vous avez indiquée pour faire Sauter Noni, correspond par défaut à la touche Z du clavier. Si vous préférez lui attribuer une autre touche, modifiez les contrôles en conséquence.

Personnalisons le Clown

Allez dans l’onglet Clown : ce sera beaucoup plus rapide, car il demande bien moins de customisation.

Allez dans Propriétés, et ajoutez-le au groupe « Ennemis »

Allez dans Comportements, et ajoutez lui « Stompable » (Piétinable), donnez l'animation et le son « Stomped » (Piétiné), et laissez les valeurs 50 et 40.

Comme vous pouvez le constater, ce comportement rend le clown "piétinable" comme un Goomba dans Super Mario Bros. Le clown "meurt" lorsqu'il est frappé par le haut et émet un son lorsque cela se produit. Si vous cliquez sur le bouton "Modifier le comportement", vous pouvez jeter un coup d'œil au "code" qui se trouve derrière ce comportement.

SAUVEGARDEZ !

Créez une nouvelle Scène (partie 4 sur 5)

Définition : Les scènes sont des niveaux de jeu qui contiennent des tuiles et les acteurs que nous avons créés. Vous pouvez même joindre des Comportements aux scènes, mais nous ne le ferons pas dans ce tutoriel.

Dans le Tableau de Bord', allez dans Scènes, et créez-en une en cliquant sur la case en pointillés au centre.

Donnez un nom à la scène

"Scene principale" (sans accent, logiciel anglais oblige) par exemple. Laissez les valeurs par défaut.


Notez bien les champs Largeur et Hauteur des tuiles. Il est impératif qu'ils correspondent à la taille des tuiles des jeux de tuiles que vous utilisez. La taille des tuiles de notre jeu de tuiles est de 32x32, nous laisserons donc ces champs inchangés.


Dans Couleur de l'Arrière-Plan :
- choisissez "Dégradé Vertical" dans la liste déroulante,
- puis "Sky Blue" et "Light Turquoise" pour les couleurs du fond de décor (vous pouvez choisir d'autres couleurs si vous le désirez), en cliquant sur les zones blanches à droite du menu déorulant,
- Cliquez sur Créer.


Vous êtes maintenant dans un onglet qui s’appelle Scene Principale

Ajouter des Tuiles

Prenez le Crayon sur la gauche. Il est sélectionné par défaut, normalement.


Cliquez sur une Tuile de couleur verte, en haut à gauche


Placez-la au bas de votre Scene principale pour commencer le sol de votre Tuile


Puis cliquez au milieu de la Tuile verte


Et cliquez à la suite du sol déjà construit, soit plein de fois à la suite, soit en maintenant le clic gauche de la souris, jusqu'à arriver à l'avant dernière case


Faites ensuite un raccord, avec le coin supérieur droit. Vous devez d’abord cliquer sur la tuile, puis la scène, comme précédemment.

Placer les Acteurs

Nous allons placer les acteurs :

Allez dans Acteurs en haut à droite, double cliquez sur Noni pour le sélectionner


Placez Noni plutôt à gauche de votre Scène, et placez un ou des clowns (plutôt à droite pour le coup)

Astuce : pour être sur de bien coller les Acteurs à la Tuile (pour qu'ils marchent bien dessus, qu'ils ne "flottent" pas), appuyez sur la touche SHIFT de votre clavier tout en déplaçant les déplaçant

Ajoutez la gravité

Dans le menu « Main Scene », allez dans Physique, et dans Gravité Verticale, mettez la valeur à 85


À propos de cette étape Si vous animez un atelier consistant à accompagner des personnes à suivre ce tutoriel, il peut être plus intéressant de sauter cette étape et tester le jeu. Ce qu'il va se produire, c'est que dès qu'un personnage Noni ou les clowns vont décoller du sol, ils vont s'envoler. Ce sera l'occasion d'expliquer pourquoi (le principe de la simulation de la physique dans les jeux vidéo) et comment résoudre ce problème.

SAUVEGARDEZ !

Testez votre jeu !! (partie 5 sur 5)

Cliquez sur tester la scène dans la barre de menu. Le jeu va se compiler et s'afficher dans une nouvelle fenêtre.

Si vous ne les avez pas modifiés, les contrôles par défaut sont: touche Z pour sauter, touches flèches <- et -> pour se déplacer.

Essayez de sauter sur par dessus et sur les clowns.

Si vous avez bien ajouté le comportement « Die in a Pit and Reload » si Noni tombe et sort du bas de l'écran, la scène va se recharger et le jeu redémarrer au début.

• Note: vous pouvez rapidement tester votre jeu à n'importe quel moment en utilisant le raccourci-clavier Ctrl-Entrée (ou Command-Entrée sur Mac).

Les ennemis ne sont pas bien aggressifs ni bien dangereux.

Comment faire pour que le jeu s'arrête et recommence si Noni touche un clown?

Il faut créer un nouveau comportement pour ça. Et il y aura plusieurs façons d'arriver au même résultat.

Essayez un Comportement d'Acteurs
- de type "Collision"
- entre Groupes
qui indique que
SI le côté droit d'un acteur du Groupe Joueurs est touché par un acteur du Groupe Ennemis
SI le côté gauche...
ALORS
le jeu se recharge après un fondu au noir d'une seconde.


Ça vous a plu? Vous en voulez encore? Essayez donc le Crash Course 2: la réalisation d'un jeu "à la Space Invaders".

• Tutoriel en vidéo et en français sur la chaîne YT Stencyl
• Tutoriels FR: https://youtu.be/Afo0Keq-qbA. Tutoriel officiel en anglais sur stencil.com: https://www.stencyl.com/help/view/crash-course-invaders-1/
• Ressources (Assets) à utiliser: http://static.stencyl.com/pedia2/ch1/cc2/assets.zip

Pour commencer nous allons donc créer une licorne qui vomit un arc-en-ciel et qui, aulieu de mourir fais caca pendant genre 10 secondes (c'est une idée qui vaut ce qu'elle vaut, je vous l'accorde...)
Alors, on commence par ouvrir le logiciel Piskel, téléchargé au dessus, et on « Resize » le sprite en 50*50px.

Première frame

Clique sur « pen tool » pour commencer à tracer le contour de ton dessin pixel par pixel.
Pour agrandir ou réduire ta zone de dessin, joues avec la molette de ta souris. Une fois que tu as tracé ton dessin, tu va créer un nouveau calque pour la couleur de ton dessin :
Va sur fenêtre « layers » (calques, ou couches) à droite et tu cliques sur + pour créer un nouveau layer.
Sur ce calque, tu vas ajouter la couleur à ton dessin.

Créer un calque te permet de mieux gérer les différentes parties de ton dessin.

Seconde frame

Ensuite, tu vas dupliquer ta Frame. Sur ta frame en haut a gauche tu survoles et cliques sur Duplicate this frame. Cette seconde frame va nous permettre de faire bouger les pattes des licornes vers l’avant.

En dupliquant la 1re frame, tu as copié l’intégralité du dessin (donc les 2 layers)

Tu as donc besoin sur la 2e frame de bouger les jambes vers la droite. Pour cela, tu effaces une partie de la jambe et la refais en la décalant sur la droite.
Ensuite tu vas sur le second layer et tu bouges aussi la couleur des sabots, car comme tu as bougé le contour des pattes, la couleur doit bouger aussi.

Troisième frame

De nouveau, tu vas dupliquer la 1re frame. Cette troisième frame va nous permettre de faire bouger les pattes de la licorne vers l’arrière.
Tu as donc besoin sur la 3ᵉ frame de bouger les jambes vers la gauche.

Pour cela, tu effaces une partie de la jambe et la refais en la décalant sur la gauche.

Ensuite tu vas sur le second layer et tu bouges aussi la couleur des sabots, car comme tu as bougé le contour des pattes, la couleur doit bouger aussi.

Quatrième frame

De nouveau, tu vas dupliquer la 1re frame. Cette quatrième frame va nous permettre de créer le vomi arc-en-ciel
Pour ce faire, tu vas sur le layer 2 et tu créés un arc-en-ciel au niveau de la bouche de la licorne.

Cinquième frame

De nouveau, tu vas dupliquer la 1re frame. Cette cinquième frame va nous permettre de créer le « caca d’attente » (au lieu de perdre et de recommencer au début du niveau, tu dois attendre et regarder la licorne faire caca pendant 10 secondes).

Pour ce faire, tu vas sur le layer 2 et tu créés un caca au niveau de la croupe de la licorne.

Les frames et les calques sont importants pour pouvoir retoucher facilement les différents mouvements de ton dessin, si tu faisais tout le dessin sur un seul et même frame ou layer, tu serais obligé d’effacer a chaque nouvelle idée et surtout tu ne pourrais pas créer une animation.

Voila pour le tutoriel Piskel Licorne, maintenant que tu sais faire la licorne, un monde nouveau s'ouvre à toi!

Menus à gauche de l'écran (partie gauche)

Menu des Outils

1 Pen size / Taille du stylo : Il permet de jouer avec la taille du stylo, il part d'un point de 1px (1 carré) pour arriver a 4px (16 carrés) au maximum.

2 Pen tool / Outil stylo : Il permet de dessiner. C'est avec lui que vous allez créer les "points pixel" qui serviront à construire votre "pixel art".

3 Vertical mirror pen / Stylo miroir vertical : comme le stylo, il permet de dessiner mais cette fois avec un effet miroir vertical (suivant l'axe vertical).
Si vous dessinez avec le stylo miroir à gauche de votre "feuille", le même dessin sera créé symétriquement à droite.
Si vous appuyez simultanément sur la touche CTRL alors que vous dessinez, c'est avec l'axe horizontal que l'effet miroir sera créé.
Et si vous appuyer simultanément sur la touche shift / MAJ c'est avec l'axe horizontal et vertical que vous dessinerez.

4 Paint bucket tool / Outil pot de peinture : Il permet de remplir un carré, un groupe de carré ou le fond de l'image avec la couleur unie de votre choix.

5 Paint all pixels of the same color / Peindre tous les pixels de la même couleur : Il permet de peindre tous les carrés de la même couleur.
Si vous appuyer simultanément sur la touche CTRL, vous appliquerez cet effet à tous les calques.
Si vous appuyer simultanément sur la touche Shift / MAJ, vous appliquerez cet effet à tous dessins / frames.

6 Eraser tool / Outil gomme : Comme son nom l'indique, il permet de gommer. Comme pour l'outil stylo, on fait varier sa taille avec l'outil "Pen size / Taille du stylo".

7 Stroke tool / Outil ligne et diagonale : Il permet de créer des lignes et diagonales en partant d'un point fixe.
En appuyant simultanément sur shift / MAJ, la diagonale ou ligne reste droite.

8 Rectangle tool / Outil rectangle : Il permet de créer le contour d'un rectangle (vous pouvez ensuite le remplir avec l'outil pot de peinture).
En appuyant simultanément sur shift / MAJ, vous maintiendrez un rapport de 1 à 1, cela veut dire que votre rectangle ne sera pas déformé.

9 Circle tool / Outil cercle : Il permet de créer le contour d'un cercle (vous pouvez ensuite le remplir avec l'outil seau de peinture).
En appuyant simultanément sur shift / MAJ, vous maintiendrez un rapport de 1 à 1, cela veut dire que votre cercle sera un vrai cercle et ne sera pas déformé (ovale).

10 Move tool / Outil mouvement : Il permet de déplacer votre dessin.
Si vous appuyer simultanément sur la touche CTRL, vous appliquerez cet effet à tous les calques.
Si vous appuyer simultanément sur la touche Shift / MAJ, vous appliquerez cet effet à tous les dessins / frames.
Si vous appuyer simultanément sur la touche ALT, cela aura pour effet de "cloner" votre dessin.

11 Shape selection / Choix de la forme : Cet outil vous permet de sélectionner et de faire glisser la "forme / sélection" de votre choix.
Si vous appuyer simultanément sur la touche CTRL+C, vous copiez la zone sélectionnée.
Si vous appuyer simultanément sur la touche CTRL+V, vous collez la zone sélectionnée.
Maintenez la touche shift / MAJ pour déplacer le contenu.

12 Rectangle selection / Sélection rectangulaire : Il permet de sélectionner un élément via une forme rectangulaire.
Si vous appuyer simultanément sur la touche CTRL+C, vous copiez la zone sélectionnée.
Si vous appuyer simultanément sur la touche CTRL+V, vous collez la zone sélectionnée.
Maintenez la touche shift / MAJ pour déplacer le contenu.

13 lasso selection / Sélection au lasso : Il permet de sélectionner un élément en créant une forme libre de votre choix. Avec le lasso vous créez vous-même la forme de la zone que vous voulez sélectionner.
Si vous appuyer simultanément sur la touche CTRL+C, vous copiez la zone sélectionnée.
Si vous appuyer simultanément sur la touche CTRL+V, vous collez la zone sélectionnée.
Maintenez la touche shift / MAJ pour déplacer le contenu.

14 Lighten / Éclaircir : Cet outil vous permet d'éclaircir ou d'obscurcir les pixels de votre dessin, il permet aussi de créer une sorte de dégradé.
Si vous appuyer simultanément sur la touche CTRL, vous allez obscurcir la partie souhaitée.
Si vous appuyer simultanément sur la touche shift / MAJ, vous allez appliquer l'effet une seule fois par pixel.

15 Dithering tool / Outil de tramage : Il permet de créer une trame, un damier de couleurs choisies.

16 Color picker / Sélecteur de couleurs : Il permet de sélectionner une couleur pour pouvoir s'en servir sur une autre forme, calque ou dessin.

Autres

L'éditeur de couleur

Il y a 2 carrés de couleur, l'un pour la couleur première et l'autre pour la secondaire, en cliquant sur le carré vous choisissez la couleur que vous souhaitez, soit à l’aide de l’outil Pipette, des panneaux Couleur et Nuancier ou avec les couleurs sous forme de valeur hexadécimale (#000000).

Frame / Cadre

Le cadre / Frame est votre fenêtre de "dessin".

On peut créer autant de frame que l'on veut, les frames sont comme des calques, ils sont utilisés pour effectuer des opérations telles que la composition d’images multiples, l’ajout de texte à une image ou l’ajout de formes à une image vectorielle.
Il peuvent être déplacés de haut en bas pour choisir leurs niveaux d'importance.
Ils peuvent aussi être dupliqués.
Il faut vraiment les imaginer comme des feuilles de papier calque.

Pour la partie droite

1 Fenêtre de visualisation : Avec cette fenêtre vous pouvez visualiser en direct votre animation.
Vous pouvez régler la taille de votre animation :
Original size preview / Aperçu du format original
Best size preview / Aperçu du meilleur format
Full size preview / Aperçu du format en taille réelle.

- Toggle Grid / Basculer la grille : Il vous permet de faire apparaitre ou non la grille pour créer votre dessin.
- Open preview in popup / Ouvrir la prévisualisation dans une fenêtre popup: Permet d'ouvrir et de visualiser l'animation dans une nouvelle fenêtre.

2 Toggle onion screen / "Basculer à la visualisation en "couches d'oignon": Permet de visualiser ou non les différents "frames et layers" sur votre fenêtre principale.

3 Curseur FPS : Le curseur permet d'augmenter ou de diminuer la vitesse de votre animation.

4 Layers / Couche : Sensiblement la même chose que Frame, a la différence près que les "dessins" créés avec "layers" sont fixes, ils ne bougeront pas au sein de votre animation.

Partie "Transform"

5 Flip vertically / Basculer verticalement : Il applique un effet miroir vertical à votre dessin.
Si vous appuyez simultanément sur la touche ALT, vous appliquez un effet miroir horizontal.
Si vous appuyez simultanément sur la touche Shift / MAJ, vous appliquerez cet effet à tous dessins / frames.
Si vous appuyez simultanément sur la touche CTRL, vous appliquerez cet effet à tous les layers .

6 Counter-clockwise rotation / Rotation dans le sens inverse des aiguilles d'une montre : Permet de faire tourner votre "dessin" dans le sens inverse des aiguilles d'une montre.
Si vous appuyer simultanément sur la touche ALT, vous ferez tourner votre dessin dans le sens des aiguilles d'une montre.
Si vous appuyer simultanément sur la touche Shift / MAJ, vous appliquerez cet effet à tous dessins / frames.
Si vous appuyer simultanément sur la touche CTRL, vous appliquerez cet effet à tous les layers.

7 Clone current layer to all frames / Cloner le calque sur toutes les frames / images : Il permet de cloner votre dessin sur toutes les frames que vous avez créées. Attention: il clone la frame active (celle qui est entourée de jaune).

8 Align image to the center / Aligner et centrer votre image : Il permet d'aligner et de centrer correctement votre image.
Si vous appuyer simultanément sur la touche Shift / MAJ, vous appliquerez cet effet à tous les dessins / frames.
Si vous appuyer simultanément sur la touche CTRL, vous appliquerez cet effet à tous les layers.

9 Crop the sprite / recadrer le sprite (zone de dessin) : Cet outil vous permet de recadrer votre zone de dessin, mais attention, l'outil est appliqué sur toutes les frames et layers en même temps.

10 L'outil palette vous permet de prédéfinir des couleurs pour ensuite vous en servir via l'éditeur de couleur.
En cliquant sur le petit icone stylo, vous pouvez gérer la palette, une fenêtre s'ouvre et vous pouvez ajouter ou supprimer et renommer des palettes de couleurs.

Barre de menu

- Préférences :
1 Settings / Misc :
Background: Permet de régler la luminosité et le contraste du fond "transparent" de votre sprite / dessin.
Layer opacity : Permet de régler l'opacité et donc la visibilité de vos layers.
Maximum FPS : Permet de régler la vitesse maximum pour le curseur FPS vu ci-dessus.
Color format : Permet de choisir le format de couleur RGB ou HEX.

Settings / Grid (grille):
Enable grid / activer la grille : Permet d'activer ou non la grille pour dessiner les "carrés".
Grid size / taille de la grille : Permet de gérer la taille de la grille en pixel.
Grid spacing / Espacement de la grille : Permet de gérer l'espacement de la grille en pixel.
Grid color / Couleur de la grille : Permet de gérer la couleur de l'espacement de la grille.

Settings / Tile mode ( Mode carrelage):
Enable tile mode / Activer le mode carrelage : Activer ou désactiver le mode carrelage.
Mask opacity / Opacité du masque : Permet de gérer la transparence du mode carrelage.

2 Resize / Redimensionner :
Permet de redimensionner votre "dessin".
(widtht/largeur),(height/longueur)
Maintain aspect ratio / Maintenir le rapport hauteur/largeur : Cocher cette case permet de ne pas déformer votre dessin, vous l'agrandissez mais dans des proportions égales au dessin de base.
resize canvas content / redimensionner le contenu du canevas : Permet de redimensionner le contenu du canvas.

Default size / Dimension par défaut : Permet de définir les dimensions par défaut de vos dessins.

3 Save / Sauvegarde :
Sprite information : Vous pouvez ici, créer un titre et une description pour votre sprite/dessin

Save offline as file / Enregistrer hors ligne sous forme de fichier : Votre fichier sera enregistré sur votre pc sous le format ".piskel".

Save offline in browser / Enregistrer hors ligne dans votre navigateur :
Save Online : Permet de sauvegarder directement sur le site internet piskelapp.com si vous avez créé un compte utilisateur au préalable.

4 Export / Exporter
Scale / Mettre a l'échelle : Permet de mettre à l’échelle en maintenant les proportions (Aspect ratio).
GIF,PNG,ZIP...: permet d'exporter votre dessin au format désiré.

5 Import / Importer :
Load from browser / Importer à partir du navigateur
Load .piskel file / Importer un fichier .piskel depuis votre ordinateur.
Import from picture / Importer une image.
Recover recent sessions / Récupérer les sessions précédentes : Permet de récupérer vos sessions précédentes et travailler dessus.

Au sens large, le retrogaming est le fait de jouer à des jeux vidéo antérieurs à la génération actuelle de consoles ou d’ordinateurs. Une autre définition, plus restrictive, limite ces jeux aux consoles ou ordinateurs qui ne sont plus disponibles sur le marché. Le retrogaming irait donc des tout premiers jeux vidéo à la console Dreamcast de Sega (fin de production en 2001).
Plus d'exemple de de définition ici : https://www.retrogaming.fr/le-retrogaming-definition/

Consoles de jeux vidéo : de 1970 à 2022 https://www.youtube.com/watch?v=IG_jsIZLJdM

Les objectifs pédagogiques :

• Examiner les compétences psychosociales
• Expérimenter le jeux vidéo en famille
• Comparer et défendre son point de vue sur les apports des différents jeux vidéo (compétences psychosociales)

Les compétences psychosociales :

• Savoir gérer ses émotions
• Avoir une pensée critique
• Savoir communiqué efficacement

Cette animation est basée sur les compétences acquises en jouant aux jeux vidéo, animation a vivre pendant un temps parents/enfants.
En nous basant sur le stock conséquent de jeux vidéo et de consoles que possède zoomacom, nous avons classé les jeux en 10 catégories :

• Combat (street fighter 2, soul calibur, tekken 2)
• Beat them all (street of rage)
• Plates-formes (super mario bros, rayman)
• Shoot them up (parodius, starwing)
• Tir objectif (Tomb raider, die hard trilogy)
• Tir subjectif (Golden eye 007, Alien trilogy)
• Puzzle (bust a move 2, Dr mario)
• Combat motorisé (mario kart, vigilante 8)
• Course ( Gran turismo, V-rallye)
• Sport (Fifa, california games)

Les jeux retenus ont été testés et examinés afin de mieux comprendre leurs fonctionnement et les compétences que l’on peut développer en jouant à ceux-ci.

Les compétences psychosociales

“Les compétences psychosociales sont la capacité d’une personne à répondre avec efficacité aux exigences et aux épreuves de la vie quotidienne. C’est l’aptitude d’une personne à maintenir un état de bien-être mental, en adoptant un comportement approprié et positif à l’occasion des relations entretenues avec les autres, sa propre culture et son environnement” (Source OMS)

Ces compétences, essentielles et transculturelles, sont étroitement liées à l’estime de soi et aux compétences relationnelles. L’OMS en identifie 10 principales, qui vont par deux :

• Savoir résoudre les problèmes/Savoir prendre des décisions
  • Avoir une pensée critique/Avoir une pensée créatrice
  • Savoir communiquer efficacement/Etre habile dans les relations interpersonnelles
  • Avoir conscience de soi/Avoir de l’empathie pour les autres
  • Savoir gérer son stress/Savoir gérer ses émotions

Ce sont ces compétences que l’on a choisies pour parler des jeux vidéo avec les parents et leurs enfants.

L’idée pendant cette activité rétrogaming est d’expliquer les compétences psychosociales aux parents et aux enfants, de laisser à disposition le “visuel” et de commencer à jouer.
Les parents et les enfants jouent ensemble aux jeux choisies et toutes les 10 min environ, ils doivent noter les compétences qu’ils pensent avoir développé pendants ce temps de jeux et changer pour le jeu suivant.

Le fait de lister les compétences acquises pendant le jeu permet aux parents comme aux enfants de mieux comprendre ce qu’ils viennent de vivre à travers ce jeu, ils en discutent, débattent pour arriver a un consensus ensemble.
A la fin de l’animation ou de chaque jeux, un temps collectif ou par “famille” permet d’échanger ensemble sur les compétences acquises pendant l’animation, de les lister, de mettre en lumière les apports des différents jeux et permettre de mieux comprendre pourquoi on joue et ce que ça nous apporte.

Une fois la méthode d’animation expliquée, place aux règles du jeux, elles sont simples :

En gros, 8 min sur chaque jeux, sachant que pour le premier tour 10 jeux sont testés, ça nous donne 80min ou 1h20, sachant que le temps de mise en place sera d’une vingtaine de minute.
Toutes les 8min vous userez donc d’un klaxon pour faire changer tout le monde de console.
Le reste du temps permettra de tester d’autres jeux “pour le fun” uniquement.

Le matériel nécessaire pour cette animation

Pour une animation parents / enfants :

• • 10 consoles
• • 1 jeux par console

| **Consoles **       | **Jeux**                 |
| Sega master system  | World Cup 93             |
| snes                | NBA Jam                  |
| Megadrive           | Terminator 2 arcade game |
| Playstation         | Tekken 2                 |
| Saturn              | Parodius                 |
| Nintendo 64         | Golden eye               |
| Xbox                | Sega GT 2002             | 
| Dreamcast           | Bust a move 4            |
| Game cube           | Mario Kart               |
| PS2                 | FIFA 09                  |

• • 10 tv cathodiques
• • Rallonges + multiprises
• • Affiches retrogaming (dans le kit)
• • Fiches retrogaming (à imprimer)
• • 14 crayons de papier
• • 1 klaxon

lexique des jeux vidéos