The Channeler Style Guide

This is the cumulative, comprehensive style guide for our game. Everyone on the team has worked very hard to guarantee the highest level of quality for this guide, and we are extremely proud of it. We hope that the faculty and advisers enjoy it as much as we do.

Week 6: Logos, Fonts, Iconography, and HUD Elements

Main Logos and Typography

For the overall aesthetic of the typography of the game, we were looking into serif fonts which specifically looked like older letterpress scripts. This is because, though most of the gameplay takes place in Kowloon City, the CSA and the Channeler's aesthetic is based on a Victorian ideal. We kept this in mind as we created the logo, though we also kept in mind the "Berylium" font we found, which might be used for in-game text.

"Berylium" font from dafont.com / Royalty-free.

Here is the original proxy Channeler Logo.  We want to go with this basic color for the logo, but wanted to explore other designs for the main logo.

Though we will go through further iterations with color and polish on these logo designs, we believe we are going forward with A as our final design, though we will keep an open mind for changes and perhaps combining aspects of different logos together.

We also iterated designs for the Channeler's, and the rogue Channeler's, symbols.

Special Symbols and Icons

The Walled City, though serving as a multi-cultural haven for "undocumented spirits", takes place mainly in Kowloon, an area in Hong Kong.  Because of this, though some signs may be in English, many signs will be in all sorts of languages.  Part of the gameplay involves using the Channeler's "intuitive sight" to decipher foreign script and symbols, so for this reason, we had to come up with some sort of special written language to populate the signs and papers in the city.

Because it is located in Hong Kong, the automatic assumption would be to use some sort of Chinese script.  However, we decided that using a "living" written language would be unwise, as we would be pressed for accuracy in the use and understanding of the script.  In addition, some of our players may have knowledge of written Chinese, defeating the purpose of having these symbols everywhere as a mysterious foreign language to interpret.

So, instead, we decided to turn to "dead" Chinese scripts instead.  We did a lot of research regarding ancient scripts from China's "Bronze Age" during the Shang dynasty over a millennium ago.  There was a type of script modernly referred to as Oracle Bone Script, written on bones like turtle shells, and Bronze script, written on ritual bells and cauldrons.  Both were very pictographic in nature, with the symbols often appearing more as pictures of the meaning than modern Chinese script.  Because of this, they give a very mystical and ancient feel, adding a touch of magic to our game.

We took various academic resources (such as this Unicode list and this Chinese Etymology page) and ran them through translators to acquire a small database of relevant symbols to populate the world.

We kept these design aspects in mind when we iterated designs for the jiangshi gang's, the 44K's, symbol, which would be seen in game as well.

HUD Elements

The Channeler has a relatively minimalist HUD, mostly focusing on a reticle which will indicate both the player's health but also the cooldowns of the companion characters. The circle in the middle of the reticle would not only show what the player is focusing on, but would also "close" like an eye to indicate health. It's meant to be semi-transparent so it doesn't detract too much from the action in the game—because eye-tracking is the main mechanic, this reticle is extremely important.

It was also brought up that we would need indicators to know where companions were where they were if they were off-screen. So icons were made for use in the player's peripheral vision.

We also began concepting designs for the Channeler's tome. It is important both functionally and design-wise—it has been decided that we will look into a 3D UI for the tome for the pause screen, so the player can observe options but also extra information within the tome itself. Because this will be important both in 2D and 3D, we went ahead with concepts and proxies for both.

Week 6: Storyboard

This week, we worked on a preliminary Storyboard to animate in After Effects, intended for both briefly introducing the world and showing off our finalized concept art.

Here is the sequence of images, followed by a short spoken script and details on what will be animated.

1. "Welcome, Channeler, to the CSA!  I know, your mind must be blown:  to find out that you have the THIRD EYE, a Special Sight that lets you see and talk to spirits!
• Channeler image clutches bag closer.
• "Third eye" appears and glows when it is mentioned.
2. "That's right:  SPIRITS!  There's all sorts of ghosts, ghouls, and gremlins out there... but as you're about to find out, they're a lot more friendly than you think!"
• Spirit silhouettes simply waving and floating in place.
3. "And the CSA helps keep it that way.  Oh, that's the "Channeler-Spirit Association".  It's where people and the paranormal work together to solve human-spirit problems!  People like you, and Paranormals like ME:  Yeah, that's me there!  I'm Shahzaad, your new teammate.  Nice to meet you!"
• Spirit and human silhouettes moving around the CSA
• Globe spinning
• Shahzaad appears and waves when he is mentioned.
4. "We're about to be sent to The Walled City:  A haven for seedy spirits in the human world!  The place is huge, overpopulated... and maybe a little scary."
• Little spirit crowds moving
• Flags between buildings wafting a bit.
• Parallaxing with the two foreground buildings
5. "The streets are run by the 44k:  A gang of Chinese Hopping Vampires who usually just run the food industry there.  Normally, the CSA turns a blind eye to this huge mess of a city, but..."
• Spirits wafting in place or moving
• Lanterns swinging slightly
• Neon glowing/flickering
• Slight parallaxing with two foreground buildings
6. "...One of the CSA's Channelers went ROGUE.  They've taken over the local gangs, and they're stirring up something sinister.  The CSA is counting on us:  Together, let's get to the bottom of this!"
• Parallaxing of rogue channeler with background
• Movement of smoke, curling of arm.

Week 6: 3D Explorations of Environment and Props

Our art team did some explorations of what 3D environments in the Channeler would look like, which we definitely want to show with everyone. These were basically explorations of the 2D work we already did, given consideration into a 3D space.

In these explorations, we decided that the city would have three separate districts: a food district, a residential district, and a manufacturing district. We presented these ideas to the producers, which got some ideas going for how they might be incorporated into gameplay.

Though each artist did a separate area with geometry, we each made different sets of props which we shared, so that we could populate the environment and make the areas look like they existed within the same world.

We are planning on incorporating some of these elements into our UE4 diorama, which we plan on showing for vertical slice next week. We also wanted to show a character incorporated into our 3D space, as some of the criticism we've received was a lack of ability to visualize the characters in the environment. We have already created a proxy model of Chao, our jiangshi character, who will be in the diorama.

So for this next week we will be UVing and texturing these items to make them viable for the UE4 diorama during the vertical slice presentation.

Week 5: VFX & Particle Studies

For visual effects this week, we explored various inspirations, made some mock-ups, and began demoing some effects in engine.

3D Effects

Our first instinct was to turn to Sam Nielson's blog to investigate effects, as Nielson provided the basis for the simple and stylized look of our game:

Sam Nielson's VFX exploration for Disney Infinity.

The effects had a very blobby, 3D feel, with simple sculptural silhouettes for the most part.  It appeared that some of them would translate well to a 3D model.

Using 3D models for VFX could benefit our game in a few ways.

• First, as we decided that the character Shahzaad's fire would be sculpted, it might do well in terms of continuity if fire elsewhere were also similarly 3D.  
• Second, 3D objects could easily be targeted via Eye-tracking in game.  Minigames such as having to deflect fireballs or part smoke just by looking at them can be achieved this way.

Finding examples of purely mesh effects was difficult.  We found this example of animated mesh fire, created by user shank3d on Turbosquid.  Though its extremely costly in terms of polys, it does give inspiration for what kind of motions we can simplify and lean toward in a 3D effect:

Animated mesh fire made by shank3d

However, 3D particles can be costly in a scene.  For effects that do not need to be targeted with eye-tracking, going 2D would not only suffice, but provide even more interesting stylization options. 

Based on Sam Nielson's simple sculptural style, we concepted a few shapes for 3D model effects, such as fire for Shahzaad and the environment, a fireball for Shahzaad's ranged attack, smoke for the Rogue Channeler's hood, and perhaps some water that could be leaking out of a rusted pipe:

We are still experimenting with methods to bring these 3D model effects "to life".  For the most part, we plan on utilizing moving textures in UE4's material editor, such as panning and rotating the texture, using masks and adjusting opacity, and so forth.  

We are still working on bringing movement to Shahzaad's test fire, but that test mesh could also be used as a Mesh emitter particle effect in UE4.  The material currently isn't working as-is, so we will work on creating an emissive/panning material for this fire that can be used in UE4's Mesh Emitter system.

2D Effects

For 2D effects, we explored highly stylized works that fell within a similar maturity demographic to our game.  

When we first explored initial style inspirations, the animated movie The Secret of Kells was reviewed extensively.  

Movie stills from The Secret of Kells

The movie featured a lot of intricate illustrative elements, such as swirls for fog and hard lines for "god rays", as well as including a textured element.  As The Channeler currently features simple sculptural shapes, muted color palettes, and soft shading, it might add flavor to our simple scene to have subtle effects using more intricate illustrative elements.

Another source of inspiration for stylized 2D effects is the game Okami.

Screenshot from Okami

The game featured a high variety of stylized effects, such as brush strokes for wind, winding wisps for smoke and fog, and a hand-drawn aesthetic to elements such as clouds, water, and fire.

Various Okami particle Effects.
From top left clockwise:  2D concept art for clouds/smoke, in-game rushing water effect,
Evil boss fire attack, simple torch fires.

Though some of the brushstrokes on these effects may be a bit too intense, simplified shape language could definitely be referenced.  For instance, the smooth playful shapes of the fire torches, rushing waters, and clouds could all be referenced in both our own 2D and 3D effects.  

Legend of Zelda: Wind Waker also shares a similar aesthetic with its particle effects:

2D explosion effects from Legend of Zelda: Wind Waker

A final inspiration for 2D effects was Van Gogh's Starry Night:

As our city will be lit by many point lights, like lanterns and neon, we though experimenting with stylized light halos would add a sense of other-worldliness to the streets of the Walled City.  Van gogh's use of thick, messily swirling light halos is iconic and memorable, and could add that ethereal element we're going for.

Based on these inspirations, here are some 2D particle mock-ups of what effects and styles we want to try to play with in UE4:

We've begun testing the Stylized Okami mist/fog in UE4:

We plan tweaking the current mist to have features such as layering the 2D planes of effects in a parallax effect, so that closer fog is moving slower and farther fog is moving faster, as well as closer fog being more transparent and farther fog being more dense (as there is more distance between you and that fog).  We are also working on having the transparency of the fog conditional to where you are in relation to it, so that if you get closer, the fog goes more transparent/disappears, so you don't get the jarring effect of walking through a 2D image.

As The Walled City takes place in an overpopulated urban environment, it is only natural that the place is crawling with... roaches!!!

These roaches utilize sprite sheets to get that flapping wing motion.  In dark lighting, the roaches are a little hard to see, but they do add a more subtle visual noise to the scene that can be used to distract or draw the eye as needed.  They may be used for only conditional situations, as the sprites can appear a bit obnoxious/overpowering in some scenes.  However, perhaps adding a simplistic floor-roach particle version would give a more subtle feel, and perhaps the roaches will stop emitting if you walk near them, as if they are scattering from your feet.

We plan on experimenting with and implementing the other mock-ups listed here over the next two weeks, especially working with the lighting particle effects to see how they mesh with our new lighting studies.