Tuwhiri
Roles: UX/UI Tech Art Game Art
Employer: ARA Journeys
Timeframe: 6 months (for my involvement)
Tuwhiri is a geolocation game that puts indigenous stories of place into the places they came from.
I joined the team reasonably close to release, and was tasked with establishing a distinct look & feel within the constraints of the existing project flow, creating the game’s trailer (shown right), and its first AR scene.
UX/UI
Tools: Figma Photoshop Unity
We needed a refresh of the existing UI to feel more contemporary, more cohesive with the varying art styles of content within the project, and to be easier to understand. This style needed to hark back to nature & Māori culture, whilst being age-agnostic.
The UX flow was inherited from a previous project, so adjustments had to be made with limited structural impact. Using Figma, I redesigned & prototyped the UI to better prioritise information & make interactions clearer.
I then did a paintover in Photoshop that was complimentary to the varying content art-styles in the project, and implemented these new designs in Unity.
The inherited UI from a previous project compared to the redesign I built in Figma, pre-paintover.
The final textured UI as implemented in the game. The Māori patterns used were all chosen for their meanings - e.g. the rewards crafting background is Pātiki, for abundance.
Tech Art
Tools: Unity Shadergraph Illustrator Mapbox
Implementing the organic aesthetic of the UI required custom UI shaders and a custom Mapbox style.
I used Shadergraph to build the shaders needed for real-time WASIWYG editing. The project’s version of Unity did not support Shadergraph materials in UI, so I edited the generated Shader code to remove the conflicting passes - a solution I was the first to share within the Unity forums.
This shader saved a lot of time when producing UI content - the same image could have different edges & overlays automatically applied in-engine.
Textured, spiralled loading bars require a few extra steps!
Representing the painterly style in Mapbox - a vector-driven maps platform - proved to be an unusual challenge!
The platform doesn’t allow for bitmap-textures, so all textures had to be created as vector assets in Illustrator. Each outputted SVG texture had to be below 400kb - a number very easily reached when creating a painterly look.
From the original style, to the vector-paintover in Illustrator, to Mapbox Studio Implementation. The live style can be viewed here.
The game’s first AR chapter repurposes Phil James’ artwork for the existing Stories of the Manukau Harbour motion story.
I dissected the flat paintings into separate components suitable for real-time spatial animation (painting additional textures where needed), and animated them using Unity’s Animation tools and Shadergraph.
The finished AR scene in the Manukau Harbour - the location the story is based upon.
This shadergraph powers the entry/exit animation, the visibility of the taniwha below the surface, and the volatility of the water’s surface.
Game Art
Tools: Photoshop llustrator
As part of the visual refresh, I got to re-design the crafting material icons. My goal was to make them recognisable as their real-world counterparts, visually distinct from each other, and legible on both light & dark backgrounds.
From early sketches, to a vector style exploration, to final paint (with bone swapped to the Kūmarahou flower along the way).
As a material that’s not often seen in its raw form, Pounamu was an interesting challenge to get just right! Eventually a standalone texture study helped crack the case.