From 3488880956a771fea8e87606f09ec2a0539eb533 Mon Sep 17 00:00:00 2001 From: photonstorm Date: Sat, 1 Feb 2014 04:54:02 +0000 Subject: [PATCH] Sprite vs. Sprite Group Body Tests. --- README.md | 1 + examples/games/invaders.js | 19 +- examples/groups/group transform - rotate.js | 25 +- examples/wip/body group.js | 331 ++++++++++++++++++++ src/core/Group.js | 36 ++- src/gameobjects/Sprite.js | 65 +++- src/physics/arcade/Body.js | 73 +++-- 7 files changed, 497 insertions(+), 53 deletions(-) create mode 100644 examples/wip/body group.js diff --git a/README.md b/README.md index ba259d08..6098483e 100644 --- a/README.md +++ b/README.md @@ -189,6 +189,7 @@ Updates: * Phaser.Math.max added as the opposite of Math.min. * Phaser.Math.minProperty and maxProperty added. Like Math.min/max but can be given a property an an array or list of objects to inspect. * Added 'full' paramter to Body.reset, allowing you to control if motion or all data is reset or not. +* Exposed Group.pivot and Sprite.pivot to allow you to directly set the pivot points for rotation. Bug Fixes: diff --git a/examples/games/invaders.js b/examples/games/invaders.js index a772859c..8b001000 100644 --- a/examples/games/invaders.js +++ b/examples/games/invaders.js @@ -1,5 +1,5 @@ -var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update }); +var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { @@ -106,10 +106,10 @@ function createAliens () { aliens.y = 50; // All this does is basically start the invaders moving. Notice we're moving the Group they belong to, rather than the invaders directly. - // var tween = game.add.tween(aliens).to( { x: 200 }, 2000, Phaser.Easing.Linear.None, true, 0, 1000, true); + var tween = game.add.tween(aliens).to( { x: 200 }, 2000, Phaser.Easing.Linear.None, true, 0, 1000, true); // When the tween completes it calls descend, before looping again - // tween.onComplete.add(descend, this); + tween.onComplete.add(descend, this); } function setupInvader (invader) { @@ -155,8 +155,8 @@ function update() { } // Run collision - // game.physics.collide(bullets, aliens, collisionHandler, null, this); - // game.physics.collide(enemyBullets, player, enemyHitsPlayer, null, this); + game.physics.collide(bullets, aliens, collisionHandler, null, this); + game.physics.collide(enemyBullets, player, enemyHitsPlayer, null, this); } @@ -293,3 +293,12 @@ function restart () { stateText.visible = false; } + +function render() { + + for (var i = 0; i < aliens._container.children.length; i++) + { + game.debug.renderPhysicsBody(aliens._container.children[i].body); + } + +} \ No newline at end of file diff --git a/examples/groups/group transform - rotate.js b/examples/groups/group transform - rotate.js index 27053725..c307d247 100644 --- a/examples/groups/group transform - rotate.js +++ b/examples/groups/group transform - rotate.js @@ -2,12 +2,6 @@ var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); var robot; -var eye; -var body; -var leftArm; -var rightArm; -var leftLeg; -var rightLeg; function preload() { @@ -26,19 +20,24 @@ function create() { // Robot itself, you can subclass group class in a real game. robot = game.add.group(); + robot.x = 300; + robot.y = 200; + + robot.pivot.x = 300; + robot.pivot.y = 300; + // Robot components. - leftArm = robot.create(90, 175, 'arm-l'); - rightArm = robot.create(549, 175, 'arm-r'); - leftLeg = robot.create(270, 325, 'leg-l'); - rightLeg = robot.create(410, 325, 'leg-r'); - body = robot.create(219, 32, 'body'); - eye = robot.create(335, 173,'eye'); + robot.create(90, 175, 'arm-l'); + robot.create(549, 175, 'arm-r'); + robot.create(270, 325, 'leg-l'); + robot.create(410, 325, 'leg-r'); + robot.create(219, 32, 'body'); + robot.create(335, 173,'eye'); } function update() { - // Change parent's rotation to change all the childs. robot.rotation += 0.02; } diff --git a/examples/wip/body group.js b/examples/wip/body group.js new file mode 100644 index 00000000..ce70ab4a --- /dev/null +++ b/examples/wip/body group.js @@ -0,0 +1,331 @@ + +var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); + +function preload() { + + game.load.image('bullet', 'assets/games/invaders/bullet.png'); + game.load.image('enemyBullet', 'assets/games/invaders/enemy-bullet.png'); + game.load.spritesheet('invader', 'assets/games/invaders/invader32x32x4.png', 32, 32); + game.load.image('ship', 'assets/games/invaders/player.png'); + game.load.spritesheet('kaboom', 'assets/games/invaders/explode.png', 128, 128); + game.load.image('starfield', 'assets/games/invaders/starfield.png'); + game.load.image('background', 'assets/games/starstruck/background2.png'); + +} + +var player; +var aliens; +var bullets; +var bulletTime = 0; +var cursors; +var fireButton; +var explosions; +var starfield; +var score = 0; +var scoreString = ''; +var scoreText; +var lives; +var enemyBullet; +var firingTimer = 0; +var stateText; +var livingEnemies = []; + +var bob; + +function create() { + + $('#step').click(function(){ + console.log('---- STEP', game.stepCount, '-------------------------------'); + game.step(); + }); + + game.enableStep(); + + + // The scrolling starfield background + // starfield = game.add.tileSprite(0, 0, 800, 600, 'starfield'); + + // Our bullet group + // bullets = game.add.group(); + // bullets.createMultiple(30, 'bullet'); + // bullets.setAll('anchor.x', 0.5); + // bullets.setAll('anchor.y', 1); + // bullets.setAll('outOfBoundsKill', true); + + // The enemy's bullets + // enemyBullets = game.add.group(); + // enemyBullets.createMultiple(30, 'enemyBullet'); + // enemyBullets.setAll('anchor.x', 0.5); + // enemyBullets.setAll('anchor.y', 1); + // enemyBullets.setAll('outOfBoundsKill', true); + + // The hero! + // player = game.add.sprite(400, 500, 'ship'); + // player.anchor.setTo(0.5, 0.5); + + // The baddies! + aliens = game.add.group(); + + createAliens(); + + // The score + // scoreString = 'Score : '; + // scoreText = game.add.text(10, 10, scoreString + score, { fontSize: '34px', fill: '#fff' }); + + // Lives + // lives = game.add.group(); + // game.add.text(game.world.width - 100, 10, 'Lives : ', { fontSize: '34px', fill: '#fff' }); + + // Text + // stateText = game.add.text(game.world.centerX,game.world.centerY,'', { fontSize: '84px', fill: '#fff' }); + // stateText.anchor.setTo(0.5, 0.5); + // stateText.visible = false; + + // for (var i = 0; i < 3; i++) + // { + // var ship = lives.create(game.world.width - 100 + (30 * i), 60, 'ship'); + // ship.anchor.setTo(0.5, 0.5); + // ship.angle = 90; + // ship.alpha = 0.4; + // } + + // An explosion pool + // explosions = game.add.group(); + // explosions.createMultiple(30, 'kaboom'); + // explosions.forEach(setupInvader, this); + + // And some controls to play the game with + cursors = game.input.keyboard.createCursorKeys(); + // fireButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); +} + +function createAliens () { + +/* + for (var y = 0; y < 4; y++) + { + for (var x = 0; x < 10; x++) + { + var alien = aliens.create(x * 48, y * 50, 'invader'); + alien.anchor.setTo(0.5, 0.5); + alien.animations.add('fly', [ 0, 1, 2, 3 ], 20, true); + alien.play('fly'); + } + } +*/ + + bob = aliens.create(48, 50, 'invader'); + + bob.debug = true; + + aliens.x = 100; + aliens.y = 50; + + // All this does is basically start the invaders moving. Notice we're moving the Group they belong to, rather than the invaders directly. + // var tween = game.add.tween(aliens).to( { x: 200 }, 2000, Phaser.Easing.Linear.None, true, 0, 1000, true); + + // When the tween completes it calls descend, before looping again + // tween.onComplete.add(descend, this); +} + +function setupInvader (invader) { + + invader.anchor.x = 0.5; + invader.anchor.y = 0.5; + invader.animations.add('kaboom'); + +} + +function descend() { + +console.log('descend'); + aliens.y += 10; + +} + +function update() { + + aliens.x += 1; + // bob.body.velocity.x = 100; + + // Scroll the background + // starfield.tilePosition.y += 2; + + // Reset the player, then check for movement keys + +/* + player.body.velocity.setTo(0, 0); + + if (cursors.left.isDown) + { + player.body.velocity.x = -200; + } + else if (cursors.right.isDown) + { + player.body.velocity.x = 200; + } + + // Firing? + if (fireButton.isDown) + { + fireBullet(); + } + + if (game.time.now > firingTimer) + { + enemyFires(); + } + + // Run collision + game.physics.collide(bullets, aliens, collisionHandler, null, this); + game.physics.collide(enemyBullets, player, enemyHitsPlayer, null, this); +*/ + +} + +/* + +function collisionHandler (bullet, alien) { + + // When a bullet hits an alien we kill them both + bullet.kill(); + alien.kill(); + + // Increase the score + score += 20; + scoreText.content = scoreString + score; + + // And create an explosion :) + var explosion = explosions.getFirstDead(); + explosion.reset(alien.body.x, alien.body.y); + explosion.play('kaboom', 30, false, true); + + if (aliens.countLiving() == 0) + { + score += 1000; + scoreText.content = scoreString + score; + + enemyBullets.callAll('kill',this); + stateText.content = " You Won, \n Click to restart"; + stateText.visible = true; + + //the "click to restart" handler + game.input.onTap.addOnce(restart,this); + } + +} + +function enemyHitsPlayer (player,bullet) { + + bullet.kill(); + + live = lives.getFirstAlive(); + + if (live) + { + live.kill(); + } + + // And create an explosion :) + var explosion = explosions.getFirstDead(); + explosion.reset(player.body.x, player.body.y); + explosion.play('kaboom', 30, false, true); + + // When the player dies + if (lives.countLiving() < 1) + { + player.kill(); + enemyBullets.callAll('kill'); + + stateText.content=" GAME OVER \n Click to restart"; + stateText.visible = true; + + //the "click to restart" handler + game.input.onTap.addOnce(restart,this); + } + +} + +function enemyFires () { + + // Grab the first bullet we can from the pool + enemyBullet = enemyBullets.getFirstExists(false); + + livingEnemies.length=0; + + aliens.forEachAlive(function(alien){ + + // put every living enemy in an array + livingEnemies.push(alien); + }); + + + if (enemyBullet && livingEnemies.length > 0) + { + + var random=game.rnd.integerInRange(0,livingEnemies.length); + + // randomly select one of them + var shooter=livingEnemies[random]; + // And fire the bullet from this enemy + enemyBullet.reset(shooter.body.x, shooter.body.y); + + game.physics.moveToObject(enemyBullet,player,120); + firingTimer = game.time.now + 2000; + } + +} + +function fireBullet () { + + // To avoid them being allowed to fire too fast we set a time limit + if (game.time.now > bulletTime) + { + // Grab the first bullet we can from the pool + bullet = bullets.getFirstExists(false); + + if (bullet) + { + // And fire it + bullet.reset(player.x, player.y + 8); + bullet.body.velocity.y = -400; + bulletTime = game.time.now + 200; + } + } + +} + +function resetBullet (bullet) { + + // Called if the bullet goes out of the screen + bullet.kill(); + +} + +function restart () { + + // A new level starts + + //resets the life count + lives.callAll('revive'); + // And brings the aliens back from the dead :) + aliens.removeAll(); + createAliens(); + + //revives the player + player.revive(); + //hides the text + stateText.visible = false; + +} + +*/ + +function render() { + + for (var i = 0; i < aliens._container.children.length; i++) + { + game.debug.renderPhysicsBody(aliens._container.children[i].body); + } + +} \ No newline at end of file diff --git a/src/core/Group.js b/src/core/Group.js index 26e26526..84575a30 100644 --- a/src/core/Group.js +++ b/src/core/Group.js @@ -96,6 +96,11 @@ Phaser.Group = function (game, parent, name, useStage) { */ this.scale = this._container.scale; + /** + * @property {Phaser.Point} pivot - The pivot point of the Group container. + */ + this.pivot = this._container.pivot; + /** * The cursor is a simple way to iterate through the objects in a Group using the Group.next and Group.previous functions. * The cursor is set to the first child added to the Group and doesn't change unless you call next, previous or set it directly with Group.cursor. @@ -164,14 +169,14 @@ Phaser.Group.prototype = { { child.group = this; + this._container.addChild(child); + + child.updateTransform(); + if (child.events) { child.events.onAddedToGroup.dispatch(child, this); } - - this._container.addChild(child); - - child.updateTransform(); } if (this.cursor === null) @@ -209,14 +214,14 @@ Phaser.Group.prototype = { { child.group = this; + this._container.addChildAt(child, index); + + child.updateTransform(); + if (child.events) { child.events.onAddedToGroup.dispatch(child, this); } - - this._container.addChildAt(child, index); - - child.updateTransform(); } if (this.cursor === null) @@ -265,15 +270,15 @@ Phaser.Group.prototype = { child.visible = exists; child.alive = exists; + this._container.addChild(child); + + child.updateTransform(); + if (child.events) { child.events.onAddedToGroup.dispatch(child, this); } - this._container.addChild(child); - - child.updateTransform(); - if (this.cursor === null) { this.cursor = child; @@ -307,14 +312,15 @@ Phaser.Group.prototype = { child.visible = exists; child.alive = exists; + this._container.addChild(child); + + child.updateTransform(); + if (child.events) { child.events.onAddedToGroup.dispatch(child, this); } - this._container.addChild(child); - child.updateTransform(); - if (this.cursor === null) { this.cursor = child; diff --git a/src/gameobjects/Sprite.js b/src/gameobjects/Sprite.js index e7c5b72c..4471ef92 100644 --- a/src/gameobjects/Sprite.js +++ b/src/gameobjects/Sprite.js @@ -209,6 +209,7 @@ Phaser.Sprite = function (game, x, y, key, frame) { */ this._cache = { + fresh: true, dirty: false, // Transform cache @@ -376,6 +377,8 @@ Phaser.Sprite = function (game, x, y, key, frame) { */ this.debug = false; + // this.events.onAddedToGroup.add(this.initGroup, this); + this.updateCache(); this.updateBounds(); @@ -389,6 +392,18 @@ Phaser.Sprite = function (game, x, y, key, frame) { Phaser.Sprite.prototype = Object.create(PIXI.Sprite.prototype); Phaser.Sprite.prototype.constructor = Phaser.Sprite; + +/* +Phaser.Sprite.prototype.initGroup = function() { + + // this.world.setTo(this.parent.position.x + this.x, this.parent.position.y + this.y); + + // console.log('Sprite initGroup', this.world); + console.log('Sprite initGroup', this.group.x, this.group.y); + +} +*/ + /** * Automatically called by World.preUpdate. Handles cache updates, lifespan checks, animation updates and physics updates. * @@ -397,6 +412,34 @@ Phaser.Sprite.prototype.constructor = Phaser.Sprite; */ Phaser.Sprite.prototype.preUpdate = function() { + if (this._cache.fresh) + { + this.world.setTo(this.parent.position.x + this.x, this.parent.position.y + this.y); + this.worldTransform[2] = this.world.x; + this.worldTransform[5] = this.world.y; + console.log('Sprite initGroup', this.world); + // console.log('Sprite initGroup', this.group.x, this.group.y); + // console.log('Sprite initGroup', this.parent.position); + this._cache.fresh = false; + + if (this.body) + { + this.body.x = (this.world.x - (this.anchor.x * this.width)) + this.body.offset.x; + this.body.y = (this.world.y - (this.anchor.y * this.height)) + this.body.offset.y; + // this.body.preUpdate(); + this.body.preX = this.body.x; + this.body.preY = this.body.y; + } + + return; + } + + if (this.debug) + { + console.log('Sprite preUpdate', this.parent.worldTransform[2], this.parent.worldTransform[5], 'LT', this.parent.localTransform[2], this.parent.localTransform[5], 'xy', this.parent.position.x, this.parent.position.y); + console.log('Sprite preUpdate', this.x, this.y, 'world', this.world.x, this.world.y); + } + if (!this.exists || (this.group && !this.group.exists)) { this.renderOrderID = -1; @@ -455,6 +498,11 @@ Phaser.Sprite.prototype.updateCache = function() { this._cache.prevX = this.world.x; this._cache.prevY = this.world.y; + if (this.debug) + { + console.log('Sprite updateCache', this._cache.prevX, this._cache.prevY); + } + if (this.fixedToCamera) { this.x = this.game.camera.view.x + this.cameraOffset.x; @@ -677,10 +725,19 @@ Phaser.Sprite.prototype.postUpdate = function() { if (this.exists) { - // The sprite is positioned in this call, after taking into consideration motion updates and collision if (this.body) { this.body.postUpdate(); + + console.log('Sprite postUpdate wt', this.worldTransform[2], this.worldTransform[5], 'xy', this.x, this.y); + + // this._cache.x = this.x; + // this._cache.y = this.y; + + // this.position.x = this._cache.x; + // this.position.y = this._cache.y; + + // this.world.setTo(this.game.camera.x + this.worldTransform[2], this.game.camera.y + this.worldTransform[5]); } if (this.fixedToCamera) @@ -698,6 +755,12 @@ Phaser.Sprite.prototype.postUpdate = function() { this.position.x = this._cache.x; this.position.y = this._cache.y; + + if (this.debug) + { + console.log('Sprite postUpdate delta', this.deltaX, this.deltaY, 'prev', this._cache.prevX, this._cache.prevY); + } + } }; diff --git a/src/physics/arcade/Body.js b/src/physics/arcade/Body.js index 0330bac6..c51b38a7 100644 --- a/src/physics/arcade/Body.js +++ b/src/physics/arcade/Body.js @@ -477,13 +477,26 @@ Phaser.Physics.Arcade.Body.prototype = { */ preUpdate: function () { + // this.preX = this.x; + // this.preY = this.y; + // this.preRotation = this.sprite.angle; + + // If the GROUP is moving, then this doesn't work!!! + this.x = (this.sprite.x - (this.sprite.anchor.x * this.sprite.width)) + this.offset.x; + this.y = (this.sprite.y - (this.sprite.anchor.y * this.sprite.height)) + this.offset.y; + + // If the SPRITE is moving, but in a Group, this doesn't work!!! + // this.x = (this.sprite.world.x - (this.sprite.anchor.x * this.sprite.width)) + this.offset.x; + // this.y = (this.sprite.world.y - (this.sprite.anchor.y * this.sprite.height)) + this.offset.y; + + // I think I need to record both the world AND local X/Y values and decide if they should update? + + this.rotation = this.preRotation; + this.preX = this.x; this.preY = this.y; this.preRotation = this.sprite.angle; - this.x = (this.sprite.world.x - (this.sprite.anchor.x * this.sprite.width)) + this.offset.x; - this.y = (this.sprite.world.y - (this.sprite.anchor.y * this.sprite.height)) + this.offset.y; - this.rotation = this.preRotation; if (this.sprite.scale.x !== this._sx || this.sprite.scale.y !== this._sy) { @@ -492,9 +505,15 @@ Phaser.Physics.Arcade.Body.prototype = { if (this.sprite.debug) { - console.log('Body preUpdate x:', this.x, 'y:', this.y, 'left:', this.left, 'right:', this.right, 'WAS', this.preX, this.preY); - console.log('Body preUpdate blocked:', this.blocked, this.blockFlags); - console.log('Body preUpdate velocity:', this.velocity.x, this.velocity.y); + console.log('Body preUpdate x:', this.x, 'y:', this.y); + console.log('Body preUpdate Sprite x:', this.sprite.x, 'y:', this.sprite.y); + console.log('Body preUpdate Sprite world:', this.sprite.world.x, 'y:', this.sprite.world.y); + // console.log('Body preUpdate Sprite position:', this.sprite.position.x, 'y:', this.sprite.position.y); + // console.log('Body preUpdate Sprite localTransform:', this.sprite.localTransform[2], 'y:', this.sprite.localTransform[5]); + // console.log('Body preUpdate Sprite worldTransform:', this.sprite.worldTransform[2], 'y:', this.sprite.worldTransform[5]); + // console.log('Body preUpdate x:', this.x, 'y:', this.y, 'left:', this.left, 'right:', this.right, 'WAS', this.preX, this.preY); + // console.log('Body preUpdate blocked:', this.blocked, this.blockFlags); + // console.log('Body preUpdate velocity:', this.velocity.x, this.velocity.y); // console.log('Body preUpdate rotation:', this.rotation, this.preRotation); } @@ -1305,24 +1324,40 @@ if (this.sprite.debug) this.facing = Phaser.DOWN; } -if (this.sprite.debug) -{ - // console.log('Body postUpdate x:', this.x, 'y:', this.y, 'left:', this.left, 'right:', this.right, 'WAS', this.preX, this.preY); - // console.log('Body postUpdate blocked:', this.blocked, this.blockFlags); - // console.log('Body postUpdate velocity:', this.velocity.x, this.velocity.y); - // console.log('Body postUpdate Sprite:', this.sprite.x, this.sprite.y, 'cached', this.sprite._cache.x, this.sprite._cache.y); - console.log('Body postUpdate Rotation:', this.rotation); -} - - if (this.deltaX() !== 0 || this.deltaY() !== 0) + if (this.sprite.debug) { - this.sprite.worldTransform[2] = this.sprite.x = (this.x + (this.sprite.anchor.x * this.sprite.width) - this.offset.x); - this.sprite.worldTransform[5] = this.sprite.y = (this.y + (this.sprite.anchor.y * this.sprite.height) - this.offset.y); + // Temp. Debugging Stuff + // console.log('Body postUpdate x:', this.x, 'y:', this.y, 'left:', this.left, 'right:', this.right, 'WAS', this.preX, this.preY); + // console.log('Body postUpdate blocked:', this.blocked, this.blockFlags); + // console.log('Body postUpdate velocity:', this.velocity.x, this.velocity.y); + // console.log('Body postUpdate delta:', this.deltaX(), this.deltaY()); + // console.log('Body postUpdate Sprite:', this.sprite.x, this.sprite.y, 'cached', this.sprite._cache.x, this.sprite._cache.y); + // console.log('Body postUpdate Rotation:', this.rotation); + + // console.log('Body postUpdate Sprite x:', this.sprite.x, 'y:', this.sprite.y); + // console.log('Body postUpdate Sprite world:', this.sprite.world.x, 'y:', this.sprite.world.y); + // console.log('Body postUpdate Sprite position:', this.sprite.position.x, 'y:', this.sprite.position.y); + // console.log('Body postUpdate Sprite localTransform:', this.sprite.localTransform[2], 'y:', this.sprite.localTransform[5]); + // console.log('Body postUpdate Sprite worldTransform:', this.sprite.worldTransform[2], 'y:', this.sprite.worldTransform[5]); + + } + + if (this.preX !== this.x || this.preY !== this.y) + { + console.log('BoDY APPLIED', this.x, this.y, 'pre', this.preX, this.preY); + // this.sprite.x = (this.x + (this.sprite.anchor.x * this.sprite.width) - this.offset.x); + // this.sprite.y = (this.y + (this.sprite.anchor.y * this.sprite.height) - this.offset.y); + + this.sprite.x = (this.x + (this.sprite.anchor.x * this.sprite.width) - this.offset.x); + this.sprite.y = (this.y + (this.sprite.anchor.y * this.sprite.height) - this.offset.y); + + // this.sprite.position.x = this.sprite.x = this.x + (this.sprite.anchor.x * this.sprite.width) - this.offset.x; + // this.sprite.position.y = this.sprite.y = this.y + (this.sprite.anchor.y * this.sprite.height) - this.offset.y; } if (this.allowRotation && this.deltaZ() !== 0) { - // this.sprite.angle += this.deltaZ(); + this.sprite.angle += this.deltaZ(); } if (this.sprite.scale.x !== this._sx || this.sprite.scale.y !== this._sy)