Як можна обробляти спрайтові листи з неоднорідними розмірами спрайта?


14

Як я можу отримати обмежувальні прямокутники для кожного спрайту (тобто сині поля на наступному зображенні / я намалював лише кілька прикладів) для спрайта з нерівномірними розмірами спрайту ?

Що я хотів би визначити: offset_x, offset_y, width, height

введіть тут опис зображення

Поки що я використовував лише спрайти, на яких усі спрайти мають однакові розміри. У цьому випадку потрібно просто вказати зміщення x- та y-z, щоб отримати конкретний спрайт. Однак для спрайцевих таблиць неоднакових розмірів це не працює.

EDIT: Прочитавши коментарі та відповіді, я переформулював своє запитання, щоб зробити його більш включеним wrt. власне процес використання спрайта в грі. Раніше питання містило моменти, чому люди виготовляють спрайтові нерівномірних розмірів і як я можу з цим боротися.


1
Мені здається, всі вони мають однакові розміри, простір, який не заповнюється кольором, - це лише пікселі з альфа-нулем.
Дерек

Відповіді:


8

Більшість аркушів спрайтів неідентичних розмірів зазвичай мають якісь метадані, де знаходиться якір спрайта. Є багато інструментів, які роблять такі речі, як викреслювати повні альфа-пікселі та надають потрібні вам дані, щоб ці дані не створювалися вручну.

Якщо у вас немає цих метаданих, вам доведеться їх самостійно створити. Найточніший спосіб - це той, про який ви сказали у своєму запитанні, а це зробити це вручну. Це може зайняти деякий час, але це, мабуть, швидше, ніж створення нових спрайтів.


Це - хоча підходи, засновані на автоматичному виявленні, мають своє використання, на практиці вони вибагливі та схильні до помилок. Ви вже необхідні метадані про походження спрайту (спрайт роблять мають походження, правда?), Так що додаткові дані навряд чи занадто багато навантаження. Виконавець завжди повинен краще, ніж ваш додаток, знати, який розмір окремих спрайтів.
Стівен Стадницький

+1. Постачання метаданих із спрайтами гарантовано вирішить їх добросовісно .
Bartek Banachewicz

5

Ви можете виконати аналіз зображення, щоб знайти обмежуючі прямокутники кожного спрайту, сортувати ці обмежуючі прямокутники (можливо, збільшивши мінімум X, тоді Y), і ви матимете набір обмежуючих областей, які відповідають рамкам аркуша спрайту.

Оскільки цей процес може бути досить дорогим, ви, ймовірно, захочете це зробити в автономному режимі, наприклад, як частина процесу збирання для вашої гри. Потім ви можете серіалізувати інформацію обмежувальної області у файл, який ви зберігаєте, з відповідним зображенням аркуша спрайту. Під час виконання ви завантажуєте і зображення, і файл визначення межі, і у вас є інформація, необхідна для доступу до кожного спрайту.

Це простіше сказати, ніж зробити. По суті, ви хочете зайнятись виявленням функцій, а саме виявленням крапок, які є проблемами машинного зору. Ви також можете поріг зображення (до чорно-білого) і використовувати техніку виявлення ребер . Відповідна математика, що стоїть за цими методами, пояснюється набагато краще на цих посиланнях, ніж я міг, і у випадку, коли ви не хочете самостійно реалізовувати цю математику, є кілька бібліотек, які можуть вам допомогти. Наступний набір посилань видався мені найбільш перспективним:


1
+1. Я погоджуюся, що для знаходження правильних меж спрайту знадобиться певна навичка комп'ютерного сприйняття / маніпулювання зображенням. Іноді це може бути навіть неможливо, наприклад, якщо ви подивитеся на анімацію черепах до снарядів. Буде важко визначити правильне положення для цього відносно інших кадрів анімації. А що стосується причини : це, швидше за все, через оптимальне використання текстурного простору. І зазвичай файл з координатами повинен надаватися з такою таблицею, але якщо ви просто захоплюєте його з пошуку зображень Google, ця інформація може бракувати.
bummzack

Ви піднімаєте хорошу думку: моя відповідь не стосується питання спрайта спрайту; це просто призвело б до пошуку облягаючих прямокутників, а для аркуша з неоднорідними спрайтами знання походження кожного кадру є досить важливим. Це буде важко зробити автоматично, якщо ви не зробили певні (ймовірно, конкретні домени) припущення, наприклад, що походження завжди було б (ширина / 2, максимум Y) чи щось таке.

4

Я створив власний інструмент для такого нерівномірного спрайстету. Це дозволяє редагувати компенсації та ін. Ось скріншот, щоб дати вам уявлення:

введіть тут опис зображення


Це виглядає так, як ви створюєте рівномірний спрайтовий лист, що містить лише одну анімацію з неоднорідної? Або я неправильно трактую це?
Бен

ні, я відкриваю нерівномірний спрайтовий лист і малюю прямокутник навколо спрайтів (який автоматично зменшується до потрібного розміру). Одного разу я створив анімацію, повторивши, що я можу відтворювати кожну анімацію та коригувати зміщення відповідно до моїх потреб.
Анонімна

Схоже, дуже акуратний інструмент, який ви зробили там. Ви можете поділитися інструментом?
eckyputrady

@eckyputrady, мені шкода, але це далеко не повне, але я рекомендую інший інструмент (який в основному мене надихнув). Ви можете знайти його тут: colourclash.com/sprite_buddy/sprite_buddy.html
Anonymousmouse

0

Ознайомтеся з textpacker

http://www.texturepacker.com/

Він виводить такий файл (залежно від налаштованих параметрів)

    {
    "filename": "image_front_1",
    "frame": {"x":1,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":2,"w":36,"h":40},
    "sourceSize": {"w":36,"h":40}
},
{
    "filename": "image_front_2.png",
    "frame": {"x":36,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":36,"h":42},
    "sourceSize": {"w":36,"h":42}
},
{
    "filename": "image_front_3.png",
    "frame": {"x":71,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":34,"h":52},
    "sourceSize": {"w":36,"h":42}
},
{
    "filename": "image_front_4.png",
    "frame": {"x":106,"y":160,"w":34,"h":52},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":34,"h":52},
    "sourceSize": {"w":36,"h":42}
}

Використовуючи ці дані, ви можете легко схопити окремі прямокутники з зображення.


Це не питання, про яку технологію використовувати питання. На мою думку, просто відповісти за допомогою посилання на інструмент та приклад його результату.
MichaelHouse

-1

spritebuddy.com чудово працював для мене. Не вдалося знайти жодної допомоги на самому сайті, але ця публікація в групах Google пояснює це дуже добре. Він автоматично відгадує межі для ваших спрайтів, дозволяє налаштувати їх, а також дозволяє впорядкувати їх у анімаційних послідовностях. Потім він випиляє файл метаданих для всього цього в JSON або XML. Тоді все, що вам потрібно зробити, - проаналізувати цей файл даних у вашій грі, щоб отримати правильні обмежуючі прямокутники.


1
Це не питання, про яку технологію використовувати питання. Далі цей інструмент було запропоновано в одному з коментарів.
MichaelHouse

Я оновив свою відповідь, але не погоджуюся, що вона не відповідає на питання ОП: "Я хотів би визначити: offset_x, offset_y, ширина, висота." Незалежно від того, чи має це статися під час гри (що було б дуже неефективно) або раніше, не уточнюється. Щодо "EDIT: [...] Я перефразував своє запитання, щоб зробити його більш включним wrt. Власне процес використання spritesheet в грі", це мій процес. Я генерую відповідний файл JSON за допомогою spritebuddy, а потім розбираю його у своїй грі, щоб отримати потрібні мені дані.
CletusW

1
@CletusW: хороші відповіді пояснюють, чому цей інструмент так добре працює для вашого процесу, що він робить і як це допомагає тощо. Якщо ви посилаєтесь на свій улюблений приклад, це лише бонус, а не м'ясо відповіді.
Шон Міддлічч
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.