RUSTED SHIFT
Overview - This is a pixel-art Soulslike game that uniquely blends 2D side-scrolling and 3D third-person exploration into a seamless experience. Players can freely switch perspectives to solve puzzles, engage in combat, and traverse a post-apocalyptic world filled with danger and mystery. Inspired by Metroidvania elements and classic Soulsborne combat, the game challenges players to adapt their strategies based on the environment and enemy behaviors across two dimensions.
-------------------- RESPONSIBILITY --------------------
TECHNICAL ARTIST
IMPLEMENTED - HDRP-based visual style transitions (3D color ↔ 2D
monochrome) to reflect narrative tone shifts.
DESIGNED - a dynamic main menu scene with movable camera and
vivid environmental storytelling.
CUSTOMIZED - HDRP lighting, fog, and post-processing to support
emotional shifts across scenes.
OPTIMIZED - rendering by reducing shadow/volumetric resolution,
cleaning colliders, and implementing camera-based occlusion culling, improving HDRP performance from ~50 to 80–90 FPS.
ENVIRONMENT ARTIST
BUILT - 2 complete HDRP levels with storytelling-driven composition
and atmospheric detailing.
APPLIED - decals (moss, blood), caustics, and surface details to
enhance realism and scene clarity.
DIRECTED - set dressing, lighting, and visual pacing to support
exploration and narrative cohesion.
VFX ARTIST
CREATED - a Vertex Displacement Shader to simulate wind animation
on foliage, vines, flags, and cables, with customizable strength and direction.
DEVELOPED - an electricity trap effect combining VFX Graph and
Particle System.
SYNCHRONIZED - all visual effects with gameplay events for
cinematic feedback and an immersive player experience.
-------------------- AWARD --------------------
2nd PLACE WINNER
UCI 5th Annual ICS GAME DESIGN EXPO 2025
WORKFLOW
Vertex Placement Wind Simulation
This technical analysis breaks down the vertex animation shader created in Unity Shader Graph. This shader animates mesh vertices based on Noise-Driven wind behavior, Vertex Color Weight Masks, and UV-based root anchoring. The movement is calculated entirely in the vertex stage to ensure real-time efficiency, especially for large foliage populations. It is implemented across a wide variety of assets, including:
-
Grass, weeds, and bushes
-
Climbing ivy and vines on walls
-
Tree leaves
-
Plants in water flow
-
Electric wires
-
Flags and hanging banners
By centralizing these behaviors into a single Shader Graph, I ensured a consistent and efficient visual treatment of environmental motion. This helped reinforce the abandoned, organic feel of the ruined cityscape, making it feel more alive despite its stillness. The implementation emphasizes physical plausibility, control flexibility, and performance awareness.
-------------------- BREAKDOWN --------------------
PART 1 - Noise-Based Wind Offset Calculation
The core movement pattern is generated by animating UVs across a noise texture in world space. We begin by sampling the Position node in Absolute World of each vertex. The X and Z components of this position are scaled and offset with a combination of Time node and a WindMovement float vector, which represents wind direction and speed. This drives a GradientNoise node to produce smooth, non-repetitive motion across the surface.
To add variability based on geometry height, the output is modulated by the VertexColor node, which is painted in the Maya with Vertex Color Paint Tool to define wind influence (in the Green Channel, base = 0, tip = 1). This mask ensures that tips of foliage respond more to wind while the base remains relatively static. We subtract a small bias (e.g., 0.2) from the noise to center its output, preventing asymmetrical stretching. The resulting formula for horizontal sway (in pseudocode) is:
noiseUV = WorldPos.xz * Scale + Time * WindDirection * VertexColor
windNoise = GradientNoise(noiseUV) - Bias
This results in a localized, animated displacement factor that avoids unnatural uniform waving.
PART 2 - Axis-Based Displacement Control
The wind displacement is split into two primary directions: XZ (horizontal sway) and Y (vertical bounce or turbulence). For each axis, we multiply the previously generated Wind Noise by a scalar value: Wind Strength XZ float vector and Wind Strength Y float vector, allowing independent control.
This value is then scaled again by the VertexColor to apply falloff toward the base of each mesh. This ensures, for instance, that grass blades sway at their tips but remain anchored at their roots. The combined displacement per axis looks like:
OffsetXZ = windNoise * VertexColor * WindStrengthXZ
OffsetY = windNoise * VertexColor * WindStrengthY
These are then added to the original world position for final offset calculation.
PART 3 - Root Anchoring via UV Interpolation
To anchor the roots of foliage more naturally, we blend the final displaced vertex position with the original world Position node using a Lerp node. The interpolation factor input (T) is based on the G channel of the mesh UVs, which usually maps vertically from base to tip.
FinalPos = Lerp(WorldPos, OffsetPos, UV.g)
This guarantees that the lower parts (e.g., UV.g = 0) remain stationary while upper parts (UV.g = 1) fully receive the displacement. The final displaced position (in world space) is transformed back into object space using a Transform (World to Object) node before being connected to the VertexPosition output in the shader stage. This ensures correct deformation regardless of the object's placement or the camera's movement.
Stylized Desaturation Dimension Switch
This technical breakdown focuses on the deliberate visual transformation achieved in a 2D perspective mode of a 2D/3D hybrid game. The core intention was to eliminate spatial depth cues and replace physical lighting with ambient structure, yielding a stylized, monochrome ruin aesthetic. This approach enhances the 2D view's clarity while providing strong environmental legibility without resorting to traditional shadows or lighting.
This Monochrome World is inspired by "This War of Mine"
-------------------- BREAKDOWN --------------------
PART 1 - Camera Projection
The core transformation begins with a switch in the camera’s projection mode. When players switch from 3D to 2D, the camera projection changes from Perspective to Orthographic. This transformation alone flattens the depth perception by eliminating perspective foreshortening, which is essential in mimicking a 2D platformer visual logic. However, a change in projection is not sufficient by itself. Without additional treatment, even orthographic views can preserve too much of the original 3D world’s depth cues, as evident in the spatial material cues, lighting, color variation that remain present.
PART 3 - Global Volume
The newly enabled "Sky and Fog Volume_2D" is configured with strong volumetric fog to dampen the environmental variance and obscure distant objects. Parameters include:
-
Volumetric Fog Density - High like 26.3 to compress distant visibility
-
Fog Attenuation Distance - Lowered to reduce spread of light and ensure tight spatial compression
-
HDRI Sky - Assigned but set with zero exposure impact
-
Indirect Lighting Controller - Diffuse/Reflection multipliers set to 1.0, minimizing any light bounce
By doing so, we ensure that almost no light makes it into the scene, except ambient fog values, allowing geometry to recede into gray scale rather than light space.
PART 2 - Lighting & Ambient
All light contributions were intentionally disabled. This includes deactivating the "Directional Light" and the "Sky and Fog Volume_3D". In their place, a secondary "Sky and Fog Volume_2D" was activated. This volume operates under a Static Ambient Lighting mode with no active sky light sampling. By removing dynamic lighting, the shading terms in the PBR equation (diffuse, specular, and reflections) no longer apply, and material color becomes ineffective as a carrier of brightness or highlight information.
PART 4 - Post-Processing
A dedicated Post Process Volume is used to finalize the visual effect. The settings include:
-
Vignette - Enabled for edge darkening, reinforcing a framed composition
-
White Balance - Slightly cooled to remove warmth
-
Saturation - Lowered significantly (e.g., -20) to mute color completely
-
Contrast - Boosted (e.g., +35) to bring out shape definition through local luminance
-
Bloom - Enabled at minimal intensity to preserve emissive UI or white text
-
Film Grain/S-M-H Curves - Fine-tuned to replace tonal gradients with sharper binary contrasts
This results in a near-monochrome palette where detail is communicated through brightness contrast rather than color, but also can hold the colorfulness of the 3D dimension world.
PART 5 - AO & Metallic
To reinforce the black-and-white world, each object’s Material settings were reconfigured:
-
Metallic - Lowered to 0.0 or near 0 to eliminate all specular highlights and reflective surfaces
-
Ambient Occlusion Remap - Adjusted to extend the remap range, exaggerating ambient shadows and cavity presence
These changes ensure that objects don’t reflect any imaginary light and are visually flattened. In particular, Ambient Occlusion becomes the only remaining tool to describe form — through darkness rather than light.
Why This Works
Traditionally, surface color in HDRP is calculated using the formula:
Final Color = Material Base Color × Lighting (Direct + Indirect + Specular) × Environment Lighting + PostFX
By disabling lighting and specular influence, and by tuning materials to reflect no physical light, the only surviving shading data comes from screen-space AO and fog depth. In this design, AO replaces direct lighting and fog replaces HDR color haze, flattening the entire frame into perceived light/dark zones rather than simulated spatial presence.
3D Dynamic Main Menu
Most games implement a 2D static image as their main menu background, often overlaid with UI elements anchored in screen space. In Rusted Shift, I chose to depart from this convention and construct a fully interactive, physically realized 3D menu scene that blends narrative worldbuilding, spatial immersion, and responsive camera control into the user’s very first experience. This system is built in Unity HDRP and functions more like an in-world diorama than a traditional title screen.
-------------------- BREAKDOWN --------------------
PART 1 - Camera Control
The camera in this menu is not fixed. Instead, it is mounted on a Script that responds to the player’s mouse movement by subtly shifting its orientation along the X and Y axes. This real-time camera tracking creates a sense of depth and presence, allowing players to “look around” the static world space before even starting the game.
This responsive motion also activates another layer of immersion: a Particle-based Volumetric Dust Effect. This VFX System is parented to the camera and dynamically shifts based on input direction. As the player moves the mouse left or right, the dust particles simulate airflow being pushed in the same direction, creating the illusion that the player is manipulating wind inside the scene.
PART 2 - Asset Composition
The scene itself is a fully realized 3D space built with the same asset fidelity as the rest of the game. Key environmental elements include:
-
Dynamic foliage using previously developed Vertex Wind Shaders Graph for grass and bushes
-
Static animation elements like an idle-looping deer rigged via Unity Animator
-
Detailed props including wrecked police cars, a collapsed bus, and broken street furniture
-
Real-time rain particles, Water Renderer Surface, and ambient occlusion
-
A distant skybox populated with skyline geometry for added atmospheric layering
Every object in the menu scene exists within world space and is subject to the same HDRP lighting, fog, and post-processing as in-game environments.
Unlike conventional Canvas-based menus, all UI elements—including the game title and interactive start prompts—are implemented using Text Mesh Pro components placed directly into world space. These elements are not camera-facing and do not move relative to the camera. Instead, their fixed location within the 3D space causes them to shift visually as the camera moves.
PART 3 - Dust VFX along with Camera
The air dust particles are implemented using Unity's VFX Graph. These particles are designed to:
-
Emanate from the camera plane in screen-facing orientation
-
Respond to user mouse motion via directional velocity
-
Respect the HDRP fog and lighting volume, appearing thicker in depth-heavy areas
-
This system gives the impression that the camera is moving through a dusty atmosphere, subtly increasing immersion and making the menu feel alive.
Water Caustics Simulation
This module simulates underwater caustics—light ripples cast by surface water movement—by leveraging procedural Voronoi patterns and projecting them via Unity’s HDRP Decal Projector. The goal is to achieve a dynamic, location-based effect that visually reinforces the presence of water in the scene, especially in shadowy or occluded spaces.
-------------------- BREAKDOWN --------------------
PART 1 - Shader Graph
At the heart of the system is a custom Shader Graph designed for the HDRP Decal target. Unlike surface shaders, decals allow projected effects onto arbitrary geometry without altering material setups, making them ideal for additive light overlays like caustics.
The graph procedurally generates a looping caustic texture using the following structure:
-
Voronoi Node - Drives the primary cell pattern. The input UVs are offset and tiled using a Time-based multiplier, creating animated distortion.
-
Tiling and Offset - Controlled by user-exposed Vector2 properties to scale and shift the Voronoi space. This simulates movement across surfaces as if light were refracting through moving water.
-
Power Node - Sharpens or softens the Voronoi pattern. Raising the power increases contrast, creating more pronounced highlights.
-
Alpha and Multiply - Control pattern intensity and transparency, allowing blending with scene lighting. Alpha is user-tunable.
-
Saturate Node - Ensures values remain in [0,1] for safe final blending.
-
Output Slots:
-
BaseColor - Takes the processed Voronoi shape, tinted via a Color parameter.
-
Alpha - Receives the same mask, modulated by the Alpha parameter.
-
Metallic, AO, Smoothness, Emission - All parameterized, enabling visual tweaking of how the caustic pattern interacts with local surface properties.
-
PART 1 - Decal Projector Integration
The shader is applied to a Decal Projector in the scene, oriented from above water bodies or windows where watery reflections are expected. This allows spatial control over the caustic’s placement, without requiring mesh-specific UVs or lightmap baking. The projector can be animated, looped, or placed dynamically for reactive environments.
Power Surge Through Water and Wire
This technical breakdown focuses on the multi-layered electricity visual effects system designed to depict power surging through broken wires, arcing into puddles, and electrifying nearby objects. The system is composed of 3 main visual components: the Electricity Sphere (a concentrated energy orb), the Flash (a brief burst of high-voltage discharge), and the Water-Conducted Electricity (a dynamic zigzag trail effect over water). Together, they form a cohesive, reactive visual language that supports gameplay clarity and environmental storytelling.
-------------------- BREAKDOWN --------------------
PART 1 - Electricity Sphere
The core of the system, Electricity Sphere, uses a combination of GPU Strip Particles Events and noise-controlled directional offset to simulate jittering electricity arcs. This effect is driven by an Arc Sphere Position Generator in the Initialize stage, emitting particles in circular or partial spherical patterns. Each primary particle then spawns a sequence of strip trail particles via GPU events, producing chaotic, lightning-like motion in 3D space.
To amplify unpredictability and jitter, a 3D Value Noise function is used in the Update stage to distort particle positions frame-by-frame. The particle speed is modulated by a global Speed parameter (0.05), while Lifetime is intentionally short (0.45s) to promote flickering turnover. A high Rate value (60) maintains density, creating the illusion of a concentrated surge of energy within a small spatial radius.
The visual output uses Additive Blending with Strip Size over Life, tapering arcs from origin to tip. Emissive intensity is exposed through HDR Color properties in the inspector, allowing designers to fine-tune glow intensity based on environmental lighting conditions.
PART 2 - Flash Sparks
A Conform to Sphere node orients each particle to burst radially outward, simulating energy dispersing into air or nearby surfaces. To avoid uncontrolled spread, a Gravity Force is applied, pulling particles inward and keeping them circulating near the emission point.
As particles reach their outer range, the gravity slows them down just as their size begins to shrink. This timing creates a natural explosive arc: a quick burst followed by a gradual fade, enhancing the realism of the spark effect.
The particles use a bright white HDR Color with a subtle yellow tint to emphasize impact intensity. Though brief, the system acts as a visual cue for electric triggers like wire contact or water conduction — adding a sharp visual punctuation to ongoing electrical activity.
PART 3 - Electricity
The effect is constructed with a short looping duration (0.1s) and emits particles from a flattened Rectangle Shape (X: 0.06, Y: 7.01), forming a tight band conforming to the water plane. Particle movement is irregular and dynamic, achieved via the Noise Module (Strength: 15, Frequency: 3, Scroll Speed: 5), introducing high-frequency lateral turbulence. Position Amount is set to 0.7, enabling significant displacement and reinforcing the impression of unstable conduction.
Each particle emits with a Trail (Texture Mode: Stretch), and the Color over Lifetime gradient fades from bright white to transparent, producing streaks of volatile electricity. The Start Speed is high (26.81), and the Start Size is small (0.05), emphasizing sharp and narrow movement. A maximum particle count of 1000 ensures a dense visual, but careful control via Rate over Time (113.1) prevents oversaturation.
Materials are set using a Legacy Particle Shader with emissive strip rendering (Default-Line), allowing these particles to glow intensely against the water surface. The visual behavior suggests that electricity is crawling outward and dissipating through a conductive medium
— a key gameplay cue warning of hazardous terrain.
Environment Art: Post-Apocalyptic
-------------------- BREAKDOWN --------------------
PART 1 - Reference & Artistic Direction
The environmental art style of this level is heavily inspired by The Last of Us Part I. After finishing the game, I was deeply moved by its portrayal of a decaying world overrun by nature and loss. Given that our project is also set in a zombie-infested post-apocalyptic world, I found its aesthetic language a perfect reference point. My goal was to recreate a similarly grounded and immersive atmosphere—one where destruction, abandonment, and nature's reclamation coexist visually and thematically.
PART 2 - Technical Implementation
The project utilizes Unity’s HDRP Pipeline, allowing for high-fidelity rendering and flexible lighting setups. I implemented a wind simulation system using Shader Graph, applying vertex animation to all vegetation—including grass, wall vines, hanging cloth, and flags—creating a subtle but constant sense of environmental motion.
To present in-game tutorials and interaction cues, I used Text Mesh Pro rendered in world space rather than through standard UI canvases. All prompts, such as movement controls and interaction buttons, are physically embedded into walls or placed near relevant objects. When players approach an interactable object, a contextual “E” key icon appears, offering intuitive guidance without breaking immersion.
Lighting and atmosphere were carefully crafted using Global Volume and Post-Process Volume settings in HDRP. The scene is set during the late afternoon, with directional light casting a warm golden hue across surfaces. Volumetric Fog is used to enhance depth and softness, and in some areas, light is scattered through fences or mesh structures to create dramatic shafts of light. The environment also features real-time reflections via the Water Renderer, and stylized water caustics are projected onto nearby surfaces using Decals Projector.
Dynamic effects such as electric arcs, glowing energy spheres, and intense flashes were created using a combination of the Particle System and VFX Graph. These effects not only add visual interest but also support gameplay by indicating danger or interactive zones.
PART 3 - Visual Guidance & Gameplay Flow
In order to maintain navigational clarity within a complex and richly detailed environment, I implemented a series of embedded visual cues. Elements that can be interacted with are often highlighted through color contrast or gentle animation—for example, smoldering fires with glowing embers or colored wood pieces.
Impassable areas are presented as completely black surfaces, clearly signaling their function as boundaries without needing additional signage. Yellow Cables are used as visual pathways, naturally drawing the player's attention forward. Electric hazards serve as both functional obstacles and intuitive warnings, communicated through sparking effects and biohazard signage.
In the 2D dimension, previously dangerous water zones are transformed into traversable platforms via visual changes, such as the appearance of yellow bridge structures. Nearby foliage is arranged to suggest movement direction—for instance, upward-pointing clusters of leaves that hint at vertical traversal. Scattered collectible coins serve a dual purpose: they reward exploration while subtly leading the player toward their next objective.
These visual guidance methods are designed to blend naturally with the art direction, enhancing playability while preserving immersion and thematic cohesion.
