brianzinn

TypeScript starter kit for BabylonJS

Recommended Posts

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!!

 

typescript_breakpoints.png

typescript_playground.png

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.