Sprite Color FX

Sprite Color FX‘ is a collection of effects about color on sprites of Unity to create a wide variety of cool effects in a fast and easy way.


UNITY ASSETS STORE ($15)   DEMO

 

The actual effects are: ramp, shift, dissolvemasks, blendoutline, glass and instagram.

 

Lighting modes.

Since version 2.0,Sprite Color FX supports lights in all its effects. To activate it, you just have to select the mode you want in ‘Lighting mode’ (1). For now you have the UnLit‘ mode (no lights) and the BumpLit (bump plus specular). In the future we will be adding new lighting modes.

 

When you select theBumpLit mode, you must select a normal texture (4). To generate it from your sprites, I‘ve always used the NVidia Texture Tools. If you want something more designed for 2D sprites, I recommend you Sprite Lamp and Sprite Illuminator.

You can also set the shininess (2) and change his color (3).

 

SpriteLit

 

 

 

Sprite Color Ramp.

This effect uses the brightness of the pixel (not color), and replace it with another color from a ramp generated by a specific tool. In this tool, you can add five colors palettes and generate with one click all the data necessary to change the color of your sprites.

 

RampTool

 

If your sprite was originally like this (courtesy of opengameart.org):

knight-sprite

 

You could generate, for example, all these variants:

 

SpriteColorRampComponentPalletesMultipleEffects

 

If you only want to modify only certain areas of your sprites, the ‘Sprite Color Ramp Mask‘ component allows you to define up to three different zones.

The first thing you need to add some color palettes. To do this, open the ‘Color Ramp Tool‘ (Window > Sprite Color FX > Color Ramp Tool) tool.

 

RampToolWindow

 

 

You will see that it have some palettes. These are some examples, you can delete them ;). Now you can add the first palette by clicking on the button ‘Add palette‘ (1), put an awesome name (2) and select five amazing colors (3). Now click ‘Apply‘ (4) to generate the necessary data.

 

RampToolOnePallete

 

 

A good place to find good palletes is color.adobe.com. For this example I willl ‘Johnny Cash Tribute‘ palette.

 

JohnnyCashTributePallete

 

 

Now we need an sprite. The easiest way is to drag a texture imported as ‘Sprite‘ to ‘Scene‘ window. This automatically add the ‘SpriteRenderer‘ component. Then, add the ‘Sprite Color Ramp‘ component (or ‘Sprite Color Ramp Mask‘ if you want to use masks). And select the palette you want to use in the ‘Palette‘ field.

 

SpriteColorRampComponentJohnnyCashTribute

 

And voilà!
knight-sprite-cash

The ‘Sprite Color Ramp‘ component has:

 

SpriteColorRampComponentInfo

 

  1. Palette: Change the type of palette. To generate new palettes use the ‘Color Ramp Tool‘ and press the ‘Apply‘ button.
  2. Strength: The strength of the effect. If it is set 0, the sprite will be like the original.
  3. Gamma: Change the brightness used in the shader.
  4. UV Scroll: Move the UV coordinates.
  5. Luminance range: If a sprite does not have much range in brightness (very dark or very bright), you can adjust the range used to calculate the brightness.
  6. Invert luminance: Inverts the brightness.
  7. Reset the values.
  8. Opens this website.

 

What if you need more than a palette affects one sprite? You can use the ‘Sprite Color Ramp Mask‘ component that allow you to define up to three different zones.

 

SpriteColorRampMaskComponentInfo

 

  1. Palette 1 (Red): Palette affecting the area defined in the Red channel of the mask.
  2. Palette 2 (Green): Same in the Green channel.
  3. Palette 3 (Blue): Same in the Blue channel.
  4. Mask: The mask.

 

The alpha channel is also used to modulate the result. If 0 (black) the pixel will be like the original, if 1 (white) the result will be calculated with the shader.

 

Sprite Color Shift.

This effect displaces the color channels (RGB) to create an effect known as chromatic aberration. The displacement can be linear or radial (more effect at the edges and less in the center). Also you can add noise.

 

This is the effect of the linear mode:

 

KnightLinear

 

And this in the radial mode:

 

KnightRadial

 

Add this effect is as simple as adding the component ‘Sprite Color Shift Linear‘ or ‘Sprite Color Shift Radial‘ to a sprite. If you use the linear, has these features:

 

SpriteColorShiftLinearComponentInfo

 

  1. Red offset: The offset of the red channel. (0, 0) is top left
  2. Green offset: The offset of the green channel.
  3. Blue offset: The offset of the blue channel.
  4. Noise amount: More noise, more vibrate all channels.
  5. Noise speed: The speed of the vibration.
  6. Reset the values.
  7. Opens this website.

 

And the radial have these others:

 

SpriteColorShiftRadialComponentInfo

 

  1. Strength: The strength of the effect.
  2. Noise amount: More noise, more vibrate all channels.
  3. Noise speed: The speed of the vibration.
  4. Reset the values.
  5. Opens this website.

 

Sprite Color Dissolve.

With this effect you can make disappear, or appear, your sprites in a very beautiful ways. To do this, another texture is used to indicates the order where the pixels will disappear. This texture must be black and white. The darker areas are the first to disappear.

 

Dissolve13

 

For example, a dissolving texture like this:

 

Horizontal

 

Makes the sprite dissolved in this way:

 

KnightHorizontal

 

Sprite Color Dissolve‘ brings some textures that you can select from the ‘Dissolve type‘ field. If you want to use your own, select the type ‘Custom‘.

 

Dissolve00

 

To use this effect, all you have to do is add to a sprite the ‘Sprite Color Dissolve‘ component. It has theses features:

 

SpriteColorDissolveComponentInfo

 

  1. Amount: The strength of the effect.
  2. Shader: The type of shader used for effect. Can be normal, with a colored border or an border with a texture.
  3. Dissolve type: The type of texture used for effect. If you want to use your own texture, select ‘Custom’.
  4. Dissolve UV scale: The scale of the texture used for effect.
  5. Invert: With this you can reverse the effect.
  6. Reset the values.
  7. Open the website.

 

Sprite Color Masks.

With this effect you can define areas (three now, more in the future) of your sprites and apply effects on them.

Masks3Twitter

You can define up to three areas of a sprite using an additional texture. Each area must be defined in one color channel (RGB). For example, for our knight sprite, red, green and blue channel would be:

 

KnightChannels

 

The result is a texture like this:

 

knight-masks3

 

Notice that the areas can be overlapped.

To use this effect, all you have to do is add to a sprite the ‘Sprite Color Masks 3‘ component. It’s like that:

 

Masks3Inspector

 

  1. Strenght: the strength of the effect.
  2. Blend mode: how the colors are mixed.
  3. Strenght: the strength of the effect in that mask.
  4. Color: the color applied to that mask.
  5. Texture: thetexture applied to that mask.
  6. Mask #1: the texture where we defined the three areas.
  7. Reset: reset all values.
  8. Open the website.

 

If you decide to apply a texture to a mask, you’ll have the following options:

 

Masks3InspectorUV

 

  1. U coord scale: the scale of the u coordinate.
  2. V coord scale: the scale of the v coordinate.
  3. U coord vel: the speed applied to the u coordinate.
  4. V cood vel: the speed applied to the v coordinate.
  5. UV angle: the angle applied to the uv coordinates.

 

knightMasks3

 

 

Sprite Color Blend.

With this effect you can use more than twenty blending operations, similars to Photoshop™.

 

Blend

To use this effect, all you have to do is add to a sprite the ‘Sprite Color Blend‘ component:

 

blend0

 

  1. Strenght: the strength of the effect.
  2. Blend mode: how the colors are mixed.
  3. Reset the values.
  4. Open the website.

 

Now you can select any of the more than twenty blend modes.

 

 

 

Sprite Color Outline.

This effect can highlight any sprite in a simple and diverse ways.

OutlineWeb

To use this effect, all you have to do is add ‘Sprite Color Outline‘ component to a sprite. You can use three different modes: normal, gradient and texture.

The simplest mode is normal, that lets you use one color to highlight.

 

Outline00

 

  1. Light mode (unlit / bump).
  2. Outline mode (normal / gradient / texture).
  3. The width of the outline.
  4. The color of the outline (RGBA).

 

In gradient mode you can choose two colors for the outline and which direction the gradient is formed.

 

Outline01

 

  1. Light mode (unlit / bump).
  2. Outline mode (normal / gradient / texture).
  3. The width of the outline.
  4. The direction of the gradient (vertical / horizontal).
  5. The first color of the gradient (RGBA).
  6. The second color (RGBA).
  7. The scale of the gradient. With this you can control how wide is the gradient.
  8. The offset of the gradient, to move the gradient.

 

In texture mode you can also use a texture to create the outline.

 

Outline03

 

  1. Light mode (unlit / bump).
  2. Outline mode (normal / gradient / texture).
  3. The width of the outline.
  4. To change the color of the texture.
  5. The texture.
  6. The horizontal scale.
  7. The vertical scale.
  8. The horizontal speed.
  9. The vertical speed.
  10. The angle of the texture.

 

From version 2.2, they have added some “advanced” options.

OutlineAdvanced

  1. Alpha Threshold. Outline effect use the alpha channel of the sprite to know the contour, if your sprite has areas with transparencies, you can adjust the outline using this value.
  2. Overlap. Turn off this value if you want the outline not render on top of other sprites.
  3. Custom mask. Do you want set yourself the contour? No problem. Use the alpha channel of another texture to define the area you want.

 

Sprite Color Glass.

This effect simulates transparency and refraction of a crystal.

GlassWeb

 

To use this effect, all you have to do is add ‘Sprite Color Glass‘ component to a sprite. You can adjust:

 

GlassComponent

  1. Lighting mode. See above.
  2. Strength. The strength of the effect. From 0 (no effect) to 100 (full effect).
  3. Distortion. The distortion of the background.
  4. Refraction. The distortion of background colors.

Sprite Color Instagram.

This effect provides 15 filters of Instagram.

 

InstagramWeb

 

To use this effect, all you have to do is add ‘Sprite Color Instagram‘ component to a sprite. You can adjust:

 

InstagramInspector

  1. Lighting mode. See above.
  2. Filter. The Filter.
  3. Strength. The strength of the effect. From 0 (no effect) to 100 (full effect).
  4. Contrast. Contrast of the image.
  5. Gamma. Gamma of the image.
  6. Film contrast. Increases contrast.

 

Frequently Asked Questions

 

  • WHAT VERSION OF UNITY SHOULD I NEED?
    You need the version 5 or higher.

 

  • DOES IT NEED ANY SPECIAL HARDWARE?
    All effects in ‘Sprite Color FX‘ needs a GPU that supports Shader Model 3.0 or higher. At desktop PCs, any card compatible with DirectX 9.0c are supported (ATI Radeon HD2000 or higher, Nvidia GeForce 8/9/GTX200 or higher or Intel GM965 or higher). In mobile platforms, any device compatible with OpenGL ES 2.0 should run fine. Please, check the Apple hardware compatibility lists or search for Android Froyo 2.2(API 8) or higher. In generall, any device with a decent GPU after the 2008 should work.

 

  • INCLUDES SOURCE CODE?
    Yes, all source code is included (also shaders).

You Might Also Like

12 Comments

  • Reply Steve August 28, 2015 at 5:55 pm

    Hi,
    is it possible to use the modified sprites within the Unity UI Image object as sprite?

    Thanks

    • Reply Martin Bustos September 5, 2015 at 3:18 pm

      Hi Steve, in the next version we will try to support Unity UI.

  • Reply Anrey March 23, 2016 at 8:34 pm

    Hi,
    this package looks great! I have only one question – if I have lets say 3 sprite with the same texture, but different masks and color(‘Sprite Color Masks 3‘ component), will it increase draw calls? Thanks!

    • Reply Martin Bustos March 23, 2016 at 8:42 pm

      Hi Anrey, thanks you for your interest in our asset!

      The answer is yes, each sprite would be a different draw call.

  • Reply Awirut October 8, 2016 at 4:58 am

    Hi,
    Does these effects support Unity UI too?

    • Reply Martin Bustos October 8, 2016 at 3:51 pm

      Hi Awirut, I just respond you by mail 😉

      Regards.

  • Reply bgp October 20, 2016 at 1:53 pm

    Hi, first – nice Asset. I purchased it a while ago and played with the Sprite Color FX Options today.
    There is a (small) problem with the UI Text in the Dissolve Demo. (All the Knights in the Shelf show the same UI Text)
    And I want to ask, if it is already possible to use the effects with Unity UI “Sprites” (See STEVEs question)

    However… Thanks for this amazing asset

    • Reply Martin Bustos November 14, 2016 at 9:17 am

      Hi bgp, thank you for your interest in our asset.

      We have been asked several times to give support for UI, and it is definitely something we will do.
      As soon as we finish a new asset we’re working on right now (and fix some bugs on other assets), we’ll get to it 😉

  • Reply Jason May 15, 2017 at 3:26 pm

    Okay just bought this, works well however why only 5 colour changes per palette? I need to be able to select exact colours for different pixel shading on my assets. (upto 16+ colour changes per pallette)

    Any way you can increase this number?

    • Reply Martin Bustos May 15, 2017 at 5:03 pm

      Hi Jason, when we created this plugin we thought that 5 colors would be enough to define a palette, the same that use http://color.adobe.com and other webs. We could adapt the tool to use an arbitrary number of colors per palette.

      Can you send us an email to ‘hello @ ibuprogames. com’ and tell what you need?

      Thanks.

  • Reply Kevin Yu July 31, 2017 at 5:06 pm

    Hi, nice asset! I just want to know if this effect is possible to use in UI Image. (I mean just UI, not influencing Camera)

    • Reply Martin Bustos August 2, 2017 at 8:46 am

      Hi Kevin, that is something asked very often. We are working to include it in the next update.

    Leave a Reply