Thursday, February 25, 2016

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.


Thursday, February 18, 2016

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.

Week 5: In-Game Lighting and Mood

Because Kowloon is going to be the environment that the player is going to interact with, we focused all of our lighting study efforts on different areas of the city that the player might explore.

We've decided that the overall lighting of the city is going to be a sickly green, representative of how it's been corrupted by the rogue channeler's influence over the jiangshi. To offset that, we've been using orange and yellow lights primarily, so it doesn't look too Christmas-y, though we did throw in a few red lights for accent as well.

The alleyway has minimal lighting, as it's out of the way of the main streets. There could be some lanterns, however, strung across the narrow walkway.


To give Kowloon a modern flair on top of its more mixed architecture, we added neon light elements as well as the lanterns and other lights. These areas are significantly more well-lit, as they are the main thoroughfares for the city.

For the Warehouse, we worked with getting a more dim, tense lighting.


We referenced old warehouse spotlight lamps, where the scene is populated by cone spotlights with areas of ambiguous darkness.  As the Boss, Shanzhu, stalks after you through the scene, the lighting  and shadows about him will change dramatically, whether he gets sharp back-lighting, ominous overhead lighting, or head-on lighting.


Week 5: Animation Considerations

For our initial animation considerations and pose studies, we chose our most intimidating antagonist, Shanzhu the jiangshi, as our subject. The main reason for this being is that he is the focal point of our boss battle, and getting his intimidating presence and movements down is going to be crucial to maintaining tension in that selfsame battle.

As stated below, we've looked into several Disney villains, such as Ratcliffe from Pocahontas and Sykes from Oliver & Company, not only for general body type but also the way that they move. In our poses, we wanted to nail the ease and confidence that Shanzhu has in himself and how that can intimidate and overpower the player.


In these poses, we wanted to show Shanzhu's size and stature and how that relates to his overall demeanor: he is very commanding and has a leonine sort of ease and confidence to his movements (despite his massive size). Maintaining his cool is very important to him, except it doesn't always work...

When the player manages to strike him, he loses that composure. The boss battle revolves around attacking his talismans, and Shanzhu has a personal fear of people seeing his face. When struck, he instinctually acts to hide his face from the player.

A main phase of the boss battle is where Shanzhu reaches out to the player to grab them. We wanted to show that and also how intimidating it could be in action.
(Poses were courtesy of Alex Papanicolaou, KC Brady, and Claire Rice, while Summan Mirza provided the rig.)

As mentioned, we started researching videos to provide some inspiration and goal for how each character will move. Because the game is heavily stylized with our Sam Nielson artist inspiration, we tried to stay within the general realm of Disney. It's not to say all of them are, of course, but it was the first place we went when considering.

For Shanzhu, we looked at Ratcliffe from Pocahontas and Sykes from Oliver & Company.

(1:32)




We also started to consider inspirations for other characters, such as...

Pitch Black from Rise of the Guardians for the demeanor/movement of the rogue channeler. Though Pitch is much more talkative and charismatic than the enigmatic type of personality we're going for the rogue channeler, the overall ethereal manner of his movements and the way he disappears into shadows is important to emulate.



Jim Hawkins from Treasure Planet for Chao. We especially liked the rounded manner of his movements and how everyday and commonplace they make him seem.

(2:35)

And the movements of the mermaids from The Little Mermaid for Shahzaad, which is very important because of his levitation and the movements of his tail.


We also did more research into blend shapes for our facial animation. Here is a blend shapes facial animation set which we are going to perhaps be using as reference for different expressions to blend to. The goal is to make a low-res base mesh which we can use to make these and then blend towards, so it doesn't end up being too taxing.

Thursday, February 11, 2016

Week 4: Exploring Technical Considerations.

In the next week, we will be seriously delving into demoing technical considerations for the art and style of this project, such as particle effects, animation features, and environment modularity.

In terms of Shahzaad’s fire pieces, we decided against creating them purely through particle effects, and continued towards Nielson’s overall sculpted aesthetic by having the fire be modeled in mesh.  To simulate the look of living fire, we explored layering panning and rotating emissive textures in UE4’s material editor to give a stylized appearance of fire:



We hope to refine on this stylization, and will also work on some sort of physics-based joint system that will give the mesh fire pieces more natural movement and life. 



For animation, we’ve been working on refining a specialized auto-rigger that could be used to not only quickly animate Shahzaad and his wispy ghost tail, but perhaps other proxy spirits that may populate the Walled City:


The auto-rigger will have IK/FK switching capability, as well as specialized controls such as IK splines and driven keys to easily animate motions of the wispy tail, such as the tail curling or undulating.

As for facial animation, we are currently exploring the option of using blendshape-based animation.  As blendshape states in UE4 are accessible as attributes, we find that this would best suit the Character Interaction portion of our game.  When the player meets Chao and speaks to him, the screen becomes fixed and Chao will physically react/change when the eye passes over certain collision boxes over points of interest.  Linking such eye-triggered events with a subtle change in blendshape state as he speaks would be preferable to having extensive management of joint-based animation to blend different mood states with speaking states and so forth.



Wednesday, February 10, 2016

Week 4: Finalized Environment Designs

For environments this week, striving to unify style was the primary goal this week. We did a workshop on composition and value when it came to 2D art pieces, which I believe helped a lot in the composition of these.




For this last piece, we simulated the HUD of the game. The UI is extremely minimalist in our game: the reticle on the door represents both the player's health and their companions' cooldowns.


We also continued to use modular studies. These were very important less for color and value and more for the shape language—the environment artists consolidated these designs before they started their compositions so they could repeat them throughout the design process. This would allow them to already begin to think about how modular pieces might be used in the game engine to create the environments. It was also important to study how edges world work in the environment. Curves and angles were used much the same that they were used for the characters' designs. They also created a stylized look for these objects: they have borders or double lines for edges.

UPDATE: Based on teacher feedback, we were asked for more mockups to see how characters would exist in the environment. We worked together to try to show a 2D representation of how we hope it will look in engine. We also added some written characteristics, having decided what sort of language we're going to use for the world itself.




Week 4: Finalized Character Designs

After consolidating the feedback we were given last week on our character designs, the art team pooled together to decide what the finalized designs would be. After we decided on the proportions and shape language, we also decided on color palettes for each individual character. We decided that the torso of each character was the most important structural element, so we made the proportions slightly different that the top half would be roughly 2/3rds of the design and the legs would be 1/3rd of the overall height.

When it came to rendering, maintaining a link back to our Sam Nielson inspiration was important. We used a tutorial he gave on his shading style to focus onto that look.






We have also made some rough guidelines of how tall each character will be in relation to one another.