Sprite FX - Unity Asset Store - Nephasto

Una gran colección de efectos de sprites (+20) para añadir más jugo y mojo a tus juegos.


🕹️ Demo  🛒 Store

Editor

Desde el editor puedes crear efectos de ‘Sprite FX’ de dos formas distintas: creando sprites y creando materiales.

Para crear un sprite que use alguno de los efectos de ‘Sprite FX’, haz click derecho sobre la ventana ‘Hierarchy’ y selecciona algún efecto de la lista que aparecerá en ‘2D Object > Sprite FX’.

 

Esto creará un sprite vacio con un material de ‘Sprite FX’. Cuando le asignes un sprite (1) podrás ver el efecto. ‘Sprite FX’ está basado en materiales, por lo que tendrás que desplegar su material (2) para ver sus parámetros.

 

Todos los efectos cuentan con un diseño similar al ejemplo de arriba. Una primera parte (3) con los parámetros del efecto. Otra parte que puedes activar para ajustar el color (4) y otra en la que puedes ajustar valores del sprite (5).

Por último, pulsando en ‘[doc]’ (6) podrás acceder a la documentación online y pulsando sobre el botón ‘Reset’ (7) fijarás todos los parámetros en sus valores originales.

Esta es la forma más sencilla de crear sprites que usen ‘Sprite FX’, pero debes tener en cuenta que creará un nuevo material por cada sprite que crees. Si tus sprites no comparten texturas entre ellos, no hay problema. Si tus sprites comparten una misma textura, es más óptimo la segunda manera: creando materiales.

Para crear un material que use algun efecto de ‘Sprite FX’ solo tienes que hacer click derecho en la ventana ‘Project’ y seleccionar alguno de los efectos de ‘Create > Nephasto > Sprite FX’. Una vez creado el material, solo tendrás que asignarlo en los sprites que quieras que lo usen.

 

Efectos

Black and White

Desatura la imagen, pudiendo seleccionar la intensidad por cada canal de color, la cantidad de luz y la suavidad del cambio de color.

 
 

Black Hole

Crea un ‘agujero negro’ dentro del sprite. Usa el canal alpha de ‘Color’ para modificar la transparencia del efecto.

 
 

Este efecto modifica el contorno del sprite, en algunos casos puedes apreciar algunos fallos en los bordes. Para solucionarlo, asegúrate que en las opciones de importación del sprite ‘Mesh Type’ esté fijado a ‘Full Rect’. Este efecto no soporta Sprite Atlas.

Blend

Usa algunos de los 25 modos de blending de Photoshop.

 
 

Ya que URP no soporta por el momento ‘Grab Pass’, este efecto solo está disponible para el Built-in Render Pipeline.

Dissolve

Disuelve’ el sprite usando como patrón una textura de gradientes. Cambia el modo a ‘Color’ para que aparezca un borde con el color que quieras, o usa ‘Texture’ para que sea una textura.

Este efecto incorpora una numerosa lista de patrones que puedes usar, pero si quieres usar uno propio selecciona en ‘Custom’ en ‘Shape’. De este modo podrás especificar la textura que quieras usar.

 
 

Este efecto no soporta Sprite Atlas.

Dither

Aplica varios algoritmos para reducir la cantidad de colores. También pixeliza el sprite.

 
 

Duo Tone

Usa un gradiente de dos colores basado en la luminosidad del sprite. Para ajustar los rangos de luminisidad que usa, puedes pulsar el botón ‘Auto’ o ajustarlo manualmente en ‘Luminance’.

 
 

Edge

Resalta los bordes del sprite usando diferentes modos y algoritmos.

 
 

Glass

Simula un material de cristal, deformando el fondo.

 
 

Ya que URP no soporta por el momento ‘Grab Pass’, este efecto solo está disponible para el Built-in Render Pipeline.

Hologram

Simula un holograma o proyección.

 
 

Instagram

Aplica alguno de los 15 filtros más usados en Instagram.

 
 

Masks

Aplica efectos de blending, colores y texturas a zonas de un sprite definidas por una máscara. La máscara es una textura en la que puedes definir hasta 3 zonas, una por cada canal de color.

 
 

Este efecto no soporta Sprite Atlas.

Negative

Cambiar cada color por su opuesto. Puedes definir como le afecta a cada canal de color.

 
 

Outline

Crea un borde alrededor del contorno del sprite.

 
 

Pinch

Pinza el sprite en una zona determinada.

 
 

Este efecto modifica el contorno del sprite, en algunos casos puedes apreciar algunos fallos en los bordes. Para solucionarlo, asegúrate que en las opciones de importación del sprite ‘Mesh Type’ esté fijado a ‘Full Rect’.

Ramp

Sustituye los colores del sprite por un gradiente de 5 colores basados en la luminancia. Para ajustar los rangos de luminosidad que usa, puedes pulsar el botón ‘Auto’ o ajustarlo manualmente en ‘Luminance’.

 
 

Para encontrar fácilmente un gradiente, pulsa en ‘search’ (1), para abrir la herramienta de búsqueda de gradientes (requiere conexión a internet), o pulsa en ‘random’ (2) para obtener una al azar.

 

Pulsando en ‘sort’ (3) se ordenarán los colores del gradiente del más oscuro (en ‘Color 1') al más brillante (en ‘Color 5'). También puedes hacer ‘copy’ ‘paste’ (4) entre sprites con el efecto ‘Ramp’.

Retro

Emula antiguos dispositivos como: Gameboy, Commodore 64, ZX Spectrum, etc.

 
 

RGB Glitch

Simula un fallo en los canales de color RGB.

 
 

Este efecto modifica el contorno del sprite, en algunos casos puedes apreciar algunos fallos en los bordes. Para solucionarlo, asegúrate que en las opciones de importación del sprite ‘Mesh Type’ esté fijado a ‘Full Rect’.

Shake

Sacude el sprite.

 
 

Este efecto modifica el contorno del sprite, en algunos casos puedes apreciar algunos fallos en los bordes. Para solucionarlo, asegúrate que en las opciones de importación del sprite ‘Mesh Type’ esté fijado a ‘Full Rect’.

Shift

Desplaza los canales de color RGB de forma lineal o radial. Activa ‘Noise’ para añadir ruido al desplazamiento.

 
 

Este efecto modifica el contorno del sprite, en algunos casos puedes apreciar algunos fallos en los bordes. Para solucionarlo, asegúrate que en las opciones de importación del sprite ‘Mesh Type’ esté fijado a ‘Full Rect’.

Swirl

Retuerce una zona determinada del sprite.

 
 

Este efecto modifica el contorno del sprite, en algunos casos puedes apreciar algunos fallos en los bordes. Para solucionarlo, asegúrate que en las opciones de importación del sprite ‘Mesh Type’ esté fijado a ‘Full Rect’. Este efecto no soporta Sprite Atlas.

Tremor

Provoca temblores en el sprite.

 
 

Este efecto modifica el contorno del sprite, en algunos casos puedes apreciar algunos fallos en los bordes. Para solucionarlo, asegúrate que en las opciones de importación del sprite ‘Mesh Type’ esté fijado a ‘Full Rect’.

Trio Tone

Usa un gradiente de tres colores basado en la luminosidad del sprite. Para ajustar los rangos de luminosidad que usa, puedes pulsar el botón ‘Auto’ o ajustarlo manualmente en ‘Luminance’.

 
 

Código

Todo el código está dentro del namespaceNephasto.SpriteFXAsset’. Lo primero que debes hacer es importar el namespace:

1
 using Nephasto.SpriteFXAsset;

 

Puedes crear sprites que usen los efectos de ‘Sprite FX’ de la siguiente manera (en este ejemplo ‘Retro'):

1
 GameObject gameObject = Retro.CreateSprite();

 

Recuerda que cada sprite tendrá un nuevo material. Si quieres que varios sprites usen un mismo material con un efecto, puedes crearlo así y luego asignárselo a los sprites que quieras:

1
 Material material = Retro.CreateMaterial();

 

Cada efecto tiene esas dos funciones (CreateSprite() y CreateMaterial()) para crear sus sprites y materiales propios. Puedes encontrarlos todos en la carpeta ‘Nephasto/SpriteFX/Runtime/FX’.

Siguiendo con el ejemplo anterior, si quisieras modificar o consultar algún parámetro del efecto ‘Retro’, puedes hacerlo así:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
 SpriteRenderer sprite = gameObject.GetComponent<SpriteRenderer>();

 // Cambia el modo de emulación del sprite.
 Retro.Mode.Set(sprite, Retro.Emulations.Gameboy);
 
 // Consultar la pixelación.
 int pixelation = Retro.Pixelation.Get(sprite);

 // También puedes hacerlo con el material.
 Retro.Mode.Set(material, Retro.Emulations.Gameboy);
 float luminance = Retro.Luminance.Get(material);

 

Además, todos los efectos tienen algunos parámetros comunes que puedes acceder mediante la clase ‘SpriteFX’ que puedes encontrar en ‘Nephasto/SpriteFX/Runtime’. Por ejemplo, vamos a activar ‘ColorAdjust’ si está desactivado y modificar algunos de sus parámetros:

1
2
3
4
5
6
7
  if (SpriteFX.ColorAdjust.Get(sprite) == false)
  {
    SpriteFX.ColorAdjust.Set(sprite, true);

    SpriteFX.Gamma.Set(sprite, 1.2f);
    SpriteFX.Hue.Set(sprite, 0.25f);
  }

 

Todas las variables de los effectos del tipo IntVariable, FloatVariable, ColorVariable y VectorVariable les puedes fijar un valor y especificar cuanto tiempo (en segundos) quieres que dure la transición del valor actual al que le has fijado. Por ejemplo, si quieres pasar a una pixelación de 8 en 2 segundos:

1
  Retro.Pixelation.Set(sprite, 8, 2.0f);

 

Consulta los comentarios de las clases para más información.

Cualquier pregunta o sugerencia que tengas estaré encantado de responderla en

hello@nephasto.com