TP4 - Pyxel et les sprites

Objectifs

1. Charger et afficher un sprite.
2. Déplacer un sprite avec le clavier.
3. Animer un sprite sur plusieurs images.
4. Gérer des collisions simples.
5. Remplacer des formes simples par des sprites provenant d'un fichier fourni.

Introduction

Sprite

Un sprite est une petite image utilisée dans un jeu vidéo pour représenter un élément du jeu; ils sont généralement de petite taille : 8×8, 16×16, 32×32 pixels, etc.

Éditeur pyxel

Pyxel possède son propre éditeur de ressources permettant de créer :

• des banques d'image ;
• des tuiles (niveaux de jeu) ;
• des sons ;
• des musiques.

Édition

La commande :

pyxel edit

permet d'ouvrir l'éditeur :

L'interface à l'ouverture est celle des sprites.

Nom de fichier

Par défaut, l'usage de la commande crée (et ouvre) un fichier nommé my_resource.pyxres ou resources.pyxres.
Aussi, il est possible de créer un fichier avec un autre nom en écrivant :

pyxel edit nom_fichier.pyxres

attention

Avec EduPython, la commande est à exécuter depuis le menu : Outils -> Outils -> Ouvrir un terminal avec cmd
MAIS le fichier créé se trouve dans les dossiers d'installation d'EduPython : C:\Program Files (x86)\Edupython\App\Scripts

DONC Si on veut ouvrir et créer un fichier à un autre endroit, dans la console il faudra préciser le chemin du fichier.

Exemple :
Mon fichier se trouve sur le bureau, dans le dossier TP4 et s'appelle temp.pyxres.
Pour l'éditer, je vais :

• Faire un clic droit sur mon fichier puis : Copier en tant que chemin d'accès
• Écrire dans la console : pyxel edit
• Coller dans la console (ctrl + C) le chemin d'accès

Informations à l'écran

Banque de sprites :
En bas à droite, image 0 représente la banque de sprites utilisée. Il y en a 3 maximum (de 0 à 2).

Système de coordonnées :
Lorsque l'on passe la souris sur l'écran, un tuple apparait :

Cette information représente la coordonnée (u,v) du pixel que l'on survole.

Ces coordonnées (u, v) seront ensuite utilisées en Python avec la fonction pyxel.blt() pour afficher un sprite précis à l’écran.

Mise en place du programme

Créez un fichier sprites.py contenant la structure minimale, et l'exécuter :

import pyxel

pyxel.init(160, 120, title="TP Sprites")

def update():
    pass

def draw():
    pyxel.cls(0)  # Efface l'écran en noir

pyxel.run(update, draw)

Vous devez obtenir une fenêtre noire vide.

---

Première utilisation des sprites

Fichier ressource

• Télécharger dans un premier temps le fichier de texture et le renommer platformer.pyxres ;
• Le mettre au même endroit que le fichier python ;
• L'éditer (à l'aide de la partie précédente) ;
• Trouver les coordonnées de l'oiseau bleu.

Charger la ressource dans le code

Ajoutez après pyxel.init() :

pyxel.load("À COMPLÉTER")

1. Remplacer À COMPLÉTER par le nom et l'extension du fichier.

attention

Ne pas oublier de mettre le fichier ressource dans le même dossier que le fichier python.

---

Afficher un sprite à l'écran

Pour afficher un sprite dans Pyxel, on utilise la fonction :

pyxel.blt(x, y, img, u, v, w, h, colkey)

Elle permet de copier une petite zone de l’image (un sprite) et de la coller à l’écran.

• x, y → position à l’écran où afficher le sprite
• img → numéro de la banque d’images (généralement 0)
• u, v → coordonnées du coin supérieur gauche du sprite dans la ressource
• w ,h → largeur et hauteur du sprite (ex. 8x8)
• colkey → couleur de la zone sélectionnée que l'on souhaite mettre en transparent (souvent 0)

2. Modifiez la fonction draw() pour qu'elle affiche l'oiseau bleu au point de coordonnées (50,50), en mettant la couleur 2 en transparent.

---

Déplacer un sprite

Déplacer un sprite reprend la même logique que déplacer un carré, mais en utilisant la fonction blt.

3. Définir 2 variables x et y avec toutes les deux la valeur 50.
4. Dans la fonction update, écrire les instructions permettant de faire modifier les coordonnées x et y lorsque l'on appuie sur les flèches.
5. Dessiner l'oiseau en fonction du x et du y.
6. Faire des tests de déplacement.

---

Animer un sprite

Jusqu’à présent, nous avons affiché un sprite fixe.
Mais un personnage immobile, ce n’est pas très intéressant…
Pour donner l’illusion du mouvement, on utilise plusieurs images légèrement différentes, placées côte à côte dans la banque de sprites (ex : marche, course, clignement d’œil…).

Quand on affiche ces images les unes après les autres, rapidement, cela crée une animation.

Frame

Pour créer une animation, on utilise plusieurs sprites affichés les uns à la suite des autres, chacun correspondant à une frame (une image de l’animation).

Par exemple :

• frame 0 → premier sprite (position neutre)
• frame 1 → première image de l’animation
• frame 2 → deuxième image de l’animation
• puis on revient à frame 0 pour recommencer

L'idée serait d'avoir une variable frame qui, pour chaque frame exécutée, viendrait choisir la zone de sprite à sélectionner et afficher.

1. Ajouter une variable frame contenant la valeur 0 pour commencer.

Le premier sprite se trouve en coordonnée (0,16), et le second en (8,16). Ainsi, si on souhaite afficher les sprites suivant la valeur de frame, la formule serait : frame*8.

2. Modifier la fonction blt pour qu'elle puisse récupérer la zone de sprite en fonction de frame.
3. Modifier la variable frame en mettant 1, et vérifier que le sprite ait changé.
4. En utilisant le modulo, et la variable pyxel.frame_count, essayer dans le update de modifier la valeur de frame pour changer automatiquement l'animation pour chaque frame.
5. Mettre cette modification de frame dans les entrées clavier pour modifier les animations seulement si on déplace l'oiseau.

---

Collisions simples

Elles fonctionnent de la même façon qu'avec les formes géométriques : il faut vérifier que les coordonnées soient superposées :

pyxel.rect(80, 60, 10, 10, 8)  #Carré  toucher dans le draw

Test :

if x + 8 > 80 and x < 90 and y + 8 > 60 and y < 70: #Si les coordonnées x et y sont comprises dans l'intervalle du carré
    print("Collision !")

---

À vous !

Travail demandé

En utilisant le fichier de sprites :

• Positionner différents sprites à l'écran ;
• Tester différentes collisions et essayer de rendre la tâche moins répétitives si plusieurs objets (utilisation de listes) ;
• Créer différentes animations avec les sprites ;
• Positionner des éléments de jeu à l'écran pour créer un "niveau" ;