Semaine 3 - Jeux 2D - 420-SN1

FAIRE DES JEUX
AVEC PYGAME

Du code qui bouge - et des vrais jeux qu'on partage sur le web

C'est quoi Pygame ?

A quoi ca sert

Pygame est une librairie pour creer des jeux video 2D en Python : afficher des images, jouer des sons, reagir au clavier, a la souris et a la manette.

Gratuite, ouverte, et utilisee depuis plus de 20 ans : une enorme communaute partage ses jeux sur pygame.org.

C'est le prolongement direct du jardin de turtle : on dessine a l'ecran, mais cette fois ca bouge en temps reel.

import pygame
CE QUE LA COMMUNAUTE FABRIQUE

De vrais jeux, en Pygame (1/2)

Capture du jeu Super Jump Dude
Super Jump Dude Plateforme par Wilson Taylor voir le projet ↗
Capture du jeu Divide & Conquer
Divide & Conquer Puzzle maths par WuxiaScrub voir le projet ↗
Capture du jeu PyDPainter
PyDPainter Outil pixel art par Mark Riale voir le projet ↗
Captures : pygame.org/news (Recent Releases) - chaque jeu appartient a son auteur.
CE QUE LA COMMUNAUTE FABRIQUE

De vrais jeux, en Pygame (2/2)

Capture du jeu Imperial Ambitions
Imperial Ambitions Strategie par WuxiaScrub voir le projet ↗
Capture du jeu Royal Ordains
Royal Ordains Fantasy par Remance voir le projet ↗
Capture du jeu Trosnoth
Trosnoth Action SF par J. D. Bartlett voir le projet ↗
Captures : pygame.org/news (Recent Releases) - chaque jeu appartient a son auteur.

Le coeur d'un jeu : la boucle

1. Lire
les evenements
→
2. Mettre a jour
(bouger, calculer)
→
3. Dessiner
a l'ecran
↷
... et on recommence 60 fois par seconde

Un jeu, c'est cette boucle qui tourne sans arret : touche pressee ? on bouge le personnage, puis on redessine tout. L'oeil voit du mouvement fluide.

Ouvrir une fenetre de jeu

import pygame pygame.init() ecran = pygame.display.set_mode((640, 480)) pygame.display.set_caption("Mon premier jeu") enMarche = True while enMarche: # la boucle de jeu for evenement in pygame.event.get(): if evenement.type == pygame.QUIT: enMarche = False ecran.fill((30, 138, 76)) # on peint le fond pygame.display.flip() # on affiche

Une fenetre, une boucle, et un fond vert : voila deja un programme Pygame complet. Tout le reste (images, joueur, score) s'ajoute dans la boucle.

Mais... ca ne marche pas dans Colab

Un jeu Pygame a besoin d'un ecran pour ouvrir sa fenetre. Or Colab et StackBlitz n'ont pas d'ecran : ils ne savent qu'afficher du texte.

Resultat : pygame.display.set_mode() ne montre rien. C'est le meme piege que matplotlib dans StackBlitz.

La solution pour mettre un jeu Pygame en ligne s'appelle Pygbag.

LA SOLUTION EN LIGNE

Pygbag : ton jeu devient une page web

Pygbag recompile ton jeu Pygame en WebAssembly : le langage que tous les navigateurs comprennent.

Le resultat est une simple page web. N'importe qui peut y jouer dans son navigateur, sur ordi ou sur telephone, sans rien installer.

Et comme c'est une page autonome, on peut la publier sur son propre site.

Mettre son jeu en ligne, en 3 temps

  1. Adapter le code : fichier main.py, ajouter import asyncio, mettre la boucle dans async def main() avec await asyncio.sleep(0).
  2. Empaqueter : une seule commande, pygbag main.py, qui teste deja le jeu dans le navigateur en local.
  3. Publier la page web obtenue : sur itch.io, sur GitHub Pages... ou sur un de tes propres domaines.

Note : pygbag lui-meme s'installe avec pip install pygbag. C'est jouer au jeu fini qui ne demande aucune installation.

Credits des captures

Les jeux montres dans la galerie sont l'oeuvre de leurs auteurs, partages publiquement sur pygame.org. Merci a eux pour l'inspiration.

A TOI DE JOUER !

pygame.org - la communaute et des centaines de jeux
pygame-web.github.io/wiki/pygbag/ - mettre son jeu en ligne
Ecris ton jeu, lance pygbag, partage le lien
⤺ Refermer le diaporama