Usage of Planck.js with TypeScript (Planck.js is a port of Box2D Physics Engine)

8Observer8 · January 29, 2021

My example shows how to use Planck.js with TypeScript in Debug and Release modes: hello-planckjs-webgl10-ts

You should install these modules globally:

npm i typescript -g
npm i browserify -g
npm i uglify-js -g

Install all packages from `package.json` using the command: `npm i`

Comment/Uncomment Debug/Release in `index.html` and `main.ts` (see comments in these files).

Use these commands to build the example:

`npm run debug` - to set breakpoint in code editors and to publish on PlayGround (like Plunker), for example: Hello Planck.js. WebGL 1.0, TypeScript
`npm run release` - to bundle in `bundle.min.js` for production

Note. See also: Usage of Ammo.js with TypeScript (Ammo.js is a port of Bullet Physics Engine)

package.json

{
  "name": "hello-planckjs-webgl10-ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "debug": "tsc -p tsconfigs/tsconfig.debug.json",
    "compile": "tsc -p tsconfigs/tsconfig.release.json",
    "bundle": "browserify public/js/main.js -o public/js/bundle.js",
    "minify": "uglifyjs public/js/bundle.js -o public/js/bundle.min.js",
    "release": "npm run compile && npm run bundle && npm run minify"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "gl-matrix": "^3.3.0",
    "planck-js": "^0.3.23",
    "requirejs": "^2.3.6"
  },
  "devDependencies": {
    "@types/requirejs": "^2.1.32"
  }
}

public/index.html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Hello Planck. WebGL 1.0, TypeScript</title>
 
    <!-- Debug -->
    <script data-main="js/RequireConfig"
        src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
    <!-- Release -->
    <!-- <script src="js/bundle.min.js"></script> -->
</head>
 
<body>
    <canvas id="renderCanvas" width="300" height="150"></canvas>
 
    <div id="output"></div>
 
    <a href="https://github.com/8Observer8/hello-planckjs-webgl10-ts">Source Code on GitHub</a>
    <br>
    <a href="https://plnkr.co/edit/MyJOyvRtIDAhpKA5?preview">Playground</a>
</body>
 
</html>

src/client/main.ts

import { mat4 } from "gl-matrix";
import { Vec2 } from "planck-js";

let gl: WebGLRenderingContext;
let output: HTMLDivElement;

function init()
{
    const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
    gl = canvas.getContext("webgl");
    gl.clearColor(0.2, 0.2, 0.2, 1);
    gl.clear(gl.COLOR_BUFFER_BIT);
 
    output = document.getElementById("output") as HTMLDivElement;

    const vec = Vec2(1, 2);
    output.innerHTML = `vec = (${vec.x}, ${vec.y})<br>`;

    const matrix = mat4.create();
    output.innerHTML += `matrix = [${matrix}]`;
}

function main()
{
    init();
}

// Debug
main();

// Release
// window.onload = () => main();

src/client/RequireConfig.ts

requirejs.config({
    baseUrl: "js",
    paths: {
        "gl-matrix": "https://cdn.jsdelivr.net/npm/[email protected]/gl-matrix-min",
        "planck-js": "https://cdn.jsdelivr.net/npm/[email protected]/dist/planck.min"
    }
});
 
requirejs(["main"], () => { });

tsconfigs/tsconfig.json

{
    "compilerOptions": {
        "target": "ES5",
        "outDir": "../public/js"
    },
    "include": [
        "../src/client/**/*.ts"
    ]
}

tsconfigs/tsconfig.debug.json

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "module": "AMD",
        "sourceMap": true,
        "types": [
            "requirejs",
            "gl-matrix",
            "planck-js"
        ],
        "moduleResolution": "node"
    }
}

tsconfigs/tsconfig.release.json

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "module": "CommonJS",
        "sourceMap": false,
        "types": [
            "node"
        ]
    },
    "exclude": [
        "../src/client/RequireConfig.ts"
    ]
}

Edited January 30, 2021 by 8Observer8

Sign In

Usage of Planck.js with TypeScript (Planck.js is a port of Box2D Physics Engine)

Recommended Posts

8Observer8

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity