Sprites

Animations can be created from sprites using the [Unity Plugin: Chroma Capture Tool]. In this case, a fish sprite was added to a plane in front of the capture camera. While capturing the sprite was translated and rotated to create a fish-like behaviour. Sprites with high contrast like this clown fish are going to be more recognizable on the physical hardware.

Trails

Animations can be created from trail renderers using the [Unity Plugin: Chroma Capture Tool]. When trails use textures with grayscale gradients the animation can be used as a template and later changed to any color. With the move tool trails can be puppeted across the screen to create a trail across the keyboard. Individual trails can be used for effects like weapon fire. Multiple trails can be moved to create effects like claws.

RGB Trails

The grayscale trail can be colorized at runtime using multiply RGB with min/max threshold.

Particles

Animations can be created from particle systems using the [Unity Plugin: Chroma Capture Tool].

Blue Particles

The grayscale particles can be colorized at runtime using multiply RGB.

Fade Start

The method 'fadeStartFrames' will fade in the start of an animation to black given the number of frames. The number of frames is relative from the first frame of the animation.


ChromaAnimation.fadeStartFrames(layerName, numberOfFrames);

Fade End

The method 'fadeEndFrames' will fade out the end of an animation to black given the number of frames. The number of frames is relative from the last frame of the animation.


ChromaAnimation.fadeEndFrames(layerName, numberOfFrames);

Blink

The methods 'fadeStartFrames' and 'fadeEndFrames' can be used to blink an animation layer.

Intensity

The method 'multiplyIntensity' multiplies layer RGB values by a floating point number which can also be used to fade parts of an animation.


ChromaAnimation.multiplyIntensity(animationName, frameId, intensity);

Original Layer - Clouds

Clouds 25%

The method 'multiplyIntensity' can the lower the intensity of an existing layer.

Multiply layer intensity by 25%.

Original Layer - B&W

Yellow B&W

The method 'multiplyIntensityRGB' multiplies layer RGB values by the red, green, and blue (0 to 255) values to tint the color of a layer.


ChromaAnimation.multiplyIntensityRGB(animationName, frameId, red, green, blue);

Cyan B&W

The method 'multiplyIntensityAllFramesRGB' will multiply intensity for red, green, and blue on all frames of the animation.

// Tint all frames in the animation to be cyan

Color Cycling

'multiplyIntensityColor' multiplies the intensity using a color. Use 'multiplyIntensityColor' with 'lerpColor' to create color transitions.

Original Layer - Trails

Threshold RGB

The method 'fillThresholdColorsRGB' sets an RGB value for non zero colors that are below a certain threshold.


ChromaAnimation.fillThresholdColorsRGB(animationName, frameId, threshold, red, green, blue);

More Green

Turn darker colors green.

Min/Max Threshold

Change light and dark colors.

Original Layer - Arc

Copy Layer

The method 'copyNonZeroAllKeys' copies the non zero colors from one layer to another.


ChromaAnimation.copyNonZeroAllKeys(animationName, sourceAnimationName, targetAnimationName, frameId);

Remove Darker Colors

Copy a layer while matching the background color in dark areas.

Add Layer

Add a layer to the background layer.

Subtract Layer

Subtract a layer from the background layer.

Intersect Layer

Copy intersecting nonzero colors to the background layer.

Duration Override

The method 'overrideFrameDuration' sets a uniform duration for all frames in the animation. The minimum duration is 0.033 (30 frames per second).

Original Layer - Movement UL

30 FPS

Set the animation playback to 30 FPS. This is the recommended animation playback speed so that visuals playback smoothly.

Reverse Frames

Reverse the order of the animation frames.

Invert Color

Invert the animation colors.

Mirror Frames

Duplicate the animation frames and mirror.

Pause Frames

Add a pause delay to the animation.

Reduce Frames

Reducing the number of frames is another way to speed up the animation.

Duplicate Frames

Doubling the number of frames is another way to slow down the animation.

Trim Start

Trim the start of the animation. This eliminates blank frames so that the animation starts faster.

Trim End

Trim the end of the animation. This eliminates several blank frames so that the animation wraps immediately.

Duplicate First Frame

Some animations are a single frame and are used as a shape template. When the animation is used for intersecting operations, the first frame needs to be duplicated to match the animation length used in a copy/add/subtract/fade operation.

Random B&W

Random black and white colors can be used to add variability to an animation.

Random Sparse

Threshold can be used to make random keys more sparse.

Rain

Threshold can be used to make random keys more sparse and assign a color.

Idle Animation

The method 'useIdleAnimation' enables or disables the idle animation mechanism. If the flag is `true`, the idle animation will play when no other animations are playing. If the flag is `false` the idle animation is disabled.

// Enable Idle Animation
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_ChromaLink, true);
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_Headset, true);
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_Keyboard, true);
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_Keypad, true);
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_Mouse, true);
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_Mousepad, true);

// Disable Idle Animation
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_ChromaLink, false);
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_Headset, false);
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_Keyboard, false);
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_Keypad, false);
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_Mouse, false);
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_Mousepad, false);

var flag = true;
ChromaAnimation.useIdleAnimation(EChromaSDKDeviceEnum.DE_Keyboard, flag);

var idleAnimation = '../ChromaCommon/animations/BlackAndWhiteRainbow_Keyboard.chroma';

// set the idle animation
ChromaAnimation.setIdleAnimation(idleAnimation);

Reactive Keyboard

Randomly select a key and circle outward from that key over the length of frames.

Drawing a line between two keys

Randomly select two keys and draw a line from one to the other.

let maxRow = ChromaAnimation.getMaxRow(EChromaSDKDevice2DEnum.DE_Keyboard);
let maxColumn = ChromaAnimation.getMaxColumn(EChromaSDKDevice2DEnum.DE_Keyboard);

// pick first key
let pointAColumn = Math.floor(Math.random() * maxColumn) % 22;
let pointARow = Math.floor(Math.random() * maxRow) % 6;

// pick a different second key
let pointBColumn;
let pointBRow;
do {
  pointBColumn = Math.floor(Math.random() * maxColumn) % 22;
  pointBRow = Math.floor(Math.random() * maxRow) % 6;
} while (pointAColumn == pointBColumn && pointARow == pointBRow);

let color = ChromaAnimation.getRGB(0, 255, 0);

let frames = baseAnimation.Frames;
let frameIndex = 0;
let frame = frames[frameIndex];
let colors = frame.Colors;
for (let i = 0.0; i <= 1.0; i += 0.04) { // 1.0/22.0
  let r = Math.floor(ChromaAnimation.lerp(pointARow, pointBRow, i));
  let c = Math.floor(ChromaAnimation.lerp(pointAColumn, pointBColumn, i));
  if (r >= 0 && r < maxRow &&
    c >= 0 && c < maxColumn) {
    let row = colors[r];
    row[c] = color;
  }
}

Hotkeys Layer

Set hotkeys to a color on top of an animation layer.

Animated Hotkeys

Set animated hotkeys on top of another animation layer.

Health bar

Show health bar on the F-Keys.

Ammo bar

Show ammo bar on the F-Keys.

Embedded Animations

Show loading a Chroma Animation from embedded data.

Sample Description	Branch (supports ASCII paths)	Branch (supports Unicode paths)
C++ Chroma Sample App	[master]	[SUPPORT_UNICODE]
C++ Chroma Game Loop Sample	[master]	[SUPPORT_UNICODE]
C++ Chroma Game Sample	[master]	[SUPPORT_UNICODE]
C++ Chroma RGB Modding Sample	[master]	[SUPPORT_UNICODE]
C# Chroma Sample App	[master]	[SUPPORT_UNICODE]
C# Chroma Game Loop Sample	[master]	[SUPPORT_UNICODE]
C# Chroma Stream App	[master]
Visual Basic Chroma Sample App	[master]
Visual Basic Chroma Game Loop Sample	[master]
Godot/Lua Chroma Sample App	[master]
HTML5 Chroma Stream App	[master]
Java Chroma Stream App	[master]
ClickTeamFusion Chroma Stream App	[master]
UE4 Chroma Sample Apps	[master]	[SUPPORT_UNICODE]
UE5 Chroma Sample Apps	-	[SUPPORT_UNICODE]
Unity Chroma Sample Apps	[master]	[SUPPORT_UNICODE]

Chroma Design	Link	Miscellaneous
Amazing Frog	[Chroma Design: Amazing Frog]	-
Roblox	[Chroma Design: Roblox]	[Roblox Sample Chroma Mod]

Platform	Link	Screenshot
Web	[ChromaDesignConverter]
Desktop	[ChromaDesignConverter]

Chroma Design Guide