Jump to content

Object oriented Typescript example for documenation


Recommended Posts

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

      // 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(() => {

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

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

  // Create the scene

  // start animation

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

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@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{


       //my class code here


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@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?

Link to comment
Share on other sites

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
        //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);


Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

@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
[email protected]:~/prgs/test-babylon/babylon-typescript-table (master)
$ tsc --version
Version 2.1.4

I hope it works for you.

Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...