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.
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!
@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.
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
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:
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 , 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.