Separating UI and Game logic

Questions
1

To help improve my workflow I was looking to write my game logic in vanilla js and my ui in the a framework like react or solid js. At first I set about by building hooks to integrate the two but, I find it’s more work for me than just writing my game logic purely in vanilla js. Has anyone done this with their own project and if so what’s an efficient way to approach this?

2

So, you would have a react/solid app that contains the UI and the canvas, but then keep all the Babylon JS code imperative? It’s not a bad idea, but could take some extra set up.

I’m doing something similar with Vue and Babylon. I often mount a view app that handles most of the site/project, but then pull in Babylon JS as needed.

Take a look a this simple example. Here I’m using Vue reactivity to update a Babylon JS scene. It’s all built into one file, but the Babylon JS code could be moved out to a regular JS file.

Demo: Canvatorium Lab 002 – vrhermit
Code: https://github.com/radicalappdev/radical-canvatorium/blob/main/pages/labs/lab002.vue

I haven’t had a reason to mix React and Babylon yet, but I think you could do something similar.

3

Thanks! This definitely points me in the right direction

1 Like
4

separation of concerns is a general programming paradigm , regardless of if you write vanilla code or use some framework or both. With an object based or component based architecture the same two ideals always present themselves, namely being Modular / flexible and scalable as very important. There are also all these other acronyms flying around like DRY ( dont repeat yourself ) or KISS ( keep it simple stupid ) that help but the most important one to me that can be applied here is by the gang of 4 ( design patterns ) which is : is always code towards an interface , not an implementation.

The best manner i choose to decouple UI logic is to use an observer pattern , just let the UI dispatch events and let whatever else listen for those and act upon them as desired.

1 Like
5

I think the BayblonJs Inspector would be a vivid example. May be you should refer to it.

6

I’m using ECS for decoupling Babylon from game logic. The only a few systems communicate with Babylon - renderSystem(for updating transforms) and loaderSystem(it connects meshes to their entities). So it works great for real time games. For non real time commands would be more suitable.