Terachain - My first commercial game with BabylonJS

Demos and projects
, ,
1

Hi everyone, I hope you’re all doing well.

Last year I tried to develop a game with BabylonJS and publish it on Steam. Unfortunately, life’s responsibilities and hectic schedules got in the way, and I never managed to finish that project.

However, for about 15 years I’ve had a little project in mind: a chain reaction generator based on very simple rules. I’ve even tried developing it before, but I couldn’t make it fun.

Until, about two months ago, I realized that the project would fit perfectly into an incremental design, and I decided to make a prototype. Some people played it, found it fun, and I continued improving it in my free time and on weekends.

Now, I’ve finally reached the point where the STEAM page has been approved, and most of the mechanics are working, so I’m super happy to announce that I’m finally releasing a game with my beloved BabylonJS:

The premise is quite simple:

Terachain is a short incremental game about generating the largest possible chain reaction in a weird alien machine. What’s the biggest reaction possible with a single click? Earn billions or trillions of points by doing so.

There’s still a lot to improve, but I’d really like to hear your honest opinions.

Please destroy my trailer hahaha, I can handle it! I’m so focused on this rabbit hole of code that I don’t know if the game looks fun or not, so it would be great to hear your opinions.

Thank you so much to everyone who reads this, and to this entire community that has always been so helpful.

I’ve been using BabylonJS professionally for 11 years, and it has changed my life.

Note: Regarding the city-building game I was working on, I haven’t given up on it yet. It’s a project I really like, it was just shelved for a while. I still intend to finish it and also release it on Steam.

Have a great day!

17 Likes
2

Wishlisted! I’m a huge fan of incremental games and this looks amazing!

1 Like
3

Thank you so much for that @AlitarSemiramis ! If I may ask, what did you think of the game’s sounds? I don’t know much about sound design and I’m trying my best to create juicy sounds, but since I’m the only one who’s been listening to them all this time, I’m not sure if they sound good or not.

4

I like the music, I think it goes great for an incremental game as it’s something I would have usually in the background or a second monitor. The reactions fx I think I would probably lower them in volume, they are a little repetitive once you have a big chain reaction going. Like at the beginning of the trailer I like them as there is very little going on, but at the end with a big chain I would probably lower them in volume.

Hope it helps!

1 Like
5

Very cool to see a commercial game made with it. A question, how do you package it into an installable / executable? Tauri or something that includes the chromium engine inside?

2 Likes
6

@64jcl

Thank you! I’ve considered the following options so far to generate the executable:

1 - Electron - I have some experience with it, since I had a commercial software based on this technology for 5 years. However, the builds are quite large for such a simple game (this makes me a little hesitant, but games like Cookie Clicker don’t seem to have had problems with this and sold very well). There are several examples of games that used it on Steam.
2 - NW.js - also has several games on Steam, but I have little knowledge on it.
3 - Tauri - Generates a fairly small executable, but depends on WebView2 (Edge) being installed. If it’s not installed, it won’t run correctly, so the installer needs to include a way to download it if necessary. I saw somewhere about a script for Steam that does this, but I didn’t delve too deeply into it. I intend to look at it more calmly when the time comes.
4 - Neutralino.js - Similar to Tauri, the difference is that the backend also uses Javascript (unlike Rust in Tauri). Basically the same pros and cons as Tauri here.

I haven’t decided yet, I intend to test all the options soon, since I intend to publish the Demo on Steam. But as a last resort, I’ll go with Electron, which is in my comfort zone.

Some posts on the subject:

Fun fact: The first version of Vampire Survivors on Steam used Electron (since the game used Phaser.js, an excellent 2D JavaScript engine). Later, the game was rewritten in Unity so that it could be easily ported to consoles, etc. But even today, the creator implements the functionalities in the web version and then passes them on to the team to implement in the Unity version.

Fun fact 2: Some famous games that used HTML, CSS, and Javascript: Game Dev Tycoon, Vampire Survivors, Cross Code, among others.

7 Likes
7

Nice summary @TiagoSilvaPereira.

There’s also Electrobun as an option, which I only stumbled upon recently, although have not personally used yet.

8

I have used Electron for some personal Windows apps, and yeah it’s a little heavy, but given the size of most Steam games I think it would be pretty fine to deliver a web game.

2 Likes
9

Awesome @inteja thanks! I remember hearing about the electrobun but never looked into it more closely. I’ll check it out.

1 Like
10

Congrats, hope the release goes well! :crossed_fingers:

I’ve been also thinking about releasing CosmoKick on Steam. But for now I’m not sure about it, and the $100 is too much right now unfortunately.

Let us know which solution to use for the executable, would love to hear how it went!

1 Like
11

@AncientA Please do this! It would be great to have more and more games using BabylonJS published on Steam. It’s an incredible engine, and many people are still unaware of its potential.

13

Just replaced all the placeholder UI with a better version (with improved UX, elements hierarchy, etc).

The UI uses HTML/CSS. I chose this method for practicality, but in return I experienced several performance issues. The solution was to use throttle/debounce and element pooling (for example, for animating the text scrolling up on the score counter).

Currently, it’s running well and with a low impact on FPS.

I was also using text directly in BabylonJS for things like displaying numbers and reactions on the board, but I decided to remove it for design reasons: I believe that for this game, one of the most satisfying things is seeing the reactions/rotations occur.

Therefore, I significantly reduced the particle and text effects that were previously there. IMHO, they were cool but hid too much of the action, as you can see in this older video:

Also, please consider following me on Twitter for more game updates. I’ll be posting a lot there: wishlists count, milestones, etc.: https://x.com/Tiago_Ferat

Best regards

2 Likes
14

Just a little update: I added some more improvements to the particles, animation juiceness, and these rings that spin around the board:

I’m currently working on balancing the upgrade tree for the demo; my plan is to have it ready in a maximum of two weeks.

6 Likes
15

Looking forward to this!

1 Like
16

Looks so pretty :slight_smile:

1 Like
17

thank you :raising_hands:

18

That’s awesome — I can’t believe I’ve found someone who’s on the same page!
I’ve also been using frontend technologies to build a commercial game for Steam. I used to think there were very few people doing this, but after seeing your post, I realized I’m not alone on this path.

I feel so lucky to have met you. If you’re up for it, we can run into pitfalls together, discuss tech and ideas, and learn from each other.
Really looking forward to connecting with you!

太棒了，我竟然找到了志同道合的人！
我也一直在用前端技术去打造一款 Steam 上的商业游戏。之前总觉得这么做的人很少，直到看到了你的帖子，才发现原来路上不只有我一个人。

能遇见你我感觉我太幸运了。
如果你愿意的话，我们可以一起踩坑、一起讨论技术和思路，期待和你多交流。

1 Like
19

I’ve taken a different approach from yours.

I’m using Deno for development. During the development phase, everything runs in the browser. Finally, I use the compile command to package it into an executable file, though it requires the WebView2 runtime to run.

1 Like
20

I’ve released two games with Tauri on Steam. I think the biggest caveat is that the Steam overlay doesn’t work with WebView2. This Construct article goes into much more detail, but if that is important to you, Electron or NW.js might be better since apparently all it takes is a command line flag.

1 Like
21

@Yasinli29 Thanks for commenting! I’m happy to see more people using Babylon to create games. I wish you success with your game as well! Feel free to reach out.

@Kochab Thank you very much for this information! If you don’t mind, could you share your games with me (either here or via private message, if you prefer)? I’m curious! Haha.

Actually, while researching Tauri, I ran into this exact same issue regarding the Steam Overlay. However, I don’t think that will be particularly important for my game, so I’m still considering Tauri as one of the alternatives.

In your case, did you find yourself missing the Steam Overlay?