top of page

RESONANCE

Overview - Resonance is a 2D side-scrolling action game where you play as Ika, a divine spirit who selflessly offers her power to heal a corrupted planet. Set in a fantasy world once vibrant with life, players traverse a circular world, defeat enemies corrupted by dark energy, and gather spiritual energy used to summon adorable animal allies. These creatures appear willingly, sensing the player's devotion, and fight alongside you to purify the land. The game blends fast-paced combat, bullet-hell inspired enemy patterns, and a gentle, healing narrative. Each short run (5–15 minutes) is packed with satisfying action, emotional resonance, and meaningful progression.

---------------------------------------------  RESPONSIBILITY  ---------------------------------------------

In Resonance, I am primarily responsible for the roles of

Technical Artist and VFX Artist.

I set up and configured the HDRP render pipeline, including custom-tuned post-processing to match the desired visual tone. I leveraged Shader Graph, Particle System, VFX Graph, and combinations of VFX with Shader Graph to achieve dynamic, impactful results. I also utilized Custom Pass Volume to create stylized fullscreen effects—bringing cinematic flair and clarity to key gameplay moments.

Serving as the sole VFX Artist in the team, I was responsible for designing and implementing all in-game visual effects, which included:

9 Player Skill Effects

2 Animal Companion Skill Effects

5 Enemy Skill Effects

WORK FLOW

SPATIAL SLASH

Inspired by Devil May Cry 5’s Judgment Cut End. In this moment, space itself appears to fracture—distorting violently around the player’s blade slash. The effect combines distortion shaders built in Shader Graph with layered particle systems from VFX Graph. In the first half-second of activation, the screen warps with fullscreen lens distortion and chromatic aberration, followed by a dramatic boost in contrast to intensify the aftermath. During the slash, dust bursts into the air and all on-screen enemies are damaged simultaneously. This multi-stage effect was carefully sequenced using code, creating a cinematic and impactful moment in gameplay.

--------------- BREAKDOWN ---------------

Slash Trails

  • A custom dissolve shader controls transparency and edge fade over the particle’s lifetime.

  • In VFX Graph, I animated trail length and opacity using AgeOverLifetime → Sample Curve.

  • These slash lines stretch and dissolve smoothly, synchronized with the player’s attack timing, delivering a sense of momentum and cutting force.

Shockwave

  • Built using a Shader Graph that leverages SceneColor and ScenePosition nodes, wrapped into a transparent sphere.

  • The shader uses distortion settings to refract the background, mimicking a shockwave pulse.

  • Through VFX Graph, I animated its expanding scale and fading opacity, making it feel like a shockwave pulse radiating from the cut.

Spatial / Dimensional Cuts

  • I designed an HDRP transparent Shader Graph with Distortion enabled, causing refracted visuals behind the object.

  • VFX Graph spawns multiple mesh shards at randomized positions and angles within a specific area.

  • Each shard subtly distorts the background image using normal-based offsetting, enhancing the illusion of sliced space.

image.png
image.png

Parameter Controls Script

The Slash Distortion effect is fully customizable through exposed inspector parameters that control how the screen reacts when the Spatial Slash is triggered. Designers can easily fine-tune the impact of the effect without modifying the underlying code: inspector parameters:

  • Lens Distortion Settings

    • Lens Distortion Duration: Controls how long the distortion lasts.

    • Lens Distortion Peak: Sets the maximum strength of the distortion curve (squeezing and warping).

  • Chromatic Aberration Settings

    • Chroma Aberration Duration: Duration of RGB edge-splitting effect.

    • Chroma Aberration Peak: Sets how intense the chromatic separation becomes.

  • Exposure Settings

    • Exposure Start / End: Defines how much the screen brightness spikes during the slash.​

    • Exposure Fade Time: Controls the smooth transition duration in and out of the overexposed state.

    • Exposure Hold Time: How long the intense brightness is maintained at peak value.

All effects are triggered when the Spatial Slash preffab GameObject becomes active. The script uses coroutines to animate each parameter with smooth interpolation, creating a cinematic impact during the slash.

image.png

TIME INFLATION

A full-screen visual effect to convey a "Time Slow" state. In this state, everything except the player and allied units slows down to 0.2× speed, and the world transitions into a monochrome (black & white) visual tone, while the player and allies remain in full color.​

This stark contrast serves both gameplay readability and emotional impact. Here’s a breakdown of how I achieved this effect using Unity HDRP, Custom Pass Volume, and post-processing techniques.

--------------- BREAK DOWN ---------------

Global Desaturation via Volume​

  • I created a Global Volume with a Color Adjustments override.

  • Set Saturation = --100 to desaturate the entire screen.

  • This post-processing effect applies globally to all visible objects by default.

image.png

Excluding Key Units from Desaturation

  • Assigned those characters to a separate layer called TimeInflation.

  • On the Main Camera, I disabled rendering of this layer via the Culling Mask.

  • This ensured those units were not rendered in the standard pass, and therefore escaped the global grayscale filter.

image.png

Re-rendering Player and Allies in Full Color

  • I added a Custom Pass Volume (Mode: Global, Injection Point: After Post Process).

  • Used a DrawRenderersCustomPass, filtered by LayerMask = TimeInflation.

  • Set:

    • Clear Flags to None

    • Target Color Buffer to Camera

    • Depth/Color Buffers to ensure correct composition and blending.

  • This pass draws only the excluded characters on top of the desaturated world, maintaining their original color.

 

(Since Sprites/Default is not supported in HDRP’s Custom Pass, I rebuilt all character and ally shaders using HDRP-compatible Shader Graph. These shaders preserved color fidelity and transparency, and rendered correctly in the Custom Pass pipeline.)

image.png

Parameter Controls Script

The Time Inflation system is fully customizable through exposed inspector parameters:

  • Slow Factor: Controls how much time slows down

  • Saturation Transition Time: Sets the fade-in and fade-out duration for the black & white effect.

  • Inflation Duration: Determines how long the effect stays active before reverting.

  • Layer Settings: Defines which layers are excluded from desaturation (e.g. player and allies).

These parameters let designers easily tweak the feel and timing of the effect without touching any code.

image.png

LASER BURST

A directional laser attack using Shader Graph and VFX Graph in Unity HDRP. The effect is composed of a procedurally animated beam shader with distortion, noise, and dissolve controls. The laser’s size, width, and opacity evolve over time through particle lifetime curves.
Upon activation, it locks onto the nearest enemy in view, triggers a visual buildup, and applies instant damage along its path using hit detection—not physical projectiles. Additional shockwaves and distortion bursts are layered at both ends to enhance impact feedback.

--------------- BREAK DOWN ---------------

Laser Shader Graph

  • Width / Height Controls: Used to dynamically stretch and scale the laser shape over its lifetime (driven by VFX curves).

  • Dissolve:

    • DissolveAmount, DissolveSpeed, and DissolveScale modulate a scrolling noise texture that erodes the beam’s surface for a charging/dissipating look.​

    • DissolveColor defines the glowing edge color.

  • Noise & Distortion: UV scrolling, combined with Simple Noise and animated panning, adds a dynamic energy ripple effect to the beam core.​​

  • Alpha Control: Curve-controlled alpha fading provides smooth visibility transitions at spawn and death.

  • The shader is set to HDRP Transparent, with Alpha blending, and uses Depth Test: Less Equal to integrate naturally in layered visuals.

Laser VFX Graph Setup

  • The Shader Graph is used as the output material, and multiple properties are bound to curves:

    • Width & Height: Driven by SampleCurve to simulate the laser’s growth over time.

    • Alpha & Dissolve Amount: Controlled via lifetime curve to fade-in, peak, then dissolve

    • Distortion Amount: Optional pulse added for energy buildup.

  • This lets the laser animate in, peak in size and brightness, then dissolve out.

Shockwave & Flash Effects

  • Supplementary shockwave bursts and muzzle flashes are triggered at firing time, enhancing impact feedback.

image.png
image.png

Refraction Ball Shader Breakdown

This shader drives the visual for the floating orb that emits the Laser Burst. It leverages distortion, surface motion, and scrolling emission to convey a high-energy, charged feel. Built in Unity's HDRP Shader Graph system, the implementation includes:

  • Surface Motion​

    • Uses WorldPosition and SimpleNoise combined with time-based UV manipulation to simulate a slow surface ripple.​

    • Adds a layered parallax-like effect by shifting surface normals over time to create depth and dynamism.

  • Surface Motion​

    • A blue energy texture is animated with TilingAndOffset, driven by a configurable ScrollingSpeed.​

    • Two instances of the same texture scroll in opposite directions and blend using Add, creating a complex flow effect.

    • Final emission is modulated with a color parameter for easy art direction.

  • Distortion Layer

    • A swirling distortion is applied using Twirl nodes and GradientNoise, which distort screen UVs for a rippling heatwave effect.​

    • The distortion strength, twirl center, and movement speed are fully exposed as parameters for in-engine tuning.

    • A NormalFromHeight node is used to derive accurate surface normals from the distortion pattern.

  • Soft Border Mask

    • A Fresnel Effect is multiplied with a soft border mask and power curve to create a smooth spherical fade at the edges.​

    • Final border color and size are controllable to blend the orb naturally into its environment.

  • HDRP Setup

    • Shader is set to Lit, Transparent, and AlphaBlending mode.​

    • Outputs include albedo, normal, and distortion offsets, fully integrated with HDRP’s deferred pipeline.

image.png
image.png
image.png
image.png
image.png

EARTH & GLACIAL SPIKES

Spike attack featuring Earth Spikes and Glacial Spikes, erupting from the ground to damage nearby enemies. Each spike is procedurally generated with randomized size, orientation, and placement, controlled through VFX Graph. The system leverages a custom dissolve shader for dynamic growth and visual variation, with unique material treatments—rocky matte for earth, and refractive shimmer for ice. This allows for two distinct elemental visuals powered by the same flexible framework.

--------------- BREAK DOWN ---------------

Both Earth Spikes and Glacial Spikes are environment-based burst effects procedurally generated via VFX Graph and driven by a custom dissolve shader.

  • Modeling: A single spike mesh is prebuilt in 3Ds Max.

  • Shader: A custom Shader Graph handles dissolving behavior with exposed parameters for scale, width, noise masking, Fresnel effects, and edge coloring. The ice variant includes refraction and Fresnel glow settings.

  • Spawning: VFX Graph spawns spike instances based on configurable count, radius, rotation, and lifetime. The spikes are randomly positioned and rotated within defined bounds.

  • Scaling: Spikes grow over lifetime via Set Scale Over Life, simulating emergence from the ground.

  • Variation: The ice variant uses a different shader with refraction normal mapping and Fresnel edge light to achieve a crystalized look. Earth spikes use a dark dissolve shader with subtler highlight tones.

This system allows for efficient reusability across different element types while maintaining distinct visual identity.

image.png

LIGHTNING STRIKE

Lightning strike effect that delivers an intense vertical bolt with surrounding electric discharge and impact feedback. The effect was created entirely with Shader Graph and VFX Graph in Unity’s HDRP, simulating both the dramatic descent of lightning and the chaotic aftermath it leaves behind.

--------------- BREAK DOWN ---------------

Main Lightning Bolt

  • Shader Graph drives a vertical strip with animated noise-based distortion to create a flickering, organic lightning path.

  • Inputs include customizable width, height, distortion intensity, noise speed, and scale.

  • The Lerp between UV noise and gradient color defines the bolt's core glow and irregular outline.

  • The shape is masked using a rectangle step function to maintain vertical sharpness.

Bolt VFX Graph

  • A Single Burst spawns a bolt once on command.

  • The bolt is scaled vertically (Scale.Y = 50) with a short lifetime (0.5s).

  • Over Lifetime curves animate the alpha and distortion parameters, creating a pulsing effect.

Electric Currents VFX Graph

  • Uses GPU event trails emitted from a spawn burst.

  • Each trail is randomly offset using per-particle velocity and lifetime, creating arcing electric paths around the bolt.

  • A noise node controls direction deviation, giving the arcs chaotic, electric behavior.

image.png

Shockwave

  • Uses a spherical mesh with a ground-shock dissolve shader.

  • The dissolve is animated with curves for width, scale, and Fresnel glow intensity.

  • This creates a glowing ripple at the strike point that expands and fades.

image.png
image.png
image.png

Electric Sparks

  • Three layers of electric sparks:

    • Small debris sparks (using unlit quad particles).

    • Static-attracted sparks, pulled by an Attractor Sphere toward the center.

    • Gravity-influenced sparks for downward fall-off motion.

  • Particles have varying lifetimes (0.1s to 3s) and random rotation/scale for visual noise.

EMBER

RUSTED SHIFT

aYemsrooooom

pngkey.com-artstation-logo-png-3071381.png
Clipboard - 2024-09-16 19.24.27.png
—Pngtree—white linkedin icon png_3562068.png
transparent-essentials-icon-github-icon-github-logo-icon-6066e5d47d18e1.545284051617356244
Clipboard - 2024-09-16 19.17.23.png

Irvine, CA, USA

(+1) 949 701 7768

bottom of page