Tech Art!

Jump To: 

Shaders

Scripting

VFX

SHADERS

Textured Outlines

A 2D outline shader that shows in UI with support for different tint and outline tint, different textures for the main image and outline, and adjustable for different opacities around the edge. Coded in CG and ShaderLab in Unity.

More on my outline shader!
Less on my outline shader!
  • Made With: CG, Unity, ShaderLab
  • Project: (val)iant
  • Date: February 2023

Goals: 

The goal for this shader was to create a 2D outline shader that could run in Unity's overlay UI. It needed to support a variety of different sprite shapes and sizes, as well as stay consistent across different transform scales. Many of the game's sprites have semi-transparent edges, so the shader also needed to support multiple opacities while keeping a consistent outline. I also wanted to add support for custom outline textures, just in case we wanted more stylized outlines.

Users can add a custom texture to the outline.
What opacities the outline covers can be adjusted.
The parameters for the outline shader.

Method: 

The shader samples the main texture and duplicates it, moving it in 8 directions to make up the outline. It moves by the amount specified in the Outline Width parameter, in world space, meaning that the outline stays consistent no matter how the GameObject is transformed and scaled. The shader then decides what to consider outline and what to consider the main image, based on the Outline Priority parameter. It then applies the texture and tint corresponding to each.

Full Demonstration:

UI Wave Shader

A UI shader that displaces text according to a sine wave, allowing it to be smoothly and easily animated in a way that manipulating individual characters would not.

More on my displacement shader!
Less on my displacement
shader!
  • Made With: CG, Unity, Shaderlab
  • Project: Aerodynamic Cat Simulator
  • Date: November 2022

Goals: 

The goal for this shader was to create UI shader to support a satisfying effect for when a player hits a note perfectly on beat. The game has a cartoony art style so I wanted motion that would look smooth and bouncy. It also had to be easy to work with from Unity's animator, meaning I had to support different widths, heights, and speeds of distortion.

The parameters for the displacement shader.

Method: 

The shader uses the given parameters (as shown on the right) to distort each vertex according to a sine wave. Distortion Amount corresponds to the amplitude, Place is the offset, and Width is the period of the wave. I then conncected the material to Unity's animator to create a smooth, satisfying animation (pictured above.)

Color Palette Swapper

This shader swaps pixel graphics from one color to another, allowing for easily editable color palettes without having to create all new zsprites.

More on my Palette Swap shader!
Less on my Palette Swap
shader!
  • Made With: CG, Unity, ShaderLab
  • Project: Centipede (Replicated in Unity)
  • Date: October 2022

Goals: 

In the game Centipede, there are different color palettes that change the color of every sprite on the screen, including UI. In order to replicate this using only sprites, I would need to create hundreds of alternate sprites, which would be a huge ask for a three week project. I needed a way to change the colors on already existing sprites to the ones I wanted.

The parameters for the palette swap shader.

Method: 

The shader takes in three colors (the amount of colors in any given Centipede palette) to sample, and three colors to replace the sampled ones with. For every pixel, the shader calculates color like normal, then if the color is within a certain range of a sample color, replaces it with its respective replacement color. After this, palette swapping is as simple as creating a material for each palette and swapping it out whenever the need arises.

Full Demonstration:

SCRIPTING

Last Broadcast Intro Cutscene

The introduction cutscene for the project Last Broadcast, featuring animation, blackout effects, and earthquake effects all done by me (everything else was by other members of our talented art team)!

About the blackout effect!
Collapse blackout info.
The Blackout effect outside of the cutscene.
The earthquake effect outside of the cutscene.

Painted Environment

A system to display 2D sprites in a 3D environment, lending a painted look to the game.

More on the painted environment!
Less on the painted environment!

Flipbook Artstyle

A 2D, hand-drawn art style that simulates the look and feel of a flipbook. Works effortlessly with splines and animated characters.

More on my flipbook style!
Less on my flipbook style!
  • Made With: Unity, C#, Photoshop
  • Project: Robgnet
  • Date: November 2021

Goals: 

The goal for the art style was to simulate flipbook animation drawn with pencil. To do this, I needed a way to flip between different versions of a sprite that wouldn't cause issues when interacting with Unity's animation system, and could be used with a level building tool.

Method: 

The script takes in multiple versions of each sprite (hand drawn by me and edited in photoshop) and rapidly switches between them at a changeable rate. The splines also change which texture is rendered at the same rate. This way, levels and individual objects are easily editable while keeping flipbook artstyle, with no extra work.

Full Demonstration:

VFX