Manera eficiente de dibujar contornos alrededor de sprites

Estoy usando XNA para programar un juego, y he estado experimentando con varias formas de lograr un efecto 'seleccionado' en mis sprites. El problema que tengo es que cada clic que se dibuja en el spritebatch se dibuja con más de un sprite (cada objeto puede estar compuesto por hasta 6 sprites).

Agradecería que alguien me aconsejara sobre cómo puedo lograr agregar un contorno a mis sprites de X píxeles (por lo que el ancho del contorno puede ser de varios números de píxeles enteros).

Gracias por adelantado,

• Greg

Con mucho, la forma más fácil de hacer esto (así que probablemente la mejor manera, a menos que esté realmente limitado para el rendimiento) es tener dos copias de sus sprites.

• La versión regular
• Una versión "gorda", sin color, básicamente una versión blanca de su sprite X, muchos píxeles "más gordos" que el original.

Dibuja todo tu objeto usando la versión "gorda", luego dibuja la versión normal en la parte superior.

Al hacer que la versión "gorda" sea blanca, puede usar el tinte de color incorporado de SpriteBatch para cambiar el color de selección dinámicamente.

Para generar su versión "gorda", le recomiendo escribir una extensión de Content Pipeline que pueda tomar automáticamente sus sprites originales, leer su canal alfa, crear un nuevo canal alfa muestreando el canal alfa máximo en la imagen original X-muchos píxeles alrededor de cada píxel, y ajuste RGB = (1,1,1).

Tendrá que asegurarse de que todos sus sprites tengan un borde transparente suficiente para agregar el contorno (puede verificar esto en el procesador de contenido e incluso hacer espacio si es necesario).

Si solo tiene algunos sprites, puede usar un buen editor de imágenes (GIMP, Photoshop) y hacerlo a mano: canal alfa a selección, expandir selección, selección a alfa, rellenar canales de color blanco.

Supongo que primero debes dibujar todas las piezas que se oponen a un solo sprite. Entonces creo que tendrías que escribir un sombreador para detectar los bordes del sprite y dibujar un píxel donde sea que encuentre un borde. Espero que ya haya algunos sombreadores para hacer esto, que podría usar o portar.

Dependiendo de los requisitos, lo que también podría ser efectivo es crear un esquema a pedido para el sprite. Supongo que sus sprites tienen transparencia y tienen una forma irregular en lugar de solo ser rectángulos (aunque esto funcionaría bien para eso, los rectángulos de contorno deberían ser triviales).

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

Tenga en cuenta que no necesita hacer esto en cada sorteo (aunque supongo que podría hacerlo), solo cree el nuevo sprite de contorno cuando cambie los sprites.

El enfoque más simple de la fuerza bruta es construir dos copias de cada sprite, una normal y otra resaltada. Luego simplemente cámbielos cuando esté resaltado.

Si tiene memoria de sobra, no hay necesidad de complicarse más que eso. Además, los artistas tienen control total sobre el aspecto cuando se resaltan para que pueda hacer un esquema o cualquier otra cosa que desee.

¿Qué tal para cada sprite? También tenga otro sprite que sea un contorno del sprite base. Al dibujar un objeto contorneado, dibuje los sprites base, luego haga una máscara de la representación combinada, luego dibuje los sprites de contorno excluyendo la máscara.

Algunas soluciones diferentes con diferentes compensaciones.

Más fácil: renderice el objeto usando un color plano varias veces y fluctúe la posición (desplazamiento hacia la izquierda, arriba, abajo, derecha, etc.), esto creará una versión resumida de lo que renderice encima, pero tiene costos de rendimiento y no Permitir bordes gruesos sin muchos renders adicionales. Un borde de uno o dos píxeles puede estar bien con 4x.

Más rápido: preprocese la textura y tenga una copia que ya esté bordeada, o sea solo el borde, o sea una máscara de 8 bits en escala de grises plana que puede colorear en un sombreador. Esto probablemente será rápido a costa de la memoria.

Lo mejor: mi opinión, pero generar una representación de campo de distancia firmado (SDF) de su objeto probablemente sea la mejor solución. Estas texturas pueden ser mucho más pequeñas que la textura de origen y aún capturar datos útiles. Esencialmente, cada píxel codifica qué tan lejos está del objeto utilizado para generarlo. Con estos datos en la mano, puede escribir todo tipo de efectos desde resplandores hasta contornos. El borde podría cambiar en tamaño y color, etc., y sigue siendo un sombreador relativamente barato y solo un dibujo adicional. Lo malo es el herramental y el preprocesamiento.

No estoy seguro de la eficiencia, pero la forma más fácil que puedo ver sería dibujar una versión más grande del sprite en el color que desea seleccionar primero. Dibuja el sprite encima de eso. Solo verá el borde del primer sprite, dando el efecto de selección.

EDITAR: Sin embargo, como puede ver en los comentarios, esta no es una buena idea.

Estoy de acuerdo con ampliar el sprite. De lejos, la ruta más fácil, y puede aplicarla para seleccionar CUALQUIER sprite sin tener que crear sprites adicionales especialmente para este propósito.

• es decir, spriteOutline.Scale = spriteOriginal.Scale * 0.1f; spriteOutline.Color = nuevo color (255, 0, 0, 255);

Reemplace el color del sprite original con el color del contorno (o incluso tinte si lo desea). Renderice este sprite de color plano o teñido cuatro veces con un desplazamiento de 1 píxel: en x, y = (- 1, -1), luego (+ 1, -1), luego (-1, + 1) y luego (+1 , +1). Repita para todos los sprites que componen el objeto.

Después de eso, renderiza los sprites originales en el orden correcto en la parte superior a (0,0).