Zodiac Hustle

We took one of the oldest games of perception and trickery and reimagined it in a contemporary way using WebGL.

Internal Project

We took one of the oldest games of perception and trickery and reimagined it in a contemporary way using WebGL. 

As a studio, we set ourselves the task of improving our technical prowess and streamlining our pipeline from 3D modelling to development. We wrapped this functionality with a traditional Eastern aesthetic to celebrate Chinese New Year and add a further level of intrigue. 

Hieronymus Bosch - The Conjurer

Hieronymus Bosch - The Conjurer

What the rat?

2020 is the year of the rat. Those born under this zodiac cycle are said to be clever, cunning and perceptive so we wanted to create a game with these themes being the central tests.

The ‘shell’ game can be traced back over hundreds of years and found in multiple cultures including ancient China. It’s also been a popular pastime of the urban hustler over the last century as a street game.

Once we had the idea set in stone (or ceramics at least), we began to plan the build.

Digital Scultping

It wasn’t quite the scene from Ghost. There were no wet hands fashioning phallic clay, but instead, there was a skilled digital splicing of 3D mesh to create our forms. In our case we used the modelling software Blender.

Beginning with the star of our show; the rat, our senior designer crafted a golden treasure designed to bring out the inner magpie of the player and encourage them to keep a careful eye on the prize.

Matcaps were then applied to the models to simulate a realistic lighting set-up and give a veneer of tangible texture whilst keeping complexity and loading times as low as possible.

Our finished, mat-capped rat in all their glory. We exported the final mesh as a GLTF file for use within the WebGL environment.

Setting The Scene

All our additional details were then arranged in our WebGL environment like that of a stage dressing, layering rendered 2D design components to harness a sense of depth and deliver an immersive experience.

Where it Stops…

One rat, three cups, six potential movements and twelve ‘paths’ for the cups to follow. Using a simple matrix, we could determine which paths each cup could follow. We combined this with some slick animation using the Greensock library (coupled with randomisation to ensure every turn wasn’t predictable).

Drop us a message and let's make something amazing together.

Get in touch

Websites

You name, we do it - and we do it well.

Drop us a message and let's make something amazing together.