Hey bubble folks! I wanted to explore alternatives to typical web design (such as endless scroll lists, static buttons, 2-dimensional pages) so created this demo for fun using Bubble and a webgl game engine.
Why
Normal websites can use video game mechanics to present content in a way that’s more engaging and slow down the intake of information, maybe even decreasing mental fatigue associated with sites like reddit/medium/twitter/etc. Recently started learning javascript and decided to use Bubble to do the heavy lifting of environment setup.
How it works
The webgl game is embedded within Bubble via iframe, and they communicate to each other using javascript’s “postmessage” and “event listeners”, and Bubble’s plugin “Toolbox”. For example, when a user clicks on the waving character, the game fires a postmessage action with a special key to Bubble, the Bubble HTML element’s event listener saves the special key to a Toolbox’s javascript-to-bubble element, and my Bubble workflow has “do when javascripttobubble’s value is [special key]” to show the corresponding Bubble popup element. Would love to hear better ways of doing this spaghetti process; coding is my part-time hobby so this was an attempt at getting the two frameworks to play nicely together (the load times aren’t that great, and something tells me multiple simultaneous users gonna set this app ablaze as one screen has data communicating every frame ie ~60x per sec).
Some cool stuff that can be done with this framework combo
- Games can be hosted on Bubble (as alternative to app stores / itch.io)
- Content can be unlocked by users after completing mini games / puzzles
- Multiplayer interactions (beyond chat messages)
Tech stack used
- PlayCanvas: for 3D assets, click/mobile touch gestures, js scripts
- Bubble: for 2D elements/popups, content/account management, APIs, hosting webapp
- AWS Lambda: for certain math logic, using python and input/output via Bubble’s api