Въведение
Спрайт листовете съществуват, за да може играта да рисува много кадри от една текстура. От време на време се налага да се направи обратното: искате да прерисувате един кадър, да извадите стара графика от доставена игра или да възстановите лист, за който никой не е запазил изходните файлове.
Ръчното изрязване на кадри в редактор на изображения работи за три спрайта и е ужасно за триста. Разархиваторът на спрайт листове го прави в раздел на браузъра: насочете го към файла с данни, ако имате такъв, или го оставете сам да намери спрайтовете.
Ето как да изберете правилния начин за разрязване на листа, какво да направите, когато нямате файл с данни и как да проверите дали кадрите се възпроизвеждат правилно, преди да ги изтеглите.
Четири начина за нарязване на лист
Листовете са изградени по различни начини, така че няма един-единствен правилен начин за изрязването им. Лист с равномерно разположени плочки от стара игра се нуждае от мрежа. Плътно опакован атлас с изрязани кадри се нуждае от файл с данни, защото без него няма начин да се знае къде свършва един кадър и къде започва следващият.
Разпаковачът ви предлага четири режима. Той избира един вместо вас въз основа на това, което добавяте, и можете да превключвате по всяко време. Изображението и всеки файл с данни се четат във вашия браузър; нищо не се качва.
- Автоматичен: намира всеки спрайт, като търси островчета от непрозрачни пиксели. Подходящ за свободни листове с пространство между спрайтовете.
- Конфигурация: чете файла с данни на листа (JSON, plist, XML, .atlas и други) и изрязва всеки кадър точно там, където е указано, с името му.
- Мрежа: изрязва листа на равни клетки. Вие задавате размера на клетката, отместването и разстоянието.
- Ръчно: чертайте сами квадратчета на листа, за нечетните листове никой от горните не обработва.
Разделяне на лист стъпка по стъпка
Започнете с изображението на листа: PNG, JPG, WebP, GIF или BMP. Ако имате файла с данни, който е дошъл с него, например JSON или plist, експортиран от TexturePacker, пуснете го едновременно. Разпаковачът разпознава формата и превключва в режим Config (Конфигурация). Изрязаните кадри се възстановяват в оригиналния си размер, а завъртените кадри се връщат изправени, така че да се подравнят по начина, по който са били преди пакетирането.
Няма файл с данни? Опитайте първо Auto (Автоматично). Ако спрайтовете се докосват или са върху плътен фон, превключете на Grid (Мрежа) и въведете размера на клетката. Проверете контурите, нарисувани върху листа, щракнете върху кадър, за да го разгледате отблизо, след което го изтеглете.
- Пуснете изображението на листа, както и файла с данни, ако го имате.
- Проверете избрания режим (Автоматичен, Конфигурация, Мрежа или Ръчен) и го променете, ако е необходимо.
- Прегледайте контурите на листа и поправете всичко, което не е наред.
- Изтеглете кадрите като ZIP или като отделни файлове, ако ви трябват само няколко.
Възпроизведете кадрите, преди да ги изтеглите
Изваждането на кадрите е половината работа. Другата половина е да се уверите, че те все още се анимират правилно. Включете предварителния преглед на анимацията и разархиваторът ще възпроизведе кадрите подред, така че да можете да видите как се движи цялата последователност.
Променяйте честотата на кадрите, докато изглежда както в играта. Липсващ кадър се показва като закъснение, а кадър, отрязан с няколко пиксела, се показва като трептене. И двете са по-лесни за забелязване тук, отколкото след като сте импортирали всичко в енджин.
- Възпроизвежда извлечените кадри като цикъл.
- Честота на кадрите, която можете да промените (12 кадъра в секунда по подразбиране).
- Закъсненията и трептенето показват липсващи или неправилно подравнени кадри.
Какъв файл с данни имате?
Файлът с данни е просто списък с имена на кадри и правоъгълници, но всеки енджин го записва малко по-различно. Ако работите с лист, направен от някой друг, познаването на вида, който имате, прави всички предупреждения по-лесни за разбиране.
Разпаковачът чете JSON както в хеш, така и в масивни оформления (Phaser, PixiJS и генеричния експорт на TexturePacker), plist файлове от Cocos2d, XML от Starling и Sparrow, спрайт листове CSS, текстови файлове .atlas от Spine и libGDX и метаданни за спрайт YAML от Unity. Многостраничните атласи също работят, стига да добавите изображение на всяка страница.
Какво обикновено следва
След като кадрите са готови, обикновено правите нещо с тях. Ако са по-тежки, отколкото е необходимо, пуснете ги през Image Compressor. Ако искате да бъдат на нов, по-подреден лист, заредете ги в Texture Packer и ги преопаковайте. И ако сте направили разрез с Auto или Grid и искате файл с данни за резултата, разархиваторът може да експортира само метаданните вместо изображенията.
Всички те се изпълняват в браузъра, така че можете да преминете от стар лист към нов, без изображението да напуска компютъра ви.
Написано от
Ankit Kumar
Старши софтуерен инженер и основател в ToolBuddy
Инженерни помощни програми за първи браузър с нулеви изисквания за качване, използвайки технологиите WebAssembly, Web Audio и Canvas.