TypeScript starter kit for BabylonJS

[brianzinn]

Hi,

 

I guess this is a question and an answer, but not an announcement.  I wanted to switch my BabylonJS game from javascript to TypeScript and wanted to share my experience in case it will help somebody else - otherwise looking forward to finding an even better way!  The project template I used will run on Windows, Linux and Mac.

My javascript was getting a bit unwieldy, so I looked around for a TypeScript solution that would also be easy to deploy and integrate later with server-side.  I found that I was doing a lot of things in javascript by convention (ie: 'name' property on meshes) and I wanted the benefits of the structural typing provided by TypeScript - so, a compiler to pick up on my mistakes instead of run-time errors.  I got additional benefits like better intellisense and less bugs (actually found bugs during the conversion!).  My code is easier to read and my intent is sometimes clearer on the purpose of functions.  Since switching a couple of weeks ago, I have found that my code is a lot easier to maintain and most importantly much easier to change and there was not a big learning curve.  I checked out quite a few solutions like starter kits with TypeScript and settled on using the Microsoft SPA templates.  I created a github demo repo:

https://github.com/brianzinn/dotnet-new-babylonjs-starter

The first commit is generated by the template and the second commit were the changes to add BabylonJS and create the attached screen.

If you opt for Visual Studio you can put a break point in your TypeScript and it will break on code running in your scene.  I only installed the free community version of Visual Studio, which installs the .NET Core dependencies as well.  In the attachment can see that I clicked on the sphere in the scene and I can inspect the Mesh properties in the IDE.  Nothing really new if you are used to the browser debugger, but nice that you can use your IDE and it will break in Chrome or IE.  If you haven't used other transpilers like TypeScript/GWT that generate code maps for javascript, keep in mind you are breaking on TypeScript, but the browser is running javascript.  You can look at the generated javascript in ./wwwroot/dist (that is what is served to the browser).

I attached a breakpoint and the BabylonJS scene of the project running.

 

Have Fun!!

 

[GameMonetize]

Thanks a lot this is cool!

[Nesh108]

Good stuff! I am also using the Typescript version, thanks for making and sharing this