Search the Community

Hello All, I apologize in advance for the wall of code. Also, thanks in advance to anyone who is willing to take a crack at this. I'm having a very specific issue which I am guessing is an issue with my implementation and not the library. I am using Phaser Editor with Phaser CE as my framework. Last week I began working in prefabs into my game using extended sprites as per this example. The prefabs are separate scripts which are included in index.html. Everything has worked well except for a peculiar bug which is that when my player prefab overlaps a group which is being checked by arcade.overlap the player's body.touching is flagged as true. Because a check for touching.down is the prerequisite for jumping it means my player can effectively fly whenever overlapping. Collision appears to be working as expected and I can even use collision callbacks. The same groups that cause issues do not flag body.touching if they are not being checked for overlap. I believe the issues is because the groups are created by the editor and that the player prefab as a separate .js file does not have a handle on them but I'm not sure. I guess I have gotten myself in over my head with this approach but I feel like I am so close to getting it I am really hesitant to start over with a more monolithic approach. Here is the code for the level state which calls the script generated by the editor and the player prefab. Hope this all makes sense. Level State /** * level state. */ function Level() { Phaser.State.call(this); // TODO: generated method. } /** @type Phaser.State */ var proto = Object.create(Phaser.State.prototype); Level.prototype = proto; Level.prototype.constructor = Level; Level.prototype.init = function() { this.physics.startSystem(Phaser.Physics.ARCADE); this.world.resize(2000, 500); this.world.setBounds(0, 0, 2000, 500); this.physics.arcade.gravity.y = 800; }; Level.prototype.preload = function() { this.load.pack("levels", "assets/assets-pack.json"); this.game.load.atlas('HUD', 'assets/atlas/HUD.png', 'assets/atlas/HUD.json', Phaser.Loader.TEXTURE_ATLAS_JSON_HASH); }; Level.prototype.create = function() { this.game.renderer.setTexturePriority(['Forest_BG', 'Forest_Tiles', 'forestStage', 'characters', 'objects', 'HUD']); this.scene = new level1(this.game); this.scene.coordTimer = 0; this.scene.fTokens.forEach(this.convert, this); this.game.camera.follow(this.scene.player, Phaser.Camera.FOLLOW_PLATFORMER); //HUD this.scene.XP = new xp(this.game, 6, 6); this.game.add.existing(this.scene.XP); this.scene.fHUD.add(this.scene.XP); this.scene.XP.fixedToCamera = true;this.scene.XP.cameraOffset.setTo(6, 6); this.scene.HUDBase = this.game.add.sprite(2, 2, 'HUD', 'base'); this.scene.fHUD.add(this.scene.HUDBase); this.scene.HUDBase.fixedToCamera = true;this.scene.HUDBase.cameraOffset.setTo(2, 2); this.scene.healthBar = new healthBar(this.game, 39, 6); this.game.add.existing(this.scene.healthBar); this.scene.fHUD.add(this.scene.healthBar); this.scene.healthBar.fixedToCamera = true;this.scene.healthBar.cameraOffset.setTo(39, 6); this.scene.energyBar = new energyBar(this.game, 39, 16); this.game.add.existing(this.scene.energyBar); this.scene.fHUD.add(this.scene.energyBar); this.scene.energyBar.fixedToCamera = true;this.scene.energyBar.cameraOffset.setTo(39, 16); this.scene.magicBar = new magicBar(this.game, 39, 26); this.game.add.existing(this.scene.magicBar); this.scene.fHUD.add(this.scene.magicBar); this.scene.magicBar.fixedToCamera = true;this.scene.magicBar.cameraOffset.setTo(39, 26); // set the physics properties of the normal collision sprites this.scene.fCollisionLayer.setAll("body.immovable", true); this.scene.fCollisionLayer.setAll("body.allowGravity", false); // hide all objects of the normal collision layer this.scene.fCollisionLayer.setAll("renderable", false); // set the physics properties of the oneWay collision sprites this.scene.fOneWay.setAll("body.immovable", true); this.scene.fOneWay.setAll("body.allowGravity", false); // hide all objects of the oneWay collision layer this.scene.fOneWay.setAll("renderable", false); // disable all but top down collision this.scene.fOneWay.setAll("body.checkCollision.down", false); this.scene.fOneWay.setAll("body.checkCollision.left", false); this.scene.fOneWay.setAll("body.checkCollision.right", false); // set the physics properties of cliff this.scene.fCliff.setAll("body.immovable", true); this.scene.fCliff.setAll("body.allowGravity", false); // hide all objects of cliff this.scene.fCliff.setAll("renderable", false); // set the physics properties of waterLayer this.scene.fWaterLayer.setAll("body.immovable", true); this.scene.fWaterLayer.setAll("body.allowGravity", false); // hide all objects of cliff this.scene.fWaterLayer.setAll("renderable", false); // set the physics properties of airLayer this.scene.fAirLayer.setAll("body.immovable", true); this.scene.fAirLayer.setAll("body.allowGravity", false); // hide all objects of cliff this.scene.fAirLayer.setAll("renderable", false); this.scene.fTokens.setAll("renderable", false); this.scene.fPickups.setAll("body.allowGravity", false); //Water Effects if (this.scene.waterPresent) { this.add.tween(this.scene.fWater).to({ x : this.scene.fWater.x + 32 }, 2000, "Linear", true, 0, -1, true); var delay = 0; for (var i = 0; i < 60; i++) { var bbls = this.game.add.sprite(-100 + (this.game.world.randomX), this.scene.stageBottom, 'Forest_Tiles', 'bubble.png'); bbls.scale.set(this.game.rnd.realInRange(0.1, 1.5)); var speed = this.game.rnd.between(2000, 4000); this.game.add.tween(bbls).to({ y: this.scene.waterLevel }, speed, Phaser.Easing.Sinusoidal.InOut, true, delay, 1000, false).onComplete.add(bbls.kill, bbls); delay += 200; } } }; Level.prototype.update = function() { this.scene.fBgNear.x= this.game.camera.x*0.4; this.scene.fBgFar.x= this.game.camera.x*0.6; this.physics.arcade.collide(this.scene.player, this.scene.fCollisionLayer); this.physics.arcade.collide(this.scene.player, this.scene.fOneWay); //if (this.physics.arcade.collide(this.scene.player, this.scene.fOneWay)) this.physics.arcade.collide(this.scene.fEnemies, this.scene.fCollisionLayer); this.physics.arcade.collide(this.scene.fEnemies, this.scene.fOneWay); this.game.physics.arcade.collide(this.scene.player, this.scene.fEnemies, this.collisionCallback, this.enemyCollide, this); this.game.physics.arcade.collide(this.scene.fCliff, this.scene.fEnemies, this.collisionCallback, this.enemyCliff, this); this.physics.arcade.overlap(this.scene.player, this.scene.fPickups, this.pickup, null, this); this.physics.arcade.overlap(this.scene.player.attack, this.scene.fEnemies, this.enemyHit, null, this); this.physics.arcade.overlap(this.scene.fObjects, this.scene.fWaterLayer, this.underWater, null, this); //this.physics.arcade.overlap(this.scene.fObjects, this.scene.fAirLayer, //this.aboveWater, null, this); if (this.game.time.now > this.scene.coordTimer) { this.game.lPlayerX = this.scene.player.x; this.game.lPlayerY = this.scene.player.y; this.scene.coordTimer = this.game.time.now + 200; } }; Level.prototype.convert = function(sprite) { this.scene.pF = {}; var data = sprite.data; var x = sprite.x; var y = sprite.y; var prefab = data.prefab; if (prefab === Player) { this.scene.player = new prefab(this.game, x, y); this.game.add.existing(this.scene.player); this.scene.fPlayers.add(this.scene.player); } else { this.scene.pF[prefab + x + y] = new prefab(this.game, x, y); this.game.add.existing(this.scene.pF[prefab + x + y]); if (data.group === 'pickups') { this.scene.fPickups.add(this.scene.pF[prefab + x + y]); } else if (data.group === 'enemies') { this.scene.fEnemies.add(this.scene.pF[prefab + x + y]); } else { this.scene.fObjects.add(this.scene.pF[prefab + x + y]); } } }; Level.prototype.pickup = function(player, pickup) { pickup.body.enable = false; pickup.effect(); this.add.tween(pickup).to({ y : pickup.y - 16 }, 1000, "Expo.easeOut", true); this.add.tween(pickup.scale).to({ x : 1.25, y : 1.25 }, 1000, "Linear", true); this.add.tween(pickup).to({ alpha : 0.2 }, 1000, "Linear", true).onComplete.add(pickup.kill, pickup); }; Level.prototype.enemyCollide = function(player, enemy){ player.hurt(enemy.attack); return true; }; Level.prototype.enemyCliff = function(cliff, enemy){ enemy.cliff(); }; Level.prototype.enemyHit = function(weapon, enemy){ enemy.hurt(weapon.attack); }; Level.prototype.underWater = function(object, water){ object.tint = 0x5fcde4; }; Level.prototype.aboveWater = function(object, water){ object.tint = 0xffffff; }; Level 1 Scene (Generated by Phaser Editor) // Generated by Phaser Editor v1.2.1 /** * level1. * @param {Phaser.Game} aGame The game. * @param {Phaser.Group} aParent The parent group. If not given the game world will be used instead. */ function level1(aGame, aParent) { Phaser.Group.call(this, aGame, aParent); /* --- pre-init-begin --- */ // you can insert code here /* --- pre-init-end --- */ var bgFar = this.game.add.group(this); this.game.add.sprite(0, 0, 'Forest_BG', 'bg1_far', bgFar); this.game.add.sprite(528, 0, 'Forest_BG', 'bg1_far', bgFar); this.game.add.sprite(1056, 0, 'Forest_BG', 'bg1_far', bgFar); this.game.add.sprite(1584, 0, 'Forest_BG', 'bg1_far', bgFar); var bgNear = this.game.add.group(this); this.game.add.sprite(0, 0, 'Forest_BG', 'bg1_near', bgNear); this.game.add.sprite(528, 0, 'Forest_BG', 'bg1_near', bgNear); this.game.add.sprite(1056, 0, 'Forest_BG', 'bg1_near', bgNear); this.game.add.sprite(1584, 0, 'Forest_BG', 'bg1_near', bgNear); var airLayer = this.game.add.physicsGroup(Phaser.Physics.ARCADE, this); this.game.add.tileSprite(0, 0, 2208, 272, 'Forest_Tiles', 'air.png', airLayer); this.game.add.sprite(0, 0, 'forestStage', 'level1_stage', this); var water = this.game.add.group(this); this.game.add.sprite(1824, 288, 'forestStage', 'waterTile', water); this.game.add.sprite(1360, 288, 'forestStage', 'waterTile', water); this.game.add.sprite(896, 288, 'forestStage', 'waterTile', water); this.game.add.sprite(432, 288, 'forestStage', 'waterTile', water); this.game.add.sprite(-32, 288, 'forestStage', 'waterTile', water); var waterLayer = this.game.add.physicsGroup(Phaser.Physics.ARCADE, this); this.game.add.tileSprite(-31, 296, 2237, 198, 'Forest_Tiles', 'liquid.png', waterLayer); var obstacles = this.game.add.group(this); this.game.add.sprite(167, 230, 'Forest_Tiles', 'box.png', obstacles); this.game.add.sprite(167, 242, 'Forest_Tiles', 'box.png', obstacles); this.game.add.sprite(156, 242, 'Forest_Tiles', 'box.png', obstacles); var oneWay = this.game.add.physicsGroup(Phaser.Physics.ARCADE, this); this.game.add.sprite(431, 90, 'Forest_Tiles', 'one-way.png', oneWay); this.game.add.tileSprite(392, 87, 64, 16, 'Forest_Tiles', 'one-way.png', oneWay); this.game.add.tileSprite(375, 102, 66, 34, 'Forest_Tiles', 'one-way.png', oneWay); this.game.add.tileSprite(343, 184, 33, 16, 'Forest_Tiles', 'one-way.png', oneWay); this.game.add.tileSprite(280, 200, 82, 16, 'Forest_Tiles', 'one-way.png', oneWay); this.game.add.tileSprite(70, 150, 38, 16, 'Forest_Tiles', 'one-way.png', oneWay); this.game.add.tileSprite(97, 118, 24, 36, 'Forest_Tiles', 'one-way.png', oneWay); this.game.add.tileSprite(56, 103, 49, 51, 'Forest_Tiles', 'one-way.png', oneWay); this.game.add.sprite(152, 119, 'Forest_Tiles', 'one-way.png', oneWay); this.game.add.tileSprite(183, 165, 17, 40, 'Forest_Tiles', 'one-way.png', oneWay); this.game.add.tileSprite(165, 200, 36, 16, 'Forest_Tiles', 'one-way.png', oneWay); this.game.add.tileSprite(352, 256, 224, 16, 'Forest_Tiles', 'one-way.png', oneWay); this.game.add.tileSprite(158, 244, 23, 12, 'Forest_Tiles', 'one-way.png', oneWay); this.game.add.tileSprite(169, 232, 12, 24, 'Forest_Tiles', 'one-way.png', oneWay); this.game.add.tileSprite(16, 256, 176, 16, 'Forest_Tiles', 'one-way.png', oneWay); this.game.add.tileSprite(768, 272, 64, 16, 'Forest_Tiles', 'one-way.png', oneWay); this.game.add.tileSprite(912, 160, 272, 16, 'Forest_Tiles', 'one-way.png', oneWay); this.game.add.tileSprite(762, 216, 29, 16, 'Forest_Tiles', 'one-way.png', oneWay); this.game.add.tileSprite(821, 167, 36, 16, 'Forest_Tiles', 'one-way.png', oneWay); this.game.add.sprite(791, 136, 'Forest_Tiles', 'one-way.png', oneWay); this.game.add.tileSprite(624, 272, 64, 16, 'Forest_Tiles', 'one-way.png', oneWay); var objects = this.game.add.group(this); var players = this.game.add.group(objects); var enemies = this.game.add.group(objects); var pickups = this.game.add.physicsGroup(Phaser.Physics.ARCADE, objects); var tokens = this.game.add.group(this); var coin1 = this.game.add.sprite(96, 224, 'objects', 'coin11', tokens); coin1.data = { prefab: Coin1, group : 'pickups' }; var snakeGreen0 = this.game.add.sprite(131, 224, 'characters', 'snakeGreen0', tokens); snakeGreen0.data = { prefab : greenSnake, group : 'enemies' }; var hPotion10 = this.game.add.sprite(301, 169, 'objects', 'hPotion10', tokens); hPotion10.data = { prefab : hPotion, group : 'pickups' }; var hPotion101 = this.game.add.sprite(187, 137, 'objects', 'hPotion10', tokens); hPotion101.data = { prefab : hPotion, group : 'pickups' }; var hPotion102 = this.game.add.sprite(442, 239, 'objects', 'hPotion10', tokens); hPotion102.data = { prefab : hPotion, group : 'pickups' }; var snakeGreen01 = this.game.add.sprite(474, 224, 'characters', 'snakeGreen0', tokens); snakeGreen01.data = { prefab : greenSnake, group : 'enemies' }; var snakeGreen011 = this.game.add.sprite(514, 223, 'characters', 'snakeGreen0', tokens); snakeGreen011.data = { prefab : greenSnake, group : 'enemies' }; var snakeGreen012 = this.game.add.sprite(376, 223, 'characters', 'snakeGreen0', tokens); snakeGreen012.data = { prefab : greenSnake, group : 'enemies' }; var hPotion1021 = this.game.add.sprite(624, 256, 'objects', 'hPotion10', tokens); hPotion1021.data = { prefab : hPotion, group : 'pickups' }; var player = this.game.add.sprite(32, 224, 'characters', 'gunther0', tokens); player.data = { prefab : Player }; var snakeGreen013 = this.game.add.sprite(656, 240, 'characters', 'snakeGreen0', tokens); snakeGreen013.data = { prefab : greenSnake, group : 'enemies' }; var snakeGreen0131 = this.game.add.sprite(768, 240, 'characters', 'snakeGreen0', tokens); snakeGreen0131.data = { prefab : greenSnake, group : 'enemies' }; var snakeGreen01311 = this.game.add.sprite(928, 128, 'characters', 'snakeGreen0', tokens); snakeGreen01311.data = { prefab : greenSnake, group : 'enemies' }; var snakeGreen01312 = this.game.add.sprite(1056, 128, 'characters', 'snakeGreen0', tokens); snakeGreen01312.data = { prefab : greenSnake, group : 'enemies' }; var hPotion10211 = this.game.add.sprite(1040, 144, 'objects', 'hPotion10', tokens); hPotion10211.data = { prefab : hPotion, group : 'pickups' }; var collisionLayer = this.game.add.physicsGroup(Phaser.Physics.ARCADE, this); this.game.add.tileSprite(0, -16, 16, 496, 'Forest_Tiles', 'collision.png', collisionLayer); this.game.add.tileSprite(0, 480, 2000, 16, 'Forest_Tiles', 'collision.png', collisionLayer); var cliff = this.game.add.physicsGroup(Phaser.Physics.ARCADE, this); this.game.add.tileSprite(576, 240, 2, 16, 'Forest_Tiles', 'cliff.png', cliff); this.game.add.tileSprite(352, 240, 2, 16, 'Forest_Tiles', 'cliff.png', cliff); this.game.add.tileSprite(192, 240, 1, 16, 'Forest_Tiles', 'cliff.png', cliff); this.game.add.tileSprite(622, 256, 2, 16, 'Forest_Tiles', 'cliff.png', cliff); this.game.add.tileSprite(768, 256, 3, 16, 'Forest_Tiles', 'cliff.png', cliff); this.game.add.tileSprite(830, 256, 2, 16, 'Forest_Tiles', 'cliff.png', cliff); this.game.add.tileSprite(910, 144, 3, 16, 'Forest_Tiles', 'cliff.png', cliff); this.game.add.tileSprite(1183, 144, 3, 16, 'Forest_Tiles', 'cliff.png', cliff); this.game.add.tileSprite(685, 256, 2, 16, 'Forest_Tiles', 'cliff.png', cliff); this.game.add.sprite(0, 0, 'forestStage', 'level1_foreground', this); var HUD = this.game.add.group(this); // public fields this.fBgFar = bgFar; this.fBgNear = bgNear; this.fAirLayer = airLayer; this.fWater = water; this.fWaterLayer = waterLayer; this.fObstacles = obstacles; this.fOneWay = oneWay; this.fObjects = objects; this.fPlayers = players; this.fEnemies = enemies; this.fPickups = pickups; this.fTokens = tokens; this.fCollisionLayer = collisionLayer; this.fCliff = cliff; this.fHUD = HUD; /* --- post-init-begin --- */ //Level Paramaters this.waterPresent = true; this.waterLevel = 296; this.stageBottom = 480; /* --- post-init-end --- */ } /** @type Phaser.Group */ var level1_proto = Object.create(Phaser.Group.prototype); level1.prototype = level1_proto; level1.prototype.constructor = Phaser.Group; /* --- end generated code --- */ Player Prefab Player = function (game, x, y) { "use strict"; Phaser.Sprite.call(this, game, x, y, 'characters', 'gunther0'); this.anchor.setTo(0.5, 0.0); this.animations.add('walk', ['gunther0', 'gunther1', 'gunther2', 'gunther3'], 4, true); this.animations.add('jump', ['gunther4', 'gunther5', 'gunther6', 'gunther7'], 4, true); this.animations.add('attack', ['gunther11', 'gunther10', 'gunther11', 'gunther12'], 12, false); this.animations.add('idle', ['gunther0'], 1, true); this.game.physics.arcade.enableBody(this); this.body.setSize(16.818477630615234, 22.794174194335938, 7.9137725830078125, 8.075286865234375); this.body.drag.x = 300; this.body.bounce.set(0.2); this.attack = 0; this.attacking = false; this.attacanim = false; this.touching = false; this.underwater = false; this.invulnerable = false; this.cursors = this.game.input.keyboard.createCursorKeys(); this.game.input.keyboard.addKeyCapture([ Phaser.Keyboard.SHIFT ]); this.game.input.keyboard.addKeyCapture([ Phaser.Keyboard.SPACEBAR ]); }; Player.prototype = Object.create(Phaser.Sprite.prototype); Player.prototype.constructor = Player; /** * Automatically called by World.update */ Player.prototype.update = function() { "use strict"; var expend = 0; if (this.game.curEnergy > this.game.maxEnergy) { this.game.curEnergy = this.game.maxEnergy; } else if (this.game.curEnergy < 0) { this.game.curEnergy = 0; } if (this.game.curHealth > this.game.maxHealth) { this.game.curHealth = this.game.maxHealth; } else if (this.game.curHealth < 0) { this.game.curHealth = 0; } if (this.game.curMana > this.game.maxMana) { this.game.curMana = this.game.maxMana; } else if (this.game.curMana < 0) { this.game.curMana = 0; } if (this.game.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR) && this.attacking === false) { this.attacanim = true; this.weapon = new steelSword (this.game, this.x, this.y); this.game.add.existing(this.weapon); this.attack = this.game.add.group(); this.attack.add(this.weapon); if (this.scale.x === -1) { this.weapon.scale.x = -1; } else if (this.scale.x === 1) { this.weapon.scale.x = 1; } this.attacking = true; this.game.time.events.add(Phaser.Timer.SECOND * .08, this.attacktime, this); } else if (!this.game.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR)) { this.attacking = false; } //CONTROLS //shift key for running and leaping if (this.game.input.keyboard.isDown(Phaser.Keyboard.SHIFT) && (this.game.curEnergy > 0)) { this.game.curEnergy -= .5; //this.scene.EnergyText.setText('Energy: ' + ENERGY); expend = this.game.effort; } else { //ENERGY += .2; //this.scene.EnergyText.setText('Energy: ' + ENERGY); expend = 0; } if (this.game.input.keyboard.isDown(Phaser.Keyboard.SHIFT)) { // Nothing } else { this.game.curEnergy += .2; } if (this.cursors.left.isDown) { // move to the left this.body.velocity.x = -60 - expend; } else if (this.cursors.right.isDown) { // move to the right this.body.velocity.x = 60 + expend; } else { // dont move in the horizontal this.body.velocity.x = 0; } // a flag to know if the player is (down) touching the platforms this.touching = this.body.touching.down; if (this.touching && this.cursors.up.isDown) { // jump if the player is on top of a platform and the up key is pressed this.body.velocity.y = -250 - expend; } if (this.game.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR) && this.attacanim) { this.play("attack"); } else if (this.touching) { if (this.body.velocity.x == 0) { // if it is not moving horizontally play the idle this.play("idle"); } else { // if it is moving play the walk this.play("walk"); } } else { // it is not touching the platforms so it means it is jumping. this.play("jump"); } // update the facing of the player if (this.cursors.left.isDown) { // face left this.scale.x = -1; } else if (this.cursors.right.isDown) { // face right this.scale.x = 1; } }; Player.prototype.hurt = function(attack) { if (this.invulnerable === false){ this.tint = 0xd95763; this.game.curHealth -= attack; this.game.time.events.add(Phaser.Timer.SECOND * .1, this.normalize, this); this.invulnerable = true; } }; Player.prototype.normalize = function(sprite) { this.tint = 0xffffff; this.invulnerable = false; }; Player.prototype.attacktime = function(sprite) { this.attacanim = false; };