[Game] Village Craft

Update 6

  • Added: Tailor, Hairdresser (for character customization)
  • Added: 2 huts (for more “customers”)
  • Added: animation for fisherman
  • Added: chopping sound
  • Added: Drawing your own flag!
  • Removed: upgrade points. I decided to simplify the gameplay.
  • All sounds and music have been compressed (size was reduced x2)

How to draw a flag: #webgl #gamedev BabylonJS RawTexture in Village Craft - YouTube


Update 7

  • A lot of polishing.
  • All icons have been baked (Previously I’ve used css filter to get a proper result)
  • All upgrades’ prices have been reduced
  • The biggest thing for me - the game icon.

After 5 months of development I’m happy with this intermediate checkpoint:

Screenshot 2023-06-16 at 17.27.08

Guess who I’ll work with? :grin:


Update 8

It’s soft launch time! I’m very happy to share with you that my game just published for soft launch.

Thank you all guys for your help and support!

Now I need to fix some bugs :smile:

The link: https://poki.com/en/g/village-craft


Update 9

After the week, I have several issues:

@Evgeni_Popov kindly helped me with some of them.

Issues count related to BABYLON itself is small (like < 1% users affected). I resolved first issue which gave me most problems.

So now I can say that BabylonJS works good in production for large audience!


Update 10

Almost 3 weeks in the soft launch. Some numbers should be higher, some - lower.

Right now I completed migration from umd to es imports and decrease the loading size by 0.6mb.

If you’r using Vite, you can analyse it by run a command: npx vite-bundle-visualizer

Also I’m looking for new feature to increase user’s lifetime. How about battles?
Battles prototype

Thanks to ECS it’s really easy to implement any features.


My gosh! this is really neat!

Thanks for the update! Keep them coming!

1 Like

Gosh, I cannot keep up with all these updates! Looking good! :+1: :+1: :+1: :+1: :+1:

1 Like

There are some performance issues on mid-end devices and IDK what I should do next with it. I already inspected the code and don’t understand how to improve the rendering time.

My scene contains ~60 unique geometries. Almost all meshes have instances(from 5 to 500).

Basically, I have two types of objects: static and dynamic.

The Static objects don’t change over the time. Like Mountains, ground, flowers etc.

The Dynamic objects change over the time. For example, the plank can be placed in output cell in the sawmill or be attached to NPC which walks around the village.

I’m already using instancing and progressive mode. But maybe I miss something…

Also I tried to replace instancing to thinInstance but I didn’t help much.

So maybe SPS can help me for static objects? Or 1M verts are too much for WebGL?

@Evgeni_Popov need your “pro” vision :pray:

It’s hard to say, because your screenshot shows good performance, with low figures everywhere…

We would need to see the same stats but on a lower-end device, to know where most of the time is spent.

As far as static meshes are concerned, you could try merging meshes that share the same material (if there are any), but the number of drawing calls is already low, so I don’t think you’d gain much…

If the drop in performance you’re seeing concerns mobiles, the problem may lie with blending/transparency, if you’re using them: (some?) mobiles are notorious for not always behaving well when blending is involved.


All my geometries are opaque… I’ll try to find or buy low-end device…

What do you think about dynamic objects? Do instanced meshes work good when you need to change their positions every frame? Or it worth to convert it into thinInstances? I’m only change the position/rotation/scale and not materials/alpha.

If you can use thin instances, it will always be better (as long as you don’t have millions of thin instances that are not visible on the screen!), because we do basically 0 management for them, whereas for a regular mesh or an instanced mesh, we do quite a lot. Using thin instances will reduce the number of active meshes, which is a bit high in your report.

1 Like

Cool! Thanks!

Could you please explain the difference between one mesh(for example Merged from other geometries) with 200-300k verts or 10-15 meshes(100-1000verts each) with instances? How does it impact CPU/GPU? (one material in both cases).

If you merge several meshes into one, there will only be one draw call to render it, whereas you’ll have as many draw calls as meshes if they’re not merged.

What’s more, on the JS side, each mesh undergoes a number of operations before being displayed (there’s a loop over all the meshes in the scene in Scene._evaluateActiveMeshes). So having fewer meshes will reduce the time spent in this method (which is one of the most time-consuming).


Any chance this is open source? I’ll gladly add it to my awesome-babylonjs list if it is.

Unfortunately no, because I work with Poki. But maybe in the future I share some parts of the code. But honestly, BabylonJS has a good documentation and this community where you can find an answer in 95% cases and its great!


Update 11

More buildings have been added. And I rebuilt an environment. Now it looks good for me. Blender Skill +100 for this time.

Additionally I got some performance boost because now there are only 2 meshes for rendering env(instead of 50+)

I’m finishing a new battle system:




I’ve released a game to Google Play! Yes, I’m not wrong. Google Play!

So how is it possible?

There is a cool technology called TWA - Trusted Web Activity. It allows you to distribute your web application like a native android app.

I use Bubblewrap to generate all files which needs to create an archive with the game.

So we have the game based on BabylonJS on Google Play!

CC @PirateJC

How is that cool!


@Alexander_Sosnovskiy congratulations! This is awesome news!

Can you remind me if you’re on twitter and what your username is? I’d love to help spread the word about this!

1 Like

This is SO COOL! Love to see how it’s evolving so much

1 Like

@afrokick is my twitter account. Thanks!