by Gabe Turow and Alexander Eccles

Playthrough Trailer

OVERVIEW

Take a walk inside The Devil's Dating Service!

The Devil's Dating Service is a 3-D interactive music video by Dubious Ranger, featuring Bhi Bhiman on vocals. Dropped inside of our album and personified as a dancing tree, the "player" is challenged to find eight musical tracks spread across the terrain. Each song has its own color palette, characters, and oddities to explore; keep an eye out for secret areas and giant squirrels.

Players that locate all the songs get a free copy of our album!

Screenshots

Credits

Art, design, and programming by Gabe.

Co-direction, song lyrics and melodies: Alex Eccles.

The instruments were played by Gabe, with the exception of the melodica and acoustic guitar, which were played by Alex. Bhi Bhiman sang lead vocals, and Alex sang most of the background vocals, with help from Dylan Haas and Brenden Ahern.

The music and sound effects were recorded in New York, NY and Ross, CA. Editing occurred cross-country, sometimes in realtime, using Logic and Dropbox. The album was mastered in San Mateo, CA. We used Cinema 4D and Zbrush for 3D animation and modeling; Unity for programming the game; Photoshop for texturing and coloring.

The Story of Making the Devil's Dating Service

The Devil’s Dating Service began as an album I recorded with two friends, Alexander Eccles and Bhi Bhiman. Alex wrote the material, I played and recorded the instruments, and Bhi sang lead vocals. I had been searching for a subject to make into a game - something that didn’t involve any violence and would offer the chance to do something aesthetically interesting as a follow-up to the hand-drawn game I had just finished, Atomic Avengers. 

The idea of making an entire game around a dancing tree, and his voyage through the wilderness, as a metaphor for the experience of online dating, seemed to fit the bill. I was excited, I wasn’t sure exactly where it would go, and it turned out this was a perfect setup for getting deeply engaged.

I wanted to use the game to create moods, to engage emotional topics and salient feelings - it would be a music-video-game or some type of interactive art.  Research has found that educational simulations are generally effective in increasing student motivation to learn (Ke, 2008; Papastergiou, 2009; Tuzun et al., 2009) and games that feature exploration may be especially motivating to girls (Kinzie & Joseph, 2008). 

Tour of the Game

The game begins with a start screen (featured above): the rectangle is meant to resemble a CD jewel case, on the front of which is a Paul Klee painting, with stick figure sketches from Alex that I placed into the image using Adobe Photoshop. Liz Seibert, an excellent graphic designer and my wife-to-be, wrote the text, which I scanned, then cut out and added to the image. The “Press Start” flashing message is a game opening trope. I chose to include “Press (Arrow Symbol) to Start” rather than simply “Press Start” so that the player could feel agency and become introduced to the controls from the very beginning of the game. When the player touches the up arrow, the Treeman/Treelady(however you wish to see it) appears, and the “Press Start” message disappears. The player can now move the camera, and the Treeman, in a straight line, forward or backward. The player’s ability to turn is disabled, along with the mouse-look functionality that begins once the player enters the main game.

As the player progresses down the tunnel, they see a series of messages. The messages introduce the game, who made it, and the point of the whole endeavor, which is to “Explore to find all the songs on our album.” Our intention in creating this game was to make an experience that could last from 5 minutes up to an hour so that an audience could hear our music in a new way. As the game grew into more of an artistic interactive experience, it became a complicated visualization and extended metaphor of our instrumentation, melody, and lyrical content. 

The screen in between the starting area and the main area of the gameplay functions to cover up the loading time it takes to get the first level set up (above). Several commands run at this moment that never run again: the main music tracks are loaded and the main models are rendered. That means that there is a long pause while the computer catches up. Instead of showing the player a blank screen during this pause, I inserted this comic, created by Alex on some lonely night. It is part of his “String Man” comic series, an artistic offshoot of Dubious Ranger. I thought this comic was particularly funny, and a nice way to set the tone for the game to come.

User Interface Design

The user interface design of this game relies heavily on wayfinding devices to keep it from getting frustrating. In user-testing, the main critical comments I received centered on issues around navigation: that players were not sure what the controls were, or how to orient themselves. I had included instructions for navigating game under the “i” pop-up menu in the lower right hand corner or the main game screen, but I had neglected to tell the player to look there. I fixed this by providing a series of consecutive prompts that flash every 5 seconds for the first 35 seconds of the game, taking the player slowly through the main elements of the user interface and the controls. Over four months, as kept added wayfinding devices to the game, players seemed to enjoy themselves much more. Based on informal conversations with them, I believe they were less disoriented, they felt more in control, and that in turn increased their desire/willingness to explore the game space. The game’s entire purpose is to encourage exploration, and to allow the player to walk in any direction and find something interesting. With more than one secret area that is not on the map, the players are rewarded for looking on the other side of a bluff and venturing off beyond the horizon. 

The first level begins with the following message:

You Found the Devil’s Dating Service! Opening Scene

Other feedback I received was that the users wanted to know which song was playing at any given time. I added prompts to the game so that every time the player finds a new level, it says “You Found (The Name of the Song)”. In the code for the game, I store when the player finds an area as a variable, so if they rediscover that same area again later, they will not see the prompt again, and the Songs Found counter will not update and count their find twice. 

As soon as the player has read the message, “You found the Devil’s Dating Service”, the message goes away and the instruction prompts (as described above) begin. The instructions explain the 4 key movements the player needs to master to play the game effectively: how to move forward, how to turn, how to look up, and how to climb. This first message is presented for 9 seconds, and the player can reactivate it at any time by pressing the “i” button in the lower right hand corner of the screen. 

Keeping the instructions short and clear was a challenge, but so far I have had feedback indicating that this one page is easy to understand and adopt. 

The next screen capture shows the main crossroads in the world of the Devil’s Dating Service, marked by the Sign Post, which serves as a guide for the player’s adventure to find all of the songs. The sign post is in view upon initially landing in the main game area. Each arrow points toward the song for which it is named. If the player walks in the indicated direction, they will find the song the same way a person would follow a sign pointing to a town in the distance. 

The Sign Post, Featuring the 8 Song Names on the Album and Their Bearing

To generally ease the process of wayfinding in this game, the lower left hand corner of the screen features a mini-map, which outlines the entire playing space. At the start of the game, the map is blank except for the piece of land where the player is standing. This is an example of a “system status” indicator. According to Jakob Neilson’s, 10 Usability Heuristics for User Interface Design: “The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.” As the game progresses, the map updates itself with an image of each area as it gets discovered. By the end of the game, the entire map is filled-in. Making the system status clear was also my motivation for including the counter on the bottom left, the tracking dot on the maps, and the compass in the upper right hand corner. 

Throughout the game, the player is represented by a red dot superimposed over the map: 

As they set out to explore the terrain, the player can orient themselves by watching the red dot move over the mini-map. This allows them to quickly ascertain which direction they are going headed. To make this process easier, clicking on the mini-map brings up a full-sized map with a larger tracking dot, allowing for real-time updated movement while the map is enlarged. 

The mini-map itself provides feedback to the player that it has been clicked by turning red when the player hovers the cursor over the map icon, and turns yellow briefly on mouse-down. Clicking the mini-map a second time will close the big map and leave the mini-map where it is.

These maps were created by taking an overhead screenshot of the entire playing area, removing the playing area from its background, tracing around each section of the playing area with a virtual black marker, and cutting each section out as it was traced. Tracing each section allowed me to highlight one section at a time, and then cut that section out by simply copying and pasting it into a new layer. Once I had all of the layers I added them to individual game objects as Graphical User Interface (GUI) Textures.

The Compass

Another way the player can derive her orientation from the map is to use the colored compass in the upper right hand corner of the screen. For example, if she were to look to the mini-map and notice that she had not yet explored territory in top half of the playing area, she could head in that direction by following the red arrow displayed on compass rose to the left of the map. Once she understood that she had to follow the red arrow she could look to the upper right hand corner of the screen, and simply turn around until the compass in the top right had the red arrow pointing straight ahead, away from the Treeman/Treelady. 

The Compass rotates dynamically as the character moves, with the red arrow always pointing north. This feature was fairly complicated to implement: 

    I.    I had to make a blank game object into a target for the arrow to point at.

    II.    I placed the game object far in the distance to the north of the game space.

    III.    I added the compass to the scene as a 3-D object and positioned it in front of the camera. 

    IV.    I attached the compass to the camera so no matter where the camera turns, the compass will stay in the same screen position. If the character turns, the compass will rotate onscreen, turning relative to the camera, but remaining stationary relative to the world space of the game. This allows the compass to stay pointed in the correct direction relative to the map as the player walks around. I created the compass model in Cinema4D, added the colors, and then added a script to the object to achieve the functionality I just described. 

The Songs Found counter in the lower left of the screen presents the user with an updated tally of how many songs they have found up to that point in the game. In the lower right hand corner of the screen the player finds the information icon, the “i” in a circle, and the Home button, shaped like a house.

The Information and Home Buttons

The Home button can be pressed anytime, and returns the user to the main area (the Devil’s Dating Service song), facing the Sign Post. This functions like an exit or reset function for the player: if they get lost or bored, they can simply hit the button, return to a familiar place, and continue on their adventure, without having to figure out how to navigate back to where they came from.  This was also intended to keep the game from getting frustrating and encourage the player to visit all of the areas in the game before quitting.  When the user hovers over the Home button, it changes color, indicating that it is clickable. When clicked, it changes color again, giving the user feedback that they have successfully clicked. 

The “i” button works similarly, in terms of its button-related animations. When this button is clicked, it simply makes the information tabs visible. This view shows what it looks like when that button has been pressed:

Information Menu Prompts

The player simply presses the button a second time to make the prompts disappear.

Loading Screen

I made the loading screen in Photoshop, placed it onto a plane, and attached it to the camera. Each time it is triggered, lights from the scene shine on it, creating an large variety of colored washes depending on the character’s position within the scene. Presenting this screen prevents the player fromseeing the game freeze in an awkward transition animation as it loads the next level. To make things more seamless, every time there is a moment where the game needs to load, the visibility of this load panel is triggered. There is a special collider attached to the Treeman so that when he gets near any transition area he will trigger the load screen before the load actually begins. The game effectively pauses for a second with that screen displayed but because the music keeps playing through the load (because unlike the visuals, the music is loaded at the start of the game and runs continuously throughout), it makes it feel as if the game has kept going, even though technically it has temporarily stopped cold. 

Light Bursts Mark Entrances and Exits in The Game

To establish a consistent visual language for the player to decode as they progress through the game, entrances and exists are all consistently marked with light bursts and glowing green glass bridges. These symbols are supposed to clue the player in that something interesting is close by. 

Glowing, Undulating Glass Bridges Mark the Entrances to Each Song

In order to mark teleport areas, Alex and I settled on the “Disco Box” pictured below. Disco Boxes are made out of reflective, stained-glass material and they spin in place. They are clearly visible from far away, and based on feedback, they seem to effectively communicate to the player “this is special”. 

“Disco Boxes”, The Stained-Glass Coated Spinning Boxes Throughout the Game, Mark Portal Entrances and Exits

Disco Boxes with Beams of Light Shooting Out in Stand Your Ground

A variety of sizes of bears were added to the game to make it seem like the Treeman had some company. The bears are not intelligent, and are driven by a simple command to walk forward until they hit something, turn on their Y axis until they can keep moving forward, and then continue.  It results in a shockingly charming effect of bears seemingly wandering around the landscape in a highly random pattern, due to the unpredictability of their physics collisions with the environment, which are never exactly the same on repeat simulations.

Animated Bears

The Treeman makes flowers grow wherever he walks. Even in the water, flowers will sprout up to greet him. 

This is more feedback for the player: the flowers essentially guide the player between song areas. As long as the player sticks to the areas where flowers grow, they will always be in an interesting part of the world. 

Scene from Dancin’

Curly-cue Flower Entrance to A Good Life

Blanket of Coarse Purple Flowers in Home For Good

Fireball, Wartorn Lover

Wartorn Lover features both a modeled head of my friend Bhi Bhiman and fire particle effects. The head was sculpted from a sphere in zBrush. A photo of Bhiman’s face was projected onto the surface of the head, carving his face into the surface. The fire particle effects consist of two to three hundred photos of overlapping firey sparks, with transparent borders. When enough sparks overlap, it looks like a sun, or fire ball. I created this effect from scratch. 

A Day and the Wife, the 3rd track on our album, let me explore architectural structures, something I avoided in the first several levels of the game. The song is about an urban man, with an urban plan, and so I needed more of a city feel. As I built up the level, it got wackier and wackier, but I think it still fit the feeling of the song, which is primarily about being at your wit is end, post-divorce, post-world travels, living in a bad part of San Francisco.

I was able to experiment with transparency layers, and a bright green palate. In the process, I discovered several new textural effects that evoke a digital city in purgatory. 

Partway through this level, the player potentially finds a detour amusement, called Archimedes’ Used Goods:

Archimedes’ Used Goods

Archimedes’ Used Goods consists of two tables of objects of various kinds, all of which make funny sounds when the player bumps into them. All objects can be moved and knocked over: they grunt, protest, ring, beep and respond with what I hope is a variety of pleasing and surprising noises. To end this level the player must climb a bridge and brave the large purple geometrical storm brewing near the peak of the final summit:

Purple Storm

Dancin’ features a reunion with the tree people of the Devil’s Dating Service. Treeman is so happy to find trees like him that he leaves his troubles behind, for one song:  

Roses In Dancin’

Once inside Dancin, if the player explores beyond the mainland, she will find a peaceful glade with advanced water simulation effects:

A Good Life is set up to feel like a cave covered in crystals. It is supposed to be calm, echoey, and quiet. In the cave, the Treeman can interact with a variety of boulders; each boulder has a different udu sound attached, courtesy of several udus that I built and recorded while at Teachers College. 

The bigger the boulder, the lower the udu sound effect that is attached. The ceiling of the cave features animated textures, a technology I only became familiar with towards the end of creating this game. The ceiling has a specular parallax shader on it. I animated the height and shininess values to modulate between 0 and 1, causing the objects to which this shader is applied to appear to be breathing, or expanding and contracting. 

The other secret area in the game is known as the Bear and Squirrel Chorus of Norway. It is essentially a synthesizer that the Treeman can walk around inside. 

The Bear and Squirrel Chorus of Norway

I took several vocal clips from Alex, changed their pitch until they created a full major scale, and then assigned each pitch to a different giant squirrel. By running around in a circle it is possible to play a rudimentary tune. By taking advantage of the clusters of small squirrels on the ground, it is possible to touch more than one squirrel at once, offering the possibility of playing several different chords with ease. The bears on stage have similarly satisfying sound effects attached. 

The game ends when the player has found all 8 songs. Upon finding the 8th song, whichever song that is, the player will see a new prompt explaining that they have found all of the songs, and now they have to find the giant squirrel to claim their prize. After seeking out the giant squirrel, when the Treeman approaches the squirrel, he triggers a collider that causes him to float up into the air. After floating high above the world, the Treeman collides with an invisible plane, and is sent to the final overhead, fully-animated view of the world(see below). 

Ending Scene

Upon finding the ending scene, the player is perched in one place, able to use the mouse to rotate the view in order to look at the entire world at once from up high. Clicking on the word “here” in the final prompt triggers a free download of our full album.  Hopefully the player will continue listening to the music for years to come, and play again when they need to take a break from reality for a while. 

Sound Effects

In order to learn how to program sounds into a game in general, I explored a variety of sound effect implementation techniques in the The Devil’s Dating Service, mostly based on collision-based triggering of short sounds. I played around with the layout of different items and their scale, to facilitate easy triggering of sound effects. This is especially evident in the layout of squirrels and bears in the secret level “The Bear and Squirrel Chorus of Norway” and in the table of enchanted items in “Archimedes’ Used Goods” on the second to top platform in A Day and the Wife. I have included a sample of the sound effects I used below, all of which were recorded by Alex Eccles and myself:

The intention in using these sounds was to surprise and delight the player. Often they were connected to items that in normal life do not make the sound we associated with them. This functions to draw the player’s attention back to the game, and offer a surprise, or brief chuckle at the unexpected result of their collision with whatever item was present.