diff --git a/Docs/phaser_scrollfactor.png b/Docs/phaser_scrollfactor.png new file mode 100644 index 00000000..0e596872 Binary files /dev/null and b/Docs/phaser_scrollfactor.png differ diff --git a/Phaser/cameras/Camera.ts b/Phaser/cameras/Camera.ts index 0a839ffc..40de72f8 100644 --- a/Phaser/cameras/Camera.ts +++ b/Phaser/cameras/Camera.ts @@ -523,7 +523,7 @@ module Phaser { if (this.bounds) { - this._game.stage.context.fillText('Bounds: ' + this.bounds.width + ' x ' + this.bounds.height, x, y + 56); + this._game.stage.context.fillText('Bounds: ' + this.bounds.width + ' x ' + this.bounds.height, x, y + 42); } } diff --git a/Phaser/gameobjects/Sprite.ts b/Phaser/gameobjects/Sprite.ts index afd1d245..baabfbce 100644 --- a/Phaser/gameobjects/Sprite.ts +++ b/Phaser/gameobjects/Sprite.ts @@ -48,7 +48,7 @@ module Phaser { this.height = this.frameBounds.height; // Transform related (if we add any more then move to a component) - this.origin = new Phaser.Vec2(this.width / 2, this.height / 2); + this.origin = new Phaser.Vec2(0, 0); this.scale = new Phaser.Vec2(1, 1); this.skew = new Phaser.Vec2(0, 0); diff --git a/Phaser/renderers/CanvasRenderer.ts b/Phaser/renderers/CanvasRenderer.ts index 6825d27d..86285707 100644 --- a/Phaser/renderers/CanvasRenderer.ts +++ b/Phaser/renderers/CanvasRenderer.ts @@ -78,6 +78,10 @@ module Phaser { this._fy = sprite.scale.y; this._sin = 0; this._cos = 1; + this._dx = (camera.scaledX * sprite.scrollFactor.x) + sprite.frameBounds.x - (camera.worldView.x * sprite.scrollFactor.x); + this._dy = (camera.scaledY * sprite.scrollFactor.y) + sprite.frameBounds.y - (camera.worldView.y * sprite.scrollFactor.y); + this._dw = sprite.frameBounds.width; + this._dh = sprite.frameBounds.height; // Alpha if (sprite.texture.alpha !== 1) @@ -98,11 +102,6 @@ module Phaser { this._fy = -sprite.scale.y; } - this._dx = (camera.scaledX * sprite.scrollFactor.x) + sprite.frameBounds.x - (camera.worldView.x * sprite.scrollFactor.x); - this._dy = (camera.scaledY * sprite.scrollFactor.y) + sprite.frameBounds.y - (camera.worldView.y * sprite.scrollFactor.y); - this._dw = sprite.frameBounds.width; - this._dh = sprite.frameBounds.height; - if (sprite.animations.currentFrame !== null) { this._sx = sprite.animations.currentFrame.x; @@ -115,15 +114,6 @@ module Phaser { } } - // Apply camera difference - looks like this is already applied? - /* - if (sprite.scrollFactor.x !== 1 || sprite.scrollFactor.y !== 1) - { - //this._dx -= (camera.worldView.x * this.scrollFactor.x); - //this._dy -= (camera.worldView.y * this.scrollFactor.y); - } - */ - // Rotation and Flipped if (sprite.modified) { @@ -149,10 +139,11 @@ module Phaser { } else { - this._dx -= sprite.origin.x; - this._dy -= sprite.origin.y; - //this._dw = sprite.frameBounds.width * sprite.scale.x; - //this._dh = sprite.frameBounds.height * sprite.scale.y; + if (!sprite.origin.equals(0)) + { + this._dx -= sprite.origin.x; + this._dy -= sprite.origin.y; + } } this._sx = Math.round(this._sx); diff --git a/README.md b/README.md index 673d293f..d8e6e948 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,10 @@ TODO: * Removed ignoreGlobalUpdate because it checks exists etc in the Group update, so remove those checks from Sprite.update (same for render) * Investigate why tweens don't restart after the game pauses * Fix bug in Tween yoyo + loop combo +* Copy the setTransform from Sprite to Camera +* Move Camera.scroll.x to just Camera.x/y + + V1.0.0 @@ -41,7 +45,6 @@ V1.0.0 * Refactored QuadTree so it no longer creates any temporary variables in any methods. * The Sprite Renderer now uses a single setTransform for scale, rotation and translation that respects the Sprite.origin value in all cases. * Sprite.modified is set to true if scale, rotation, skew or flip have been used. -* By default the Sprite.origin is set to the center of the sprite, but can be offset to anywhere. * Added Tween.loop property so they can now re-run themselves indefinitely. * Added Tween.yoyo property so they can reverse themselves after completing. diff --git a/Tests/Tests.csproj b/Tests/Tests.csproj index 0aad50da..eb1d5834 100644 --- a/Tests/Tests.csproj +++ b/Tests/Tests.csproj @@ -53,6 +53,18 @@ false + + + basic camera 1.ts + + + + scrollfactor 1.ts + + + + scrollfactor 2.ts + tween loop 1.ts diff --git a/Tests/assets/pics/WARZONE.png b/Tests/assets/pics/WARZONE.png new file mode 100644 index 00000000..9bd612b0 Binary files /dev/null and b/Tests/assets/pics/WARZONE.png differ diff --git a/Tests/assets/pics/alex-bisleys_horsy_5.png b/Tests/assets/pics/alex-bisleys_horsy_5.png new file mode 100644 index 00000000..28249826 Binary files /dev/null and b/Tests/assets/pics/alex-bisleys_horsy_5.png differ diff --git a/Tests/assets/pics/coma-zero_gravity.png b/Tests/assets/pics/coma-zero_gravity.png new file mode 100644 index 00000000..430f449c Binary files /dev/null and b/Tests/assets/pics/coma-zero_gravity.png differ diff --git a/Tests/assets/pics/cougar-face_of_nature.png b/Tests/assets/pics/cougar-face_of_nature.png new file mode 100644 index 00000000..d2cc479c Binary files /dev/null and b/Tests/assets/pics/cougar-face_of_nature.png differ diff --git a/Tests/assets/pics/destop-rewarding.png b/Tests/assets/pics/destop-rewarding.png new file mode 100644 index 00000000..0c4e30bb Binary files /dev/null and b/Tests/assets/pics/destop-rewarding.png differ diff --git a/Tests/assets/pics/destop-unknown.png b/Tests/assets/pics/destop-unknown.png new file mode 100644 index 00000000..41604473 Binary files /dev/null and b/Tests/assets/pics/destop-unknown.png differ diff --git a/Tests/assets/pics/devilstar_demo_download_disk.png b/Tests/assets/pics/devilstar_demo_download_disk.png index 8865754a..f93eab14 100644 Binary files a/Tests/assets/pics/devilstar_demo_download_disk.png and b/Tests/assets/pics/devilstar_demo_download_disk.png differ diff --git a/Tests/assets/pics/hotshot-chaos_in_tokyo.png b/Tests/assets/pics/hotshot-chaos_in_tokyo.png new file mode 100644 index 00000000..aa48f608 Binary files /dev/null and b/Tests/assets/pics/hotshot-chaos_in_tokyo.png differ diff --git a/Tests/assets/pics/kris-jovo.jpg b/Tests/assets/pics/kris-jovo.jpg new file mode 100644 index 00000000..5e8880eb Binary files /dev/null and b/Tests/assets/pics/kris-jovo.jpg differ diff --git a/Tests/assets/pics/louie-inga.png b/Tests/assets/pics/louie-inga.png new file mode 100644 index 00000000..330cc616 Binary files /dev/null and b/Tests/assets/pics/louie-inga.png differ diff --git a/Tests/assets/pics/thorn_lazur.png b/Tests/assets/pics/thorn_lazur.png new file mode 100644 index 00000000..24f984e0 Binary files /dev/null and b/Tests/assets/pics/thorn_lazur.png differ diff --git a/Tests/assets/pics/trsipic1_lazur.JPG b/Tests/assets/pics/trsipic1_lazur.JPG new file mode 100644 index 00000000..ad4c8bc7 Binary files /dev/null and b/Tests/assets/pics/trsipic1_lazur.JPG differ diff --git a/Tests/assets/pics/tvzor_lazur.png b/Tests/assets/pics/tvzor_lazur.png new file mode 100644 index 00000000..7de25a0d Binary files /dev/null and b/Tests/assets/pics/tvzor_lazur.png differ diff --git a/Tests/assets/pics/unknown-the_starwars_pic.png b/Tests/assets/pics/unknown-the_starwars_pic.png new file mode 100644 index 00000000..d5711879 Binary files /dev/null and b/Tests/assets/pics/unknown-the_starwars_pic.png differ diff --git a/Tests/assets/sprites/sonic_havok_sanity.png b/Tests/assets/sprites/sonic_havok_sanity.png new file mode 100644 index 00000000..2b426715 Binary files /dev/null and b/Tests/assets/sprites/sonic_havok_sanity.png differ diff --git a/Tests/cameras/basic camera 1.js b/Tests/cameras/basic camera 1.js new file mode 100644 index 00000000..154d8c69 --- /dev/null +++ b/Tests/cameras/basic camera 1.js @@ -0,0 +1,31 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); + function init() { + game.world.setSize(1920, 1200, true); + game.loader.addImageFile('backdrop', 'assets/pics/remember-me.jpg'); + game.loader.addImageFile('melon', 'assets/sprites/melon.png'); + game.loader.load(); + } + function create() { + game.add.sprite(0, 0, 'backdrop'); + for(var i = 0; i < 100; i++) { + game.add.sprite(game.world.randomX, game.world.randomY, 'melon'); + } + } + function update() { + if(game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { + game.camera.scroll.x -= 4; + } else if(game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { + game.camera.scroll.x += 4; + } + if(game.input.keyboard.isDown(Phaser.Keyboard.UP)) { + game.camera.scroll.y -= 4; + } else if(game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) { + game.camera.scroll.y += 4; + } + } + function render() { + game.camera.renderDebugInfo(32, 32); + } +})(); diff --git a/Tests/cameras/basic camera 1.ts b/Tests/cameras/basic camera 1.ts new file mode 100644 index 00000000..2039e409 --- /dev/null +++ b/Tests/cameras/basic camera 1.ts @@ -0,0 +1,57 @@ +/// + +(function () { + + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); + + function init() { + + game.world.setSize(1920, 1200, true); + + game.loader.addImageFile('backdrop', 'assets/pics/remember-me.jpg'); + game.loader.addImageFile('melon', 'assets/sprites/melon.png'); + + game.loader.load(); + + } + + function create() { + + game.add.sprite(0, 0, 'backdrop'); + + for (var i = 0; i < 100; i++) + { + game.add.sprite(game.world.randomX, game.world.randomY, 'melon'); + } + + } + + function update() { + + if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) + { + game.camera.scroll.x -= 4; + } + else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) + { + game.camera.scroll.x += 4; + } + + if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) + { + game.camera.scroll.y -= 4; + } + else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) + { + game.camera.scroll.y += 4; + } + + } + + function render() { + + game.camera.renderDebugInfo(32, 32); + + } + +})(); diff --git a/Tests/cameras/scrollfactor 1.js b/Tests/cameras/scrollfactor 1.js new file mode 100644 index 00000000..e334cf27 --- /dev/null +++ b/Tests/cameras/scrollfactor 1.js @@ -0,0 +1,32 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); + function init() { + game.world.setSize(1920, 1200, true); + game.loader.addImageFile('backdrop', 'assets/pics/remember-me.jpg'); + game.loader.addImageFile('ball', 'assets/sprites/shinyball.png'); + game.loader.load(); + } + function create() { + game.add.sprite(0, 0, 'backdrop'); + for(var i = 0; i < 400; i++) { + var tempBall = game.add.sprite(game.world.randomX * 2, game.world.randomY * 2, 'ball'); + tempBall.scrollFactor.setTo(2, 2); + } + } + function update() { + if(game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { + game.camera.scroll.x -= 4; + } else if(game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { + game.camera.scroll.x += 4; + } + if(game.input.keyboard.isDown(Phaser.Keyboard.UP)) { + game.camera.scroll.y -= 4; + } else if(game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) { + game.camera.scroll.y += 4; + } + } + function render() { + game.camera.renderDebugInfo(32, 32); + } +})(); diff --git a/Tests/cameras/scrollfactor 1.ts b/Tests/cameras/scrollfactor 1.ts new file mode 100644 index 00000000..5b41cfd1 --- /dev/null +++ b/Tests/cameras/scrollfactor 1.ts @@ -0,0 +1,58 @@ +/// + +(function () { + + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); + + function init() { + + game.world.setSize(1920, 1200, true); + + game.loader.addImageFile('backdrop', 'assets/pics/remember-me.jpg'); + game.loader.addImageFile('ball', 'assets/sprites/shinyball.png'); + + game.loader.load(); + + } + + function create() { + + game.add.sprite(0, 0, 'backdrop'); + + for (var i = 0; i < 400; i++) + { + var tempBall:Phaser.Sprite = game.add.sprite(game.world.randomX * 2, game.world.randomY * 2, 'ball'); + tempBall.scrollFactor.setTo(2, 2); + } + + } + + function update() { + + if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) + { + game.camera.scroll.x -= 4; + } + else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) + { + game.camera.scroll.x += 4; + } + + if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) + { + game.camera.scroll.y -= 4; + } + else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) + { + game.camera.scroll.y += 4; + } + + } + + function render() { + + game.camera.renderDebugInfo(32, 32); + + } + +})(); diff --git a/Tests/cameras/scrollfactor 2.js b/Tests/cameras/scrollfactor 2.js new file mode 100644 index 00000000..d6af5870 --- /dev/null +++ b/Tests/cameras/scrollfactor 2.js @@ -0,0 +1,31 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); + function init() { + game.world.setSize(1600, 800, true); + game.loader.addImageFile('disk', 'assets/pics/devilstar_demo_download_disk.png'); + game.loader.load(); + } + function create() { + for(var i = 0; i < 10; i++) { + var temp = game.add.sprite(600 + (10 * i), 200 + (10 * i), 'disk'); + temp.scrollFactor.setTo(i / 2, i / 2); + } + //game.camera.focusOnXY(800, 200); + } + function update() { + if(game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { + game.camera.scroll.x -= 4; + } else if(game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { + game.camera.scroll.x += 4; + } + if(game.input.keyboard.isDown(Phaser.Keyboard.UP)) { + game.camera.scroll.y -= 4; + } else if(game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) { + game.camera.scroll.y += 4; + } + } + function render() { + game.camera.renderDebugInfo(32, 32); + } +})(); diff --git a/Tests/cameras/scrollfactor 2.ts b/Tests/cameras/scrollfactor 2.ts new file mode 100644 index 00000000..d8fcbde6 --- /dev/null +++ b/Tests/cameras/scrollfactor 2.ts @@ -0,0 +1,55 @@ +/// + +(function () { + + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); + + function init() { + + game.world.setSize(1600, 800, true); + + game.loader.addImageFile('disk', 'assets/pics/devilstar_demo_download_disk.png'); + + game.loader.load(); + + } + + function create() { + + for (var i = 0; i < 10; i++) + { + var temp:Phaser.Sprite = game.add.sprite(600 + (10 * i), 200 + (10 * i), 'disk'); + temp.scrollFactor.setTo(i / 2, i / 2); + } + + } + + function update() { + + if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) + { + game.camera.scroll.x -= 4; + } + else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) + { + game.camera.scroll.x += 4; + } + + if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) + { + game.camera.scroll.y -= 4; + } + else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) + { + game.camera.scroll.y += 4; + } + + } + + function render() { + + game.camera.renderDebugInfo(32, 32); + + } + +})(); diff --git a/Tests/phaser.js b/Tests/phaser.js index 962d81df..4e614f9e 100644 --- a/Tests/phaser.js +++ b/Tests/phaser.js @@ -3897,7 +3897,8 @@ var Phaser; this.width = this.frameBounds.width; this.height = this.frameBounds.height; // Transform related (if we add any more then move to a component) - this.origin = new Phaser.Vec2(this.width / 2, this.height / 2); + //this.origin = new Phaser.Vec2(this.width / 2, this.height / 2); + this.origin = new Phaser.Vec2(0, 0); this.scale = new Phaser.Vec2(1, 1); this.skew = new Phaser.Vec2(0, 0); } @@ -4536,7 +4537,7 @@ var Phaser; this._game.stage.context.fillText('X: ' + this._stageX + ' Y: ' + this._stageY + ' Rotation: ' + this._rotation, x, y + 14); this._game.stage.context.fillText('World X: ' + this.scroll.x.toFixed(1) + ' World Y: ' + this.scroll.y.toFixed(1), x, y + 28); if(this.bounds) { - this._game.stage.context.fillText('Bounds: ' + this.bounds.width + ' x ' + this.bounds.height, x, y + 56); + this._game.stage.context.fillText('Bounds: ' + this.bounds.width + ' x ' + this.bounds.height, x, y + 42); } }; Camera.prototype.destroy = /** @@ -10481,6 +10482,10 @@ var Phaser; this._fy = sprite.scale.y; this._sin = 0; this._cos = 1; + this._dx = (camera.scaledX * sprite.scrollFactor.x) + sprite.frameBounds.x - (camera.worldView.x * sprite.scrollFactor.x); + this._dy = (camera.scaledY * sprite.scrollFactor.y) + sprite.frameBounds.y - (camera.worldView.y * sprite.scrollFactor.y); + this._dw = sprite.frameBounds.width; + this._dh = sprite.frameBounds.height; // Alpha if(sprite.texture.alpha !== 1) { this._ga = sprite.texture.context.globalAlpha; @@ -10494,10 +10499,6 @@ var Phaser; if(sprite.texture.flippedY) { this._fy = -sprite.scale.y; } - this._dx = (camera.scaledX * sprite.scrollFactor.x) + sprite.frameBounds.x - (camera.worldView.x * sprite.scrollFactor.x); - this._dy = (camera.scaledY * sprite.scrollFactor.y) + sprite.frameBounds.y - (camera.worldView.y * sprite.scrollFactor.y); - this._dw = sprite.frameBounds.width; - this._dh = sprite.frameBounds.height; if(sprite.animations.currentFrame !== null) { this._sx = sprite.animations.currentFrame.x; this._sy = sprite.animations.currentFrame.y; @@ -10532,11 +10533,11 @@ var Phaser; this._dx = -sprite.origin.x; this._dy = -sprite.origin.y; } else { - this._dx -= sprite.origin.x; - this._dy -= sprite.origin.y; - //this._dw = sprite.frameBounds.width * sprite.scale.x; - //this._dh = sprite.frameBounds.height * sprite.scale.y; - } + if(!sprite.origin.equals(0)) { + this._dx -= sprite.origin.x; + this._dy -= sprite.origin.y; + } + } this._sx = Math.round(this._sx); this._sy = Math.round(this._sy); this._sw = Math.round(this._sw); diff --git a/Tests/sprites/scale sprite 4.js b/Tests/sprites/scale sprite 4.js index 73f09f14..aadb6a84 100644 --- a/Tests/sprites/scale sprite 4.js +++ b/Tests/sprites/scale sprite 4.js @@ -12,28 +12,11 @@ function create() { // Here we'll assign the new sprite to the local bunny variable bunny = game.add.sprite(0, 0, 'bunny'); - // This time let's scale the sprite by using two tweens - // The first tween will scale the sprite up, the second will scale it down again - // Create our 2 tweens - tweenUp = game.add.tween(bunny.scale); - tweenUp.onComplete.add(scaleDown, this); - tweenDown = game.add.tween(bunny.scale); - tweenDown.onComplete.add(scaleUp, this); - // Start it going - scaleUp(); - } - function scaleUp() { - tweenUp.to({ + bunny.scale.setTo(0.5, 0.5); + // This time let's scale the sprite by a looped tween + game.add.tween(bunny.scale).to({ x: 2, y: 2 - }, 2000, Phaser.Easing.Elastic.Out); - tweenUp.start(); - } - function scaleDown() { - tweenDown.to({ - x: 0.5, - y: 0.5 - }, 2000, Phaser.Easing.Elastic.Out); - tweenDown.start(); + }, 2000, Phaser.Easing.Elastic.Out, true, 0, true, true); } })(); diff --git a/Tests/sprites/scale sprite 4.ts b/Tests/sprites/scale sprite 4.ts index 6fc986ce..cd048bab 100644 --- a/Tests/sprites/scale sprite 4.ts +++ b/Tests/sprites/scale sprite 4.ts @@ -21,32 +21,10 @@ // Here we'll assign the new sprite to the local bunny variable bunny = game.add.sprite(0, 0, 'bunny'); - // This time let's scale the sprite by using two tweens - // The first tween will scale the sprite up, the second will scale it down again + bunny.scale.setTo(0.5, 0.5); - // Create our 2 tweens - tweenUp = game.add.tween(bunny.scale); - tweenUp.onComplete.add(scaleDown, this); - - tweenDown = game.add.tween(bunny.scale); - tweenDown.onComplete.add(scaleUp, this); - - // Start it going - scaleUp(); - - } - - function scaleUp() { - - tweenUp.to({ x: 2, y: 2 }, 2000, Phaser.Easing.Elastic.Out); - tweenUp.start(); - - } - - function scaleDown() { - - tweenDown.to({ x: 0.5, y: 0.5 }, 2000, Phaser.Easing.Elastic.Out); - tweenDown.start(); + // This time let's scale the sprite by a looped tween + game.add.tween(bunny.scale).to({ x: 2, y: 2 }, 2000, Phaser.Easing.Elastic.Out, true, 0, true, true); } diff --git a/Tests/sprites/sprite origin 1.js b/Tests/sprites/sprite origin 1.js index fb3534cf..208f2489 100644 --- a/Tests/sprites/sprite origin 1.js +++ b/Tests/sprites/sprite origin 1.js @@ -7,23 +7,14 @@ game.loader.load(); } var fuji; - var tween; function create() { game.stage.backgroundColor = 'rgb(0,0,100)'; // Here we'll assign the new sprite to the local fuji variable - fuji = game.add.sprite(200, 200, 'fuji'); + fuji = game.add.sprite(game.stage.centerX, game.stage.centerY, 'fuji'); // The sprite is 320 x 200 pixels in size // If we don't set an origin then the sprite will rotate around 0,0 - the top left corner - tween = game.add.tween(fuji); - // Start it going - rotate(); - } - function rotate() { - tween.clear(); - tween.to({ + game.add.tween(fuji).to({ rotation: 360 - }, 2000); - tween.onComplete.add(rotate, this); - tween.start(); + }, 2000, Phaser.Easing.Linear.None, true, 0, true); } })(); diff --git a/Tests/sprites/sprite origin 1.ts b/Tests/sprites/sprite origin 1.ts index e1f53c14..145adc03 100644 --- a/Tests/sprites/sprite origin 1.ts +++ b/Tests/sprites/sprite origin 1.ts @@ -13,31 +13,17 @@ } var fuji: Phaser.Sprite; - var tween: Phaser.Tween; function create() { game.stage.backgroundColor = 'rgb(0,0,100)'; // Here we'll assign the new sprite to the local fuji variable - fuji = game.add.sprite(200, 200, 'fuji'); + fuji = game.add.sprite(game.stage.centerX, game.stage.centerY, 'fuji'); // The sprite is 320 x 200 pixels in size // If we don't set an origin then the sprite will rotate around 0,0 - the top left corner - - tween = game.add.tween(fuji); - - // Start it going - rotate(); - - } - - function rotate() { - - tween.clear(); - tween.to({ rotation: 360 }, 2000); - tween.onComplete.add(rotate, this); - tween.start(); + game.add.tween(fuji).to({ rotation: 360 }, 2000, Phaser.Easing.Linear.None, true, 0, true); } diff --git a/Tests/sprites/sprite origin 2.js b/Tests/sprites/sprite origin 2.js index 9d1ac4c2..a1da5480 100644 --- a/Tests/sprites/sprite origin 2.js +++ b/Tests/sprites/sprite origin 2.js @@ -7,25 +7,16 @@ game.loader.load(); } var fuji; - var tween; function create() { game.stage.backgroundColor = 'rgb(0,0,100)'; // Here we'll assign the new sprite to the local fuji variable - fuji = game.add.sprite(200, 200, 'fuji'); + fuji = game.add.sprite(game.stage.centerX, game.stage.centerY, 'fuji'); // The sprite is 320 x 200 pixels in size // Here we set the origin to the center of the sprite (half of its width and height, so 160x100) // This will cause it to rotate on its center fuji.origin.setTo(160, 100); - tween = game.add.tween(fuji); - // Start it going - rotate(); - } - function rotate() { - tween.clear(); - tween.to({ + game.add.tween(fuji).to({ rotation: 360 - }, 2000); - tween.onComplete.add(rotate, this); - tween.start(); + }, 2000, Phaser.Easing.Linear.None, true, 0, true); } })(); diff --git a/Tests/sprites/sprite origin 2.ts b/Tests/sprites/sprite origin 2.ts index b4f469dc..237c0f9a 100644 --- a/Tests/sprites/sprite origin 2.ts +++ b/Tests/sprites/sprite origin 2.ts @@ -13,33 +13,20 @@ } var fuji: Phaser.Sprite; - var tween: Phaser.Tween; function create() { game.stage.backgroundColor = 'rgb(0,0,100)'; // Here we'll assign the new sprite to the local fuji variable - fuji = game.add.sprite(200, 200, 'fuji'); + fuji = game.add.sprite(game.stage.centerX, game.stage.centerY, 'fuji'); // The sprite is 320 x 200 pixels in size // Here we set the origin to the center of the sprite (half of its width and height, so 160x100) // This will cause it to rotate on its center fuji.origin.setTo(160, 100); - tween = game.add.tween(fuji); - - // Start it going - rotate(); - - } - - function rotate() { - - tween.clear(); - tween.to({ rotation: 360 }, 2000); - tween.onComplete.add(rotate, this); - tween.start(); + game.add.tween(fuji).to({ rotation: 360 }, 2000, Phaser.Easing.Linear.None, true, 0, true); } diff --git a/Tests/sprites/sprite origin 3.js b/Tests/sprites/sprite origin 3.js index 8eeb9a24..9f91c600 100644 --- a/Tests/sprites/sprite origin 3.js +++ b/Tests/sprites/sprite origin 3.js @@ -11,20 +11,12 @@ function create() { game.stage.backgroundColor = 'rgb(0,0,100)'; // Here we'll assign the new sprite to the local fuji variable - fuji = game.add.sprite(300, 300, 'fuji'); + fuji = game.add.sprite(game.stage.centerX, game.stage.centerY, 'fuji'); // The sprite is 320 x 200 pixels in size // Here we set the origin to be the bottom-right of the sprite fuji.origin.setTo(320, 200); - tween = game.add.tween(fuji); - // Start it going - rotate(); - } - function rotate() { - tween.clear(); - tween.to({ + game.add.tween(fuji).to({ rotation: 360 - }, 2000); - tween.onComplete.add(rotate, this); - tween.start(); + }, 2000, Phaser.Easing.Linear.None, true, 0, true); } })(); diff --git a/Tests/sprites/sprite origin 3.ts b/Tests/sprites/sprite origin 3.ts index da3d79bf..fff4fbf8 100644 --- a/Tests/sprites/sprite origin 3.ts +++ b/Tests/sprites/sprite origin 3.ts @@ -20,25 +20,13 @@ game.stage.backgroundColor = 'rgb(0,0,100)'; // Here we'll assign the new sprite to the local fuji variable - fuji = game.add.sprite(300, 300, 'fuji'); + fuji = game.add.sprite(game.stage.centerX, game.stage.centerY, 'fuji'); // The sprite is 320 x 200 pixels in size // Here we set the origin to be the bottom-right of the sprite fuji.origin.setTo(320, 200); - tween = game.add.tween(fuji); - - // Start it going - rotate(); - - } - - function rotate() { - - tween.clear(); - tween.to({ rotation: 360 }, 2000); - tween.onComplete.add(rotate, this); - tween.start(); + game.add.tween(fuji).to({ rotation: 360 }, 2000, Phaser.Easing.Linear.None, true, 0, true); } diff --git a/Tests/sprites/sprite origin 4.js b/Tests/sprites/sprite origin 4.js index 18dbeaeb..4bd6a0bc 100644 --- a/Tests/sprites/sprite origin 4.js +++ b/Tests/sprites/sprite origin 4.js @@ -7,7 +7,6 @@ game.loader.load(); } var fuji; - var tweenRotate; var tweenUp; var tweenDown; function create() { @@ -17,23 +16,15 @@ // The sprite is 320 x 200 pixels in size // Here we set the origin to the center of the sprite again, so we can rotate and scale it at the same time fuji.origin.setTo(160, 100); - tweenRotate = game.add.tween(fuji); + game.add.tween(fuji).to({ + rotation: 360 + }, 2000, Phaser.Easing.Linear.None, true, 0, true); tweenUp = game.add.tween(fuji.scale); tweenUp.onComplete.add(scaleDown, this); tweenDown = game.add.tween(fuji.scale); tweenDown.onComplete.add(scaleUp, this); - // Start it going - rotate(); scaleUp(); } - function rotate() { - tweenRotate.clear(); - tweenRotate.to({ - rotation: 360 - }, 2000); - tweenRotate.onComplete.add(rotate, this); - tweenRotate.start(); - } function scaleUp() { tweenUp.to({ x: 2, diff --git a/Tests/sprites/sprite origin 4.ts b/Tests/sprites/sprite origin 4.ts index c9c0d521..d16afdda 100644 --- a/Tests/sprites/sprite origin 4.ts +++ b/Tests/sprites/sprite origin 4.ts @@ -13,7 +13,6 @@ } var fuji: Phaser.Sprite; - var tweenRotate: Phaser.Tween; var tweenUp: Phaser.Tween; var tweenDown: Phaser.Tween; @@ -28,7 +27,7 @@ // Here we set the origin to the center of the sprite again, so we can rotate and scale it at the same time fuji.origin.setTo(160, 100); - tweenRotate = game.add.tween(fuji); + game.add.tween(fuji).to({ rotation: 360 }, 2000, Phaser.Easing.Linear.None, true, 0, true); tweenUp = game.add.tween(fuji.scale); tweenUp.onComplete.add(scaleDown, this); @@ -36,21 +35,10 @@ tweenDown = game.add.tween(fuji.scale); tweenDown.onComplete.add(scaleUp, this); - // Start it going - rotate(); scaleUp(); } - function rotate() { - - tweenRotate.clear(); - tweenRotate.to({ rotation: 360 }, 2000); - tweenRotate.onComplete.add(rotate, this); - tweenRotate.start(); - - } - function scaleUp() { tweenUp.to({ x: 2, y: 2 }, 1000, Phaser.Easing.Elastic.Out); diff --git a/Tests/tweens/tween loop 2.js b/Tests/tweens/tween loop 2.js index 2cc240f0..0a396ae9 100644 --- a/Tests/tweens/tween loop 2.js +++ b/Tests/tweens/tween loop 2.js @@ -13,9 +13,7 @@ // Increase the size of the sprite a little so it covers the edges of the stage swirl.scale.setTo(1.4, 1.4); // Create a tween that rotates a full 306 degrees and then repeats (loop set to true) - game.add.tween(swirl).to({ - rotation: 360 - }, 2000, Phaser.Easing.Linear.None, true, 0, true); + //game.add.tween(swirl).to({ rotation: 360 }, 2000, Phaser.Easing.Linear.None, true, 0, true); game.add.tween(swirl.scale).to({ x: 4, y: 4 diff --git a/build/phaser.js b/build/phaser.js index 962d81df..4e614f9e 100644 --- a/build/phaser.js +++ b/build/phaser.js @@ -3897,7 +3897,8 @@ var Phaser; this.width = this.frameBounds.width; this.height = this.frameBounds.height; // Transform related (if we add any more then move to a component) - this.origin = new Phaser.Vec2(this.width / 2, this.height / 2); + //this.origin = new Phaser.Vec2(this.width / 2, this.height / 2); + this.origin = new Phaser.Vec2(0, 0); this.scale = new Phaser.Vec2(1, 1); this.skew = new Phaser.Vec2(0, 0); } @@ -4536,7 +4537,7 @@ var Phaser; this._game.stage.context.fillText('X: ' + this._stageX + ' Y: ' + this._stageY + ' Rotation: ' + this._rotation, x, y + 14); this._game.stage.context.fillText('World X: ' + this.scroll.x.toFixed(1) + ' World Y: ' + this.scroll.y.toFixed(1), x, y + 28); if(this.bounds) { - this._game.stage.context.fillText('Bounds: ' + this.bounds.width + ' x ' + this.bounds.height, x, y + 56); + this._game.stage.context.fillText('Bounds: ' + this.bounds.width + ' x ' + this.bounds.height, x, y + 42); } }; Camera.prototype.destroy = /** @@ -10481,6 +10482,10 @@ var Phaser; this._fy = sprite.scale.y; this._sin = 0; this._cos = 1; + this._dx = (camera.scaledX * sprite.scrollFactor.x) + sprite.frameBounds.x - (camera.worldView.x * sprite.scrollFactor.x); + this._dy = (camera.scaledY * sprite.scrollFactor.y) + sprite.frameBounds.y - (camera.worldView.y * sprite.scrollFactor.y); + this._dw = sprite.frameBounds.width; + this._dh = sprite.frameBounds.height; // Alpha if(sprite.texture.alpha !== 1) { this._ga = sprite.texture.context.globalAlpha; @@ -10494,10 +10499,6 @@ var Phaser; if(sprite.texture.flippedY) { this._fy = -sprite.scale.y; } - this._dx = (camera.scaledX * sprite.scrollFactor.x) + sprite.frameBounds.x - (camera.worldView.x * sprite.scrollFactor.x); - this._dy = (camera.scaledY * sprite.scrollFactor.y) + sprite.frameBounds.y - (camera.worldView.y * sprite.scrollFactor.y); - this._dw = sprite.frameBounds.width; - this._dh = sprite.frameBounds.height; if(sprite.animations.currentFrame !== null) { this._sx = sprite.animations.currentFrame.x; this._sy = sprite.animations.currentFrame.y; @@ -10532,11 +10533,11 @@ var Phaser; this._dx = -sprite.origin.x; this._dy = -sprite.origin.y; } else { - this._dx -= sprite.origin.x; - this._dy -= sprite.origin.y; - //this._dw = sprite.frameBounds.width * sprite.scale.x; - //this._dh = sprite.frameBounds.height * sprite.scale.y; - } + if(!sprite.origin.equals(0)) { + this._dx -= sprite.origin.x; + this._dy -= sprite.origin.y; + } + } this._sx = Math.round(this._sx); this._sy = Math.round(this._sy); this._sw = Math.round(this._sw);