FREE US SHIPPING ON ORDERS $175+
0 Cart
Added to Cart
    You have items in your cart
    You have 1 item in your cart
      Total

      Press — indie gaming

      Coffee Crisis Chroma Integration: A Behind-the-Scenes Look

      Coffee Crisis Chroma Integration: A Behind-the-Scenes Look

      Table of Contents

      1. Introduction 3
      2. Overview of Chroma Integration in Coffee Crisis 4
      3. Installing Razer Synapse for development 11
      4. Installing UnityChroma(Native) SDKs 12
      5. Creating animations 13
      6. Testing on real/emulated hardware 18
      7. Behind the scenes look 19

      1. Introduction

                   We, Mega Cat Studios, have recently wrapped up development on Coffee Crisis, a multiplatform 2D Beat'em Up game for Sega Genesis, PC, and Xbox One! One of the features exclusive to the PC port that we implemented into Coffee Crisis was Chroma support. Chroma is a unique, proprietary, next-generation technology that Razer implements into its product line of high-end gaming equipment, which allows dynamic lighting on its equipment. Products created by Razer which implement their top-of-the line Chroma technology include their keyboards, mice, mouse pads, computer cases, and much more. Using the Chroma SDK, developers can integrate Chroma support into their games and applications, and configure the lighting on Razer's Chroma-enabled products. Such examples of Chroma integration include making the products light up as a VU meter in multimedia applications, encoding gameplay information on products, and even attempting to show images on the device by approximately color mapping colors in images to certain buttons/keys on the device. 

                  Coffee Crisis is an neo-rogue brawler that puts you in the shoes of the only baristas on Earth with enough heavy metal in their veins to fend off an alien assault. Play solo or join up with a friend to fight across eight unique locations ranging from your Coffee House HQ to the far reaches of outer space. Go up against an army of wild alien enemies, and the humans they have brainwashed with a variety of weapons, special moves, suplexes, and coffee!

                   The Smurglian race has come to Earth and they're not leaving until they steal our three most prized commodities: heavy metal, free WiFi, and our coffee. Crunch through fistfuls of alien meat as you stop their invasion, and enjoy random modifiers to the enemies and action on each playthrough. It's a totally unique cup of beat 'em up action every time you play!

       

      1. Overview of Chroma Integration in Coffee Crisis

                   As part of our feature set of Coffee Crisis, we implemented Chroma integration into our game. The game was created for PC/Xbox One using Unity3D, a closed-source but critically acclaimed video game engine created by Unity Technologies, applauded and used by Indie and professional game developers worldwide. In order to add Chroma integration into Coffee Crisis, we used the official Chroma and Chroma Native Unity3D SDKs. For our game, we utilized Chroma for showing colorific animations on the Blackwidow Chroma Keyboard in cutscenes and menus, and on encoding gameplay information. Specifically, we implemented the following: 

      • Menus
        • Main Menu
          • Animating keyboard to depict the background animation

        • Credits
          • Displaying a static color image of the final cutscene's background   

      • Cutscenes
        • Story cutscenes
          • Applying a 5-color, brown palette cycle of concentric squares on the keyboard

       

          • Death metal/mod mode intro cutscene
          • Displaying a static color image of cutscene's background

      • Game
        • Encoding various game information on the keyboard
        • Encoding a health bar on the top row FN keys
          • Keys
            • Keys F1-F12
            • Printscreen
            • Scroll Lock
            • Pause
          • Bar increases/decreases as health changes
          • Bar color tweens
            • From green (max health)
            • To red (low health)
        • Encoding the hit combo counter on the row of numeric keys
          • Number keys 0-9
          • Bar increases as hit combo increases
          • Bar becomes full and fully green after 20 hit combos
          • Bar color tweens
            • From red (low hit combo)
            • To green (high hit combo)
        • Encoding the hit combo cooldown timer on the first alphabetic row
          • Keys QWERTYUIOP
          • Bar decreases from full as cooldown timer decreases
          • Bar color tweens
            • From red (low amount of time left)
            • To green (high amount of time left)
        • Encoding the amount of time left on the invincibility and damage multiplier powerups
          • Feature only viewable on full-sized keyboards, not half sized (Blade keyboards on Razer laptops)
          • Feature can be disabled by
            • Selecting the keyboard type in options menu
              • Full-sized keyboards
              • Blade keyboard
            • This saves CPU cycles
          • Keys 0-9 on Numpad
          • Keys 1-9 color tween
            • From green (high amount of time left)
            • To red (low amount of time left)
          • Key 0 stays a particular color based on powerup type
            • Yellow for invincibility
            • Red for Damage multiplier

        • Encoding modifier information
          • Features only available in mod modes (various options set in Option Menu)
            • Modifiers toggle set on
            • Twitch integration enabled
            • Mixer integration enabled
          • Keys M1-M5
          • During voting in a Finish Them Zone
            • Keys M1-M4
              • Encodes the amount of votes for the mod category
              • Color tweens
                • From green (low amount of votes)
                • To red (high amount of votes)
                • Zero votes displays black

            • Key M5
              • Encodes the total amount of votes during the vote session
              • Color tweens
                • From green (low amount of votes)
                • To red (high amount of votes)
                • Zero votes displays black

          • After voting in a Finish Them Zone
            • Keys M1-M4
              • Encodes the amount of modifiers in play for the mod category
              • Color tweens
                • From green (low amount of mods)
                • To red (high amount of mods)
                • Zero mods displays black
              • Modifier amount ranges
                • Twitch/Mixer
                  • 0-2 mods
                • Not Twitch/Mixer, but modifiers on
                  • 0-5 mods
            • Key M5
              • Encodes the total amount of mods in play during the Finish Them Zone
              • Color tweens
                • From green (low amount of mods)
                • To red (high amount of time left)
                • Zero votes displays black 
        • Encoding pain/powerup pickup
          • Every time the player
            • Is hit
              • All other keys unused by other bullet points flash red
            • Picks up a powerup
              • All other keys unused by other bullet points flash yellow

       

      This guide will show aspiring Indie video game developers how to setup and use the Unity3D Chroma plugins for game development, as well as show an exclusive behind-the-scenes look on how we implemented the Chroma functionality in Coffee Crisis!

       

      1. Installing Razer Synapse for development

                   Before you can even use a Blackwidow Chroma keyboard for development, you must plug it into your computer for the first time. It goes without saying, but Chroma development will only work for Chroma-enabled Blackwidow keyboards. Certain Blackwidow keyboards do not include Chroma support; please check your user's manual.

      Plugging in your Chroma Blackwidow keyboard

                   Plug in your Chroma Blackwidow keyboard into your computer. Some Blackwidow keyboards have 2 USB cords; one as a piggyback cable, another for the keyboard. Make sure at a minimum to connect the USB cable labeled "Razer" and not "Port". After plugging in your Chroma Blackwidow keyboard, the keyboard's drivers should install from online, and it should light up. In order to actually control the lighting and handle it in code, you will next need to install Razer Synapse software.

      Installing Razer Synapse for development

                   Razer Synapse is a piece of software created from Razer which will allow you to configure the Chroma lighting on your Chroma-enabled devices, as well as interface with the lighting with code (after we implement code and the Unity Chroma plugins).

                   To begin, download and install Razer Synapse. At the time of this writing, the latest version is Razer Synapse 3 Beta, while the previous is Razer Synapse 2. Download and install either version (for this guide, we'll use Razer Synapse 3 Beta). After launching the installer, select which features you want installed, and where to install it. At a minimum, you will want installed Razer Synapse software and Chroma.

      1. Installing UnityChroma SDK

                   Now that we have both Razer Synapse installed and the drivers installed with the Razer Chroma Keyboard (via plugging it in), it is time to setup our Unity project to interface with Chroma!

                   In order for a Unity project to interface with Chroma devices, you will need to install the Unity3D Native and non-native plugins for Chroma SDK. You can find the native plugins here, and the non-native here. The former plugins are required for usage in compiled games (they interface with the hardware), while the latter plugins are used in the Editor only for creating Chroma animations. The latter ones should be removed for compiled builds, to reduce filesize bloat in the compiled builds. Please read the instructions from each download page on how to use the plugins and install.

      1. Creating animations

                   With the keyboard's drivers installed, Razer Synapse installed, and the Unity3D Razer plugins installed into your project, you should be good to go for developing with Chroma! Below are a few conceptual notes on how Chroma works in Unity. Full-details on how to use Chroma with Unity can be found in the tutorials on the pages where you downloaded the Unity3D Chroma plugins.

                   Chroma color with the Unity3D plugins works in either one of 2 ways: via Chroma animations, or by manually updating the colors of keys on-the-fly. The former method will be discussed in this section, while the latter in the next section. Chroma animations should not be confused with Unity's animations. The latter is used for changing properties of a GameObject's components over time via keyframes (especially sprites and image graphics), while the former is used for changing the colors of Chroma-enabled devices over time.

                   Chroma animations are simply .chroma filetypes, stored in the StreamingAssets folder within the Assets folder in the root folder of the project. Unfortunately, Chroma devices are only supported on Windows machines, so when compiling the game for other platforms (Mac and Linux), you should remove the ChromaSDK plugins, UnityNativeChromaSDK plugins, and the StreamingAssets folder with the Chroma animations, since they will bloat up the build's filesize and are unused for those platforms.

                   To create Chroma animation, go to GameObject>ChromaSDK>Create 1D/2D Animation. For Keyboard animations, we will want to use 2D Animations. The Chroma animations should be placed in your StreamingAssets folder.

       

                   In order to edit Chroma animations, right click the animation, and click ChromaSDK>Edit Chroma Animation. This will bring up a custom Chroma Editor in the Inspector.

                   In the custom editor you can select the device type ("Keyboard" for this tutorial), select key types from the keyboard, and assign colors to each key in each frame in the animation. You can also import an image to assign colors to each key (however, this feature seems to crash often). When modifying colors, the Chroma devices attached to the computer will update to display your color configuration.

                   Alternatively to individually assigning colors to each key, you can use the Chroma capture tools to map an image onto the various keys. To use these tools, Goto Windows>ChromaSDK>Open Chroma Particle Window. To learn how to use these capture windows, check out the tutorials here.

      Animation playback

                   Now that we have our animations defined for the game, we will need to add code to actually playback our animation. Any Unity3D script that utilize the native Chroma plugins will need this namespace added to the top of the script:

             #if UNITY_STANDALONE_WIN

             using ChromaSDK;

             #endif

       

      Furthermore, Chroma support is only supported in Windows platform, so make sure to add #if UNITY_STANDALONE_WIN code blocks around Chroma code. Below is a quote from the API documentation here for the most important API functions for playback:

      1. Testing on real/emulated hardware

                   Now that we have animations defined and code for playing the animations, you will want to test them on hardware. You can either test it as such on real hardware (by playing the game with the Chroma device connected) or with the Chroma Emulator. The Chroma emulator will simulate Chroma lighting for a variety of devices. At a bare minimum, you will need one real Chroma device setup first before it can be used. Usage should be straightforward.

      1. Behind the scenes look on Coffee Chroma Integration

                 A limitation of the Unity Chroma setup is that animations are static; it doesn't really allow for combing several animations to encode data. When designing the in-game Chroma animation, we wanted to encode most of the game's information on the keyboard. Luckily, we were able to exploit a few things in the Unity Chroma setup as a workaround and allow dynamic key lighting. Coffee Crisis' in-game Chroma animation is simply a dummy Keyboard animation with no keys lit. 

                  We heavily utilize the SetKeysColorAllFramesName API function in order to manually update the keys in an Update() thread; however, there is a catch to this method. In order to edit an animation during runtime, you must do the following: 

      • Close it first with CloseAnimationName
      • Manually change your keys' colors with SetKeysColorAllFramesName
      • Play dynamic animation back with PlayAnimationName

                   This sequence of code events was what allowed us to pull off dynamic animations in game. A problem with using an update() thread to update dynamic Chroma animation in such a fashion is that it may lag other people's machines. Different models of Chroma keyboards have higher fresh rates, and running such an update thread at full speed will severely lag other people's machines. As a workaround to this issue, we added a cooldown timer, to update dynamic Chroma animations every 250ms . Please see our truncated, relevant code attached, for a sample of how we setup dynamic Chroma animations to work.

      Pushing the Sega Genesis to Its Limits

      Pushing the Sega Genesis to Its Limits

      All of this information is getting pulled from the following series of videos. If you are planning on doing anything along these lines, it is a great idea to not only read this document, but also watch the videos that are being referenced. They break down how to do these effects piece by piece in order to achieve these impressive effects: https://www.youtube.com/playlist?list=PLi29TNPrdbwJLiB-VcWSSg-3iNTGJnn_L

       

      2-Color 60FPS Full Screen Animations

      https://youtu.be/c-aQvP7CUAI

       

      Doing a full screen animation, even at two colors, at 60 frames per second would obviously be way too large to fit on a Genesis game. Even with compression it would end up being larger than the max size. In order to get around that, the creators of Sonic 3D Blast took a very interesting approach to achieve the effect.

      genesis, sega, indie game design, video game dev, level design, retro gaming, gamer

      This is a single frame pulled out of the animation. The way that they were able to create the fluid motion is by making the animation itself ¼ of the perceived amount of frames and then overlaying a handful of frames on top of each other with different palette indexes. They then set palette index0 to a dark color and then the appropriate indexes for the first “sub frame” to a light color. Finally all other indexes are set to the same color as index0. Then they simply cycled the palette between frame changes to animate all of the sub frames to create the smooth animation. So while it looks like a smooth 60fps animation, it’s really a very choppy 15fps animation with a ton of palette cycling going on in it. What that means for an artist is that they have to set up each frame to have a series of frames overlaid on top of each other. Each of these subframes needs to be a unique color, as does any area where subframes overlap like in the above image.

       

      3 Dimensional Curvature

      https://youtu.be/z1mcLXEJTkA

       

      This is an interesting trick that makes use of horizontal scan line interrupts and a lot of math to create a 3 Dimensional perspective with a slight curvature to it. The background itself is composed of a tileable portion that is mirrored and then offset in a way to hide the seam where it is mirrored.

      genesis full screen animations, sega, game development, indie game design, retro gaming

      Those are the mirrored segments lined up to show that they are indeed mirrored, but when they are placed next to each other, you can see that the artist did it in a way that the mirroring would be hidden.

      genesis full screen animations, indie game dev, game design, video game development, retro gaming

      The way the perspective curve is achieved is entirely through using horizontal interrupts to remove select horizontal lines from rendering, and doing it in a curve in order to make it shrink the higher you go up the screen.

      sega genesis, level animations, how to design animations, indie gaming, retro game development, gaming

      The resulting combination will give you a full image that looks like this:

      indie game design, video game dev, full screen animations, sega genesis, retro gaming

      In motion with a vertical scroll it gives off a pretty great sense of perspective. There are about a million different ways this concept can be used as well other than just perspective tricks. Using this method you should be able to actually squish and stretch entire background layers vertically for example.

       

      Full on FMVs in a Genesis game

      https://youtu.be/IehwV2K60r8

       

      The first thing that was done to save a little bit of space to make a fully rendered video actually fit into a full featured game was the make the video slightly shorter than the native screen resolution, as well as only rendering it at 16 colors (as opposed to using the four available palettes). The video itself is played back at 15fps to further save space. Then finally they used RNC compression on the entire thing to shrink it down even further. The problem with RNC compression though is that it can’t process fast enough for a near full screen 15pfs screen animation. This is where they yet again used horizontal scan-line interrupts.

      full screen animations in video games, sega genesis, retro game consoles, indie game dev, gaming development tips, how to design levels for sega

      This is what the video looks like in the game when you are playing it.

      sega genesis video game development, indie game design, fullscreen animations, retro gaming

      This is what the image that is being rendered actually is. They took the frames of the video and sliced a bunch of horizontal lines out of it to produce an extremely shortened version of the image. You’ll also notice all of the vertical lines running through the image. RNC compression handles vertical lines a little better than dithering patterns. Those lines will be dealt with shortly though.

      In order to make the image fill the screen, they used horizontal interrupts to duplicate each line of the image, stretching it back out to fill the screen up. That is how they went from the short image above, to a near full screen image in the final product. 

      In order to change the horizontal lines into a dithering pattern they offset every other scanline by one pixel, creating the checkerboard pattern that you would expect. They went back and offset the odd scan-lines instead of the even ones and alternated between the two at a constant 60fps. Doing this took what was originally just a series of vertical lines and convincingly turned it into some extra colors. In the end the entire 12.5 second FMV only ends up weighing roughly 660kb, which is only a small portion of the available 4MB of the total ROM.