Search the Community

Showing results for tags 'collision'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 525 results

  1. microspace

    Collision in multilevel rpg game

    I've got a tilemap created in Tiled and there is a platform with ladder on the map. How to make player stop when it tries to move from platform to group layer? Also how to make player collide with tiles pointed by green arrow when player approaches then from left, bot not collide when player approaches from right. Simply, is there `checkCollision` property for a tile?
  2. Hello, I've modified a little one labs example (first game). I have 1 ground platform and all stars falling on it, and a player. Plus collisions between everything, even between stars themselves. Player initially is in the middle of the screen and stars. If I move to the right - stars are moving, hitting each one and all joining the line; so you hit 1 and move it, then 2'nd star joins, then 3'rd, 4'th and so on. That's correct, you get all stars in a line next to each other. The issue appears when you move to the left - I'm able to join only 2 stars - all other acts like physicsless and player/stars just go through them. So you get max 2 stars in a row. Is this an arcade/collisions bug? What can I do to make collisions always be the same and objects do not go through each other? If I comment out the internals of my function collideElem - results for different directions are still different. I use it for stopping the star after a collision. Here is my testing code which is runnable at labs.phaser.io: var config = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 300 }, debug: false } }, scene: { preload: preload, create: create, update: update } }; var player; var stars; var platforms; var cursors; var game = new Phaser.Game(config); function preload () { this.load.image('sky', 'src/games/firstgame/assets/sky.png'); this.load.image('ground', 'src/games/firstgame/assets/platform.png'); this.load.image('star', 'src/games/firstgame/assets/star.png'); this.load.spritesheet('dude', 'src/games/firstgame/assets/dude.png', { frameWidth: 32, frameHeight: 48 }); } function create () { this.add.image(400, 300, 'sky'); platforms = this.physics.add.staticGroup(); platforms.create(400, 568, 'ground').setScale(2).refreshBody(); player = this.physics.add.sprite(300, 450, 'dude'); player.setCollideWorldBounds(true); this.anims.create({ key: 'left', frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }), frameRate: 10, repeat: -1 }); this.anims.create({ key: 'turn', frames: [ { key: 'dude', frame: 4 } ], frameRate: 20 }); this.anims.create({ key: 'right', frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }), frameRate: 10, repeat: -1 }); cursors = this.input.keyboard.createCursorKeys(); stars = this.physics.add.group({ key: 'star', repeat: 11, setXY: { x: 12, y: 0, stepX: 70 } }); this.physics.add.collider(player, platforms); this.physics.add.collider(stars, platforms); this.physics.add.collider(player, stars, collideElem, null, this); this.physics.add.collider(stars, stars, collideElem, null, this); } function collideElem(obj1, obj2) { obj2.body.setVelocityX(0); obj2.body.setVelocityX(0); } function update () { if (cursors.left.isDown) { player.setVelocityX(-160); player.anims.play('left', true); } else if (cursors.right.isDown) { player.setVelocityX(160); player.anims.play('right', true); } else { player.setVelocityX(0); player.anims.play('turn'); } if (cursors.up.isDown && player.body.touching.down) { player.setVelocityY(-330); } }
  3. FlopJack

    Detection zone

    I would to implement in my game a 'collision zone' on enemy. For example when the player approaches (without touching it ) an enemy, this one start to follow him.
  4. See updates in below comments I made a collider: this normally works. But however this time it doesn't. There is a collider which lets the player colliding with (this) object. when I move the player on the object, the collideCB is triggered. But there is no collision. Even in debug mode for arcade physics, I can see the body. But they are not colliding, just overlapping. Anyone has an idea why? body: this.scene.physics.world.enable(this); this.setOrigin(0, 0); this.body.setSize(8, 8, false); this.body.setImmovable(true); this.body.allowGravity = false; colliding code: this.scene.physics.add.collider(this.scene.config.player, this, collideCB, () => { return this.getData('active'); }, this) (...) collideCB() { console.log('working') } Also, the debug information seems to clearly address both sprites, that should collide. but it does not collide and the callback is fired. ALl other collisions are working. (attached screenshot)
  5. Hello, found a bug in the matter physics engine collision detector, I'm working with polygonal colliders. When an object collides with another and passes through it the "collision end" event doesn't trigger until de object is outside the real shape of the sprite (image size). I'm attaching a small video of it in which I'm logging the collision between the small vert of the triangle against the body of the other triangle, you can see how the "collision end" triggers when the vert enters and leave from the same side but not when it goes through it (until leaving the image size). Hope it helps fixing it! and if anyone knowns a workaround it would really help me. Regards. Edit: here's a small c9 demo (event trigger notification on console). https://ide.c9.io/mmolina01/phaser-matter-demo https://phaser-matter-demo-mmolina01.c9users.io/ collisions.mov
  6. I have a sprite of a character moving and I'm trying to apply physics collide on it that when it hits a rock for example health is decreased. I managed to achieve collision but as rectangular shape of the image, what I want to achieve is the collision happens on the boundaries of the character itself. I used PhysicsEditor to generate the JSON file, but I'm still not sure how to use it to achieve pixel perfect collision. Any thoughts?
  7. pacxiu

    Flappy Bird Collision problem

    Hi there, today I started learning Phaser3 - I'm building Flappy Bid game. Unofrtunately I have problem with detecting of collision - it seems that overlap is not working for me and this.bird and this.pipes are never colliding according to it :(. I have tried several solutions but none seems to be working for me. I'm using phaser version from npm, because I'm working with React along for some UI stuff. Also I'm not sure if I can somehow refresh texture of all pipe elements after it is loaded? Also this.bird.body is returning undefined - I don't know why is this. I think it should return Arcadic Physics? import Phaser from 'phaser'; import bird from '../../assets/bird.png'; import pipe from '../../assets/pipe.png'; class GameScene extends Phaser.Scene { constructor(test) { super({ key: 'GameScene', physics: { arcade: { gravity: { y: 0 }, debug: true } }, }); } preload() { this.textures.addBase64('bird', bird); this.textures.addBase64('pipe', pipe); } create() { // updating textures this.textures.on('onload', () => { this.bird.setTexture('bird'); }); // bird definition this.bird = this.physics.add.image(100, 245, 'bird') .setActive(true) .setVelocity(0, 0) .setGravity(0, 1000) this.physics.world.enable(this.bird) // obstacles definition this.pipes = this.add.group(); this.physics.world.enable(this.pipes) this.keys = { jump: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP) } this.timedEvent = setInterval(() => { this.addPipeColumn(); }, 2000); this.addPipeColumn(); } update() { if (this.bird.y < 0 || this.bird.y > 800) { this.gameOver(); } if (this.keys.jump.isDown) { this.jump(); } this.physics.overlap(this.bird, this.pipes, this.gameOver, null, this) } gameOver() { clearInterval(this.timedEvent); this.scene.restart(); } jump() { this.bird.body.velocity.y = -350; } addPipe(x, y) { const pipe = this.physics.add.image(x, y, 'pipe') .setActive() .setVelocity(-200, 0) .setGravity(0); pipe.checkWorldBounds = true; pipe.outOfBoundsKill = true; this.pipes.create(pipe); } addPipeColumn() { const hole = Math.floor(Math.random() * 5) + 1; for (let i = 0; i < 12; i++) { if (i !== hole && i !== hole + 1) { this.addPipe(800, i * 60 + 10); } } } } export default GameScene I'm also adding React code where I mount Game: import React, { Component } from 'react'; import Phaser from 'phaser'; import GameScene from './scenes/GameScene' class Game extends Component { componentDidMount() { this.createGame(); } createGame() { const config = { type: Phaser.AUTO, width: 800, height: 600, parent: 'Game', backgroundColor: '#71c5cf', // comment out general physics // physics: { // default: 'arcade', // arcade: { // gravity: { y: 100 } // } // }, scene: [ GameScene ] }; // creating game new Phaser.Game(config); } render() { return ( <div id="Game"></div> ); } } export default Game;
  8. Hello, The answers to my questions may seem evident, please consider I'm a complete beginner to HTML and JS Phaser coding. I am having two problems with my code. The first is that renderTexture doesn't seem to work. I am trying to make a trail of my player, like the "trail" example on labs.phaser.io. I actually copied the code needed, but it does not work. Here is the line causing the problem: rt = this.make.renderTexture({ x: 0, y: 0, width: 800, height: 800 }).setOrigin(0, 0); in the create function. And here is what the console says: Uncaught TypeError: this.make.renderTexture is not a function at Scene.create ((index):301) at SceneManager.create (phaser.js:51412) at SceneManager.loadComplete (phaser.js:51329) at LoaderPlugin.emit (phaser.js:2622) at LoaderPlugin.processComplete (phaser.js:111210) at LoaderPlugin.removeFromQueue (phaser.js:111190) at LoaderPlugin.processUpdate (phaser.js:111171) at Image.data.onload (phaser.js:8947) _____________ The second issue affects the collision boxes of my obstacles. Those are static sprites, and the physics are "MatterJS". I have defined the shape of the hitboxes in PhysicsEditor, and have done exactly like in their tutorial to link the JSON to the sprites, but it doesn't work: the collision is not only triggered when the player enters the parts in the shape, but also in the rest of the rectangle that should not be considered. Furthermore, all physical properties I've set in the editor don't work. Then, I tried to do all of it without physicsEditor: I added required setters to do the work. While the physical properties are now correct, the hitboxes are still the whole rectangles instead of the chosen parts. Here is the code: //example var ob12 = this.matter.add.sprite(800-211, -6353, 'ob12').setStatic(true).setSensor(true).setFriction(0,0,0).setInteractive(new Phaser.Geom.Polygon([ [ { "x":132, "y":291 }, { "x":337, "y":498 }, { "x":423, "y":2 } ], [ { "x":50, "y":789 }, { "x":239, "y":979 }, { "x":337, "y":498 } ], [ { "x":0, "y":1220 }, { "x":423, "y":1639 }, { "x":239, "y":979 } ], [ { "x":239, "y":979 }, { "x":423, "y":1639 }, { "x":337, "y":498 } ], [ { "x":337, "y":498 }, { "x":423, "y":1639 }, { "x":423, "y":2 } ] ]), Phaser.Geom.Polygon.Contains); Thank you, Vainly
  9. Hello! I've noticed, that if I modify exact tile's collisions with tile.setCollision(false, false, true, false) - it also disables neighbor tiles collisions (left-right directions). A screenshot is attached. Red arrow shows a modified tile, blue arrow shows a tile which's left-right collisions have disappeared. Lab's modified example that you can copy-paste into https://labs.phaser.io/edit.html?src=src/game objects/tilemap/collision/tile callbacks.js : var config = { type: Phaser.WEBGL, width: 800, height: 576, parent: 'phaser-example', physics: { default: 'arcade', arcade: { gravity: { y: 300 } } }, scene: { preload: preload, create: create, update: update } }; var game = new Phaser.Game(config); var map; var cursors; var debugGraphics; var text; var player; var groundLayer; function preload () { this.load.image('ground_1x1', 'assets/tilemaps/tiles/ground_1x1.png'); this.load.tilemapTiledJSON('map', 'assets/tilemaps/maps/tile-collision-test.json'); this.load.image('player', 'assets/sprites/phaser-dude.png'); } function create () { map = this.make.tilemap({ key: 'map' }); var groundTiles = map.addTilesetImage('ground_1x1'); map.createDynamicLayer('Background Layer', groundTiles, 0, 0); groundLayer = map.createDynamicLayer('Ground Layer', groundTiles, 0, 0); groundLayer.layer.data[8][8].index = 11; groundLayer.layer.data[8][9].index = 1; groundLayer.setCollisionBetween(1, 10); // This breaks the collisions with the neighbor tiles groundLayer.layer.data[8][8].setCollision(false, false, true, false); player = this.physics.add.sprite(80, 70, 'player').setBounce(0.1); // We want the player to physically collide with the ground this.physics.add.collider(player, groundLayer); this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels); this.cameras.main.startFollow(player); cursors = this.input.keyboard.createCursorKeys(); text = this.add.text(16, 16, 'Arrow keys to move. Space to jump', { fontSize: '20px', fill: '#ffffff' }); text.setScrollFactor(0); text.setText('Arrow keys to move. Space to jump'); } function update (time, delta) { // Horizontal movement player.body.setVelocityX(0); if (cursors.left.isDown) { player.body.setVelocityX(-200); } else if (cursors.right.isDown) { player.body.setVelocityX(200); } // Jumping if ((cursors.space.isDown || cursors.up.isDown) && player.body.onFloor()) { player.body.setVelocityY(-300); } } Here important is line 48: groundLayer.layer.data[8][8].setCollision(false, false, true, false); If you comment it out - everything is OK - you can walk through red arrow's tile and blue tile's collisions works fine. If you run it as is - you can walk through red arrow's tile and through neighbor blue tiles too - this is wrong. How this can be fixed? Thanks!
  10. Hello, I am quite new to phaser and Tiled. I was wondering if anyone could give me some help with understanding on how to create tilemap collisions that are more than just squares with the p2 physics system. Right now every tile has a square collision box, I would like the collision shape to match the tile shape so that I can have slopes and what not. I am a quite a bit confused on the Tiled to phaser workflow especially on what p2.convertTilemap does and how Tiled's collision editor ties into phaser. So far my code looks like this: preload: function () { this.game.load.image('mapTiles', "assets/platformer-pack-redux-360-assets/Spritesheets/spritesheet_ground.png"); this.game.load.tilemap('level1', "assets/testmap2.json", null, Phaser.Tilemap.TILED_JSON); this.game.load.spritesheet('player', "assets/kenney_platformercharacters/PNG/Player/player_tilesheet.png", 80,110, 24); }, create: function () { this.game.physics.startSystem(Phaser.Physics.P2JS); var level1 = this.game.add.tilemap('level1'); level1.addTilesetImage('spritesheet_ground', 'mapTiles'); var wallsLayer = level1.createLayer("layer1"); wallsLayer.resizeWorld(); level1.setCollisionByExclusion([],true,'layer1'); this.game.physics.p2.convertTilemap(level1,wallsLayer); this.game.physics.p2.convertCollisionObjects(level1,"objectLayer1"); player = this.game.add.sprite(110,80, 'player'); var walk = player.animations.add('walk', [0]); player.animations.play('walk', 10, true); this.game.physics.p2.enable(player); this.game.camera.follow(player); player.body.setZeroDamping(); player.body.fixedRotation = true; this.game.physics.p2.setBoundsToWorld(true,true,true,true,false); cursors = this.game.input.keyboard.createCursorKeys(); wallsLayer.debug = true; player.body.debug = true; }, Any help is appreciated!
  11. Playground demonstrating the issue: https://playground.babylonjs.com/#9JSLE2 Explanation: I'm trying to create a simple walk around scene and the built in collision system seems to work pretty darn well (Who needs a physics engine anyway?) but I've noticed that when I add any kind of slope the camera will slide down it -- in a real hurry too if gravity is set realistically! I noticed that this doesn't happen with the stairs in the Espilit demo, but looking at the scene file and demo.js I can't figure out how it's managing that. Is there a friction setting or something that I can set for objects like stairs and ramps?
  12. Hello all, I feel as though I'm being hard of thinking here. Here's a PG: http://www.babylonjs-playground.com/#3ENM44#1 How do I make any one of the boxes stop moving when it hits another? I have got as far as it logging to the console when the ellipsoids collide - not what i want though. This needs to be accurate to .001 scene units (a millimetre for my setup). Think I'm going about this the wrong way. Importantly, I need to get this working with the gizmo. Any help would be much appreciated. Thank you.
  13. Hello, I'm using Phaser 3 and the physics engine matter. I need to call a function when one object collides with a particular object. For example I have a tank, barrels, hearts. Then there will be bullets, other tanks, some other objects. You need to call the function when the tank collides with the barrel, it should explode, and if it collides with the heart, it will replenish life. this.matter.world.on('collisionstart', function (event) { bangBarrel(); }); this method calls the function in any collision. How to trigger the function when the tank collide with the barrel, and how to trigger the function when the tank collide with the heart?
  14. Hello everyone my first day with Babylon, so please indulge. I have the same problem as Emiya0306 but not with the gltf Exporter but with the Babylon Exporter (*.babylon) I have read the whole thread, but frankly, I didn't understand very much. The Arc Rotate camera goes through my object (with middle (Scroll)Mouse-Button). I have checked Collisions for the Object and the Camera. Did I miss something? Online: http://www.experimente.bplaced.net/collisions/collisions.html The Blend: http://pasteall.org/blend/index.php?id=49326 Babylon 3.1.0 Babylon-Exporter 5.62 Blender 2.79B Many thanks in advance Hans
  15. https://www.babylonjs-playground.com/#SVHR8A 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.
  16. hg_tg

    Recursive Collision

    Hi all, I have been stuck for some time on procedurally generating levels for my game. As it stands, I have created rooms in a confined space but most of them overlap. Although this is expected, I can't find a way to separate them. My attempts have been centered around physics collisions, but I have failed hard. Here is my current code: Level.prototype.separate = function() { //For Convenince sake var arcade = this.game.physics.arcade, rooms = this.rooms; for ( var i = 0; i < rooms.length - 1; i++ ) { while ( arcade.intersects( rooms[ i ], rooms[ i + 1 ] ) ) { arcade.collide( rooms[ i ], rooms[ i + 1 ] ); } } //For testing purposes this.displayLevel(); }, Level.prototype.create = function() { this.game.physics.arcade.enable( this.rooms ); this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; //Gets coordinates and dimensions for Rooms and creates them. this.createLevel(); console.log( "Level State Completed" ); //this.game.state.start( 'InGameState' ); }, Level.prototype.update = function() { this.separate(); } This doesn't work. It results in an infinite loop. I have tried used Arcade's overlap as well. The issues I have had boil down to these two questions: 1. How can I test for individual room collisions when they sit in an array together? 2. When two rooms collide with one another, one or both of the rooms may still be colliding with other rooms. However, Arcade's collide method isn't recursive, and throwing the separate function into update might not guarantee the rooms be separated and hurts performance. Does anyone have any ideas or potential solutions to this?
  17. Hello! I am trying to make a player to collide with the ground. But the ground has been imported from a tilemap using the tiled program. The collision is not working This is the important part of my code: collisionLayer = map.createStaticLayer('collisionLayer', tileset); var players = findObjectsByType('player', map, 'objectsLayer'); player = this.physics.add.sprite(players[0].x, players[0].y, 'dude'); this.physics.add.collider(player, collisionLayer); findObjectsByType is not a phaser native method, but it is working. The code runs without errors, but the collision is not working. I have attached the code. Thanks! example.zip
  18. Hey guys, I have searched all over to figure this our but no luck. How do I enable the debug to show the bounding/collision boxes on sprites in Phaser 3? this was pretty easy to do in Phaser 2 but I dont see any docs on how to do this for 3. Thanks!!!
  19. 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(); }
  20. Doug

    Hi Rich.  @rgk mentioned that you might be able to please add a "patron" badge to my forum profile?  Thanks very much!

  21. Hello to all of you! I want to thank everyone for support on my previous issue, especially @JohnK. At that time I had(and still have because of trouble of applying his suggestion) one structural problem with performance that I am caring for a longer period of time. But that is out of the scope for the moment being because I had one little problem which troubles me a lot. Essentially from time to time when zooming out(on the maximum level) and panning the camera I have the horrendous flickering which is even more obvious than on demo due to fact that I also add transparent hole(I have not added it here for the sake of the code complexity). Issue can be seen here: https://playground.babylonjs.com/#LE1BSK#9 From my understanding the issue is happening because of some sort of weird collision between two textures ground and location one. But I really cannot afford to do any positioning change. Is there any other, more elegant way to resolve this problem? Probably I am missing something really trivial. Thanks to all
  22. Hi, I am trying to make a goalkeeper game, which require goalkeeper mesh body to be able to "block" any football that hit toward him. The best would be the mesh collider that represent the goalkeeper to be reasonably precise while not being overkill, so I created boxes, set their physics imposter, and attach them to each bone. which look like this: http://www.babylonjs-playground.com/#SRR6Y2#1 however, I don't know how to make each box collidable to the falling sphere, did I miss anything, or does it require more complex way of implementation?
  23. Here is my simple playground demo. Just like the title described, Why this ArcRotate camera can go through the mesh? Is this the gltf file problem?
  24. tl;dr game.physics.startSystem(Phaser.Physics.ARCADE); GameMap = game.add.tilemap('GameMap'); GameMap.addTilesetImage('TileSet', 'TileSet'); under = GameMap.createLayer('Underground'); layer = GameMap.createLayer('TileMap'); trees = GameMap.createLayer('Collideables'); GameMap.setCollision(7,true, "TileMap" ); // Deep water 1 GameMap.setCollision(17,true, "TileMap" ); // Deep water 2 GameMap.setCollision(27, true, 'Underground'); // Darkness GameMap.setCollision(37, true, 'Collideables'); // Trees game console.logs an error " No such layer name: TileMap" So player doesn't collide with water in the begining of the game. If I switch to layer "underground" with: Player begins collision with water as if everything is okay. I also don't receive any errors about layers like "Collideables" and "Underground". I've rechecked the names in the TiledMap multiple times but can't seem to pinpoint the source of this problem. What is that all about?
  25. Hi all, Could you help how i can stop detecting collision between two sprites after detecting? this.game.physics.arcade.collide(this.animal, this.animal, this.stopanimzwierz, null, this); After collision i have function which is stop moving sprites, but sprites still staying in collision so i am not possible to start next function which is moving those sprites. Could you help me to find solution? In simple way i want to stop sprites, stop collision between them to move it again with automatically function.