Aller au contenu

Tutoriel   Pyxel

Pyxel, c'est quoi?

Pyxel (/ˈpɪksəl/) est un moteur de jeu rétro pour Python.


Logo Pyxel

Les spécifications sont inspirées des consoles de jeux rétro, comme le fait de n'afficher que 16 couleurs et de prendre en charge 4 canaux audio, vous permettant ainsi de profiter facilement de la création de jeux au style pixel art.

Illustration animée d'un jeu Pyxel

Environnement de programmation

Pour programmer une application avec pyxel, tu dois disposer d'un environnement de programmation en Python. Tu peux soit :

  • installer la bibliothèque éponyme sur ta propre machine en tapant la commande suivante dans un termiale :

    pip install -U pyxel
    

  • utiliser Pyxel Studio qui te permet à partir d'un interface web de coder ton application ainsi que d'éditer des ressources graphiques et audio.

logo pyxel studio

Documentation

  • Site officiel


    logo pyxel


    La documentation officiel de la bibliothèque, incluant de nombreux exemples de codes.

  • Nuit du code


    logo pyxel


    Une fiche de référence de la bibliothèque Pyxel fournie par la Nuit du code, très synthétique mais exhaustive.

Utilisation de ressource

Quels sont les fichiers utilisés pour faire un jeu avec Pyxel?

Pour coder un jeu avec pyxel tu devras utiliser :

  • un ou plusieurs fichiers .py contenant toutes les instructions du jeu codés avec Python ;
  • un fichier ou plusieurs fichiers .pyxres contenant toutes les ressources, graphiques et audio, du jeu.

On va t'expliquer dans cette partie comment manipuler ces fichiers de ressource.

Éditeur Pyxel

pyxel intègre un outil te permettant d'éditer directement des images, des cartes de tuiles et de sons (musique et bruitage), que tu peux récupérer dans un fichier au format .pyxres. Il te sera ensuite très facile de manipuler ses ressources dans le code du jeu grâce à des fonctions dédiées.

Editeur d'image Pyxel


Comment accéder à l'éditeur Pyxel?

  • l'éditeur est directement intégré dans l'interface de Pixel Studio ;

  • pour y accéder sur ton ordinateur, il suffit de taper la commande suivante dans un terminal

        pyxel edit PYXEL_RESOURCE_FILE
    
    Si le fichier PYXEL_RESOURCE_FILE existe (au format .pyxres), alors il sera ouvra, sinon il sera créé.

Système de coordonnées

Comment repérer un pixel?

pyxel utilise un système de coordonnées cartésien dont l'origine se situe en haut à gauche. Un couple de coordonnées entières (x, y) permet donc de repèrer un pixel dans une image ou à l'écran.

Illustration du système de coordonnées de Pyxel

Qu'est-ce qu'une carte de tuile?

  • Une tuile, ou tile en anglais, est une petite image carrée (généralement de 8x8 pixels) que tu peux réutiliser pour construire des décors ou des personnages.

Illustration d'une tuile

Éditeur d'image de Pyxel ; sur la partie gauche le détail des quatre tuiles sélectionnées sur l'image affichée sur la partie droite.

  • Une carte de tuiles, ou tilemap en anglais, est une grille où chaque case est une tile. Cela permet de construire des niveaux facilement.

Illustration d'une carte de tuiles

Éditeur de carte de tuiles de Pyxel ; sur la partie gauche la carte de tuiles sur laquelle on vient ajouter les tuiles de l'image affichée sur la partie droite.


Lien entre les coordonnées en pixels (x, y) et les coordonnées (u, v)d'une carte de tuile

Dans une carte de tuiles,

  • tous les pixels de x = 0 à x = 7 appartiennent à la tuile avec u = 0, de même les pixels de x = 8 à x = 15 appartiennent à la tuile avec u = 1, et ainsi de suite.

  • La division entière de x et y par 8 donne donc les coordonnées en pyxel de la tuile dans la carte de tuile :

u, y = x // 8, y // 8

Dans l'image de l'éditeur de carte de tuiles ci-dessus, la tuile sous le pointeur de coordonnées (u, v) = (15, 7) a donc son origine (coin en haut à gauche) située au pixel (x, y) = (15x8, 7x8), soit (120, 56).

Quelques techniques utiles

Le compteur d'images

La bibliothèque pyxel fournit la variable globale pyxel.frame_count qui contient le nombre d'images générées depuis le lancement du jeu et qui est mise à jour à chaque nouvelle image affichée.

Le moteur de jeu ayant un taux de génération fixé à 30 ips (image par seconde), la valeur de pyxel.frame_count peut donc servir de « chronomètre ».

    t_0 = pyxel.frame_count

    # portion de code

    t_1 = pyxel.frame_count

    duree = (t_1 - t_0) / 30

    print("La durée d'exécution de la portion de code est de", duree )