Search the Community
Showing results for tags 'planck'.
Found 1 result
-
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" ] }