Share
Dus je bent begonnen aan je project te werken, je hebt de basisbeginselen en nu ben je bij het deel waar je eigenlijk wat grafische afbeeldingen wilt implementeren ... maar je weet niet precies hoe je dat moet doen. Laat me je kennis laten maken met Texture Packer.
Gemaakt door de jongens bij Code n 'Web, Texture Packer is een geweldig klein stukje software waarmee je texturen, items en vrijwel alles kunt inpakken wat je wilt in een handige kleine sheet die compatibel is met tonnen frameworks!
Er is een gratis versie beschikbaar, maar sommige functies zijn uitgeschakeld.Ik ben dol op Texture Packer omdat het gemakkelijk te gebruiken is, het is super flexibel en het werkt met de motoren die je al gebruikt. Het is fantastisch om je vellen te kunnen optimaliseren met verschillende opties, zoals kleurdiepte, automatisch schalen, ditheren en onzichtbare pixels bijsnijden. Het exporteert ook naar vele formaten compatibel met Cocos 2D, Unity, Corona, elke engine die JSON ondersteunt, en meer.
Voordat we beginnen met het maken van ons eigen blad, laten we de interface even bekijken.
Alle instellingen aan de linkerkant zien er misschien een beetje dreigend uit, maar maak je geen zorgen, ze zijn eigenlijk heel eenvoudig in te stellen. En nog beter, je hoeft ze alleen maar in te stellen een keer; u kunt ze vervolgens opslaan en later opnieuw gebruiken voor elk ander blad dat u wilt maken!
Zoals u ziet, zijn de instellingen van het blad aan de linkerkant, de lijst met onze activa is aan de rechterkant (die nu leeg is), en het bladvoorbeeld zelf in het midden.
Het eerste dat u hoeft te doen, is uw map openen met uw magische kunst en deze naar de lijst met items van Texture Packer slepen en neerzetten.
Zoals u kunt zien, verschijnen ze onmiddellijk in uw blad. U kunt op een specifiek activum in die lijst klikken en het in het blad markeren. (Dit werkt ook andersom.)
Tip: Recht onder het voorbeeldblad zijn er enkele zoomopties; voel je vrij om ermee te spelen totdat het laken netjes op het scherm past voor een betere preview.Laten we eens kijken naar de puinhoop aan opties aan de linkerkant. Er zijn maar drie categorieën waar je je zorgen over moet maken:
We zullen deze allemaal een voor een doornemen.
Dit is het formaat voor het gegevensbestand van het blad dat alle informatie bevat die u nodig hebt, zoals coördinaten, dimensies en rotatie.
Momenteel zijn de volgende opties beschikbaar: Cocos2D, Corona, Sparrow / Starling, LibGDC, JSON, Unity3D, LibGDX, Css, Gideros, CEGUI / OGRE, AndEngine, AppGameKit, Slick2D, Moai, BHive, Xml, BatteryTech SDK, EaseIJS, Kwik2 en platte tekst.
Dit is het pad waar het gegevensbestand zal worden opgeslagen, het is een goede gewoonte om het in dezelfde map als het blad zelf te bewaren.
Tip: Het is een goed idee om de uitvoermap zo in te stellen dat het werkblad en het bijbehorende gegevensbestand rechtstreeks in de map van uw engine worden geëxporteerd.Hier selecteert u het formaat van de afbeelding van het vel. PNG wordt aanbevolen, tenzij u iets anders specifiek voor uw project nodig heeft.
Tenzij je weet wat je doet, laat deze instellingen dan ongemoeid: Png Opt Level op "none", DPI op 72 en Premultiply Alpha uitgeschakeld.
Met andere woorden, kleurdiepte. Het is aangewezen om dit ook onaangeroerd te laten; de standaard RGBA8888 is de optie met de hoogste kwaliteit. Als u op zoek bent naar een specifieke look of als u de grootte van uw vellen erg op prijs stelt, kunt u een lagere optie kiezen, zoals RGBA4444.
De "A" in die afkortingen staat voor "Alpha" (transparantie), en u zult opmerken dat als u een optie selecteert die alleen "RGB" zegt, deze een zwarte achtergrond heeft, wat betekent dat er geen alpha-info is. Als je het nodig hebt, kun je een alfakaart maken door "ALPHA" uit die lijst te selecteren; dit kan in sommige gevallen handig zijn, dus houd het in gedachten.
Als u de optie uit de vorige stap niet hebt aangeraakt, is dithering niet beschikbaar, maar maakt u zich daar geen zorgen over. Nu, in het geval dat u in de vorige stap een lagere optie hebt geselecteerd, zoals RGB444, merkt u misschien dat u kunt zien waar de kleurtonen overeenkomen ... dat is lelijk, dus dithering is hier om u te helpen kleuren te mengen met behulp van een aantal complexe algoritmen.
Probeer de opties "FloydSteinberg" of "Atkinson" uit en zie hoe ze eruitzien.
Net als bij de optie 'Gegevensbestand', kiest u vanaf hier het pad waarnaar de afbeelding van het werkblad wordt geëxporteerd.
Er is nog een instelling in de categorie Uitvoer genaamd "Auto SD". Hiermee kunt u automatisch een kleinere versie van hetzelfde werkblad waar u aan werkt, automatisch exporteren. Dit is handig wanneer u werkt aan een iOS-app waarvoor twee afzonderlijke bladen nodig zijn om te werken op zowel normale als retina-schermen - Texture Packer laat u zien.
Dit is de plaats waar u de grootte van het blad kunt wijzigen. U kunt een maximale grootte of een vaste grootte kiezen. Er zijn vooraf gedefinieerde, aanbevolen waarden in het vervolgkeuzemenu (alle machten van twee), maar u kunt ook handmatig elke gewenste waarde invoeren.
Tenzij u aan een project werkt waarvoor een specifieke grootte voor het blad is vereist, raad ik u aan de optie "Sta gratis maten" in te schakelen. Dit zorgt ervoor dat de bladgrootte groot genoeg is om alle items te bevatten zonder dat er lege pixels achterblijven. (Houd ook de "Pack" -optie op "Beste".)
Vanaf hier kunt u eenvoudig uw volledige blad opnieuw in grootte brengen in het vervolgkeuzemenu (u kunt ook uw eigen waarden toevoegen). Rechts onder het schaalgetal is er nog een andere optie voor het schalen methode. De "vloeiende" en "snelle" opties zijn de meest voorkomende; "snel" doet de schaal zonder enige pixelkleur te mengen (dit zou kunnen worden gebruikt om uw pixelachtige graphics voor een retro-game op te schalen), en "smooth" schaalt alles soepel (uiteraard).
Ik zou het niet aanraden om de sprites op te waarderen met de "vlotte" methode. Je zou dat rechtstreeks in je project kunnen doen als dat echt nodig is; het heeft geen zin om grote bladen te hebben.
Tip: Als u in de rechterbenedenhoek van het programma kijkt, ziet u enkele cijfers die de breedte, hoogte en grootte van uw blad weergeven. Houd dat in de gaten.Kortom, dit zijn de instellingen die bepalen hoe de activa in uw werkblad worden gerangschikt. Er zijn meerdere opties die resulteren in meerdere resultaten, maar voor het beste resultaat raad ik aan ze te behouden op de standaard "MaxRects" en "Best". Dit zorgt voor de beste plaatsing van de items in het werkblad, dus er zijn zo min mogelijk onzichtbare pixels. Houd rekening met onzichtbare pixels = verspilde ruimte.
Opvulling bepaalt de ruimte tussen uw bezittingen; het is een goede gewoonte om ze wat ruimte te geven om te ademen.
Als de elementen naast elkaar staan en u ze in de motor draait, verschijnen er lelijke voorwerpen langs de randen vanwege naburige activa en anti-aliasing. Ik raad aan om de rand- en vormpadding in te stellen op 2, terwijl u de innerlijke opvulling op 0 laat staan.
Dit is een vrij belangrijke instelling als het op tegels gebaseerde motoren aankomt. Het breidt de pixels rond een item uit met de waarde die je hebt gekozen. Als je bijvoorbeeld een tegelobject uit je werkblad haalt en in je motor plaatst, zie je kleine openingen tussen elke tegel.
Dit komt waarschijnlijk door anti-aliasing (voor het geval je het in je motor hebt), dus een supereenvoudige manier om dit te verhelpen is om de optie Extrude in te stellen op 1. Dit lost ook een ander mogelijk probleem op en verandert de assets niet visueel helemaal niet.
Als uw werkbladgrootte deelbaar moet zijn door een specifiek nummer, kunt u dit instellen. Hierdoor wordt het formaat van het vel gewijzigd en wordt het gevuld met onzichtbare pixels om overeen te komen met een specifieke waarde. Het helpt in het geval dat uw motor de vellen nodig heeft om bijvoorbeeld een kracht van twee te zijn, en het helpt ook om een identieke lay-out over meerdere schaalfactoren te houden.
De standaardwaarde is 1, wat betekent dat de grootte van het blad de grootte is die je hebt ingesteld in de sectie Geometrie.
De optie "grensafbeeldingen verkleinen" probeert schaduwen en onvolkomenheden rond de grenzen van items te verminderen. Het is standaard uitgeschakeld en ik raad je aan het zo te laten.
De optie "roteren" maakt rotatie van de activa voor het beste ruimtebeheer mogelijk. In veel gevallen zal dit de assets beter verpakken, wat ruimte bespaart omdat het vel kleiner wordt, maar het is misschien een extra ding om je zorgen over te maken in je engine. Meestal is het lastig om rekening te houden met geroteerde assets en deze terug te zetten naar hun oorspronkelijke status in-engine, en dit kan zelfs enkele problemen veroorzaken.
"Trimmen" is een geweldige functie die de onzichtbare pixels in uw items wegsnijdt en alleen het zichtbare behoudt. Dit scheelt behoorlijk wat ruimte en pakt alles netjes in, en maakt ook alles sneller render omdat de motor zich geen zorgen hoeft te maken over die vele onzichtbare pixels. Het is over het algemeen goed om deze optie aan te houden, maar als u de grootte van een item een specifieke waarde op basis van de transparantie wilt, dan zal dit interfereren met dat ... dus houd dat in gedachten.
"Uitsnijden" doet in principe hetzelfde als "bijsnijden", maar soms heeft dit invloed op de afmetingen van het item, dus ik raad in plaats daarvan aan om "bijsnijden" te gebruiken en "bijsnijden" uitgeschakeld te houden.
Ook onder deze opties is er een "drempel" -instelling, die bepaalt hoeveel transparante pixels de "bijsnijden" en "bijsnijden" -opties verwijderen. Als u dit getal verhoogt, worden met 'bijsnijden' en 'bijsnijden' nauwelijks zichtbare pixels verborgen - deze zijn in principe rechtstreeks gekoppeld aan de alpha van de pixel, die bepaalt of deze is verwijderd of niet.
De functie "shape outline" voegt een rood selectiekader om elk item toe, zoals weergegeven in de onderstaande afbeelding. Dit is geweldig om te hebben wanneer u wilt debuggen en precies wilt zien waar de dingen in uw motor terechtkomen.
'Auto alias' is een goede optie: als u meerdere items hebt die identiek zijn maar verschillende namen hebben, kunt u deze optie inschakelen. Het item wordt slechts één keer in het blad toegevoegd, terwijl het meerdere keren wordt geëxporteerd in het gegevensbestand, elk met de juiste naam. Dit wordt meestal gebruikt wanneer u dezelfde asset twee keer in de motor nodig hebt met verschillende namen of waarden.
En tot slot is de optie "heuristisch masker" voor items die transparantie vereisen, maar een achtergrond met een effen kleur hebben. Kortom, deze functie verwijdert de achtergrondkleur en maakt er transparante pixels van. U zou deze optie echt niet moeten gebruiken, omdat dit gewoonlijk resulteert in scherpe lelijke randen (tenzij uw activa om te beginnen zijn gepixeld). U kunt het beste zelf de transparantie afhandelen voordat u uw activa in het vel verpakt.
Nu bent u klaar met alle instellingen, u kunt bovenaan op die knop "Publiceren" drukken om uw werkblad te exporteren (of anders Ctrl-P). Om de hele set-up de volgende keer te voorkomen dat je een blad nodig hebt, klik je bovenaan op de knop "Standaardwaarden opslaan"; dit slaat de huidige instellingen als standaard op en ze zullen er zijn elke keer dat u het programma opent, wat u een a bespaart lot van tijd.
Texture Packer ondersteunt ook de integratie met uw engine via opdrachtregels. Dit betekent dat u niet eens het programma hoeft te openen om uw bladen te exporteren, waardoor het veel veel sneller gaat. Hier meer over.
En dat is het zo'n beetje, nu weet u hoe u uw eigen activablad moet opstellen en exporteren. Ga nu spelen met de instellingen en waarden om te zien wat het beste is voor uw project. Veel plezier en begin met exporteren!
Accentsconagua