Эффективный способ рисования контуров вокруг спрайтов

Я использую XNA для программирования игры и экспериментирую с различными способами достижения «выбранного» эффекта на моих спрайтах. Проблема, с которой я сталкиваюсь, заключается в том, что каждый кликабельный, который рисуется в спрайте, рисуется с использованием более чем одного спрайта (каждый объект может состоять из до 6 спрайтов).

Я был бы признателен, если бы кто-нибудь посоветовал мне, как мне добиться добавления контура к моим спрайтам в X пикселей (поэтому ширина контура может быть различным числом целых пикселей).

Заранее спасибо,

• Грег.

Безусловно, самый простой способ сделать это (так что, вероятно, лучший способ, если вы не очень ограничены в производительности) - это иметь две копии ваших спрайтов.

• Обычная версия
• «Толстая», неокрашенная версия - в основном белая версия вашего спрайта X-много пикселей «толще», чем оригинал.

Нарисуйте весь объект, используя «толстую» версию, затем нарисуйте обычную версию поверх.

Делая «толстую» версию белой, вы можете использовать встроенную цветовую тонировку SpriteBatch для динамического изменения цвета выделения.

Чтобы сгенерировать "жирную" версию, я рекомендую написать расширение Content Pipeline. которое может автоматически принимать ваши исходные спрайты, читать их альфа-канал, создавать новый альфа-канал путем выборки максимального альфа-канала в исходном изображении 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), вероятно, будет лучшим решением. Эти текстуры могут быть намного меньше исходной текстуры и при этом сохранять полезные данные. По сути, каждый пиксель кодирует, как далеко он находится от объекта, используемого для его генерации. Имея эти данные в руках, вы можете написать все виды эффектов от свечения до контуров. Граница может измениться по размеру, цвету и т. Д., И все еще является относительно дешевым шейдером и только одним дополнительным рисунком. Недостатком является инструментальная обработка и предварительная обработка.

Я не уверен в эффективности, но самый простой способ, который я вижу, это нарисовать увеличенную версию спрайта в цвете, который вы хотите выбрать первым. Нарисуйте спрайт поверх этого. Вы увидите только край первого спрайта, что дает эффект выделения.

РЕДАКТИРОВАТЬ: Однако, как вы можете видеть из комментариев, это не очень хорошая идея.

Я согласен с расширением спрайта. Безусловно, самый простой маршрут, и вы можете применить его к выбору ЛЮБОГО спрайта без необходимости создавать дополнительные спрайты специально для этой цели.

• т.е. spriteOutline.Scale = spriteOriginal.Scale * 0.1f; spriteOutline.Color = новый цвет (255, 0, 0, 255);

Замените цвет исходного спрайта на цвет контура (или даже подкрасьте его, если хотите). Визуализируйте этот плоский или окрашенный спрайт четыре раза со смещением в 1 пиксель: при x, y = (- 1, -1), затем (+ 1, -1), затем (-1, + 1), затем (+1 +1). Повторите для всех спрайтов, которые составляют объект.

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