Tutorial and ideas for a project

Français ici !

Below, here are few projects my students made previous year, click to see the picture full screen!

The students are from 14 to 16 years old, they begin the year with zero knowledge of computing, and finish being able to code those projects after 16h of programming with me! The rate is 1 hour per week, the projets shown are the most developped ones of the group, those include some work at home, those students were naturally motivated to work at home.

The course material is on the videogame programming course website.

The source code of those projects is available here: Michal [zip], Arnaud [zip], download the zip and install python and pygame to play!

Tutorial

Français ici !

La correction de ce tutoriel se trouve dans la liste des versions de ma branche 2D_tutorial dans mon dépôt parascolaire-tutorials qui contient plusieurs tutoriels informatiques, ces tutoriels font parties de mon github. Une autre version de ce tutoriel se trouve sur dans la liste des versions de ma branche 2D_tutorial_images. Plus d'infos sur le système de correction ici.

    Lecture du code de base

  1. Quelle est la taille de la fenêtre ? En pixels ? En centimètres ? Quelle est la taille de l'écran d'ordinateur ? En pixels ? En centimètres ? Quelle est la longueur de la diagonale ? En pouces ? Comment calculer la diagonale par calcul ?
  2. Vous voyez 3 formes, un rectangle rouge, un grand cercle bleu et un petit cercle vert, ils ont une certaine position et une certaine taille, quelles lignes de code indiquent précisément ces informations ? Pourquoi le cercle bleu est-il au dessus du rectangle rouge ? #CorrectionRectangle
  3. Changez la couleur, la position et la taille des éléments. Comment en dessiner un quatrième ? Comment faire pour coller le rectangle au bord gauche ? Droit ? Haut ? Bas ? Même chose pour les cercles. Comment faire pour les mettre au milieu ? Comment faire de l'orange ? Je rappelle qu'une couleur est définie par 3 entiers entre 0 et 255, indiquant la composante de rouge, de vert, et de bleu, petit rappel ici.

    Écriture d'une animation

  4. On aimerait que la balle verte se déplace vers la droite, il faut créer une variable que vous appelez comme vous voulez, que ce soit a, pos ou ma_position.
    1. Au tout début du code, ajoutez a = 100 par exemple. #Correction
    2. Et à chaque tick (dans la boucle while), on ajoute +1 à a. #Correction
    3. Finalement, le cercle ne devra plus être dessiné en [150, 80] mais en [a, 80]. #Correction
  5. Elle avance un peu lentement, comment faire pour qu'elle avance de 5 pixels par tick ? #Correction
  6. Elle sort de l'écran... Vu que l'écran est de taille 700×500, il faut rajouter une condition Si la position est plus grande que 700: mettre la position à zéro. #Correction
  7. Comment faire pour que la balle avance vers la gauche ? #Correction
  8. Comment faire pour que la balle commence à droite de l'écran ? #Correction
  9. Maintenant la balle reste dans l'écran mais ne rebondit pas, nous faisons ça en trois étapes :
    1. Il faut créer une variable sens qui mémorisera si la balle va à gauche ou à droite. Par exemple, si la balle va à droite sens = 1, et si elle va à gauche sens = -1. À la place de -1 et 1, on peut aussi dire 1 et 2, ou 0 et 1 ! #Correction
    2. Le déplacement sera donc une condition : Si sens vaut 1: se déplacer à droite, sinon: se déplacer à gauche. #Correction
    3. Vérifiez que la balle va vers la gauche quand vous imposez que sens vaut -1 au début du code. #Correction
    4. Il faut pouvoir changer de sens, si la balle est trop à droite (position plus grande que 700): mettre sens à -1, sinon: si la balle est trop à gauche (position négative): mettre sens à 1. #Correction1 #Correction2
  10. Amélioration graphique

  11. On peut faire deux dessins différents en fonction du sens ! Via des formes géométriques ou des images (voir plus bas).

    Un triangle dessiné grâce à la commande pygame.draw.polygon(ecran, ROUGE, [[0,50], [100,0], [100,100]])

    Par exemple si sens = -1, dessiner un triangle vers la gauche, sinon dessiner un triangle vers la droite. Les triangles peuvent être dessinés avec pygame.draw.polygon(ecran, ROUGE, [[0,50], [100,0], [100,100]]) #Correction1 #Correction2

  12. Que sera la commande draw.polygon pour que le triangle bouge avec le cercle ? #Correction1 #Correction2
  13. Quelle est la position du centre du triangle ? Quelle sera la commande draw.polygon pour que a représente le centre ? #Correction
  14. À la place de formes géométriques, vous pouvez aussi mettre des images comme par exemple celle-ci ou celle-là ou encore sur les sites Kenney.nl, OpenGameArt.org, ou HasGraphics.com conseillés par programarcadegames #Correction

    Le clavier et la souris

  15. Le cercle bleu ne bouge pas, utilise le clavier (version ponctuelle) pour faire pour le faire bouger !
  16. Cependant, ce déplacement est saccadé, il faut appuyer 5 fois sur gauche pour que le cercle avance plusieurs fois, utilise plutôt la version continue des événements pour le faire bouger !
  17. Tu pourrait aussi faire déplacer le cercle bleu en cliquant avec la souris (version ponctuelle).
  18. Cependant, ce déplacement n'est pas continu, on n'aimerait pas devoir être obligé de cliquer pour se déplacer, utilise plutôt la version continue.

Choisissez maintenant un projet ! Si vous êtes à court, choisissez dans la liste en dessous de cette section, ou regardez dans cette longue liste donnant même une correction !

Vous aurez sûrement besoin des événements clavier et souris, de connaître l'état du clavier et de la souris, de faire des images (ou de la musique) ou d'écrire du texte. Pour trouver des images et des sons, programarcadegames conseille les sites Kenney.nl, OpenGameArt.org, HasGraphics.com pour les images et OpenGameArt.org, www.freesound.org pour les sons.

Afin de structurer son programme, on peut également faire des objets et des fonctions.

Plus de programmation ? Lisez mes fichiers de programmation.

Vous pouvez également lire ma page de math, par exemple pour faire des polygones réguliers.

Pour dessiner un hexagone avec la fonction draw.polygon, on fait des maths !

Ou bien ma page de physique pour faire des effets de gravité ?

Si vous êtes à l'aise et motivé, il est même possible d'apprendre plus, comme écrire dans les fichiers ou bases de données. Faire de la 3D ou du réseau !

Pong

À la fin des exercices, vous aurez une balle qui rebondit, il vous faut donc rajouter les fonctionnalités de base :

Améliorations

Space invaders

Avec votre vaisseau et vos invader, exterminez les tous !

Améliorations

Plusieurs types d'android :

Plusieurs missiles/types d'armes :

Multijoueur :

Snake

Le snake du vieux nokia 3310. Ah vous êtes trop jeune pour avoir connu ce téléphone ? #vieux

Améliorations

Serveuse

Serveuse est un jeu où vous devez gérer une serveuse de restaurant. Des clients arrivent dans votre restaurant à une table, vous marchez jusqu'à leur table et prenez leur commande. Ensuite vous retournez en cuisine pour leur faire parvenir la commande. Vous attendez que les plats soient prêts puis les servez aux clients, Les clients mangent et quand ils partent en payant l'addition vous devez ramenez leur vaisselle en cuisine.

Voici ici un jeu similaire sur le même principe.

Je propose de faire cela dans cet ordre :

Améliorations

Multijoueur :

Agario

Ici le but sera de faire une version offline de agar.io.

Je propose de faire cela dans cet ordre :

Note sur le déplacement dans toutes les directions

Améliorations

Multijoueur

Bomberman

Jeu d'arcade où des joueurs doivent s'affronter sur un terrain quadrillé en posant des bombes qui détruisent les bombes ou les bomberman.

RPG

Un rpg, comme Zelda en 2D. Ici c'est trop vaste pour vous proposer un projet, libre cours à votre imagination.

Pokemon est également un chouette exemple de RPG.

Démineur

  1. Dessiner un carré (disons de largeur 20 et positionné à 10 pixels de l'écran), faire un code qui print hello quand on clique dessus. [collisions] [souris - event]
  2. Dessiner maintenant 4 carrés en une grille 2×2, (disons que chaque carré est séparé du suivant avec 5 pixels). Comment savoir sur quel carré on a cliqué ?
  3. On va maintenant rajouter deux bombes dans notre grille (disons en haut à droite et en bas à gauche). Pour cela il faudra dire que chaque carré a une bombe ou non, comment encoder cette information ? Je vois deux solutions assez différentes :
    1. Méthode Case (je recommande) :
      • Chaque carré aura besoin d'une variable bombe qui vaudra 1 s'il y a une bombe. On créera donc 4 variables bombe_haut_droite, bombe_haut_gauche, bombe_bas_droite, bombe_bas_gauche,
      • Dessiner le terrain en dessinant une bombe sur les cases où il y en a une. Pour chaque case, vous faites un if pour savoir si vous devez dessiner une bombe dans la case.
    2. Méthode Bombe :
      • Faire un objet Bombe qui contient le x et le y. On aura donc deux objets, bombe1 et bombe2.
      • Dessiner le terrain en dessinant une bombe sur les cases où il y en a une. Vous pouvez d'abord dessinner la grille et puis les bombes.
  4. Coder ce comportement: si on clique sur une case qui n'est pas sur une bombe, augmenter son score de 1. Il faudra créer une variable score et l'afficher ! Le jeu est actuellement facile car on voit les bombes.
  5. Coder ce comportement: si on clique sur une case qui est une bombe, afficher un écran de game over. Créer une variable a_perdu qui vaudra 1 si le joueur a perdu et 0 si le joueur est encore en jeu. En fonction de cette variable vous saurez si vous devez afficher l'écran de game over.
  6. Finalement, si on arrive au score maximal (nombre de cases moins le nombre de bombes), afficher un écran de gagné ! Vous pouvez remplacer votre variable a_perdu par une variable etat_partie qui vaut 0 si le joueur joue, 1 s'il a gagné et 2 s'il a perdu.
  7. Quand le joueur perd, vous pouvez afficher les bombes sur l'écran de game over, alors qu'avant il ne les voit pas. Vous dessinerez les bombes uniquement si le joueur a perdu.
  8. (Méthode Case) Faire une liste de cases pour pouvoir gérer les 4 cases de la même manière.
    • On pourra choisir une liste de taille 4.
      
                                      terrain = [0, 1, 1, 0] # deux bombes !
                                  
    • Ou une liste de taille 2 contenant elle-même deux listes (une liste de liste), je recommande cette méthode.
      
                                      terrain = [[0, 1], [1, 0]] # deux bombes !
                                  
  9. (Méthode Bombe) Faire une liste de bombes pour pouvoir gérer facilement les 2 bombes du jeu.
  10. Faire maintenant une grille de taille variable, 10×10 par exemple, créez une variable taille = 10 qui permettra de facilement changer la taille du jeu. Il faudra aussi une autre variable qui dit combien de bombes seront placées via total_bombes = 20 par exemple.
  11. Faire en sorte que qu'il y a bien le nombre de bombes demandé, placez les au hasard avec progra_hasard !
  12. On veut maintenant que notre jeu soit plus sympa, et on va coder les indicateurs de bombes ! Faire un objet Case qui contiendra une ou deux informations :
    1. nb_bombe: Le nombre de bombe autour de la case (peut être zéro).
    2. (Méthode Case uniquement)bombe: Vaudra 1 si c'est une bombe, sinon zéro.
    On aurait pu encoder ces deux (cette seule) information(s) en un seul nombre mais en structurant comme ça on peut facilement rajouter des autres attributs à la case.
  13. Le terrain sera donc une liste d'objet Case plutôt qu'une liste de nombres.
  14. (Méthode Bombe), faire un terrain qui contient des cases !
    • Soit une liste de case, donc par exemple pour 4 cases :
      
                                  terrain = [0, 1, 1, 0] # deux bombes sur un terrain 2×2 !
                              
      Attention, le terrain ne contiendra pas des nombres, mais des objets Case !
    • Ou une liste de taille 2 contenant elle-même deux listes (une liste de liste), je recommande cette méthode.
      
                                  terrain = [[0, 1], [1, 0]] # deux bombes sur un terrain 2×2 !
                              
      Attention, le terrain ne contiendra pas des nombres, mais des objets Case !
  15. Mettez nb_bombe au hasard pour l'instant pour toutes les cases, et afficher cette valeur dans la case avec du texte. Vous pouvez également faire varier la couleur en fonction du nombre comme dans le vrai démineur.
  16. Il faut maintenant remplir les informations nb_bombe après avoir placé les bombes. Pour cela je propose un algo comme ceci:
    
                        pour chaque case:
                            n = 0
                            if bombe à droite de case:
                                n = n + 1
                            
                            if bombe en haut de case:
                                n = n + 1
                            
                            if bombe en bas de case:
                                n = n + 1
                            ...
                            
                            case.nb_bombe = n
                        
  17. La dernière chose à faire pour avoir un vrai démineur, est de faire que lorsqu'on clique sur une case n'ayant pas de bombe comme voisin, ça clique automatiquement sur ses voisins. La meilleure manière de faire ça est avec une fonction récursive, je te guiderai pour l'écriture de cette fonction.