An Idea Is Born
At Mediacurrent, our company culture is really important to us. One of the ways we stay connected as a team is through weekly lunch and learn events. We explore a mix of work-related topics and share our interests outside of the office. Back in October, I did a lunch and learn about my over the top Halloween decorating that I do each year. After the talk, team members began saying I should build something interactive for our booth at DrupalCon Seattle 2019. I mentioned that I also love to build mini arcade cabinets in my spare time. From there, a Slack channel was born and people came flooding in asking how they could help. The outpouring of support from all our different departments really showcased just how good our culture is at Mediacurrent and that everyone loves to help each other out to make our work the best it can be. After leading a few meetings, it became clear we had a few different ideas we wanted to make happen in our booth this year.
Andrew Messenger, our Senior QA Analyst, came to Mediacurrent with professional experience in game design. He graciously volunteered to handle the game coding in Unity. The consensus was to build a side-scrolling arcade game in the vein of late 80’s early 90’s arcade games. So the next step was, what would our game be about? Adam Wilson, one of our project managers, stepped up to create a plotline for our game to follow. Our game would loosely follow a site from initial design all the way to deployment would be called “The Epic”. We planned for each level to be a “sprint” with three “sprints” in our game.
- Sprint 1: The design phase in which all the project questions are attacked and resolved.
- Sprint 2: The development phase where you have to knock out all the tickets to get through the level.
- Sprint 3: QA (squashing bugs) and deployment.
Once we had established the basic storyline, Andrew got to work coding up levels, player controls, enemy AI, cutscenes, menus and all the other things the game required. While Andrew handled the coding aspects, Chris Manning stepped up to help with level design and I handled character animations.
The Unity SDK used to program the game
We had quite a few Mediacurrent employees creating artwork for this project. Tobias Williams, one of our front end engineers, created all the enemy characters as well as all the wonderful cabinet artwork. The direction we took with the enemies in the game was to have them match up to things that happen during development. The level one enemy, which is a snake with a bomb coiled around his tail, is in the shape of a question mark, so you are defeating all the questions that come up during discovery. The first boss, Wordpress, is you defeating the old site.
Keyframes for Wordpress changing from train to robot
In the second level, the development sprint, the enemy is carrying tickets. The last level, QA and deployment, has bugs for enemies and scope creep, a giant octopus, for the final battle before deploying the new site. In addition to the great work from Tobias, David Barrentine, front end developer, provided us with cut scene work as well as our main title screen and Sheree Hill, our creative director, helped out with the animations for our main character.
The music was created by two Mediacurrent employees and long-time musicians, Bill Shaouy and Ryan Gibson. Different music needed to be written for the different scenes in the game, so Bill created the music for some scenes and Ryan the others. Each scene’s storyline was written before Bill and Ryan started composing the music. Like writing for any other story-driven medium, this gave them clear direction on what emotion they needed to convey with the music. The music for boss levels, for example, tended to be slower in tempo and more bass-heavy.
Another requirement was that the music needed to be loopable on the beat. That is, when the music ends, it programmatically starts at the beginning again in a continuous loop. That's simple enough for a piece of music composed "on the grid", i.e. played to a steady tempo. Bill mixed all the music using his digital audio workstation (DAW), Logic Pro X running on an iMac Pro.
The Logic Pro X User Interface
One final musical attribute that was important to convey the retro vibe was timbre. We aimed to match the same synth timbres as those of early video games. Back then, video games were equipped with usually the most primitive, bare-bones synthesizers that were capable of producing only the most basic of sound waveforms. Luckily, Logic Pro X comes equipped with several software synthesizers, including one called the ES P Poly Synthesizer, which is modeled after classic 80s synthesizers. Bill purposefully limited the sound palette to only two timbres, a basic square wave and a basic sawtooth wave, along with a drum track generated again by a retro soft synth. The result is music that evokes the old school sound and feel we were after.
The ES P software synthesizer configured to output a square wave
I built the cabinet using an X-Carve CNC machine with half-inch MDF wood. The CNC drilled all necessary holes for screws, notches for the plexiglass, holes for the buttons and joystick and then cut all the pieces out. The CNC can hold a 36” x 36” piece of MDF at a time, so to get all the necessary parts out it took three runs of the machine. In all, the CNC machining of the parts took around 4 hours to manufacture all the needed parts.
The CNC machine cutting out the arcade cabinet.
The whole thing is then assembled with small right angle brackets to connect all the pieces together. To mount the electronics, 3d printed mounts were made for all the boards and screwed into the insides of the cabinet.
The 3d printed mount for the Lattepanda Windows 10 development board that runs our game.
The machine itself is running off a Lattepanda Windows 10 development board which boasts 2GB of ram, 32gb of storage and a quad core processor running at 1.44GHz. The joystick and buttons run off a small USB encoder board that turns the arcade controls into a generic USB gamepad that we can use in Windows. The marquee is lit up using a USB 5v LED light string. The cabinet artwork was made by inkjet printing onto printable vinyl sticker stock, then covered in clear sticky vinyl to protect the artwork and make the stickers waterproof.
The mini arcade cabinet stands 20” tall x 10” wide x 11” deep
The Decoupled Build
Another side of this project was we wanted a large screen in our booth that would display real time data on what was happening in game as well as for sharing up to date marketing data. This was a good use case for building a decoupled website to handle this.
Robyn Green, one of our lead Drupal architects, built an API plugin to Unity to connect to a Firebase instance, and setup triggers to push data from the game to the Firebase instance. This records various states of the game and data attributes like high scores.
From there Bayo Fodeke, Brooklynn Moor, and Grayson Hicks built a React app based on mockups done by Justin Rent that also connects to Firebase and displays components based upon the data it's received.
One of the mockups for our decoupled React signage.
We use a computer on the display to render this React app as a web app in a full screen display. As Firebase is real-time, this allows us to change the digital display as events are happening in the game.
We also connected a Drupal build that is ping'd by the React app via REST each time a high score changes, upon which Drupal then consumes the high scores and records them as nodes. Drupal also contains configuration to allow users to specify a marketing message or event items which is also pushed to Firebase for display in the React app.
For the tokens, Ian Sholtys, one of our senior Drupal developers, used his SLA printer, a Form 2. While most conventional 3D printers extrude melted plastic, the Form 2 uses a laser to cure liquid resin. This allows for features as thin as a hair, which is essential to capture the details in the token.
The 3d printed tokens. The piece on the top of each coin gives the mold a pour spout.
To remove imperfections and ensure that the tokens are totally flat and smooth, he printed them out slightly thicker than their final size. He then designed and printed a custom sanding jig which holds tokens and allows them to be moved over a sanding surface, letting them be slowly sanded down to their final thickness of 1.75mm.
Finally, the tokens are wet-sanded down to a mirror finish with a series of sanding cloths. This helps the raised design stand out more and makes them more enjoyable to the touch. Once polished and cleaned, Ian created silicone molds of them so he could create make hundreds of duplicates in the desired material.
One of the silicone molds used for token creation
To create metal-looking tokens, he used a technique commonly known as “cold casting”. Brass powder is mixed into a 2-part liquid resin, pour it into the molds, and let it set in a chamber at 45 PSI. Once the resin has set, the molds are removed from the chamber and heated until the tokens are fully cured. The tokens can then be removed, cleaned up, and lightly buffed to give them a metallic shine.
Where can you play it?
Now that you’re excited, it’s almost game time! The Epic will be displayed at our booth #315 at DrupalCon Seattle in April. Stop by during exhibit hours to pick up a token and get in line to play! The highest scorer at the event will go home with our epic grand champion trophy and bragging rights as this year’s high scorer.
Rack up the points or rack our brains, we’ll have developers manning the game to explain how we integrated the game with Drupal and how our scoreboard is running off of firebase and React. On the scoreboard, you’ll notice live updates for when the next Mediacurrent session is, info about our afterparty, and more Mediacurrent DrupalCon goodies.
Speaking of the afterparty, join us on April 10th at the Pacific Science Center for a night of fun at our afterparty. The Epic arcade game won’t be joining us, but you can catch a glimpse of your favorite game characters at the afterparty. We’ll have karaoke, appetizers, a photo booth, tours of the science center, and more! We hope to see you there!