L'éditeur de sprites


Éditeur de sprite

L'éditeur d'image-objet est l'endroit où vous définissez les propriétés générales de n'importe quelle ressource d'image-objet que vous créez. Vous pouvez ouvrir cette fenêtre en créant une nouvelle image-objet (clic droit dans le dossier des ressources des sprites et sélectionnez "Créer"), en double-cliquant sur un sprite existant ou en cliquant-droit un sprite existant et en sélectionnant "Propriétés". Les parties qui composent l'éditeur de sprite sont les suivantes:

Ici vous pouvez nommer le sprite. Le nom du sprite est ce qui sera utilisé tout au long de votre projet de jeu pour identifier l'image-objet en tant que ressource et ne peut être qu'alpha-numérique et ne peut utiliser que le symbole "_". Bien que vous puissiez utiliser des nombres dans le nom des sprites, le nom ne peut pas commencer par un nombre car cela en ferait un nom de ressource invalide lors de l'utilisation de GML ou DnD™.


Dans cette section, vous pouvez définir la taille de l'image en cliquant sur le bouton Sprite Size . Cela va ouvrir la fenêtre suivante: Éditeur de sprite Redimensionner les propriétés

Ici vous pouvez voir un aperçu de l'image-objet avant et après l'application des transformations choisies, et la section ci-dessous est pour définir les nouvelles propriétés d'image-objet et est divisée en deux parties:

  • Échelle de l'image: avec cette option, vous pouvez redimensionner le canevas de dessin d'image-objet et toutes les images contenues dans l'image-objet seront étirées et redimensionnées pour s'adapter à la nouvelle taille. Vous pouvez choisir de mettre à l'échelle et de conserver le ratio d'aspect de l'image de base, et vous pouvez également choisir de mettre à l'échelle en pixels ou en pourcentage. En fonction du type d'image avec lequel vous travaillez, vous pouvez également activer l'interpolation linéaire (en général, l'interpolation linéaire «lissera» les pixels sur une zone et il est donc préférable de ne pas utiliser le pixel art).

  • Redimensionner le canevas: cette option redimensionnera le canevas de dessin à la nouvelle taille sans redimensionner le contenu. Vous pouvez définir le point d'ancrage pour le redimensionnement à l'aide des flèches directionnelles, puis définir la valeur de la taille. Il existe une option pour conserver les proportions lors du redimensionnement du canevas et, en bas, vous pouvez choisir de définir les valeurs de redimensionnement en pixels ou en pourcentage.

Lorsque vous êtes satisfait de la nouvelle taille, vous pouvez cliquer sur Appliquer pour appliquer les modifications et fermer la fenêtre Redimensionner les propriétés.

REMARQUE: cette option est uniquement disponible pour les images-objets bitmap et sera grisée pour les images-objets SWF ou squelettes.

Dans cette section, vous pouvez également ouvrir l' éditeur d'image pour dessiner sur votre image-objet, ou cliquer sur le bouton " Importer " pour importer une image-objet créée précédemment. Les sprites peuvent être importés à partir des formats bitmap les plus courants ( PNG, JPG, GIF, etc...) mais GameMaker Studio 2 prend également en charge les sprites vectoriels (SWF) et les sprites d'animation squelettiques (Spine). Pour plus d'informations sur ces formats, consultez la section Importation de sprites non-bitmap. Notez que lors de l'importation de sprites bitmap, vous pouvez sélectionner plusieurs fichiers image dans l'explorateur de fichiers et chacun sera ajouté au même sprite sous forme de sous-images séparées (images).


Cette section de la fenêtre des propriétés de l'image-objet traite de la façon dont GameMaker Studio 2 stocke les images qui composent votre image-objet sur les pages de texture pour les utiliser avec les appareils et les navigateurs. Pour les plates-formes de bureau, cela n'est généralement pas important, mais lorsque vous commencez à développer pour le mobile ou le Web, la gestion de vos images (textures) devient très importante car des textures mal gérées peuvent avoir un effet négatif sur votre jeu.

Les cases à cocher Mosaïque: horizontale et mosaïque: par défaut, les cases à cocher verticales ne sont normalement pas vérifiées comme la plupart du temps si vous ne souhaitez pas masquer les sprites. Cependant, dans certaines circonstances, vous pouvez souhaiter qu'ils soient en mosaïque, ce qui signifie que vous devriez vérifier ces options, surtout si vous allez redimensionner la vue ou la pièce car la mise à l'échelle peut introduire des artefacts dans les graphismes d'un jeu si la page de texture n'est pas générée correctement.

Si votre sprite doit être utilisé comme une texture, vous devez cocher la case Séparer la texture et l'image recevra une page de texture (notez que chaque sous-image aura aussi sa propre page de texture, donc si votre sprite a 10 images vous allez générer 10 pages de texture). Cela augmentera énormément les besoins en mémoire de texture de votre jeu et il faudra donc faire très attention en utilisant cette option. Notez également qu'en général si votre sprite utilise cette option pour la 3D, alors les textures doivent avoir une puissance de 2 (ie> 128x128, 256x256, 512x512 etc...).

Ensuite, vous pouvez choisir le groupe de texture auquel vous souhaitez que la ressource sprite appartienne. Fondamentalement, un groupe de texture (précédemment défini dans le gestionnaire de groupe de texture ) est quelque chose que vous pouvez configurer de sorte que toutes les ressources d'image dont vous avez besoin pour des pièces ou des niveaux spécifiques de votre jeu peuvent être stockées ensemble. Ainsi, par exemple, vous pouvez avoir toutes vos images de niveau 1 dans un groupe de textures, toutes vos images de niveau 2 dans une autre etc... et GameMaker Studio 2 va essayer de placer toutes ces ressources groupées sur la même page de texture échanger pendant que votre jeu fonctionne sur la plateforme cible choisie.

REMARQUE: cela peut ne pas toujours être nécessaire et l'augmentation des performances de cette méthode dépend du fait que le périphérique cible est lié au processeur ou lié au GPU.


Vous pouvez en savoir plus sur les pages de texture ici.

L'option suivante consiste à activer l' alpha pré-multiplié pour les images d'image-objet. Lorsque cette option est activée, l'alpha de toutes les sous-images de l'image-objet est pré-multiplié, ce qui n'est normalement nécessaire que pour dessiner des sprites sur des surfaces, ou pour certains effets spéciaux spécifiques. Pour une utilisation normale d'un sprite, vous ne devriez pas voir de différence notable entre le sprite normal et le sprite pré-multiplié.

Enfin, nous avons Edge Filtering. Cette option est spécifique lorsque vous avez activé l'interpolation linéaire pour votre jeu et que vous voyez des "halos" de couleur autour de vos sprites. Cela est dû au fait que le matériel interpole à partir de texels sources multiples sur la page de texture à la fois, et peut être particulièrement évident lorsque vous mettez à l'échelle des jeux en résolution. En activant ceci, les pixels du bord seront filtrés pour prendre la couleur du pixel du sprite alpha le plus proche et ainsi fusionner les pixels interpolés sans le halo qui était présent précédemment.


Tous les sprites ont un masque de collision qui correspond à la zone de l'image-objet qui sera utilisée pour détecter les collisions lorsque l'image-objet est affectée à une instance. Vous pouvez d'abord définir le mode pour le masque de collision, qui peut être l'un des suivants:

  • Automatique: GameMaker Studio 2 calcule automatiquement le masque de collision en fonction des valeurs alpha de l'image-objet (cela dépend du paramètre Tolérance expliqué ci-dessous).

  • Full Image: Le masque sera calculé avec ses limites étant les mêmes que les limites gauche, droite, supérieure et inférieure de l'image-objet.

  • Manuel: Sélectionner ceci signifie que vous souhaitez définir les limites du masque de collision en utilisant les valeurs d'entrée pour gauche, droite, haut et bas.

Outre le mode Masque de collision, il existe également différents types de masques de collision que vous pouvez choisir dans le menu déroulant:

  • Rectangle: Un simple masque de collision rectangulaire. C'est le plus rapide à résoudre lorsqu'il est utilisé dans votre projet.

  • Ellipse: Crée un masque de collision elliptique. C'est plus lent à résoudre.

  • Diamant: Crée un masque de collision "diamant". C'est plus lent à résoudre et génère plus de frais généraux du processeur.

  • Précise: Ceci crée un masque de collision précis basé sur le contour de l'image-objet. Si l'image-objet possède plusieurs sous-images, il s'agira d'un composite des bords de toutes les sous-images placées les unes sur les autres. Ceci est très lent et génère beaucoup de frais généraux du processeur.

  • Précise (par image): Ceci crée un masque de collision précis par image (ie: le masque changera pour se conformer au contour de chaque image différente). C'est de loin le type de masque de collision le plus lent à résoudre et doit être évité sauf dans des cas très, très spécifiques et peu fréquents.
L'image suivante illustre les différentes options de masque:

Collisions

Les options de vérification des collisions sont très importantes pour votre jeu, car elles influenceront directement l'interaction de vos objets et le fonctionnement de votre jeu, les mauvais paramètres ayant même un impact négatif sur les performances générales. Pourquoi donc? Eh bien, chaque fois que deux instances se rencontrent, et que les deux instances ont un masque valide, un événement de collision est généré en vérifiant le chevauchement du masque, qui peut être précis ou non, et adapté à l'index d'image ou non. Voici une image pour illustrer ceci:

Collisions

En dessous, vous avez le curseur de tolérance alpha, qui indique la tolérance pour créer le masque par rapport à la transparence des pixels des sprites - avec une tolérance plus élevée les pixels partiellement transparents sont laissés en dehors du masque, alors qu'avec une tolérance plus faible le masque prendra en compte ces pixels. Cela influence à la fois le cadre de sélection (lorsqu'il n'est pas réglé sur manuel) et le masque pour une vérification précise des collisions.

Enfin, vous pouvez définir les limites pour la boîte englobante du masque. Le cadre de délimitation est le nom donné à la zone rectangulaire dans laquelle le masque d'image-objet s'insère. Seuls les pixels à l'intérieur de cette boîte englobent le masque et sont impliqués dans la vérification des collisions. Compte. Si vous avez vérifié avec précision, cela sera également séparé pour chaque sous-image. Lorsque vous le définissez vous-même, vous pouvez entrer les valeurs dans les cases pour gauche, droite en haut et en bas, ou vous pouvez cliquer dans la vue de l'image-objet et faites-la glisser pour la "dessiner" sur l'image-objet. Notez que lorsque vous "dessinez" le cadre de sélection, le masque est généré automatiquement pour s'adapter aux valeurs finales.

Il est à noter que si vous allez dans la fenêtre d'aperçu, vous pouvez ajuster le masque de collision en utilisant les "poignées" trouvées dans chaque coin. En cliquant et en les faisant glisser, vous ajusterez le masque de collision de la même manière que si vous saisissiez des valeurs pour la zone de délimitation.


La barre supérieure de l'éditeur d'images-objets contient les propriétés d'origine de l'image-objet et les commandes de zoom de la fenêtre d'aperçu. Ici vous pouvez voir la largeur et la hauteur du sprite, ainsi que définir l' origine. C'est le point dans l'image-objet qui correspond à sa position dans la pièce, c'est-à-dire: lorsque vous créez une instance à une position x / y particulière, l'origine de l'image-objet y est placée. Par défaut, il s'agit du coin supérieur gauche de l'image-objet, mais il est souvent plus pratique d'utiliser le centre ou vous souhaiterez peut-être utiliser une autre position pour pouvoir cliquer dans le menu déroulant d'origine et sélectionnez l'une des valeurs par défaut. Vous pouvez également définir l'origine manuellement en cliquant dans l'aperçu de l'image-objet qui déplace la croix jusqu'au point sur lequel vous avez cliqué, ou en saisissant différentes valeurs pour x et y dans les zones correspondantes. Notez que vous pouvez même définir une origine en dehors de la zone de l'image-objet en utilisant des nombres négatifs (à gauche et en haut) ou positifs plus grands que la largeur et la hauteur de l'image-objet, ce qui peut être très utile pour les objets besoin de dessiner des sprites composites.

En haut à droite se trouvent les commandes de zoom, où vous pouvez agrandir ou réduire l'image d'aperçu selon les besoins. Clique le icône pour faire l'image 1: 1 avec les pixels réels.


La fenêtre d'aperçu de l'image-objet affiche l'image-objet telle qu'elle apparaîtra dans le jeu et peut être agrandie ou réduite en utilisant la molette de la souris , et fait le tour en utilisant le ou en tenant + et en faisant glisser. Vous pouvez utiliser les commandes Frame (expliquées ci-dessous) pour modifier l'affichage de l'image d'aperçu.


Cette partie de l'éditeur de sprites affiche chacune des différentes images qui composent un seul sprite. Vous pouvez cliquer sur n'importe quel cadre et faites-le glisser vers la gauche ou la droite pour changer l'ordre dans lequel ils seront animés, et vous pouvez également double-cliquer sur n'importe quelle image pour lancer l' éditeur d'image et les éditer. Un cadre sélectionné aura une icône Supprimer dans le coin supérieur, et vous pouvez cliquer dessus pour supprimer le cadre de l'image-objet. Vous pouvez également cliquer sur / + sur plusieurs images pour les sélectionner ensemble, auquel cas cliquer sur l'icône Supprimer supprimera toutes les images sélectionnées.


Les contrôles de frame sont pour lire dans la fenêtre de prévisualisation l'animation des frames, avec le bouton play démarrant / arrêtant l'animation et le bouton Loop utilisé pour définir si les boucles d'image-objet (retourne à l'image 1 lorsque la dernière image est atteinte) ou ping-pong (retourne en arrière à travers les images quand la dernière image est atteinte) et vous pouvez définir la vitesse à laquelle elles doivent être lues depuis la boîte de saisie à gauche. La vitesse d'image peut être basée sur "Frames per second", ou "Frames per frame frame". Le nombre total d'images disponibles est affiché à droite avec l'image en cours qui a été sélectionnée, et vous pouvez sélectionner plusieurs images avec vous pouvez sélectionner des images en utilisant / + .