Fish Blaster 3D

Inspiration

Arcade around Singapore (and around the world we dare say) have one thing in common: the weird fish shooting game that all the aunties and uncles always play. We never understood what is so attractive about such a game, but one thing we know for sure is that those machines are where the big bet is at. There is no other machine in the arcade that could spit out more coins as rewards than them, and that is part of its charm. We take inspiration from that classic game and give it a bit of modern decoration.

We wanted to turn it into a 3D game on the web, but not the easy way, of course, because who would want to do it the easy way right?

What it does

Fully in-browser 3D game

How we built it

For rendering: Three.js
For physic engine: Cannon.js
For back-end: AWS EC2, Express.js, Node.js and Socket.io
Other technology: Typescript, Blender, WebGL

We build the game entirely using a javascript library using three.js to render 3D objects and cannon.js to process the physic event in the game. We then deploy the application onto AWS EC2 instance and configure it to run with express.js and node.js.

Challenges we ran into

Procedural textures, making the textures look correct from Blender to Three JS, picking up these rather big libraries in a day.
Syncing behavior in a multiplayer setting as everyone need to see the same thing, else it would not be much of a fair game.