Dynamic – depending on the lighting, either white/black outline will be present.
2. Black filter:
Makes everything black and white
The second part of the post-process was completed early on by David; this only left the outline. Originally, John was tasked with this, but I ended up taking over, as they didn’t have access to Unreal over Easter.
Henry sent a couple shaders and I did some supplemental research into unreal shader settings and using shader nodes in unreal to find a solution to the outline. I tested these in game; however, none of the outlines did a white and black ‘dynamic’ outline.
Henry made a shader which was perfect but unfortunately in the wrong Unreal version. However, I was able to recreate it following his example as a guide. (details further down)
https://www.youtube.com/watch?v=NtPq6NDWNyQ
As I recreated the shader, I ran into some issues. Despite understanding how the shader worked, I lacked a lot of basic Unreal knowledge, like how to delete node links.
I read Unreal Engine’s guide to familiarise myself with the correct language and UI.
In the correct version of Unreal, the shader’s material functions were missing. The main issue was that certain nodes had different names or contained other custom material functions that had to be remade. I roughly figured out the use of every missing node and used the resources I found to create replacements.
Material functions
Material Functions for shader:
Pixel_Depth: Calculates the distance from the pixel to the camera.
Get_Occluded: adjusts visibility of outline based on occlusion.
BlurSampleOffsets: Calculates the outline by multiplying the object and offsetting it in each axis.
CombineSamples: I couldn’t figure out its purpose but found that changing the input values affected the background. I believe it converts values for 3D rendering on a 2D screen.
get_subject_depth: Affects the continuity of the outline
proper Subject_depth values
Wrong values
Edge_Detection: Adjusts line thickness
Edge_detection_1: Unsure of its function
Final Material
I managed to recreate the material using the newly remade material functions.
Final Results
I’m really happy with the final shader. I learnt a lot about post-processing in Unreal, and although I relied heavily on Henry to build this shader, I’m still proud I managed to reverse engineer it and understand most of its components.
Cutscene
A cutscene was planned for the game to introduce the setting and plot; however, we unfortunately ran out of time and could not complete it. The following was the beginning stages of the storyboard I made for it.
Feedback received from the style guide presentation:
Blender shaders can’t be transferred to Unreal .
Henry offered to help us with the shaders in Unreal Engine.
The models would likely need really exaggerated geometry to achieve the angular style.
Models:
Modelling
I followed a polymodeling pipeline, as we discussed having a low-poly style.
First attempt: I created the facial features from a subdivided cube; however, it felt primitive and difficult to develop and add detail to. I used a Blender shader to replicate the final black and white effect.
I researched other methods. This was another way to go about polymodelling, which I recognised. You build the loops first, then join everything after.
Second attempt:
Improved the facial details
Eye shapes were more accurate.
Additional topology gave more freedom for facial animation.
Used more extreme geometry, e.g., cheekbones, nose and chin shadows. (This creates built-in shadows which recreate the 2D style from all angles)
The shading sometimes looked off despite the topology looking good – to fix this, some vertices had to be angled weirdly. I asked for advice, as I felt the topology was starting to look crazy, I was told that good topology is whatever achieves the correct shading with the least amount of geometry possible; only N-gons are considered objectively bad. I developed really weird geometry but it functioned well in different lightings, so I stuck with it.
I recognised the model needed textures for details like the eyes and beauty mark. The eyes were a big issue, as they appeared pitch black but needed to have some white and shape to them.
Ex. Weird shading
I identified an issue in the shadows caused by the topology:
At poles, shadows would blur or extend oddly.
This also happened in quads if one vertex was pushed too far out.
I could work around this by:
putting poles in inconspicuous areas .
readjusting pushed-out vertices.
To-Do & Notes for solving issues with in Unreal.
I followed the same method as the face, building each limb separately, then connecting them at the end.
redid the hair.
connected all topology
Redid the skirt to have built-in pleats so it’s affected by the shader like the face.
hands
I made blocky hands that fit the angular style; however, when I looked at the topology, I realised that it wouldn’t work well for animation, so I chose to redo it entirely.
Using a reference, I remade the hand. The number of loops could be reduced to emphasise the angular style; however, the topology now works for animation.
Connected the feet and hands to the body.
tested the model in different lighting.
Unreal Test:
flipped some normals.
Textures
My rough attempt at the textures; I used Substance Painter rather than Krita for more control.
I decided where I should put the textures/lines.
The textures looked blurry; needed an increase in the resolution for the hair.
I ‘drew on’ the eyes, as the original method didn’t work; however, it didn’t look good.
Second attempt:
UVs were overlapped in some areas, which made black lines appear randomly on the model.
My notes mentioned using a white emissive layer for permanent highlights that aren’t affected by the shader.
I redid the mesh and UVs, as they were affecting the resolution of the textures too much.
The main change was the eyes– I used a technique I learnt for making Vtuber models: make the eye a flat surface and create the pupil and eyelashes on top as planes.
Final model with textures
added white strips to the skirt so it could have highlights
new eyes
higher resolution hair
fixed UVs
Rigging
I used the robot tutorial to build the model’s rig. Coincidentally, all the previous models I made in other modules were serpent-shaped, so this was my first time making a human rig.
I made all the controls and adjusted the weight painting.
I wanted to push myself and try making a face rig too; I looked up a couple of videos to become more familiar with the general concept; the second one helped the most as it slowly built up in complexity.
I used the second video’s 3rd example. The deformation of the face isn’t great, which limits the exaggeration possible, but these basic functions work:
open mouth
eye tracking
eyebrows
To improve this I would:
add more mouth space
define lips more
Be more specific with weight painting.
Made a skirt rig for extra control.
rigged model in unreal
Fix: Removed weightpainting on IK wrist control.
Animation
I researched idle animations to understand the general requirements for these animations. I noted the following:
Looping actions
‘Small’ or contained actions.
Simple
The main action I chose for the animation is a ‘FootTap’, which works as a simple loop; however, the game team requested a smoking action and a few randomisable actions. So I created a couple of different movements based around smoking that the secretary could do at the same time.
Smoking references
I researched depictions of smoking in film noir and animation and combined them with the basic foot tap aniamtion I made.
As requested the movements were split into multiple actions so they could be randomised in game.
Although I was tasked with making the secretary’s model and animations, we needed the background made to test textures and contrast, so I pivoted and worked on that.
First attempt:
tried to make built-in blinds in the room, but they looked half-finished.
Final room
Redid the room:
Added a door.
New blinds.
Textures
To create the textures, I brought the UVs into Krita and handpainted them. I marked the UVs in Blender so I could line up the pattern properly.
After testing it in Unreal, I decided to set the wall texture to a white emissive so it wouldn’t be affected by the shader to help the scene’s clarity.
Flooring
Hand-painted textures in krita.
Blinds
Feedback from the lecturer:
Redo the blinds
make them thinner and more.
Original Blinds
I improved the blinds by:
bettering the topology
Making the string mechanism accurate.
added a wood texture using the Krita technique.
Added a slight curve to the individual strips for more realism and interest.
I was struggling to understand how to UV map in the new Blender version. This video explained the new unwrap options.
To optimise UVs for gameplay, I overlapped individual strips so less memory is used on textures.
Textures
Textured in krita.
The orientation of the top section was wrong.
Fixed the orientation
resized the textures
However, it still looked bad.
The texture was too harsh but felt closer to the style of the game.
These had a similar issue: the texture looked like static when applied to the model.
I chose a subtler texture that had most of the detail around the edges to avoid the static feeling.
Upped the contrast.
Resized it a bit.
Textures I made: walls, blinds, flooring, and secretary.
I’m happy with the results; the new technique saved some time. Despite only using black and white, the scene doesn’t feel overwhelming.
Fireplace
I made a list of all the items left to do. Although I still had to do the animation for the secretary, I felt helping the team with the textures was more important with playtesting coming up. I chose the fireplace, as it stood out, making the room look unfinished.
I did the Krita-Blender texturing. matching the orientation of the brick texture to the labelled UVs.
I’m happy with the amount of work I completed. Although the quality of my work could’ve been improved, mainly the animations, I couldn’t spend time redoing or perfecting anything as other work needed to be done. Furthermore, I unexpectedly had to take on the post-processing, so I had to manage my time to get everything done.
I suggested a film noir inspiration for the visuals, focusing primarily on achieving a pure black-and-white aesthetic. Rachel advised us to research certain media for the story development.
development
Following feedback, we reduced the scale of the game to one location.
I organised the animation team.
Made a list of all the work we needed to complete.
Sent examples of previous years for reference to help everyone understand what we were working towards at this stage.
We didn’t have any set jobs; however, the general work distribution for this stage was:
After researching noir films and the yellow room, I came up with a couple of fitting ideas for the game.
Naming the Game
The reddit thread offered insight into creating a detective game. Someone cited a thesis on players’ agency in detective games; the thesis concluded that players experiencing choice when collecting information and utilising instrumentation will give them a sense of agency and make gameplay enjoyable. I used this when coming up with ideas for the ‘mini-mini games’.
Mini-mini-games ideas
Style guide & research
I researched industry-level style guides and noted what I liked and didn’t like. I found that a lot weren’t clear enough at first glance and felt like a game of spot the difference because of unclear labelling. I used lines and arrows to avoid this issue. I did like the comparative drawings for the ‘yes’s’ and ‘no’s’ and how the Batman guide showed how highlights and shadows function; this became a huge factor in the post-processing stage.
I believe the target audience would be 20-25, as the comic style attracts teens/young adults.
Noir has an older age demographic, but I don’t believe that would impact the main demographic, as film noir has mainly been used as a reference/influence.
The combination of noir with graphic style caters the game towards a younger audience rather than the usual 30+ noir targets.
The aesthetic might attract creative people that appreciate the reference and unique artistic direction.
Film Noir research
https://www.youtube.com/watch?v=jsmVL7SDp5Y
Noir cinematography research:
Noir’s black-and-white moody aesthetic was born out of necessity due to lacking finances and inexperience with cinematography (leading to minimal lights available and inexperienced lighting sets properly).
John Alton stood as one of the greatest cinematographers. “He had the guts to use little lights.” His skill perfectly captures the noir style– a purposeful minimalist, low-light appearance utilising lighting to create contrast and focus in a scene.
Technical guide
technical guide Research
I updated the team on my research. I did additional research for the technical guide, as I wanted to ensure the style I was building was achievable in 3D.
I found 3 main methods to contrast in the style.
Creating an alpha texture for the shadows, which would create a cross-hatching effect.
A black outline– using shader nodes, it’s possible to create a black outline.
Cell-shading– a colour ramp converts the realistic shader into a cell-shading style.
These techniques set realistic expectations and also showed how the models could look. Although it helped me confirm the style we wanted, it couldn’t, as Blender shaders don’t transfer to Unreal.
Technical guide discussion
I recommended using the Asaro head as a reference for the models to achieve the angular planes of the face.
The red arrow points to an idea that later developed into the style’s main factor for converting from 2D into 3D.
Comic book inker, known for his work in many well-known comics such as Spider-Man, Deadpool and more.
This video explained his technique for inking and demonstrated how inkers create visual contrast and clarity despite only utilising 2 colours.
I learnt of multiple techniques, like the ‘Halo’– this developed into the ‘dynamic’ outline that became a central feature of our game’s style. The outline would change colours so that it always creates contrast between the background and object, similarly to the Halo’s effect.
Other aritsts referenced
I used all the notes and analysis from noir and the ‘graphic style’ and techniques I learnt (from inking, shader nodes, etc.) to make it feel more authentic and create more effective contrast to create the game’s aesthetic and main concept art:
We were nearing the first deadline, and Aoife was sick, so I did the secretary’s design.
Secretary design:
Angular shapes.
Straight lines- Follows the set style but also creates a striking silhouette hinting at her hidden harsh nature.
Referenced 1940’s style for women.
Limited to black and white.
Carefully considered colour placement to create visual interest and contrast. Used a ‘sandwich’ method, alternating between predominantly white and black colour blocks to create contrast.
Environment design
enviroment & era Discussion
We were running out of time, so I also did the room textures.
I first placed her in a black room and took note of any legibility issues.
Black areas blend into the background, losing the silhouette.
Plain black floor makes her look like she’s floating.
Alternating black and white ‘W’ pattern.
The pattern with the wooden texture creates visual noise to contrast the solid colours of the characters.
I reference time-accurate wallpapers, but the patterns were too overwhelming for this style. It also increases the risk of tangent lines, and the white becomes overwhelming and distracting.
tried a loose and sketchy design
Vertical lines created confusion around the skirt’s silhouette.
Used diagonal lines to avoid many tangents with the character’s silhouettes
added horizontal lines to create depth, making the characters pop out.
marked the wall to help create a sense of scale within the scene.
Problems
The Style
We received conflicting feedback on the style; some lecturers saw potential, and others thought it was unachievable.
The primary issue was the limited colour palette made it difficult to see; however, having done research into the technical aspect and comic books, I knew creating visual clarity was possible.
Unreal Post-Process– everyone was inexperienced; John attempted to create the outline; however, it didn’t work.
Henry helped guide us; he explained the post-process volume UI, shader nodes and more.
Using textures to support the shader.
With this I understood foundational concepts for making the outline and working with Unreal post-processing volumes; for this reason I ended up doing a large majority of the post-processing.
Sound Design
Updated the sound designer on the game.
some of the game elements were removed following lecturer’s feedback.
Although I don’t have much knowledge on sound and music, Sophie asked for direction on the general style of the game.
I used my research into noir films to make up a visual and auditory identity. I made a guide that detailed the exact styles and sounds that matched the era and visuals.
