Search the Community

Showing results for tags 'collision'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Found 475 results

  1. Demo sourecode

    Hello evryone, i try to better understand collisions & mehs interactions. I found this demo on the babylon.js 101 docs:,_mesh_collisions_and_gravity Is it possible to get the source code ?
  2. Hi, I realize this is a topic that was covered before but I couldn't find a solution and wasn't sure if there was one now. I have several imported meshes in a scene (relatively complex ones) and I can drag and drop one at a time. I want to check whether the mesh I am dragging has collided with a different one. In that case it is blocked and can't be dragged further. The problem is I would like to check this precisely, meaning exactly when two meshes touch each other, and not just by using a bounding box. Is there any way to do this? Thanks for your help!
  3. Hello, i played with the car demo on playground. But im not able to apply collisions to the car. Can anyone tell what i do wrong ? Playground I added: scene.collisionsEnabled = true; // Line 6 carBody.checkCollisions = true; // Line 104 // Also to the wheels wheelFI.checkCollisions = true; // Line 96 wheelRO.checkCollisions = true; // Line 92 wheelRI.checkCollisions = true; // Line 87 wheelFO.checkCollisions = true; // Line 82 // Cubes on ground boxes.checkCollisions = true; // Line 138 But dosnt work, i dont know why.
  4. Physics bug

    Box2D always calls contact callback twice. Here's an example: Ship with collision category 2 (ship at left) calls contact callback once while ship with collision category 1 (default) calls it twice. I've been trying to fix this for weeks but couldn't find any solution in web, i really need you guys to help me. function create() { game.physics.startSystem(Phaser.Physics.BOX2D); game.stage.backgroundColor = '#2d2d2d'; // User-controlled ship ship1 = game.add.sprite(250, 300, 'ship'); game.physics.box2d.enable(ship1); ship1.body.setCircle(14); // Ship with collision category 2 (triggers contact callback only once, it shouldn't even trigger it) ship2 = game.add.sprite(200, 200, 'ship'); game.physics.box2d.enable(ship2); ship2.body.setCircle(14); ship2.body.setCollisionCategory(2); // Ship with collision category 1 *default, i guess* (triggers contact callback TWICE) ship3 = game.add.sprite(300, 200, 'ship'); game.physics.box2d.enable(ship3); ship3.body.setCircle(14); game.physics.box2d.setBoundsToWorld(true, true, true, true, false); ship1.body.setCategoryContactCallback(1, function(b1,b2,f1,f2,begin){ if (begin){ total += 1; hitText.text = 'Contact callback called '+total+' times'; console.log("CONTACT: ", b2) } }, this); cursors = game.input.keyboard.createCursorKeys(); game.add.text(5, 5, 'Use arrow keys to move.', { fill: '#ffffff', font: '14pt Arial' }); total = 0; hitText = game.add.text(5, 30, 'Contact callback called 0 times', { fill: '#ffffff', font: '14pt Arial' }); } function update() { if (cursors.left.isDown) { ship1.body.rotateLeft(300); } else if (cursors.right.isDown) { ship1.body.rotateRight(300); } else { ship1.body.setZeroRotation(); } if (cursors.up.isDown) { ship1.body.thrust(300); } else if (cursors.down.isDown) { ship1.body.reverse(300); } } function render() { game.debug.box2dWorld(); }
  5. Let's say you have a sprite with a collision body of 16px/16px and all the areas to move in the map are exactly 16px/16px as well. It's very hard to maneuver the sprite to be at exactly in the opening to avoid collision letting the player move through it. For example, I attached a gif I made of how Bomberman solves this problem: Bomberman allows the player to clip slightly into the corner of the tile when they get close to the edge so the player starts moving diagonally into the open gap so then the player doesn't have to worry about lining up perfectly. I've looked into doing that but collision detection is AABB on tiles. I also can't just set the players x/y coordinates to be in the right spot because that will break any other collision physics going on. So is there a way to round the corners like in Bomberman or to use velocity to position the player in the opening of the lane perfectly or any other ideas I'm not thinking of? Thanks
  6. My player sprite doesn't collide with the tilemap at all. I've also tried enabling physics for the layers and map, which doesn't work either. I also checked all other topics in this forum about collisions with a sprite and tilemap, but I still can't figure out the error. Here's my code: import { findObjectsByType, movePlayerTo } from './src/map.js'; import { checkPlayerMovement } from './src/movement.js'; const game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render }, false, false); //The player sprite and properties let player, properties = {}; //Settings const worldScale = 2; //Helpers let cursors; //Layers let map, background, walls; function preload() { //Load tiles game.load.spritesheet('tiles', 'assets/Tileset.png', 16, 16); game.load.tilemap('SafeZone1', 'assets/SafeZone1.json', null, Phaser.Tilemap.TILED_JSON); } function create() { //LOGIC game.stage.backgroundColor = "#1c1117"; game.physics.startSystem(Phaser.Physics.ARCADE); setMap('SafeZone1'); player = spawnPlayer(50, 50); cursors = game.input.keyboard.createCursorKeys(); movePlayerTo(player, findObjectsByType('playerStart', map, 'objects')[0], worldScale);,; //Spawn the player function spawnPlayer(x, y) { const p = game.add.sprite(x, y, 'tiles', 132); game.physics.enable(p); p.scale.setTo(worldScale); p.body.collideWorldBounds = true; return p; } //Add the map with the given name and manipulate it accordingly. function setMap(mapName) { map = game.add.tilemap(mapName); map.addTilesetImage('Tileset', 'tiles'); map.setCollisionBetween(0, 300); //All tiles walls = map.createLayer('walls'); walls.scale.setTo(worldScale); background = map.createLayer('background'); background.scale.setTo(worldScale); background.resizeWorld(); } } function update() { game.physics.arcade.collide(player, map); if(cursors) checkPlayerMovement(player, cursors, 150); } function render() { game.debug.bodyInfo(player, 5, 20); } map.js export function findObjectsByType(type, map, layer) { var result = []; map.objects[layer].forEach(function (element) { if ( === type) { element.y -= map.tileHeight; result.push(element); } }); return result; } export function createFromTiledObject(element, group) { var sprite = group.create(element.x, element.y,; Object.keys( (key) { sprite[key] =[key]; }); } export function movePlayerTo(player, element, worldScale) { player.x = element.x * worldScale; player.y = element.y * worldScale; } movement.js export function checkPlayerMovement(player, cursors, speed) { const vel = player.body.velocity; vel.x = 0, vel.y = 0; if(cursors.left.isDown) vel.x = -speed; if(cursors.right.isDown) vel.x = speed; if(cursors.up.isDown) vel.y = -speed; if(cursors.down.isDown) vel.y = speed; }
  7. So I'm getting these weird collision glitches, where I get knocked back randomly. This only seems to happen when I set my sprite's body's width to 8, as opposed to the sprite's width of 16. I'm using Arcade physics, if that makes a difference.
  8. I'm trying to create a simple (at least in my mind) scene where I have a ball rolling within the confines of a single mesh "room" I built in blender and exported as .gltf. However, no matter what I do, the ball seems to always go through the imported mesh and hit the ground below (which I kept to make sure the ball doesn't fall forever). Am I doing something wrong? In the playground there isn't a physics engine but locally I've tried cannon.js after reading that it supports MeshImpostors but I get the same result with or without a physics engine.
  9. Destroying coins in collision

    Hi guys! I am newbie to phaser and i would like to ask question and guide me in my project. I am currently developing a game for my project. My game will collect coins and coins that have question to be answered and will be evaluated if the user can play next level. Im using Tiled. And i am having trouble when the collision on the coins it increase the score multiple times before it will gone. Here is my code. Hope you guys help me. getCoin:function(){ map.putTile(-1,layer.getTileX(player.x), layer.getTileY(player.y)); score += 10; scoreText.text = 'Score: ' + score; } It replaces the tile with a tile that didnt exist so i appears to be gone.
  10. P2 sprite collision group pain

    Hi all, Been banging my head against the wall for ages with this. Default P2 collision works, I clearShapes() on each sprite to get rid of these boundary boxes and loadPolygon() to get my custom boundaries (defined in sprite_physics.json). However the collision groups appear not to be working as my player sprite goes straight through/under the enemy. Can anyone see where I'm going wrong? // in index.html (function() { var game = new Phaser.Game(1024, 768, Phaser.AUTO, null) game.state.add('Game', Game); game.state.start('Game'); })(); // in game.js var Game = function (game) { }; Game.prototype = { preload: function () {'player', 'assets/player.png');'enemy', 'assets/enemy.png');'sprite_physics', 'assets/sprite_physics.json'); }, create: function () {; this.playerCollisionGroup =; this.enemyCollisionGroup =; this.createPlayer(); this.createEnemy(); }, update: function () { // <snip> do some steering stuff </snip> }, createPlayer: function () { this.player =, + 300, 'player');, true); // so I can see the polygon's boundaries // Gets rid of current bounding box this.player.body.clearShapes(); // BUT THEN need to add collision cos default p2 collision is wiped with clearShapes() // Add boundary shape from PhysicsEditor this.player.body.loadPolygon('sprite_physics', 'player'); // Seems to do nothing :( this.player.body.setCollisionGroup(this.playerCollisionGroup); this.player.body.collides([ this.enemyCollisionGroup ]); }, createEnemy: function () { this.enemy =,, 'enemy');, true); this.enemy.body.clearShapes(); this.enemy.body.loadPolygon('sprite_physics', 'enemy'); this.enemy.body.setCollisionGroup(this.enemyCollisionGroup); this.enemy.body.collides([ this.playerCollisionGroup ]); } }
  11. Hi I am beginner in babylonJs and javascript. I´m doing this, but, I have a lot of questions about how to do certain things and if I´m on the right track 1) how can build a line from one object to another? 2) the ball need continue to top and moving on board. who i can do it? 3) who show line in moving clicked mouse and hide after PointerUp 4) who can i destroy a object if ball colide? I am studying the tutorials and I see that this tool is incredibly powerful. Thanks for any help
  12. Collison not working properly for me

    I am trying to make a simple game with this super cool engine. But I am facing some issues regarding the collisions i have setup. Can anyone please help me on this. Code Link::
  13. Problem with collision?

    Hi all. I'm having a problem with collision. I basically need to allow the player ( Luigi ) to stand on top of the 1st pipe in the demo, and press the down arrow to activate in this case as a test, make him die and delete. Also I need to get Luigi in this mario clone I made to "bump" his head on a block and make the block jump up and back down like in the NES mario game? Here's the demo I uploaded : Here's the file that allows for the collision : the lines for the pipe collision callback function are lines 587 - 627 var pipeOverlap = function(player, pipe) the lines for the brick collision callback function are lines 629 - 669 var brickOverlap = function(player, pipe) Thank you all so much for the help! <3 ~M
  14. Hello! I am new to these forums and I just have to say Babylon.js is now one of my favorite libraries for webGL. I have finally switched over from three.js and have to say this has been so much fun to play with. Just recently I am trying to make a physics-based environment where you can pick up and drop objects similar to the old source engine and garry's mod. I created this playground to show an example of what I am trying to create but some of the bugs are shown in the gyazo link. The object, when held and looking downfalls through the floor. Sometimes when dropped it becomes at a sliding state where it will not stop sliding and on pickup, it will fall through the floor. So my question is, how can I stop the object from going through the floor?
  15. Collision problem

    Hello Phasers, I'm new to Phaser and I'm starting to have fun with it. But I have an issue with collision using Arcade physics. The problem is that when a collision happens between two bodies, the collision make them overlap a little bit and at some point the bodies pass through each other as you can see in this example. Adding the property bounce = 0 to the line body solve part of the problem. But their is style a slight overlap. Can somebody explain me what's happening and give me a solution to the problem ? Thanks.
  16. Hello, I've started using phaser just recently, I'm making a RPG game, and so far I've been learning how to make tilemaps, use spritesheets, animate sprites, and I'm falling in love with the framework, I just have a little problem. My player is set to collide with World Bounds, and it works for every bound, except the top one. I'm using the es6 webpack template, here's my, so far piece of code. create() method of my Game.js class. (I have nothing else in update, since I manage that in my own Sprite Class), 0, 100 * 32, 100 * 32) = true = false /* SET GAME MAP */ = game.add.tiledmap('map') this.player = new Player({ game:, x: 0, y: 0, lookId: 0, health: 100, mana: 100 }), 0, 100 * 32, 100 * 32) Sprite Class import Phaser from 'phaser' import { Outfits } from './Outfits' const IMAGES = '../../assets/images/' const LOOK = { UP: 0, DOWN: 4, RIGHT: 2, LEFT: 6 } export default class extends Phaser.Sprite { constructor ({ game, x, y, lookId, health, mana }) { super( game, x * 32, y * 32, Outfits[lookId].sheets[0], Outfits[lookId].frame ) this.outfit = Outfits[lookId] this.mana = mana = health this.smoothed = false this.anchor.setTo(1, 1) game.physics.p2.enable(this) this.body.setRectangle(32, 32) this.body.debug = true this.body.fixedRotation = true this.body.offset.x = -16 this.body.offset.y = -16 this.cursors = game.input.keyboard.createCursorKeys() game.add.existing(this) } /** * SETS A NEW FRAME TO THE PLAYER SPRITE LOOKING */ playerPosition (difference) { let spriteId = this.outfit.frame + difference let lastSprite = 143 if (spriteId > lastSprite) { this.loadTexture(this.outfit.sheets[1]) return spriteId - lastSprite } else { this.loadTexture(this.outfit.sheets[0]) return spriteId } } update () { this.body.setZeroVelocity() console.log('World position', this.worldPosition) //'moveUp', 5, true) if (this.cursors.up.isDown) { this.frame = this.playerPosition(LOOK.UP) // if (this.worldPosition.y <= 0) return this.body.moveUp(1000) //'up', 5, true) } if (this.cursors.right.isDown) { this.body.moveRight(1000) //'right', 5, true) this.frame = this.playerPosition(LOOK.RIGHT) } if (this.cursors.down.isDown) { this.body.moveDown(1000) this.frame = this.playerPosition(LOOK.DOWN) //'down', 5, true) } if (this.cursors.left.isDown) { this.body.moveLeft(1000) this.frame = this.playerPosition(LOOK.LEFT) //'left', 5, true) } // // if ( { // console.log('LimitX', // // starfield.tilePosition.x -= (ship.body.velocity.x * game.time.physicsElapsed); // } // // if ( { // console.log('LimitY', // // starfield.tilePosition.y -= (ship.body.velocity.y * game.time.physicsElapsed); // } // = e => { // this.player.animations.stop() // if (e.keyCode == Phaser.Keyboard.UP) { // this.player.frame = this.playerStartingFrame + 3 // } // if (e.keyCode == Phaser.Keyboard.DOWN) { // this.player.frame = this.playerStartingFrame // } // if (e.keyCode == Phaser.Keyboard.LEFT) { // this.player.frame = this.playerStartingFrame + 9 // } // if (e.keyCode == Phaser.Keyboard.RIGHT) { // this.player.frame = this.playerStartingFrame + 6 // } // } } } In summary my player does collide with world bounds but only bottom, left and right, not top.
  17. Phaser

    Hey everyone, I have noob questions. I'm creating a platformer game with Phaser, as well as Tiled to create a layered JSON map. So far one of my tile layers is handling all of the inanimate object collisions via, 600, true, this.collisionLayer, false) to which I've passed indices to my entire tileset (only using one). Given that I've done this, does the number of tiles I actually create in that layer via Tiled affect performance? Would it be advisable for me to just use setCollision() or setCollisionBetween and pass only the necessary tiles that I plan on passing to that layer? My tileset is about 1/3 tiles I want to use for collision, and they're not totally organized but I can reasonable get that done if necessary. Also, what's better for performance, bigger tilesets or more, smaller tilesets. What would you consider a sweet spot for this in terms of size and number of tilesets? Note that I've already compressed my images etc and not having any performance issues so far, just taking preventative measures. Thanks for any help in advance.
  18. Particle collision

    i'm trying to change collision option after emitter had started but i can't create () { // --------------------------------CONFIG-------------------------------- this.config = { 'followCursor': false, 'mouseClick': false, 'gravityX': 0, 'gravityY': 0, 'positionX': 960, 'positionY': 540, 'maxParticles': 50, 'particleKey': 'particle', 'frames': 1, 'quantity': 5000, 'collide': false, 'collideWorldBounds': false, 'scaleToX': 1, 'scaleToY': 1, 'scaleRate': 0, 'scaleEase': Phaser.Easing.Linear.None, 'scaleYoyo': false, 'alphaMin': 1, 'alphaMax': 0, 'alphaRate': 0, 'alphaEase': Phaser.Easing.Linear.None, 'alphaYoyo': false, 'rotationMin': 0, 'rotationMax': 0, 'bounceX': 0, 'bounceY': 0, 'angularDrag': 0, 'particleMinSpeedX': -300, 'particleMinSpeedY': -300, 'particleMaxSpeedX': 300, 'particleMaxSpeedY': 300, 'emitterSpeedX': 200, 'emitterSpeedY': -200, 'lifespan': 500, 'particleFrequency': 250, 'particleQuantity': 500 } // --------------------------------EMITTER-------------------------------- this.emitter =, this.config.positionY, this.config.maxParticles) this.makeParticles() this.emitter.minParticleSpeed.setTo(this.config.particleMinSpeedX, this.config.particleMinSpeedY) this.emitter.maxParticleSpeed.setTo(this.config.particleMaxSpeedX, this.config.particleMaxSpeedY) this.emitter.gravity.x = this.config.gravityX this.emitter.gravity.y = this.config.gravityY this.emitter.setScale(this.config.scaleFromX, this.config.scaleToX, this.config.scaleFromY, this.config.scaleToY, this.config.scaleRate, this.config.scaleEase, this.config.scaleYoyo) this.emitter.setAlpha(this.config.alphaMin, this.config.alphaMax, this.config.alphaRate, this.config.alphaEase, this.config.alphaYoyo) this.emitter.angularDrag = this.config.angularDrag this.emitter.setRotation(this.config.rotationMin, this.config.rotationMax) this.emitter.bounce.setTo(this.config.bounceX, this.config.bounceY) this.emitter.setXSpeed(this.config.emitterSpeedX) this.emitter.setYSpeed(this.config.emitterSpeedY) this.startEmitter() // here I want to change both collision options from false to true, and to make it work with new collision options } startEmitter () { this.emitter.start(false, this.config.lifespan, this.config.particleFrequency, this.config.particleQuantity, false) } makeParticles () {, this.config.positionY, this.config.maxParticles) this.emitter.makeParticles(this.config.particleKey, this.config.frames, this.config.quantity, this.config.collide, this.config.collideWorldBounds) } Can anybody help me in this?
  19. Polygon collision does not work

    Hi Everyone! Hopefully someone can help with the issue I have faced. I am building a simple racing game and want to implement collision between car and other objects. I am using p2 physics. When I create primitive body objects (e.g. body.setRectangle) collision works fine, but when i use polygon (body.loadPolygon) i have created in PhysicsEditor the car just rides throw these objects without any collisions. I have tried building very simple objects to exclude "holes" in collide, creating collision groups but unfortunately any of these things helped. Attaching my code and a screenshot Car class: export default class extends Phaser.Sprite { constructor ({ game, x, y, asset }) { super(game, x, y, asset) game.physics.p2.enable(this, true) this.anchor.setTo(0.5) this.body.clearShapes() this.body.loadPolygon('physicsData', 'car') this.body.angle = -90 this.cursors = game.input.keyboard.createCursorKeys() this.velocity = 0 } Obstacle code: create () { = 0.8 =, 0, 2880, 1620, 'map'), 0, 8640, 4860), 3) this.mapAbove =, 0, 'race'), true) this.mapAbove.body.clearShapes() this.mapAbove.body.loadPolygon('physicsData', 'race') = new Car({ game:, x: 3800, y: 3750, asset: 'car' }) } Also i am using this stuff as skeleton - Could troubles be in incorrect packages? Looking forward for Your reply, Thanks!
  20. Hi there, I'm working on some P2 physic and getting the attached result, which is weird because the two objects collides without overlapping on one another. I'm I missing something? The code is as follow: game.physics.enable(car, Phaser.Physics.P2JS); car.body.debug = true car.body.angle = car.angle car.body.rotation = car.rotation car.body.addCapsule(70,20) car.body.setCollisionGroup(this.carCollisionGroup); var v =100; var angle = car.body.angle; var vx = v * Math.cos(angle * (Math.PI/180)) var vy = v * Math.sin(angle * (Math.PI/180)) car.body.velocity.x = vx; car.body.velocity.y = vy; Thanks
  21. Collision detection in 3/4 perspective

    Does anyone know how to do collision detection for games with a 3/4 (or angled) perspective. Examples are Teenage Mutant Ninja Turtles on the NES or Streets of Rage on Sega. In those games the player can walk from below up to a wall until their feet contact the wall. So only the bottom of their sprite collides with walls. But their whole sprite collides with bullets and attacks. I've been trying to do this forever in Phaser and I can't figure it out. Has anyone tried this before? Are their any examples of this in phaser?
  22. Hi everyone, I'm actually making a simple 2d platformer with arcade physic and I recently implemented a tiled tilemap which contain an "object layer". In this object layer I draw collision zone with the polyline tool. Now I want thoses "collision zones" to be recognized by phaser. Which mean : if the player overlap "object layer"'s content, it will blocked as if it was a wall. I just want to know if this is possible or if I must set collision "on" for my tile layers in which I may put all my walls tiles. Also, If I must use the 2nd solution, if my tile sprite is smaller than my 24x24 tile square (I attached an example), will the hitbox fit the sprite size or the 24x24 square ? Thanks beforehand.
  23. Hello, need a little help here I have a scene where I load a dude and clone many versions of him (about 20). I enable collisions on them, on a tank in the scene, and also on the ground. collisions work as expected when I order the dudes to moveWithCollision until they hit the wall, and also when they move towards the tank. But : Dudes do not collide with each other, when they come close, they merge and become a single dude. I tried modifying the ellipsoid and ellipsoid offset , made them much more bigger and still the same effect. I tried also creating a bounding box , making it a child of dude , and moving it with collisions instead, but things didn't go so well also. This is my demo (compressed) - tried to use the playground , loading assets from the github repo url but it didn't work. I also tried using this function Temechon provided here to visualize the ellipsoid , and whatever the size I make of the ellipsoid they finally merge with each other, I see the ellipsoids merge without the slightest objection Pleasetell me the best practice in this situation, I am sure I am not the first to try to load multiple dudes with collision Thanks in advance
  24. Physics P2 Collision equation

    Hi, i've 2 characters physics p2 enabled, they both can collide with each other, they are also static=False.Which mean that when one run toward another, the second get back and get some velocity. Which properties i've to set to get more control on this effect ? I tried editing masse/inertia but got had not good results. Any tips ? I'm also looking for an equation that show how the effect works depending on theses parameters. Thx
  25. I'm trying to do collision detection for a game that has a camera perspective similar to NES classics like Metal Gear, Teenage Mutant Ninja Turtles 2, and double dragon. It's mostly top down, but at an angle so that you can see the sides of objects and characters. See the image for an example. Notice how the play sprite (green) can walk all the way up to the car until his feet touch the bottom of the car. So the collision is not on the whole character model, only his feet. Also, when attacking or being attached the player sprite and the enemy sprite must be on the same horizontal plane for their attacks to collide. I've been trying for ages to get something like this to work in Phaser, but I don't know how. Are there any solutions out there? Any games written in phaser that already do this?