Crafting Captivating UI Effects in Ghostlee with Shader Graph

Hey there! I'm thrilled to share my experience crafting unique UI effects in Ghostlee using Shader Graph. Working closely with Table Knight Games as a Technical Arts and UX Designer, I played a pivotal role in bringing Ghostlee to life. I'm excited to walk you through the process of creating captivating UI effects using Unity Shader Graph. But before we dive into that, let me give you a quick overview of what Ghostlee is all about.

Ghostlee is a unique social media app where users discover and leave messages tied to real-world locations using augmented reality (AR). Imagine walking down the street, opening Ghostlee on your phone, and suddenly seeing ghosts holding messages around you. These messages can express sentiments about visited locations, share humorous remarks, or exchange captivating stories, creating an immersive and personalized experience as you navigate your surroundings.

Ghostlee is powered by the Unity game engine, and we leverage a unity tool called Shader Graph to create stunning visual effects for the app. Shader Graph is a visual shader editor that enables us to design fancy effects without delving into complex code. With its user-friendly interface, we connect nodes to define material behavior and appearance, shaping the visual identity of Ghostlee.

I'll explore the shaders used in Ghostlee, starting from the simplest to the most intricate. We'll take a closer look at the Gradient Map, Shimmer Effect, and Holofoil shaders in detail.

Note: This article assumes some knowledge about Unity and is best suited for intermediate users.

Gradient Map

Gradient mapping involves using a grayscale texture and assigning each grey shade to a different color, as defined by a gradient texture. This is how we set up the coloring of the Ghostlee avatars.

We wanted to represent the color selection UI in the same way we did for the 3D Ghostlee avatar. To achieve this, I created a shader that could be used for image components. This shader takes the gradient texture from the image component and performs the gradient mapping based on a ring texture provided within the shader.

Creating Gradient Map Shader:

Create a new Shader Graph by right-clicking in the Project window, then select Create > Shader > URP > Sprite Unlit Shader Graph

Defining Gradient Map Shader Properties:

Texture2D GrayScaleTexture: This texture uses a grayscale ring, initially created in Substance Designer, as the default texture.

Texture2D GradientTexture: This texture references the _MainTex, which is crucial for the shader to utilize the sprite from the Image component.

Gradient Map Implementation Details:

To achieve gradient mapping, we sample the gradient texture using the UV coordinates of the grayscale texture. This process maps each shade of gray to a specific color from the gradient texture. then, the resulting RGBA output is directed into the Base Color.

An Ellipse Node is incorporated to generate a circular mask, which is then applied to the alpha channel of the final output. This effectively masks the gradient-mapped colors to conform to the shape of a circle then it is directed into the Alpha.

Using Gradient Map Shader:

To utilize the shader, create a material and assign the Color Gradient shader to it.

Using image/raw image with a gradient texture and the Color Gradient Map UI material assigned will show the circle in the UI with gradient mapping applied.

Changing the texture for the Raw image component will result in altering the gradient of the UI circle.

Shimmer effect

We're utilizing the shimmer effect shader to create an animated skeleton screen for loading user profile data. The shimmer effect is a visual technique that involves animating subtle, sparkling, or shimmering patterns over UI elements. Skeleton screens provide users with a visual cue that the page is loading, while also giving them an idea of what the final page will look like. This approach prevents users from thinking the site isn't working, creates the illusion of a shorter wait time, and reduces cognitive load by allowing users to process the page structure gradually before displaying the full content

Creating Shimmer Effect Shader:

Create a new Shader Graph by right-clicking in the Project window, then select Create > Shader > URP > Sprite Unlit Shader Graph

Defining Shimmer Effect Shader Properties:

Texture2D MainTex: This property references the image component's _MainTex, enabling the shader to access the texture applied to the sprite.

Float Speed: This property controls the speed of the shimmering effect, determining how quickly the shimmering pattern moves across the sprite.

Float Blend Opacity: This property determines the opacity of the shimmering effect over the sprite. Adjusting this value allows for fine-tuning the visibility of the shimmering effect to achieve the desired visual impact.

Shimmer Effect Implementation Details:

The shader is divided into two primary segments the main texture and the shimmer effect.

The MainTex property, representing the image component, is connected to a Texture 2D node. The RGBA output of this node is then routed into a Multiply node, which applies a shade of gray to the texture. Additionally, the alpha channel from the Texture 2D node directly feeds into the alpha channel for the fragment shader.

The shimmer effect is implemented using a time-based animation. The Time node is multiplied by the Speed property to control the speed of the shimmer effect. This value is then fed into the Tiling and Offset node to animate the texture. The output of this node is connected to a Texture 2D node containing a pre-created shimmer gradient texture, crafted in Substance Designer, resulting in the shimmer motion effect.

To blend the shimmer effect with the main texture, a Blend node is utilized with the Lighten mode. The Blend Opacity property is employed to adjust the intensity of the shimmer effect. Finally, the output of the Blend node is connected to the Base Color input of the Fragment shader, completing the shader's implementation.

Using Shimmer Effect Shader:

To utilize the shader, create a material and assign the Shimmer Effect shader to it.

Assigning the created material in any image component will result in showing the shimmer effect overlayed on the top of the image.

Holofoil

In Ghostlee, we introduced a special feature allowing users to give "super likes" to messages. We aimed to make this interaction shiny, fun, and reminiscent of sticker and trading card aesthetics. To achieve this, I developed the holofoil shader to emulate the charming appearance of stickers and trading cards.

Creating Holofoil Shader:

Create a new Shader Graph by right-clicking in the Project window, then select Create > Shader > URP > Sprite Unlit Shader Graph

?

Defining Holofoil Shader Properties:

Texture2D MainText: This property references the image component's MainTex, allowing the shader to utilize the texture applied to the sprite.

Texture2D HoloFoilPattern: This property defines the holofoil pattern used for the shader. I have pre-designed a triangular holofoil pattern and assigned it to this property.

Float Frequency: This property regulates the frequency of the cosine wave responsible for shifting the hue of the waves.

Vector2 Tilling: This property adjusts the tiling of the holofoil pattern texture, determining how many times the pattern repeats across the sprite.

Float Power: This property hides parts of the holofoil pattern.

Float RotationSpeed: This property controls the rotation speed of the holofoil pattern texture, influencing the rate at which the pattern rotates.

Holofoil Implementation Details:

The shader is divided into two primary segments Holofoil texture and Hue shift then compounding everything with the main texture.

Holofoil Texture:

The holofoil pattern begins by taking the time input and multiplying it by the rotation speed. This calculated value is then directed into the rotation input of the Rotate node. The UV coordinates for the Rotate node are determined by the tilling and offset node, which utilizes the tilling property as its input. This setup allows the pattern to rotate based on the specified rotation speed.

Next, the output of the Rotate node is fed into a Sample Texture 2D node, which uses the UV coordinates to apply the pattern received in the texture input.

The RGBA output from this node is then passed into a Power node, with the power property controlling the intensity of the pattern. Increasing the power value results in darker shades, causing certain triangles to become more prominent and others to fade away.

Hue Shift:

The Hue Shift begins by initiating a repeating animation for the hue shift. This involves multiplying the frequency by the cosine of time from the Time node. This creates a continuous repetitive movement over time, imparting dynamic movement to the hue.

Next, the View Direction node is employed in object space. The Split node is utilized to separate the view direction vectors into their individual components. Specifically, the R(1) output, representing the X vector, is isolated. This step is crucial as the effect is intended to be applied horizontally.

Subsequently, the X vector is multiplied by the result of the cosine repeating animation. This operation ensures that the hue shift effect occurs horizontally, aligning with the desired visual outcome.

To establish the initial hue and color of the effect, a Color node is configured to an orange-gold hue. This serves as the starting point from which the hue will begin shifting.

Finally, the resultant value is passed into a Hue node, with the offset input receiving the horizontal cosine repeating animation and the color input set to the orange-gold color. This will result in the desired hue shift effect dynamically infusing the color spectrum with motion over time.

Multiplying the triangle pattern with the hue shift animation produces the distinctive holofoil effect. To conform the effect to the shape of the sprite, I multiplied the RGBA output from the Sample Texture 2D node, which utilizes _MainTex as its texture input, with the holofoil effect.

Subsequently, to layer the holofoil effect over the sprite, I added the RGBA output from the Sample Texture 2D node with the holofoil effect. Finally, I input the resulting output into the Base Color of the fragment shader and the alpha of the Sample Texture 2D into the Alpha of the fragment shader.

Using Holofoil Shader:

To utilize the shader, create a material and select the Holofoil shader.

Assigning the material to any image component will show the holofoil pattern with the hue shift over it.

Conclusion

In Ghostlee, we've harnessed the power of Shader Graph to bring our UI to life. With Shader Graph, we can easily change colors, make things sparkle, and add cool animations, making our app look awesome. It's simple to use and lets us create UI that's fun and exciting. As we keep coming up with new ideas and making our UI even cooler, we're excited to keep using it to add more features and cool effects, making Ghostlee even more magical for everyone to enjoy!