Search the Community

Showing results for tags 'overlap'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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 86 results

  1. Hi friends. I want to activate a function when two objects overlap. For example when I overlap an object I want to change gravity of a specific area. I can do this with overlap but it does it for one time, after that everything is same again. For example in the game, I will overlap a potion and gravity between position x1 and x2 will be equal -50. But when I do this, I mean when I overlap the potion, it occurs for one second and after that the gravity -50 turns back its past value.
  2. Hi, I would like to know if it is possible to create a function which asks if a sprite (playerA) overlaps with an object from a JSON tilemap without sprite? If my playerA overlaps this invisible object a function would be started. I already tried the overlap function between two sprites and it worked: function onDragStop(sprite, pointer) { if (checkOverlap(playerA,sprite)){ console.log("Overlap!"); } else { console.log("Dropped"); } function checkOverlap(spriteA, spriteB) { var boundsA = spriteA.getBounds(); var boundsB = spriteB.getBounds(); return Phaser.Rectangle.intersects(boundsA, boundsB); } Here is an extract of the JSON tilemap. { "height":10, "layers":[ { "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "height":10, "name":"Calque de Tile 1", "opacity":1, "type":"tilelayer", "visible":true, "width":20, "x":0, "y":0 }, { "image":"..\/world.png", "name":"World base", "opacity":1, "type":"imagelayer", "visible":true, "x":0, "y":0 }, { "draworder":"topdown", "name":"First Object", "objects":[ { "gid":1, "height":64, "id":5, "name":"", "rotation":0, "type":"", "visible":true, "width":64, "x":317.52500448109, "y":195.111668757842 }], "opacity":1, "type":"objectgroup", "visible":true, "x":0, "y":0 }, { "draworder":"topdown", "name":"Second Object", "objects":[ { "gid":1, "height":64, "id":11, "name":"", "rotation":0, "type":"", "visible":true, "width":64, "x":449.212619275898, "y":193.621695658129 }], "opacity":1, "type":"objectgroup", "visible":true, "x":0, "y":0 }, And I would like to play a sound when the player overlaps an object, and each object would have a different effect. And then I don't know how to specificaly call one object and check if it's overlaping with the player. objects = game.add.group(); objects.enableBody=true; game.load.tilemap('world',"assets/map/world.json",null,Phaser.Tilemap.TILED_JSON); game.load.image('tileset',"assets/world.png"); world = this.add.tilemap('world'); world.addTilesetImage('tileset','tileset'); layer = world.createLayer('Calque de Tile 1'); layer.resizeWorld(); world.createFromObjects('First Object',1,'',0,true,false,objects); I don't knwo if these parts of code are enough to understand what I would like to do? I don't know where to get the informations and documentation about that =/ Any information is welcomed ^^.
  3. Hi everyone, I am new to Phaser framework and it's great! I have made a lot of progress on this Street Fighter game I am doing. A little background of my problem: I have my code set up that when I press W (Medium Punch), I increase the width of the sprite by via setRectangle playerKen.body.setRectangle(70, 80, -18); once I expanded the hitbox , I play the sprite, then set the width back to its original size once the animation has finished playing: kenAnimation = playerKen.animations.play('standingMediumPunch', 10, false).onComplete.add(function () { //reset the graphics back playerKen.body.setRectangle(35, 80, -18); playerKen.body.setCollisionGroup(kenCollisionGroup); playerKen.body.collides(mBisonCollisionGroup, hitEnemy, this); kenAttacking = false; playerKen.body.velocity.x = 0; playerKen.animations.play('standing', 7, true); playerKen.body.static = false; //console.log('punching'); }, this); I have also programmed the AI too, won't get into that. But my issue is the overlapping hitboxes. See the attached photo... When a situation like this occurs when I am punching and the AI is punching as well, the health of the player and the AI does not decrease. I looked into https://phaser.io/examples/v2/sprites/overlap-without-physics but the getBounds() method only gets the width of the sprite, not the hitbox. How can I see whether the two hitboxes have intersected? By the way, I am using p2 physics. Thanks a bunch!
  4. 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
  5. 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
  6. 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
  7. 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.
  8. 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(); }
  9. 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. https://phaser.io/news/2015/09/platformer-tutorial-part2 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: https://phaser.io/examples/v2/arcade-physics/group-vs-group 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"; Platformer.Prefab.call(this, game_state, position, properties); (...) //bullets bullets = game.add.group(); 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.game.physics.arcade.collide(this, this.game_state.layers.collision); this.game_state.game.physics.arcade.overlap(this, this.game_state.groups.enemies, this.hit_enemy, null, this); (...) //bullets if (this.spaceKey.isDown) { this.fireBullet(); } this.fireBullet = function() { if (game.time.now > bulletTime) { bullet = bullets.getFirstExists(false); if (bullet) { this.game_state.game.physics.arcade.overlap(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 = game.time.now + 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?
  10. 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){ this.game = game; this.player = this.game.add.sprite(400, 520, "Player"); this.game.physics.arcade.enable(this.player); } create(){ } update(){ if (this.game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { if(this.player.x >= -10){ this.player.x -= 7; } } else if (this.game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { 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){ this.game = game; } create(){ this.rocks = this.game.add.physicsGroup(Phaser.Physics.ARCADE); this.game.physics.arcade.enable(this.rocks); var x = 10; for(var i = 0; i < 9; i++){ var rock = this.rocks.create(x, this.game.rnd.between(-30,-5), "Rock"); rock.body.velocity.y = this.game.rnd.between(240,300); x += 105; } } update(player){ this.rocks.forEach(this.checkPos, 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.game); this.levelOne.create(this.currentDifficulty); this.currentLevel = this.levelOne; this.player = new Player(this.game); this.player.create(); this.rocks = new Rock(this.game); this.rocks.create(); } update(){ this.player.update(); this.rocks.update(this.player); this.game.physics.arcade.overlap(this.player, this.rocks, this.collisionHandler, null, this); } collisionHandler (player, rock) { console.log("Does it work ?!"); }
  11. 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?
  12. 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 ???
  13. 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.
  14. 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
  15. 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.
  16. 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 http://html5gamer.mobi/phaser2/carChase/index.html sample of script : in create I have : //player this.player = this.add.sprite(this.game.world.centerX, this.game.world.height - 200, 'player'); this.player.anchor.setTo(0.5); this.game.physics.arcade.enable(this.player); this.player.body.collideWorldBounds = true; this.player.customParams = {}; this.initEnemies(); this.scheduleEnemies = this.game.time.events.loop(Phaser.Timer.SECOND * 1, this.initEnemies, this); in update I have : // kill enemies when out of screen if (this.enemies.y > this.game.height){ this.enemies.kill(); } //player and enemy hit this.game.physics.arcade.overlap(this.player, this.enemies, this.killPlayer, null, this); rest of the functions : initEnemies: function(){ this.enemies = this.add.group(); 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(); this.game.state.start('GameState'); }, Thanks for any help in adavnce Eric
  17. 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? https://phaser.io/examples/v2/sprites/overlap-without-physics 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!
  18. 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.
  19. 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
  20. 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.game.physics.arcade.overlap(this.player, 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) { //this.game.state.start('Game'); console.log('GAME OVER'); } }, thanks in advance eric
  21. 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 game.camera.setPosition(player.x, player.y); game.camera.follow(player); //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'); }
  22. Hey guys, Is it possible that we can draw something on the bitmapdata without totally overlapping it? The result may look like this:
  23. Hey guys! I wanted to create "can you place building here?". Sometimes I get wrong answer. I create net 10x10 createNet(width, height) { this.net.removeChildren(); for(let i = 0; i < height; i++) { for( let j = 0; j < width; j++) { this.net.create(j*16, i*16, 'net'); } } this.net.forEach( o => o.anchor.set(0.5, 0.5)); this.net.setAll('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 != this.net.x || y != this.net.y ) { this.net.x = x; this.net.y = y; this.net.forEach(o => this.updateColor(o)); } } updateColor(o) { o.frame = game.physics.arcade.overlap(o, this.obstacles ) ? 1 : 0; } http://pastebin.com/2jME8vbg - 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. buildingPlacer.zip
  24. What exactly is the difference between the overlap and intersects functions, besides the fact that intersects can't use callback functions?
  25. 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. http://dothejob.in/kids-game/phaser-demo2/ Could anyone help me on this? here is the js file. http://dothejob.in/kids-game/phaser-demo2/js/game.js 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