« Pygame/Déplacer une image » : différence entre les versions

Contenu supprimé Contenu ajouté
Goatsoop (discussion | contributions)
Aucun résumé des modifications
Ligne 5 :
''(nécessite une relecture approfondie, les tournures de phrase sont franchement bancales)''
 
La plupart des gens qui commencent la programmation graphique ont undes longdifficultés tempspour d'apprentissagetrouver pourcomment animerfaire bouger une image surà l'écran. Sans comprendre tous les concepts, cela peut être très confusdéroutant. Vous n'êtes pas la première personne à être ainsibloquée ici, je faisferais de mon mieux pour vous apprendre les choses étape par étape. DeNous allons même, nous essayeronsessayer de terminer avec des méthodes pour garder vos animations efficaces.
 
NoteNotez :que nous n'enseignerons pas la programmation Python dans cet article, ceci n'est qu'une introduction aux fonctions basiques de Pygame.
 
== De simples pixels sur l'écran ==
Ligne 15 :
C'est la première chose à comprendre. En appelant la fonction <tt>blit()</tt> d'une image sur l'écran, vous changez simplement la couleur des pixels de l'écran. Les pixels ne sont pas ajoutés ou déplacés, c'est seulement la couleur de certains pixels qui est modifiée. Ces images que vous ''blitez'' sur l'écran sont des Surfaces dans Pygame, mais elles ne sont aucunement connectées à la Surface d'affichage. Quand elles sont ''blitées'' sur l'écran, elles sont copiées sur la Surface d'affichage, mais vous avez toujours accès à l'image originale.
 
Avec cette brève description, peut-être pouvez-vous déjà comprendre ce que nécessite l'animation d'une image. En réalité, nous ne déplaçons rien. Nous faisons simplement un ''blit'' de l'image dans une nouvelle position. Mais avant, de dessiner l'image dans une nouvelle position, il faut effacer l'ancienne. Autrement, l'image serait visible à deux places sur l'écran. En effaçant rapidement l'image et en la redessinant à un nouvel endroit, nous réalisons ''l'illusion'' du mouvement.
 
A travers le reste du tutoriel, nous décomposerons ce processus en étapes simples. Nous verrons également comment animer plusieurs images à l'écran en même temps. Vous avez probablement déjadéjà des questions, par exemple : ''comment effacer l'image avant de la redessiner dans une nouvelle position ?'' Peut-être êtes-vous déjà totalement perdu ? Nous espérons que le reste de ce tutoriel puissepourra éclaircir certaines choses.
 
== Retournons sur nos pas ==
 
Peut-être que ce concept de pixels et d'images est encore un peu étranger à vos yeux ? Bonne nouvelle, durant les prochaines sections nous utiliserons du code pour faire tout ce que nous voulons, il n'utilisera pas de pixels. Nous créeronsallons créer une petite liste de 6 nombres en Python, et imagineronsimaginer qu'elle représente des graphismes fantastiques que vousnous pourrezpourrions visualiser sur l'écran. IlEt serail est surprenant de s'apercevoir queà c'estquel trèspoint prochecela decorrespond à ce que nous ferons plus tard avec des graphismes réels.
 
Alors commençons par créer notre liste et remplissons-la ded'un beau paysagespaysage fait de 1 et de 2.
 
<source lang="python">
Ligne 31 :
</source>
 
Nous avonsvenons créede créer l'arrière-plan. CeMais ça ne sera pas franchement excitant tant que nous n'aurons pas dessiné un joueur à l'écran. Nous allons créer un puissant Héros qui ressemblera à un 8. Nous Déposons-le déposerons au milieu de la carte et voyons àde quoi il ressemblea l'air.
 
<source lang="python">
Ligne 39 :
</source>
 
AVous cen'êtes stade,surement nouspas sommesparvenus allés aussiplus loin quesi devous avez tout juste commencé à faire de la programmation graphique avec Pygamepygame. Vous avez obtenu quelques trucs mignons sur l'écran, mais vousils ne pouvezpouvaient lesse déplacer nul part. Peut-être que maintenant que notre écran n'est qu'une simple liste de nombres, il est plus facile de voir comment les déplacer ?
 
== Déplacement de notre Héros ==
Ligne 61 :
</source>
 
Aïe! Maintenant nous pouvons voir 2 héros. Un dans l'ancienne position, et un dans la nouvelle. C'est exactement la raison pour laquelle nous avons besoin ''d'effacer'' le héros dedans son ancienne position avant de le dessiner sur sa nouvelle position. Pour l'effacer, nous devons changer la valeur dans la liste pour qu'elle soit de nouveau comme celle avant lela dessinprésence du héros. Pour ça, nous devons conserver laune valeurtrace des valeurs de l'affichage avant de replacerque notre héros ne les remplace. Il y a plusieurs manières de le faire, mais la plus simple est de garder une copie séparée de l'arrière-plan. Ceci signifie que nous devons faire subir quelques modifications à notre jeu.
 
== Création d'une carte ==
 
Ce que nous voulons faire c'est de créer une liste séparée que nous appellerons arrière-plan. Nous créerons cet arrière-plan de façon à ce qu'il soit l'arrière-plancomme originalnotre duécran jeu, celuioriginal rempli de 1 et de 2. Ensuite nous copierons chaque objet dans l'ordre de d'affichage : de l'arrière-plan vers l'écran. Après, nous pourrons redessiner notre héros sur l'écran.
 
<source lang="python">
Ligne 82 :
Cela peut sembler être un surplus de travail. Nous n'en sommes pas plus loin d'où nous étions la dernière fois, lorsque nous avons tenté de le déplacer. Mais cette fois nous avons plus d'information pour pouvoir le déplacer correctement.
 
== Déplacement de notre Héros (phase2ème 2essai) ==
 
Cette fois ci, il sera plus simple de déplacer le héros. D'abord nous effacerons le héros de son ancienne position. Nous faisons cela en recopiant les bonnes valeur de l'arrière-plan sur l'écran. Ensuite, nous dessinerons le personnage dans sa nouvelle position sur l'écran.
Ligne 106 :
</source>
 
Excellent,! ceCe n'est pas exactement ce que l'on pourrait appeler une animation fluide. Mais avec quelques arrangements, nous ferons ce travail directement avec des graphismes sur l'écran.
 
== Définition de ''blit'' ==