1 of 39

Apprendre les bases de la programmation en �créant son jeu dans 

Steve Morissette

CP, RÉCIT local

(CSS de Sorel-Tracy)

Andrée-Anne Viens

CP, RÉCIT local

(CSS de Sorel-Tracy)

Jean-François Jutras

CP, RÉCIT local

(CSS de Sorel-Tracy)

monurl.ca/ateliere4

2 of 39

Objectifs de l’atelier

  • Découvrir les possibilités de MakeCode Arcade;
  • Expérimenter quelques jeux créés avec MakeCode Arcade;
  • Découvrir l’environnement de création de MakeCode Arcade;
  • Comprendre les bases de la programmation par blocs à l’aide de tutoriels pas-à-pas;
  • Réaliser votre premier jeu de manière guidée avec les animateurs;
  • Partager votre premier jeu en le mettant en ligne;
  • Expérimenter de façon plus autonome certains des tutoriels pour apprendre à programmer différents types de jeux;
  • Apprendre à créer un devoir de type « MakeCode » dans Teams;
  • Découvrir d’autres astuces et fonctionnalités de MakeCode.

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

3 of 39

Qu’est-ce que MakeCode Arcade?

MakeCode Arcade est une plateforme destinée à développer des compétences de base en programmation par la création de jeux vidéo. Les élèves y découvrent la programmation à l’aide de blocs de couleur qu’ils peuvent  glisser et déposer dans un espace de travail pour développer leurs programmes.

​

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

4 of 39

Qu’est-ce que MakeCode Arcade?

Le site MakeCode fonctionne tant sur les ordinateurs (PC ou Mac) que

les appareils mobiles comme le iPad!

​

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

5 of 39

Qu’est-ce que MakeCode Arcade?

Un simulateur interactif fournit aux élèves une rétroaction immédiate sur le fonctionnement de leur programme et leur permet de tester et de déboguer facilement leur code.

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

6 of 39

Plusieurs compétences à développer

  • Développer sa pensée logique;
  • Développer des méthodes de travail efficaces;
  • Apprendre à structurer et organiser sa pensée;
  • Apprendre de ses erreurs;
  • Travailler en mode de résolution de problèmes;
  • Se montrer créatif et imaginatif pour trouver de nouvelles solutions et innover;
  • S’initier au langage programmation.

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

7 of 39

Utilisation du simulateur de jeu

Contrôleur (joystick)

Redémarrage du jeu

Menu (options) du jeu (ex. volume du son)

Boutons A et B

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

8 of 39

Utilisation du simulateur de jeu

Mode débogage

Redémarrage du jeu

Pause

Mode muet

Outil de  capture d’écran

Raccourcis clavier

(ordinateur)

Mode plein écran

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

9 of 39

Expérimentons quelques jeux!

  • Site Google avec 6 jeux simples à tester avant de se lancer dans la programmation
  • Il y aura quelques fois du son pendant et à la fin de la partie
  • Vous disposez de 10 minutes pour explorer les différents jeux!

monurl.ca/makecode

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

10 of 39

arcade.makecode.com

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

11 of 39

Connexion et enregistrement en ligne 

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

12 of 39

Connexion et enregistrement en ligne 

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

13 of 39

Connexion et enregistrement en ligne 

Choisir un compte Microsoft 

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

14 of 39

Gestion des projets MakeCode

Vous pouvez ouvrir, reproduire et supprimer vos projets avec ce menu

Un outil de recherche permet de trouver facilement un projet avec un ou des mots-clés

Vous pouvez gérer vos projets depuis l’onglet « Voir tous »

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

15 of 39

Obtenir l’interface en français*

  • La page d’accueil, l’espace de création et les blocs de programmation sont disponibles en français
  • Certaines parties du site et certains tutoriels ne sont pas traduits ou le sont partiellement*

2.Sélectionnez « Français » parmi les langues offertes

1.Cliquez sur « Langue » en bas de la page d’accueil de MakeCode

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

16 of 39

Présentation de l’espace de création de MakeCode

Espace de travail

Bloc de programmation

Boîte à outils

Simulateur de jeu

Contrôles de l’affichage

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

17 of 39

Présentation de l’espace de création de MakeCode

Tiroirs de la boîte à outils (catégories de blocs par couleur)

Nom du projet et options d’enregistrement (exportation)

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

18 of 39

Présentation de l’espace de création de MakeCode

Tiroirs de la boîte à outils (catégories de blocs)

Chaque tiroir donne accès aux blocs d’une catégorie

Les blocs auront la même couleur que le tiroir auquel ils sont associés

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

19 of 39

Présentation de l’espace de création de MakeCode

Bouton pour partager son jeu en ligne

Retour à l’accueil

Onglet qui permet de passer de la vue bloc à la vue script de son programme

Bouton pour télécharger son jeu vers un périphérique

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

20 of 39

Travailler avec les blocs de programmation

  • Les blocs s’emboitent comme des morceaux de casse-tête pour empêcher les erreurs de syntaxe
  • Les blocs compatibles s’emboitent de manière « magnétique »

​

La forme des blocs nous indique s’ils sont compatibles

Il est possible d’utiliser certains blocs pour modifier une valeur ou une variable

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

21 of 39

Travailler avec les blocs de programmation

Un bloc inutilisé sur l’espace de travail aura cette apparence

Pour supprimer un bloc, il suffit de le glisser vers la boîte à outils

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

22 of 39

Travailler avec les blocs de programmation

  • Par défaut, les personnages d’un jeu MakeCode sont appelés « Sprite »
  • Le nom du Sprite devient une variable du jeu

Nom du personnage (mySprite)

Image du personnage (mySprite)

Fonction (type) du personnage (mySprite)

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

23 of 39

Travailler avec les blocs de programmation

  • Il est possible de renommer ces variables pour s’y retrouver plus facilement
  • Nommer ses variables est une excellente habitude à prendre quand on programme

Option pour renommer la variable

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

24 of 39

L’éditeur d’image de MakeCode

Outils de dessin

Couleur active

Palette de couleurs disponibles

Espace de création (le damier sera transparent)

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

25 of 39

L’éditeur d’image de MakeCode

Taille de l’image en pixels (ex. 24 pixels X 24 pixels)

Taille du crayon en pixel (1, 3 et 5 pixels)

Outil de rotation et de retournement de l’image

Bouton « Terminer » pour enregistrer l’image

Options d’affichage de l’éditeur

Espace pour nommer le dessin

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

26 of 39

La galerie d’images de MakeCode

  • MakeCode vous offre une série d’images prêtes à l’emploi

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

27 of 39

Série de tutoriels « Conception de jeu »

  • Cette série de petits tutoriels permet de comprendre les bases de la programmation d’un jeu vidéo dans MakeCode
  • Pour les 15 prochaines minutes, essayez les 5 premiers tutoriels.
  • Nous circulerons pour répondre à vos questions!

​

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

28 of 39

Accès à 4 tutoriels en français pour bien débuter

Tutoriel 1 (Le chasseur de pizza)

Fichier complet avec code à importer

​

​

​

​

Tutoriel 3 (Les fraises contre-attaquent)

Fichier complet avec code à importer

​

Tutoriel 2 (Joyeuse fleur)

Fichier complet avec code à importer

​

​

​

​

Tutoriel 4 (Le champ de météorites)

Fichier complet avec code à importer

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

29 of 39

Partager un projet MakeCode

1. Cliquez sur le bouton « Partager »

2. Cliquez sur « Publier le projet »

3. Copiez le lien de partage à envoyer

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

30 of 39

Exporter un projet MakeCode vers un périphérique*

1. Cliquez sur le bouton « Télécharger »

2. Sélectionnez le matériel (achat nécessaire*)

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

31 of 39

Assigner un devoir de type « MakeCode » dans Team

1. Créez un nouveau devoir dans votre équipe Teams

2. Donnez un titre à votre devoir

3. Ajoutez une ressource

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

32 of 39

Assigner un devoir de type « MakeCode » dans Team

  • Veuillez noter que l’option « Devoirs MakeCode » doit être activée* dans la console d’administration de Teams

4. Sélectionnez « MakeCode » comme type de ressource*

5. Sélectionnez « Arcade » comme type de projet

6. Donnez un nom au projet

7. Cliquez sur « Joindre »

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

33 of 39

Assigner un devoir de type « MakeCode » dans Team

8. Cliquez sur « Affecter »

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

34 of 39

Assigner un devoir de type « MakeCode » dans Team

  • Voici la vue de l’élève

Le devoir est disponible dans le fil des publications et sous l’onglet « Devoirs »

L’élève peut programmer directement dans Teams (ordinateur et iPad)

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

35 of 39

Assigner un devoir de type « MakeCode » dans Team

Texte

L’espace de création de MakeCode est intégré à Teams

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

36 of 39

Tutoriel vidéo pour apprendre les bases de MakeCode Arcade

37 of 39

Tutoriel vidéo pour la création d’un mini-jeu avec MakeCode Arcade (Fido)

38 of 39

Accès à la page des ressources de la présentation sur

monurl.ca/makecode

Sources des images: https://arcade.makecode.com/ et https://pixabay.com/

39 of 39

Conclusion

  • Période de questions
  • Remerciements

​

                   �Cette œuvre est mise à disposition selon les termes de la Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International.

N’hésitez pas à communiquer avec nous!

Andrée-Anne Viens

Steve Morissette

Jean-François Jutras

​

​

Cette présentation est inspirée de celles réalisées par Julie Chandonnet enseignante à la CS de la Capitale dans le cadre du Fonds coopératif régional 03-12 Lien de la présentation originale et celle de Sonia Fiset au Récit MST Lien de la présentation originale