Inspiration

A long time ago I saw a project called LiquidFun done in C++ and was blown away how computer could simulate liquid so well. My goal was to get something resembling this water and 'gameify' it in the browser.

What it does

Using JavaScript (pixiJS) with liquidfun / box2d conversion and staying performant and synced to build a game around it.

How i built it

Many years of converting the liquidfun library to JavaScript and tweaking it to be more performant and using pixi to filter / add more effects.

Challenges i ran into

The coordinate system from the liquidfun library and the box2d physics vs the graphic coordinate system of pixi to align the two was difficult. It was a lot of testing and fine tuning , and also getting them to scale well was challenging on various devices. Right now because code base is mostly javascript - it requires to be in portrait mode on iOS devices. And for desktop the default window from within reddit works best. Tested on various desktop computer configs, and on ipad M1 and iphone 15. Utilizing garbage cleanup in the code to manage the water effects to be performant while eye catching.

Accomplishments that I’m proud of

Making the water look the way it does and still being performant on different modern devices. Also making the water look 2.5d by being able to flow over objects. As well as the performant shading/lighting using various masking / opacity changes. Also having the leaderboards display users badges and having an entire unlocking/career system that I hope I can expand on more and more.

What I learned

Development is hard.

What's next for LetterFall

I want to continue to add more daily random modifiers, more challenges, more badges (artistic gifs/animations instead of emojis). I want to continue to improve graphics / gameplay with various obstacles and effects. It's an ongoing project I hope to only expand and improve for users to keep coming back to.

Share this project:

Updates