Sprites

Un composant (component) sprite est une simple image ou une animation image par image affichée à l’écran.

Le composant sprite peut utiliser un atlas ou une source de tuiles pour ses graphismes.

Propriétés du sprite

Outre les propriétés Id, Position et Rotation, les propriétés suivantes sont propres à ce composant :

Image

Si le shader possède un seul échantillonneur, ce champ s’appelle Image. Sinon, chaque emplacement porte le nom de l’échantillonneur de texture dans le matériau. Chaque emplacement indique la ressource atlas ou source de tuiles à utiliser pour le sprite avec cet échantillonneur de texture.

Default Animation

L’animation à utiliser pour le sprite. Les informations d’animation proviennent du premier atlas ou de la première source de tuiles.

Material

Le matériau à utiliser pour le rendu du sprite.

Blend Mode

Le mode de fusion à utiliser pour le rendu du sprite.

Size Mode

Si la valeur est Automatic, l’éditeur définit la taille du sprite. Si la valeur est Manual, vous pouvez définir la taille vous-même.

Slice 9

Définissez cette propriété pour préserver la taille en pixels de la texture du sprite sur les bords lorsque le sprite est redimensionné.

Texturage en neuf tranches

Les nœuds Box de l’interface graphique et les composants sprite (sprite components) comportent parfois des éléments dont la taille dépend du contexte : des panneaux et des boîtes de dialogue qui doivent être redimensionnés pour s’adapter à leur contenu, ou une barre de vie qui doit être redimensionnée pour indiquer les points de vie restants d’un ennemi. Cela peut entraîner des problèmes visuels lorsque vous appliquez une texture au nœud ou au sprite redimensionné.

Normalement, le moteur met la texture à l’échelle pour l’adapter aux limites du rectangle, mais la définition de zones de bordure pour le découpage en neuf tranches (slice-9) permet de limiter les parties de la texture qui doivent être mises à l’échelle :

Le paramètre Slice9 du nœud Box se compose de quatre nombres qui indiquent le nombre de pixels des marges gauche, supérieure, droite et inférieure qui ne doivent pas être mises à l’échelle de la manière habituelle :

Les marges sont définies dans le sens des aiguilles d’une montre, en partant du bord gauche :

• Les segments des coins ne sont jamais mis à l’échelle.
• Les segments des bords sont mis à l’échelle selon un seul axe. Les segments des bords gauche et droit sont mis à l’échelle verticalement. Les segments des bords supérieur et inférieur sont mis à l’échelle horizontalement.
• La zone centrale de la texture est mise à l’échelle horizontalement et verticalement selon les besoins.

La mise à l’échelle de la texture avec Slice9 décrite ci-dessus s’applique uniquement lorsque vous modifiez la taille du nœud Box ou du sprite :

Mipmaps et découpage en neuf tranches

En raison du fonctionnement du mipmapping dans le moteur de rendu, la mise à l’échelle des segments de texture peut parfois présenter des artefacts. Cela se produit lorsque vous réduisez la taille des segments en dessous de la taille de la texture d’origine. Le moteur de rendu sélectionne alors un mipmap de résolution inférieure pour le segment, ce qui entraîne des artefacts visuels.

Pour éviter ce problème, assurez-vous que les segments de la texture qui seront mis à l’échelle sont suffisamment petits pour ne jamais devoir être réduits, mais uniquement agrandis.

Modes de fusion

La propriété Blend Mode définit la façon dont les éléments graphiques du composant (component) doivent être fusionnés avec ceux qui se trouvent derrière lui. Voici les modes de fusion disponibles et leur calcul :

Alpha

Fusion normale : src.a * src.rgb + (1 - src.a) * dst.rgb

Add

Éclaircit l’arrière-plan avec les valeurs de couleur des pixels correspondants du composant : src.rgb + dst.rgb

Multiply

Assombrit l’arrière-plan avec les valeurs des pixels correspondants du composant : src.rgb * dst.rgb

Screen

Inverse de Multiply. Éclaircit l’arrière-plan et les valeurs des pixels correspondants du composant : src.rgb - dst.rgb * dst.rgb

Manipulation à l’exécution

Vous pouvez manipuler les sprites à l’exécution au moyen de différentes fonctions et propriétés (consultez la documentation de l’API pour leur utilisation). Fonctions :

• sprite.play_flipbook() - Joue une animation sur un composant sprite.
• sprite.set_hflip() et sprite.set_vflip() - Définissent le retournement horizontal et vertical de l’animation d’un sprite.

Un sprite possède également différentes propriétés que vous pouvez manipuler avec go.get() et go.set() :

cursor

Le curseur d’animation normalisé (number).

image

L’image du sprite (hash). Vous pouvez la modifier à l’aide d’une propriété de ressource atlas ou source de tuiles et de go.set(). Consultez la référence de l’API pour un exemple.

material

Le matériau du sprite (hash). Vous pouvez le modifier à l’aide d’une propriété de ressource matériau et de go.set(). Consultez la référence de l’API pour un exemple.

playback_rate

La vitesse de lecture de l’animation (number).

scale

L’échelle non uniforme du sprite (vector3).

size

La taille du sprite (vector3). Elle ne peut être modifiée que si la propriété Size Mode du sprite est définie sur Manual.

Constantes de matériau

Le matériau sprite par défaut possède les constantes suivantes, que vous pouvez modifier avec go.set() ou go.animate() (consultez le manuel des matériaux pour plus de détails). Exemples :

go.set("#sprite", "tint", vmath.vector4(1,0,0,1))
go.animate("#sprite", "tint", go.PLAYBACK_LOOP_PINGPONG, vmath.vector4(1,0,0,1), go.EASING_LINEAR, 2)

tint

La teinte du sprite (vector4). Le type vector4 représente la teinte, avec x, y, z et w correspondant aux composantes rouge, verte, bleue et alpha de la teinte.

Attributs de matériau

Un sprite peut redéfinir les attributs de sommets du matériau actuellement assigné, qui seront transmis au shader de sommets par le composant (consultez le manuel des matériaux pour plus de détails).

Les attributs spécifiés dans le matériau apparaissent comme des propriétés ordinaires dans l’inspecteur et peuvent être définis individuellement sur chaque composant sprite. Si un attribut est redéfini, il apparaît comme une propriété redéfinie et est enregistré dans le fichier sprite sur le disque :

Configuration du projet

Le fichier game.project comporte quelques paramètres du projet liés aux sprites.

Sprites à plusieurs textures

Lorsqu’un sprite utilise plusieurs textures, certains points sont à prendre en compte.

Animations

Les données d’animation (nombre d’images par seconde, noms des images) proviennent actuellement de la première texture. Nous l’appellerons « animation directrice ».

Les identifiants d’image de l’animation directrice servent à rechercher les images dans une autre texture. Il est donc important de veiller à ce que les identifiants d’image correspondent entre les textures.

Par exemple, si votre diffuse.atlas contient une animation run comme ceci :

run:
    /main/images/hero_run_color_1.png
    /main/images/hero_run_color_2.png
    ...

Alors les identifiants d’image seront de la forme run/hero_run_color_1, qu’il est peu probable de trouver, par exemple, dans un normal.atlas :

run:
    /main/images/hero_run_normal_1.png
    /main/images/hero_run_normal_2.png
    ...

Nous utilisons donc Rename patterns dans l’atlas pour les renommer. Définissez _color= et _normal= dans les atlas correspondants, et vous obtiendrez des noms d’image comme ceux-ci dans les deux atlas :

run/hero_run_1
run/hero_run_2
...

Coordonnées UV

Les coordonnées UV proviennent de la première texture. Comme il n’y a qu’un seul ensemble de sommets, nous ne pouvons pas garantir une bonne correspondance si les textures secondaires ont davantage de coordonnées UV ou une forme différente.

Ce point est important : veillez à ce que les images aient des formes suffisamment similaires, sinon vous risquez d’observer des bavures de texture.

Les dimensions des images dans chaque texture peuvent être différentes.