Search the Community

Hello, I just started learning Phaser 3, 2 days ago so I am very new. I am currently using the latest version of Phaser 3, developing using webpack and npm to bundle and serve to a Firefox browser. Right now, I'm trying to create a game where the main character (ninja) is being controlled by the user's cursor. How I have done this, is basically when the cursor moves, the character sprite will move along with it. this.input.on('pointermove', function (pointer) { this.ninja.x = pointer.x; this.ninja.y = pointer.y; }, this); this.ninja.body.setAllowGravity(false); Right now I also have a small frog character on the platform, and I want to make it such that the user can use the cursor (ninja) to push the frog. However, the 2 GameObjects (frog and ninja) simply overlap and there is no "pushing" physics occurring. I have enabled physics and gravity in the game config I have added physics to the respective sprites I have added colliders for both the ninja and the frog Here is the code for the above mentioned things that I have added this.frog = this.physics.add.sprite(400, 400, 'frog'); this.frog.setCollideWorldBounds(true); this.ninja = this.physics.add.sprite(game.config.width / 2 - 16, game.config.height / 2 - 16, 'ninja'); this.ninja.body.setAllowGravity(false); this.ninja.setCollideWorldBounds(true); this.physics.add.collider(this.ninja, this.frog); Below is a screenshot of what I have so far, basically the large sideways frog is the ninja, and the small box at the bottom is a small frog, and I want the ninja to be able to push the frog, however the colliders just overlap and no "pushing" occurs. Does anyone know if there is any way to make it such that: floating GameObjects controlled by the cursor are able to push other GameObjects in the scene?

Hi, I am new to babylonjs (and physics libraries in general). I have made a demo to illustrate my problem https://playground.babylonjs.com/#1XWKCR#1 I am trying to model a square grid that behaves like there is space in the middle, as in, if an object happens to be in the middle of it, the grid should be hanging onto it. Following the example here https://playground.babylonjs.com/#66PS52, I have created 4 boxes, positioned 90deg to each other, added a PhysicsImpostor.BoxImpostor, and parented them under a physicsRoot with PhysicsImpostor.NoImpostor. The grid behaves like there is only one collider, right in the center of the grid. Can someone please explain what is going on there? Thank you, vinz

``` setColliders (x, y, side, index) { // collider a this.colliderA = this.scene.matter.add.circle(x - side * 150, y, 7, { label: 'collider_a', isStatic: true, }) // collider b this.colliderB = this.scene.matter.add.circle(x, y, 7, { label: 'collider_b', isStatic: true, }) // collider basket this.colliderBasket = this.scene.matter.add.rectangle( x - side * 73, y, 120, 30, { label: `Basket${index}`, isStatic: true, isSensor: true, }, ) } ``` which function will remove them ?

This example is test to see if colliders are alignment as boxes are rendered. This is only for box colliders. If Box has rotation around x,y and z. (red box) Or if Box has rotation around x,y,z and scale around x,y an z. (green box) You can verify alignment of colliders with debug's tab Physics. (Thanks to Temechon for inspector/debug Physics Tab !) I was just curious if physics colliders taken into account rotation and scale of mesh. As you can see colliders take into accound rotation and scale. Which is good news. Playground is: http://www.babylonjs-playground.com/#GH25PT#4

I attach model. And test project (look below). You don't need any server to test it. Just export project zip file and run html in browser! Original exported ToB file is in directory. (I change this file by hand (some lines in code) and seve it in ProjectTest/js/ToB/1/ModelFInish.js. What I would like to achive is to add BoxImpostors on each box/cube/mesh which is named as BoxCollider* Note: There are boxes which have instances !!! When I change code by hand and save in ProjectTest/js/ToB/1/ModelFInish.js. I setup scene in file indexToB.html I add code (for both physics, you can test/try/run any of this but you should comment one of each. scene.enablePhysics( new BABYLON.Vector3(0, -10, 0), new BABYLON.CannonJSPlugin() ); //scene.enablePhysics( new BABYLON.Vector3(0,-10,0), new BABYLON.OimoJSPlugin() ); MAIN PROBLEM HERE IS WHY COLLISION BETWEEN "Ball" AND "BoxCollider.135" DOES NOT WORK! AM I MISSING ANYTHING? WHAT IS THE PROBLEM? CAN ANYBODY TAKE A LOOK AND HELP ME SOLVE THE PROBLEM? IT WILL BE VERY GOOD TO TAKE A LOOK AN TEST IT ALSO INSTANCES AND PHYSICS IMPOSTORS! IF YOU CAN FIND A PROBLEM WHY COLLISION NOT WORKS AND THAN IF YOU CAN CHANGE/FIX CODE OF ToB EXPORTER SO THAT COLLISION DEFINED IN BLENDER FILE AND/OR CHECKCOLLISION CAN BE PROPERLY GENERATED WHEN WE EXPORT FROM .BLENDER TO ToB .JS THAN THIS COULD BE VERY GOOD EXPORTER WITH COLLISIONS FOR BABYLONJS !!! PLEASE LET ME KNOW IF ANYBODY FIND A ERROR IN CODE AND IF AUTOR OF ToB EXPORTER CAN FIX/ADD/REPAIR EXPORTER SO THAT COLLISION/IMPOSTORS CODE IN JS WILL BE SO THAT COLLISION WILL WORKS IN BABYLONJS WHEN WE IMPORT "ModelFInish.initScene(scene);" ToB .js file. What I have change in code by hand! ProjectTest/js/ToB/1/ModelFInish.js Ball: ----- //this.setPhysicsState({ impostor: 1, mass: 1, friction: .5, restitution: 0}); this.physicsImpostor = new BABYLON.PhysicsImpostor( this, BABYLON.PhysicsImpostor.SphereImpostor, { mass : 0.2, friction : 0.5, restitution : 0 }, scene); And Box collider under Ball and its instances BoxCollider.134 or BoxCollider_134 is main box mesh and it have its instances. I also add checkCollisions = true;! I change (this boxes/cubes should be colliders/BoxImpostors with mass 0 (I also add //this.setPhysicsState({ impostor: 2, mass: 0, friction: .5, restitution: 0}); this.checkCollisions = true; this.physicsImpostor = new BABYLON.PhysicsImpostor( this, BABYLON.PhysicsImpostor.BoxImpostor, { mass : 0, friction : 0.5, restitution : 0.5 }, scene); and.. // add below two lines instance.checkCollisions = true; instance.physicsImpostor = new BABYLON.PhysicsImpostor( instance, BABYLON.PhysicsImpostor.BoxImpostor, { mass : 0.0, friction : 1, restitution : 0 }, --------------------------------------------- var BoxCollider_134 = (function (_super) { __extends(BoxCollider_134, _super); function BoxCollider_134(name, scene, materialsRootDir, source) { _super.call(this, name, scene, null, source, true); if (!materialsRootDir) { materialsRootDir = "./"; } defineMaterials(scene, materialsRootDir); //embedded version check var cloning = source && source !== null; var load = _B.Tools.Now; var geo = 0; var shape = 0; this.position.x = 0; this.position.y = 0; this.position.z = 0; this.rotation.x = 0; this.rotation.y = 0; this.rotation.z = 0; this.scaling.x = 1; this.scaling.y = 1; this.scaling.z = 1; this.id = this.name; this.billboardMode = 0; this.isVisible = false; //always false; evaluated again at bottom this.setEnabled(true); // add below line this.checkCollisions = true; this.receiveShadows = false; this.castShadows = false; if (!scene.isPhysicsEnabled()) { scene.enablePhysics(); } //this.setPhysicsState({ impostor: 2, mass: 0, friction: .5, restitution: 0}); this.checkCollisions = true; this.physicsImpostor = new BABYLON.PhysicsImpostor( this, BABYLON.PhysicsImpostor.BoxImpostor, { mass : 0, friction : 0.5, restitution : 0.5 }, scene); if (!cloning){ geo = _B.Tools.Now; this.setVerticesData(_B.VertexBuffer.PositionKind, new Float32Array([ -5,.5,-5,-5,-.5,5,-5,-.5,-5,-5,.5,5,5,-.5,5,-5,-.5,5,5,.5,5,5,-.5,-5,5,-.5,5,5,.5,-5,-5,-.5,-5,5,-.5,-5,5,-.5,5,-5,-.5,-5,-5,-.5,5,-5,.5,5,5,.5,-5 ,5,.5,5,-5,.5,-5,-5,.5,5,-5,-.5,5,-5,.5,5,5,.5,5,5,-.5,5,5,.5,5,5,.5,-5,5,-.5,-5,5,.5,-5,-5,.5,-5,-5,-.5,-5,5,-.5,5,5,-.5,-5,-5,-.5,-5,-5,.5,5 ,-5,.5,-5,5,.5,-5 ]), false); var _i;//indices & affected indices for shapekeys _i = new Uint32Array(36); CONTIG(_i, 0, 0, 35); this.setIndices(_i); this.setVerticesData(_B.VertexBuffer.NormalKind, new Float32Array([ -1,0,0,-1,0,0,-1,0,0,0,0,1,0,0,1,0,0,1,1,0,0,1,0,0,1,0,0,0,0,-1,0,0,-1,0,0,-1,0,-1,0,0,-1,0,0,-1,0,0,1,0,0,1,0 ,0,1,0,-1,0,0,-1,0,0,-1,0,0,0,0,1,0,0,1,0,0,1,1,0,0,1,0,0,1,0,0,0,0,-1,0,0,-1,0,0,-1,0,-1,0,0,-1,0,0,-1,0,0,1,0 ,0,1,0,0,1,0 ]), false); geo = (_B.Tools.Now - geo) / 1000; this.subMeshes = []; new _B.SubMesh(0, 0, 36, 0, 36, this); if (scene._selectionOctree) { scene.createOrUpdateSelectionOctree(); } } if (this.postConstruction) this.postConstruction(); load = (_B.Tools.Now - load) / 1000; _B.Tools.Log("defined mesh: " + this.name + (cloning ? " (cloned)" : "") + " completed: " + load.toFixed(2) + ", geometry: " + geo.toFixed(2) + ", skey: " + shape.toFixed(2) + " secs"); if (matLoaded && !_sceneTransitionName){ if (typeof this.grandEntrance == "function") this.grandEntrance(); else makeVisible(this); } else waitingMeshes.push(this); } BoxCollider_134.prototype.dispose = function (doNotRecurse) { _super.prototype.dispose.call(this, doNotRecurse); if (this.skeleton) this.skeleton.dispose(); }; BoxCollider_134.prototype.makeInstances = function (positionOffset) { var instance; instance = this.createInstance("BoxCollider.129"); instance.position.x = 0; instance.position.y = 0; instance.position.z = -10; instance.rotation.x = 0; instance.rotation.y = 0; instance.rotation.z = 0; instance.scaling.x = 1; instance.scaling.y = 1; instance.scaling.z = 1; // add below two lines instance.checkCollisions = true; instance.physicsImpostor = new BABYLON.PhysicsImpostor( instance, BABYLON.PhysicsImpostor.BoxImpostor, { mass : 0.0, friction : 1, restitution : 0 }, scene); if (positionOffset) instance.position.addInPlace(positionOffset); instance.checkCollisions = false; instance = this.createInstance("BoxCollider.100"); instance.position.x = 29.5438; instance.position.y = -2.3742; instance.position.z = 0; instance.rotation.x = 0; instance.rotation.y = 0; instance.rotation.z = 0; instance.scaling.x = 1; instance.scaling.y = 1; instance.scaling.z = 1; // add below two lines instance.checkCollisions = true; instance.physicsImpostor = new BABYLON.PhysicsImpostor( instance, BABYLON.PhysicsImpostor.BoxImpostor, { mass : 0.0, friction : 1, restitution : 0 }, scene); if (positionOffset) instance.position.addInPlace(positionOffset); instance.checkCollisions = false; instance = this.createInstance("BoxCollider.095"); instance.position.x = 29.4404; instance.position.y = 2.5005; instance.position.z = -10.0006; instance.rotation.x = 0; instance.rotation.y = 0; instance.rotation.z = 0; instance.scaling.x = 1; instance.scaling.y = 1; instance.scaling.z = 1; // add below two lines instance.checkCollisions = true; instance.physicsImpostor = new BABYLON.PhysicsImpostor( instance, BABYLON.PhysicsImpostor.BoxImpostor, { mass : 0.0, friction : 1, restitution : 0 }, scene); if (positionOffset) instance.position.addInPlace(positionOffset); instance.checkCollisions = false; instance = this.createInstance("BoxCollider.078"); instance.position.x = -39.0553; instance.position.y = 5.1819; instance.position.z = 0; instance.rotation.x = 0; instance.rotation.y = 0; instance.rotation.z = 0; instance.scaling.x = 1; instance.scaling.y = 1; instance.scaling.z = 1; // add below two lines instance.checkCollisions = true; instance.physicsImpostor = new BABYLON.PhysicsImpostor( instance, BABYLON.PhysicsImpostor.BoxImpostor, { mass : 0.0, friction : 1, restitution : 0 }, scene); if (positionOffset) instance.position.addInPlace(positionOffset); instance.checkCollisions = false; instance = this.createInstance("BoxCollider.073"); instance.position.x = -39.1818; instance.position.y = -4.9811; instance.position.z = -9.9322; instance.rotation.x = 0; instance.rotation.y = 0; instance.rotation.z = 0; instance.scaling.x = 1; instance.scaling.y = 1; instance.scaling.z = 1; // add below two lines instance.checkCollisions = true; instance.physicsImpostor = new BABYLON.PhysicsImpostor( instance, BABYLON.PhysicsImpostor.BoxImpostor, { mass : 0.0, friction : 1, restitution : 0 }, scene); if (positionOffset) instance.position.addInPlace(positionOffset); //instance.checkCollisions = false; instance.checkCollisions = true; }; return BoxCollider_134; })(BABYLON.Mesh); ModelFInish.BoxCollider_134 = BoxCollider_134; @JCPalmer @gryff @Deltakosh @RaananW ProjectTest.zip Model.zip

If we model some visual models whit some tools (Bablyon,Max,Unity,....) and add box colliders around model. Is there any showcase how to do model and add colliders on model? Is there any exporter which know to export "model+model's colliders", and is there any BabylonJS importer which is capable to import "model+models's colliders"? Do BabylonJS has ONLY importers/loaders which know ONLY import/load model? Can any of this file format (FBX,, glTF, OBJ, .babylon, ToB .js....) export "model+model's collider" I would like such exporter/importer which is capable to import model_with_it's_colliders. exporter(blender,3DMax,Unity,...) importer(BabylonJS file loader) I don't want to hard code or adding colliders whit hard codeing in babylonJS. I would like to model with (blender,max3d,unity..) and than just import/load all things (model and colliders) in BabylonJS from one file (FBX,babylon,glTF...) I would like that modeling and adding colliders will be separately/independently from BabylonJS coding. BabylonJS Importer should do all for us (so importing model and setup colliders) (our final scene build in 3d modeling tool -blender,max3d,unity...) Any advice? Any infos? Any Help? Greetings Ian

Hi guys! I'd like to make a computer object in my game, such that when player approches to the computer,it triggers onEnter callback ( where I can for example show a message on screen to press certain key ) and when player goes away it triggers onLeave callback ( where I can hide the message ). In order to achieve that I need two colliders, one for regular collision ( red one ), and the other to detect if the player entered computer's zone ( green one, this is the one that I want to trigger callback ). this.computer = this.game.add.sprite( 9 * TILE_WIDTH + COMPUTER_WIDTH / 2, TILE_HEIGHT + COMPUTER_HEIGHT / 2, 'computer' ); this.game.physics.p2.enable( this.computer ); this.computer.body.static = true; this.computer.body.addRectangle( TILE_WIDTH, TILE_HEIGHT, COMPUTER_WIDTH / 2, COMPUTER_HEIGHT / 2 ); this.computersCollisionGroup = this.game.physics.p2.createCollisionGroup( this.computer ); this.computer.body.collides( this.playerCollisionGroup, () => console.log( 'player in range' ) ); this.player.body.collides( this.computersCollisionGroup ); My question is: How do I turn off physical collision in green collider and what to do to make green collider trigger onEnter and onLeave callbacks ?