Turn-based 1 vs 1 board game with mobile + web networking

Hello im torn between babylon js, godot and playcanvas to build a mainly web based turn based board game like clash royal for example.

matchmaking, rating system , maybe a chat/messaging system between players, a in-game store with skins( microtransactions), effects/animations during battle

Will have 1v1 but may have also 2 v 2

im actually just now trying to learn javascript and react(very little experience in programming, ) , and i also know godot uses gdscript which is probably another thing id need to learn. A little bit confused about all this, but can we use react with gdscript , for example ?

Babylon js and playcanvas both use javascript so that would be easier to learn and they are made for web games specifically .

Are those web export problems of godot solved ? Which engine should i use for this ?

Well, since you’re in a Babylon forum, we’ll probably be a bit partial here and recommend Babylon :slight_smile: Unfortunately I have no experience with Godot, so I can’t tell anything about how web export works there. Worth noting too that if you make your web game and later on want to make it a native experience, you can use Babylon Native for that: BabylonJS/BabylonNative: Build cross-platform native applications with the power of the Babylon.js JavaScript framework (github.com)

1 Like

''native ‘’ u mean mobile ?

Yes, mobile Android/iOS and also a native Windows application

1 Like

in general, can i achieve in babylon what could also be achieved in godot/ unity ?

for example lets say , league of legends skill/ability effects (fx), are on the low end of graphics, is that the level of babylon ?

What do you mean by “level” here? You can achieve anything in any framework really as they will all use the same graphics backend on the web (WebGL/WebGPU).

You can do ability effects perfectly well in Babylon using particle systems, @PatrickRyan has a great demo of a character using particle effects

1 Like

By level i mean fidelity, what is the highest graphic fidelity that can be achieved with babylon, can valorant type graphics be achieved for example ?

There is no fundamental limit or cap to babylon native’s performance in rendering; it does not matter if its unity, unreal, godot or babylon that’s making graphics api draw calls on a given machines OS. Whatever GPU you have on your machine is the fundamental limit or cap concerning the level of graphics fidelity you can achieve. With regards to babylon.js running in the web, your question is actually what performance differences are there between webGPU and native GPU applications. That I’m actually not sure of, but I am 99.9% certain that LoL and Valorant do not hit any threshold in resource utilization where you would actually notice a difference if it were running fully on webGPU. However, lets say you have a machine that is just barely capable of running horizon zero dawn at 60 fps, if you were to try and run horizon zero dawn fully on a webGPU port on that same machine, I doubt it would run at 60 fps. That’s just my guess though.

2 Likes

nice , thanks for the detailed response.

Would you mind to check if this effect is possible in babylon ?

As @arcman7 said, and I agree with …

So, yes it’s possible, but you’ll need to learn how to code (or create using visual tools) these effects in whatever 3D engine you choose for your project, be that Unreal, Unity, Godot, Playcanvas or Babylon.js.

3 Likes

i was talking about the web version of babylon, for a web game not desktop, is it the same ?

And also if down the road i wanted to switch to webgpu ( when its available) will it be easy ?

And last thing, do i need to upload my game to a platform like itch.io or poki.com for it to work? cant i just have it on my own website ? Is this more difficult ?

And also if down the road i wanted to switch to webgpu ( when its available) will it be easy ?

WebGPU is already shipped in all chromium browsers. As for switching to it… yes and no. Babylon.js is setup in such a way that the engine can somewhat arbitrarily run on webGL2 and webGPU:

  createDefaultEngine = async function (canvas: HTMLCanvasElement) {
    const engine = new WebGPUEngine(canvas);
    await engine.initAsync();
    return engine;
  };

  createWebGL2Engine = function (canvas: HTMLCanvasElement) {
    const engine = new Engine(canvas, true);  
    return engine;
  };

However, just because you’ve specified to bjs to run on webGPU doesn’t necessarily mean your making full use of the rendering power that webGPU gives you. You need to learn a lot about how things are actually rendered among other things to get into a mindset where you really start reaping the benefits. I can tell you right now, in the near future there will be at least one framework that builds on top of bjs and severely cuts the required learning curve. Generally though, it’s still super valuable as a game dev to learn this stuff.

As for the effects you’ve shown above, you could do that with even just webGL2 especially if they’re just animations. However, I recommend setting yourself up for long-term success and starting with webGPU, but that’s just me.

And last thing, do i need to upload my game to a platform like itch.io or poki.com for it to work? cant i just have it on my own website ? Is this more difficult ?

I would always chose to cut any middle parties and just host on my own website. The only reason I would personally chose to put my own game on itch.io or some other popular domain is for searchability and discovery reasons, i.e. if people are more likely to find your game by navigating those domains then by all means.

Is this more difficult ?

Only if you don’t know how to code. If you can build a web page, hosting on an aws s3 buckets set in static page mode is a 4 minute process.

2 Likes

@zoom_0, to give you a simple answer to your questions about if the above particle effects are possible - yes, you can make all of those in Babylon.js. The long answer to the question is that our particle systems are open enough to create almost anything you want, but it will be up to you to create the effects and code to drive and/or mix the particle systems with meshes. We have a few out of the box effects just to show as examples of creating layered FX, but for the most part the particle systems need to be designed in color, texture, timing, and motion to achieve the effect you want.

The bigger challenge you mentioned above will be the networking system to create a synchronous or asynchronous experience. Babylon is the rendering engine, but the multiplayer aspect would need to be some other form of middleware, as you would likely need for other engines. But you can certainly host this entire experience on your own server, or you can contribute it to a library that supports html5 games.

Some links to help you see how to set up the experience would be as follows:

I hope this helps answer some of your questions, but please let me know if you have more.

4 Likes

Do you have any opinions on GitHub - effekseer/Effekseer ? The desktop editor is really easy to install and there is a wasm package on npm. It has integrations with every framework including three, godot, and unreal. Im a bit torn on my thoughts tho. Imo a gltf extension seems like a better thing to go for as a portable non engine specific format. I think the msft audio gltf extension would pair great with a particle extension and kind of serve the same purpose. Anyway ur knight is badass.

@jeremy-coleman, I haven’t used effekseer, but from what I can tell from the github page, docs, and video demos it looks like a stand-alone visual editor for particle systems and materials. Seems like they have a lot of samples that can be used as a template to start or learn techniques from. It seems like an interesting hybrid tool, but it would take some doing to connect it to Babylon. We do have a simple particle editor in the inspector and we save our particle systems to json for ease in loading. The other thing I noticed in effekseeker was a material editor, similar to our node material editor to help with mesh FX. Node materials are also saved as json files so that we have a similar interface for our loaders.

While we don’t have the large number of templates available, the nice thing for our particle systems is that the json can be shared with any experience so there could be a library of effects that are shared and/or used as templates. Same with node materials as most effects will need some sort of combination of particles, mesh/shader FX, and post process FX.

In terms of a glTF extension, I think it would be an interesting concept. Right now, there is a big push on behaviors in glTF, but I could see a future where particles are standardized. I think that would be further in the future as a majority of the companies contributing to the glTF spec seem to be more e-commerce focused rather than game-focused. But there’s nothing to say a custom extension couldn’t gain some traction with the format.

2 Likes