Ефективний спосіб нанесення обрисів навколо спрайтів

Я використовую XNA для програмування гри і експериментую з різними способами, щоб досягти "обраного" ефекту на моїх спрайтах. Проблема, яку я маю, полягає в тому, що кожен клік, який намальований в spritebatch, малюється за допомогою більш ніж одного спрайту (кожен об'єкт може складатися з до 6 спрайтів).

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

Спасибі заздалегідь,

• Грег.

На сьогодні найпростіший спосіб зробити це (тому, мабуть, найкращий спосіб, якщо ви насправді не прив'язуєтесь до продуктивності) - це мати дві копії своїх спрайтів.

• Регулярна версія
• "Жирна", безбарвна версія - в основному біла версія вашого спрайту X-багато пікселів "жирніше", ніж оригінал.

Намалюйте весь об’єкт, використовуючи версію "жиру", а потім намалюйте звичайну версію зверху.

Зробивши «жирну» версію білою, ви можете використовувати вбудовану кольорову тону SpriteBatch, щоб змінити колір вибору динамічно.

Для створення "жирного" версону я рекомендую написати розширення контентного конвеєра, яке може автоматично приймати оригінальні спрайти, читати їх альфа-канал, створювати новий альфа-канал, відбираючи максимальний альфа-канал у вихідному зображенні X-багато пікселів навколо кожного пікселя, і встановлення RGB = (1,1,1).

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

Якщо у вас є лише кілька спрайтів, ви можете просто скористатися хорошим редактором зображень (GIMP, Photoshop) і зробити це вручну: Альфа-канал до вибору, розширення вибору, виділення до альфа, заповнення кольорових каналів білим.

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

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

when selected:
   outline = new sprite canvas of appropriate size
   for sprite in object:
      # use larger numbers for thicker outlines
      for x in (-1, 0, 1) and y in (-1, 0, 1):
         render sprite mask into canvas at x,y with desired color

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

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

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

Як щодо кожного спрайту, також є ще один спрайт, який є контуром базового спрайта. Малюючи окреслений об’єкт, намалюйте основні спрайти, потім зробіть маску комбінованого візуалізації, потім намалюйте контурні спрайти, виключаючи маску.

Кілька різних рішень з різними компромісами.

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

Швидше: попередньо обробіть текстуру та отримайте копію, яка вже є межею, або це лише рамка, або це плоска сіра 8-бітова маска, яку можна розфарбувати в шейдері. Це, швидше за все, буде швидко за рахунок пам'яті.

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

Я не впевнений у ефективності, але найпростішим способом, який я бачу, було б намалювати більшу версію спрайту в кольорі, який ви хочете обрати першим. Зверху намалюйте спрайт. Ви побачите лише край першого спрайту, даючи ефект відбору.

EDIT: Однак, як ви бачите з коментарів, це не дуже гарна ідея.

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

• тобто spriteOutline.Scale = spriteOriginal.Scale * 0.1f; spriteOutline.Color = новий колір (255, 0, 0, 255);

Замініть колір оригінального спрайту кольором контуру (або навіть відтініть його, якщо вам подобається). Візьміть цей плоский затінений або тонований спрайт чотири рази зі зміщенням в 1 піксель: при х, у = (- 1, -1), потім (+ 1, -1), потім (-1, + 1), потім (+1 , +1). Повторіть для всіх спрайтів, що складають об’єкт.

Після цього наведіть оригінальні спрайти в належному порядку зверху (0,0).