Enseigner aux enfants l’animation Pixel Art pour les jeux

 

 

 

L’été dernier, j’apprenais aux élèves de l’école primaire à coder et à créer des jeux dans le cadre de Scratch (un cours d’été d’une semaine). J’ai remarqué que certains élèves étaient vraiment intéressés par la création de leur propre art pour leurs jeux, alors je bifurquais du plan d’enseignement et montrais à ces élèves comment faire leurs propres sprites et animer les personnages du jeu. Cela a si bien fonctionné que certains parents m’ont dit que leurs enfants travaillaient sur leurs jeux pendant leur temps libre à la maison, alors j’ai décidé de partager cela en ligne, en espérant que cela aiderait quelqu’un d’autre.

 

Étape 1  

  • Expliquer brièvement pourquoi scratch est un excellent outil pour enseigner le code aux élèves du primaire (les 4e-5e années fonctionnent mieux car ils ont de meilleures capacités motrices)
  • Expliquer pourquoi Piskel est un excellent outil pour l’animation scratch et pixel art
  • Comment j’ai appris aux enfants à utiliser Piskel
  • Comment importer votre travail de Piskel dans Scratch
  • Montrer quelques travaux réalisés dans piskel, comme l’animation de robot d’instructables ci-dessus

 

Étape 2 : Pourquoi Scratch ?

 

Réponse courte:

  • Fonctionne sur tout ce qui a un navigateur
  • Enseigne les blocs fondamentaux de tout langage de programmation
  • Est assez simple pour les enfants
  • Avec BEAUCOUP de documentation, de ressources, de tutoriels et de plans de cours que vous pouvez suivre
  • Est amusant !

Longue réponse:

J’ai enseigné dans quelques écoles différentes, et elles avaient toutes des ressources différentes en matière d’informatique. Certaines étaient formidables, mais d’autres avaient des ordinateurs relativement vieux et lents, et ne permettaient pas d’installer de programmes. Cependant, tous avaient un navigateur internet comme Chrome, et c’est tout ce dont Scratch a besoin pour fonctionner !

 

Étape 3 : Pourquoi Piskel ?

  • Fonctionne également sur n’importe quel navigateur
  • Peut être enregistré en ligne pour être consulté plus tard de n’importe où
  • Facile à apprendre et à utiliser, et vraiment facile à animer
  • Possède des outils avancés comme le layering

Scratch possède un outil d’édition de sprites, mais animer dans celui-ci n’est pas aussi pratique que dans Piskel. Piskel peut également sortir plusieurs formats comme le GIF qui rendent l’importation dans Scratch vraiment facile.

 

Étape 4 : Naviguer dans l’éditeur

 

Présenter d’abord la barre d’outils à gauche aux étudiants.

Les outils sont simples, si vous jouez un peu avec, vous les sentez. Peut-être montrer très brièvement ce qu’ils font.

Vous pouvez définir les couleurs en bas de la barre d’outils

La taille du pinceau est en haut de la barre d’outils.

 

Étape 5 : Copier et coller l’œil au bon endroit

 

Après avoir sélectionné l’œil, cliquez sur Ctrl + C sur windows, ou cmd + C sur mac, pour le copier

Surplombez la zone sélectionnée (vous devriez voir apparaître une petite main), faites-la glisser à l’endroit où vous voulez l’œil, puis cliquez sur Ctrl + V sur windows, ou Cmd + V sur mac pour le coller.

 

Étape 6 : commencer à animer

 

Maintenant que nous avons notre premier cadre fantôme, nous pouvons commencer à l’animer .

Dans le coin inférieur droit du cadre, cliquez sur  » Dupliquer ce cadre « . Vous devriez voir un nouveau cadre identique

 

Étape 7 : Faire un petit changement et expliquer comment fonctionne l’animation

 

C’est comme un simple Flipbook. Des images avec de petites différences s’additionnent pour donner une illusion de mouvement. Je commence par les yeux de Clyde en déplaçant un peu leur position à chaque image.

Pour déplacer ses yeux, réglez les couleurs sur bleu et blanc, et utilisez l’outil stylo pour redessiner les yeux regardant dans une direction différente. Dupliquez la dernière image après chaque étape.

 

L’étape 8 : Prévisualisez votre animation

 

Pour prévisualiser votre animation, allez dans la partie supérieure droite de votre écran. Survolez l’aperçu de la taille et sélectionnez « Aperçu de la taille complète ». Baissez ensuite le FPS(images par seconde). Par défaut, il est à 12 FPS, vous voulez qu’il soit à environ 2-4 FPS.

 

Après cela, cliquez sur ouvrir dans une pop up d’aperçu, et vous verrez une version plus grande de votre animation.

Guide de la formation en Haute Normandie

Ce site est un blog de conseils et d’information sur la formation et n’a aucun lien avec l’organisme de formation CNAM

Copyright © 2024 | Tous droits réservés.