Dev Log | #5. Character Implementation

OVERVIEW

Since our game takes place within a city and the games core mechanic is talking to people, the goal for the games level design is to ensure it feels full and lived in. We want players to feel like a real detective and giving them a feeling of freedom and the ability to ask anyone about anything is something we are striving for. Currently we have a cast of 9 critical characters for the player to get information from. These characters will be located all throughout the game world and hold information that the player can access at anytime.

When in conceptualization for these characters, it was important to keep in mind our time constraints for gold master and the Level Up Showcase. To accommodate for the looming deadline I designed these characters in a way that allowed for some of them to be of similar race with the ability to share assets that can be altered on the fly within Unity.

 

BIOS

I had already conceptualized some characters which made it easier when referencing the character bios for the rest of the cast. I often times found myself comparing their traits and understand what the relations between each character would be even if they never associated in the game. This helped in deciding whether I could apply a specific race to specific characters and seeing what could work in contrast.

Below is an image of the character bios that Keltie had written up for my reference.

CHARACTER BIOS

 

 

ALIEN RACES

The characters relations influenced their visuals. The character Reese, a CEO of Diamond Corp whose fiance, Finn, is missing, can be seen in the image below on the right. He was one to the first designs I had made. Starting with Reese, all other characters were designed in relation and contrast as mentioned formerly.

Reese

As an example, Reese’s mother is the game and she is of the same race. As well as, the dancer Destiny. Destiny is Finn’s best friend the emphasis of this particular race in Finn’s life indicates he has a particular taste in people. This is subtle and may not get across to the audience but it was considered in their design.

These three characters are made up using the same assets. As a means of being able to create many variations of the same species, I made sprite sheets that have clothing and hair options in grey scale so as to be able to color them in Unity. This process was used for many 3 characters and those that required more specific details were done as their own character. The image below is an example of the sprite sheets.

Reese Race SpriteSheet

Bouncer Race Sprite SheetNora Race Sprite Sheet

IMPLEMENTATION

The sprite sheets were sliced in unity and can be assembled to create prefabs of fully rendered characters with varying color palettes. New clothes and facial expressions can be added to add more detail and variation to the game world.

In Unity 2 of the races currently look like this!

Character

 

Dev Log | #5. Character Implementation

Dev Log | #4. UI Design and Testing

Project Magrathea is a UI heavy game. It incorporates a new take on an otherwise traditional dialogue system of a 2D platformer. This new approach  is integrated into the games map. It allows players to store information and reference it at any point during the game.

THE CONCEPT

Visually it is inspired by the “crazy walls”  of a real detective (1.1). Players can attach notes obtained through conversation to selectable areas on the map (1.2). A pin gets placed at the initial spot where information is obtained and then a second pin can be placed to indicate the intended destination of the player. A line is drawn automatically between these 2 points to display the connection.

1.1  “Crazy Walls”

1600x800-detective-crazy-wall-43-jpg-f48b090a

1.2  In-Game Selectable Map

Map.png

20170110_172757.jpgSince the map is the intended key feature of the game, I first looked at how it was going to appear in game. Contextually the map is displayed from a hologram watch on our main playable character’s wrist. In the image to the left, the top sketch was the initial idea where the map would extend out a certain distance away from the main character, having the NPC that is being talked to either unnaturally far away or in the way of the map. Upon further examination, the lower half of the image has a better composition and provides a natural placement for the characters conversation bubbles.

The intention now when implementing this into Unity is to lock the characters in place when in a conversation so that the NPC is always a certain distance away from the main character. This makes the composition consistent and clean. It should ensure that players don’t get frustrated with the composition and that they don’t miss any information that might be crucial to their investigation.

So, running with the second concept, I created a storyboard that displays how this interaction would occur and what it would ideally look like in-game. The story board can be seen below.

20170120_135917.jpg

This storyboard goes over the steps of:

  1. Interacting with someone.
  2. Opening the Map.
  3. Recording info from a text bubble.
  4. Moving the cursor.
  5. Placing pins.

 

THE VISUALS

IMG_20170120_140324.jpg

From here, the visual representation of what was being used is where my mind went. I looked at what the pin and the cursor look like. On the left, you can see the different variations of pins I have conceptualized. I am currently keeping a tally of what people would prefer to see and why after I have them do some testing.

Below are the 2 different variations of text options. The left side with the red highlights is in a list format that displays all options at once. The one on the right is based on Night in the Woods style dialogue options, which Project Magrathea currently uses a form of.

Having done testing among my peers, people prefer the left or first variation. I feel it fits more contextually like a detective’s note book.
20170120_141124.jpg

TESTING

The storyboard (discussed above) was encompassed in a digital walk-through that I created on power point as a means of testing a tutorial bit for the game. What better way to explain the system than the games actual intro?

20170120_150735.jpg

Below are screenshots from the digital walk through.

Screen 1.pngScreen 2.pngScreen 3.pngScreen 4.png

Untitled.png

While testing this I gained some valuable input from my peers and now have a direction that my team and I can move forward in.

Such feedback included:

  • Presentation and length of the tutorial or intro to the map.
  • Making instructions to be more of a prompt or command than a suggestion.
  • Change in control scheme.
  • Text bubble tweaking when in conversation.

 

 

THINKING AHEAD

As a means of putting thought into the game in the long run, if we were to create it in full, I tried to imagine what it would be like if the player had multiple cases to solve. The end result was what you see in the image below.

20170120_151006.jpg

Case 1 is shown in green and case 2 is shown in blue. The maps UI uses the bumpers to sift through the different collection of notes depending on which case file is being worked on. When looking for some over all context if the player was to leave and come back to the game, you can hold down the left trigger while in the map and an info bar will slide out from the left side providing an overview of that particular case is about. This overview would hold information such as the clients name and location as well as the major objective.

Dev Log | #4. UI Design and Testing

Dev Log | #3. Environment Progress

Our main priorities for Alpha is to have all the functionality of gameplay mechanics  working and in the game, and to have a level that is visually on par with what we intend for the final product. It is essentially my responsibility to ensure all assets are on lock down and that there is a clear direction to move in when we come back from the break.

In order to accomplish this I have started making more modular pieces of assets that can be arranged into any location in the level. This includes things like wall textures, windows, signs, park benches etc.

However, the art style needed to be more defined before I could make these assets. Buildings that were supposed to be more generic ended up having more characteristics than was preferred however these buildings could be placed around the map however many times we need.  These include buildings such as coffee shops, restaurants and clothing stores. All of which can be renamed or reworked if needed.

pm_restaurantpm_coffee-shop_nobackgroundpm_clothing-store_topshoppepm_clothing-store_panty-house

These buildings have had influence on the rest of the games visuals like the modular pieces that will be used to help create the level.

Below are examples of the modular assets:

bench
Bench

street-lighttrash

Streetlamp and Trash Can.

 

 

 

Dev Log | #3. Environment Progress

Dev Log | #2. Design and Color

Since our game is a platformer we wanted to utilize the vertical space of the game as much as possible. One of our main goals is to ensure that the game is fun even at its lowest level. This means that if we were to strip the game of its context, story and potentially arbitrary mechanics, the movement and navigation of the game should still feel amazing! This is something we are striving to achieve and having an environment where players can navigate to different heights is more interesting than having a flat city scape to roam around.  The level design and character controls will help us reach this goal.

A Diamond Corp City

Since the game narrative based the context of the main level we wish to showcase for our vertical slice is an almost dystopian city that is run by the large corporation “Diamond Corp”.  This company owns most of the galaxy and this city is where they operate from. Diamond Corp is like Apple they are the galaxy’s leading company in all things tech. The reason they own the city is because they basically made everything, from the cars to to the cities residents, robots in particular. They are very much like Mom’s Friendly Robot Company from the cartoon Futurama. Mom’s used her inventions to try and take over the population of robots and organic life forms alike. 

futurama-parodied-the-apple-store
Mom’s references Apple in Futurama

conquerearthyou225px-universal_robot_controller

 

Visual Reference

Below you will see a collection of images that will display what the intention for the overall layout of the city will look and feel like.

Images 1 – 4

The top portion of the city is where the Diamond Corp headquarters will be. It will feel very open concept with implications of cleaner air and the ability to grow plant life. Overall it should feel like a “better” quality of living. The main reference for this section was Mass Effect’s Citadel (seen in images 3 and 4 below). 

Images 5 – 8

The lower down you go the darker it gets and the lesser the air quality is. The middle portion of the city will consist of the “night life” and transportation such as docking stations and landing pads. This will likely be the first area that the player will visit upon arriving in the city. This portion should feel lively and active as if people frequent the area often. People from the upper floors rarely visit the lower levels however the the middle portion is as far as they will go. 

Images 9 – 13

The lower floors consist of slums and markets. The people who live there have a tight knit community who share a common dislike of the higher floors and Diamond Corp as a whole. The residents of this portion require air filtration as the sewage and garbage from the higher floors effect their living space. The slums are built much like the Kowloon Walled City in Hong Kong (Image 10). 

 City Color and Reference 1.png

City Color Palette 

I decided to go with lighter colors for the top floors because it is bright and clean. The buildings would be modern with cement or concrete colored exteriors. The intention for the light blue was to fit the modern and clean aesthetic however I also wanted to draw attention away from the negative aspects of the corporation in its atmosphere.

I wanted to create contrast between the tech that the main character uses versus Diamond Corp tech. The older models and other competing brands would be identified by red which is why the lower floors consist of red lighting. The main character relates more to the older tech as he is mentally stuck in the 1950’s hard-boiled private investigator facade.

Below is an image of the city’s color palette in more detail along side the main character’s colors.

Character and City Colors.png

Characters

Main Playable (James Madson)

The main character is James Madson. As mentioned, he is a private investigator. Although his design has been more or less decided on, he is an amalgamation of the following images. With the exception of potential rocket boots that may or may not be added.

James Reference Board.png

Diner Lady:

James has a landlady who owns and runs the diner that he lives above. She lets him live there for free on account of him handing out business cards or takeout menus as a means of gaining business. I imagine her very much like Roz from Monsters Inc. as seen below on her reference board. She has multiple arms and the aim is to have her constantly animated doing some sort of work in the diner, be it cleaning the counter or pouring coffee.

Diner Lady Reference Board.png

The Car:

The vehicle has an AI that communicates with the player. The player uses the vehicle to navigate through the galaxy or solar system to get from planet to planet. The vehicle is heavily influenced visually by Kitt from Knight Rider and has the personality of Marvin the Robot from Hitchhikers Guide to the Galaxy. Below is the reference board for the shape and tone of the vehicle. Since the player will likely have to look at the ass end of the vehicle while navigating through space I wanted to make good use of the tail lights, and the Dodge Charger’s give the car characteristics. I imagine as the vehicle speaks these lights would be animated similar to the way Kitt’s does when communicating.

844306_200x130tumblr_nokejd2tea1tqyfuro1_500

Vehicle Reference Board.png

The Antagonist (Illusive Woman)

I had the writer make a reference board for the Illusive Woman to give me a better understanding of what she was think of for this character. Essentially I have been having a more difficult time with conceptualizing this character. The Illusive Woman is supposed to come across as a villain or the one who done it. In reality she is your ex-partner who you presumed was dead. The player is unaware of this fact and it won’t actually be revealed in our vertical slice. However, everything needs to be taken into consideration. So my current concern is in the details. She can’t directly come across as another detective however this is a parody of a noir game so the trope needs to be evident some how. She is dis associated with Diamond Corp and their tech so she has different tech from them and James. She is more modern than he is and has the ability to blend in with the futuristic scenes of the city, as opposed to James who is stuck in his 1950’s ways, hat and trench coat. Any way, below are the reference board, silhouettes and designs that have been made.

Illusive Woman Reference Board.png

img_20161019_004531

Below is the design that I got attached to. This happened because she felt mysterious and powerful while being distinctable and fun to draw. I wanted to make sure she had pointed shoulders because I felt that reflected a more villainous look. The following design was inspired by outfit B from Chenthooran‘s Cyberpunk fashion (below).

cyberpunk_fashion_by_mythrilgolem1-d6o45sz
Cyberpunk Fashion by Chenthooran

img_20161019_004321img_20161019_004401

James and Casey.png

As you can see I took this concept as far as working on color palettes for her. In doing so I realized that the white looked very much associated with Diamond Corp even if her tech was green. While if she was in the red it didn’t feel detective-y and professional. So I went back to the drawing board and as you can see below I’ve been working on some Silhouette studies to see if I can get any new inspiration or try and take what I love out of the previous design and spin it to fit the trope a little better.

Casey Silhuettes.png

My concern with the trope though is that she will be easily identified and I feel that putting a coat on her might also make a connection between her and the main character. Because she is the “Illusive Woman” and her character design brief describes her to be similar to Irene Adler from the Sherlock Holmes novels, she needs to be notably recognized as a woman. I think putting a coat on her may take away from that fact unless the coat is tighter fitted if that makes any sense. The only time the player will actually see her is when she is on the run or fleeing a crime scene. This is why i took a more assassin or free runner approach, referencing Thane’s outfit from Mass Effect with the clean cut outfit (seen below).

tumblr_m7cj6qBLTO1qcdjnlo1_1280.jpg

 

 

 

Dev Log | #2. Design and Color

Deep Dive | Not Yet Annotated Bibliography

Andrews, M. (2010, February 23). Game UI Discoveries: What Players Want. Retrieved from Gamasutra: http://www.gamasutra.com/view/feature/4286/game_ui_discoveries_what_players_.php

Deshmukh, I. (2010, August 14). Creating immersive experiences with diegetic interfaces. Retrieved from Cooper: https://www.cooper.com/journal/2010/8/diagetic_interfaces

EA Visceral Games. (2011, February 1). Dead Space 2 ‘Smoke and Mirrors’ Developer Diary. Retrieved from Youtube: https://www.youtube.com/watch?v=9wkUu5dN0LU

Ignacio, D. (2013). Crafting Destruction: The Evolution of The Dead Space User Interface. Retrieved from GDC Vault: http://www.gdcvault.com/play/1017723/Crafting-Destruction-The-Evolution-of

Papalamprou, S. (2014, March 5). DIEGESIS AND INTERFACE DESIGN. Retrieved from Gur-u WordPress: https://gurusability.wordpress.com/2014/03/05/diegesis-and-interface-design/

Tach, D. (2013, March 31). Deliberately diegetic: Dead Space’s lead interface designer chronicles the UI’s evolution at GDC. Retrieved from Polygon: http://www.polygon.com/2013/3/31/4166250/dead-space-user-interface-gdc-2013

Weir, G. (2008, November 20). Opinion: Grim Fandango And Diegesis In Games. Retrieved from Gamasutra: http://www.gamasutra.com/view/news/21172/Opinion_Grim_Fandango_And_Diegesis_In_Games.php

Wong, S. (2014, June 20). Graphic Design Semiotics in Interactive Media. Retrieved from Graphic Design Semiotics in Interactive Media: https://samwongpic.wordpress.com/author/heartcarver/page/2/

Deep Dive | Not Yet Annotated Bibliography

Dev Log | #1. Research and Design

Project Introduction

Project Magrathea is a narrative driven 2D side-scrolling metroidvania style game of its own genre, space noir. The project consists of three (3) team members; a programmer, a narrative designer, and an artist.

Since the three (3) of us are working in parallel, there is no definitive narrative or context for the art direction to pertain to. So, as the team’s sole artist I am given the opportunity to outline the visual elements of the game and ensure that the overall visual quality is maintained.

As of last Monday, we started a sprint to answer as many questions as we can about the game before we meet our prototype milestone. My current priorities are to identify a practical art style, character metrics, and a means of lighting the game.

Practical Art Style

Pipeline

The current vision for the art pipeline of this project is heavily based on a previous game we have worked on called Choros. We had 4 days to work on that project and I was fortunate enough to be able to work with one of the programs other artists. The way he made assets was extremely rapid and modular but still maintained the quality of the game. Being the only artist on my current team, I intend to adapt a similar method of modularity when producing Project Magrathea. Assets from Choros can be found below

Corridor.png
Basic background whose color can be changed and assets can be added to fill scene.
ObjectPackage1.png
Assets are grouped together in Photoshop but are easily exported into their own images to be put in the game.

 

 

 

 

 

 

 

 

 

Visuals

Since the theme of the game is fairly one of a kind, space and noir, I have to maintain a balance of each side. Ideally the goal is to have the overall theme combined or cohesive and not have some stuff space related and other stuff noir related.

To answer this I looked into the definitions of “film noir”and “neo noir”.

Film Noir – a style or genre of cinematographic film marked by a mood of pessimism, fatalism, and menace. The term was originally applied (by a group of French critics) to American thriller or detective films made in the period 1944–54 and to the work of directors such as Orson Welles, Fritz Lang, and Billy Wilder.

Other definitions include more information on the visual elements of the genre. For example, low-key lighting, striking use of light and shadow or contrast, and unusual camera placements or unbalanced compositions.

 

noirbars
Iconic bar/blind effect that casts shadows across a scene.
vf2
Unusual Composition with effective light/shadow contrasting.

 

 

 

 

 

 

 

Neo Noir – is essentially film noir but with updated themes, content, style, visual elements or media that wasn’t present during the 40’s and 50’s.

5901fb02240e3bdfc1477589b6ed6dd6
Blade Runner art by Matt Ferguson
82704137cd722b790563bcd217b890fc
More Blade Runner art but by Raid71

 

 

 

 

 

 

 

 

 

 

As a possible solution for the game’s potential art style, I’ve been looking at cyberpunk cities and films like Blade Runner (as seen in the images above) which are similar to the neo noir theme.

While constructing a Pinterest board of reference images I came across the artist Romain Trystram who did a series of images called Réflexions faites. The use of flat, dark colors and contrasting bright lights are the main reason I take inspiration from these images. I feel they cover those bases very well when compared with film noir visual elements. Below you’ll see a few of the key examples of these works.

Since the project is a 2D game side-scrolling game the player is a little more restricted in their range of motion. However, the aim is to create an illusion of depth to make the world feel fuller or lived in. This will be done using the game’s foreground, mid ground and background. A good example of this can be seen in the game Night in the Woods (shown in the images below).

night-in-the-woods-gif1
Night in the Woods Gameplay
Game Feel 1.png
Night in the Woods Screen Capture

For the week long sprint, I’ve been working on a proof of concept to prove to myself and my team that I am actually capable of producing work of similar quality. In doing so, I was able to create several thumb nailed sketches of environments that pertain to how I imagine the game feel or atmosphere of the game would be.The images that you can see below are two (2) examples of these environments that are still works in progress. I have yet to create an official color pallet so these are by no means complete. The purpose of these sketches were for me to get a better understanding of the perspective of the game and what would best suit it’s gameplay.

DINER.png

CASINO.png

Metrics

The images seen above help to put the character into perspective as well. While these aren’t an official measure of the character, these images demonstrate how he should fit into the world around him, in relation to the other characters, foreground objects, and background objects. The intention is to create a similar feel to the aforementioned Night in the Woods.

Lighting

My team and I have experience lighting a 2D game while working on Choros, this was done using the lighting system made available in Unity. I am aware that we are open to using the same technique once again. However, I was asked to look into other options.

During my search for lighting a 2D game I came across an article that discussed the idea of self-illuminating assets or levels and creating a normal maps for them. So essentially they should create an effect that looks like this:

zombie-vertical-preview spritelamp-zombie

Almost all the information about lighting a 2D game that I could find ended up being about games that consisted of pixel art. I am unaware if it would work for games with vector graphics. However, the article says that doing this sort of lighting, with normal maps, would about doubles the amount of time spent working on a single asset. Which would not be very feasible for the project because as I stated before I am aiming to be able to create assets more rapidly and modularly due to being the sole artist.

 

 

Dev Log | #1. Research and Design