Des lutins à télécharger pour scratch

Le logiciel de programmation par blocs Scratch plait beaucoup aux élèves. Et je dois bien avouer… à moi aussi. Ca m’intéresse notamment de pouvoir réinvestir et transmettre mon bagage de développeur et les élèves s’en sont vite rendus compte. Je les accompagne donc dans leur programmation et j’essaye de les encourager à réaliser de vrais projets, plutôt que de simplement faire bouger le petit chat vers la gauche puis vers la droite.

Evidemment, dès qu’ils se rendent compte du potentiel de l’outil, ils sont nombreux à vouloir réaliser un petit jeu. J’ai donc fait en sorte de mettre à leur disposition des « lutins » allant dans ce sens. Ces lutins sont issus de projets Scratch existants. Je les ai téléchargés, la licence Creative Commons étant la règle pour tous les projets publiés sur le site de Scratch, puis expurgés de leurs scripts. Il n’en reste donc plus que les « costumes » (c’est-à-dire des images qui correspondent à différentes versions d’un même objet/personnage, par exemple dans différentes positions), qui permettent un très beau rendu au niveau des animations.

Une petite mise en forme sympa pour les publier sur esidoc, et le tour est joué ! Cliquez sur le lien ci-dessous pour voir à quoi cela ressemble au final dans le portail du CDI :

Même si vous ne vous sentez pas une âme de programmeur pour les aider, vous pouvez compter sur vos élèves pour trouver la méthode pour utiliser ces lutins à bon escient. Et si vous voulez vraiment comprendre, voilà le principe de base :

1. Repérer la séquence de costumes que l’on va utiliser (par exemple : de « attack1 » à « attack4 »)
2. Les faire se succéder pour donner une illusion d’animation
3. Insérer une très courte attente entre 2 images car sinon l’animation serait trop rapide
4. Associer le tout à un évènement, comme par exemple l’appui sur une touche
5. Revenir au costume de base (par exemple : « attente »)

Cela nous donnera donc le script suivant :

Pour intégrer cette bibliothèque de lutins dans esidoc, copiez le code ci-dessous puis collez-le dans le contenu html du texte d’introduction d’une rubrique (bouton « configurer »).

<div>
<p>Tu es un adepte de Scratch et tu souhaites développer des petits jeux ?</p>

<p>Tu peux alors utiliser les lutins ci-dessous. Ils contiennent de nombreux costumes qui te permettront d’animer leurs mouvements, leurs attaques, etc.</p>

<img src="https://drive.google.com/uc?id=1An_teQ_RReFzmx5EfXu1HWnlegld-_sV" style="border: 0; max-width: 490px; float: right; margin: 0px 0px 0px 15px;" border="0">

<p>Pour les utiliser, clique sur le lutin qui t’intéresse et enregistre-le sur ton ordinateur. Depuis Scratch, utilise le bouton d’importation de lutin et va chercher le fichier que tu viens d’enregistrer.</p>
<p>Maintenant, c’est à toi d’ajouter des scripts pour leur donner vie !</p>
</div>

<div>
<div><img style="border: 0; margin: 0px 5px 5px 0px;" src="https://drive.google.com/uc?id=1QB1h0gGTTZufvPauwpv7kbD2rbcqa4lz" border="0"></div>

<div style="font-weight:bold; margin-bottom:10px;">Dragon Ball</div>

<div>
<a href="https://drive.google.com/uc?id=1EbgSr3zkmdzut4TvSYHr2E3iLKlBMkF9" title="Goku" style="display:inline-block; padding:3px;">
<img style="border: 0; height:50px; margin:0px 5px 5px 10px;" src="https://drive.google.com/uc?id=1IyIiH_qqCi7U3smss4DojNBC-UDXCC6G" border="0">
</a>
<a href="https://drive.google.com/uc?id=1JCVpQmmsuapXGdvgTjQ14CrMTDLLKkGf" title="Vegeta" style="display:inline-block; padding:3px;">
<img style="border: 0; height:50px; margin:0px 5px 5px 10px;" src="https://drive.google.com/uc?id=1baczbEGaOHoCaLYTonMV-slOoECcMlvR" border="0">
</a>
<a href="https://drive.google.com/uc?id=1COuHhR1TV4SWMFTQm48mzteWvyftwpC-" title="Cell" style="display:inline-block; padding:3px;">
<img style="border: 0; height:50px; margin:0px 5px 5px 10px;" src="https://drive.google.com/uc?id=1W7whBcAmIWPUIweb9BDZ24AHWduKG1rr" border="0">
</a>
<a href="https://drive.google.com/uc?id=1UknqJSvo3EwdqmxlMIV-I3m6WejSGIxY" title="Garlic" style="display:inline-block; padding:3px;">
<img style="border: 0; height:50px; margin:0px 5px 5px 10px;" src="https://drive.google.com/uc?id=1FnQVzQEGU_Em4swifjt50IanYbY1zX06" border="0">
</a>
<a href="https://drive.google.com/uc?id=1-STPCS0_z9kbzNgXtcLeZys-hjjv2sWJ" title="Piccolo" style="display:inline-block; padding:3px;">
<img style="border: 0; height:50px; margin:0px 5px 5px 10px;" src="https://drive.google.com/uc?id=1lgDfprMnR1yg5AY1cmq2H-ZM-b3ISHiR" border="0">
</a>
</div>

<div style="font-weight:bold; margin-bottom:10px;">Pokemon</div>
<div>
<a href="https://drive.google.com/uc?id=1DbL8Muj2RPdIqMS8dhfhHqy3NgT32hBa" title="Pikachu" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1HE2L8PdngMcwQymiB2HJxBCQ50siDjAe" style="border: 0; height:40px; margin:0px 5px 5px 10px;" border="0">
</a>
<a href="https://drive.google.com/uc?id=1l_ptskWaOeafnH8YWqAi2uowMP-Gkj_d" title="Salamèche" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1khaRvKKuRq_zxuOMYyawBK1NocWuhWiM" style="border: 0; height:40px; margin:0px 5px 5px 10px;" border="0">
</a>
<a href="https://drive.google.com/uc?id=1NznGJQJFklWbJf0M-kdkkzeb0m9mfvYN" title="Voltali" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1yBhy5Pl1Y4aMucLab_IqPr12KSx9vsbI" style="border: 0; height:40px; margin:0px 5px 5px 10px;" border="0">
</a>
<a href="https://drive.google.com/uc?id=1iJa9OH7iFj2niLKk4Al3ubJArUBTJNKW" title="Carapuce" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1Zi0gJYMK3cqzqW4Ypv0nF-4ftkFkBMrJ" style="border: 0; height:40px; margin:0px 5px 5px 10px;" border="0">
</a>
<a href="https://drive.google.com/uc?id=1LquGyh4G1Xa5-CkGBOA6BC365LbA_D-u" title="Hypnomade" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1Fxsoyx9z5kSN74k2AErGlLMs3cPLtFjr" style="border: 0; height:40px; margin:0px 5px 5px 10px;" border="0">
</a>
<a href="https://drive.google.com/uc?id=11ciM1a9RJ51xK__–RwufmrRAGEwFhBz" title="Insécateur" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1tAusHgch04xmb0WzJ2-CP8XWFnr13uSY" style="border: 0; height:40px; margin:0px 5px 5px 10px;" border="0">
</a>
<a href="https://drive.google.com/uc?id=1D5hUP3eNTaKHpjIlDdQsFOL2iPazJTFh" title="Osselait" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1GY9JZ_wLN51d7gvmaYQWqtSvjkby7x6J" style="border: 0; height:40px; margin:0px 5px 5px 10px;" border="0">
</a>
</div>

<div style="font-weight:bold; margin-bottom:10px;">Star wars</div>
<div>
<a href="https://drive.google.com/uc?id=1NVdprjvJDSthYsIZP2x8xJx7grM4jU7b" title="Anakin" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1AxAtNwvMGai7iewRcVSaUawMhseu61HO" style="border: 0; height:50px; margin:0px 5px 5px 10px;" border="0">
</a>
<a href="https://drive.google.com/uc?id=1xdeWhR_Km1gl4nRhzXaYliy8BtL3QmD-" title="Obi-Wan" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1oA33GW7COGIaOlYMt6cZcOfq3CWOfEFf" style="border: 0; height:50px; margin:0px 5px 5px 10px;" border="0">
</a>
<a href="https://drive.google.com/uc?id=1VM1NQroNS44g8mupuZpnjQoDBqni9xFe" title="Dooku" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1WNeaLfppFGe7AJpqwdOcTJmQX8c8v7YI" style="border: 0; height:50px; margin:0px 5px 5px 10px;" border="0">
</a>
<a href="https://drive.google.com/uc?id=1ltqkgW39slTDHpqgOE-hp0B52ob-jBLA" title="Grievous" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1GXPL76mpwMRpST3FtIEocWclg3N013AE" style="border: 0; height:50px; margin:0px 5px 5px 10px;" border="0">
</a>
<a href="https://drive.google.com/uc?id=1k7DnF0wX3f880yuA81rEXc5FrUE-b2fm" title="Stormtrooper" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1JO74yAHNgsYLvkOYgZFoZVQtLRyurgwk" style="border: 0; height:50px; margin:0px 5px 5px 10px;" border="0">
</a>
<a href="https://drive.google.com/uc?id=1whRz1bo59V1yfupaGu1sZvP1dtyvcLbL" title="Super battle" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1fPYH7l-NVfED8hIpxyT_u4dL079a1wZq" style="border: 0; height:50px; margin:0px 5px 5px 10px;" border="0">
</a>
<a href="https://drive.google.com/uc?id=1uC8HT-DFkGhtg3plmzJmPsNCFpU2Ml7E" title="Droide" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1mdgRkJPgHfaW8Bs-jEt7qFgxAhHtAGpW" style="border: 0; height:50px; margin:0px 5px 5px 10px;" border="0">
</a>
<a href="https://drive.google.com/uc?id=1-TTSHCCh2EPhOHQSRpBOFsYjFYocIVup" title="Droidika" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1ghpLNt8NM2ME9NM1-yyaNUIDP_IWmpoi" style="border: 0; height:50px; margin:0px 5px 5px 10px;" border="0">
</a>
</div>

<div style="margin-top: 20px;"><img style="border: 0; margin: 0px 5px 5px 0px;" src="https://drive.google.com/uc?id=1jfTqUTeOP8MUNR6IiMcRf8fz8Hcrfctr" border="0"></div>

<div style="font-weight:bold; margin-bottom:10px;">Mario</div>
<div>
<a href="https://drive.google.com/uc?id=1WknkuBXFUL9KHb0h-Emx_9HuRtEh4zwZ" title="Mario" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1kbvu7ieJHmEYfZHBOoTcG3p7Y_1ISPjD" style="border: 0; height:50px; margin:0px 5px 5px 10px;" border="0">
</a>
<a href="https://drive.google.com/uc?id=1dgxsl53dBbA0k8-cDdtBRF-T5Dk3f7rT" title="Koopa" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1IUuotoxYDqhRTNDiT6GFXunvRiXk8nu8" style="border: 0; height:40px; margin:0px 5px 5px 10px;" border="0">
</a>
<a href="https://drive.google.com/uc?id=1lNN30TP6s2FOPXd1sNmt6ETTcqD4cadv" title="Goompa" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1BxujHJavI4FdhmphNdOHml5KOTEn1aP_" style="border: 0; height: 30px; margin: 10px 5px 5px 10px;" border="0">
</a>
<a href="https://drive.google.com/uc?id=1_RSacu78m1QaI_fNW8SRb1nGqWmwdCn-" title="Carapace" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1rUQngXJE5N_Esc9iVUKA97HuyBHyKxAF" style="border: 0; height: 20px; margin: 20px 5px 5px 10px;" border="0">
</a>
<a href="https://drive.google.com/uc?id=1amhxlGvKHkaNMOUgWe8OdhcwqDaSNqQ4" title="Piece" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1mPUIA6idXR9br-avO_6Qe27lxFA_Vn-9" style="border: 0; height: 20px; margin: 0px 5px 25px 10px;" border="0">
</a>
</div>

<div style="font-weight:bold; margin-bottom:10px;">Sonic</div>
<div class="h40">
<a href="https://drive.google.com/uc?id=1effT6mByplS4iDqt9ChtFtj8uuOIL02g" title="Sonic" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1jb1uzxkLM8hLxZTynTdEp3D--c0Dyq8f" style="border: 0; height:50px; margin:0px 5px 5px 10px;" border="0">
</a>
<a href="https://drive.google.com/uc?id=1tAEpVnSv9r1DnPJbFgvaCOtEg13fN-oV" title="Egg pawn" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1ZhZTNxMyp6k7g6Bgr8YJ_GC1v6qd6VkE" style="border: 0; height:50px; margin:0px 5px 5px 10px;" border="0">
</a>
<a href="https://drive.google.com/uc?id=1zkeqOWr7knIAvOMMBrbGcN6IIxwnWjM_" title="Spinner" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1DaxxO_OiAoCCU7flfb2AOiojV8wchgxg" style="border: 0; height:50px; margin:0px 5px 5px 10px;" border="0">
</a>
<a href="https://drive.google.com/uc?id=1diKJjMjhR3Vog65YKxyQB-OYHkYuGEpJ" title="Anneau" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1aJweJi_5TUj-lmE46ZhkRQ9fEi1HaARz" style="border: 0; height: 30px; margin:0px 5px 5px 10px;" border="0">
</a>
</div>

<div style="margin-top: 20px;"><img style="border: 0; margin: 0px 5px 5px 0px;" src="https://drive.google.com/uc?id=1UmlbaYnj0MsEtT21eOXgXQGWpGXnnoKr" border="0"></div>

<div style="font-weight:bold; margin-bottom:10px;">Flappy Bird</div>
<div>
<a title="Oiseau" href="https://drive.google.com/uc?id=1mYSv4qt6SzOuiQhwApPU695_b61lPqmz" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1rHh255iqiaUTqZru3R1IK6otJZPe_JLJ" style="border: 0; height: 40px; margin: 0px 5px 5px 10px;" border="0">
</a>
<a title="Tuyau" href="https://drive.google.com/uc?id=18GRmzPVXfG2uwensHDyPVW6BbsxU6Nee" style="display:inline-block; padding:3px;">
<img style="border: 0; height: 50px; margin: 0px 5px 5px 10px;" src="https://drive.google.com/uc?id=19iH0KdO4iodC6DiNVcViTSOanezKHd6T" border="0">
</a>
</div>

<div style="font-weight:bold; margin-bottom:10px;">Pacman</div>

<div>
<a href="https://drive.google.com/uc?id=10i8r6FYx-A-Sx3dH4ZCnTvDOuvaN6ihH" title="Pacman" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1sPCg7w2-hP1hgN26MBVO4_aVEsZtqi3u" style="border: 0; height: 30px; margin: 0px 5px 5px 10px;" border="0">
</a>
<a href="https://drive.google.com/uc?id=1xG-7AXtkzgWO6wSNT_C7wiQjU3xfD9HB" title="Fantôme bleu" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1_QpyKZ8uhNwyJM2nrTeQGqb9WOyhKoxI" style="border: 0; height: 30px; margin: 0px 5px 5px 10px;" border="0">
</a>
<a href="https://drive.google.com/uc?id=14KB4oN7zo71eE4HPhfKHNKD5GCOuOr88" title="Fantôme orange" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=10RndyUolg_tfz7lIGYpIatNJ0ADvCpSB" style="border: 0; height: 30px; margin: 0px 5px 5px 10px;" border="0">
</a>
<a href="https://drive.google.com/uc?id=13Z9T8oTSh2NU222rYTQyIb_zl7Uc_Mns" title="Fantôme rose" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=11uaLv5uYeajcuRGt5TSxZV3Ya4GQZIXA" style="border: 0; height: 30px; margin: 0px 5px 5px 10px;" border="0">
</a>
<a href="https://drive.google.com/uc?id=11PZSgWIQ3Rwt21JhzD3TQZwAZwQ1nrcg" title="Fantôme rouge" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=13eorjNAVq-L8WuW-dXloOPQNQE5nJKR8" style="border: 0; height: 30px; margin: 0px 5px 5px 10px;" border="0">
</a>
</div>

<div style="font-weight:bold; margin-bottom:10px;">Dino run</div>
<div>
<a href="https://drive.google.com/uc?id=1NwCIPzqyTma-WYWK-uepuZhIi9tva1cq" title="Dino" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1oRVJfmMF5zUDAuPr-vjr9gT_QABMwAkD" style="border: 0; height: 30px; margin: 0px 5px 5px 10px;" border="0">
</a>
<a href="https://drive.google.com/uc?id=1d51mF_39klAxZxjTQOXcIuTEwOD9ut2J" title="Obstacles" style="display:inline-block; padding:3px;">
<img src="https://drive.google.com/uc?id=1I4AMPf4qAA9cQvfckODl80FprsgOtl2n" style="border: 0; height: 30px; margin: 0px 5px 5px 10px;" border="0">
</a>
</div>
</div>

NB : J’aurais pu faire en sorte que vous n’ayez qu’une ligne de code à copier-coller, mais au moins, là, vous pouvez éventuellement modifier ce que vous avez envie de modifier (même en n’y connaissant rien au html, vous voyez bien où se situe le texte d’introduction, par exemple, et vous pouvez parfaitement le changer).

(c) Photo de couverture : Wii Games Summer 2010 – Mario’s Kid Zone, de The Conmunity – Pop Culture Geek