Video game demo: Using Bubble and webgl game engine together

video game demo

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
9 Likes

Hi!

Great post! Although the link seems to be dead. Just wonder if you have progressed further from this. I am looking for ways to incorporate game engine in my bubble app and make it take to the database and vice versa. Have not find a way to do it yet so what you have done may provide great insight.

Thanks!

Hey @leoyizhou, awesome to meet someone else looking into bubble + game engine projects!!

Sorry about the link - it’s from a pretty old project. Some updated links:

Hope this helps!

Looks amazing! Thank you so much for sharing! I need some time to digest it though since it is out of my technical knowledge but great work

1 Like

I try to play only those games where I can apply probability theory and enchance my math skills. As you can see, my previous GMAT score sucks. So I review csgo coinflip skins https://betmyskins.com/review/rollbit/ and try to review and pick up games where I can figure out chances to win the game. I know it is not easy, but even Harvard professors say that gambling depend on probability, and only partially - on chance.

1 Like

Thanks!! It’s nice for me.