From 13a86765cbe71e2dc795865570835075b733128e Mon Sep 17 00:00:00 2001 From: photonstorm Date: Fri, 31 Jan 2014 04:14:02 +0000 Subject: [PATCH] Phaser.CANVAS_PX_ROUND is a boolean. If 'true' the Canvas renderer will Math.floor() all coordinates before drawImage, stopping pixel interpolation. Defaults to false. Phaser.CANVAS_CLEAR_RECT is a boolean. If 'true' (the default) it will context.clearRect() every frame. If false this is skipped (useful if you know you don't need it) Collision now works between Sprites positioned via sprite.x/y, sprite.body.x/y or sprite.body.velocity. If you are tweening a sprite and still want physics collision, set `sprite.body.moves = false` otherwise it will fight against the tween motion. --- README.md | 7 ++++ examples/wip/rabbit map.js | 65 +++++++++++++++++++++++++++++++------ src/Phaser.js | 5 ++- src/PixiPatch.js | 47 +++++++++++++++------------ src/physics/arcade/Body.js | 14 ++++---- src/tilemap/TilemapLayer.js | 4 +-- 6 files changed, 101 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index 9a31b8d4..d4a74158 100644 --- a/README.md +++ b/README.md @@ -112,6 +112,11 @@ New features: * Math.normalizeLatitude - Normalizes a latitude to the [-90,90] range. * Math.normalizeLongitude - Normalizes a longitude to the [-180,180] range. * Phaser.Line added to the group of geometry classes, with full point on line/segment and intersection tests (see new examples) +* Phaser.CANVAS_PX_ROUND is a boolean. If 'true' the Canvas renderer will Math.floor() all coordinates before drawImage, stopping pixel interpolation. Defaults to false. +* Phaser.CANVAS_CLEAR_RECT is a boolean. If 'true' (the default) it will context.clearRect() every frame. If false this is skipped (useful if you know you don't need it) +* Collision now works between Sprites positioned via sprite.x/y, sprite.body.x/y or sprite.body.velocity. +* If you are tweening a sprite and still want physics collision, set `sprite.body.moves = false` otherwise it will fight against the tween motion. + New Examples: @@ -204,6 +209,8 @@ Bug Fixes: * Removed the frame property from TileSprites as it cannot use them, it tiles the whole image only, not just a section of it. * Fixed WebGLRenderer updateGraphics bug (thanks theadam) * Removed duplicate Timer.create line (thanks hstolte) +* Fixed issue with the camera being slightly out of sync with 'fixedToCamera' sprites. +* 1px camera jitter issue fixed where map is same size, or smaller than the game size. You can view the Change Log for all previous versions at https://github.com/photonstorm/phaser/changelog.md diff --git a/examples/wip/rabbit map.js b/examples/wip/rabbit map.js index f721fddf..82565601 100644 --- a/examples/wip/rabbit map.js +++ b/examples/wip/rabbit map.js @@ -8,7 +8,7 @@ function preload() { game.load.image('walls_1x2', 'assets/tilemaps/tiles/walls_1x2.png'); game.load.image('tiles2', 'assets/tilemaps/tiles/tiles2.png'); - // game.load.image('phaser', 'assets/sprites/shinyball.png'); + game.load.image('ball', 'assets/sprites/shinyball.png'); game.load.image('phaser', 'assets/sprites/firstaid.png'); // game.load.image('phaser', 'assets/sprites/atari130xe.png'); // game.load.image('phaser', 'assets/sprites/mushroom2.png'); @@ -24,6 +24,7 @@ var layer2; var layer3; var sprite; +var ball; var marker; function create() { @@ -34,7 +35,7 @@ console.log(' --- state create start ---'); game.step(); }); - // game.stage.backgroundColor = '#124184'; + game.stage.backgroundColor = '#124184'; marker = new Phaser.Line(256, 0, 256, 600); @@ -56,7 +57,12 @@ console.log(' --- state create start ---'); // game.physics.gravity.y = 200; - sprite = game.add.sprite(100, 300, 'phaser'); // up test + sprite = game.add.sprite(100, 180, 'phaser'); + sprite.body.moves = false; + + ball = game.add.sprite(200, 180, 'ball'); + + game.add.tween(sprite).to({x: 500},5000,Phaser.Easing.Linear.None,true); // sprite = game.add.sprite(200, 240, 'phaser'); // 3-block corner test @@ -112,12 +118,14 @@ function update() { layer.scrollY += 4; } */ + game.physics.collide(sprite, layer); + game.physics.collide(sprite, ball); // sprite.body.velocity.y = -300; - sprite.body.velocity.x = 0; - sprite.body.velocity.y = 0; + // sprite.body.velocity.x = 0; + // sprite.body.velocity.y = 0; // sprite.body.angularVelocity = 0; // sprite.body.acceleration.x = 0; @@ -157,25 +165,62 @@ function update() { sprite.angle = sprite.angle + 1; */ + // if (cursors.up.isDown) + // { + // sprite.body.velocity.y = -200; + // } + // else if (cursors.down.isDown) + // { + // sprite.body.velocity.y = 100; + // } + + // if (cursors.left.isDown) + // { + // sprite.body.velocity.x = -200; + // } + // else if (cursors.right.isDown) + // { + // sprite.body.velocity.x = 200; + // } + + // if (cursors.up.isDown) + // { + // sprite.y -= 2; + // } + // else if (cursors.down.isDown) + // { + // sprite.y += 2; + // } + + // if (cursors.left.isDown) + // { + // sprite.x -= 2; + // } + // else if (cursors.right.isDown) + // { + // sprite.x += 2; + // } + if (cursors.up.isDown) { - // console.log('cursor up'); - sprite.body.velocity.y = -200; + sprite.body.y -= 2; } else if (cursors.down.isDown) { - sprite.body.velocity.y = 100; + sprite.body.y += 2; } if (cursors.left.isDown) { - sprite.body.velocity.x = -200; + sprite.body.x -= 2; } else if (cursors.right.isDown) { - sprite.body.velocity.x = 200; + sprite.body.x += 2; } + + } function render() { diff --git a/src/Phaser.js b/src/Phaser.js index 4225286d..38e1056a 100644 --- a/src/Phaser.js +++ b/src/Phaser.js @@ -39,7 +39,10 @@ var Phaser = Phaser || { LEFT: 1, RIGHT: 2, UP: 3, - DOWN: 4 + DOWN: 4, + + CANVAS_PX_ROUND: false, + CANVAS_CLEAR_RECT: true }; diff --git a/src/PixiPatch.js b/src/PixiPatch.js index d7bfde7c..a71923ca 100644 --- a/src/PixiPatch.js +++ b/src/PixiPatch.js @@ -4,6 +4,7 @@ * 1) Added support for Trimmed sprite sheets * 2) Skip display objects with an alpha of zero * 3) Avoid Style Recalculation from the incorrect bgcolor value +* 4) Added support for Canvas unit rounding via Phaser.CANVAS_PX_ROUND boolean (disabled by default). * * Hopefully we can remove this once Pixi has been updated to support these things. */ @@ -23,7 +24,12 @@ PIXI.CanvasRenderer.prototype.render = function(stage) stage.updateTransform(); this.context.setTransform(1, 0, 0, 1, 0, 0); - this.context.clearRect(0, 0, this.width, this.height) + + if (Phaser.CANVAS_CLEAR_RECT) + { + this.context.clearRect(0, 0, this.width, this.height) + } + this.renderDisplayObject(stage, false); // Remove frame updates @@ -44,8 +50,6 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject, rend do { - //transform = displayObject.worldTransform; - if (!displayObject.visible && !renderHidden) { displayObject = displayObject.last._iNext; @@ -60,27 +64,30 @@ PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject, rend if (displayObject instanceof PIXI.Sprite) { - // var frame = displayObject.texture.frame; - if (displayObject.texture.frame) { this.context.globalAlpha = displayObject.worldAlpha; - // this.context.setTransform( - // displayObject.worldTransform[0], - // displayObject.worldTransform[3], - // displayObject.worldTransform[1], - // displayObject.worldTransform[4], - // displayObject.worldTransform[2], - // displayObject.worldTransform[5]); - - this.context.setTransform( - displayObject.worldTransform[0], - displayObject.worldTransform[3], - displayObject.worldTransform[1], - displayObject.worldTransform[4], - Math.floor(displayObject.worldTransform[2]), - Math.floor(displayObject.worldTransform[5])); + if (Phaser.CANVAS_PX_ROUND) + { + this.context.setTransform( + displayObject.worldTransform[0], + displayObject.worldTransform[3], + displayObject.worldTransform[1], + displayObject.worldTransform[4], + Math.floor(displayObject.worldTransform[2]), + Math.floor(displayObject.worldTransform[5])); + } + else + { + this.context.setTransform( + displayObject.worldTransform[0], + displayObject.worldTransform[3], + displayObject.worldTransform[1], + displayObject.worldTransform[4], + displayObject.worldTransform[2], + displayObject.worldTransform[5]); + } if (displayObject.texture.trimmed) { diff --git a/src/physics/arcade/Body.js b/src/physics/arcade/Body.js index 590b113a..d8781d95 100644 --- a/src/physics/arcade/Body.js +++ b/src/physics/arcade/Body.js @@ -1273,19 +1273,19 @@ if (this.sprite.debug) this.facing = Phaser.DOWN; } - // this.updateBounds(); - 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); } - this.sprite.x = this.x - this.offset.x; - this.sprite.y = this.y - this.offset.y; - this.sprite.worldTransform[2] = this.x - this.offset.x; - this.sprite.worldTransform[5] = this.y - this.offset.y; + if (this.deltaX() !== 0 || this.deltaY() !== 0) + { + this.sprite.worldTransform[2] = this.sprite.x = (this.x - this.offset.x); + this.sprite.worldTransform[5] = this.sprite.y = (this.y - this.offset.y); + } if (this.allowRotation) { @@ -1319,7 +1319,7 @@ if (this.sprite.debug) this.mass = 1; this.friction = 0.1; this.checkCollision = { none: false, any: true, up: true, down: true, left: true, right: true }; - this.blocked + this.blocked = { x: 0, y: 0, up: false, down: false, left: false, right: false }; }, diff --git a/src/tilemap/TilemapLayer.js b/src/tilemap/TilemapLayer.js index 7bde7633..66e4dff8 100644 --- a/src/tilemap/TilemapLayer.js +++ b/src/tilemap/TilemapLayer.js @@ -734,8 +734,6 @@ Phaser.TilemapLayer.prototype.render = function () { this._ty = this._dy; this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); - // this.context.fillStyle = '#ff00ff'; - // this.context.fillRect(0, 0, this.canvas.width, this.canvas.height); this.context.fillStyle = this.tileColor; @@ -802,7 +800,7 @@ Phaser.TilemapLayer.prototype.render = function () { if (tile.debug) { - this.context.fillStyle = 'rgba(0,255,0,0.5)'; + this.context.fillStyle = 'rgba(0, 255, 0, 0.4)'; this.context.fillRect(Math.floor(this._tx), Math.floor(this._ty), this.map.tileWidth, this.map.tileHeight); } }