Search the Community
Showing results for tags 'physics2d'.
Found 2 results
-
Playground: https://plnkr.co/edit/BGNYcIJRiJXpd9N4?preview GitHub: https://github.com/8Observer8/how-to-set-up-box2dwasm-with-importmap-rollup-js glMatrix is just a bonus: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>How to set up Box2D-WASM with importmap and Rollup for JavaScript</title> </head> <body> <!-- Since import maps are not yet supported by all browsers, it is necessary to add the polyfill es-module-shims.js Source: https://threejs.org/docs/index.html#manual/en/introduction/Installation --> <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script> <script type="importmap"> { "imports": { "box2d-wasm": "https://unpkg.com/[email protected]/dist/es/Box2D.js", "gl-matrix": "https://cdn.jsdelivr.net/npm/[email protected]/+esm" } } </script> <script type="module" src="./js/index.js"></script> </body> </html> init-box2d.js import Box2DLib from "box2d-wasm"; export let box2d = null; export function initBox2D() { return new Promise(resolve => { Box2DLib().then((re) => { box2d = re; resolve(); }); }); } index.js import { box2d, initBox2D } from "./init-box2d.js"; import { mat4, glMatrix } from "gl-matrix"; async function init() { await initBox2D(); const { b2Vec2 } = box2d; const vec = new b2Vec2(1, 2); console.log(`vec = (x: ${vec.x}, y: ${vec.y})`); const mat = mat4.create(); console.log(mat); console.log(glMatrix.toRadian(45)); } init(); Instructions for building and running the project in debug and release: - Download and unzip this example: https://github.com/8Observer8/how-to-set-up-box2dwasm-with-importmap-rollup-js - Go to the example folder in the console: `cd how-to-set-up-box2dwasm-with-importmap-rollup-js` - Install these packages globally with the command: > npm i -g http-server rollup uglify-js - Add the Rollup bin folder to the Path. Type this command to know where npm was installed `npm config get prefix`. This command will show you the npm location. You will find the "node_modules" folder there. Go to the "rollup/bin" folder and copy this path, for example for me: `C:\Users\8Observer8\AppData\Roaming\npm\node_modules\rollup\dist\bin`. Add this folder to the path variable. - Run http-server in the project directory: > http-server -c-1 Note. The `-c-1` key allows you to disable caching. - Start development mode with the following command: > npm run dev Note. Rollup will automatically keep track of saving changes to files and build a new index.js file ready for debugging. You can debug your project step by step in the browser by setting breakpoints. - Go to the browser and type the address: localhost:8080/index.html - Create a compressed file ready for publishing. Stop development mode, for example, with this command Ctrl + C in CMD, if it was launched before and enter the command: > npm run release Note. After this command, Rollup will create a compressed index.js file. Compression is done using the uglify-js package.
-
Hi Guys, AM having problems setting up collisions between children of a group I created. I can have have them collide with other gameobjects but not with each other. This is the code I have inside my Create function, am I missing something? create: function () { myObjects = this.physics.add.staticGroup(); var mychildObjects = this.textures.get('myObjects').getFrameNames(); var y=400; for (var i = 0; i < 5; i++) { var x=400; y+=260; for (var j=0; j<5; j++){ var image = this.add.image(x, y, 'myObjects', Phaser.Math.RND.pick(mychildeObjects)); image.setInteractive(); this.input.setDraggable(image); myObjects.add(image); x+=260; } } this.physics.add.overlap(myObjects, myObjects, this.checkCollision, null, this); this.input.on('drag', function (pointer, gameObject, dragX, dragY) { gameObject.x=dragX; gameObject.y=dragY; } ); }, checkCollision:function(object1, object2){ console.log("inside"); object1.destroy(); }
