deedeekaka

Members
  • Content Count

    21
  • Joined

  • Last visited

Everything posted by deedeekaka

  1. It works PERFECTLY and as expected now. I left all my constants outside of the create function since they will never change, and with all my variables in create(), they get reset properly everytime. Thank you for teaching me something about Phaser! You rock
  2. Hey! I didn't even think of this! That makes total sense. I will surely give this a shot!
  3. Thanks for the reply! I've tried to implement something like you said, but unfortunately no luck.. the lives and garbage don't ever appear on the screen once the game is restarted and my event listeners still do wacky things. reset : function () { this.garbage.forEach(function(trash) { trash.destroy(); }, this); this.garbage.length = 0; this.lifeSprites.forEach(function(life) { life.destroy(); }, this); this.lifeSprites.length = 0; this.game.input.onDown.removeAll(); this.game.input.keyboard.reset(true); this.game.state.start('Game', true, false); } I am going to try a restart without using this.game.state.start() or this.game.state.restart() by just re-initializing my sprites and variables positions and values. Hopefully I can get something working!
  4. Hello! I am making a waste sorting game and when the player loses all their lives, I wish to restart the game. I click the 'RETRY' text and the state reloads, but it seems that my life and garbage sprites never reload. I am wondering if it is because they are in an array (see this.garbage = []; and this.lifeSprites = [];). I have never used game.state.start to reload a state multiple times, I have only ever used it to call a state once. If I cannot get game.state.start to reload my game, I will create a restart() method with some re-positioning code and whatnot. BUT it would be way awesome if I could figure out why this doesn't work!! Below is my code and here is a link to my game so far (my code is still mucho messy). Arrow keys to rotate on desktop. BasicGame.Game = function (game) { this.firstDrop = true; this.garbage = []; this.MAX_TRASH = 5; this.lowestTrash = null; this.lastLowestTrash = null; this.lowestTrashType = null; this.lives = 3; this.lifeSprites = []; this.gap = 500; this.MIN_GAP = 250; this.fallSpeed = 3; this.MAX_FALL_SPEED = 5.5; this.sorter = null; this.rotationSpeed = 10; this.targetRotation = null; this.isRotating = false; this.clockwise = true; this.orientation = null; this.Orientation = { NORTH: 0, EAST: -90, SOUTH: -180, WEST: 90 }; this.TrashType = { BLUE: 0, COMPOST: 1, GREY: 2, YELLOW: 3 }; this.leftKey = null; this.rightKey = null; this.gameover = false; this.score = 0; this.scoreText = null; this.highScoreText = null; this.msgText = null; this.continuePrompt = null; }; BasicGame.Game.prototype = { create: function () { this.lowestTrash = 0; this.lastLowestTrash = this.MAX_TRASH - 1; var trash; for (i = 0; i < this.MAX_TRASH; i++) { trash = this.game.add.sprite(this.game.world.centerX, -this.gap * (i + 1), 'trash'); trash.loadTexture('trash', this.rnd.integerInRange(0, this.MAX_TRASH)); trash.anchor.setTo(0.5); this.garbage.push(trash); if (i == 0) { this.lowestTrashType = trash.frame; } } var life; for (i = 0; i < this.lives; i++) { life = this.game.add.sprite(0, 0, 'life'); life.anchor.setTo(0.5); life.x = (this.game.width - (life.width / 2 + 10)) - (i * life.width); life.y = life.height - 10; this.lifeSprites.push(life); } this.sorter = this.game.add.sprite(this.game.world.centerX, this.game.height, 'sorter'); this.sorter.anchor.setTo(0.5); this.orientation = this.Orientation.NORTH; this.targetRotation = this.orientation; this.scoreText = this.add.bitmapText(25, 25, 'arialPixelated', '0', 16); this.scoreText.align = 'left'; this.highScoreText = this.add.bitmapText(25, 50, 'arialPixelated', 'BEST: ' + BasicGame.highScore, 16); this.highScoreText.align = 'left'; this.continuePrompt = new SuperBitmapText(this.game, this.game.world.centerX, this.game.world.centerY + 100, 'arialPixelated', 'RETRY', 16, 25); this.continuePrompt.anchor.setTo(0.5); this.continuePrompt.align = 'left'; this.continuePrompt.alpha = 0; this.continuePrompt.inputEnabled = false; this.msgText = this.add.bitmapText(this.game.world.centerX, this.game.world.centerY, 'arialPixelated', '', 16); this.msgText.anchor.setTo(0.5); this.msgText.align = 'center'; this.game.input.onDown.add(this.rotateSorter, this); this.game.input.onDown.add(function() {if (this.continuePrompt.isDown){this.game.state.start('Game', true, false);}}, this); this.leftKey = this.game.input.keyboard.addKey(Phaser.Keyboard.LEFT); this.rightKey = this.game.input.keyboard.addKey(Phaser.Keyboard.RIGHT); this.game.input.keyboard.addCallbacks(this, this.rotateSorter); //For mobile. Phaser.Canvas.setTouchAction(this.game.canvas, 'auto'); this.game.input.touch.preventDefault = true; }, update : function () { if (!this.gameover) { this.garbage.forEach(function(trash) { trash.y += this.fallSpeed; trash.angle += 0.25; }, this); if (this.garbage[this.lowestTrash].y > this.game.height - (this.sorter.height / 2.5)) { this.checkIfScored(); } } this.sorter.angle = Phaser.Math.snapTo(this.sorter.angle, this.rotationSpeed); if (this.sorter.angle != this.targetRotation) { this.isRotating = true; } else { this.isRotating = false; } if (this.isRotating) { if (this.clockwise) { this.sorter.angle += this.rotationSpeed; } else { this.sorter.angle -= this.rotationSpeed; } } }, resetTrash : function () { this.garbage[this.lowestTrash].y += -this.gap * (this.MAX_TRASH); this.garbage[this.lowestTrash].loadTexture('trash', this.rnd.integerInRange(0, this.MAX_TRASH)); this.lowestTrash++; if (this.lowestTrash > this.garbage.length - 1) { this.lowestTrash = 0; } this.lowestTrashType = this.garbage[this.lowestTrash].frame; }, checkIfScored : function () { if (this.lowestTrashType == this.TrashType.BLUE && this.orientation == this.Orientation.NORTH) { this.score++; if (this.gap > this.MIN_GAP) { this.gap -= 5; } else { this.gap = this.MIN_GAP; } if (this.fallSpeed < this.MAX_FALL_SPEED) { this.fallSpeed += 0.05; } else { this.fallSpeed = this.MAX_FALL_SPEED; } } else if (this.lowestTrashType == this.TrashType.COMPOST && this.orientation == this.Orientation.EAST) { this.score++; if (this.gap > this.MIN_GAP) { this.gap -= 5; } else { this.gap = this.MIN_GAP; } if (this.fallSpeed < this.MAX_FALL_SPEED) { this.fallSpeed += 0.05; } else { this.fallSpeed = this.MAX_FALL_SPEED; } } else if (this.lowestTrashType == this.TrashType.GREY && this.orientation == this.Orientation.SOUTH) { this.score++; if (this.gap > this.MIN_GAP) { this.gap -= 5; } else { this.gap = this.MIN_GAP; } if (this.fallSpeed < this.MAX_FALL_SPEED) { this.fallSpeed += 0.05; } else { this.fallSpeed = this.MAX_FALL_SPEED; } } else if (this.lowestTrashType == this.TrashType.YELLOW && this.orientation == this.Orientation.WEST) { this.score++; if (this.gap > this.MIN_GAP) { this.gap -= 5; } else { this.gap = this.MIN_GAP; } if (this.fallSpeed < this.MAX_FALL_SPEED) { this.fallSpeed += 0.05; } else { this.fallSpeed = this.MAX_FALL_SPEED; } } else { this.fallSpeed = 3; this.updateLives(); } this.resetTrash(); this.scoreText.setText(this.score); }, updateLives : function () { this.lifeSprites[this.lives - 1].loadTexture('lifeFull'); this.lives--; if (this.lives == 0) { this.gameover = true; this.msgText.setText('GAME OVER!\n' + this.score + ' responsibly disposed trashes!'); this.continuePrompt.alpha = 1; this.continuePrompt.inputEnabled = true; this.continuePrompt.input.useHandCursor = true; if (this.score > BasicGame.highScore) { BasicGame.highScore = this.score; this.highScoreText.setText('BEST: ' + BasicGame.highScore); } this.garbage.forEach(function(trash) { trash.kill(); }, this); this.game.input.onDown.remove(this.rotateSorter, this); } }, rotateSorter : function () { if (this.game.device.desktop && !this.gameover) { if (this.leftKey.isDown) { this.rotateLeft(); } else if (this.rightKey.isDown) { this.rotateRight(); } } else { if (this.input.y >= this.sorter.y - this.sorter.height) { if (this.input.x >= this.game.world.centerX) { this.rotateRight(); } else if (this.input.x < this.game.world.centerX) { this.rotateLeft(); } } } }, rotateLeft : function () { this.clockwise = true; switch (this.orientation) { case this.Orientation.NORTH: this.orientation = this.Orientation.WEST; break; case this.Orientation.EAST: this.orientation = this.Orientation.NORTH; break; case this.Orientation.SOUTH: this.orientation = this.Orientation.EAST; break; case this.Orientation.WEST: this.orientation = this.Orientation.SOUTH; break; } this.targetRotation = this.orientation; }, rotateRight : function () { this.clockwise = false; switch (this.orientation) { case this.Orientation.NORTH: this.orientation = this.Orientation.EAST; break; case this.Orientation.EAST: this.orientation = this.Orientation.SOUTH; break; case this.Orientation.SOUTH: this.orientation = this.Orientation.WEST; break; case this.Orientation.WEST: this.orientation = this.Orientation.NORTH; break; } this.targetRotation = this.orientation; } }; EDIT: My input listeners also get jacked up. I separate mobile and desktop but when the state restarts, my mobile listeners are firing when they shouldn't be because I am using desktop, not mobile.
  5. I would also like to know if this is possible @rich
  6. maybe over exaggerated a bit, but I meant same symptoms and root of problem being the WebGL and Safari
  7. Haven't tried an older OS, but I am on iOS 9 which is pretty recent. You can try the game out if you have Safari and you can see it prints upside down. I've set it that if your current score is >= your highscore and you miss a shot (it's a basketball game), that it will auto download a screenshot. http://www.dev.applications.ene.gov.on.ca/games/bball/
  8. Yes, I've seen that one! It's exactly the same in mine. If I use Phaser.CANVAS.. it's totally fine, but WEBGL flips it.
  9. Not sure if it only happens in iPhones, but I only have an iPhone mobile device on me right now!
  10. Hola! I wanted to take a screenshot of my game and download it to the user's device. I have this working, almost except that on my iPhone5s in Safari, the downloaded image is upsidedown. To get the screen shot I use my code below (specifically, the toDataURL() function). On my desktop, the downloaded image is oriented the right way. But not in Safari mobile. I don't have Safari Desktop to try it there, so I'm not sure if mobile vs. desktop makes a difference. Has anyone dealt with this? Know of any work arounds? Thank you in advance! saveCanvas : function () { var link = document.createElement('a'); link.href = this.game.canvas.toDataURL('image/png'); link.download = 'Highscore.jpg'; document.body.appendChild(link); link.click(); document.body.removeChild(link); }
  11. I added this and it now works.. wouldn't have expected that it needed to be part of the collision group due to the examples, but I guess it makes sense. this.checker.body.collides(this.ballCollisionGroup);
  12. I am building a basketball game. I cannot get the ball to stop sticking to the rim colliders. When I was running p2 physics, the ball would simply bounce off the rim colliders as expected, but now, everytime the ball touches the rim colliders, it slows down movement rapidly and doesn't bounce or fall as expected. I think I might be missing a property setting somewhere. I set the rim colliders (leftMarker + rightMarker) to be immovable in create() but I'm not sure what else I need. I don't understand why the colliders stick to each other! Any help is appreciated! Basketball.Game = function (game) { this.score = null; this.scoreText = null; this.ball = null; this.net = null; this.basket = null; this.rim = null; this.leftMarker = null; this.rightMarker = null; this.checker = null; this.ballCollisionGroup = null; this.rimCollisionGroup = null; this.collisionsOn = false; this.launched = false; this.respawned = false; this.lastPointerPos = null; //HTML element that will produce screenshot this.clickToSave = null; //Constants this.GRAVITY = 1600; this.SHOOT_FORCE = 1400; this.EDGE_CUSHION = 10; this.SCALE_PERCENT = 0.55; }; Basketball.Game.prototype = { create: function () { //Initialize physics world this.game.physics.startSystem(Phaser.Physics.ARCADE); this.game.physics.arcade.gravity.y = this.GRAVITY; //Create basket group this.basket = this.game.add.group(); //Load net sprite this.net = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY - 200, 'net'); this.net.anchor.setTo(0.5); this.basket.add(this.net); //Load hoop markers this.leftMarker = this.game.add.sprite(this.game.world.centerX - 57, 232, 'marker'); this.rightMarker = this.game.add.sprite(this.game.world.centerX + 57, 232, 'marker'); this.leftMarker.anchor.setTo(0.5); this.rightMarker.anchor.setTo(0.5); this.basket.add(this.leftMarker); this.basket.add(this.rightMarker); //Load ball sprite this.ball = this.game.add.sprite(this.game.world.centerX, this.game.world.height - 100, 'ball'); this.ball.anchor.setTo(0.5); //Load rim sprite this.rim = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY - 200, 'rim'); this.rim.anchor.setTo(0.5); this.basket.add(this.rim); //Load checker sprite this.checker = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY - 80, 'checker'); this.checker.anchor.setTo(0.5); this.basket.add(this.checker); //Setup physics this.game.physics.arcade.enable([this.leftMarker, this.rightMarker, this.ball]); this.leftMarker.body.setCircle(this.leftMarker.width / 2); this.rightMarker.body.setCircle(this.rightMarker.width / 2); this.leftMarker.body.moves = false; this.rightMarker.body.moves = false; this.leftMarker.body.immovable = false; this.rightMarker.body.immovable = false; this.leftMarker.body.enable = false; this.rightMarker.body.enable = false; this.ball.body.setCircle((this.ball.width * this.SCALE_PERCENT) / 2); this.ball.body.allowGravity = false; this.ball.body.bounce.set(0.8); this.ball.body.velocity.set(0); //Enable input this.game.input.onDown.add(this.track, this); this.game.input.onUp.add(this.launch, this); //Initialize this.score = 0; this.scoreText = this.game.add.bitmapText(this.game.world.centerX, this.game.world.centerY, 'pixel', 'Score: ' + this.score, 36); this.scoreText.anchor.setTo(0.5); this.lastPointerPos = new Phaser.Point(0, 0); //For mobile Phaser.Canvas.setTouchAction(this.game.canvas, 'auto'); this.game.input.touch.preventDefault = true; }, update : function () { this.game.physics.arcade.collide(this.ball, this.leftMarker); this.game.physics.arcade.collide(this.ball, this.rightMarker); //Only enable collisions when the ball is above the net markers if (this.ball.y < this.basket.children[1].y - this.ball.height / 2) { console.log("Detect collisions!"); this.leftMarker.body.enable = true; this.rightMarker.body.enable = true; } //Check if the ball is out of bounds if (this.ball.x < this.camera.x - this.ball.width / 2 || this.ball.x > this.camera.width + this.ball.width / 2|| this.ball.y < this.camera.y - this.ball.height / 2 || this.ball.y > this.camera.height + this.ball.height / 2) { //Respawn the ball if it hasn't already if (!this.respawned) { this.respawn(); } } }, render : function () { this.game.debug.body(this.ball); if (this.leftMarker.body.enable) { this.game.debug.body(this.leftMarker); this.game.debug.body(this.rightMarker); } }, track : function () { //Update the last finger position this.lastPointerPos.x = this.input.x; this.lastPointerPos.y = this.input.y; //Set the ball physics to be still this.ball.body.allowGravity = false; this.ball.body.velocity.set(0); this.launched = true; }, launch : function () { //Launch the ball if it hasn't already if (this.launched) { this.game.add.tween(this.ball.scale).to({ x: this.SCALE_PERCENT, y: this.SCALE_PERCENT }, 1000, Phaser.Easing.Linear.Out, true); this.launched = false; this.ball.body.allowGravity = true; //Get the direction of finger swipe, normalize it, and apply a scalar to the velocity of the ball var direction = new Phaser.Point(this.input.x - this.lastPointerPos.x, this.input.y - this.lastPointerPos.y); Phaser.Point.normalize(direction, direction); if (direction.y < 0) { this.ball.body.velocity.x = direction.x * this.SHOOT_FORCE; this.ball.body.velocity.y = direction.y * this.SHOOT_FORCE; } } }, respawn : function () { this.respawned = true; //Set the ball physics to be still again this.ball.body.allowGravity = false; this.ball.body.velocity.set(0); //Disable collisions this.leftMarker.body.enable = false; this.rightMarker.body.enable = false; this.game.time.events.add(Phaser.Timer.SECOND * 0.25, function () { this.respawned = false; //Rescale the ball and its body this.ball.scale.setTo(1); this.ballResized = false; //Spawn the ball in a new, random location var ballSpawnX = this.game.rnd.integerInRange(this.camera.x + this.ball.width / 2 + this.EDGE_CUSHION, (this.camera.width - this.ball.width / 2) - this.EDGE_CUSHION); ballSpawnX = this.game.math.snapTo(ballSpawnX, 10); //Make sure the ball is in the boundary we set if (ballSpawnX < this.ball.width + this.EDGE_CUSHION) { ballSpawnX = this.ball.width + this.EDGE_CUSHION; } else if (ballSpawnX > this.world.width - this.EDGE_CUSHION) { ballSpawnX = this.world.width - this.EDGE_CUSHION; } this.ball.x = ballSpawnX; this.ball.y = this.game.height - 100; }, this); }, saveCanvas : function () { var link = this.game.canvas.toDataURL('image/png'); window.open(link, '_blank'); } };
  13. Didn't use Arcade for lack of circle colliders (just found out they do indeed exist) and I didn't want to calculate angular rotation and whatnot (but I'm going to try with Arcade anyways, thanks ) I had no idea that I didn't need to anchor my sprites to 0.5. But I removed them and the positions were all out of place. I didn't see that they were anchored 0.5 automatically by the physics, but maybe I'm doing something in the wrong order. Below is my full Game.js code. Basketball.Game = function (game) { this.score = null; this.scoreText = null; this.ball = null; this.net = null; this.rim = null; this.leftMarker = null; this.rightMarker = null; this.checker = null; this.ballCollisionGroup = null; this.rimCollisionGroup = null; this.ballInitRadius = null; this.ballResized = false; this.collisionsOn = false; this.launched = false; this.respawned = false; this.lastPointerPos = null; //HTML element that will produce screenshot this.clickToSave = null; //Constants this.GRAVITY = 1600; this.SHOOT_FORCE = 1400; this.EDGE_CUSHION = 10; this.SCALE_PERCENT = 0.55; }; Basketball.Game.prototype = { create: function () { //Load net sprite this.net = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY - 200, 'net'); this.net.anchor.setTo(0.5); //Load hoop markers this.leftMarker = this.game.add.sprite(this.game.world.centerX - 57, 232, 'marker'); this.rightMarker = this.game.add.sprite(this.game.world.centerX + 57, 232, 'marker'); this.leftMarker.anchor.setTo(0.5); this.rightMarker.anchor.setTo(0.5); //Load ball sprite this.ball = this.game.add.sprite(this.game.world.centerX, this.game.world.height - 100, 'ball'); this.ballInitRadius = this.ball.width / 2; this.ball.anchor.setTo(0.5); this.rim = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY - 200, 'rim'); this.rim.anchor.setTo(0.5); this.checker = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY - 100, 'checker'); this.checker.anchor.setTo(0.5); //Setting up the physics environment this.game.world.setBounds(-this.ball.width, -this.ball.height, this.game.width + this.ball.width * 2, this.game.height + this.ball.height * 2); this.game.physics.startSystem(Phaser.Physics.P2JS); this.game.physics.p2.gravity.y = this.GRAVITY; this.game.physics.setBoundsToWorld(); //Setting up the marker physics this.game.physics.p2.enable(this.leftMarker); this.leftMarker.body.setCircle(this.leftMarker.width / 2); this.leftMarker.body.static = true; this.leftMarker.alpha = 0; this.game.physics.p2.enable(this.rightMarker); this.rightMarker.body.setCircle(this.rightMarker.width / 2); this.rightMarker.body.static = true; this.rightMarker.alpha = 0; //Parent markers to the net this.net.addChild(this.leftMarker); this.net.addChild(this.rightMarker); //Setting up checker physics this.game.physics.p2.enable(this.checker, true); this.checker.body.data.shapes[0].sensor = true; this.checker.body.static = true; //Setting up the ball physics this.game.physics.p2.enable(this.ball); this.ball.body.setCircle(this.ball.width / 2); this.ball.body.setZeroVelocity(); this.ball.body.static = true; //Set up collision groups this.ballCollisionGroup = this.game.physics.p2.createCollisionGroup(); this.rimCollisionGroup = this.game.physics.p2.createCollisionGroup(); this.game.physics.p2.setImpactEvents(true); this.game.physics.p2.updateBoundsCollisionGroup(); this.game.physics.p2.restitution = 0.8; //Enable input this.game.input.onDown.add(this.track, this); this.game.input.onUp.add(this.launch, this); this.checker.body.onBeginContact.add(this.checkIfScored, this); //Initialize this.score = 0; this.scoreText = this.game.add.bitmapText(this.game.world.centerX, this.game.world.centerY, 'pixel', 'Score: ' + this.score, 36); this.scoreText.anchor.setTo(0.5); this.lastPointerPos = new Phaser.Point(0, 0); //For mobile Phaser.Canvas.setTouchAction(this.game.canvas, 'auto'); this.game.input.touch.preventDefault = true; }, update : function () { //Check if the ball is out of bounds if (this.ball.x < this.camera.x - this.ball.width / 2 || this.ball.x > this.camera.width + this.ball.width / 2|| this.ball.y < this.camera.y - this.ball.height / 2 || this.ball.y > this.camera.height + this.ball.height / 2) { if (!this.respawned) { this.respawn(); } } if (this.ball.y < this.net.children[0].y - this.ball.height / 2) { //Turn on ball collisions if (!this.collisionsOn) { console.log("collision groups on!"); this.ball.body.setCollisionGroup(this.ballCollisionGroup); this.leftMarker.body.setCollisionGroup(this.rimCollisionGroup); this.rightMarker.body.setCollisionGroup(this.rimCollisionGroup); this.ball.body.collides(this.rimCollisionGroup); this.leftMarker.body.collides(this.ballCollisionGroup); this.rightMarker.body.collides(this.ballCollisionGroup); this.collisionsOn = true; } if (!this.ballResized) { this.ball.body.setCircle(this.ballInitRadius * this.SCALE_PERCENT); this.ball.body.setCollisionGroup(this.ballCollisionGroup); this.ballResized = true; } } else { this.collisionsOn = false; } }, track : function () { //Do a hit test to make sure finger is on the ball //Update the last finger position this.lastPointerPos.x = this.input.x; this.lastPointerPos.y = this.input.y; //Set the ball physics to be still this.launched = true; this.ball.body.static = true; this.ball.body.setZeroVelocity(); }, launch : function () { if (this.launched) { this.game.add.tween(this.ball.scale).to({ x: this.SCALE_PERCENT, y: this.SCALE_PERCENT }, 800, Phaser.Easing.Linear.In, true); this.launched = false; this.ball.body.static = false; //Get the direction of finger swipe, normalize it, and apply a scalar to the velocity of the ball var direction = new Phaser.Point(this.input.x - this.lastPointerPos.x, this.input.y - this.lastPointerPos.y); //direction.x = this.game.math.snapTo(direction.x, 5); //direction.y = this.game.math.snapTo(direction.y, 5); Phaser.Point.normalize(direction, direction); if (direction.y < 0) { this.ball.body.velocity.x = direction.x * this.SHOOT_FORCE; this.ball.body.velocity.y = direction.y * this.SHOOT_FORCE; } } }, checkIfScored : function () { console.log(this.ball.body.velocity.y); if (this.ball.body.velocity.y > 0) { console.log("SCORED!"); this.score++; this.scoreText.setText('Score: ' + this.score); } }, respawn : function () { this.respawned = true; //Remove collision groups this.ball.body.removeCollisionGroup(this.rimCollisionGroup); this.leftMarker.body.removeCollisionGroup(this.ballCollisionGroup); this.rightMarker.body.removeCollisionGroup(this.ballCollisionGroup); //Set the ball physics to be still again this.ball.body.static = true; this.ball.body.setZeroVelocity(); this.game.time.events.add(Phaser.Timer.SECOND * 0.25, function () { this.respawned = false; //Rescale the ball and its body this.ball.scale.setTo(1); this.ball.body.setCircle(this.ball.width / 2); this.ballResized = false; //Spawn the ball in a new, random location var ballSpawnX = this.game.rnd.integerInRange(this.camera.x + this.ball.width / 2 + this.EDGE_CUSHION, (this.camera.width - this.ball.width / 2) - this.EDGE_CUSHION); ballSpawnX = this.game.math.snapTo(ballSpawnX, 10); //Make sure the ball is in the boundary we set if (ballSpawnX < this.ball.width + this.EDGE_CUSHION) { ballSpawnX = this.ball.width + this.EDGE_CUSHION; } else if (ballSpawnX > this.world.width - this.EDGE_CUSHION) { ballSpawnX = this.world.width - this.EDGE_CUSHION; } this.ball.body.x = ballSpawnX; this.ball.body.y = this.game.height - 100; }, this); }, saveCanvas : function () { var link = this.game.canvas.toDataURL('image/png'); window.open(link, '_blank'); }, quitGame: function (pointer) { this.state.start('StartMenu'); } };
  14. Hello, Making a basket ball game and I want to increase the score when I detect that the ball has been sunk in the basket. I place a rectangular sensor body under the net so it doesn't stop the ball from passing through it but can detect collisions. I create the sensor in the create() function: //Setting up checker physics this.game.physics.p2.enable(this.checker, true); this.checker.body.data.shapes[0].sensor = true; this.checker.body.static = true; And I add this onBeginContact callback, also in the create() function: this.checker.body.onBeginContact.add(this.checkIfScored, this); And since I only want to increase the score if the ball is travelling downwards through the net: checkIfScored : function () { console.log(this.ball.body.velocity.y); if (this.ball.body.velocity.y > 0) { console.log("SCORED!"); this.score++; this.scoreText.setText('Score: ' + this.score); } } My problem is: onBeginContact is only firing on the ball's way up, but it doesn't fire again on the way down and I don't know why. You can see the image below of it's setup on the stage. I've been in and out of the forums, digging for an answer. Any help is very much appreciated!!
  15. Do you know if they have anything similar to onWorldBounds in the P2 physics system?
  16. I'm using the P2 physics engine. I've even tried to alter the "offset" property of the bodies themselves, but no luck. When the markers aren't parented to the net, it works fine. But as soon as I parent them (because I want to move them around together easily by just moving the parent), it creates an offset.
  17. Hola hola, So I am working on a 2D basketball game. I am using 2 small sprites (with circular physics bodies) on each side of the basket rim for collision detection with the ball. I parented the 2 sprites to the backboard so I could move them all together (as shown in the child sprite example). I turned on the debug draw for the physics bodies and found the 2 bodies were not in the same position as the sprites. //Load net sprite this.net = this.game.add.sprite(this.game.world.centerX, 200, 'net'); this.net.anchor.setTo(0.5); //Add hoop children markers this.leftMarker = this.net.addChild(this.game.make.sprite(-66, 60, 'marker')); this.leftMarker.anchor.setTo(0.5); this.rightMarker = this.net.addChild(this.game.make.sprite(66, 60, 'marker')); this.rightMarker.anchor.setTo(0.5); I parent them like so.. but my physics bodies don't act as if they are parented. They should be at the same position as the sprite, but instead they are (-66, 60) and (66, 60) from the top left corner (0, 0) instead of (-66, 60) and (66, 60) from the parents position (world center x, 200). You can see the attached image as an example. Is there something I am missing? Is this the way it's supposed to be? Can I somehow update the physics bodies to line up with the sprites easily?
  18. Hello, I am trying to make a small basketball free-throw game similar to the emoji basketball game on Facebook. I was following along with an example from Phaser (World Bounds Event) to try to respawn the ball when it hit the edge of the screen. I've tried to implement that below (see code) but the respawn function never fires. Does anyone know what I'm doing wrong? Envirolympics.TestGame = function (game) { //Variables this.score = null; this.scoreText = null; this.ball = null; this.net = null; this.leftMarker = null; this.rightMarker = null; this.launched = false; this.lastPointerPos = null; //Constants this.GRAVITY = 980; this.SHOOT_FORCE = 850; this.EDGE_CUSHION = 10; }; Envirolympics.TestGame.prototype = { create : function () { //Load net sprite this.net = this.game.add.sprite(this.game.world.centerX, 100, 'net'); this.net.anchor.setTo(0.5); //Add hoop children markers this.leftMarker = this.net.addChild(this.game.make.sprite(-50, 40, 'marker')); this.leftMarker.anchor.setTo(0.5); this.rightMarker = this.net.addChild(this.game.make.sprite(50, 40, 'marker')); this.rightMarker.anchor.setTo(0.5); //Load ball sprite this.ball = this.game.add.sprite(this.game.world.centerX, this.game.world.height - 100, 'ball'); this.ball.anchor.setTo(0.5); //Setting up the physics environment this.game.physics.startSystem(Phaser.Physics.ARCADE); this.game.physics.arcade.gravity.y = this.GRAVITY; //Setting up the ball physics this.game.physics.arcade.enable(this.ball); this.ball.body.bounce.setTo(0.35); this.ball.body.moves = false; this.ball.body.velocity.setTo(0, 0); this.ball.body.allowGravity = false; this.ball.body.collideWorldBounds = true; this.ball.body.onWorldBounds = new Phaser.Signal(); this.ball.body.onWorldBounds.add(this.respawn, this); //Enable input this.ball.inputEnabled = true; this.game.input.onDown.add(this.track, this); this.game.input.onUp.add(this.launch, this); //Initialize this.score = 0; this.scoreText = this.game.add.bitmapText(10, 10, 'pixel', this.score, 36); this.lastPointerPos = new Phaser.Point(0, 0); //For mobile Phaser.Canvas.setTouchAction(this.game.canvas, "auto"); this.game.input.touch.preventDefault = false; }, update : function () { //TO DO: //detect collision with net markers //determine if scored //respawn }, track : function () { //Update the last finger position this.lastPointerPos.x = this.input.x; this.lastPointerPos.y = this.input.y; //Set the ball physics to be still this.launched = true; this.ball.body.moves = false; this.ball.body.velocity.setTo(0, 0); this.ball.body.allowGravity = false; }, launch : function () { if (this.launched) { this.launched = false; this.ball.body.moves = true; this.ball.body.allowGravity = true; //Get the direction of finger swipe, normalize it, and apply a scalar to the velocity of the ball var direction = new Phaser.Point(this.input.x - this.lastPointerPos.x, this.input.y - this.lastPointerPos.y); direction.x = this.game.math.snapTo(direction.x, 5); direction.y = this.game.math.snapTo(direction.y, 5); Phaser.Point.normalize(direction, direction); if (direction.y < 0) { this.ball.body.velocity.setTo(direction.x * this.SHOOT_FORCE, direction.y * this.SHOOT_FORCE); } } }, respawn : function () { console.log("Does this function even run?"); //Set the ball physics to be still again this.ball.body.moves = false; this.ball.body.velocity.setTo(0, 0); this.ball.body.allowGravity = false; //Spawn the ball in a new, random location var ballSpawnX = this.game.rnd.integerInRange(this.ball.width + this.EDGE_CUSHION, this.world.width - this.EDGE_CUSHION); ballSpawnX = this.game.math.snapTo(ballSpawnX, 10); //Make sure the ball is in the boundary we set if (ballSpawnX < this.ball.width + this.EDGE_CUSHION) { ballSpawnX = this.ball.width + this.EDGE_CUSHION; } else if (ballSpawnX > this.world.width - this.EDGE_CUSHION) { ballSpawnX = this.world.width - this.EDGE_CUSHION; } this.ball.x = ballSpawnX; } };
  19. Hello, I've been following a Phaser spring example and I've been trying to remove the overlay sprite it draws on my circular physics body (I assume it adds this when I call body.setCircle(5)). Does anyone know how to remove this? I don't want to remove the body, I still want the physics, I just don't want the extra debug drawn sprite. Thanks