solved Babylon and Typescript

[bws]

Hi,

I would like to develop a game in Babylon but I would like to use typescript. Is there any 'getting started' guide? ( as i wasn't able to find any). If there isn't, can I please be pointed in the right direction as to how to go about doing this?

If I get responses, I would be happy to submit a tutorial to assist others. Also, is there a way where one can provide/submit tutorials?

Thanks,

bws.

[Wingnut]

Hi again.

http://doc.babylonjs.com/generals

#5 and #10 both apply.  A forum search for 'typescript' might also help.

Oh, look at that.  There's ANOTHER link to 'roadmap' there in #11.  (Wingnut grabs BWS's sunglasses and carefully washes the lenses) 

Also, this looks interesting.

And yes, you certainly may contribute tutorials (we love it), and it is very simple.  It often starts with a familiarization of "Github Markdown Language"... or MD, for short.  It is super easy... takes 10 minutes to learn.  Later, we will tell you more details about how to install the .md file in the correct place and include it into our docs-"build", so that it becomes part of our docs website.  There is a certain (simple) hierarchy format used in our .md docs... that CAN automatically generate a table of contents (TOC) for the HTML-version of your document... during the build. (Not required, but it is a nice feature.)  It is created during the automatic HTML generation... that happens to the .md tutorial files during the build.

The TOC for a tutorial is only view-able AFTER the docs-build is complete.  Our docs-site curators will do the builds, when needed.  But you may also clone the docs repository to your home computer, do grunt/gulp builds there, and actually have a complete BJS docs website on your home computer.  This makes it easy to check/view TOC's before they get put into "production".  Lots of automation, too.  When you do the home docs-build, the website automatically launches on localHost:3000 as soon as the build completes.  It's a sweet system... once you familiarize.

Here is the folder at our docs site... where the "general" category of .md files are stored.  You can see some example .md files, there.  There is also a file called statics.json that is heavily involved as a map... to tell our docs-build WHICH .md files that we would like to create html files-for, and include them on our docs website.  We'll talk later about all that.

But first, I think you should spend some time FINDING tutorials and documentation links.  That way you can be sure that any tutorial you write... is not a repeat of another tutorial that was already written.  Our documentation site is very large and reasonably comprehensive (somewhat thorough/detailed).  Take the time/patience to tour/explore it well.  It will become your best friend.    Be well, party on! 

[bws]

Thank-you for all of that. I will do it. (and more!).

Cheers.

[Wingnut]

My pleasure.  When my web browsers load, they display a web page (a browser start-page) that is stored on my local drive.  It looks somewhat like this thing, but it is filled with links.  Feel free to use that empty HTML table/file for yourself.  Perhaps save it to your local drive, using your browser FILE pulldown menu.

I have two columns of links... all for BJS things.  I have one column full of HTML/CSS related things, and another column for JS-related things, and the rest is filled with assorted yummy links.

Having a "hot links" web page... full-of Babylon-related links... is a HUGE accelerator for learning BJS.  You may wish to consider doing that yourself.  *shrug*.   

It takes some time to edit the html and add all the hot links, but once it's complete.... it's sweeeeeet.

And the BJS playground... phew... what a HUGE learning accelerator that is.  Mega-tool ! Examining other people's playgrounds and doing tweaks... then hit RUN, then another adjustment, then hit RUN... playing with a scene... flattens the BJS learning curve beyond description.  It is wonderful, and very fun/addictive.  Don't forget to eat (it is THAT MUCH fun). 

[bws]

I read everything I could and wasn't able to get a simple set-up going. My goal is to develop in Typescript using Babylon 3. I followed this tutorial https://trymnilsen.com/articles/2017-06/babylonjs-typescript-setup 

I did this tutorial and it worked with the current versions (as of today) of all the packages e.g. Typescript 2.4.1 and BabylonJS 3.0.7.
Except, in file package.json I made them all devDependencies (except BabylonJS which I made a regular dependency). I also modified the path to babylon.js in file index.html and the path to babylon.d.ts in file game.ts to suit.
However I got a Typescript transpilation error:

ts/game.ts(5,9): error TS2322: Type 'HTMLElement' is not assignable to type 'HTMLCanvasElement'.
  Property 'height' is missing in type 'HTMLElement'.

I was able to resolve this by changing the line of code from:

this.canvas = document.getElementById(canvasElement);

to

this.canvas = document.getElementById(canvasElement) as HTMLCanvasElement;

Thanks!

[JCPalmer]

Not sure if this is a problem or you are just documenting what you found.  I have never tried to code this part in Typescript, but this is actually a type checking feature of Typescript.  getElementByID() is defined to return a HTMLElement.  Canvas was defined in your code as a HTMLCanvasElement.  I prefer the casting syntax.

this.canvas = <HTMLCanvasElement> document.getElementById(...);

 

[bws]

@JCPalmer yes, I was just documenting what I found should others read this.

Typescript was complaining because they are different types (which is a good thing!).

I noticed that Typescript generated the same Javascript code no matter which of the two typecasting methods were used.

I guess the typecasting method is just a matter of taste...

bws.