Search the Community

Showing results for tags 'collider'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 19 results

  1. Hi, This is my first post and I hope I can help and be helped in this forum. 😊 i am develop my first game in phaser 3. its a RPG. My question is: Its posible get random zone (X,Y) and check if is collider zone? I am creating the enemies with random spawn position. Thansk for all.
  2. A collider collides only with set tiles on a tilemap. However, if you are using an overlap with a tilemap, it always callbacks. If you log the index of the Tile, it's 0. So "no set tile". Is that intended behavior?
  3. Hey All, I hope you can help me. I'm quite new to Phaser. I've looked all over google and couldn't find an answer to my question. I have an idea for a Tetris-like game. At the moment I'm learning the basics by setting up a single block to fall on the floor before another single block falls after it. The block falls from the air onto the ground just fine. The issue is: I simply want to have a collision call back happen once. I've simplified the code to make the question easier to read: function create () { this.physics.add.collider(block, ground, hitFloor, null, this); } function hitFloor () { console.log('floor hit'); } The block hits the floor and the callBack runs infinitely which makes sense because the block doesn't move and stays on the floor. I was considering setting a flag with a variable like `floorHit`. Something like: function hitFloor() { if (!floorHit) { console.log('do something') floorHit = true } } But I want to have multiple blocks fall and this won't work because the new block that gets created needs to have the `floorHit` variable set to false before it starts falling. What am I missing? Any help would be much appreciated. Thanks MHC
  4. Hello everybody, I am new to Phaser and thought why not start with Phaser 3. My program dynamically changes the rotation of a box and I wanted the collider to rotate as well, but I didn't find how to archive this. var config = { type: Phaser.AUTO, width: 800, height: 600, //window.innerHeight; physics: { default: 'arcade', arcade: { gravity: { y: 300 }, debug: true } }, scene: { preload: preload, create: create, update: update } }; //... function create() { //... blockAU = blocks.create(200, 200, 'block'); //... } function update() { //... if(rotateLeft) blockAU.angle -= 1; else blockAU.angle += 1; blockAU.refreshBody(); //... } I didn't find examples for this, and the API and Docs where pretty confusing. Maybe I am using the wrong terminology when searching. I really hope you can help me with this
  5. Hi All! I have a question. A Player who has collision. For each object I have to assign this.physics.add.collider(player, group); this.physics.add.collider(player, objectLayer); How to give collision globally ? Just give collider player and other object separately.
  6. Hello! I was wondering if this is the correct approach, regarding management of the collider when restarting a scene. I have added this collider in my scene: this.physics.add.collider( this.traps, this.player, this.playerTrap, null, this ); I restart the scene as soon as this collision happens in the playerTrap() function: private playerTrap(): void { this.player.setAlive(false); this.cleanScene(); this.scene.start("GameScene"); } The cleanScene(): private cleanScene(): void { this.physics.destroy(); } Without the cleanScene() function he restarts the scene infinitely. I always thought that when using this.scene.start he auto cleans everything and reboots.
  7. Hi everyone, I'm trying to figure out how to 'reset/readjust' a sprites collider with the ground, because before set the collider bounds, I got this (first image) using the follow code: var game = new Phaser.Game(1024, 800, Phaser.AUTO, 'BreakOut Phaser',{preload: preload, create: create, update: update}); var bats; var leftKey; var rightKey; function preload() { this.load.image('background', '{% static 'assets/Background/background.png' %}'); this.load.image('ball', '{% static 'assets/Balls/ball_red_resize.png' %}'); this.load.image('bats', '{% static 'assets/Bats/bat_black_256x256.png' %}'); } function create() { this.physics.startSystem(Phaser.Physics.ARCADE); this.add.sprite(0, 0, 'background'); this.add.sprite(480, 336, 'ball'); bats = this.add.sprite(384, 660, 'bats'); this.physics.enable(bats, Phaser.Physics.ARCADE); //bats.body.bounce.y = 0.2; //bats.body.gravity.y = 300; //bats.body.collideWorldBounds = true; leftKey = this.input.keyboard.addKey(Phaser.Keyboard.LEFT); rightKey = this.input.keyboard.addKey(Phaser.Keyboard.RIGHT); this.input.keyboard.addKeyCapture([Phaser.Keyboard.LEFT, Phaser.Keyboard.RIGHT]); } function update() { bats.body.velocity.x = 0; if (leftKey.isDown) { bats.body.velocity.x -= 300; } if (rightKey.isDown) { bats.body.velocity.x += 300; } } and in the seconds image I remove the Javascript comment, I got the seconds image, the bats is not in the position that was define, how can I fix it?: bats.body.bounce.y = 0.2; bats.body.gravity.y = 300; bats.body.collideWorldBounds = true;
  8. Hello, Today I started with Phaser, I worked a lot at school with when I had free time. But I have a problem I can't delete an item in my group when my character makes a collision an item belonging to the group. make my group: (in create function) game.physics.startSystem(Phaser.Physics.ARCADE); game.physics.enable(character, Phaser.Physics.ARCADE); game.physics.enable(enemygroup, Phaser.Physics.ARCADE); enemygroup =; for(var i=0; i<10 ;i++) { var s = enemygroup.create(,, 'monster'); s.frame = 3; s.animations.add('enemymove', [2,3,4], 10, true);'enemymove'); game.physics.enable(s, Phaser.Physics.ARCADE); } for detect collider:(in update function) game.physics.arcade.collide(character, enemygroup, function(){ enemygroup.remove(this); }); /*OTHER WAY I HAVE TRY*/ for(var i = 0; i < enemygroup.length; i++) { if(game.physics.arcade.collide(character, enemygroup)) { enemygroup.remove(enemygroup[i]); } } Thanks you for help ! good development at all and sorry for my bad english (i'm french).
  9. Hi friends, I'm new to babylon js. i want to add a slope the player want to jump from that. but i don't know how to add this.
  10. Hello, I've got this code: create: function () { this.cursor = game.input.keyboard.createCursorKeys(); this.jump = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); this.xKey = game.input.keyboard.addKey(Phaser.Keyboard.X);, 0, 1920, 0); //Fisicas game.physics.startSystem(Phaser.Physics.ARCADE); = 1000; //fondo game.stage.backgroundColor = "#00FFFF"; //codigo de plataformas this.platforms =; this.platforms = game.add.sprite(0, 553, 'plataforma'); this.platforms = game.add.sprite(-400,300, 'plataforma'); game.physics.arcade.enable(this.platforms); this.platforms.body.immovable = true; // this.platforms = game.add.sprite(700,300, 'plataforma'); // this.platforms = game.add.physicsGroup(); //tipo this.player = game.add.sprite(125, 100, 'tipito'); this.player.anchor.setTo(0.5, 1);'tipito'); game.physics.arcade.enable(this.player); this.player.body.gravity.y = 800; //this.player.body.collideWorldBounds = true; (PRODUCE BUG CON //animaciones this.player.animations.add('correr', [0, 1, 2, 3, 4, 5], true); //'correr', 10, true); //game.physics.arcade.collide(this.player, this.platforms); }, update: function () { //this.walkVelocityR = this.player.body.velocity.x = 200 //this.walkVelocityL = this.player.body.velocity.x = -200 //this.jumpVelocity = this.player.body.velocity.y = -400 game.physics.arcade.collide(this.player, this.platforms); //this.platforms.body.checkCollision.down = false;; if (!this.player.inWorld) { this.playerDie(); } if ((this.cursor.right.isDown || this.cursor.left.isDown) && this.jump.isDown && this.player.body.wasTouching.down) { this.player.body.velocity.x = 200; this.player.body.velocity.x = -200; this.player.body.velocity.y = -700; } else if (this.cursor.right.isDown && this.cursor.left.isUp) { //this.cursor.left.enabled = false; this.player.body.velocity.x = 200;'correr', 5, true); this.player.scale.x = 1; this.a = 2; //console.log("este es a = " + a); } else if (this.cursor.left.isDown && this.cursor.right.isUp) { //this.cursor.right.enabled = false; this.player.body.velocity.x = -200;'correr', 5, true); this.player.scale.x = -1; } else if (this.jump.isDown && this.player.body.wasTouching.down) { this.player.body.velocity.y = -700; } else { this.player.body.velocity.x = 0; this.player.animations.stop(); this.player.frame = 4; } /*/if(this.cursor.right.justUp){ this.cursor.left.reset(); } if(this.cursor.left.justUp){ this.cursor.right.reset(); }/*/ //var style = { font: "65px Arial", fill: "#ff0044", align: "center" }; //this.text = game.add.text(0, 0, "phaser 2.4 text bounds",{ font: "10px Arial"}) //this.text.anchor.set(0.5); }, render: function (){ //game.debug.inputInfo(32,32); game.debug.key(this.cursor.right, 50,50) }, playerDie: function () { this.player.kill(); this.start() //, this.start, this) }, start: function (){ game.state.start('play'); } as you can see, I created a group which has two platforms sprites, the problem is when the collision between the player and the group occurs, just apply to the last one I created, the rest the player just avoid them. I don't know what is my mistake, please tell me if this is ridiculous or I'm an idiot.
  11. if we set box1.physicsImpostor do we still have to set box1.checkCollisions = true; or can we remove box1.checkCollisions = true; from code? why we need .checkCollisions = true? Is not box1.physicsImpostor enought to do in code? Why/When we must do .checkCollisions = true for colliders? How .checkCollisions = true actualy works in babylonjs engine ? greetings Ian
  12. Is is there any way to debug impostor of mesh. If we have BABYLON.PhysicsImpostor.BoxImpostor on some mesh, Can we debug bouning box of BoxImpostor or any other impostors, that we can see how Impostors looks like around mesh? greetings ian
  13. Is it possible to make mash collision physics calculation only around some radius around mesh? For example If we have ball with radius 1 unit and some big mesh with 1 milion vertices. I would like that mesh collision will calculate only collision around radius 5 unit around current ball position. Object with mesh-collision will be rotate at run-time (So if we don't have static-collider object_with_mesh_impostor/collider) Is possible to add this functions? Can be this funcions accelerate collision calculation? @RaananW @Deltakosh Greetings Ian
  14. Hi I have some problem with collider of child box. If we set parent box and add child box. If Child have its box collider, and if we rotate parent box, child is changing (potition and rotation), but child's box collider is not changing (position and rotation). How should we achive that box-collider will follow child when we (rotate or maybe change position of parent). Here is example of what I am talking about. (here is grid-box seen as box-collider of child-box. and grid-box is not changing position and rotation). (or mybe - here we can se grid-boxes as colliders and blue box is rotation and changing position but it's box-collider is not) How can/should we repair code so that box-collider is folowing its child's box-mesh? Greetings
  15. I am building a basketball game. I cannot get the ball to stop sticking to the rim colliders. When I was running p2 physics, the ball would simply bounce off the rim colliders as expected, but now, everytime the ball touches the rim colliders, it slows down movement rapidly and doesn't bounce or fall as expected. I think I might be missing a property setting somewhere. I set the rim colliders (leftMarker + rightMarker) to be immovable in create() but I'm not sure what else I need. I don't understand why the colliders stick to each other! Any help is appreciated! Basketball.Game = function (game) { this.score = null; this.scoreText = null; this.ball = null; = null; this.basket = null; this.rim = null; this.leftMarker = null; this.rightMarker = null; this.checker = null; this.ballCollisionGroup = null; this.rimCollisionGroup = null; this.collisionsOn = false; this.launched = false; this.respawned = false; this.lastPointerPos = null; //HTML element that will produce screenshot this.clickToSave = null; //Constants this.GRAVITY = 1600; this.SHOOT_FORCE = 1400; this.EDGE_CUSHION = 10; this.SCALE_PERCENT = 0.55; }; Basketball.Game.prototype = { create: function () { //Initialize physics world; = this.GRAVITY; //Create basket group this.basket =; //Load net sprite =, - 200, 'net');; this.basket.add(; //Load hoop markers this.leftMarker = - 57, 232, 'marker'); this.rightMarker = + 57, 232, 'marker'); this.leftMarker.anchor.setTo(0.5); this.rightMarker.anchor.setTo(0.5); this.basket.add(this.leftMarker); this.basket.add(this.rightMarker); //Load ball sprite this.ball =, - 100, 'ball'); this.ball.anchor.setTo(0.5); //Load rim sprite this.rim =, - 200, 'rim'); this.rim.anchor.setTo(0.5); this.basket.add(this.rim); //Load checker sprite this.checker =, - 80, 'checker'); this.checker.anchor.setTo(0.5); this.basket.add(this.checker); //Setup physics[this.leftMarker, this.rightMarker, this.ball]); this.leftMarker.body.setCircle(this.leftMarker.width / 2); this.rightMarker.body.setCircle(this.rightMarker.width / 2); this.leftMarker.body.moves = false; this.rightMarker.body.moves = false; this.leftMarker.body.immovable = false; this.rightMarker.body.immovable = false; this.leftMarker.body.enable = false; this.rightMarker.body.enable = false; this.ball.body.setCircle((this.ball.width * this.SCALE_PERCENT) / 2); this.ball.body.allowGravity = false; this.ball.body.bounce.set(0.8); this.ball.body.velocity.set(0); //Enable input, this);, this); //Initialize this.score = 0; this.scoreText =,, 'pixel', 'Score: ' + this.score, 36); this.scoreText.anchor.setTo(0.5); this.lastPointerPos = new Phaser.Point(0, 0); //For mobile Phaser.Canvas.setTouchAction(, 'auto'); = true; }, update : function () {, this.leftMarker);, this.rightMarker); //Only enable collisions when the ball is above the net markers if (this.ball.y < this.basket.children[1].y - this.ball.height / 2) { console.log("Detect collisions!"); this.leftMarker.body.enable = true; this.rightMarker.body.enable = true; } //Check if the ball is out of bounds if (this.ball.x < - this.ball.width / 2 || this.ball.x > + this.ball.width / 2|| this.ball.y < - this.ball.height / 2 || this.ball.y > + this.ball.height / 2) { //Respawn the ball if it hasn't already if (!this.respawned) { this.respawn(); } } }, render : function () {; if (this.leftMarker.body.enable) {;; } }, track : function () { //Update the last finger position this.lastPointerPos.x = this.input.x; this.lastPointerPos.y = this.input.y; //Set the ball physics to be still this.ball.body.allowGravity = false; this.ball.body.velocity.set(0); this.launched = true; }, launch : function () { //Launch the ball if it hasn't already if (this.launched) {{ x: this.SCALE_PERCENT, y: this.SCALE_PERCENT }, 1000, Phaser.Easing.Linear.Out, true); this.launched = false; this.ball.body.allowGravity = true; //Get the direction of finger swipe, normalize it, and apply a scalar to the velocity of the ball var direction = new Phaser.Point(this.input.x - this.lastPointerPos.x, this.input.y - this.lastPointerPos.y); Phaser.Point.normalize(direction, direction); if (direction.y < 0) { this.ball.body.velocity.x = direction.x * this.SHOOT_FORCE; this.ball.body.velocity.y = direction.y * this.SHOOT_FORCE; } } }, respawn : function () { this.respawned = true; //Set the ball physics to be still again this.ball.body.allowGravity = false; this.ball.body.velocity.set(0); //Disable collisions this.leftMarker.body.enable = false; this.rightMarker.body.enable = false; * 0.25, function () { this.respawned = false; //Rescale the ball and its body this.ball.scale.setTo(1); this.ballResized = false; //Spawn the ball in a new, random location var ballSpawnX = + this.ball.width / 2 + this.EDGE_CUSHION, ( - this.ball.width / 2) - this.EDGE_CUSHION); ballSpawnX =, 10); //Make sure the ball is in the boundary we set if (ballSpawnX < this.ball.width + this.EDGE_CUSHION) { ballSpawnX = this.ball.width + this.EDGE_CUSHION; } else if (ballSpawnX > - this.EDGE_CUSHION) { ballSpawnX = - this.EDGE_CUSHION; } this.ball.x = ballSpawnX; this.ball.y = - 100; }, this); }, saveCanvas : function () { var link ='image/png');, '_blank'); } };
  16. Hi, Can you please tell me which type of impostors does Oimo.js with Babylon.js support?I use babylon.js and oimo.js I read this instructions here On this page is mention thatthere are 4 impostors:1. Box2. Sphere3. Capsule4. MeshWhich of this 4 impostors are supported in oimo.js ???Which js implement collision oimo.js or babylon.js ??? With Blender I did:I create some simple path and one ball.I set physic collisions and rigid.Path objec has Mesh - collision (Mesh Impostor). In blender animations works fine.I attach file "" I try "" and load "path_example.babylon"Babylon sendbox doesn't work as it works in blender. Does Oimo.js doesn't support Mesh Impostor ? Which file implement Impostor or collision? Do babylon.js implemennt this or oimo.js? Is there any other solution to solve this. I would like to rotate path object (rotate throught all axises x, y, z) at runtime in babylon game engine. It is possible to solve this withouth Mesh-Impostor (Mesh collision shape on Path). I don't want to have static path. I would like to rotate it and I would like to use physic on ball and path objects. Is there any other possible sollution.Can I create colider-boxes around path and join this colider-boxes to one collider-object, because I would liketo rotate all box colliders as one model at runtime (I don't want to have seperated collider-boxes and static path!) Pleas help me. Can give me any advice or hint? Thanx
  17. I am trying for object to object collision where cubes be dragged and stop when collided with another cube. surfed net for hours tried babylon.js documentations but no luck. you can see the problem online at this live link: The cube, torus, sphere can drag through each other, I need them to stop passing through each other. Here is the code I written var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var createScene = function () { var scene = new BABYLON.Scene(engine); scene.clearColor = new BABYLON.Color3(0, 1, 0); var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 8, 50, BABYLON.Vector3.Zero(), scene); camera.attachControl(canvas, false); // This creates a light, aiming 0,1,0 - to the sky.var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); // Dim the light a small amountlight.intensity = .5; //Creation of a box //(name of the box, size, scene) var box = BABYLON.Mesh.CreateBox("box", 6.0, scene); //Creation of a sphere //(name of the sphere, segments, diameter, scene) var sphere = BABYLON.Mesh.CreateSphere("Sphere", 10.0, 10.0, scene);var materialSphere3 = new BABYLON.StandardMaterial("texture3", scene); materialSphere3.diffuseTexture = new BABYLON.Texture("textures/z002.jpg", scene);sphere.material = materialSphere3; // Move the sphere upward 1/2 its height//sphere.position.y = .25; //Creation of a plane //(name of the plane, size, scene) var plane = BABYLON.Mesh.CreatePlane("plane", 10.0, scene); //Creation of a cylinder //(name, height, diamTop, diamBottom, tessellation, [optional height subdivs], scene, updatable) var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene, false); // Creation of a torus // (name, diameter, thickness, tessellation, scene, updatable) var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false); // Creation of a knot // (name, radius, tube, radialSegments, tubularSegments, p, q, scene, updatable) var knot = BABYLON.Mesh.CreateTorusKnot("knot", 2, 0.5, 128, 64, 2, 3, scene); // Creation of a lines mesh var lines = BABYLON.Mesh.CreateLines("lines", [ new BABYLON.Vector3(-10, 0, 0), new BABYLON.Vector3(10, 0, 0), new BABYLON.Vector3(0, 0, -10), new BABYLON.Vector3(0, 0, 10) ], scene); // Moving elements box.position = new BABYLON.Vector3(-10, 0, 0); // Using a vector sphere.position = new BABYLON.Vector3(0, 10, 0); // Using a vector plane.position.z = 10; // Using a single coordinate component cylinder.position.z = -10; torus.position.x = 10; knot.position.y = -10; // Let's try our built-in 'ground' shape. Params: name, width, depth, subdivisions, scene var ground = BABYLON.Mesh.CreateGround("ground1", 26, 26, 2, scene); var startingPoint; var currentMesh; var getGroundPosition = function () { // Use a predicate to get position on the ground var pickinfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh == ground; }); if (pickinfo.hit) { return pickinfo.pickedPoint; } return null; } var onPointerDown = function (evt) { if (evt.button !== 0) { return; } // check if we are under a mesh var pickInfo = scene.pick(scene.pointerX, scene.pointerY, function (mesh) { return mesh !== ground; }); if (pickInfo.hit) { currentMesh = pickInfo.pickedMesh; startingPoint = getGroundPosition(evt); if (startingPoint) { // we need to disconnect camera from canvas setTimeout(function () { camera.detachControl(canvas); }, 0); } } } var onPointerUp = function () { if (startingPoint) { camera.attachControl(canvas, true); startingPoint = null; return; } } var onPointerMove = function (evt) { if (!startingPoint) { return; } var current = getGroundPosition(evt); if (!current) { return; } var diff = current.subtract(startingPoint); currentMesh.position.addInPlace(diff); startingPoint = current; } canvas.addEventListener("pointerdown", onPointerDown, false); canvas.addEventListener("pointerup", onPointerUp, false); canvas.addEventListener("pointermove", onPointerMove, false); scene.onDispose = function () { canvas.removeEventListener("pointerdown", onPointerDown); canvas.removeEventListener("pointerup", onPointerUp); canvas.removeEventListener("pointermove", onPointerMove); }// Leave this function // Enable Collisions scene.collisionsEnabled = true; //Then apply collisions and gravity to the active camera camera.checkCollisions = true; camera.applyGravity = true; //Set the ellipsoid around the camera (e.g. your player's size) camera.ellipsoid = new BABYLON.Vector3(1, 1, 1);box.checkCollisions = true;cylinder.checkCollisions = true; return scene; }; // End of createScene function <?php //Create Scene Ends ?> // Now, call the createScene function that you just finished creating var scene = createScene(); // Register a render loop to repeatedly render the scene engine.runRenderLoop(function () {scene.render(); }); // Watch for browser/canvas resize events window.addEventListener("resize", function () {engine.resize(); }); 2builtin_models.php
  18. Hi i made a character, Bob. How can i solve to Bob can hit the vase? scr+blend file <-- Link
  19. Hi guys, new to Phaser so maybe this isn't a bug. I searched on the forum but i cannot find any information about it, hope it will be not already asked. I found an issue regarding the circle body collider, in particular when scaling a sprite the circle collider doesn't fit the new scale of the sprite. You can try this out by modify the "Circle vs Polygon" example, just add this line of code: "sprite4.scale.setTo(0.7, 0.7);" after creating sprite4 in create() function. You can find an image attached. The fact is that if you remove the circle body (using the rect one) everything's fine. I think that is possible to modify the center of the collider manually, but i wanted to signal the problem.