BabylonJS boilerplate for start project with TypeScrpit

Is there any boilerplate github how can we start/setup/establish bayblon game projejct with typescript ?
Can I gat any link(s) ?

Here is everything you need to get started with babylon: First Steps - Babylon.js Documentation

To compile and bundle your files you need to install typescript and a bunder. I recommend parcel. Parcel requires no configuration and is way faster than webpack, but produces slightly bigger results. So if your at the stage that your project is done, I would do the production build with webpack.

To setup parcel just reference your Typescript index file at the end of your HTML, like:
<script src="index.ts"></script>;

and run: parcel serve index.html

Also worth a read through Babylon.js Documentation and choose the typescript button.

You can use the playground with Typescript Babylon.js Playground

See Introduction to the Playground - Babylon.js Documentation

I try this NPM - Babylon.js Documentation
I start from “Setting up the project” but have problems with es6/es5

another way I try also from


(I don’t know it this works ok with new versions npm typscritp and webpack ?? Have problems with versions of npm packages…)

**Two different ways and no works. I hate I losign so many time with establishing babylon typscript game project… **

Is there any working git like babylonjs-typescript-starter which works OK ??

1 Like

Also try a search for Typescript in this forum as others have already had some questions answered about this.

I don’t want to develop on playgournd (online…)

I do this

and do
$npm install
$npm run build
npm run build

webpack

Hash: 87254c8c2de2fd315ee2
Version: webpack 4.29.6
Time: 2596ms
Built at: 2019-03-27 11:25:03
Asset Size Chunks Chunk Names
…\index.d.ts 12 bytes [emitted]
index.js 5.28 KiB main [emitted] main
Entrypoint main = index.js
[./index.ts] 1.44 KiB {main} [built]

how can I run now index.html

(if i run from file://path_to_bayblon_typscript_proj/index.html)
But get error in browser console

starg game…
index.ts:6 Uncaught ReferenceError: BABYLON is not defined
at new Game (index.ts:6)
at eval (index.ts:31)

I wourld like to establish babylon game typscript project (because I need classes packages structure/capabilities of project…

I will like to start as

instant like this
var canvas: any = document.getElementById(“renderCanvas”);
var engine: Engine = new Engine(canvas, true);

function createScene(): Scene {
var scene: Scene = new Scene(engine);

var camera: ArcRotateCamera = new ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, Vector3.Zero(), scene);
camera.attachControl(canvas, true);

var light1: HemisphericLight = new HemisphericLight("light1", new Vector3(1, 1, 0), scene);

var sphere: Mesh = MeshBuilder.CreateSphere("sphere", { diameter: 1 }, scene);

return scene;

}

var scene: Scene = createScene();

engine.runRenderLoop(() => {
scene.render();
});

You Import:
import { Engine, Scene, FreeCamera, ArcRotateCamera, HemisphericLight, Vector3, MeshBuilder, Mesh } from "babylonjs";
And then use new BABYLON.Engine(this._canvas, true);
That error is raised because you never imported BABYLON.

Either use Engine, etc directly, like you imported them:
new Engine(this._canvas, true); Without BABYLON.

Or change your import to:
import * as BABYLON from from "babylonjs";

I did a started that is based on create-react-app which works very well

Let me know if you are having troubles getting it started :slight_smile:

I am/will try your startup from git…

@mauricedoepke Thank you . now works ok.
I chage it to
import * as BABYLON from from “babylonjs”;

When using babylon 4, which will be released soon, the import changes from the old

import * as BABYLON from 'babylonjs'

to the new @babylonjs namespace

import { Engine, Scene } from '@babylonjs/core'

Since babylon 4 beta is so stable, It’s probably better that you use it.
It also supports tree shaking, which means that all the unused modules that you don’t use, will be removed by the build, resulting in smaller packages.

1 Like

@Leon
ok. you advice me to try babylon 4 beta.

can you please help me what should I change in settings

My current settings for now are
And also what do you advice me with es5,es6 settings for typescript config…??

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^5.3.3",
    "typescript": "^3.3.4000",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0"
  },
  "dependencies": {
    "babylonjs": "^4.0.0-beta.3",
    "babylonjs-gui": "^4.0.0-beta.3",
    "babylonjs-loaders": "^4.0.0-beta.3"
  }
}

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "noResolve": false,
        "noImplicitAny": false,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "experimentalDecorators": true,
        "isolatedModules": false,
        "lib": [
            "dom",
            "es2015.promise",
            "es5"
        ],
        "declaration": true,
        "outDir": "./"
    },
    "files": [
        "./index.ts"
    ]
}

and

webpack.config.js

const path = require("path");

module.exports = {
    entry: './index.ts',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: [".ts"]
    },
    module: {
        rules: [
            { test: /\.tsx?$/, loader: "ts-loader" }
        ]
    },
    mode: "development"
};

I’m trying and testing it like

Try running my starter that I linked to earlier.
It has everything setup correctly, and you don’t need to modify anything to get a running babylon scene.

It is also based on webpack 4 via GitHub - facebook/create-react-app: Set up a modern web app by running one command.

The entrypoint for the app is starter-babylonjs/index.ts at master · leon/starter-babylonjs · GitHub

And I’ve created a couple of helper methods in starter-babylonjs/babylon.ts at master · leon/starter-babylonjs · GitHub but feel free to change them around.

The html file that is the base for the app you can find here.

It gets processed by webpack and replaces some variables and injects all the scripts, so you don’t need to add them.

Even though the starter is based on create-react-app, you don’t have to use react. it’s just a good foundation to build of with good support for css / scss, webpack, service-workers and more…