Voir la source de Pygame/Concevoir des jeux avec Pygame

{{Pygame}}

== Introduction ==

En premier lieu, je supposerais que vous ayez lu le tutoriel [[Pygame/Chimp - Ligne par ligne|Chimp - Ligne par ligne]], lequel introduit les bases de Python et de Pygame. Dans le cas contraire, prenez-en connaissance avant de lire la suite, car je ne répéterais pas les bases fournies par cet autre tutoriel (en tous cas, pas dans les détails). Ce tutoriel est destiné à ceux qui savent réaliser un petit jeu ''ridiculement'' simple, et qui aimeraient réaliser un petit jeu ''relativement'' simple comme Pong. Il vous fournira une introduction à quelques concepts, comme l'architecture d'un jeu, quelques notions de mathématiques pour le fonctionnement physique de la balle, ainsi que sur la manière de garder votre jeu facile à maintenir et à améliorer.

Tout le code de ce tutoriel est utilisé dans ''Tom's Pong'', un jeu que j'ai écrit. À la fin de ce tutoriel, vous devriez non seulement renforcer votre compréhension de Pygame, mais vous devriez aussi comprendre comment Tom's Pong fonctionne, et comment concevoir votre propre version.

Maintenant, faisons une brève revue des bases sur l'utilisation de Pygame. Une méthode répandue d'organisation de code  pour un jeu est de le diviser en six parties distinctes :

* '''Le chargement des modules qui sont utilisés dans le jeu''' : Tous les modules standards, excepté les importations locales des espaces de nommage de Pygame et le module Pygame lui-même.

* '''Les classes de manipulation des ressources''' : La définition des classes gérant la plupart des ressources de base, que sont le chargement des images et des sons, ainsi que les procédures de connexion/déconnexion au réseau, le chargement des sauvegardes de jeu, et toutes les autres ressources que vous pouvez utiliser dans votre jeu.

* '''Les classes des objets du jeu''' : Cette partie devra contenir les définitions de classes pour les objets de votre jeu. Dans l'exemple de Pong, ce sera un objet pour la raquette du joueur (que vous pouvez initialiser plusieurs fois, une pour chaque joueur dans le jeu), et une pour la balle (laquelle peut aussi avoir de multiples instances). Si vous souhaitez avoir un menu sympa pour votre jeu, c'est aussi une bonne idée de faire une classe pour le menu.

* '''Toutes les autres fonctions du jeu''' : Dans cette partie seront contenues toutes les autres fonctions nécessaires à la bonne marche du jeu, comme par exemple celles qui définissent le tableau de scores, la gestion du menu, etc. Tout le code que vous pourriez mettre dans la logique de jeu principal, mais qui rendrait sa logique difficilement lisible et peu cohérente, devrait être contenu dans cette partie. Par exemple, tracer le tableau de scores ne relève pas du jeu en lui-même, cela devrait être fait par une fonction particulière située dans cette partie.

* '''L'initialisation du jeu''' : Cela inclut les objets Pygame eux-mêmes, l'arrière-plan, les objets du jeu (initialisation des instances de classe) et les autres petits morceaux de code que vous pourriez vouloir ajouter.

* '''La boucle principale''' : C'est dans cette boucle que vous placerez la gestion des entrées (c'est à dire l'acquisition des évènements utilisateurs que sont les frappes de clavier/bouton de souris), le code de mise à jour des objets du jeu, et finalement la mise à jour de l'écran.

Tous les jeux que vous ferez auront certaines, voire la totalité de ces sections, et probablement d'autres de votre propre cru. Dans le cadre de ce tutoriel, je parlerai de la façon dont Tom's Pong est agencé, et de la façon d'appliquer cette organisation à chaque projet de jeu que vous pourriez avoir. Je supposerai également que vous voudriez garder tout le code dans un seul fichier, mais si vous faites un jeu plutôt conséquent en taille de code, c'est souvent une bonne idée de séparer le jeu en plusieurs modules. Mettre les classes des objets du jeu dans un fichier <code>objects.py</code>, par exemple, peut vous aider à séparer la logique du jeu de ses objets. Si vous avez énormément de code pour la manipulation des ressources, il peut également être pratique de le mettre dans un module <code>ressources.py</code>. Vous pourrez alors écrire <code>from objects, resources import *</code> pour importer toutes les classes et les fonctions.

=== Une remarque sur les styles d'écriture ===

La première chose à laquelle il faut penser, lors de l'approche d'un projet de programmation, est de décider d'un style d'écriture, et de le conserver. Python en lui-même facilite cela, à cause de son interprétation stricte des espaces et de l'indentation, mais cela ne vous empêche pas de choisir la largeur de votre indentation, de quelle manière vous placerez les importations, comment vous allez commenter le code, etc. Vous verrez comment je fais tout cela dans mes exemples de code, mais quel que soit le style que vous adopterez, conservez-le tout au long de votre code. Essayez également de documenter toutes vos classes, et de commenter tous les morceaux de code qui peuvent sembler obscurs. Par ailleurs, il ne sert à rien de commenter ce qui est évident. J'ai vu beaucoup de personnes faire la chose suivante :

<syntaxhighlight lang="python">
player1.score += scoreup	# Add scoreup to player1 score
</syntaxhighlight>

Ce n'est pas très grave, mais un peu inutile. Un mauvais code est mal agencé, avec des changements aléatoires dans le style d'écriture, et une maigre documentation. Ce mauvais code ne sera pas seulement ennuyeux pour les autres personnes, mais il sera également difficile à maintenir pour vous.

== Révision : les fondamentaux de Pygame ==

=== Le jeu Pygame de base ===

Pour la révision (ça ne peut pas faire de mal), et pour s'assurer que vous êtes familier avec la structure d'un programme Pygame standard, je vais brièvement parcourir un programme Pygame simple, qui n'affichera rien de plus qu'une fenêtre avec un peu de texte à l'intérieur, et qui devrait finalement ressembler à ça (naturellement, la décoration de la fenêtre pourra être différente sur votre système) :

[[Image:Pygame-base.png]]

Dans cet exemple, le code complet ressemble à ça :

<syntaxhighlight lang="python">
#!/usr/bin/python
# coding: utf-8

import pygame
from pygame.locals import *

def main():
    # Initialisation de la fenêtre d'affichage
    pygame.init()
    screen = pygame.display.set_mode((300, 50))
    pygame.display.set_caption('Programme Pygame de base')

    # Remplissage de l'arrière-plan
    background = pygame.Surface(screen.get_size())
    background = background.convert()
    background.fill((250, 250, 250))

    # Affichage d'un texte
    font = pygame.font.Font(None, 36)
    text = font.render("Salut tout le monde", 1, (10, 10, 10))
    textpos = text.get_rect()
    textpos.centerx = background.get_rect().centerx
    textpos.centery = background.get_rect().centery
    background.blit(text, textpos)

    # Transférer le tout dans la fenêtre
    screen.blit(background, (0, 0))
    pygame.display.flip()

    # Boucle d'évènements
    while 1:
        for event in pygame.event.get():
            if event.type == QUIT:
                return

        screen.blit(background, (0, 0))
        pygame.display.flip()

if __name__ == '__main__': main()
</syntaxhighlight>

=== Objets Pygame de base ===

Comme vous pouvez le constater, le code se divise en trois catégories principales : la fenêtre d'affichage (<code>screen</code>), l'arrière-plan (<code>background</code>) et le texte (<code>text</code>). Chacun de ces objets a pu être créé grâce à l'appel en premier lieu de la méthode <code>pygame.init()</code>, que nous avons modifiée ensuite pour qu'elle convienne à nos besoins. La fenêtre d'affichage est un cas un peu spécial, car elle modifie l'affichage à travers les appels <code>pygame</code>, plutôt que d'appeler les méthodes appartenant aux objets de l'écran. Mais pour tous les autres objets Pygame, nous créons d'abord l'objet comme une copie d'un objet Pygame, en lui affectant certains attributs, et développons les objets de notre jeu à partir de celui-ci.

Pour l'arrière-plan, nous créons d'abord un objet Surface et lui donnons la taille de la fenêtre. Nous utilisons ensuite la méthode <code>convert()</code> pour convertir la Surface en un unique [[w:Espace colorimétrique|espace colorimétrique]]. C'est particulièrement recommandé lorsque nous manipulons plusieurs images et surfaces, toutes dans un espace colorimétrique différent, sinon cela ralentirait de beaucoup le rendu. En convertissant toutes les surfaces, nous pouvons accélérer drastiquement les temps de rendu. Enfin nous remplissons la surface d'arrière-plan en blanc (255, 255, 255). Ces valeurs sont en RGB et nous pouvons les retrouver à partir de n'importe quel bon programme de dessin.

En ce qui concerne le texte, nous avons besoin de plus d'un objet. D'abord nous créons un objet <code>font</code>, qui définira quelle police nous utiliserons, ainsi que sa taille. Ensuite nous créons un objet <code>text</code>, en utilisant la méthode de rendu de notre objet <code>font</code> et en lui fournissant trois arguments : le texte à faire le rendu, qui sera ou non anti-crénelé (1=oui, 0= non), ainsi que la couleur du texte (toujours dans un format RGB). Ensuite nous créons un troisième objet texte qui fournira le rectangle du texte. La manière la plus simple à comprendre est de s'imaginer en train de dessiner un rectangle qui englobera tout le texte. Vous pourrez alors utiliser ce rectangle afin d'obtenir ou de définir la position du texte sur la fenêtre d'affichage. Ainsi dans cet exemple nous avons le rectangle, et définissons ses attributs <code>centerx</code> et <code>centery</code> pour correspondre aux <code>centerx</code> et <code>centery</code> de l'arrière-plan, alors le texte aura le même centre que l'arrière-plan. Dans cet exemple, le texte sera centré sur les axes <code>x</code> et <code>y</code> de la fenêtre d'affichage.

=== Transfert pour afficher ===

Maintenant que nous avons créé les objets de notre jeu, nous avons besoin d'en faire le rendu.
Si nous ne le faisons pas et que nous exécutons le programme, nous ne verrons qu'une fenêtre blanche, et nos objets resteront invisibles.
Le terme employé pour faire un rendu des objets est le ''blitting'' (''blit'' contraction du nom de la fonction BitBlT signifiant Transfert d'un bloc de bits), qui correspond à la copie de pixels d'un objet source vers un objet de destination.
Ainsi pour faire une rendu de l'objet <code>background</code>, vous le transférez sur l'objet <code>screen</code>.
Dans cet exemple, pour faire les choses simples, nous transférons le texte sur l'arrière-plan (donc l'arrière-plan possède une copie du texte sur lui), et ensuite nous transférons l'arrière-plan sur l'écran.

Le transfert est une des opérations les plus lentes dans un jeu, vous devez donc faire attention à ne pas trop faire de transferts sur l'écran pour chaque image.
Par exemple, si vous avez une image d'arrière-plan, et une balle se déplaçant à travers l'écran, alors vous pouvez transférer l'arrière-plan en entier et ensuite la balle, tout ceci à chaque image, ce qui recouvrira la position précédente de la balle et fera un rendu de la nouvelle balle, mais ce sera plutôt lent.
Une meilleure solution consiste à transférer une partie de l'arrière-plan sur la zone occupée par la balle à l'image précédente, qui peut être trouvée grâce au <code>rect</code> de la balle précédente, et ensuite afficher la nouvelle balle, ce qui aura pour effet de transférer seulement deux petites zones.

=== La boucle d'évènement ===

Une fois que vous avez défini le jeu, vous avez besoin de le mettre dans une boucle qui s'exécutera en continu jusqu'à ce que l'utilisateur signale qu'il veuille quitter. Vous démarrerez donc une boucle ouverte, et à chaque itération de la boucle, qui sera chaque image du jeu, vous actualiserez le jeu. La première chose à contrôler pour chaque évènement, est de savoir si l'utilisateur à enfoncé une touche du clavier, cliqué un bouton de la souris, déplacé le joystick, redimensionné la fenêtre, ou tenté de la fermer. Dans ce cas, nous voudrons simplement examiner si l'utilisateur a essayé de fermer la fenêtre, auquel cas le jeu engendrera un <code>return</code>, ce qui terminera la boucle <code>while</code>. Alors nous aurons simplement besoin de re-transférer l'arrière-plan, et faire un ''flip'' (actualisation de l'affichage par changement de la zone mémoire affichée) de l'écran pour que chaque chose soit redessinée. D'accord, étant donné que rien ne se passe ou se déplace dans cet exemple, nous n'avons aucunement besoin de re-transférer l'arrière-plan à chaque itération, mais je le met parce que si certaines choses se déplacent à travers l'écran, vous aurez besoin de faire tous vos transferts ici.

=== Ta-da ! ===

Et voilà, votre jeu Pygame le plus basique. Tous les jeux prendront une forme similaire, mais avec beaucoup plus de code concernant les fonctions de jeu elles-mêmes, que vous concevrez vous même sans les copier depuis un tutoriel ou un guide. C'est le but principal de ce tutoriel, nous allons maintenant rentrer dans le vif du sujet de la conception de jeux vidéo.

== Coup d'envoi ==

Les premières sections du code sont relativement simples, et une fois écrites peuvent souvent être réutilisées dans d'autres jeux que vous programmerez. Elles s'occuperont de toutes les tâches fastidieuses et génériques comme : charger des modules, charger des images, ouvrir des connections réseau, jouer de la musique, etc. Elles incluront également de simples mais efficaces gestionnaire d'erreurs, et les quelques personnalisations que vous souhaiterez effectuer par dessus les fonctions fournies par des modules comme <code>sys</code> et <code>pygame</code>.

=== Les premières lignes et le chargement de modules ===

Tout d'abord, vous avez besoin de démarrer votre jeu et de charger vos modules. C'est toujours une bonne idée de définir certaines choses directement en haut du fichier source principal, comme : le nom du fichier, ce qu'il contient, sa licence, ainsi que n'importe quelle autre information que vous jugerez utile de faire lire à ceux qui la regardent. Ensuite vous pouvez charger des modules, agrémentés d'une gestion d'erreur qui fera en sorte que Python ne vous affichera pas ces horribles ''traceback'' que les non-programmeurs ne comprennent pas. Le code est très simple, je ne m'étendrai pas dessus :

<syntaxhighlight lang="python">
#!/usr/bin/env python
# coding: utf-8
#
# Tom's Pong
# A simple pong game with realistic physics and AI
# http://tom.acrewoods.net/projects/pong
#
# Released under the GNU General Public License

VERSION = "0.4"

try:
	import sys
	import random
	import math
	import os
	import getopt
	import pygame
	from socket import *
	from pygame.locals import *
except ImportError, err:
	print "Impossible de charger le module. %s" % (err)
	sys.exit(2)
</syntaxhighlight>

=== Fonctions de gestion des ressources ===

Dans l'exemple [[Pygame/Chimp_-_Ligne_par_ligne|Chimp - Ligne par ligne]], le premier code à être écrit correspond au chargement des images et des sons. Étant donné que c'est totalement indépendant de la logique de jeu et/ou des objets de jeu, elles seront écrites en premier et dans des fonctions séparées, ce qui impliquera que le code qui s'ensuivra pourra les utiliser. Je mets généralement tout mon code de cette nature au départ, dans leur propre fonctions, sans classe. Cela correspondra aux fonctions de gestions des ressources. Vous pouvez bien sûr créer des classes pour celle-ci, c'est à vous de développer votre propre style et vos meilleures pratiques.

C'est toujours une bonne idée d'écrire vos propres fonctions de gestion de ressources, car bien que Pygame possède des méthodes pour l'ouverture des images et des sons (ainsi que d'autres modules qui possèdent eux aussi leurs propres méthodes pour l'ouverture d'autres ressources), ces méthodes peuvent prendre plus d'une ligne, et peuvent requérir de consistantes modifications faites par vous-mêmes, et bien souvent elles ne fournissent pas de gestion d'erreur satisfaisante. Écrire des fonction de gestion de ressources vous donne un code sophistiqué, réutilisable, et vous offre plus de contrôle sur vos ressources. Prenez cet exemple d'une fonction de chargement d'image :

<syntaxhighlight lang="python">
def load_png(name):
	"""Charge une image et retourne un objet image"""
	fullname = os.path.join('data', name)
	try:
		image = pygame.image.load(fullname)
		if image.get_alpha() is None:
			image = image.convert()
		else:
			image = image.convert_alpha()
	except pygame.error, message:
        	print "Impossible de charger l'image : ", fullname
        	raise SystemExit, message
	return image, image.get_rect()
</syntaxhighlight>

Ici nous avons créé une fonction de chargement d'image plus sophistiquée que celle fournie par Pygame : <code>image.load()</code>. À noter que la première ligne de la fonction débute par un ''docstring'' (chaîne de caractère de documentation) qui décrit ce que fait la fonction et quel objet elle retourne. La fonction suppose que toutes vos images soient dans un répertoire appelé <code>data</code>, et donc utilisera le nom de fichier et créera le chemin complet (par exemple <code>data/ball.png</code>), en utilisant le module <code>os</code> pour s'assurer de la compatibilité entre plateforme différente (Linux, MacOS, Windows, ...). Ensuite elle essaye de charger l'image, et de convertir les régions alpha (ce qui vous permettra d'utiliser la transparence), et le cas échéant retourne une erreur ''lisible par un être humain'' si elle rencontre un problème. Finalement elle retourne un objet image, ainsi que son <code>rect</code>.

Vous pouvez créer des fonctions similaires pour le chargement de n'importe quelle autre ressource, tel que le chargement des sons. Vous pouvez aussi créer des classes de gestion de ressources, pour vous donner plus de flexibilité avec des ressources plus complexes. Par exemple, vous pouvez créer une classe <code>Music</code>, avec une fonction <code>__init__()</code> qui charge le son (peut-être en empruntant la fonction <code>load_sound()</code>), une méthode pour mettre en pause la musique, une méthode pour la redémarrer. Une autre classe de gestion de ressources utile peut être créée pour les connexions réseau. Des fonctions pour ouvrir des [[Apprendre à programmer avec Python/Communications à travers un réseau|sockets]], passer des données avec une sécurité appropriée et muni d'un contrôle d'erreur, fermer des sockets, [http://jargonf.org/wiki/finger finger] des adresses, ainsi que d'autres tâches concernant le réseau, pourront rendre l'écriture d'un jeu avec des capacités réseau moins pénible.

Souvenez-vous que la tâche première de ces fonctions/classes est de s'assurer qu'avec le temps, l'écriture des classes d'objet, et de la boucle principale, il n'y ait presque plus rien à faire. L'héritage de classes peut rendre ces classes de bases utiles. Ne vous emballez pas, des fonctions qui ne seront utilisées que par une classe devront être écrites dans cette classe, et non pas dans une fonction globale.

== Classes d'objet de jeu ==

Une fois les modules chargées et les fonctions de gestion de ressources écrites, vous aimeriez écrire certains objets du jeu. La manière de le faire est très simple, bien qu'elle semble complexe au début. Vous devez écrire une classe pour chaque type d'objet du jeu, et ensuite vous pourrez créer une instance de ces classes pour chaque objet. Vous pourrez ensuite utiliser les méthodes de ces classes pour manipuler les objets, les déplacer et leur donner des capacités d'interaction. Votre jeu ressemblera donc à ceci (pseudo-code) :

<syntaxhighlight lang="python">
#!/usr/bin/python
# coding: utf-8

[Charger vos modules ici]

[Fonctions de gestion des ressources ici]

class Ball:
	[fonctions de la balle (méthodes) ici]
	[par exemple, une fonction qui calcule une nouvelle position]
	[et une fonction pour vérifier si elle touche les bords]

def main:
	[initier l environnement du jeu ici]

	[créer un nouvel objet, instance de la classe Ball]
	ball = Ball()

	while 1:
		[Vérifier les entrées utilisateur]

		[appel de la méthode update() de la balle]
		ball.update()
</syntaxhighlight>

Ce n'est bien sûr qu'un exemple très simple, et vous aurez besoin d'y insérer tout le code nécessaire, en lieu et place des commentaires entre crochets. Mais vous devez connaître l'idée de base. Vous créez une classe, dans laquelle vous insérez toutes les fonctions d'une balle, en y incluant <code>__init__()</code>, qui créera tous les attributs d'une balle, et <code>update()</code>, qui déplacera la balle dans sa nouvelle position, avant de la transférer à l'écran dans cette position.

Vous avez la possibilité de créer d'autres classes pour tous les autres objets de jeu, et vous pourrez ensuite créer des instances pour chaque, et ainsi les gérer facilement à partir de la fonction <code>main</code> et/ou de la boucle du programme principal. Contrastez ceci avec le fait d'initialiser la balle dans la fonction <code>main</code>, et alors vous obtiendrez quantité de fonctions sans classes pour manipuler cet objet balle, et vous comprendrez heureusement pourquoi l'utilisation des classes est un avantage : cela vous permet de mettre tout le code de chaque objet à un seule endroit. Ceci rend l'utilisation des objets plus simple, et l'ajout de nouveaux objets et leur manipulation plus flexible. Au lieu d'ajouter plus de code pour chaque nouvel objet balle, vous pouvez simplement créer de nouvelles instances pour chaque nouvel objet balle. Magique !

=== Une simple classe balle ===

Voici une classe simple incluant les fonctions nécessaires pour la création d'un objet balle qui se déplacera sur l'écran si la fonction <code>update()</code> est appelée :

<syntaxhighlight lang="python">
class Ball(pygame.sprite.Sprite):
	"""Une balle qui se déplace sur lécran
	Retourne: objet ball
	Fonctions: update, calcNewPos
	Attributs: area, vector"""

	def __init__(self, vector):
		pygame.sprite.Sprite.__init__(self)
		self.image, self.rect = load_png('ball.png')
		screen = pygame.display.get_surface()
		self.area = screen.get_rect()
		self.vector = vector

	def update(self):
		newPos = self.calcNewPos(self.rect,self.vector)
		self.rect = newPos

	def calcNewPos(self,rect,vector):
		(angle,z) = vector
		(dx,dy) = (z*math.cos(angle),z*math.sin(angle))
		return rect.move(dx,dy)
</syntaxhighlight>

Ici nous avons la classe <code>Ball</code>, avec une méthode <code>__init__()</code>, qui paramètre la balle, et une méthode <code>update()</code> qui change le rectangle de la balle pour une nouvelle position, et une méthode <code>calcNewPos()</code> pour calculer la nouvelle position de la balle basée sur sa position courante, et le vecteur par lequel elle se déplace. J'expliquerai la gestion de la physique dans un moment. La seule autre chose à noter est le ''docstring'', qui est un peu plus long cette fois, et explique les bases de la classe. Ces chaînes de caractères sont utiles non seulement pour vous-même et les autres programmeurs qui lisent votre code, mais aussi pour les outils qui [[w:Parseur|parsent]] votre code et le documentent. Elle ne feront pas la différence dans de petits programmes, mais dans les gros elles sont inestimables, c'est donc une bonne habitude à prendre.

==== Diversion 1 : Sprites ====

L'autre raison à la création d'une classe pour chaque objet est les sprites. Chaque image dont vous ferez le rendu dans votre jeu sera un objet sprite, et pour commencer : la classe de chaque objet devra hériter de la classe <code>Sprite</code>. L'héritage de classe est une fonctionnalité géniale de Python. À partir de maintenant la classe <code>Ball</code> possède toutes les méthodes de la classe <code>Sprite</code>, n'importe quelle instance d'objet de la classe <code>Sprite</code> sera enregistrée comme étant un sprite par Pygame. Tant que le texte et l'arrière-plan ne se déplacent pas, ça reste correct de transférer l'objet sur l'arrière-plan, Pygame manipule les objets sprite d'une manière différente que vous verrez lorsque nous examinerons le code du programme en entier.

En résumé, vous créez un objet <code>Ball</code> et un objet <code>Sprite</code> pour cette balle, et ensuite vous appelez la méthode <code>update()</code>sur l'objet <code>Sprite</code>, ce qui actualisera le sprite. Les sprites vous fournissent une manière sophistiquée de déterminer si deux objets sont en collision. Normalement vous pouvez simplement contrôler dans la boucle principale si leur rectangle se chevauchent, mais ca implique beaucoup de code qui sera inutile puisque la classe <code>Sprite</code> vous fournit spécialement les deux méthodes <code>spritecollide()</code> et <code>groupcollide()</code>.

==== Diversion 2 : Physique des vecteurs ====

Les autres choses à connaître à propos de ce code, en dehors de la structure de la classe <code>Ball</code>, ce sont les physiques de vecteur, utilisées pour calculer le mouvement de la balle. Dans n'importe quel jeu impliquant un mouvement angulaire, vous devez être à l'aise en trigonométrie, je ferais juste une petite introduction sur ce que vous devez savoir, pour comprendre la méthode <code>calcNewPos()</code>.

Pour commencer, vous avez remarqué que la balle possède un attribut <code>vector</code>, qui est construit à partir de <code>angle</code> et de <code>z</code>. L'angle est mesuré en [[w:Radian|radians]] et vous donne la direction dans laquelle se dirige la balle. <code>z</code> correspond à la vitesse à laquelle la balle se déplace. Ainsi en utilisant ce vecteur, nous pouvons déterminer la direction et la vitesse de la balle, et donc de combien elle doit se déplacer sur les axes X et Y.

Dans les bases mathématiques derrière les vecteurs, la partie gauche montre le mouvement projeté de la balle, représenté par la ligne bleue. La longueur de cette ligne (z) représente sa vitesse et l'angle est la direction dans elle se déplace. L'angle 0 pour le mouvement de la balle sera toujours pris dans le sens positif de l'axe des X (vers la droite), et sera mesuré dans le sens des aiguilles d'une montre comme vu sur le diagramme.

À partir de l'angle et de la vitesse de la balle, nous pouvons maintenant définir de combien s'est déplacée la balle le long des axes X et Y. Nous en avons besoin car Pygame n'inclut pas les calculs de vecteurs, et nous pouvons seulement déplacer la balle en bougeant son rectangle le long des deux axes. Nous avons donc besoin de faire correspondre l'angle et la vitesse en mouvement sur les axes X (dx) et Y (dy). C'est une simple question de géométrie, et peut être obtenue grâce aux formules du diagramme.

Si vous avez étudié la trigonométrie élémentaire auparavant, rien ne sera nouveau pour vous. Mais au cas où vous l'auriez oubliée, voici quelques formules indispensables qui vous aideront à visualiser les angles (je trouve plus facile de visualiser les angles en degrés plutôt qu'en radians).

:<math>\theta_{deg} = \theta_{rad} \cdot {180 \over \pi} \qquad et \qquad \theta_{rad} = \theta_{deg} \cdot {\pi \over 180}</math>

== Objets contrôlés par l'utilisateur ==

Pour l'instant, vous avez créé une fenêtre Pygame, et fait un rendu d'une balle qui se déplace sur l'écran. La prochaine étape est de créer quelques raquettes qui soient sous le contrôle de l'utilisateur. C'est potentiellement plus simple que la balle, car çà ne requiert aucune physique. Toutefois ceci ne se vérifie plus lorsque votre objet possède des déplacements plus complexe que haut et bas, par exemple dans un jeu de plateforme comme Mario, auquel cas vous aurez besoin de mettre en jeu de la physique. Les objets contrôlables sont simples à mettre en œuvre, remerciez Pygame pour son système de file d'évènements, comme vous pourrez le voir.

=== Une simple classe Bat ===

Le principe derrière la classe Bat est similaire à la classe Ball. Vous avez besoin d'une méthode <code>__init__()</code> pour initialiser la raquette (vous pourrez donc créer des instances d'objet pour chaque raquette), d'une méthode <code>update()</code> pour appliquer les changements sur la raquette avant de la transférer à l'écran, et diverses autres méthodes qui définiront ce que fait cette classe. Voici un échantillon du code :

<syntaxhighlight lang="python">
class Bat(pygame.sprite.Sprite):
	"""Raquette de 'tennis' déplaçable qui peut frapper la balle
	Retourne: objet bat
	Méthode: reinit, update, moveup, movedown
	Attributs: which, speed"""

	def __init__(self, side):
		pygame.sprite.Sprite.__init__(self)
		self.image, self.rect = load_png('bat.png')
		screen = pygame.display.get_surface()
		self.area = screen.get_rect()
		self.side = side
		self.speed = 10
		self.state = "still"
		self.reinit()

	def reinit(self):
		self.state = "still"
		self.movepos = [0,0]
		if self.side == "left":
			self.rect.midleft = self.area.midleft
		elif self.side == "right":
			self.rect.midright = self.area.midright

	def update(self):
		newpos = self.rect.move(self.movepos)
		if self.area.contains(newpos):
			self.rect = newpos
		pygame.event.pump()

	def moveup(self):
		self.movepos[1] = self.movepos[1] - (self.speed)
		self.state = "moveup"

	def movedown(self):
		self.movepos[1] = self.movepos[1] + (self.speed)
		self.state = "movedown"
</syntaxhighlight>

Comme vous pouvez le voir, cette classe est très similaire à la classe Ball dans sa structure. Mais les différences se situent dans ce que fait chaque fonction. Tout d'abord, il y a une méthode <code>reinit()</code> qui est utilisée lorsqu'un round est terminé : la raquette retourne dans sa position de départ, et chacun de ses attributs à ses valeurs d'origine. Ensuite, la manière dont la raquette bouge est un peu plus complexe que la balle, étant donné que ses mouvements sont simples (haut/bas) mais dépendent de ce que désire l'utilisateur, tandis que la balle conservera son mouvement à chaque image. Pour mettre en évidence la façon dont la raquette bouge, il est pratique d'examiner ce petit diagramme pour voir la séquence des évènements :

{| border = "0"
|Le joueur enfonce la touche <math>\uparrow</math>
|<math>\Rightarrow</math>
|self.state = "moving"<br>self.moveup()
|<math>\Rightarrow</math>
|Le joueur relache la touche
|<math>\Rightarrow</math>
|self.state = "still"<br>self.movepos = [0,0]
|}

C'est ce qui se passe ici si la personne qui contrôle la raquette enfonce la touche  qui fait se déplacer la raquette vers le haut. À chaque itération de la boucle principale du jeu (à chaque image), si la touche est maintenue enfoncée, alors l'attribut <code>state</code> de cet objet raquette sera paramétré à "moving", et la méthode <code>moveup()</code> sera appelée, causant la réduction de la position Y de la raquette d'une valeur correspondant à l'attribut <code>speed</code> (dans cet exemple 10). En d'autre mots, tant que la touche reste enfoncée, la raquette se déplacera à l'écran de 10 pixels par image. L'attribut <code>state</code> n'est pas utilisé ici, mais c'est très utile de le connaître si vous désirez appliquer des effets à la balle, ou si vous utilisez une sortie pour le débogage.

==== Diversion 3 : évènements Pygame ====

Alors, comment allons nous savoir quand le joueur est en train d'enfoncer la touche, ou la relâche ? Avec le système de file d'évènement de Pygame, pardi! C'est un système vraiment simple à utiliser et à comprendre, çà ne devrait pas être long :) Vous avez déjà observé la file d'évènement en action dans le programme Pygame de base, où elle était utilisée pour vérifier si l'utilisateur voulait quitter l'application. Le code pour déplacer la raquette est aussi simple que çà :

<syntaxhighlight lang="python">
for event in pygame.event.get():
	if event.type == QUIT:
		return
	elif event.type == KEYDOWN:
		if event.key == K_UP:
			player.moveup()
		if event.key == K_DOWN:
			player.movedown()
	elif event.type == KEYUP:
		if event.key == K_UP or event.key == K_DOWN:
			player.movepos = [0,0]
			player.state = "still"
</syntaxhighlight>

Ici nous supposons que vous avez déjà créé une instance de <code>Bat</code>, et appelé l'objet <code>player</code>. Vous pouvez observer la couche familière de la structure <code>for</code>, qui produit une itération à chaque évènement trouvé dans la file d'évènement de Pygame, eux-même retrouvés grâce à la fonction <code>event.get()</code>. L'utilisateur enfonce une touche, appuie sur le bouton de la souris, ou bouge le joystick, toutes ces actions seront placées dans la file d'évènement de Pygame, et conservées jusqu'à leur utilisation. Donc à chaque itération de la boucle de jeu principale, vous irez faire un tour dans ces évènements vérifier s'il y en a quelques uns que vous pouvez utiliser. La fonction <code>event.pump()</code> qui était dans la méthode <code>Bat.update()</code> est appelée à chaque itération pour ''pomper'' les vieux évènements et garder la file à jour.

D'abord nous vérifions si l'utilisateur veut quitter le programme, et si oui on quitte le programme. Ensuite nous vérifions si une touche est enfoncée, et si oui, nous vérifions si elle correspond à une des touches affectée au déplacement de la raquette, si oui alors nous appelons la méthode de déplacement appropriée, et définissons l'état du joueur. À travers les états "moveup" et "movedown", modifiés par les méthodes <code>moveup()</code> et <code>movedown()</code>, nous produisons un code plus soigné et nous ne cassons pas l'''encapsulation'', ce qui signifie que vous assignez des attributs aux objets eux-mêmes, sans se référer au nom de l'instance de cet objet. Remarquez que nous avons 3 états : "still", "moveup" et "mouvedown". Encore une fois, ils deviennent utiles si vous voulez débugguer ou calculer un effet sur la balle. Nous vérifions aussi si une touche est "partie" (si elle n'est plus enfoncée), et alors si c'est la bonne touche, nous stoppons le déplacement de la raquette.

== Assembler le tout ==

Bien, vous avez appris toutes les bases nécessaires pour écrire un petit jeu. Vous devez devriez avoir compris comment créer un objet Pygame, comment Pygame affiche les objets, comment manipuler les évènements, et comment vous pouvez utiliser la physique pour introduire des animations dans votre jeu. Maintenant je vais vous montrer comment vous pouvez prendre toutes ces morceaux de code et les assembler dans un jeu qui fonctionne. Ce que nous avons besoin tout d'abord, c'est de faire rebondir la balle sur les bords de l'écran, et que la raquette aussi soit capable de faire rebondir la balle, en d'autres termes, ce ne sera pas un jeu très compliqué. Pour ce faire, nous utiliserons les méthodes de collision de Pygame.

=== Faire rebondir la balle sur les bords de l'écran ===

La principe de base de ce type de rebond est simple à comprendre. Vous prenez les coordonnées des 4 coins de la balle, et vous vérifiez s'ils correspondent avec les coordonnées X et Y des bords de l'écran. Donc si les coins haut-gauche et haut-droit ont leur coordonnée Y à 0, vous savez que la balle est actuellement contre le bord haut de l'écran. Nous ferons tout cela dans la fonction <code>update()</code>, après que nous ayons défini la nouvelle position de la balle.

<syntaxhighlight lang="python">
if not self.area.contains(newPos):
	tl = not self.area.collidepoint(newPos.topleft)
	tr = not self.area.collidepoint(newPos.topright)
	bl = not self.area.collidepoint(newPos.bottomleft)
	br = not self.area.collidepoint(newPos.bottomright)
	if tr and tl or (br and bl):
		angle = -angle
	if tl and bl:
		self.offcourt(player=2)
	if tr and br:
		self.offcourt(player=1)

self.vector = (angle,z)
</syntaxhighlight>

Ici nous contrôlons que la variable <code>area</code> contient la nouvelle position de la balle. Elle devrait toujours être vraie, nous n'aurons donc pas besoin de la clause <code>else</code>, bien que dans d'autres circonstances vous devriez considérer ce cas de figure. Nous contrôlons alors si les coordonnées des quatre coins entrent en collision avec les bords de l'écran, et créons des objets pour chaque résultat. Si c'est vérifié, les objets auront leur valeur à 1, ou <code>true</code>. Sinon, la valeur sera <code>None</code>, ou <code>false</code>. Nous verrons alors si elle touche le dessus ou le dessous, et si oui nous changerons la direction de la balle. En pratique, grâce à l'utilisation des radians, nous pourrons le faire facilement, juste en inversant sa valeur (positif/négatif). Nous contrôlons aussi que la balle ne traverse pas les bords, ou alors nous appellerons la fonction <code>offcourt()</code>. Ceci dans mon jeu, replace la balle, ajoute 1 point au score du joueur spécifié lors de l'appel de la fonction, et affiche le nouveau score.

Enfin, nous réaffectons le vecteur basé sur le nouvel angle. Et voilà, la balle rebondiras gaiement sur les murs et sortira du court avec un peu de chance.

=== Faire rebondir la balle sur la raquette ===

Faire en sorte que la balle rebondisse sur les raquettes est similaire au rebonds sur les bords de l'écran. Nous utilisons encore la méthode des collisions, mais cette fois, nous vérifions que les rectangles de la balle entrent en collision avec ceux des raquettes. Dans ce code, nous y ajoutons des suppléments pour éviter certains problèmes. Vous devriez trouver tout un tas de codes supplémentaires à ajouter pour éviter certains problèmes ou bugs, il est plus simple de les trouver lors de l'utilisation.

<syntaxhighlight lang="python">
else:
	# Réduire les rectangles pour ne pas frapper la balle derrière les raquettes
	player1.rect.inflate(-3, -3)
	player2.rect.inflate(-3, -3)

	# Est-ce que la raquette et la balle entre en collision ?
	# Notez que je mets dans une règle à part qui définit self.hit à 1 quand ils entrent en collision
	# et à 0 à la prochaine itération. C'est pour stopper un comportement étrange de la balle
	# lorsqu'il trouve une collision *à l'intérieur* de la raquette, la balle s'inverse, et est
	# toujours à l'intérieur de la raquette et donc rebondit à l'intérieur.
	# De cette façon, la balle peut toujours s'échapper et rebondir correctement
	if self.rect.colliderect(player1.rect) == 1 and not self.hit:
		angle = math.pi - angle
		self.hit = not self.hit
	elif self.rect.colliderect(player2.rect) == 1 and not self.hit:
		angle = math.pi - angle
		self.hit = not self.hit
	elif self.hit:
		self.hit = not self.hit
self.vector = (angle,z)
</syntaxhighlight>

Nous débutons cette section à partir de la condition <code>else</code>, à cause de la partie précédente du code qui vérifie si la balle frappe les bords. Cela prend tout son sens si elle ne frappe pas les bords, elle pourrait frapper une raquette, donc nous poursuivons la condition précédente. Le premier problème est de réduire le rectangle des joueurs de 3 pixels dans les deux dimensions pour empêcher la raquette de frapper la balle lorsqu'elle est derrière elle. Imaginez que vous venez juste de bouger la raquette et que la balle se trouvait derrière elle, les rectangles se chevauchent, et la balle sera considérée comme "frappée", c'est pour prévenir ce petit bug.

Ensuite nous vérifions si les rectangles entrent en collision, avec une correction de bug de plus. Remarquez que j'ai commenté toute cette partie de code, c'est toujours préférable d'expliquer une partie du code qui parait obscure, que ce soit pour les autres qui regardent votre code, ou pour vous lorsque vous y reviendrez plus tard. Sans la correction du bug, la balle pourra heurter un coin de la raquette, changer de direction, et l'image d'après, trouver qu'elle est toujours à l'intérieur de la raquette. Alors le programme pensera que la balle est frappée une nouvelle fois et rechangera de direction. Cela peut survenir plusieurs fois, ce qui rendrait le comportement de la balle complètement irréaliste. Donc nous avons une variable, <code>self.hit</code> qui sera définie à <code>true</code> quand elle sera frappée, et à <code>false</code> une image plus tard. Quand nous vérifions si les rectangles sont entrés en collision, nous contrôlons si <code>self.hit</code> est à <code>true</code> ou <code>false</code> pour stopper les rebonds internes.

L'imposant code ici est facile à comprendre. Tous les rectangle possèdent une fonction <code>colliderect()</code>, dans laquelle vous envoyez le rectangle d'un autre objet, qui retournera <code>1</code> (<code>true</code>) si les rectangles se chevauchent, et <code>0</code> (<code>false</code>) dans le cas contraire. En cas de réponse positive, nous pouvons changer la direction en soustrayant l'angle actuel par <math>	\boldsymbol{\pi}</math> (encore un petit truc que vous pouvez faire avec les radians, qui ajustera l'angle de 90 degrés et renverra la bonne direction. Vous pourrez trouver qu'à ce stade la compréhension approfondie des radians soit un exigeance!). Pour terminer le contrôle du bug, nous repassons <code>self.hit</code> à <code>false</code> à partir de l'image qui suit la frappe de la balle.

Nous réaffectons alors le vecteur. Vous aimeriez bien sur enlever la même ligne dans la précédente partie de code, mais vous ne pourrez le faire qu'après le test conditionnel <code>if-else</code>. Et ce sera tout. Le code assemblé permettra maintenant à la balle de frapper les côtés et les raquettes.

=== Le produit final ===

Le produit final, avec toutes les parties de code assemblées grâce à du code glu ressemblera à ceci :

:[[Pygame/Tom's Pong|Code final de Tom's Pong]]

Comme vous avez pu voir le produit fini, je vais vous rediriger vers ''Tom's Pong'', jeu sur lequel est basé ce tutoriel. Téléchargez-le, étudiez le code source, et vous verrez une implémentation de Pong utilisant tout le code que vous avez vu dans ce tutoriel, ainsi que d'autres ajouts fait dans des versions précédentes, comme des propriétés physique pour les effets et ainsi que d'autres résolutions de bugs.

[[Catégorie:Pygame (livre)]]