What would the approach be for having more than one babylon game on your website?

Hi, long time unity user here getting into babylon js.
My goal is to eventually have a few different solitaire type games on one website.

I’ve downloaded the babylonjs-webpack-es6-master example from github and I’ve got a basic understanding of the setup, namely that index.ts is set as “main” in the package.json file and then you’ve got some webpack config type stuff doing some magic to combine everything together and then index.ts is the entry point essentially.
With how things seem setup I’m harving a hard time conceptualizing the approach for having more than one babylon game on my website. Wondering if someone could point me in the right direction to get a sense of what I need to learn and how I should think about my approach?

Thanks!

Hello and a warm welcome to the BJS Community.
You have come to the right place to get the answers you are seeking.
Let me ping @RaananW who will certainly have some valuable input to share with you about this magic :magic_wand: going on when setting up a BJS environment. Shouldn’t be too long. :hourglass_flowing_sand: Meanwhile, have a great day :sunglasses:

Oh, that answer is an entire book probably :slight_smile:

But the short answer is - you do it any way that makes sense to you.
How I would do it? You start with a website, simple HTML with different buttons that are your different games. Similar to all of those flash-games websites. Then you define different sub-projects in your repository. A mono-repo style project that has a basic core with the basic abstract functionality (like rendering a card, basic game logic, simple state management, menu UI and so on), and N projects that are N different solitaire games. Those games use the core library, the one with the abstract functionality, and are built separately. You then deploy them all to different URLs and redirect from the initial HTML page.
There are probably 1000 different ways of implementing that :slight_smile: The way I suggested will maintain a separation between the different games, while allowing as much usability as possible.

4 Likes

@florentraff Not sure this answer is the one you expected but it’s the one you can get from just this ‘high level’ question. Methods and approaches are numereous and likely different for each dev and use case. I can only suggest you would investigate/assess one or two of 'em and next come back here with more specific questions on how to implement, deploy and maintain.

Actually one may have thousands of 3D scenes at a website - 3D Blog Archives - BabylonPress

2 Likes

if you end up using a website framework like React - they often have a router to load up games per page. You can take advantage of the ideas Raanan shared as well on using workspaces, but you can also get a lot of code re-use in a single site and building your games with Components. Here is a demo of different scenes with navigation - although each page isn’t a game it could be (the code is all open source):
https://brianzinn.github.io/create-react-app-babylonjs

This strategy works well also to sync state from your game to DOM elements as your game progresses. You may opt to use all Babylon.js GUI as well - there is a demo in that site.

2 Likes

Thank you Raanan, I think this is what I was looking for. I think in my mind I thought it might make sense to have each game have its own project folder and its own version of the engine if you were planning on scaling up to have lots and lots of games on a page (such as https://poki.com/). However I think I’m getting way way waaaay too ahead of myself. In the immediate I’m just looking to make a handful of games at the very most, all of which would be similar in aesthetic and design probably, and so I will take the mone-repo approach as you described it which makes a lot of sense.
Thanks!
-Flo

Thanks Brianzinn. Gonna note this approach using a react based framework and router to load up games. Out of curisosity do you think that’s how something like this, https://poki.com/, is done?

In the meantime I am indeed going to take the mono-repo style approach and split the games up but keeping a shared version of the babylon engine and shared components as needed.

Thanks!

I will do just that! Thanks :slight_smile:

no, that’s done as an IFrame inside of an IFrame - the game that I looked up was using an older version of phaser (v2.6.2).