Search the Community

Showing results for tags 'collision'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Found 411 results

  1. Hello guys I'm making a platformer game, I struggled with making collision between the player and objects created in tiled but after that I got it working with a function I created, however, when I make the rectangle rotated in tiled, in the game it comes out away from its position, take a look: this is on tiled in the game it comes out like this here is my code, createCollisionObjects is where the magic happens var game = new Phaser.Game(70 * 10, 70 * 7, Phaser.AUTO, 'game', { preload: preload, create: create, update: update, render: render }); function preload() { // tilemap game.load.tilemap( 'map', 'assets/tilemaps/maps/lvl-1.json', null, Phaser.Tilemap.TILED_JSON ); // tilemap images game.load.image('new', 'assets/tilemaps/tiles/new.png'); game.load.image('sheet', 'assets/tilemaps/tiles/sheet.png'); game.load.image('s9af', 'assets/tilemaps/tiles/s9af.png'); // player spritesheet game.load.atlasJSONHash( 'player', 'assets/spritesheets/player_walk.png', 'assets/spritesheets/player_walk.json' ); } /* * GLOBAL VARIABLES */ var map; var player; var playerSpeed = 400; var jumpTimer = 0; function create() { game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.setBoundsToWorld(true, true, true, true, false); game.physics.p2.gravity.y = 300; game.physics.p2.restitution = 0; game.stage.backgroundColor = '#ffffff'; map = createMap().map; var start = map.objects.objective[0]; player = createPlayer({x: start.x, y: start.y}); cursors = game.input.keyboard.createCursorKeys(); } function update() { player.body.setZeroVelocity(); if (cursors.up.isDown && > jumpTimer && checkIfCanJump()) { player.body.velocity.y = 600; jumpTimer = + 750; } if(cursors.left.isDown) { player.body.velocity.x = -playerSpeed;'walk'); } else if (cursors.right.isDown) { player.body.velocity.x = playerSpeed;'walk'); } else { player.body.velocity.x = 0; player.animations.stop(); player.frame = 0; }; } function render() { } function createMap() { var m, g, f, b, c; m = game.add.tilemap('map'); var mWidth = m.widthInPixels; var mHeight = m.heightInPixels;, 0, mWidth, mHeight); m.addTilesetImage('sheet', 'sheet'); m.addTilesetImage('new', 'new'); m.addTilesetImage('s9af', 's9af'); g = m.createLayer('ground'); f = m.createLayer('fringe'); b = m.createLayer('background'); g.resizeWorld(); f.resizeWorld(); b.resizeWorld(); createCollisionObject(m.objects.objects); return { map: m, ground: g, fringe: f }; } function createPlayer(pos) { var p = game.add.sprite(pos.x, pos.y, 'player', 'Symbol 2 instance 10000'); //p.scale.setTo(0.4, 0.4); game.physics.p2.enable(p); p.body.setZeroDamping(); p.body.fixedRotation = true; p.body.x+=p.width/2; p.body.y+=p.height/2; // animation p.animations.add( 'walk', Phaser.Animation.generateFrameNames('Symbol 2 instance 1000', 0, 7, '', 1), 10, true, false); //'walk-left'); return p; } function createCollisionObject(objects) { if (objects) { for(var i=0; i < objects.length; i++) { var p2 = game.physics.p2; var obj = objects[i]; var sprite = game.add.sprite(obj.x, obj.y, null); sprite.width = obj.width; sprite.height = obj.height; sprite.angle = obj.rotation; game.physics.p2.enable(sprite, false); sprite.body.x = sprite.x + sprite.width / 2; sprite.body.y = sprite.y + sprite.height / 2; sprite.body.rotation = obj.rotation; sprite.body.static = true; sprite.body.debug = true; } } } function checkIfCanJump() { var yAxis = p2.vec2.fromValues(0, 1); var result = false; for (var i = 0; i <; i++) { var c =[i]; if (c.bodyA === || c.bodyB === { var d =, yAxis); // Normal dot Y-axis if (c.bodyA === d *= -1; if (d > 0.5) result = true; } } return result; }
  2. I'm having an issue which I'm unsure what's happening and can't find anyone else having a similar issue. Basically, I create a group, create them, add a tween to animate them across the page. I create a player sprite and whenever the player collides with the other sprites in the group kill them and render another one. however, this only works on the first item I create. var group =; group.enableBody = true; group.physicsBodyType = Phaser.Physics.ARCADE; So create my group and then do a `for loop` to create all my enemies for (var i = 0; i < 2; i++) { c = group.create(game.width, 20, 'seacreatures', 'octopus0000'); = "enemy" + i; c.body.immovable = true; c.alive = true; c.alignIn(laneArr[Math.floor(Math.random() * laneArr.length)], Phaser.RIGHT_CENTER); game.add.tween(c).to({ x: -200 }, speedArr[Math.floor(Math.random() * speedArr.length)], Phaser.Quadratic, true, 0, 0, false); } group.callAll('animations.add', 'animations', 'swim', Phaser.Animation.generateFrameNames('purpleFish', 0, 32, '', 4), 30, true, false); group.callAll('play', null, 'swim'); game.physics.enable(c, Phaser.Physics.ARCADE); Below this I also render the player currPlayer = game.add.sprite(50, game.height / 4 * 2 + 45, "playerFish"); game.physics.enable(currPlayer, Phaser.Physics.ARCADE); currPlayer.body.immovable = true; currPlayer.physicsBodyType = Phaser.Physics.ARCADE; currPlayer.alignIn(laneRect_three, Phaser.LEFT_CENTER); currPlayer.scale.set(1.5); So in short, the enemy travels across the `x` axis and once it collides with the player it triggers a function which looks like this, my update function: game.physics.arcade.overlap(playerFish, enemyFish, collisionHandler, null, this); then the function it calls, `collisionHandler` looks like function collisionHandler () { killedEnemies += 1; c.destroy(); c.alive = false; text.setText("You have killed " + killedEnemies + " enemies !"); console.log("<<<<<<<<"); } But like I said, it only kills the first item it hits, am I missing anything?
  3. Here is my code: var Main = function(game){ }; var velocityOfTileMoving = 10, speedOfTileGenerating = 15000, speedOfPlayerMovingRightLeft = 150, facing = 'left', sizeOfPlayer = 0.5, me, spaceBar, jumpTimer = 0; Main.prototype = { create: function() { me = this; spaceBar =; //The spacing for the initial platforms me.spacing = 200; //Set the initial score me.score = 0; //Get the dimensions of the tile we are using me.tileWidth ='tile').width; me.tileHeight ='tile').height; //Set the background colour to blue = '479cde';, 0,,, 'back'); //Enable the Arcade physics system; //Add a platforms group to hold all of our tiles, and create a bunch of them me.platforms =; me.platforms.enableBody = true; me.platforms.createMultiple(100, 'tile'); //Create the inital on screen platforms me.initPlatforms(); //Add the player to the screen me.createPlayer(); //Create the score label me.createScore(); //Add a platform every speedOfTileGenerating seconds me.timer =, me.addPlatform, me); //Enable cursor keys so we can create some controls me.cursors =; }, update: function() { //Make the sprite collide with the ground layer, me.platforms); //region delteMaybe //Make the sprite jump when the up key is pushed // if(me.cursors.up.isDown && me.player.body.wasTouching.down) { // me.player.body.velocity.y = -1400; // } // //Make the player go left // if(me.cursors.left.isDown){ // me.player.body.velocity.x = -150; // } // //Make the player go right // if(me.cursors.right.isDown){ // me.player.body.velocity.x = 150; // } //endregion //Check if the player is touching the bottom if(me.player.body.position.y >= - me.player.body.height){ me.gameOver(); } = somethingWasPressed; me.player.body.velocity.x = 0; if(me.cursors.left.isDown) { animateRunLeft(); } else if(me.cursors.right.isDown) { animateRunRight(); } else { if(facing != 'idle') {'idle'); if(facing == 'left') { me.player.frame = 5; } else { me.player.frame = 5; } facing = 'idle'; } } if(jumpHasToOccur()) { me.player.body.velocity.y = -250;'jump'); * 1.450, function(){'idle');}, this); jumpTimer = + 750; } }, gameOver: function(){'Main'); }, addTile: function(x, y) { //Get a tile that is not currently on screen var tile = me.platforms.getFirstDead(); //Reset it to the specified coordinates tile.reset(x, y); tile.body.velocity.y = velocityOfTileMoving; tile.body.immovable = true; //When the tile leaves the screen, kill it tile.checkWorldBounds = true; tile.outOfBoundsKill = true; }, addPlatform: function(y) { //If no y position is supplied, render it just outside of the screen if(typeof(y) == "undefined"){ y = -me.tileHeight; //Increase the players score me.incrementScore(); } //Work out how many tiles we need to fit across the whole screen var tilesNeeded = Math.ceil( / me.tileWidth); //Add a hole randomly somewhere var hole = Math.floor(Math.random() * (tilesNeeded - 3)) + 1; //Keep creating tiles next to each other until we have an entire row //Don't add tiles where the random hole is for (var i = 0; i < tilesNeeded; i++){ if (i != hole && i != hole + 1){ this.addTile(i * me.tileWidth, y); } } }, initPlatforms: function() { var bottom = - me.tileHeight, top = me.tileHeight; //Keep creating platforms until they reach (near) the top of the screen for(var y = bottom; y > top - me.tileHeight; y = y - me.spacing){ me.addPlatform(y); } }, createPlayer: function() { //Add the player to the game by creating a new sprite me.player =, - (me.spacing * 2 + (3 * me.tileHeight)), 'kisameSprite', 'stance/0.png'); me.player.scale.setTo(sizeOfPlayer); //Set the players anchor point to be in the middle horizontally me.player.anchor.setTo(0.5, 1.0); //Enable physics on the player; //Make the player fall by applying gravity me.player.body.gravity.y = 2000; //Make the player collide with the game boundaries me.player.body.collideWorldBounds = true; //Make the player bounce a little me.player.body.bounce.y = 0.1; me.player.animations.add('attackMagic', Phaser.Animation.generateFrameNames('attackMagic/', 0, 24, '.png', 1), 7, false, true); me.player.animations.add('attack', Phaser.Animation.generateFrameNames('attack/', 0, 5, '.png', 1), 10, false, true); me.player.animations.add('left', Phaser.Animation.generateFrameNames('run/', 0, 4, '.png', 1), 10, true, true); me.player.animations.add('idle', Phaser.Animation.generateFrameNames('stance/', 0, 3, '.png', 1), 10, true, true); me.player.animations.add('right', Phaser.Animation.generateFrameNames('run/', 0, 4, '.png', 1), 10, true, true); me.player.animations.add('jump', Phaser.Animation.generateFrameNames('jump/', 0, 3, '.png', 1), 10, false, true); }, createScore: function(){ var scoreFont = "100px Arial"; me.scoreLabel =, 100, "0", {font: scoreFont, fill: "#fff"}); me.scoreLabel.anchor.setTo(0.5, 0.5); me.scoreLabel.align = 'center'; }, incrementScore: function(){ me.score += 1; me.scoreLabel.text = me.score; }, }; function animateRunRight() { me.player.body.velocity.x = speedOfPlayerMovingRightLeft; if(facing != 'right') { me.player.scale.setTo(sizeOfPlayer, sizeOfPlayer);'right'); facing = 'right'; } } function animateRunLeft() { me.player.body.velocity.x = -speedOfPlayerMovingRightLeft; if(facing != 'left') { me.player.scale.setTo(-sizeOfPlayer, sizeOfPlayer);'left'); facing = 'left'; } } function jumpHasToOccur() { var jumButtonClicked = me.cursors.up.isDown || spaceBar.isDown; console.log("jumpButtonClicked == " + jumButtonClicked ); var alreadyOnFloor = me.player.body.onFloor() && > jumpTimer; console.log("alreadyOnFloor == " + alreadyOnFloor); return jumButtonClicked && alreadyOnFloor; } function somethingWasPressed(keyCode) { if(keyEqualTo(keyCode, "a")) {animateAttack();} if(keyEqualTo(keyCode, "m")) {animateAttackMagic();} } function keyEqualTo(keyCode, key) { var equalKey = (keyCode.key == key); return equalKey; } function beIdle() {'idle'); if(facing == 'left') { me.player.frame = 5; } else { me.player.frame = 5; } facing = 'idle'; } function animateAttack() {'attack', 10, false, false); me.player.animations.currentAnim.onComplete.add(beIdle,this); } function animateAttackMagic() {'attackMagic', 3, false, false); me.player.animations.currentAnim.onComplete.add(beIdle,this); } I want player to collide with dynamically generated tiles, but it does not happen. The player just falls down after any animation. For example, is I run left or right the player runs, but falls down simultaneously. To make player and tiles collide I use that in update() function:, me.platforms); So, help me, please to figure out what am I doing wrong, why collision between player and tiles does not occur when animation takes plays?
  4. I'm trying to implement double jump (one extra jump while in the air). In order for it to work also when the character is falling of a ledge or higher platform without having initiated a jump from the ground I need a way to tell if the player is currently in the air or not. How can i tell if a mesh is currently not colliding with anything? The only way I have found so far is the "intersectsMesh(mesh,precise)" function, but this requires me to check against a specific mesh. Would I need to loop through all meshes with collision in the scene to check if I am currently colliding with any of them, is there any better way to do this (seems rather inefficient). What I think I'm looking for is a "isCurrentlyColliding" value on my character mesh or perhaps it can be solved differently?
  5. hi, i have two object hero and enemy. My hero is an array with 3 player. when my hero collide with the enemy i would invoke the function : "hero.explode". My snippet is below. the problem is with the function createBodyCallback, i have two problem. the function this.hero.explode works before the collision...and my hero don't touch the enemy....why ? i cant access the body2.otherfunction() because the callback is in fact this.hero.player.body.otherfunction so i have an error. could you help me for these 2 points ? thanks. character = function(){ game.physics.startSystem(Phaser.Physics.P2JS);,-1000,40000,40000),game,640,h+500,'rect') this.flag_mouse=false this.flag_show_button=true //cible this.cible=game.add.sprite(w2,300,'cible') this.cible.anchor.setTo(.5,.5) game.physics.p2.enable(this.cible) this.cible.body.static=true this.cible.scale.setTo(1.5,1.5) this.player={} for (var i = 0; i < 3; i++){ this.player[i]=game.add.sprite(640,1980+i*500,'rect') game.physics.p2.enable(this.player[i]) this.player[i].body.setCircle(20) } } character.prototype = Object.create(Phaser.Sprite.prototype) character.prototype.constructor = character character.prototype.explode=function(body1,body2){ body2.sprite.alpha=0 body2.otherfunction() } character.prototype.otherfunction=function(){ console.log("explode") } this.hero=new character() //far for (var i = 0; i < 3; i++){ this.enemy.body.createBodyCallback(this.hero.player[i],this.hero.explode,this) }
  6. Hi all, my first post here. I'm learning babylon.js after having worked in three.js and I must say that I love this framework, many thanks to its creators for such a professional production. Actually I'm experiencing a little problem with collision detection between particles "fired" from a SolidParticleSystem and a mesh: I can trigger the collision between the particle and the mesh using particle.intersectsMesh(window.engine.scenes[0].meshes[15]) but intersectMesh() seems to become true when collision occurs with mesh's BoundingBox, which is way too approximate when I use a human mesh. Is there a way to calculate the exact point of collision from particle to mesh? I thought i could fire a BABYLON.Ray when intersectMesh() becomes true and retrieve the "real" intersection with mesh, is this a good approach or you think it can be done better? Are there any examples of using Babylon.Ray to retrieve exact intersection with a mesh? Thanks to all
  7. Hi everyone! I have several Pixi.Text objects floating in my Pixi container. var style = { font:"22px Verdana", fill:getRandomColor() }; var text = new PIXI.Text("My text", style); text.anchor.set(0.5, 0.5); text.dx = 0.1; text.dy = 0.1; Each Text object is rotating from -90 degrees to + 90 degrees. When collision happens with Text object and container, Text acts like a ping-pong ball changing its direction. Currently I'm using this code to check if text object is < or > of my pixi container width: if(text.x < 0 || text.x > $("#pixi-container").width()) text.dx = -text.dx; if(text.y < 0 || text.y > $("#pixi-container").height()) text.dy = -text.dy; text.x += text.dx; text.y += text.dy; Collision happens when a center of text object reaches container border. I need collision detection when ends of text object touches the container border.
  8. Hello, I have a problem with handling the collision between sprites. I have a group of enemies and a player sprite. I want none of the sprites to be able to move trough each others. At first I had the enemy body set to immovable and that disabled the player from pushing the enemy around upon collision. However, when I added more enemies to the group, I found that if the enemy bodies is set to immovable = true - they will be able to walk straight trough each others even if they have an internal collision detection (as that is the case between two immovable bodies). So if i set immovable to false - the enemies will appear solid when colliding with each other, but the player is able to push the enemy. What is it that I have not understood? I just want all the sprites solid.
  9. Just having a play around with sps, wanted to see if I could come up with a simple collision system from scratch. Only designed to work with spheres. less segments Have a play around with number of particles, size of particles and max speed. Max speed should be less than radius, too big and the particles escape.
  10. So, I'm working on implementing wall jumping in my game with P2 physics and in order to do that, I need to be able to set a boolean to true if a collider (sensor in my case) is colliding with any object and false if it is not. I cannot figure out how to do the latter because I'm not seeing anything that is called when an object uncollides with objects. Anyone know of a solution? Thanks! Edit: I'm thinking of also implementing the Box2D physics system because that has implementation for colliding and uncolliding.
  11. Any reason why the intersectsMesh is triggered on the red line area and not on the green line (as would be normal i guess)? Just using a simple code, nothing fancy... No physics engine... // skillMesh - fireball thing // m - monster scene.registerBeforeRender(function() { if (skillMesh.intersectsMesh(m, false)) { // do your job [call hit(), unregister this e.t.c.] console.log("hit"); } else { // set skillMesh.position } } Edit1: Played a bit more and rotated the mesh, the collision area is still in the back of monster, Could be a mesh problem? Edit.2 Replaced my monster with a sphere and collision works fine, i can't see the problem on my mesh... Edit3: Solved, i have no idea how this helped but i change the rest pose and it's fine now
  12. Hi @all again, I have a question: I want to remove a bulletMesh (bullet) with the dispose function if it collide with something like bullet.physicsImpostor.onCollideEvent = function (self, other) { console.log(self, other, self.position); self.object.dispose(); }; Got an Error: Uncaught TypeError: Cannot read property '_wakeUpAfterNarrowphase' of undefined at World.internalStep (cannon.js:13514) at World.step (cannon.js:13211) at CannonJSPlugin.executeStep (babylon.max.js:45178) at PhysicsEngine._step (babylon.max.js:36315) at Scene.render (babylon.max.js:21270) at main.js:847 at Engine._renderLoop (babylon.max.js:8509) What do I wrong? Ho can I do this?
  13. 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 ?!"); }
  14. Forewarning: semi-newbie Basically, if the user has the left cursor down and a "token" collides with the lftRect, I want to kill the token. For some reason my kill callback function for the collision is not working (below is relevant code): gumballGoGo.Preloader = function(game){ this.player = null; this.ground = null; //this.tokens = null; this.ready = false; }; var cursors, lftInit, rghtInit, ground, testDrp, sprite, tokens, rect, lftRect, ctrRect, rghtRect, lftToken; var total = 0; function lftHit(lftRect, lftToken) { if ( lftInit == true ){ lftToken.kill() } }; gumballGoGo.Preloader.prototype = { preload: function(){ }, create: function() { // LFT BOX lftRect = this.add.sprite(0, - 150, null); this.physics.enable(lftRect, Phaser.Physics.ARCADE); lftRect.body.setSize(100, 100, 0, 0); // CNTR BOX ctrRect = this.add.sprite(100, - 150, null); this.physics.enable(ctrRect, Phaser.Physics.ARCADE); ctrRect.body.setSize(100, 100, 0, 0); // RGHT BOX rghtRect = this.add.sprite(200, - 150, null); this.physics.enable(rghtRect, Phaser.Physics.ARCADE); rghtRect.body.setSize(100, 100, 0, 0); // INIT TOKEN GROUP tokens =; tokens.enableBody = true; this.physics.arcade.enable(tokens); testDrp = tokens.create(125, -50, 'token'); testDrp.body.gravity.y = 300; // CONTROLS this.cursors = this.input.keyboard.createCursorKeys(); }, update: function() { this.ready = true; if (this.cursors.left.isDown) { lftInit = true; } else if (this.cursors.right.isDown) { rghtInit = true; } else { lftInit, rghtInit = false; } if (total < 20) { tokenSpawn(); } this.physics.arcade.collide(lftRect, lftToken, lftHit, null, this); } }; function tokenSpawn() { lftToken = tokens.create(25, -(Math.random() * 800), 'token'); lftToken.body.gravity.y = 300; total++; } PLEASE HELP! The ultimate goal is to recreate this type of gameplay. One additional note: as of now I am dropping "tokens" using a random spawn loop. I'd rather use a timed patter for the token drop. If you have any advice on that please share as well. Thanks :]
  15. Hi, I'm trying to load a .obj file (concave), and make a collision with another mesh, but I have not been successful, I do not understand why or how to do it. this is my code: var pos_body = function(t) { t.loadedMeshes.forEach(function(m) { m.position.y = -3; m.material = blueMat; m.physicsImpostor = new BABYLON.PhysicsImpostor(m, BABYLON.PhysicsImpostor.MeshImpostor, { mass: 0 }, scene); }) }
  16. Hey all, So I recently switched my entire game over to Phaser Isometric by @lewster32 and now I keep running into an issue with collision. With just spawning a sprite in and not chaning any of its body properties, collision happens when the TOP of my player's body box reaches the TOP of the sprite's body box. This is a problem because it allows me to just walk through the sprite diagonally, which is not what I want. In fact, what I want is for collision to happen when the BOTTOM of the body boxes touch. (Sidenote: when I say body box I'm referring to the the 3d body shown through a body debug). Here is an example of how it works with no changes made to the body of either sprite. This is collision happening with no modifications: image - side note I am moving up and to the left in this picture, not down and to the left. This is after some changes to the body, the same thing happens too but it more closely represents what I *want* to happen, except it's still happening only with the top of the player sprite and tree sprite. image 2 Similarly, when I go to the top right side of the tree and move down into it, my body will go through the body box until the top of the body box hits the tree's box. When I mess with the Z values it all breaks and no collision will happen either. On top of that, changing the sprites anchors PAST (.5, .49999) also breaks something. Collision will happen at an anchor of (.5, .4999) but not at (.5, .5), it's very strange. Edit: Also, if i set the anchor to greater than (.5, .5) AFTER I enable isoPhysics on the body, the sprite's position gets moved thousands away and sometimes into the negative's. Here is my code to spawn the sprite and player. There is much more that goes into spawning the sprites, but this is anything that could even be related to the issue at hand. player1 = game.add.isoSprite(1000, 1000, 0, 'person'); game.physics.isoArcade.enable(player1); game.physics.isoArcade.collide(player1, itemGroup, null, null, this); createSprite = game.add.isoSprite(1250, 1250, 0, itemGet(chunks.chunks[i][slot]), null, itemGroup); //the anchor and body.setSize code here draws what you see in image 2. With these lines commented out, it outputs image 1. createSprite.anchor.setTo(.5, .49); game.physics.isoArcade.enable(createSprite); createSprite.body.setSize(40, 40, 0, 27, 27); createSprite.body.immovable = true; Any help is GREATLY appreciated. Ive been trying to fix this for a few days now, nothing I do works.
  17. Hi! I am working on my first Phaser-game. I have a performance issue with my collision rendering. I am using tilemaps and an extra layer for my collision. You can see my example on (without rendering collision) and here is the example with rendering collision: Everything is fine on Desktop. Loading time is about 6 seconds. But on mobile devices it takes about 1minute to load. I am using "map.setCollisionByExclusion([], true, this.collisionLayer);" for my collisions. Already tried toreduce the number of layers to a minimum - about 2 layers - does not help. Tried using map.setCollision([8,9..]) - did not render any collision for me. Any suggestions? Thanks for your replies.
  18. Dear All, I'm creating a small / simple game that uses the accelerometer (or cursor keys in the browser), for an online course. It's almost finished but for the collisions: I can't get them to work. The "game" is a sample about using the accelerometer to move a ship that avoids colliding with asteroids. Code and screenshot here: Link to MOOCsteroids code in github About the problem: I created a sprite (named "ship") and a asteroids group (named "group_asteroids") and in the asteroids update function I'm doing: // From file js/asteroids.js function playerCollided( ship, asteroid ) { console.log("Crashed!"); } function update(app) { for( i=0; i<num_asteroids; i++ ) { asteroids[i].angle += rotation_angle[i]; } game.physics.arcade.overlap( this.ship.getShip(), this.group_asteroids, playerCollided(), null, this); } What happens next is that I get thousands of "Crashed!" in the console, not when the ship collides with one of the asteroids but continously. I've also tested avoiding groups and using overlap directly between the ship and every asteroid (individually) with the same results. Any idea of what I'm doing wrong? Thanks!
  19. Hi, Is there a way to check collision of only one sprite with other? game.physics.arcade.collide(sprite1,sprite2,callback); the above thing checks for collision by sprite1 to sprite2 and also sprite2 to sprite1. I want only one way check....has anyone done anything like this?
  20. Hey guys, hope you're having a great time. And I have a little problem you may be able to help me with. I'm making sort of RTS and there are lots of units marching to each other and killing each other. The problem is, they are stepping onto each other, and kind of pushing each other, and sometimes even jumping someplaces. This looks weird. Watch this video and you will understand what I'm talking about (I'm using Warcraft 2 sprites just for testing purposes, and also because they are great). A little more details: I'm using Arcade physics. All units are objects of the same class, derived from Phaser.Sprite. All of them have a circle body, anchor set to 0.5 (if if matters), and are moving using velocity (before that I was modifying their poistions manually but with the same result). Units belong to 2 different groups, each group is collided with self and other group - so they won't walk through each other. What I want is that units would be standing still and no one could move them, not to mention these weird jumps. Is there some common techinque for handling this, do I miss something? Thank you in advance.
  21. I am trying to make a game similar to a game on the Play Store, called 'Sine Line'. I am not able to figure out how to keep the particle oscillating when input is not given. When input is given, the particle should travel in a sinusoidal manner. But when you release the input, it shouldn't stop. Instead, it should keep oscillating along the X axis. Any help appreciated. Thank you in advance. P.S. I am attaching the JS file. I've written it in a very messy manner. Sorry for that. game.js
  22. Hi all, I'm making a Maio-esque platformer, and I'm trying to figure out how to make a tile "bounce" (a bit like the attached GIF, but ideally when hit from below rather than from above) If there are any built in functions or plugins to achieve the desired effect, I would very much appreciate the info. Best, Paul
  23. Hello everyone, I'm making a basic tower defence game, and am trying to prevent towers being placed on the pathway. In this case, the pathway is everywhere which is not in this.layers.collision. The following code creates a sprite which is rectangular/square in shape. The size of the sprite seems to be coming from somewhere else in my code, can't pinpoint where, but I've made it smaller so it definitely does not overlap other tiles (used the debugger to visualise this). The x and y co-ordinates are the position of the mouse/input, translated to the top-left corner of it's tile. The tiles are 35 pixels square, so a mouse position of [358, 362] would become [350, 350]. this.pathwayPlacementRectangle = game.add.sprite(x + 8, y + 8, null); game.physics.enable(this.pathwayPlacementRectangle, Phaser.Physics.ARCADE); this.pathwayPlacementRectangle.scale.setTo(0.5, 0.5); var onPathway = true; if (game.physics.arcade.collide(this.pathwayPlacementRectangle, this.layers.collision)) { onPathway = false; } I've offset the rectangle a bit and made it smaller in case it was clashing with the edges of the collision layer. The problem is onPathway is always false, even when this.pathwayPlacementRectangle is not located over the collision layer. If I replace this.layers.collision with another group in the game, such as some moving sprites, the code works as expected. Similarly, if I replace this.pathwayPlacementRectangle with something else, like a group of sprites, the code again works as how you would expect. Possibly I'm doing something wrong with the sprite creation. Can anyone point me in the right direction please?
  24. Hi All, I have a Mario-esque game where player can run around and punch boxes from underneath to get rewards. I am setting up the tile layer with: pf.boxes ='boxes');, 5000, true, 'boxes'); Then I'm doing:, pf.boxes, pf.hitbox, null, this); on the update loop to handle the collision with boxes. The "hitbox" function receives the player object and the tile object thusly: hitbox:function(sprite,tile){ console.log(sprite,tile); }, The output of sprite.body.touching gives false for all directions, and sprite.body.blocked gives true for down, so it's as if I'm not getting a readout of the player object at the time when it collided with the box, but rather after it landed back on the ground. How do I get a readout of the player object at the time it actually hit the box? Thanks in advance, Paul
  25. Hey! I have a group of enemies created like this (called from create()): spawnEnemies: function(map){ this.enemies =; this.enemies.enableBody = true;; var enemyStartPositions = this.findObjectsByType('enemyStart',, 'objectLayer'); for(var i = 0; i < enemyStartPositions.length; i++){ var enemyStart = enemyStartPositions[i]; var enemy = new Enemy(, enemyStart.x, enemyStart.y, 'cultist'); enemy.countStats(); this.enemies.add(enemy); } this.enemies.setAll("body.immovable", true); } In the update function - I try to detect the collision between the children in the group like in this example (using 2.4.7): physics&f=group vs self.js&t=group vs self&phaser_version=v2.4.7&; But they wont collide with - just passing trough - each other. Also tried with adding a callback as when I let the player sprite collide with the enemy group like this:, this.enemies, this.collisionHandlerPlayerAndEnemy, null, this);, null, this.collisionHandlerEnemyAndEnemy); And the callback-function will not be called (may it be that this does not even work at all when the case is group to group?). I need someone elses eyes on this. No properties for enemy body is set outside these code blocks.