Différences

Ci-dessous, les différences entre deux révisions de la page.

--- isn:pygame01 [2019/11/07 11:40] – créée techer.charles_educ-valadon-limoges.fr
+++ isn:pygame01 [2019/11/07 15:24] (Version actuelle) – techer.charles_educ-valadon-limoges.fr
@@ Ligne 1: / Ligne 1: @@
+====== Pygame : créer une fenêtre de jeu ======
+===== Créer un projet repl.it =====
+  * aller sur le site https://repl.it/
+  * Créer un projet Repl.it en sélectionnant **PyGame**
+{{ :isn:pygame_01.png | }}
+===== Créer la fenêtre de jeu =====
+Il faut tout d'abord importer la bibliothèque **Pygame**.
+<code python>
+import pygame
+</code>
+Puis **initialiser** Pygame.
+<code python>
+pygame.init()
+</code>
+Il ne reste plus qu'à définir les **dimensions** de la fenêtre de jeu :
+  * **hauteur et largeur**,
+  * **couleur** de fond.
+Comme ces valeurs ne changeront pas tout au long du jeu, elles sont considérées comme des constantes et par convention, le nom des variables est écrit en majuscule
+<code python>
+HAUTEUR = 400
+LARGEUR = 400
+</code>
+Définir la couleur de fond :
+<code python>
+COULEUR_FOND = (255, 255, 255)
+</code>
+Lancer l'affichage de la fenêtre de jeu :
+<code python>
+ECRAN = pygame.display.set_mode((LARGEUR, HAUTEUR))
+</code>
+Les deux paramètres de la fonction set_mode() sont fournis sous la forme d'un **tuple** :
+ (LARGEUR, HAUTEUR)
+===== La boucle du jeu =====
+La **boucle de jeu** ou boucle d’animation, est une notion fondamentale dans les jeux. Elle correspond à une **boucle infinie** qu'il faudra interrompre pour quitter le jeu. Pour cela, on code une **action utilisateur** comme par exemple l'appui sur la touche [Esc] du clavier.
+Il est pratique d'utiliser une **variable booléenne** :
+  * si sa valeur est **True**, la boucle se poursuit,
+  * si sa valeur est **False**,  elle s’interrompt.
+<code python>
+ARRET = False
+while not ARRET:
+  # instructions de la boucle infinie
+</code>
+Durant cette boucle de jeu, le programme :
+  * prend en compte les **actions** (entrées) du joueur  ou du système,
+  * **met à jour** les éléments du jeu,
+  * **rafraîchit** (redessine) l'écran.
+Chaque itération devrait avoir la même durée que toutes les autres pour permettre une fluidité dans le déroulement du jeu et en général Pygame réalise 30 itérations par seconde (**30 images par seconde**).
+Pour la couleur de fond :
+  * la fonction **fill()** permet de **remplir un élément** avec une couleur passée en paramètre (tuple de 3 valeurs)
+  * la fonction **pygame.display.update()** permet de rafraîchir l'écran.
+La fonction **pygame.event.get()** permet d’intercepter tous les événements entrants notamment depuis le clavier, la souris, etc. Si on appuie sur la touche [Esc], alors le jeu est interrompu. Ceci est permis en utilisant les évènements du clavier suivants :
+  * pour savoir si une touche a été appuyée  : **pygame.KEYDOWN**
+  * pour connaître s'il s'agit de le touche [Esc] ou [Echap]  : **pygame.K_ESCAPE**
+<code python>
+   for event in pygame.event.get():
+       if event.type == pygame.KEYDOWN:
+           if event.key == pygame.K_ESCAPE:
+               ARRET = True
+</code>
+===== Le système de coordonnées Pygame =====
+L’écran est muni d’un système de **coordonnées orthonormé**.
+L’origine du repère, le point (0, 0), est le **point supérieur gauche de l’écran**.
+L’**axe des x** est l’axe **horizontal orienté vers la droite**.
+L’**axe des y** est l’axe **vertical orienté vers le ba**s.
+{{ :isn:pygame_02.png|}}
+===== Programme complet : =====
+<code python>
+import pygame
+pygame.init()
+HAUTEUR = 600
+LARGEUR = 600
+COULEUR_FOND = (255, 255, 255)
+ECRAN = pygame.display.set_mode((LARGEUR, HAUTEUR))
+ARRET = False
+while not ARRET:
+   ECRAN.fill(COULEUR_FOND)
+   pygame.display.update()
+   for event in pygame.event.get():
+       if event.type == pygame.KEYDOWN:
+           if event.key == pygame.K_ESCAPE:
+               ARRET = True
+</code>
+https://repl.it/@charlestecher/pygame-1
+<html>
+<iframe height="400px" width="100%" src="https://repl.it/@charlestecher/pygame-1?lite=true" scrolling="no" frameborder="no" allowtransparency="true" allowfullscreen="true" sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals"></iframe>
+</html>
 ==== Les activités ... ====
 <WRAP center round info >