I created my First Babylon.js Game ( Tutorial and code Example )

Demos and projects
, , ,
1

Screenshot from 2024-12-10 13-17-21
Screenshot from 2024-12-10 13-17-211512Ă—960 108 KB

Hi guys i created my first 3d game with babylon.js, is basically a tutorial of how i crated it, cause i am really new to 3d game development, even if the game is simple it contains several concepts we must learn.

My objective is to Learn and in the meantime show others that are in the same position as me how to start using Babylon.js. For that reason i created a list of videos since i start the game until i considered its done, passing for setting up, adding meshes, materials, sound, textures, etc.

i know is not perfect it can show you the basics, and i would like to give some feedback of how can i improve that, thanks in advance and please, PLEASE don’t be rude on my language there, i don’t speak English its a personal challenge i have to create content in English even if i speak Spanish natively.

here is the link to the tutorial in youtube:
babylon.js bricks game tutorial list

here is the link to the project in github:
babylon.js tutorial game repo

( just follow the instructions to compile it and run it )

8 Likes
2

Hey! Congrats! :wink:

Sorry bro, but you’re not there to teach others yet. :see_no_evil:

Please take my words as constructive criticism:

The first thing which shocked me is the lack of formatting of your code:

image
image1262Ă—628 132 KB

image
image828Ă—514 49.9 KB

Search the web how to format code. You can use the VS Code’s built-in formatter to easily format it or you can install a third party formatter.

I would suggest to use let and const and don’t use var at all.

Split your code into multiple functions/files each dedicated to a certain functionality. Each function should do only one thing. (init the scene, init the gui, hook the event handlers, etc…)

Regarding the babylon.js related code there are some areas for improvement as well.

Despite these issues I appreciate a lot the effort you put into creating the game, the video tutorials and making them available for others!

Keep coding and coding and your skills will improve very quickly!

there is nothing wrong with your English tho…

3

@roland i really appreciate your comment…
first i know this is a tutorial for beginners so they can have something they can start with, if there is something can help you its fine to me, if not is also fine.

since ecmascript 2015 i use const and let, not var anymore, i think i don’t have any “var” in my code, this first tutorial it was created in the index.ts file just to go to the point, in fact i have another tutorial i will upload these days where i am using classes and a better structure, i mentioned that i think in the first video.

so for the formatting i buy it, i didn’t realize it had no format, will fix that today.

1 Like
4

image
image1920Ă—948 83.6 KB

I would recommend a lot of coding, practicing, learning from the docs/existing projects. I’m pretty sure you are already devoted to babylon.js and I can’t wait to see your next production, maybe an improved version of this game :wink:

For a more precise collision detection you could use the mesh intersection functionality provided by babylon.js: Babylon.js docs

or since it’s happening in 2D space you could just use:

function isCircleIntersectingRectangle(circle, rectangle) {
    const { x: cx, y: cy, radius } = circle;
    const { x: rx, y: ry, width, height } = rectangle;

    // Find the closest point on the rectangle to the circle's center
    const closestX = Math.max(rx, Math.min(cx, rx + width));
    const closestY = Math.max(ry, Math.min(cy, ry + height));

    // Calculate the distance between the circle's center and this closest point
    const distanceX = cx - closestX;
    const distanceY = cy - closestY;

    // Calculate the squared distance and compare it to the squared radius
    const distanceSquared = distanceX ** 2 + distanceY ** 2;
    return distanceSquared <= radius ** 2;
}

…and switch to real Typescript code with type safety as soon as you can. You will enjoy a much higher developer experience and productivity.

Use a starter template for your projects. I’m using this one:

and there is another very cool one by @RaananW GitHub - RaananW/babylonjs-webpack-es6: Babylon.js basic scene with typescript, webpack, es6 modules, editorconfig, eslint, hot loading and more. Will even make coffee if you ask nicely.

1 Like
5

i see, those var where set by the example i was using, gonna change them too in the code,
btw @roland i have 14 years coding :grinning:, but thanks man, i am always alone and i appreciate somebody is taking its time to read me.
I am using TypeScript in fact that is the main reason i am using babylon.js instead of three.js
one of the main reasons this tutorial is like that is because i want that to be used as starting point for somebody does not know how to start even if does not have Ts knowledge that why i am showing how to setup, when i started i had to spend some time setting up my environment.

for the functions you mention, i am not aware of isCircleIntersectingRectangle, only of intersects , intersectsMesh and intersectsPoint, i am still discovering and getting familiar with babylon, will take a look at that code, however the game is not a 2d Game, camera’s perspective is 2d, but the game is using 3d meshes, world space and all of that.

1 Like