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

  1. 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?
  2. 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 ?!"); }
  3. 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?
  4. 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 ???
  5. 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.
  6. 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
  7. 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.
  8. 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
  9. 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!
  10. 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.
  11. 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
  12. 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
  13. 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'); }
  14. Hey guys, Is it possible that we can draw something on the bitmapdata without totally overlapping it? The result may look like this:
  15. 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.
  16. What exactly is the difference between the overlap and intersects functions, besides the fact that intersects can't use callback functions?
  17. 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
  18. 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?
  19. 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.
  20. 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!
  21. Hello, it's my first contact with Phaser physics. I have a ball sprite this.ball = game.add.sprite(x, .y, "ball"); I created a group with obstacles: this.obstacle =; this.obstacle.x = 700; this.obstacle.y = 350; var line = game.add.sprite(0, 0, "line"); line.anchor.setTo(0.5, 0); this.obstacle.addChild(line); line = game.add.sprite(0, 0, "line"); line.anchor.setTo(0.5, 0); line.angle = 90; this.obstacle.addChild(line); line = game.add.sprite(0, 0, "line"); line.anchor.setTo(0.5, 0); line.angle = -90; this.obstacle.addChild(line); game.physics.enable(this.obstacle, Phaser.Physics.ARCADE); for (var i = 0; i < this.obstacle.children.length; i++) { game.physics.enable(this.obstacle.children[i], Phaser.Physics.ARCADE); this.obstacle.children[i].body.angularVelocity = 30; } Then in update function I'm checking for collisions: update: function(){ var obstacleHit = false; game.physics.arcade.overlap(this.ball, this.obstacle, function(ball, obstacle){ if(!obstacleHit){ obstacleHit = true; } }, null, this); if (obstacleHit) { this.ball.destroy(); } }, But it works only with one of my three obstacles (don't know which one exactly because they are all the same, close to each other). In other words, it founds collision only on one of three sprites in my this.obstacle group. What am I doing wrong? I was trying with creating different names (line1,line2,line3) but I guess it didn't change anything. EDIT: I have found what may be wrong Collisions are working but only at the place where I spawned my obstacles, not against they current position (they are rotating, body.angularVelocity is set to 50). Any advice?
  22. Hello, I want to create game in 16:9 ratio, but my actual clickable area would be 4:3 ratio (the rest is GUI). I'm setting background color to blue using game.stage.backgroundColor BUT I would like to have my clickable area in different color, for example red. I know I can just put some image on that blue background, or draw some rectangle, but I'm thinking about the best approach looking at performance as well as assets weight. Any ideas?
  23. Hello, I want to create a game using Phaser. I want to add sprites randomly, but they shouldn't overlap each other. What is the best practice to achieve this. Here is my code, but I saw overlapping sprites sometimes: var obstacles = []; var items = []; function loadMap () { for (i = 0; i < 100; i++) { var obs = game.add.sprite(,, 'obstacle'); game.physics.enable(obs, Phaser.Physics.ARCADE); obstacles.push(obs); } } function loadItems () { for (i = 0; i < 36; i++) { var item = game.add.sprite(,, 'item'); game.physics.enable(item, Phaser.Physics.ARCADE); while (checkOverlapMany(item, items) || checkOverlapMany(item, obstacles)) { item.x =; item.y =; sleep(80); } items.push(item); } } function checkOverlapMany(sprite, list) { for (var i = 0; i < list.length; i++) { if (game.physics.arcade.overlap(sprite, list )) return true; } return false; }
  24. Hi, I have a box sprite that trigger callback of overlap. But is it possible to have the sprite overlap happens when it touched a little inner side of the sprite box? (like -2 pixel towards the center of the sprite)? The problem is it detect too accurate that it looks like the overlap happened too early. Hope that makes sense.
  25. Here's the problem. When player overlaps with an item from the group 'Items', the item should change its texture to a spritesheet animation. To indicate the item has been taken. However when the player takes 1 item, the rest(some or even most) change textures. And they don't meet the overlap condition. game.physics.arcade.overlap(player, items, transformItem, null, this); transformItem: function(p, i) { i.loadTexture('sparkle', 0); i.animations.add('effect');'effect', 30, false); i.kill(); }; So I tried this to restore the item texture: transformItem: function(p, i) { i.loadTexture('sparkle', 0); i.animations.add('effect');'effect', 30, false).onComplete.add(function() { i.kill(); i.loadTexture('item'); }, this); }; This kind of works but not 100%. Because the animation takes time to complete, while it's playing other items might spawn with the 'sparkle' animation. Yet they don't meet the overlap condition. Edit: Hmmm... now it seems to work without problems. That wasn't the case last night. Weird.