[RELEASED] Cromos - Color animations and outline for Unity 3D

Community Showcases
1

Cromos - Color animations and outline for Unity 3D is a set of components that allows users to create easily many types of color animation and outline effects.

The components in this package are recommended for both artists and programmers, since they are fully configurable from Unity 3D editor and from code.

Compatible with Unity v. 5.6.1+

DEMO 1
DEMO 2
Get on the Store

Official package page


Outline sample - The models in circles have different animated outlines


Color animation - The colors of the model are animated over time using custom colors, and mix mode on different meterial properties.


Color animation - The color animation can be played on single game objects or on the Whole hierarchy

Compatible with Unity v. 5.0.0+

DEMO 1
DEMO 2
Get on the Store

Official package page

Color Transition component
The fundamental component of the package is Color Transition. It allows users to easily create and modify color animation effects on 3D objects and UI elements (Unity ver. 4.6+ UI system is fully supported).
The Color Transition component is able to animate any material property for every shader (Unity Standard Shader is fully supported). By default, a number of common shader properties is available and selectable from editor and code, but it’s possible to handle any color property for custom shaders.
Here they are some features of the Color Transition component:

  • Color gradient: the gradient where the user can define the color and Alpha animation keyframes
  • Target: Color, Alpha, or Color and Alpha
  • Mix Mode: the animation will mix the animation colors with the original ones with different modes: Replace, Multiply, Add, AddHDR, Subtract, Invert, And, Or, Xor, If Darker, If Lighter
  • Material Property: Main Color, Specular, Emission, Reflect, Tint or any custom property you need to animate
  • Animate the children: of a game object
  • After Animation behavior: default behaviors for after-transition
  • Start and End events: to perform complex actions when a color transition starts or ends. Editable from editor and code
  • Loops: Play once, Repeat, Ping Pong
  • Duration of animation, Delayed animation, Different wrap modes
  • Many low-level parameters and methods accessible from code to obtain the maximum control

Highlighter component and Outline effects
The Highlighter component extends the Color Transition capabilities to create complex highlight and de-highlight effects on game objects. Highlight and de-highlight effects include color animations just as the Color Transition component, as well as Outline.

The component exposes a set of parameters similar to Color Transition component, but it can work in three different modes (Highlight Mode property):

  • Color: only colors will be animated during highlight and de-highlight, as the Color Transition component does. If a Color Transition component is already running on the game object, the Highlighter Mix Mode defines the color mixing policy, that takes in account the colors computed by Color Transition component
  • Outline: the highlight effect consists of drawing an outline-faded line around the game object. The color of the outline is defined by Colors gradient and can change over time. Moreover, the thickness too can vary over time. It is defined by the Outline Thickness property of the component.
  • Colors and Outline: this mode is a mix of the previous ones and the Highlighter will animate both colors and outline

Our Outline effect is extremely cheap and mobile friendly (tested on Android and Windows Phone devices).

It is possible to play many different outlines at the same time on many game objects with different animated colors and thickness.

Highlighter exposes other parameters Besides to Color Transition component ones:

  • Highlight Mode
  • Outline Thickness (when highlight mode is set to Outline or Colors and Outline)

This component too supports editable events.

User handled Outline Effect
The user can add an outline effect to any game object using the Outline Target component. Usually the Highlighter component does it for you when highlight mode is set to Outline or Colors and Outline.

The Outline Target component can be added in editor or at runtime by the user and exposes the properties Outline Color and Outline Thickness. These properties can be set and changed by the user in Editor and at runtime.

Other components in the package
The Cromos package includes other components too.

The Fullscreen Fade component allows user to create easily fullscreen fade effects. This is particularly helpful for effects to be played while changing levels of a game or for contextual fullscreen animations.

New in version 1.7.1:

New in version 1.7.1 available on the asset store!

LOD support
Shared materials
Exclusion of particle system

LOD SUPPORT
Outline system now supports LOD Groups. Simply add Outline Target or Highlighter component on the game object with LOD Group component, and our system does all the work for you: the outline will be applied automatically to the current LOD mesh.

LOD group support. In this image: LOD0: sphere, LOD1: cube, LOD2: pyramid
EXLUDE PARTICLE SYSTEM FLAG
This new flag allows to exclude or include particle system renderer in outline effect, if a particle system is present in the game object hierarchy and Affect Children is checked.


Exclude particle system flag for outline
ANIMATION OF SHARED MATERIALS
Now it is possible to execute color transition and highlighter animations on shared materials instead of instanced ones.
use of shared materials flag
Project Page
http://www.epiccube.org/cromos-color-animations-outline-unity-3d/
Asset Store
http://u3d.as/Bmr
Complete changelog version 1.7.1:
OUTLINE

  • - - ADD/FIX: now Outline Target support LOD groups: only the renderers of the current LOD are outlined*
  • - FIX: now outline works correctly with skinned mesh renderers with multiple sub-meshes*

GLOBAL

  • - - ADD: now Color Transition and Highlighter components can use shared materials instead of instanced materials*

ADD: now it’s possible to exclude particle system renderers from color transitions, highlighting and outline

2 Likes
2

Here it is a more specific tutorial

2 Likes
3

I’ll try it

4

Cromos - Color Animations and Outline version 1.6.6 available on the Asset Store with a new feature: Solid outlines!

Now you can choose the outline mode for your highlight: solid and glow.

The Outline Target and Highlighter components expose now a switch to change the outline mode.

1024Ă—483 490 KB

Release notes from the store:

  • Added solid outline mode and improved documentation

Project page HERE

1 Like
5

does this plugin support outline merging?(if two objects have the same colour outline)

1 Like
6

@ThatBulgarian
Hi, yes.
Two (or more) objects with the same outline effect will merge their outline shapes. The image above shows this concept. The horses and the bases are different game object with the same outline effect sharing their shapes. However, you can choose to keep them separated by setting a different color or thickness.
We hope to have helped you.

1 Like
7

Does this package use vertex color to animate ?

8

hi, @hdxpmc ,
thanks for your question.
Are you referring to color transition / highlighter components or outline effect?
Anyway, the answer for both cases is: “no”. :slight_smile: We don’t use vertex colors for any color animation or outline effect. Color animations are performed on material properties, while outline effect is a post effect.

9

new version submitted to the store… version 1.7.0 is coming!

10

How do you set up an object outline that can be toggled on and off by the SteamVR interaction system?

This is a very complex asset for such a simple task. I don’t even understand why the outline thickness is a spline.

11

hi @ekergraphics ,
currently the package has not been tested for SteamVR, so we cannot assure that it works perferctly. At the moment, we have only tested it on Samsung GearVR as VR Platform.

Outline thickness is represented as a curve because you can animate the outline thickness over time using Highlighter component (which let’s you to simply manage your outline animation). Another parameter you can animate over time is the outline color. For more info please watch the video

and get more info at www.epiccube.org/cromos-color-animations-outline-unity-3d/

Moreover, the package doesn’t contains only the outline system, but a collection of tools like Color Transition effects, Highlighter effect or Fullscreen Fade.

12

I must admit that no matter how I look at that tutorial video or read your documentation, I cannot get the Highlighter script to work. But I did discover that all of this is indeed unnecessary, because you provided 90% of what we need in the Outliner Target, which is simple and works*.

What we’re lacking is the ability to fade in and out that Outliner Target. Do you have any suggestions for this? (Right now, we’re toggling the bool “enabled” via SteamVR Interactable Hover Event target list.

  • It works to an extent. Unfortunately, it has graphical bugs:

894Ă—415 246 KB

897Ă—356 216 KB

(We tried the “Accurate” options as well, but we could not see a difference.)

13

hi again @ekergraphics .
It’s incredibly strange what you say about highlighter. That component is quite simple to use and it has never created any issue to our users. What’s your problem? We can help you :wink:

The Highlighter component can handle the outline transitions for you. If you want to use it, just remove OutlineTarget component and add Highlighter with Mode set to Outline or Color and Outline. With this component you can choose the animation to apply to color and thickness of your outline over time.
To enable and disable the outline effect on a game object (and its hierarchy), modify or extend the sample component HighlighterController. Instead of using OnMouseEnter and OnMouseExit, you can manage your own events.

Accurate and Fast outline produce different results on very simple geometry (like a cube, because of sharp edges and angles) but you almost cannot see any difference in complex meshes like yours. So, if you don’t really need it, simply use Fase outline effect (it is very much cheap).

14

New in version 1.7.1 available on the asset store!

  • LOD support
  • shared materials
  • exclusion of particle system

LOD SUPPORT
Outline system now supports LOD Groups. Simply add Outline Target or Highlighter component on the game object with LOD Group component, and our system does all the work for you: the outline will be applied automatically to the current LOD mesh.

LOD group support. In this image: LOD0: sphere, LOD1: cube, LOD2: pyramid

EXLUDE PARTICLE SYSTEM FLAG
This new flag allows to exclude or include particle system renderer in outline effect, if a particle system is present in the game object hierarchy and Affect Children is checked.
Exclude particle system flag for outline

ANIMATION OF SHARED MATERIALS
Now it is possible to execute color transition and highlighter animations on shared materials instead of instanced ones.
use of shared materials flag

Project Page

Asset Store

Complete changelog version 1.7.1:
OUTLINE

  • ADD/FIX: now Outline Target support LOD groups: only the renderers of the current LOD are outlined
  • FIX: now outline works correctly with skinned mesh renderers with multiple sub-meshes

GLOBAL

  • ADD: now Color Transition and Highlighter components can use shared materials instead of instanced materials

ADD: now it’s possible to exclude particle system renderers from color transitions, highlighting and outline

15

Hello, thinking in buying the asset, however I have one question, does it works properly with the lightweight render pipeline on a physical device?
I am working in a Gear VR project using that he lightweight render pipeline. I have another outline asset that look OK on the editor but no on the device.

16

Hi @VicM ,
our outline system actually uses post processing features and at the moment LWRP and HDRP are not supported yet, because these render pipelines require post processing stack 2 integration for post effects.
We have planned this upgrade for next major release of the package (early 2019)

17

¡Ok thanks for the info, I will keep and eye on it to later acquired!