TP 2 — Créer et utiliser des ressources graphiques

Objectifs

À la fin de ce TP, vous saurez :

• expliquer le rôle d'un fichier de ressources .pyxres ;
• utiliser l'éditeur d'images de Pyxel ;
• créer et modifier un sprite dans une banque d'images ;
• repérer un sprite dans une banque d'images ;
• charger un fichier de ressources avec pyxel.load ;
• afficher un sprite avec pyxel.blt ;
• rendre une couleur transparente et retourner un sprite ;
• composer une scène statique à l'aide de plusieurs sprites.

Prérequis

Notions du TP 1 : création d'une fenêtre Pyxel, coordonnées en pixels, palette de couleurs et boucles for.

👏 Crédits

Ce TP est adapté d'une ressource conçue et partagée par Florian Picard. Le fichier 4.pyxres utilisé dans les activités provient des univers Python 2024 de la Nuit du Code. Le TP s'appuie également sur la documentation officielle de Pyxel.

1. Les ressources d'un programme Pyxel

Dans le TP 1, tous les éléments de l'image étaient dessinés par des instructions Python. Pour réaliser des images plus détaillées, on peut utiliser un fichier de ressources Pyxel portant l'extension .pyxres.

Un tel fichier peut contenir quatre types de ressources :

Ressource	Rôle
banque d'images	contient les sprites et les tuiles graphiques
tilemap	construit un décor en assemblant des tuiles
sons	contient de courts effets sonores ou des mélodies
musiques	assemble plusieurs sons pour former une musique

Dans ce TP, nous utiliserons le fichier 4.pyxres de la Nuit du Code 2024. Il contient une seule banque d'images de 256 × 256 pixels, numérotée 0. Les autres types de ressources ne sont pas utilisés dans ce fichier.

Vocabulaire

Un sprite est une petite image destinée à représenter un personnage, un objet ou un élément de décor dans un jeu.

2. Ouvrir l'éditeur de ressources

Editeur de ressources

Télécharger le fichier 4.pyxres (cliquer sur le lien) et le placer dans le même dossier que le futur programme Python.

en localen ligne

Dans Thonny, ouvrir la console du système depuis le menu Outils, puis saisir :

Bash

pyxel edit 4.pyxres

Avec Spyder, ouvrir un terminal dans le dossier contenant le fichier et exécuter la même commande.

Dans Pyxel Studio ou dans l'environnement en ligne indiqué par le professeur, importer le fichier 4.pyxres, puis l'ouvrir dans l'éditeur de ressources.

Sauvegarder le fichier

Les modifications d'une banque d'images ne changent pas le programme Python. Il faut enregistrer le fichier .pyxres, puis conserver ce fichier avec le programme qui l'utilise.

Exercice 1 — Découvrir l'éditeur

On suppose que le fichier de ressources 4.pyxres a été ouvert avec l'éditeur de ressources. On obtient alors la vue suivante :

Répondre aux questions à l'aide du guide officiel de l'éditeur de ressources.

Question 1

Repérer les quatre éditeurs : images, tilemaps, sons et musiques.

Question 2

Sélectionner l'éditeur d'images, puis la banque d'images numéro 0.

Question 3

Repérer la palette, la zone de dessin agrandie et la vue d'ensemble de la banque.

Question 4

Déplacer le pointeur sur l'image. Où les coordonnées du pixel désigné sont-elles affichées ?

Question 5

Vérifier que le pixel situé dans le coin supérieur gauche de la banque a pour coordonnées (0, 0).

3. Modifier et créer un sprite

Banque d'images

Une banque d'images est une grille de pixels. Dans 4.pyxres, les sprites occupent le plus souvent des blocs de 8 × 8 pixels. Plusieurs blocs voisins représentent différentes apparences ou positions d'un même personnage. La banque d'images est de dimension 256 x 256. La vue à gauche zoome sur 4 blocs contigus 8 x 8. Les guides de l'éditeur permettent de distinguer ces blocs. Les coordonnées du pixel en haut à gauche sont (0, 0).

La couleur 5, bleue, occupe le fond de la banque. Nous l'utiliserons comme couleur transparente lors de l'affichage des sprites.

Les outils d'édition de la banque d'images sont les suivants :

Icône	Raccourci	Utilisation
	S	Sélectionner une zone rectangulaire
	P	Dessiner à main levée. Maintenir Shift pour tracer une ligne droite
	R	Dessiner le contour d'un rectangle. Maintenir Shift pour un carré
	SHIFT+R	Dessiner un rectangle plein. Maintenir Shift pour un carré
	C	Dessiner le contour d'une ellipse. Maintenir Shift pour un cercle
	SHIFT+C	Dessiner une ellipse pleine. Maintenir Shift pour un cercle
	B	Remplir la zone contiguë de même couleur

Exercice 2 — Modifier un sprite

Question 1

Observer les séries de sprites placées dans la partie gauche de la banque. Repérer notamment les blocs commençant aux points (0, 8), (0, 72) et (0, 136).

Question 2

Sélectionner le bloc vide de 8 × 8 pixels dont le coin supérieur gauche a pour coordonnées (80, 16).

Résultat attendu

Déplacement de la vue zoom

Les flèches du pavé directionnel permettent de déplacer la vue zoom par bloc de 8 pixels dans les quatre directions.

On peut aussi déplacer avec la souris l'encadré blanc délimitant la vue zoom, dans la vue à droite de la banque d'images.

Question 3

• Modifier ce bloc pour créer un petit objet ou personnage personnel.
• Conserver la couleur 5 comme couleur de fond autour du dessin. Elle sera ensuite rendue transparente.
• Vérifier que le dessin ne déborde pas du bloc.
• Enregistrer le fichier 4.pyxres.

Coordonnées d'un bloc

Si les blocs ont une largeur et une hauteur de 8 pixels, le bloc en colonne c et de ligne l commence au pixel de coordonnées :

\[u=8\times c \qquad\text{et}\qquad v=8\times l.\]

Par exemple, le bloc en colonne 10 et ligne 2 commence au pixel (80, 16). On commence la numérotation des colonnes et des lignes à 0 comme pour les pixels.

Les ressources de la banque d'images étant découpées en blocs de 8 x 8 pixels, pour composer une image il est plus simple de raisonner en coordonnées de bloc (colonne, ligne) mais pour les coller dans la fenêtre, il faut convertir en pixels (colonne x 8, ligne x 8).

Exercice 3 — Passer des blocs aux pixels

On rappelle qu'un bloc de la banque d'images est de dimension 8 x 8 pixels.

Question 1

Quelles sont la colonne et la ligne du bloc qui commence au pixel (0, 72) ?

Question 2

Donner les coordonnées du premier pixel du bloc de colonne 5 et de ligne 4.

Question 3

Un sprite de 32 × 8 pixels commence au point (24, 200). Combien de blocs occupe-t-il ?

Résultat attendu

Question 4

Pourquoi est-il pratique de placer les sprites sur des coordonnées multiples de 8 ?

4. Charger un fichier de ressources dans un programme pyxel

Exercice 4

Le programme Python et le fichier 4.pyxres doivent être placés dans le même dossier.

Recopier puis exécuter le programme suivant.

import pyxel

LARGEUR = 128
HAUTEUR = 128

pyxel.init(LARGEUR, HAUTEUR, title="Afficher un sprite")
pyxel.load("4.pyxres")

pyxel.cls(0)

# Instruction d'affichage du sprite à compléter

pyxel.show()

La fonction pyxel.load charge les ressources afin qu'elles puissent ensuite être utilisées par le programme.

Question 1

À quel endroit du programme le fichier de ressources est-il chargé ?

Question 2

Modifier temporairement le nom du fichier dans l'appel à pyxel.load, puis exécuter le programme. Expliquer le message d'erreur obtenu.

5. Afficher un sprite avec pyxel.blt

Afficher un sprite

L'instruction suivante copie une partie d'une banque d'images dans la fenêtre :

🐍 Script Python

pyxel.blt(x, y, img, u, v, largeur, hauteur, couleur_transparente)

Paramètre	Signification
x, y	coordonnées du coin supérieur gauche du sprite dans la fenêtre
img	numéro de la banque d'images utilisée
u, v	coordonnées du coin supérieur gauche du sprite dans la banque d'images
largeur, hauteur	dimensions de la zone copiée, en pixels
couleur_transparente	code de la couleur qui ne sera pas recopiée

Par exemple :

🐍 Script Python

pyxel.blt(16, 32, 0, 0, 16, 8, 8, 5)

Cette instruction copie à la position (16, 32) de la fenêtre un sprite de 8 × 8 pixels situé à partir du point (0, 16) de la banque d'images 0. Les pixels de couleur 5 ne sont pas affichés.

Exercice 5 — Premier affichage

Question 1

Compléter le programme précédent pour afficher ce sprite.

Résultat attendu

Question 2

Modifier seulement x et y pour placer le sprite dans le coin inférieur droit de la fenêtre.

Résultat attendu

Question 3

Supprimer le dernier argument 5. Quel changement observez-vous ?

Question 4

Utiliser la couleur 2 à la place de la couleur 5 comme couleur transparente. Expliquer le résultat.

Question 5

Afficher un autre sprite, par exemple celui qui commence au point (0, 72) de la banque d'images, dans le coin supérieur droit de la fenêtre,.

Résultat attendu

Question 6

Afficher au centre de la fenêtre, le sprite que vous avez créé au point (80, 16) de la banque d'images.

Deux repères différents

Il ne faut pas confondre :

• (x, y), qui indique la position du sprite dans la fenêtre ;
• (u, v), qui indique sa position dans la banque d'images.

6. Retourner un sprite

Retourner un sprite

Une largeur négative retourne horizontalement la zone copiée. Une hauteur négative la retourne verticalement.

🐍 Script Python

# Sprite dans son orientation d'origine
pyxel.blt(16, 32, 0, 0, 16, 8, 8, 5)

# Même sprite retourné horizontalement
pyxel.blt(24, 32, 0, 0, 16, -8, 8, 5)

Exercice 6 — Retourner un sprite

Question 1

Afficher côte à côte le sprite original et sa version retournée horizontalement.

Résultat attendu

Question 2

Retourner le sprite verticalement.

Résultat attendu

Question 3

Que faut-il écrire pour le retourner à la fois horizontalement et verticalement ?

Résultat attendu

Question 4

Dans un futur jeu, à quoi pourrait servir le retournement horizontal d'un personnage ?

7. Composer une scène avec des sprites

Conversion de coordonnées de (colonne, ligne) en pixels

On définit la constante suivante :

🐍 Script Python

BLOC = 8

Pour placer un sprite dans la colonne c et la ligne l de la fenêtre, on peut calculer sa position avec :

🐍 Script Python

x = c * BLOC
y = l * BLOC

Exercice 7 — Répéter un motif

Question 1

La fenêtre affichée par le programme est de dimension 128x128 pixels.

Si on la recouvre complètement par des blocs de 8x8 pixels, combien de colonnes et de lignes de blocs cela fait-il ?

Question 2

On considère le sprite 8x8 de coordonnées en (0, 88) dans la banque d'images.

Compléter le code suivant pour afficher une rangée de huit sprites en haut à gauche de la fenêtre. .

🐍 Script Python

BLOC = 8

for col in range(8):
    x = ...
    y = ...
    pyxel.blt(x, y, 0, 0, 88, BLOC, BLOC, 5)

Résultat attendu

Question 3

Modifier la boucle pour répéter le sprite sur toute la première ligne de blocs de hauteur 8 pixels en haut de la fenêtre.

Résultat attendu

Question 4

À l'aide d'une deuxième boucle, recouvrir toute la fenêtre avec le sprite.

Résultat attendu

8. Production finale

À vous de jouer

Composer une scène statique à l'aide du fichier 4.pyxres. Elle devra comporter au minimum :

• un fond réalisé avec les fonctions de dessin du TP 1 ;
• trois sprites différents issus de la banque d'images ;
• le sprite créé ou modifié dans l'éditeur ;
• une couleur rendue transparente ;
• un sprite retourné horizontalement ;
• un motif répété à l'aide d'une boucle for.

Organiser le programme à l'aide de commentaires et de noms de variables explicites.

Quelques idées : une forêt, une salle de jeu, un village, une scène spatiale ou un niveau très simple vu de dessus.

9. Mémento

Mémento du TP2

Syntaxe	Explication / sens
pyxel edit 4.pyxres	Ouvre le fichier dans l'éditeur de ressources de Pyxel.
pyxel.load("4.pyxres")	Charge les ressources du fichier dans le programme.
pyxel.blt(x, y, img, u, v, largeur, hauteur)	Copie une zone d'une banque d'images dans la fenêtre.
pyxel.blt(x, y, img, u, v, largeur, hauteur, couleur)	Copie une zone sans afficher les pixels de la couleur indiquée.
pyxel.blt(x, y, img, u, v, -largeur, hauteur, couleur)	Affiche le sprite retourné horizontalement.
pyxel.blt(x, y, img, u, v, largeur, -hauteur, couleur)	Affiche le sprite retourné verticalement.