Zodiac Hustle

Staak

An experience developed internally at Staak to flex creative and technical muscles and continue to grow and broaden knowledge.

Tools & Skills:

Vue.js, Node.js, Express, WebGL / three.js, GSAP

About the project:

Zodiac Hustle started life as a in-house sandbox project to sharpen our skills in areas our clients were looking to explore.

Zodiac Hustle was created to celebrate the Chinese New Year 2020, the year of the rat.

The game is based on the classic gambling ‘cup game’ where a player tries to guess under which cup a specific object lies. A model of a golden rat was used in this case, which hides under a stylised cup.

Each level starts with smooth camera motion for the user to try and track the rat. The cup locations and movement is simulated per level so no two games are the same. Calculations are made to ensure the cups never collide or move into positions which wouldn’t be possible in reality.

The intro and outro screens which ‘bookended’ gameplay used a masking technique and render targets to be able to transition between the gameplay states and added a level of cinematic polish. Users progress through levels of increasing difficulty to see how long they can identify the location of the golden rat. At the point the user fails to find the target, the game transitions back to a ‘game over’ state where they can share their achievement through social media.

Performance and mobile compatibility enhance the gameplay, allowing a smooth experience on both desktop and mobile.

Zodiac Hustle thumbnail

Zodiac Hustle.

Screen before entering the game

The start screen displays simple UI which mysteriously fades to show the game once a user clicks the start button.

A congratualtion popup shows when you correctly guess the rat position

After a sequence of cup movements and smooth camera motion, the user is prompted to choose which cup they think the golden rat is hiding. As the levels progress, the difficulty and spped of cup movement increases.