Home || About/Contact || Resume || Articles || LinkedIn
Tools: Unreal Engine 4
Roles: Design
Team Size: 10 -12 people
Development Period: March 2017 – Present
Overview: Albino Lullaby is a surreal horror game being released in episodic fashion. In March of 2017 I was brought on as a level designer to primarily work on layouts and blockouts for Episode 2. As the project progressed, however, creative director Justin Pappas felt comfortable entrusting me with responsibilities in other areas, including using Blueprint to script gameplay logic and UI elements.
Mirror: For a sequence in the intro of the game we needed a bathroom mirror, and I took it upon myself to figure out how to get a mirrored surface working:
I knew about using dot products to get the angle between two vectors. I also knew the basic math about how reflections work; if a person’s line of sight to a mirror is X degrees from being perpendicular to the mirror’s surface, then the image they will see will be -X degrees from that perpendicular point.
First, I created a Blueprint with a plane primitive, and a scene capture component whose texture would render on the plane. I then created a script that would get the vector between the player position and the mirror, and then use that in a dot product with the mirror’s surface normal to get the angle. Using this, I would be able to rotate the scene capture component in the opposite direction the same number of degrees, creating the illusion of a mirror.
After setting it up, however, I ran into an issue: the mirror needed to be perfectly square, or else the reflection image would be squished one way or the other. Given that we’d want mirrors to be able to have arbitrary measurements, I set out to write a shader that would resolve this issue.
First, the shader gets the height and width of the mirror plane and takes the larger number as the “scale factor” parameter, multiplying the UV coordinates by that factor. It then takes both the U and the V coordinate and “centers” them around the midpoint of the mirror, essentially “clipping” the edges of the mirror off if resized.
As a result, the designer only needs to place and resize the mirror Blueprint. Everything else is taken care of!
Inventory 3D Rendered Items: For our demo, I was also tasked with getting an inventory up and running. Throughout the game, the player would be able to pick up plot-critical items and click on them to view a description. Getting the basic UI functioning wasn’t hard, but I wanted to add something special, and so I tried to figure out how to have the item meshes appear and rotate within the inventory:
Following an example online, I created a Blueprint consisting of a small box of unlit walls, set to a bright blue. Then using a scene capture component like the example above, I placed the items inside, and arranged them. I then wrote a shader to filter out the blue background, leaving the item rendered with a transparent background around it.
However, given that in the inventory screen there would be multiple items, all of these would need to be rendered at the same time. The idea of having each item have its own dedicated scene capture component and render texture perturbed me with its performance implications.
Instead, however, noting that we were planning on having 15 items (3 items each in 5 levels), I decided to arrange them in a 4×4 grid within the blue box, so that there were 16 cells, with one that would remain blank.
Then I created a shader for each item, restricting the UVs so that only the cell that contained the appropriate item would render. I then assigned that material to the corresponding UI element in the inventory screen. This is also where the blue background gets filtered out.
That way, every item in the game can be rendered this way, and we only need one scene capture component to do it!
Jared Mitchell 