Share
Alors, vous avez commencé à travailler sur votre projet, vous avez maîtrisé les bases et maintenant vous souhaitez implémenter des graphiques… mais vous ne savez pas trop comment procéder. Laissez-moi vous présenter Texture Packer.
Créé par les gars de Code n 'Web, Texture Packer est un super logiciel qui vous permet de stocker des textures, des ressources et pratiquement tout ce que vous voulez dans une jolie petite feuille compatible avec de nombreux frameworks.!
Une version gratuite est disponible, mais certaines fonctionnalités sont désactivées.J'aime Texture Packer car il est facile à utiliser, très flexible et fonctionne avec les moteurs que vous utilisez déjà. Il fait un travail incroyable en vous permettant d'optimiser vos feuilles avec diverses options telles que la profondeur de couleur, la mise à l'échelle automatique, le tramage et le rognage des pixels invisibles. Il exporte également vers de nombreux formats compatibles avec Cocos 2D, Unity, Corona, tout moteur prenant en charge JSON, etc..
Avant de commencer à créer notre propre feuille, examinons l’interface pendant une seconde.
Tous les réglages à gauche peuvent paraître un peu menaçants, mais ne vous inquiétez pas, ils sont en réalité très faciles à configurer. Et encore mieux, il suffit de les définir une fois que; vous pouvez ensuite les sauvegarder et les réutiliser plus tard pour toute autre feuille que vous souhaitez créer!
Comme vous pouvez le constater, les paramètres de la feuille se trouvent à gauche, la liste de nos ressources à droite (qui est vide pour le moment) et l'aperçu de la feuille lui-même au centre..
La première chose à faire est d'ouvrir votre dossier avec votre art magique et de le glisser-déposer dans la liste des actifs de Texture Packer..
Comme vous pouvez le constater, ils apparaissent instantanément dans votre feuille. Vous pouvez cliquer sur un élément spécifique de cette liste pour le mettre en évidence dans la feuille. (Cela fonctionne aussi dans l'autre sens.)
Pointe: Juste sous la feuille d'aperçu, il y a quelques options de zoom; n'hésitez pas à jouer avec ceux-ci jusqu'à ce que la feuille s'adapte bien à l'écran pour un meilleur aperçu.Jetons un coup d'oeil au fouillis d'options sur la gauche. Vous ne devez vous soucier que de trois catégories:
Nous allons passer en revue chacun de ceux-ci à tour de rôle.
Ceci est le format du fichier de données de la feuille contenant toutes les informations nécessaires, telles que les coordonnées, les dimensions et la rotation..
Actuellement, les options suivantes sont disponibles: Cocos2D, Corona, Sparrow / Starling, LibGDC, JSON, Unity3D, LibGDX, Css, Gideros, CEGUI / OGRE, AndEngine, AppGameKit, Slick2D, Moai, BHive, Xml, BatteryTech SDK, Ekkik et texte brut.
C’est le chemin où le fichier de données sera enregistré. Il est recommandé de le conserver dans le même dossier que la feuille elle-même..
Pointe: C'est une bonne idée de définir le dossier de sortie afin que la feuille et son fichier de données soient exportés directement dans le répertoire de votre moteur..De là, vous sélectionnez le format de l'image de la feuille. La PNG est recommandée, sauf si vous avez besoin de quelque chose de spécifique pour votre projet..
Sauf si vous savez ce que vous faites, laissez ces paramètres inchangés: Png Opt Level à "none", DPI à 72 et Premultiply Alpha décoché..
En d'autres termes, la profondeur de couleur. Il est conseillé de laisser cela aussi intact; Le RGBA8888 par défaut est l'option de qualité la plus élevée. Si vous souhaitez un aspect spécifique ou accordez une grande importance à la taille de vos feuilles, vous pouvez choisir une option plus basse, telle que RGBA4444..
Le "A" dans ces abréviations signifie "Alpha" (transparence), et vous remarquerez que si vous choisissez une option qui dit seulement "RGB", elle aura un fond noir, ce qui signifie qu'il n'y a aucune information sur l'alpha. Si vous en avez besoin, vous pouvez créer une carte alpha en sélectionnant "ALPHA" dans cette liste. cela peut être utile dans certains cas, alors gardez cela à l'esprit.
Si vous n'avez pas touché l'option de l'étape précédente, le dithering ne sera pas disponible, mais ne vous inquiétez pas. Maintenant, au cas où vous auriez sélectionné une option inférieure à l'étape précédente, telle que RGB444, vous remarquerez peut-être que vous pouvez voir où les teintes de couleur correspondent… c'est moche, le dithering est là pour vous aider en mélangeant des couleurs à l'aide d'algorithmes complexes.
Essayez les options "FloydSteinberg" ou "Atkinson" et voyez leur apparence.
Tout comme l'option "Fichier de données", à partir de là, vous choisissez le chemin dans lequel l'image de la feuille sera exportée..
Il existe un paramètre supplémentaire dans la catégorie de sortie appelé "SD auto". Cela vous permet d'exporter automatiquement une version plus petite de la même feuille sur laquelle vous travaillez en même temps. Ceci est utile lorsque vous travaillez sur une application iOS qui nécessite deux feuilles distinctes pour pouvoir fonctionner à la fois sur des écrans normaux et sur des écrans rétines..
C'est l'endroit où vous pouvez changer la taille de la feuille. Vous pouvez choisir une taille maximale ou une taille fixe. Il existe des valeurs prédéfinies et recommandées dans le menu déroulant (toutes les puissances de deux), mais vous pouvez également saisir manuellement les valeurs souhaitées..
À moins que vous ne travailliez sur un projet nécessitant une taille spécifique pour la feuille, je vous suggère d'activer l'option "Autoriser les tailles libres". Cela garantit que la taille de la feuille est suffisamment grande pour accueillir tous les éléments sans laisser de pixels vierges inutiles. (Conservez également l'option "Pack" sur "Meilleur".)
À partir de là, vous pouvez facilement redimensionner la totalité de votre feuille à partir du menu déroulant (vous permettant également d'ajouter vos propres valeurs). Juste en dessous du numéro de mise à l'échelle, il existe une autre option pour la mise à l'échelle. méthode. Les options "lisse" et "rapide" sont les plus courantes; "rapide" effectue la mise à l'échelle sans mélanger la couleur des pixels (cela pourrait être utilisé pour mettre à l'échelle vos graphismes pixelisés pour un jeu rétro), et "douceur" redimensionne tout en douceur (évidemment).
Je ne recommanderais pas de redimensionner les sprites avec la méthode "smooth". Vous pouvez le faire directement dans votre projet si vous en avez vraiment besoin. il ne sert à rien d'avoir d'énormes feuilles.
Pointe: Si vous regardez dans le coin inférieur droit du programme, vous remarquerez des chiffres représentant la largeur, la hauteur et la taille de votre feuille. Tu devrais garder un œil dessus.En bref, il s’agit des paramètres qui déterminent l’organisation des actifs dans votre feuille. Il y a plusieurs options qui donnent plusieurs résultats, mais pour un meilleur résultat, je recommande de les garder sur les valeurs par défaut "MaxRects" et "Best". Cela garantit le meilleur placement des ressources dans la feuille, de sorte qu'il y ait le moins possible de pixels invisibles. Gardez à l'esprit, pixels invisibles = espace perdu.
Le rembourrage détermine l'espace entre vos actifs. c'est une bonne pratique de leur laisser de l'espace pour respirer.
Si les ressources sont côte à côte, lorsque vous les faites pivoter dans le moteur, des artefacts laids apparaissent autour de leurs bords en raison des ressources voisines et de l'anti-crénelage. Je recommande de régler le rembourrage des bordures et des formes sur 2 tout en laissant le rembourrage intérieur à 0.
Il s'agit d'un paramètre assez important pour les moteurs basés sur des tuiles. Il étend les pixels autour d'un élément d'actif de la valeur que vous avez sélectionnée. Par exemple, si vous extrayez un élément de mosaïque de votre feuille et le placez dans votre moteur, vous remarquerez de minuscules espaces entre chaque mosaïque..
Ceci est probablement dû à l'anti-crénelage (si vous l'avez dans votre moteur), il est donc très facile de résoudre ce problème en définissant l'option Extrusion sur 1. Cela corrige également un autre problème potentiel et ne modifie pas les actifs de manière visuelle. du tout.
Si votre format de feuille doit être divisible par un nombre spécifique, c’est ici que vous pouvez le définir. Cela modifiera la taille de la feuille en la remplissant de pixels invisibles pour correspondre à une valeur spécifique. Cela peut être utile dans le cas où votre moteur exige par exemple que les feuilles soient une puissance de deux, et cela aide également à garder une disposition identique sur plusieurs facteurs de mise à l'échelle..
La valeur par défaut est 1, ce qui signifie que la taille de la feuille est la taille que vous avez définie dans la section géométrie.
L'option "réduire les artefacts de frontière" tente de réduire les ombres et les imperfections autour des frontières des actifs. Il est désactivé par défaut et je vous suggérerais de le laisser de cette façon..
L'option "rotation" permet la rotation des actifs pour la meilleure gestion de l'espace. Dans de nombreux cas, les ressources sont mieux protégées, ce qui permet de gagner de la place car la feuille finit par être plus petite. Toutefois, il peut s’avérer inquiétant pour votre moteur. La plupart du temps, il est difficile de prendre en compte les actifs en rotation et de rétablir leur état d'origine dans le moteur, ce qui peut même créer des problèmes..
"Découper" est une fonction géniale qui supprime les pixels invisibles de vos ressources et ne conserve que ce qui est visible. Cela permet d'économiser beaucoup d'espace et de tout ranger, mais également de rendre le rendu plus rapide, car le moteur n'a pas à se préoccuper du nombre de pixels invisibles. Il est généralement bon de garder cette option, mais si vous avez besoin que la taille d'un actif soit une valeur spécifique basée sur sa transparence, cela gênera… alors gardez cela à l'esprit..
Le "recadrage" fait fondamentalement la même chose que le "recadrage", mais parfois, cela affecte les dimensions de l'actif. Je vous conseillerais donc d'utiliser "recadrer" et de garder "recadrage" désactivé..
Également au-dessous de ces options, il existe un paramètre "seuil", qui détermine le nombre de pixels transparents supprimés par les options "Rogner" et "Rogner". Si vous augmentez ce nombre, "rogner" et "rogner" commenceront à masquer les pixels à peine visibles - ils sont essentiellement liés directement à l'alpha du pixel, ce qui détermine s'il est supprimé ou non..
La fonction "contour de la forme" ajoute un cadre de sélection rouge autour de chaque élément, comme indiqué dans l'image ci-dessous. C'est une bonne chose d'avoir quand vous voulez déboguer et voir exactement où vont les choses dans votre moteur.
"Auto alias" est une excellente option: lorsque vous avez plusieurs ressources identiques mais dont le nom est différent, vous pouvez activer cette option. La ressource ne sera ajoutée qu'une seule fois dans la feuille. avec le nom approprié. Ceci est principalement utilisé lorsque vous avez besoin du même actif deux fois dans le moteur avec des noms ou des valeurs différents..
Enfin, l'option "masque heuristique" est destinée aux ressources nécessitant de la transparence mais ayant un arrière-plan de couleur unie. Fondamentalement, cette fonctionnalité supprime la couleur d'arrière-plan et en fait des pixels transparents. Vous ne devriez vraiment pas utiliser cette option, car elle entraîne généralement des contours laids et nets (à moins que vos ressources ne soient d'abord pixellisées). Il est préférable de gérer vous-même la transparence avant de placer vos actifs dans la feuille..
Maintenant que vous avez terminé avec tous les paramètres, vous pouvez appuyer sur le bouton "Publier" en haut pour exporter votre feuille (ou alternativement). Ctrl-P). Pour éviter toute la configuration lors de la prochaine utilisation d'une feuille, cliquez simplement sur le bouton "Enregistrer les paramètres par défaut"; cela sauvegardera les réglages actuels comme valeurs par défaut et ils seront là chaque fois que vous ouvrez le programme, ce qui vous évite un lot de temps.
Texture Packer prend également en charge l'intégration avec votre moteur via des lignes de commande. Cela signifie que vous n'avez même pas besoin d'ouvrir le programme pour exporter vos feuilles, ce qui accélère considérablement les choses. Plus à ce sujet ici.
Et c'est à peu près tout, vous savez maintenant comment configurer votre propre fiche de ressource et l'exporter. Maintenant, jouez avec les paramètres et les valeurs pour voir ce qui convient le mieux à votre projet. Amusez-vous et commencez à exporter!
Accentsconagua