Différences

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

--- isn:pygame02 [2019/11/07 15:20] – créée techer.charles_educ-valadon-limoges.fr
+++ isn:pygame02 [2019/11/14 10:31] (Version actuelle) – [Les activités ...] techer.charles_educ-valadon-limoges.fr
@@ Ligne 1: / Ligne 1: @@
 ====== Pygame : gérer une image ======
+===== Utiliser des images =====
+Choisissez une image png et téléchargez-là sur le site. Comme exemple, ce sera l'image **fraise.png** qui sera utilisée.
+Pour ce projet l'image  :
+  * doit avoir les dimensions de 40x40 pixels,
+  * a le coin supérieur gauche positionné aux coordonnées (50, 50).
+Voici les variables à définir :
+<code python>
+# image FRAISE
+x_fraise = 50
+y_fraise = 50
+largeur_fraise = 40
+hauteur_fraise = 40
+IMG_FRAISE = pygame.image.load("fraise.png")
+</code>
+===== Déplacement de l'image avec le clavier =====
+Voici les déplacement à gérer :
+  * Quand on appuie sur la touche [Flèche à droite] du clavier, la fraise de déplace à droite.
+  * Quand on appuie sur la touche [Flèche à gauche] du clavier, la fraise de déplace à gauche
+<code python>
+for event in pygame.event.get():
+   if event.type == pygame.KEYDOWN:
+       if event.key == pygame.K_RIGHT:
+           x_fraise = x_fraise + 4
+       elif event.key == pygame.K_LEFT:
+            x_fraise = x_fraise - 4
+</code>
+Pour indiquer à Pygame d'afficher l'image en fonction des coordonnées :
+<code python>
+ECRAN.blit(IMG_FRAISE, (x_fraise, y_fraise))
+</code>
+===== Le programme complet =====
+<code python>
+import pygame
+pygame.init()
+HAUTEUR = 400
+LARGEUR = 400
+COULEUR_FOND = (255, 255, 255)
+ECRAN = pygame.display.set_mode((LARGEUR, HAUTEUR))
+ARRET = False
+# image FRAISE
+x_fraise = 50
+y_fraise = 50
+largeur_fraise = 40
+hauteur_fraise = 40
+IMG_FRAISE = pygame.image.load("fraise.png")
+while not ARRET:
+  ECRAN.fill(COULEUR_FOND)
+  for event in pygame.event.get():
+     if event.type == pygame.KEYDOWN:
+        if event.key == pygame.K_ESCAPE:
+           ARRET = True
+        elif event.key == pygame.K_RIGHT:
+           x_fraise = x_fraise + 4
+        elif event.key == pygame.K_LEFT:
+           x_fraise = x_fraise - 4
+  ECRAN.blit(IMG_FRAISE, (x_fraise, y_fraise))
+  pygame.display.update()
+</code>
+===== Déplacement automatique d'une image =====
+Cette fois -ci c'est image d'un ballon qui va se déplacer de gauche à droite. N'oubliez pas de télécharger cette image ballon.png
+Voici les variables à définir :
+<code python>
+# image Ballon
+x_ballon = 10
+y_ballon = 10
+largeur_ballon = 20
+hauteur_ballon = 20
+IMG_BALLON = pygame.image.load("ballon.png")
+</code>
+Précisons la vitesse de déplacement du ballon sur les axes x et y .
+<code python>
+ballonSpeed = [1,  0]
+</code>
+Création d'une surface invisible qui correspond aux dimensions du ballon
+<code python>
+ballonRect = IMG_BALLON.get_rect()
+</code>
+En Pygame, la notion de surface est fondamentale, car la manipulation de cet élément de géométrie est un aspect important et conséquent du développement du jeu vidéo. Une surface correspond à une ligne affichée sur l’écran ou à un polygone affiché sur l’écran ; ce polygone peut être rempli de couleur, ou non. Une part importante de la gestion graphique consistera donc à créer et à manipuler les surfaces Pygame.
+Pour déplacer le ballon à chaque itération, on inclut  l'image du ballon dans la surface rectangle et on déplace cette surface :
+<code python>
+ECRAN.blit(IMG_BALLON, ballonRect)
+ballonRect = ballonRect.move(ballonSpeed)
+</code>
+Quand le ballon quitte la fenêtre, on inverse la vitesse de déplacement :
+<code python>
+ if ballonRect.right > LARGEUR:
+    ballonSpeed[0] = - ballonSpeed[0]
+</code>
+Pour gérer la vitesse de rafraîchissement de l'écran, on peut introduite un délai en millisecondes. Par exemple un délai de 100 millisecondes fera exécuter la boucle 10 fois par seconde :
+<code python>
+pygame.time.delay(100)
+</code>
+Une autre solution consiste à définir le nombre maximum d'images par seconde avec la fonction **tick** de l'objet **Clock** de Pygame :
+<code python>
+clock = pygame.time.Clock()
+# dans la boucle de jeu définir un maximum de 20 images par seconde
+clock.tick(20)
+</code>
+===== Le programme complet =====
+<code python>
+import pygame
+pygame.init()
+HAUTEUR = 400
+LARGEUR = 400
+COULEUR_FOND = (255, 255, 255)
+ECRAN = pygame.display.set_mode((LARGEUR, HAUTEUR))
+ARRET = False
+# image FRAISE
+x_fraise = 50
+y_fraise = 50
+largeur_fraise = 40
+hauteur_fraise = 40
+IMG_FRAISE = pygame.image.load("fraise.png")
+# image Ballon
+x_ballon = 10
+y_ballon = 10
+largeur_ballon = 20
+hauteur_ballon = 20
+IMG_BALLON = pygame.image.load("ballon.png")
+ballonSpeed = [1,  0]
+#IMG_BALLON.move(ballonSpeed)
+ballonRect = IMG_BALLON.get_rect()
+while not ARRET:
+  pygame.time.delay(100)
+  ECRAN.fill(COULEUR_FOND)
+  for event in pygame.event.get():
+    if event.type == pygame.QUIT:
+      sys.exit()
+    elif event.type == pygame.KEYDOWN:
+      if event.key == pygame.K_RIGHT:
+        x_fraise = x_fraise + 4
+      elif event.key == pygame.K_LEFT:
+        x_fraise = x_fraise - 4
+  ECRAN.blit(IMG_FRAISE, (x_fraise, y_fraise))
+  ECRAN.blit(IMG_BALLON, ballonRect)
+  ballonRect = ballonRect.move(ballonSpeed)
+  if ballonRect.right > LARGEUR:
+    ballonSpeed[0] = - ballonSpeed[0]
+  pygame.display.update()
+</code>
+==== Les activités ... ====
+<WRAP center round info >
+[[.:accueil|Je reviens à la liste des activités.]]
+</WRAP>
+https://repl.it/@charlestecher/Gerer-une-image
+<html>
+<iframe height="400px" width="100%" src="https://repl.it/@charlestecher/Gerer-une-image?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 >
+[[.:accueil|Je reviens à la liste des activités.]]
+</WRAP>