====== 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>