Best Practices

TAKE YOUR RAZER CHROMA GAME INTEGRATION TO THE NEXT LEVEL

Unleash the true potential of Razer Chroma as you create dynamic lighting effects that improve your users’ gameplay. From displaying the health pool on the side of the Razer Mamba, to highlighting crucial available cooldowns on the Razer BlackWidow Chroma, a seamlessly integrated lighting profile will add an invaluable new dimension to your users’ gaming experience. Here are some best practices to designing awesome profiles with the award-winning Razer Chroma peripherals.

KEY CONCEPT – LAYERING

Layering is key when it comes to creating effects for Razer Chroma peripherals. With a wide spectrum of Razer Chroma enabled products, you can create limitless effects that are active, responsive and interactive to revolutionize the way your users game.

Light-Render-1

Layer 1: Base layer color to ensure the keyboard is constantly lit

Light-Render-2

Layer 2: Add another layer of color to light up key bindings

Light-Render-3

Layer 3: Dynamic layer of color that react to in-game events such as health and ammo bars

LAYER 1 – BASE LAYER

This layer paints the base color across all peripherals and keys to ensure that there will always be active lighting effects. Strive to avoid situations where any product turns “dark”.

Take note that the base color should preferably be something light or unique, to avoid clashing with any additional layers that would be placed on top of it.

Color Theme

Picking a color theme can be based on these commonly used identifiers:

Light-Render-Team

Team (Blue vs Red, Counter Terrorist vs Terrorist)

Base%20Layer%20-%20Hero%20Theme%20Color.gif

Hero (Theme color of your selected character)

Dynamic Activity

Certain events can trigger changes to the base color to create a more varied effect and raise user awareness about any critical event or environmental change.

Environmental Events

Base%20Layer%20-%20Dynamic%20Activity%20on%20Events.gif

Lara Croft – Rise of the Tomb Raider – entering a cave and lighting up a glow stick

Layer%201%20-%20Flashbang%20for%20CSGO.gif

Valve’s Counterstrike: Global Offensive – getting blinded by a flash bang grenade will light the devices white and slowly fade back to normality as you gain vision

Player Alerts

Base%20Layer%20-%20Dynamic%20Activity%20on%20Events%20%28Low%20Health%20or%20Damage%29.gif

Lara Croft – Rise of the Tomb Raider – Low Health

Special Skills or Ultimates

Base%20Layer%20-%20Dynamic%20Activity%20for%20DOTA2%20Razor%20-%20v2%20Cropped.gif

DOTA2 – Razor’s “Plasma Field” Spell creates an outward ring of electricity which the keyboard will depict

LAYER 2 – ACTIVE KEYS

Creating effects for active keys will help users know which specific game bindings are available for use.

Light-Render-CSGO-active-keys

In CS:GO, the active keys are WASD for movement and 1, 2 and 3 for weapon switching

Important Keys to Guide New Players

Flashing of specific keys can be implemented to help gently prompt players to use specific keys which are available. This will be extremely useful for newer players who are still unfamiliar with the controls and mechanics of the game.

Layer%202%20-%20Tutorial%20Flashing%20R.gif

An obvious prompt to users that R should be pressed in this specific situation

Skill and Spell Cooldowns

Use popularly associated colors to indicate the readiness of a spell or a weapon, such as red for unavailable and green for ready.

Layer%202%20-%20Active%20Spells%20and%20Cooldowns.gif

‘E’ and ‘Shift’ turns blue when this particular skill is available for use, and red when it’s on cooldown

Layer%202%20-%20Active%20Spells%20and%20Cooldowns%20-%20DOTA%202.gif

After using the spells (‘W’ and ‘E’), the keys will show red and slowly fade back to green to signify its ready status

LAYER 3 – DYNAMIC INDICATORS

Make your creation more awe-inspiring as you tag effects to dynamic events. Certain keys or lighting areas can be used to represent information that is either ever-changing, or subject to change at any time, such as your dwindling ammo, health, mana, or even status effects like poison and stun.

Heath, Mana or Ammunition Indicators

Layer%203%20-%20Health%20and%20Ammo%20for%20Keyboard%20v2%20-%20Cropped.gif

F1-F4 is the ammo gauge and depletes as you fire

Layer%203%20-%20Health%20and%20Ammo%20for%20Mouse%20-%20V2.gif

The side strips of the Mamba TE represents the current level of ammunition

Layer%203%20-%20Health%20for%20Mouse%20DOTA2.gif

The left side strip represents a decreasing health pool, while the right strip represents the mana level

Timer Countdowns

You can also bring more attention and greater urgency on time-related events by displaying cooldowns on peripherals such as the keyboard, keypad, mouse, and mouse mat.

Layer%203%20-Dynamic%20Activity%20for%20Events%20-%20v2.gif

Freezetime counting down to the start of the match

Status Effects

You can also choose to display positive or negative effects by using commonly associated colors such as green for poison, and gold for power ups.

Layer%203%20-%20Status%20Effect%20DOTA2.gif

to F10 flashing gold to signal your current positive status of being invulnerable

CASE STUDY: OVERVIEW

Here are some suggested layouts for various game genres.

Multiplayer Online Battle Arena (MOBA)

Popular Games

  • DOTA 2
  • League of Legends
  • Heroes of the Storm

Layout

OVERALL_FINAL_nologos

DOTA2 with a Razer BlackWidow Chroma

6-LASTHIT-THEME-HEALTH-MANA_nologos

DOTA2 with a Razer Mamba TE and Razer Firefly

First Person Shooters (FPS)

Popular Games

  • CS:GO
  • Overwatch
  • Call of Duty

Layout

Light-Render-CSGO-active-keys

CS:GO with a Razer BlackWidow Chroma

DescriptionKeysApplication
AmmoF1 - F4 Razer Mamba TE and Firefly side stripsAmmo bar that shortens when depleting
HealthF5 - F8Health bar that decreases upon use
ArmorF9 - F12Armor bar that decreases upon being hit
Weapons and Ammo1, 2, 3, 4, 5Highlight the currently used weapon, and fades from green to red as the ammo becomes empty
Movement KeysW, A, S, DHighlight the basic movement keys
KillsM1 - M5With every kill on the round, an additional key will light up
FreezetimeNumpad areaFlashes white as the round timer counts down
FlashbangBase LayerFlashes whites and slowly fades away as the flash effect wears off
MolotovBase LayerBeing burnt by fire will turn everything crackling orange
BombBase LayerFlashes quicker as the bomb timer counts down, and turns white to inform you if you can defuse it in time