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
1 Like
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 
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…
This seems to be a more up to date version of a starter project with typescript: GitHub - pandadelphin/babylonjs-typescript-webpack-starter: babylonjs-typescript-webpack-starter
This is another option which has the alpha version of BabylonJS (so not necessarily as stable) but it does come with the debug pane, accessible through: Ctrl+Shift+Alt+I GitHub - BabylonJS/SummerFestival: Source code for game tutorial written by capucat
1 Like
Thank you @Leon I was looking for the same thing and yours seems the most active and recently updated boilerplate.
1 Like
I followed this thread and originally created a webpack based app.
Development was not as fast as I wanted so I migrated to vite and it is a lot better.
If you want really fast development cycle, I created a boilerplate for you.
Let me know if it works for you:
Debugging typescript works from the start:
This is the page you initial page you’ll see:
2 Likes
Really nice and really minimal and so faster than webpack!
The only thing which I would add to readme - that after npm run build one can use npm run preview and see the build results at http://localhost:5000/
1 Like
If you plan to use a version 5 of a BABYLON.d.ts file, highly probable, you probably need to specify "~4.5.2".
done
2 Likes