Tech Art Portfolio

Particle Systems

Death Petal | Final-Year Project | TUD | Unity

During my work on Death Petal, we spread our roles between multiple people, with each person given an area of primary and a secondary responsibility. It landed upon me to handle the Art stream of development on a secondary role. This I fulfilled by working on the Particles and broadly the VFX of this game. Most of the development of these visuals was done in engine utlizing shaders and in-engine Particle System.

Layered Particles

Going into this project I have never touched particle effects in games beyond dragging in the particle system in engine and getting frustrated. It was with Death Petal that we had to add a lot more atmosphere and life into the project so I decided to give particles another shot. Being lost as to where to start work I ended up pushing this away. It was while researching and learning more about shaders I stumbled across different blend modes as used in shaders that the example of FFXIV's visuals were given as an example (specially Freya Holmer's Tutorial series on Shaders.) From this I looked at Final Fantasy's Particles where they layered a lot of primitives and textures to create in depth effects.

Here you can see the simplest effect which utilizes primitive Quads as the base to show the flash, (FlashFixed_Part texture), the flowers and a blank squad as a trail to create a pretty explosion effect

Texture creation and shapes

This basic workflow of creating the textures, and using simple shapes to create immersive effects was used for all of the effects in game. A lot of the textures were created both in Affinity and Photoshop and those were repurposed in multiple places to add to the player feed back loop (notably when the player character picks up a collectable, shoots their gun and defeats and enemy)

Reload Circle (Shaded)

Reload Circle (Wireframe)

Mesh and Shader Layering

Applying this concept further beyond just particle systems I used the concepts behind layering and stacking effects to static objects too. Notably the Reload Circle was a tutorial object that the player needed to see from far away but needed to understand that it is both ephemeral (player can walk through it) and powerful (does a meaningful effect) To do this a combination of shaders was used to fade textures into transparency while rotating and animating them. Most of this effect is made up of simple cylinder meshes and quads for the spinning circles.

Paper-craft Look

Interim | Game Jam Game | GamesNow! 2025 | Unity

For this small game jam project, team organization was quick and messy. With one programmer and two artists, as a more focused generalist, it landed on me to make the bridge between these fields, and more importantly drastically different artstyles.

Rotational Billboarding

To fit the work of our talented 2D artists into the 3D low-fidelity world of Interim, It took the sprites made by the artist and created a simple billboarding shader to be able to see the 2D object. This is done by having a Quad placed in the world ,with the texture of the sprite, always rotate to the x-y axis of the player's camera. To add the "illusion" of 3D and the objects existing in space, the sprite transitions through different angles, based on the difference of the player camera's view angle and an arbitrary angle defined by the Quad (this was set to default to the angle of the Quad on start of game).

Inverse-hull outlines

As all of the 2D objects in the game have a white outline to make the pop, the 3D space felt a bit lackluster and with the flat lighting and lack of shadows applied to the whole game all objects had to be more distinguished, I've taken the tried and true method, Inverse Hull. This is done by utilizing a second pass where we take the original mesh, and simply add value to each vertex as to make the overall mesh bigger, the value we add will be the thickness of our outline.

Texture Boil as compromise

As the whole game is fairly static and the sprites had a paper texture (as a nod to their flatness), I noticed a space to add a simple disturbance to the sprite, however as this was a game jam I got quickly shut down by the amount of work this would require. Not wanting to make the game feel too stale, I ended up adding a procedural boil effect. All that's needed to achieve this is two functions, a snap function that "rounds" the time value used in the shader, and a random function that returns an offset of a given vertex to move it around, by passing in the time from the snap into the random function we get a simple noise to apply on top of the Quad that's rendering our shader to create this pretty boil.

Universality of functions

With plenty of tools under my belt a lot of the effects in this game are a permutation of these 3 shaders! All it took was to mess with the strength of the different variables to create new effects (the blurry eye, watching the player, is the boil effect taken to the maximum) or a few new lines to create completely different visuals (the skybox on the right is actually just a modified boil effect without the snap and toned down randomness but applied to color)

Ascii Art Shader

Witch Game | Prototype | Unity

Being fascinated with older graphics, and having a new found love of Ascii Art. I wanted to see how a full scale Ascii Conversion would have to be done.

Shader Graph

The tool I decided to use for this section, was Unity's Shader Graph as it is similar enough to other shader tools found in (for example) Blender. This shader ended up not being as complicated as I anticipated going into creating it, As it ended up fitting into two simple functions that combine into the final product

"Pixelating" the UVs

Firstly I needed to break down the viewport of the camera into squares. This was done by dividing the UV of the camera's input by a predefined "resolution" value, to avoid rectangles in the final product, this resolution value was changed proportionally based on the aspect ration of the viewport. With this when we use the newly changed UV values to read the cameras input I ended up with a pixelated screen! This effect was pretty useful on it's own but it was now time to add the Ascii Text.

Fitting in the Texture Arrays

To add the Ascii I needed to take the pixelated screen and convert every value into grey scale as to be able to decide which letter to show on the screen. My original idea was to actually render text on the screen, but after seeing the performance of rendering so much text and the computational cost of the GPU talking to the CPU, I ended using a simple texture (seen below) instead. This texture was then "chopped up" into a Texture Array and based on the grayscale value of our view decided which of the letters to use in the Ascii Array. Finally the i dragged the color back in from way before the removal of all color simply multiplying it's value with the Ascii Picture we now have to achieve the final effect.

Doodle-replication

Carabica | Unreleased | Showed at Gamerfest 2024

This was another quick project, which due to it's artstyle did not require a lot of (if any) shader work. The only shader was a simple billboarding effect which has already been described before.

Game Object Layering & Feedback

The real meat of the tech art aspect of this project was simple interaction feedback given to the player when driving this silly multitasking game. The main starting point was the hand on the steering wheel. I was given the hand asset and all of the assets of the car in texture. To get the wheel to react to the player input I took the assets given to me, chopped them up into their individual objects, and layered them on top of each other, creating scripts that move objects to their given follow parents. In the case of the car the only object that actually reacts to player input is the steering wheel and the rest is simple follow scripts.

Animation Curves

For the closing of the eyes, for when the player runs out of coffee, two planes (eyelids) are linked to a tiredness value causing them to close. But this movement was far to rigid and had no feel to it. Another issue was having to create multiple values defining when during the tiredness values should the eyelids show up how quickly should they close and etc. To save trouble to the rest of team I added an animation curve, a simple tool where anyone can define a Bézier curve linked from 0 to 1 which is then mapped to the tiredness value. The Y value of this curve was set to how close the eyelids are to the center, and that gave us the ability to really fine tune this mechanic's feel.

3D Model Rigging and Implementation

Office Mobster Agni | Prototype | Blender, Unity

As a part of my collage assignments I was required to create a simple humanoid model. This is where my opportunity arose to create an in-game model that both functioned and mainly looked good in an game engine and not just in its original software.

Rigging and Weight Painting

Rigging of this model went fairly painlessly, ensuring all of the bones are in their right place, named properly to ensure good documentation for when I needed to eventually fix some old mistakes. The real crux of this model came in the skirt worn by the character which needed to be pain painstakingly weight painted. The low-poly look of the model introduced unique challenges where certain angles of the legs didn't allow for nice bending and adding more topology would ruin the low-poly look, as this low-poly model already has plenty of faces.

Limited Texture Work

To create a more interesting look I got inspired by the aesthetics of the game Sushi Ben with it's beautiful flat colored spaces that boldly pop on the scene. To limit my self I attempted to create a small texture with simple blocks of color that I used to create a UV map that reasonably covered the model. For any further detail I left space to add the face, badge and other outfit details.

Better Game Shading

My main frustration with creating, 3D models is the transition from software to engine, where a lot of the fidelity and charm gets lost. With this model my goal was to utilize custom shaders to really nail down the look of the model and make it look better than it's original. Here I took the model from Blender into Unity, where I set up a simple blank scene where you can test out all of the transitions, material changes and different camera angles. All that is needed is the code, and more art assets, for this to be plugged straight into whatever game you wish!

Page updated

Google Sites

Report abuse