Object oriented Typescript example for documenation

[Wink]

What are peoples thought of having the example code for Typescript on the documentation page being object oriented?

The game.ts code is below and I created a github project:

class Game {
  private _canvas: HTMLCanvasElement;
  private _engine: BABYLON.Engine;
  private _scene: BABYLON.Scene;
  private _camera: BABYLON.FreeCamera;
  private _light: BABYLON.Light;

  constructor(canvasElement : string) {
    // Create canvas and engine
    this._canvas = <HTMLCanvasElement>document.getElementById(canvasElement);
    this._engine = new BABYLON.Engine(this._canvas, true);
  }

  createScene() : void {
      // create a basic BJS Scene object
      this._scene = new BABYLON.Scene(this._engine);

      // create a FreeCamera, and set its position to (x:0, y:5, z:-10)
      this._camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), this._scene);

      // target the camera to scene origin
      this._camera.setTarget(BABYLON.Vector3.Zero());

      // attach the camera to the canvas
      this._camera.attachControl(this._canvas, false);

      // create a basic light, aiming 0,1,0 - meaning, to the sky
      this._light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), this._scene);

      // create a built-in "sphere" shape; its constructor takes 5 params: name, width, depth, subdivisions, scene
      let sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, this._scene);

      // move the sphere upward 1/2 of its height
      sphere.position.y = 1;

      // create a built-in "ground" shape; its constructor takes the same 5 params as the sphere's one
      let ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, this._scene);
  }

  animate() : void {
    // run the render loop
    this._engine.runRenderLoop(() => {
        this._scene.render();
    });

    // the canvas/window resize event handler
    window.addEventListener('resize', () => {
        this._engine.resize();
    });
  }
}

window.addEventListener('DOMContentLoaded', () => {
  // Create the game using the 'renderCanvas'
  let game = new Game('renderCanvas');

  // Create the scene
  game.createScene();

  // start animation
  game.animate();
});

On a side note, Typescript was not an option for Code snippet type

[GameMonetize]

This is a good idea

[Wink]

We could discuss changes here or on my github project or I can create a pull request, what is your preference?

[GameMonetize]

PR seems fine to me

[Wink]

Ok, I'll work one up.

[Wink]

I've created PR #285.

[PixelPush]

Thanks for this example wink, much appreciated.

[Wink]

You're welcome. I'm a neophyte so if you or anyone has suggestions on how to improve the example please provide patches or suggestions.

[PixelPush]

I'm also new to Typescript and babylon, but I was looking to get off the ground with an OOP approach (which I'd previously used with action script 3 and away3d).

I saw your note about referencing the the d.ts file when you compile, this was also a big help.

[Wink]

Hopefully we can help each other, but it looks like I'm one up on you in the neophyte area as I know nothing about 3D.

But I have been programming for 40+ years almost all of that with strictly typed languages, except for assembler. So I feel naked when the compiler isn't telling me when I screw up

[PixelPush]

Yes great stuff. What are you using as your IDE for coding?

 

[Wink]

My system is an Arch Linux system and right now I'm using vi and make, that's how old fashion I am. I've spent an hour or so trying VSCode and it seems OK, but the finger memory makes me more efficient in vi, at least for now. There is a vscodevim extension but its missing some things so for the time being I'll stick with vi/make.

[mattstyles]

Atom now runs on linux and has a pretty comprehensive, but customisable, vim plugin.

[Wink]

@mattstyles interesting, txs.

[PixelPush]

@Wink - I've creating a custom class called "Table" and instantiating a new instance of this in game.ts file.

When I compile, an error occurs Name "table" not found.

The table class looks like this (below) and is placed in the same local folder game.ts

class Table extends Mesh{

   constructor(){

       //my class code here

}

[Pryme8]

Yall are going to scare away people with typescript... to compile javascript is sad indeed....

GAME = function(){
this._canvas = ...
this._engine = ...
other private stuff...
return this
}

var game = new GAME();


------------> K.I.S.S.


also I'd like to be the one to point out it's Babylon Javascript... not Babylon Typescript; focusing on Javascript and leaving Typescript to those who want to mess with it is cool but to focus the any sizable amount of tutorials or docs on it would create confusion I believe.

[Wink]

@Pryme8 so on the other thread you seemed to agree that converting Babylon code from js to ts was ok. Which implies their might be advantages to ts over js so and in fact that it allows me to use ts was the my primary attraction for me, so I'm a single data point that support ts can attract people and not scare them away. But the example ts code in the docs wasn't very good so I provided what I thought was a better ts example.

Do you think my new ts example should be reverted or maybe it should removed completely?

[Wink]

@PixelPush, could you provide the complete class or a link to the code so I can give it a try?

 

[PixelPush]

Yes, here is the contents of the Table Class..

 

export class Table extends BABYLON.Mesh{
    private _height:number;
    private _width:number;
    private _length:number;
    

    constructor(name:string, scene:BABYLON.Scene, tableHeight:number,tableWidth:number= 5,tableLength:number= 5){
        //strip of constructor values and pass to the local class properties
        super(name,scene);
        
        //this._scene = scene;
        
        this._height = tableHeight;
        this._width = tableWidth;
        this._length = tableWidth;

        //create the table top
        var box = BABYLON.Mesh.CreateBox("box", this._height, scene);
    }

}

[PixelPush]

@Pryme8 I hear what your saying, it might seem like a convoluted layer initially, but having a typescript tutorial written in javascript is a bit dissapointing.

Unless I'm missing something many developers will prefer to see type script examples, because it means cleaner class oriented syntax and the chance to apply their existing OOP knowledge.

These are just my initial thoughts, I'm no expert by any means and I agree that it might confuse some people.

If materials are clearly labelled as JS or typescript though, I think it could really help the community to grow.

[adam]

@PixelPush what IDE are you using?  It should be showing you some errors before you compile.

 

[PixelPush]

vs code

 

[adam]

So you probably already followed this getting started guide, right?

http://doc.babylonjs.com/generals/how_to_start

edit:

That's actually a getting started for contributing, which may be more than what you want to do.  It is a good way to create a dev environment for TS, though.

[Wink]

@PixelPush, I've got to do some other stuff right, but it looks like @adam is helping. How are you compiling, what is your command line, if you're using command line tools?

[Wink]

@PixelPush, this compiles if you run make:

$ make
rm -f test.js test.d.ts # Remove so on errors we won't see old files
tsc --target ES5 --noEmitOnError --noUnusedLocals --noUnusedParameters --noIMplicitAny --noImplicitReturns --NoImplicitThis --alwaysStrict --declaration --experimentalDecorators --forceConsistentCasingInFileNames --strictNullChecks test.ts js/babylon.d.ts
wink@wink-desktop:~/prgs/test-babylon/babylon-typescript-table (master)
$ tsc --version
Version 2.1.4

I hope it works for you.