Découverte et initiation à 6 outils de programmation créative à utiliser en atelier de création numérique : Scratch, Makey Makey, TouchBoard, Wick Editor et RenPy
2. Le code informatique est partout autour de nous, il permet de faire
fonctionner votre ordinateur, votre smartphone, votre micro-onde, votre
voiture, etc …
Julien Devriendt - CC BY-SA-NC
3. Pourquoi faire des ateliers de création créative en bibliothèque ?
Faciliter le développement
des compétences de base
pour utiliser l'information et
l'informatique
Julien Devriendt - CC BY-SA-NC
4. Accompagner la littératie numérique
L'aptitude à comprendre et à utiliser le
numérique dans la vie courante, à la maison, au
travail et dans la collectivité en vue d’atteindre
des buts personnels et d’étendre ses
compétences et capacités
Rapport du Conseil national du numérique, « Citoyens d’une société numérique » Julien Devriendt - CC BY-SA-NC
5. Stimuler l’imagination et la créativité des plus jeunes
Faire des outils numériques des outils
d’expression et de création
Julien Devriendt - CC BY-SA-NC
6. Jay Silver co-créateur de la carte Makey Makey
Invention literacy is the ability to read and write human made stuff,
from toasters to apps. People think inventors perform magic, but
invention is no more magical than reading and writing a sentence.
There is a grammar to inventing from mechanical tools, to design
thinking, coding, and beyond. There is a literature of inventions, from
bicycles to televisions, all around us to draw inspiration from. Just as
Thoreau read Emerson’s writings, so too did Edison read Tesla’s
inventions.
Julien Devriendt - CC BY-SA-NC
7. Qu’est-ce qu’un programme ?
Si la touche « espace »
est appuyée,
Alors le
fi
chier « Miaou »
est lu
Julien Devriendt - CC BY-SA-NC
8. A chaque fois qu’un signal est détecté : un bouton appuyé, un écran tactile
touché, il y a un programme qui indique à l’appareil ce qu’il doit faire
Si la touche « espace »
est appuyée,
Alors le
fi
chier « Miaou »
est lu
Julien Devriendt - CC BY-SA-NC
9. Si la touche « espace »
est appuyée,
Alors le
fi
chier
« Miaou » est lu
Condition
ou
signal détecté
Tâche à e
ff
ectuer
A chaque fois qu’un signal est détecté : un bouton appuyé, un écran tactile
touché, il y a un programme qui indique à l’appareil ce qu’il doit faire
Julien Devriendt - CC BY-SA-NC
10. Condition
ou
signal détecté Tâche à e
ff
ectuer
onEvent('keypressed', function () {
playSound("miaou.mp3")
});
A chaque fois qu’un signal est détecté : un bouton appuyé, un écran tactile
touché, il y a un programme qui indique à l’appareil ce qu’il doit faire
Julien Devriendt - CC BY-SA-NC
11. Condition
ou
signal détecté Tâche à e
ff
ectuer
onEvent('keypressed', function () {
playSound(« miaou.mp3")
});
A chaque fois qu’un signal est détecté : un bouton appuyé, un écran tactile
touché, il y a un programme qui indique à l’appareil ce qu’il doit faire
Julien Devriendt - CC BY-SA-NC
13. Scratch simplifie l'initiation à la programmation en proposant
une interface de programmation graphique
onEvent('keypressed', function () {
playSound(« miaou.mp3")
});
=
Julien Devriendt - CC BY-SA-NC
14. Même si la présentation est différente, la logique de programmation
et le résultat obtenu restent identiques
Condition
ou
signal détecté
Tâche à e
ff
ectuer
Julien Devriendt - CC BY-SA-NC
17. Il est également possible de télécharger le logiciel :
https://scratch.mit.edu/download
Julien Devriendt - CC BY-SA-NC
18. Que peut-il faire ?
Des films d’animation, des jeux, des installations interactives, . . .
Julien Devriendt - CC BY-SA-NC
Julien Devriendt - CC BY-SA-NC
30. Si vous disposez d’un micro vous avez la possibilité de
vous enregistrer directement dans Scratch
Julien Devriendt - CC BY-SA-NC
31. Si vous disposez d’un micro vous avez la possibilité de
vous enregistrer directement dans Scratch
Julien Devriendt - CC BY-SA-NC
32. Conseil :
Si votre PC ne possède pas de micro, vous pouvez brancher vos écouteurs de
téléphone sur la prise casque de votre PC. Julien Devriendt - CC BY-SA-NC
33. Les barres rouges permettent de raccourcir votre enregistrement
En cliquant sur « Jouer » vous obtenez un aperçu
Cliquez sur « Sauvegarder » pour valider votre enregistrement
Julien Devriendt - CC BY-SA-NC
34. Modifier le nom de votre enregistrement
Mettez un nom explicite faisant référence au contenu du fichier. Cela facilitera
l’organisation de votre projet Julien Devriendt - CC BY-SA-NC
35. Vous pouvez modifier un son de la bibliothèque ou un
enregistrement en y appliquant des effets
Julien Devriendt - CC BY-SA-NC
36. Modifiez un fichier son en sélectionnant uniquement la partie
qui vous intéresse
Julien Devriendt - CC BY-SA-NC
37. Créer une animation
Une animation est composée de plusieurs images qui vont défiler rapidement
de manière à donner l’illusion d’un mouvement Julien Devriendt - CC BY-SA-NC
38. Pour cela nous allons modifier l’apparence du sprite
Julien Devriendt - CC BY-SA-NC
39. En rouge : les costumes
disponibles pour le
sprite sélectionné
En orange : les outils de
dessin pour modifier le
costume sélectionné
En vert : la zone
de travail
Julien Devriendt - CC BY-SA-NC
40. Nous allons programmer l’alternance des costumes pour
donner l’illusion du mouvement
Costume 1 Costume 2
Julien Devriendt - CC BY-SA-NC
41. Quand la touche espace est pressée alors on passe au
costume suivant
Julien Devriendt - CC BY-SA-NC
42. On rajoute un déplacement afin de compléter l’animation
Julien Devriendt - CC BY-SA-NC
43. Comment faire pour que l’animation se répète automatiquement ?
Julien Devriendt - CC BY-SA-NC
44. Je vous laisse chercher ;-)
Julien Devriendt - CC BY-SA-NC
45. Le bloc « répéter 10 fois » permet de répéter l’action
Le bloc « attendre 0.5 secondes » permet de laisser le temps au
spectateur de voir le changement de costume Julien Devriendt - CC BY-SA-NC
46. Conseil :
Prévoyez un programme pour effectuer rapidement une remise à zéro de votre
programme. Cela vous permettra de gagner du temps lors de vos tests
Julien Devriendt - CC BY-SA-NC
47. Faites-Passer :
Démarrez l’écriture d’une histoire
sur scratch puis échangez de PC
avec un autre participant.
Présentations interactives :
Atelier d’écriture au choix
Poursuivez son histoire, puis
échangez à nouveau avec une autre
personne.
Répétez jusqu’à ce que l’histoire soit
terminée
• D’où venez-vous ?
• Qu’aimez-vous ?
(nourriture, musique,
films, . . .)
• Avez-vous une passion ?
un hobby ?
Présentez-vous aux autres
participants :
N’oubliez pas de mettre des
images et du son !
Julien Devriendt - CC BY-SA-NC
48. A partir de ces 9 blocs imaginez votre premier programme
Atelier :
Julien Devriendt - CC BY-SA-NC
49. Makey Makey : https://makeymakey.com/
Un carte pour connecter le monde physique et le monde numérique
Julien Devriendt - CC BY-SA-NC
50. A quoi ça sert ?
La carte Makey Makey permet de créer facilement des installations
interactives en permettant de relier nos objets du quotidien à un ordinateur
Julien Devriendt - CC BY-SA-NC
51. +
-
C’est un chemin qui commence et finit au même endroit. Pour circuler l’électricité a
besoin de matériau conducteur : câbles électriques, encre conductrice, métal, . . .
Qu’est-ce qu’un circuit électrique?
Julien Devriendt - CC BY-SA-NC
52. +
-
L’électricité circule toujours du + vers le -
les piles, mais également certains composants disposent
d’une côté + et d’un côté - Julien Devriendt - CC BY-SA-NC
53. Branchez la carte Makey Makey avec le câble USB
Premier branchement - étape 1 :
Julien Devriendt - CC BY-SA-NC
54. Etape 2
Refusez les demandes d’installation de pilote ou de mise à jour
Julien Devriendt - CC BY-SA-NC
55. Etape 3
Branchez un câble crocodile sur la partie « Earth » de la carte.
Il s’agit du côté - du circuit électrique.
Julien Devriendt - CC BY-SA-NC
56. Etape 3
Tenez le câble par la partie métallique, vous êtes maintenant connecté à la
masse. Julien Devriendt - CC BY-SA-NC
57. Avec l’autre main, appuyez sur le cercle « Space » une lumière verte doit
s’allumer
Etape 4
Julien Devriendt - CC BY-SA-NC
58. Votre PC doit réagir comme si vous appuyiez sur la barre d’espace de
votre clavier
Etape 4
Julien Devriendt - CC BY-SA-NC
59. Etape 5
Essayez de relier votre carte aux objets autour de vous
Julien Devriendt - CC BY-SA-NC
62. Fruits, pâte à modeler, . . .
Quels matériaux conducteurs ?
Julien Devriendt - CC BY-SA-NC
63. Encre conductrice et crayons papiers contiennent du graphite qui possède
des propriétés conductrices
Quels matériaux conducteurs ?
Julien Devriendt - CC BY-SA-NC
64. Animaux, plantes, collègues, amis, . . . A vous de tester !
Quels matériaux conducteurs ?
Julien Devriendt - CC BY-SA-NC
69. Activez les blocs Makey Makey dans vos projets Scratch
Julien Devriendt - CC BY-SA-NC
70. Une histoire se compose d’un début, un milieu et une fin. Pour chaque case, dessinez une situation et
imaginez les dialogues. Dans scratch, enregistrez les dialogues.
Atelier première histoire sonore :
Julien Devriendt - CC BY-SA-NC
71. Une fois les dessins et les enregistrements terminés créez un programme dans scratch pour déclencher un
enregistrement lorsque l’on appuie sur l’un des dessins. Faites les branchements et testez votre première
installation
Atelier première histoire sonore :
Julien Devriendt - CC BY-SA-NC
72. Si votre PC ne possède pas de micro, vous pouvez brancher vos écouteurs de
téléphone sur la prise casque de votre PC.
Julien Devriendt - CC BY-SA-NC
73. Si cette solution ne fonctionne pas pour vous, utilisez l’application dictaphone
de votre Smartphone
Julien Devriendt - CC BY-SA-NC
74. Music as Material
Ne comptez pas uniquement sur les matériaux conducteurs, explorez de nouvelles
façon d’interagir et de connecter des objets
Julien Devriendt - CC BY-SA-NC
76. Tour du monde à vélo - Google bike
Julien Devriendt - CC BY-SA-NC
77. Merci pour votre participation
Julien Devriendt
@julanimtic
julien.devriendt@animtic.fr
78. Touch board : https://www.bareconductive.com/
Un carte pour réaliser ses installations interactives
Julien Devriendt - CC BY-SA-NC
79. A quoi ça sert ?
La carte Touch Board permet de créer des installations interactives. Elle peut être
utilisée de manière autonome. Julien Devriendt - CC BY-SA-NC
80. A quoi ça sert ?
La carte Touch Board permet de créer des installations interactives. Elle peut être
également utilisée de manière autonome. Julien Devriendt - CC BY-SA-NC
81. A quoi ça sert ?
La carte Touch Board permet de créer des installations interactives. Elle peut être
utilisée de manière autonome. Julien Devriendt - CC BY-SA-NC
82. A quoi ça sert ?
La carte Touch Board permet de créer des installations interactives. Elle peut être
utilisée de manière autonome. Julien Devriendt - CC BY-SA-NC
83. Elle utilise la même technologie présente sur les écrans des smartphones, permettant ainsi
de détecter un signal sur une seule électrode.
Elle incorpore également une carte mémoire et une sortie casque Julien Devriendt - CC BY-SA-NC
84. Mise en route
Ajouter une enceinte, branchez la carte et touchez les électrodes
Julien Devriendt - CC BY-SA-NC
85. Prenez des objets conducteurs qui se trouvent autour de vous.
Imaginez ce qu’ils pourraient raconter.
Atelier les objets ont la parole - Etape 1 :
Julien Devriendt - CC BY-SA-NC
86. Etape 2 :
Enregistrez vos textes à l’aide d’un dictaphone ou d’un service en ligne comme
https://online-voice-recorder.com
Julien Devriendt - CC BY-SA-NC
87. Etape 2 :
Vous pouvez également télécharger des sons libres de droit sur :
http://soundbible.com
Julien Devriendt - CC BY-SA-NC
88. Etape 3 :
Transférez vos fichiers sons sur la carte mémoire. Vos fichiers doivent être renommés de la façon
suivante : TRACK000.mp3, TRACK001.mp3, TRACK002.mp3, . . . TRACK011.mp3
Julien Devriendt - CC BY-SA-NC
89. Branchez votre carte Touch Board, connectez votre casque/enceinte, mettez
l’interrupteur sur « On »
Etape 4 :
Julien Devriendt - CC BY-SA-NC
90. Connectez vos objets à l’aides des pinces crocodiles
Etape 5 :
Julien Devriendt - CC BY-SA-NC
91. Une fois les objets connectés, recalibrez votre carte en appuyant sur le bouton
« Reset ». Attendez que la lumière orange s’éteigne et testez.
Etape 6 :
Julien Devriendt - CC BY-SA-NC
92. Changer le code :
Installez Arduino IDE 1.8
Installez manuellement la bibliothèque Touchboard Julien Devriendt - CC BY-SA-NC
93. Changer le code :
Une fois Arduino installé, cliquez sur :
Fichier -> Carnet de croquis -> Touch Board Exemples -> HID_Keyboard
Julien Devriendt - CC BY-SA-NC
94. Changer le code :
Cliquez ensuite sur :
Outils -> Type de carte -> Bare Conductive Boards -> Bare Conductive Touch Board
Julien Devriendt - CC BY-SA-NC
95. Changer le code :
Enfin cliquez sur : Outils -> Port
Sélectionnez le port mentionnant votre carte TouchBoardJulien Devriendt - CC BY-SA-NC
96. Téléverser le code sur la carte Arduino :
Cliquez sur la flèche
Une fois le téléversement terminé, un message de confirmation apparait en bas de la fenêtre
Julien Devriendt - CC BY-SA-NC
97. Transformez votre carte en instrument MIDI
Atelier création d’instrument de musique :
Julien Devriendt - CC BY-SA-NC
98. Protocole de communication entre instruments électroniques, séquenceurs
et logiciels de musique
MIDI : Musical Instrument Digital Interface
Julien Devriendt - CC BY-SA-NC
100. Connectez les ponts de soudure MIDI
A l’aide de la peinture conductrice, connectez les ponts de soudure
Julien Devriendt - CC BY-SA-NC
101. Attachez la carte au clavier
A l’aide des électrodes adhésives, connectez la carte au clavier
Julien Devriendt - CC BY-SA-NC
102. Téléversez le code sur la carte
Cliquez sur :
Fichier -> Carnet de croquis -> Touch Board Exemples -> Midi_Piano
Julien Devriendt - CC BY-SA-NC
103. Téléversez le code sur la carte
Cliquez sur :
Fichier -> Carnet de croquis -> Touch Board Exemples -> Midi_Piano
Julien Devriendt - CC BY-SA-NC
104. Outils -> Type de carte -> Bare Conductive Boards -> Bare Conductive Touch Board (USB MIDI, iPad
Compatible)
Cliquez ensuite sur :
Julien Devriendt - CC BY-SA-NC
105. Enfin cliquez sur :
Outils -> Port
Sélectionnez le port mentionnant votre carte TouchBoardJulien Devriendt - CC BY-SA-NC
106. Enfin cliquez sur :
Outils -> Port
Sélectionnez le port mentionnant votre carte TouchBoardJulien Devriendt - CC BY-SA-NC
114. Modifier le contenu projeté
Cliquez sur la flèche pour assigner le contenu au Quad
Julien Devriendt - CC BY-SA-NC
115. Ajuster la taille du contenu projeté
Dans la fenêtre de droite, utilisez les poignées pour ajuster la taille de
l’élément projeté Julien Devriendt - CC BY-SA-NC
117. Ajustez la projection de votre vidéo à l’aide des poignées
Julien Devriendt - CC BY-SA-NC
118. Passez la vidéo en « lecture jusqu’à la fin de la boucle et pause »
Julien Devriendt - CC BY-SA-NC
119. Téléversez le code MIDI_Interface sur votre carte Touchboard
Pensez à modifier les valeurs de sensibilité de votre carte
Julien Devriendt - CC BY-SA-NC
121. Modifier les contrôleurs MIDI en cliquant sur :
EDIT -> Edit MIDI Controls
Julien Devriendt - CC BY-SA-NC
122. Cliquez sur la flèche « Retour au début »
Julien Devriendt - CC BY-SA-NC
123. Sur votre carte Touchboard, appuyez sur l’électrode 00
Julien Devriendt - CC BY-SA-NC
124. Cliquez de nouveau sur Edit MIDI Controls pour quitter le mode d’édition
des contrôleurs MIDI
Julien Devriendt - CC BY-SA-NC
125. Votre carte Touchboard contrôle désormais le lancement de votre vidéo
Julien Devriendt - CC BY-SA-NC
126. Détection à distance :
En modifiant le code il est possible d’activer la détection à distance.
Julien Devriendt - CC BY-SA-NC
127. Détection à distance :
Repérez les lignes suivantes et modifiez les valeurs
Attention la valeur de la ligne setTouchThreshold doit toujours être 2X supérieure à la valeur de la
ligne setReleaseThreshold Julien Devriendt - CC BY-SA-NC
128. Détection à distance :
Vous pouvez également modifier la sensibilité pour chaque électrode individuellement
Julien Devriendt - CC BY-SA-NC
129. A l’aide des tubes d’encre électrique, réalisez une présentation interactive
Atelier poster :
Julien Devriendt - CC BY-SA-NC
130. Faites un test sur un morceau de papier avant de vous lancer
Etape 1 :
Julien Devriendt - CC BY-SA-NC
131. Vous pouvez utiliser un modèle à colorier ou vous lancer dans votre propre
création. Laissez sécher 15 minutes
Etape 2 :
Julien Devriendt - CC BY-SA-NC
132. Etape 3 :
Enregistrez vos textes à l’aide d’un dictaphone ou d’un service en ligne comme
https://online-voice-recorder.com
Julien Devriendt - CC BY-SA-NC
133. Etape 3 :
Vous pouvez également télécharger des sons libres de droit sur :
http://soundbible.com
Julien Devriendt - CC BY-SA-NC
134. Etape 4 :
Transférez vos fichiers sons sur la carte mémoire. Vos fichiers doivent être renommés de la façon
suivante : TRACK000.mp3, TRACK001.mp3, TRACK002.mp3, . . . TRACK011.mp3
Julien Devriendt - CC BY-SA-NC
135. Branchez votre carte Touch Board, connectez votre casque/enceinte, mettez
l’interrupteur sur « On »
Etape 5 :
Julien Devriendt - CC BY-SA-NC
136. Une fois que votre dessin est sec, appliquez un point d’encre à l’emplacement
des électrodes.
Etape 6 :
Julien Devriendt - CC BY-SA-NC
137. Avec précaution, placez votre carte, puis mettez un second point d’encre sur
les électrodes. Laissez sécher.
Etape 7 :
Julien Devriendt - CC BY-SA-NC
138. Une fois les objets connectés, recalibrez votre carte en appuyant sur le bouton
« Reset » Attendez que la lumière orange s’éteigne et testez.
Etape 8 :
139. Techniques de peinture
Utilisez des pochoirs et protégez vos réalisations avec du vernis en spray
Julien Devriendt - CC BY-SA-NC
140. Créez vos propres expositions interactives
Julien Devriendt - CC BY-SA-NC
141. Créez vos propres expositions interactives
Julien Devriendt - CC BY-SA-NC
142. Créez vos propres expositions interactives
Julien Devriendt - CC BY-SA-NC
143. Créez vos propres expositions interactives
Bibliothèque BTUtils
Julien Devriendt - CC BY-SA-NC
144. Créez vos propres expositions interactives
Julien Devriendt - CC BY-SA-NC
145. Créez vos propres expositions interactives
Julien Devriendt - CC BY-SA-NC
146. Créez vos propres expositions interactives
Julien Devriendt - CC BY-SA-NC
147. Merci pour votre participation
Julien Devriendt
@julanimtic
julien.devriendt@animtic.fr
149. A quoi ça sert ?
Wick Editor est un logiciel libre en ligne permettant de créer des animations et de les rendre
interactives. On peut ainsi créer des gif, des films d’animation, des jeux vidéo ou des histoires et
documentaires interactifs. Julien Devriendt - CC BY-SA-NC
152. 3 - La zone de dessin
le premier dessin de
mon animation
1 - La frise chronologique
chaque case correspond à
une étape de votre animation
2 - la barre d’outils, ici le
pinceau est sélectionné
Julien Devriendt - CC BY-SA-NC
153. 2 - Présentation « Onion Skin » ou
pelure d’oignon qui permet d’avoir
un aperçu des dessins des cases
adjacentes
1 - La frise chronologique Pour
continuer mon animation, j’ai
sélectionné la seconde case de la
frise Julien Devriendt - CC BY-SA-NC
155. Jusqu’à ce que vous ayez terminé
Julien Devriendt - CC BY-SA-NC
156. Appuyez sur le bouton « Play » pour avoir un aperçu de votre animation
Julien Devriendt - CC BY-SA-NC
157. Si l’animation est trop rapide ou trop lente, cliquez sur l’engrenage
Julien Devriendt - CC BY-SA-NC
158. Modifiez le nombre d’image par seconde (Frame Per Second - FPS) et
sauvegardez (passez par exemple de 12 à 8)
Julien Devriendt - CC BY-SA-NC
159. Si vous êtes satisfait du résultat, cliquez sur « export »
Julien Devriendt - CC BY-SA-NC
160. Nous allons exporter notre animation au format .gif, mais vous avez
également la possibilité de l’exporter dans un format vidéo
Julien Devriendt - CC BY-SA-NC
161. Une fois l’export terminé, le fichier .gif se télécharge sur votre PC
Julien Devriendt - CC BY-SA-NC
162. Vous pouvez ensuite partager votre création en ligne et sur les réseaux
sociaux
Julien Devriendt - CC BY-SA-NC
166. Etape 1
Créez 3 scènes : la première scène - la maison
Julien Devriendt - CC BY-SA-NC
167. Etape 1
Créez 3 scènes : la seconde scène - l’intérieur de la maison
Julien Devriendt - CC BY-SA-NC
168. Etape 1
Créez 3 scènes : la troisième scène - la souris
Julien Devriendt - CC BY-SA-NC
169. Etape 2
Si je clique sur le bouton play, l’animation va se déclencher.
Je dois d’abord bloquer l’animation
Julien Devriendt - CC BY-SA-NC
170. Etape 2
Cliquez sur la première scène
Modifiez le script « default » en cliquant sur « edit »
Julien Devriendt - CC BY-SA-NC
171. Etape 2
Cliquez sur « timeline » puis sur « stop »
Si vous cliquez sur « play » le programme reste maintenant sur la première scène
Julien Devriendt - CC BY-SA-NC
172. Etape 3
Nous allons maintenant ajouter des zones cliquables pour que le joueur puisse passer
d’une scène à l’autre
Julien Devriendt - CC BY-SA-NC
173. Etape 3
Sélectionnez la porte puis cliquez sur « make interactive » et « convert to button »
Julien Devriendt - CC BY-SA-NC
174. Etape 3
Cliquez sur « add script » puis sur « mouseclick »
Julien Devriendt - CC BY-SA-NC
175. Etape 3
Dans l’onglet timeline, cliquez sur la fonction « gotoAndStop » indiquez le n° de la scène
suivante
Julien Devriendt - CC BY-SA-NC
180. Etape 5
Votre fichier apparait maintenant dans votre bibliothèque de ressources. Faites attention à
bien les renommer cela facilitera l’organisation de votre projet
Julien Devriendt - CC BY-SA-NC
181. Etape 5
Sélectionnez la souris et modifiez le script « Mouseclick »
Julien Devriendt - CC BY-SA-NC
182. Etape 5
Ajoutez la fonction « playSound » sur la première ligne de votre programme
Julien Devriendt - CC BY-SA-NC
184. Etape 6
Sélectionnez les 3 scènes et décalez-les vers la droite.
Julien Devriendt - CC BY-SA-NC
185. Etape 6
Sélectionnez les 3 scènes et décalez-les vers la droite.
Julien Devriendt - CC BY-SA-NC
186. Etape 6
Comme la première scène a été déplacée, vous devez modifier le script « default » de la
première scène en y ajoutant la fonction « stop »
Julien Devriendt - CC BY-SA-NC
187. Etape 6
Entrez le titre de votre jeu
Julien Devriendt - CC BY-SA-NC
188. Etape 6
Sélectionnez votre texte pour faire apparaitre les options de mise en forme
Julien Devriendt - CC BY-SA-NC
189. Etape 6
Nous allons créer un script pour faire démarrer le jeu lorsque la touche A est appuyée
Julien Devriendt - CC BY-SA-NC
190. Etape 6
Sur le script « default » de la première scène, Ajoutez un script qui déclenchera le jeu lorsque la
touche A du clavier sera appuyée
Julien Devriendt - CC BY-SA-NC
191. Etape 6
Sélectionnez « Keydown » puis dans la rubrique input, sélectionnez la fonction « isKeyDown »
Julien Devriendt - CC BY-SA-NC
192. Etape 6
Rajoutez ensuite la fonction « gotoAndStop » et précisez le numéro de la scène suivante.
Pensez à modifier les valeurs des autres scènes.
Julien Devriendt - CC BY-SA-NC
194. Etape 7
Il est possible d’exporter votre jeu en ligne. Cliquez sur « Export » puis sur Interactive.
Actuellement seule l’option fichier .zip fonctionne
Julien Devriendt - CC BY-SA-NC
195. Etape 7
Pour mettre le jeu en ligne, il faut passer par le service d’hébergement de jeux itch.io
Julien Devriendt - CC BY-SA-NC
196. Etape 7
Créez-vous un compte (cela peut être le compte de la bibliothèque) puis cliquez sur « upload
new project »
Julien Devriendt - CC BY-SA-NC
198. Etape 7
Dans la rubrique « Kind of project » sélectionnez HTML
Julien Devriendt - CC BY-SA-NC
199. Etape 7
Puis dans la rubrique « uploads » sélectionnez le fichier .zip exporté
Cliquez sur save
Julien Devriendt - CC BY-SA-NC
200. Etape 7
Votre jeu est maintenant jouable en ligne dans un navigateur :
https://julanimtic.itch.io/mouse Julien Devriendt - CC BY-SA-NC
201. Créer un jeu vidéo
Wick Editor permet également de déplacer des éléments à l’aide des touches de clavier, les tutoriels (en anglais)
sont disponibles sur la chaine youtube du projet : https://www.youtube.com/channel/UCXUM4laL0jXCO4wJjY15xqg
Julien Devriendt - CC BY-SA-NC
202. Bib Goes Home (Game Jam game 2019)
Julien Devriendt - CC BY-SA-NC
203. Merci pour votre participation
Julien Devriendt
@julanimtic
julien.devriendt@animtic.fr
205. A quoi ça sert ?
Micro:bit est une carte de programmation conçue par la BBC en 2016 pour équiper les écoliers
anglais. Elle est équipée de capteurs ( lumière, température, boussole, …), de sorties (3V, LED, ) et
d’une connexion bluetooth. Julien Devriendt - CC BY-SA-NC
207. Comment ça marche ?
Pour créer nos premiers programmes sur micro:bit nous allons utiliser l’éditeur MakeCode :
https://makecode.microbit.org/
Julien Devriendt - CC BY-SA-NC
208. Comment ça marche ?
Micro:bit fonctionne avec Scratch mais son utilisation nécessite l’installation d’un logiciel
supplémentaire et la présence d’un module bluetooth sur l’ordinateur
Julien Devriendt - CC BY-SA-NC
209. Comment ça marche ?
cliquez sur « Nouveau projet »
Julien Devriendt - CC BY-SA-NC
210. Comment ça marche ?
Donnez-lui un nom, puis cliquez sur « Créer »
Julien Devriendt - CC BY-SA-NC
211. Comment ça marche ?
Tout comme Scratch, MakeCode propose une interface de programmation graphique.
Julien Devriendt - CC BY-SA-NC
212. Comment ça marche ?
L’interface est divisée en 3 zones. A gauche un simulateur permettant d’avoir un aperçu du
programme en cours, au milieu les différentes catégories de bloc et à droite la zone de
programmation Julien Devriendt - CC BY-SA-NC
232. Votre projet apparait dans la colonne de gauche.
A droite vous retrouvez les liens vers les fichiers et dossier de votre projet
Julien Devriendt - CC BY-SA-NC
233. Cliquez sur le fichier script.rpy
Julien Devriendt - CC BY-SA-NC
234. Sélectionner un éditeur avec lequel vous allez modifier vos fichiers de
script Julien Devriendt - CC BY-SA-NC
235. Votre fichier de script : script.rpy
Julien Devriendt - CC BY-SA-NC
236. Label : permet d’indiquer un « chapitre » de votre jeu
Par défaut Renpy nomme le premier label start Julien Devriendt - CC BY-SA-NC
237. Remplacer les lignes de dialogue :
veillez à respecter l’indentation du script
» permet d’ajouter des « » directement dans les dialogues Julien Devriendt - CC BY-SA-NC
239. Les personnages
Pour ne pas recopier le nom des personnages à chaque fois nous allons
définir des raccourcis que nous allons placer au début de notre script Julien Devriendt - CC BY-SA-NC
240. Les personnages
il suffit ensuite de récupérer la valeur définie et de l’associer au dialogue
correspondant Julien Devriendt - CC BY-SA-NC
242. Images et sons :
Ajoutez les fichiers image et son directement dans les dossiers correspondant
Julien Devriendt - CC BY-SA-NC
243. Images et sons :
Ajoutez les fichiers image et son directement dans les dossiers correspondant
Julien Devriendt - CC BY-SA-NC
244. Images et sons :
Ajoutez les fichiers image et son directement dans les dossiers correspondant
Julien Devriendt - CC BY-SA-NC
245. Images
Pour afficher une image en fond, écrivez scene suivi du nom de votre fichier.
Pour le personnage, écrivez show puis le nom de votre fichier Julien Devriendt - CC BY-SA-NC
246. Images
il n’est pas nécessaire pour les images d’indiquer l’extension du fichier. Ne mettez pas de
majuscule au nom de votre fichier Julien Devriendt - CC BY-SA-NC
248. Images
Ajoutez une transition avec with suivi de dissolve ou fade, d’autres transitions sont disponibles
dans la documentation de Rendu Julien Devriendt - CC BY-SA-NC
249. Musique et sons :
N’oubliez pas l'extension du fichier pour les musiques. On peut également jouer un simple bruitage
avec play sound, ou encore préciser une durée de transition grâce à fadein.
Julien Devriendt - CC BY-SA-NC
250. Musique et sons :
Pour arrêter la musique : utilisez la commande Stop
Vous pouvez ajouter une transition avec fadeout Julien Devriendt - CC BY-SA-NC
251. Créer un menu :
Le premier texte est facultatif, et s'affiche en même temps que le menu de choix. Puis les
différents choix sont écrits entre guillemets " et suivis de deux points : Julien Devriendt - CC BY-SA-NC
252. Créer un menu :
Chaque choix renvoie ensuite à un nouveau label
Julien Devriendt - CC BY-SA-NC
253. Sauvegarder un choix :
nous allons écrire du Python pour créer des variables. Une variable a un nom et une valeur qui est
stockée à l'intérieur Julien Devriendt - CC BY-SA-NC