Nuit du c0de
Nuit du c0de
Pyxel permet l'utilisation d'images à la place de simples formes.
Il est possible de charger des images de format .jpg ou .png à partir de fichier individuels, mais lors de la Nuit du c0de, vous n'aurez le droit d'utiliser que les ressources fournies.
Ces ressources ( images, sons, ...) se trouvent dans des fichiers au format .pyxres; pour pouvoir les utiliser, il faut préalablement charger le fichier correspondant, par exemple :
pyxel.load("ressources.pyxres")
Cette instruction est à placer après l'instruction d'initialisation de Pyxel pyxel.init().
Il est possible de ne charger que les ressources que l'on va effectivement utiliser, en précisant par True ou False le chargement, dans l'ordre, des images, de la
tilemap ( voir plus loin ), des sons ou de la musique.
Par exemple, pour ne charger que les images, on écrirait :
pyxel.load("ressources.pyxres", True, False, False, False)
Les ressources images se présentent sous la forme d'une banque d'images, c'est à dire un regroupement d'images dans un même ensemble.
Une banque d'images est un ensemble de tuiles ( tiles ), c'est à dire de petites images (en général) carrées disposées sur une grille de 256 x 256 pixels.
Une tuile peut représenter un sprite ou un élément de décor, avec lequel on peut interagir ou non.
L'ensemble complet des tuiles disponibles pour une utilisation dans une zone de jeu est appelé un jeu de tuiles ( tileset ).
Avec Pyxel, un tileset peut comprendre jusqu'à 3 banques d'images différentes ( numérotées de 0 à 2 ). La première est chargée par défaut dans la banque 0.
L'organisation est fondamentale à connaître, car on adresse une image en précisant les coordonnées (x, y) dans la grille de son pixel supérieur gauche, sa taille horizontale et sa taille verticale ( en pixels ).
Par exemple : la banque d'images dans le fichier ressources.pyxres contient quelques images, toutes de taille 8 x 8 pixels.
Pyxel propose un éditeur pour créer ou modifier des images utilisables dans des applications Pyxel. ( voir la référence Pyxel).
Si sous Linux la commande pyxel edit XXXX.pyxres ne fonctionne pas, essayer : ~/.local/bin/pyxel edit XXXX.pyxres
Pour placer une image dans la fenêtre, il faut en fait copier une partie de la banque d'images vers une position (x, y) dans la fenêtre avec la méthode pyxel.blt() :
pyxel.blt(x, y, numéro banque, x(image), y(image), taille horizontale, taille verticale, [couleur de transparence])
Exemple :
pyxel.blt(vaisseau_x, vaisseau_y, 0, 0, 0, 8, 8, 0) # remplace le carré 8x8 représentant le vaisseau par une image de même taille
(x, y) représente là aussi la coordonnée du pixel supérieur gauche de la fenêtre à partir duquel s'affichera l'image.
Si les dimensions de l’image sont indiquées comme négatives, la copie de l’image sera inversée horizontalement et/ou verticalement.
Il est également possible de spécifier une couleur de transparence, qui ne sera donc pas dessinée à l’écran et "laissera apparaître" son arrière-plan. On a choisi ici la couleur noire (code : 0) qui est la couleur du fond de la fenêtre.
Modifier le script du jeu précédent pour qu'il utilise des images pour le vaisseau, les ennemis et les tirs; les explosions seront toujours représentées par des cercles.
Le fichier de ressources est ici.
Pour animer les sprites, on peut se servir d'une méthode similaire à l'animation des explosions, sauf qu'ici, on fera évoluer l'image affichée à chaque frame.
Par exemple, on trouve dans la banque d'images 3 sprites différents pour les ennemis, aux coordonnées (0, 8), (0, 16) et (0, 24) de la banque d'images ( voir image ci-dessus ).
Pour animer un ennemi, on fera alors alterner en boucle la valeur de yimage entre 8, 16 et 24 pour sélectionner une image différente à afficher.
Ce calcul utilisera le nombre d'images indiquées par l'attribut frame_count de Pyxel; par exemple, pour modifier l'image toutes les 3 frames ( soit 1/10è de seconde à 30 fps ) :
coeff = pyxel.frame_count // 3 % 3 # valeur alternant entre 1, 2 et 3 en boucle toutes les 1/10ème de seconde
pyxel.blt(ennemi[0], ennemi[1], 0, 0, 8*coeff, 8, 8, 0) # la coordonnée y de l'image est donnée par 8*coeff et alterne entre 8, 16 et 24