Search the Community

Showing results for tags 'overlap'.

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 83 results

  1. tilebased

    Hi, I'm making a tile based mahjong clone, you can check the attached image for reference. basically I need a smart way to implement the mechanic of mahjong, that checks when I tap a tile if he has neighbours ( left or right ) and if he has a tile ontop of him. The way these are placed makes it very difficult for me to come up with a system. The sprites/buttons are all overlapping already I have my buttons(tiles) in an array and the references to which tile it is in a seperate array so I can create them easily for more levels. Is there someone who can help me tell phaser to check this without giving each tile in each level a reference to neighbours ( would take forever ) If you want me paste some code just ask
  2. Hello I'm using an overlap between player (joueur) and bottles (bouteilles). bottles is a group of 4 bottle and I want to know which bottle I'm interacting with in the function called by the overlap game.physics.arcade.overlap(joueur,bouteilles,interragitb,null,this); then the function function interragitb(joueur,bouteille){ cursors = game.input.keyboard.createCursorKeys(); if (cursors.up.isDown && points > 0) { bouteille.frame = bouteille.frame +1; point(0); } } and I want to increment a variable to know how many times I interracted with a spécific bottle how should I do ? Is there any way to get index in the group or var name ? Thank you
  3. Hello I have a problem. I want my player when he is in front of a bottle and when he interract with it (up arrow key) the frame of the bottle change. The problem is I use an overlap between player and bottle I use : if (cursors.up.isDown) { bouteille.frame = bouteille.frame +1; } but when in game I press the up key it change all frame in one ms. How can I set a timer or something to say I pressed one time I need to release key and do it only after repressed Thanks
  4. overlap

    How can I check if two sprite are overlapping or not at a given moment if both of them has special shape with loadpolygon? (eg. crosshairs rectangle vs. enemy on a click) Do I need to use P2? Maybe the solution is obvious, but I am absolutely beginner in Phaser.
  5. Hi all, I have a problem with collision. All my game is based on these codes: game.physics.arcade.collide(bullets, chest2,collision_handler); And it works. But... how to code collision two identical bullets? When I write like this: game.physics.arcade.collide(ebullets, ebullets, collision_handler); Only one of them is dying. How to do it? function collision_handler (object1, object2) { object1.kill(); object2.kill(); }
  6. Hi guys! I'm new to Phaser, with basic knowledge of JS. I have a problem with my platform game, which I've started with this tutorial. The code is different from every tutorial I've seen on Phaser main webpage, so It's hard for me to get in to. (no update, create, preload function in main is the beggining of all my problems)... I wanted to add a shooting system, which I learned from this: I applied this code to the platformer engine, and I am not sure if I did it correctly. I have created shooting system in Player object, because I didn't know how to do it other way. This code look like this: //In player: Platformer.Player = function (game_state, position, properties) { "use strict";, game_state, position, properties); (...) //bullets bullets =; bullets.enableBody = true; bullets.physicsBodyType = Phaser.Physics.ARCADE; bullets.callAll('events.onOutOfBounds.add', 'events.onOutOfBounds', resetBullet, this); bullets.setAll('checkWorldBounds', true); bullets.createMultiple(100, 'pocisk'); function resetBullet (bullet) { bullet.kill(); } //In player.prototype.update : Platformer.Player.prototype = Object.create(Platformer.Prefab.prototype); Platformer.Player.prototype.constructor = Platformer.Player; Platformer.Player.prototype.update = function () { "use strict";, this.game_state.layers.collision);, this.game_state.groups.enemies, this.hit_enemy, null, this); (...) //bullets if (this.spaceKey.isDown) { this.fireBullet(); } this.fireBullet = function() { if ( > bulletTime) { bullet = bullets.getFirstExists(false); if (bullet) {, Platformer.Enemy, this.zderzenie, null, this); bullet.reset(this.body.x + 6, this.body.y - 8); bullet.body.allowGravity = false; if (this.profil==1) //direction of shooting bullet.body.velocity.x = 300; else bullet.body.velocity.x = -300; if(bullet.body.x==Platformer.Enemy.x && bullet.body.y==Platformer.Enemy.y) bullet.kill(); bulletTime = + 250; } } } And it works, the player is shooting circles in left or right direction. The problem starts now. I need to somehow code the collision between the bullet and the enemy. As you can see above, I wrote thing like this : if(bullet.body.x==Platformer.Enemy.x && bullet.body.y==Platformer.Enemy.y) bullet.kill(); But this don't work. What can I do? It is the problem with seperate objects? Or maybe I know nothing and made serious stupid mistakes?
  7. So i'm just trying to make a simple collision between falling objects and a players sprite. Its nothing complicated. I'm trying to use the game.physics.arcade.overlap() function. Here is my code: The Player class -> export class Player{ game: Phaser.Game; player: Phaser.Sprite; constructor(game:Phaser.Game){ = game; this.player =, 520, "Player");; } create(){ } update(){ if ( { if(this.player.x >= -10){ this.player.x -= 7; } } else if ( { if(this.player.x <= 830){ this.player.x += 7; } } } } The falling objects class -> export class Rock { game:Phaser.Game; rocks: Phaser.Group; constructor(game:Phaser.Game){ = game; } create(){ =;; var x = 10; for(var i = 0; i < 9; i++){ var rock =,,-5), "Rock"); rock.body.velocity.y =,300); x += 105; } } update(player){, this); } checkPos(rock) { if (rock.y > 800) { rock.y = -100; } } } The Main Game File where i'm using the overlap function -> create(){ this.difficulties = []; this.difficulties.push(new Difficulty(0, 5)); this.difficulties.push(new Difficulty(1, 7)); this.difficulties.push(new Difficulty(2, 9)); this.currentDifficulty = this.difficulties[0]; this.shouldChangeDifficulty = true; this.levelOne = new LevelOne(; this.levelOne.create(this.currentDifficulty); this.currentLevel = this.levelOne; this.player = new Player(; this.player.create(); = new Rock(;; } update(){ this.player.update();;,, this.collisionHandler, null, this); } collisionHandler (player, rock) { console.log("Does it work ?!"); }
  8. I'm building out some basic games to get me a feel of Phaser. When calling the method game.physics.arcade.overlap(), it breaks my game. My game just turns into a black screen. Same thing happens if I do game.physics.arcade.collide(). This makes me assume that the reasoning is game.physics.arcade. What could be the problem?
  9. When using VR device orientation free camera ... My two eye cameras OVERLAP in the center... On all other mobile apps i am testing out there is CLEARLY a separation of the eye cameras ... A little BLACK space in between cameras... I thought set the VRCamersMetrics.lensSeperationDistance would allow me to change that... BUT it does not seems to do anything.... My VR cameras look like this: Any clues on how to move the camera apart so there is a little black space in between ???
  10. I have two groups of sprites, lets call them locks and slots, and each slot has a custom parameter, lets call it slot.locked. I want to implement functionality whereby when any one of the locks is overlapping a slot, the variable slot.locked becomes true, which I managed to implement as follows: function update() { game.physics.arcade.overlap(locks, slots, lockOverlap); } function lockOverlap(lock, slot) { slot.locked = true; } But now I want to have a situation in which whenever a lock is NOT overlapping a slot, the parameter slot.locked becomes false again. Any ideas? Thanks.
  11. So I am trying to create a game like battle cats if any one knows what that is. But i have to test if the enemy sprite is overlapping with the player sprites that I am spawning. I am using a group to spawn them so that i can do the this.player.create(x, y, 'image'). But if 1 sprite from the groups collide with the enemy i have to stop them by setting velocity to 0 so that it will stop moving and do some damage. The problem is that I dont know how to only stop the sprite that is actually touching the enemy sprite from a group. So each time 1 sprite from the group touches the enemy sprite, all the sprites stop moving. Any ideas on how to fix this? or if there is an easier way of doing this I would like to know Thank you in advance for any help you can give me
  12. Hi there! Newbie to phaser. I seem to have some issues with my code. For some reason, the hitEnemy function never seems to run when my bullets (from weapon group) hit an enemy. Here's the code. I've removed parts that don't matter. I'd love if you could find out what happened and why.. and also how to fix it.
  13. Hi All Quick question, I am scratching my head on this for the last day - what am I doing wrong ? I have created a basic car driving on a highway and to avoid the cars. I hae created an enemies grou fornthe car and my car is a player object sample of script : in create I have : //player this.player = this.add.sprite(, - 200, 'player'); this.player.anchor.setTo(0.5);; this.player.body.collideWorldBounds = true; this.player.customParams = {}; this.initEnemies(); this.scheduleEnemies = * 1, this.initEnemies, this); in update I have : // kill enemies when out of screen if (this.enemies.y >{ this.enemies.kill(); } //player and enemy hit, this.enemies, this.killPlayer, null, this); rest of the functions : initEnemies: function(){ this.enemies =; this.enemies.enableBody = true; this.createEnemy(); }, createEnemy: function(){ // create a random lane for the cars to drive down - 4 lanes var carRandom = Math.floor((Math.random() * 4) + 1); ; if (carRandom == 1){ //console.log('1st lane'); this.laneX = 50; this.laneY = -150; this.vel = 400; } else if (carRandom == 2){ //console.log('2nd lane'); this.laneX = 220; this.laneY = -150; this.vel = 400; } else if (carRandom == 3){ //console.log('3rd lane'); this.laneX = 500; this.laneY = -150; this.vel = 900; } else if (carRandom == 4){ //console.log('4th lane'); this.laneX = 660; this.laneY = -150; this.vel = 900; } // creat random cars var key = Math.floor((Math.random() * 4) + 1); ; // create enemy if one exists in the enemies group var enemy = this.enemies.getFirstExists(false); if (!enemy){ enemy = this.add.sprite(this.laneX,this.laneY, 'car' + key); } else { enemy.reset(this.laneX,this.laneY, 'car' + key); } // make the cars move towards the bottom enemy.body.velocity.y = this.vel; // add enemy to enemies group this.enemies.add(enemy); if (carRandom > 2){ // reverse the car image in the last 2 lanes enemy.scale.setTo(-1); } }, killPlayer: function(player, enemy) { cosnole.log('HIT !'); this.player.kill();'GameState'); }, Thanks for any help in adavnce Eric
  14. Hi, I'm starting with Phaser + Isometric plugin and is pretty cool. I think it has what I need for now, but now I'm stuck with some tests... I'm trying to detect when a srpite is hidden by another sprite in the isometric map. Something similar to? I tried with intersects without results, I think this is because colliding avoid intersections. I tried also with overlap, but I have results only when collides, and I want to know it without colliding. Scene A: Blue cube is not colliding but has a hidden part because of isometric ordering. That is what I need to detect. Scene B: Blue cube is not hidden on any part, so I don't mind... Any ideas? Thank you all in advance!
  15. hi guys, I wonder is there any way to check whether 2 sprite in different groups are overlap, in the p2 system, currently I am using game.physics.p2.setPostBroadphaseCallback(this.checkOverlap, this); to do it, however I think it maybe expensive because I need to check whether the 2 sprites are from same group (the same group should not do anything). and I do not need collide when 2 sprite impact, I just need them to trigger my function. so I wonder is there any way to do thing like body.collide in arcade system, thanks.
  16. Hello :), is it possible to detect an event when whole player body intersects with ladder tile ? Not only part of it ? (see the attachment below) I am also searching for effective ladder climb example in some phaser platform game
  17. Hi I have a script that I wish to implement so that if the player hits an enemy 3 times the game restarts, but it constally loops when touching, where am I going wrong ?? create function this.currentHits = 3; this.collisionHasOccurred = false; update function :, this.enemies, this.youLose, null, this); youlose function : youLose : function(player, enemies){ if (!this.collisionHasOccurred) { this.currentHits --; this.collisionHasOccurred = true; } else { this.collisionHasOccurred = false; } console.log(this.currentHits); console.log(this.collisionHasOccurred); if (this.currentHits === 0) { //'Game'); console.log('GAME OVER'); } }, thanks in advance eric
  18. I have a simple game, see attached. I have a problem with a sprite and overlap collision. The little red square is a sprite. The red square is re-positioned based on if the character is going up, down left or right. Therefore being able to detect what overlap layer it is colliding with, for now I have labeled them all layerSurface, but in the future will give them unique layers based on what is actually there. The player successful collides with the wall and the surface as its meant to, but I can't get the square to overlap collision detect. Regular collision won't work on the red square as in some cases like the diagram it is moved inside the tilemap. Currently the overlap function just spams the hasCollided function regardless of what is happening. Any help would be appreciated, or other solutions to solve this issue. function create() { game.physics.startSystem(Phaser.Physics.ARCADE); this.stage.backgroundColor = '#787878'; // initiallize the tilemap map = game.add.tilemap('main_map'); map.addTilesetImage('otherNew', 'sprite_map'); //draw the layers map.createLayer('background'); layerWall = map.createLayer(1); layerSurface = map.createLayer(2); layerWall.resizeWorld(); map.setCollisionBetween(0, 100,true, layerSurface,true); map.setCollisionBetween(0, 100,true, layerWall,true); player = game.add.sprite(600, 600, 'player_image'); game.physics.arcade.enable(player); player.body.collideWorldBounds = true; //Collision suqare sprite squareChild = game.add.sprite(500, 600, 'square'); game.physics.arcade.enable(squareChild); squareChild.body.collideWorldBounds = true; //Camera position, player.y);; //add keyboard functionality cursors = game.input.keyboard.createCursorKeys(); } function update() { //check physical collision game.physics.arcade.collide(player, layerWall); game.physics.arcade.collide(player, layerSurface); game.physics.arcade.overlap(squareChild, layerSurface, hasCollided, null, this); //resets the velocity after a keydown input player.body.velocity.set(0); if (cursors.down.isDown) { player.body.velocity.y = playerVelocity; direction = "down"; moveSquare(34,109); } else if (cursors.up.isDown) { player.body.velocity.y = -playerVelocity; direction = "up"; moveSquare(34,-34); } if (cursors.left.isDown) { player.body.velocity.x = -playerVelocity direction = "left"; moveSquare(-34,34); } else if (cursors.right.isDown) { player.body.velocity.x = playerVelocity; direction = "right"; moveSquare(109,34); } } function moveSquare(xPos,yPos){ squareChild.body.x = player.x + xPos; squareChild.body.y = player.y + yPos; //experimental squareChild.body.drag.set(1000); squareChild.body.velocity.x = xPos; squareChild.body.velocity.y = yPos; } function hasCollided(obj1, obj2){ console.log('yes'); }
  19. Hey guys, Is it possible that we can draw something on the bitmapdata without totally overlapping it? The result may look like this:
  20. Hey guys! I wanted to create "can you place building here?". Sometimes I get wrong answer. I create net 10x10 createNet(width, height) {; for(let i = 0; i < height; i++) { for( let j = 0; j < width; j++) {*16, i*16, 'net'); } } o => o.anchor.set(0.5, 0.5));'alpha', '0.5'); } I have callback: game.input.addMoveCallback( (o) => this.updateGrid()); where i try to update color updateGrid() { let x = game.input.activePointer.x ; let y = game.input.activePointer.y; x -= (x-8) % 16; y -= (y-8) % 16; if ( x != || y != ) { = x; = y; => this.updateColor(o)); } } updateColor(o) { o.frame = game.physics.arcade.overlap(o, this.obstacles ) ? 1 : 0; } - here is more code, I also attached full project. I feel right x/y or frame is update too late but I don't know how to prevent it.
  21. What exactly is the difference between the overlap and intersects functions, besides the fact that intersects can't use callback functions?
  22. Hi, I'm developing a basic game. The functionality of the game is, once the page is loaded one objects will appear on the canvas like (apple, cat, dog etc...) on the left side and a bunch of letters will appear on the right side. The user will have to drag and drop the letters in a rect area(bucket). Once the user dragged matched letters with the object within bucket then next object will appear in the same area. I have created, but this is not working properly. Could anyone help me on this? here is the js file. I need to check the following things....How can detect if the letters are dropped in rect? and which letter is dropped in Rect? Thanks Alex
  23. Hi, I've spent the past 2 days stuck on something that should be very simple. I have a sprite representing a ship. I add 10 sprites as child using addChild around the ship. I want to detect an overlap between any of the child sprite and the asteroids. Here is the code used to create the ship: this.player =, this.options.position.y, this.options.sprite); this.player.anchor.set(0.5); this.player.enableBody = true;; Then here is how I add the "sensors" around the ship: var sensors =; for (i=0;i<=9;i++) { var x = (r*Math.cos(360/n*i*Math.PI/180))-(this.player.body.width/4); var y = (r*Math.sin(360/n*i*Math.PI/180))-(this.player.body.height/4); var sensor = sensors.create(x, y, 'ship-sensor'); = 'sensor-'+i;; this.sensors.push(sensor); } this.player.addChild(sensors); Finally, here is how the asteroids are created: this.asteroids =; for (i=0;i<20;i++) { var asteroid = this.asteroids.create(rand_x, rand_y, 'asteroid'); asteroid.body.immovable = true; = 'asteroid-'+i; asteroid.body.mass = -100; } On my update() function, I have:, this.asteroids, function(sensor, asteroid) { console.log("> ", sensor, asteroid ); }, null, this); My goal is to detect an overlap between any of the "sensors" and the asteroids so that I can feed that to a neural network to have a ship that learns to navigate on its own. I tried with Arcade physics, I tried with P2 physics, and I'm about to give up and move on to another game engine at this point... Anybody has a solution to that simple problem?
  24. Quick question about the overlap function. Does it only return as true when the two bodies initially overlap and not after, even if they still overlap? Or does it return as true during the entire duration of the overlap? My test code indicates the former, but maybe I'm doing something wrong. if(game.physics.arcade.overlap(this.enemySprite, player_sprite)) { game.debug.text('enemy and player overlap', 10, 10); } else { game.debug.text('enemy and player do not overlap', 10, 10); } Practical application is that I have bullets randomly passing through enemies, and I thought this was one possible explanation.
  25. Hi, I've just started porting a bunch of games from version 1.1.6 and I'm struggling to work out how to get the same effects using P2 that were pretty straight forward with the Arcade physics engine. Because setCircle() has been removed from the Arcade engine I need to use P2 to make sure my collisions are correct. Here's a snippet from my update loop previously where I was checking if a radar 'blip' overlapped any of the other blips in the this.blips array: plane.blip, this.blips, function( blip1, blip2 ) { this.onCrash();}, function( blip1, blip2 ) { return &&;}, this ); So I'm looking at using body.onBeginContact.add() but that seems to cause the sprites to start interacting with each other which I don't want. Any suggestion on how to recreate the above? The physics.overlap method before was so simple!