diff --git a/SpecialFX/Camera/Border.ts b/SpecialFX/Camera/Border.ts
index ac4bf9b1..ef6674cb 100644
--- a/SpecialFX/Camera/Border.ts
+++ b/SpecialFX/Camera/Border.ts
@@ -42,13 +42,13 @@ module Phaser.FX.Camera {
* Post-render is called during the objects render cycle, after the children/image data has been rendered.
* It happens directly BEFORE a canvas context.restore has happened if added to a Camera.
*/
- public postRender(camera: Phaser.Camera, cameraX: number, cameraY: number, cameraWidth: number, cameraHeight: number) {
+ public postRender(camera: Phaser.Camera) {
if (this.showBorder == true)
{
this._game.stage.context.strokeStyle = this.borderColor;
this._game.stage.context.lineWidth = 1;
- this._game.stage.context.rect(camera.scaledX, camera.scaledY, camera.worldView.width, camera.worldView.height);
+ this._game.stage.context.rect(camera.x, camera.y, camera.width, camera.height);
this._game.stage.context.stroke();
}
diff --git a/SpecialFX/Camera/Mirror.ts b/SpecialFX/Camera/Mirror.ts
index a44eb2bc..dd1ef404 100644
--- a/SpecialFX/Camera/Mirror.ts
+++ b/SpecialFX/Camera/Mirror.ts
@@ -69,15 +69,10 @@ module Phaser.FX.Camera {
* Post-render is called during the objects render cycle, after the children/image data has been rendered.
* It happens directly BEFORE a canvas context.restore has happened if added to a Camera.
*/
- public postRender(camera: Camera, cameraX: number, cameraY: number, cameraWidth: number, cameraHeight: number) {
+ public postRender(camera: Phaser.Camera) {
- //if (this.cls)
- //{
- // this._context.clearRect(0, 0, this._mirrorWidth, this._mirrorHeight);
- //}
-
- this._sx = cameraX + this._mirrorX;
- this._sy = cameraY + this._mirrorY;
+ this._sx = camera.screenView.x + this._mirrorX;
+ this._sy = camera.screenView.y + this._mirrorY;
if (this.flipX == true && this.flipY == false)
{
@@ -105,6 +100,11 @@ module Phaser.FX.Camera {
this._context.fillRect(0, 0, this._mirrorWidth, this._mirrorHeight);
}
+ if (this.flipX || this.flipY)
+ {
+ this._game.stage.context.save();
+ }
+
if (this.flipX && this.flipY)
{
this._game.stage.context.transform(-1, 0, 0, -1, this._mirrorWidth, this._mirrorHeight);
@@ -121,6 +121,11 @@ module Phaser.FX.Camera {
this._game.stage.context.drawImage(this._canvas, this.x, -this.y);
}
+ if (this.flipX || this.flipY)
+ {
+ this._game.stage.context.restore();
+ }
+
}
}
diff --git a/SpecialFX/Camera/Scanlines.ts b/SpecialFX/Camera/Scanlines.ts
index 02cd05f2..1dbe9cc2 100644
--- a/SpecialFX/Camera/Scanlines.ts
+++ b/SpecialFX/Camera/Scanlines.ts
@@ -23,13 +23,13 @@ module Phaser.FX.Camera {
public spacing: number = 4;
public color: string = 'rgba(0, 0, 0, 0.3)';
- public postRender(camera: Camera, cameraX: number, cameraY: number, cameraWidth: number, cameraHeight: number) {
+ public postRender(camera: Phaser.Camera) {
this._game.stage.context.fillStyle = this.color;
- for (var y = cameraY; y < cameraHeight; y += this.spacing)
+ for (var y = camera.screenView.y; y < camera.screenView.height; y += this.spacing)
{
- this._game.stage.context.fillRect(cameraX, y, cameraWidth, 1);
+ this._game.stage.context.fillRect(camera.screenView.x, y, camera.screenView.width, 1);
}
}
diff --git a/Tests/Tests.csproj b/Tests/Tests.csproj
index 0510a492..f7e1358a 100644
--- a/Tests/Tests.csproj
+++ b/Tests/Tests.csproj
@@ -79,6 +79,10 @@
fade.ts
+
+
+ mirror.ts
+
scanlines.ts
diff --git a/Tests/camera fx/mirror.js b/Tests/camera fx/mirror.js
new file mode 100644
index 00000000..4a299882
--- /dev/null
+++ b/Tests/camera fx/mirror.js
@@ -0,0 +1,41 @@
+///
+///
+(function () {
+ var game = new Phaser.Game(this, 'game', 800, 600, init, create, update);
+ function init() {
+ game.load.image('backdrop', 'assets/pics/ninja-masters2.png');
+ game.load.start();
+ }
+ var mirror;
+ function create() {
+ // Just set the world to be the size of the image we're loading in
+ game.world.setSize(1216, 896);
+ // What we need is a camera 800x400 pixels in size as the mirror effect will be 200px tall and sit below it.
+ // So we resize our default camera to 400px
+ game.camera.height = 400;
+ // Because it's our default camera we need to tell it to disable clipping, otherwise we'll never see the mirror effect render.
+ game.camera.disableClipping = true;
+ // Add our effect to the camera
+ mirror = game.camera.fx.add(Phaser.FX.Camera.Mirror);
+ // The first 2 parameters are the x and y coordinates of where to display the effect. They are in STAGE coordinates, not World.
+ // The next is a Rectangle making up the region of the Camera that we'll create the effect from (in this case the whole camera).
+ // Finally we set the fill color that is put over the top of the mirror effect.
+ mirror.start(0, 400, new Phaser.Rectangle(0, 0, 800, 400), 'rgba(0, 0, 100, 0.7)');
+ // Experiment with variations on these to see the different mirror effects that can be achieved.
+ mirror.flipX = true;
+ //mirror.flipY = true;
+ game.add.sprite(0, 0, 'backdrop');
+ }
+ function update() {
+ if(game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
+ game.camera.x -= 4;
+ } else if(game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
+ game.camera.x += 4;
+ }
+ if(game.input.keyboard.isDown(Phaser.Keyboard.UP)) {
+ game.camera.y -= 4;
+ } else if(game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) {
+ game.camera.y += 4;
+ }
+ }
+})();
diff --git a/Tests/camera fx/mirror.ts b/Tests/camera fx/mirror.ts
new file mode 100644
index 00000000..cedb72e1
--- /dev/null
+++ b/Tests/camera fx/mirror.ts
@@ -0,0 +1,70 @@
+///
+///
+
+(function () {
+
+ var game = new Phaser.Game(this, 'game', 800, 600, init, create, update);
+
+ function init() {
+
+ game.load.image('backdrop', 'assets/pics/ninja-masters2.png');
+
+ game.load.start();
+
+ }
+
+ var mirror: Phaser.FX.Camera.Mirror;
+
+ function create() {
+
+ // Just set the world to be the size of the image we're loading in
+ game.world.setSize(1216, 896);
+
+ // What we need is a camera 800x400 pixels in size as the mirror effect will be 200px tall and sit below it.
+ // So we resize our default camera to 400px
+ game.camera.height = 400;
+
+ // Because it's our default camera we need to tell it to disable clipping, otherwise we'll never see the mirror effect render.
+ game.camera.disableClipping = true;
+
+ // Add our effect to the camera
+ mirror = game.camera.fx.add(Phaser.FX.Camera.Mirror);
+
+ // The first 2 parameters are the x and y coordinates of where to display the effect. They are in STAGE coordinates, not World.
+ // The next is a Rectangle making up the region of the Camera that we'll create the effect from (in this case the whole camera).
+ // Finally we set the fill color that is put over the top of the mirror effect.
+ mirror.start(0, 400, new Phaser.Rectangle(0, 0, 800, 400), 'rgba(0, 0, 100, 0.7)');
+
+ // Experiment with variations on these to see the different mirror effects that can be achieved.
+ //mirror.flipX = true;
+ //mirror.flipY = true;
+
+ // The Mirror FX will literally mirror EVERYTHING that was rendered to the camera, in the case of this test it's
+ // just a single image, but when used on a full game it can look really quite neat.
+ game.add.sprite(0, 0, 'backdrop');
+
+ }
+
+ function update() {
+
+ if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
+ {
+ game.camera.x -= 4;
+ }
+ else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
+ {
+ game.camera.x += 4;
+ }
+
+ if (game.input.keyboard.isDown(Phaser.Keyboard.UP))
+ {
+ game.camera.y -= 4;
+ }
+ else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN))
+ {
+ game.camera.y += 4;
+ }
+
+ }
+
+})();
diff --git a/Tests/phaser-fx.js b/Tests/phaser-fx.js
index dc65ef51..aeac7f76 100644
--- a/Tests/phaser-fx.js
+++ b/Tests/phaser-fx.js
@@ -1,6 +1,12 @@
-var Phaser;
+var Phaser;
(function (Phaser) {
(function (FX) {
+ ///
+ /**
+ * Phaser - FX - Camera - Flash
+ *
+ * The camera is filled with the given color and returns to normal at the given duration.
+ */
(function (Camera) {
var Flash = (function () {
function Flash(game) {
@@ -9,12 +15,21 @@ var Phaser;
this._fxFlashAlpha = 0;
this._game = game;
}
- Flash.prototype.start = function (color, duration, onComplete, force) {
+ Flash.prototype.start = /**
+ * The camera is filled with this color and returns to normal at the given duration.
+ *
+ * @param Color The color you want to use in 0xRRGGBB format, i.e. 0xffffff for white.
+ * @param Duration How long it takes for the flash to fade.
+ * @param OnComplete An optional function you want to run when the flash finishes. Set to null for no callback.
+ * @param Force Force an already running flash effect to reset.
+ */
+ function (color, duration, onComplete, force) {
if (typeof color === "undefined") { color = 0xffffff; }
if (typeof duration === "undefined") { duration = 1; }
if (typeof onComplete === "undefined") { onComplete = null; }
if (typeof force === "undefined") { force = false; }
if(force === false && this._fxFlashAlpha > 0) {
+ // You can't flash again unless you force it
return;
}
if(duration <= 0) {
@@ -29,6 +44,7 @@ var Phaser;
this._fxFlashComplete = onComplete;
};
Flash.prototype.postUpdate = function () {
+ // Update the Flash effect
if(this._fxFlashAlpha > 0) {
this._fxFlashAlpha -= this._game.time.elapsed / this._fxFlashDuration;
if(this._game.math.roundTo(this._fxFlashAlpha, -2) <= 0) {
@@ -56,21 +72,42 @@ var Phaser;
var Phaser;
(function (Phaser) {
(function (FX) {
+ ///
+ /**
+ * Phaser - FX - Camera - Border
+ *
+ * Creates a border around a camera.
+ */
(function (Camera) {
var Border = (function () {
function Border(game, parent) {
+ /**
+ * Whether render border of this camera or not. (default is false)
+ * @type {boolean}
+ */
this.showBorder = false;
+ /**
+ * Color of border of this camera. (in css color string)
+ * @type {string}
+ */
this.borderColor = 'rgb(255,255,255)';
this._game = game;
this._parent = parent;
}
- Border.prototype.start = function () {
+ Border.prototype.start = /**
+ * You can name the function that starts the effect whatever you like, but we used 'start' in our effects.
+ */
+ function () {
};
- Border.prototype.postRender = function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
+ Border.prototype.postRender = /**
+ * Post-render is called during the objects render cycle, after the children/image data has been rendered.
+ * It happens directly BEFORE a canvas context.restore has happened if added to a Camera.
+ */
+ function (camera) {
if(this.showBorder == true) {
this._game.stage.context.strokeStyle = this.borderColor;
this._game.stage.context.lineWidth = 1;
- this._game.stage.context.rect(camera.scaledX, camera.scaledY, camera.worldView.width, camera.worldView.height);
+ this._game.stage.context.rect(camera.x, camera.y, camera.width, camera.height);
this._game.stage.context.stroke();
}
};
@@ -85,23 +122,50 @@ var Phaser;
var Phaser;
(function (Phaser) {
(function (FX) {
+ ///
+ /**
+ * Phaser - FX - Camera - Template
+ *
+ * A Template FX file you can use to create your own Camera FX.
+ * If you don't use any of the methods below (i.e. preUpdate, render, etc) then DELETE THEM to avoid un-necessary calls by the FXManager.
+ */
(function (Camera) {
var Template = (function () {
function Template(game, parent) {
this._game = game;
this._parent = parent;
}
- Template.prototype.start = function () {
+ Template.prototype.start = /**
+ * You can name the function that starts the effect whatever you like, but we used 'start' in our effects.
+ */
+ function () {
};
- Template.prototype.preUpdate = function () {
+ Template.prototype.preUpdate = /**
+ * Pre-update is called at the start of the objects update cycle, before any other updates have taken place.
+ */
+ function () {
};
- Template.prototype.postUpdate = function () {
+ Template.prototype.postUpdate = /**
+ * Post-update is called at the end of the objects update cycle, after other update logic has taken place.
+ */
+ function () {
};
- Template.prototype.preRender = function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
+ Template.prototype.preRender = /**
+ * Pre-render is called at the start of the object render cycle, before any transforms have taken place.
+ * It happens directly AFTER a canvas context.save has happened if added to a Camera.
+ */
+ function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
};
- Template.prototype.render = function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
+ Template.prototype.render = /**
+ * render is called during the objects render cycle, right after all transforms have finished, but before any children/image data is rendered.
+ */
+ function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
};
- Template.prototype.postRender = function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
+ Template.prototype.postRender = /**
+ * Post-render is called during the objects render cycle, after the children/image data has been rendered.
+ * It happens directly BEFORE a canvas context.restore has happened if added to a Camera.
+ */
+ function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
};
return Template;
})();
@@ -114,6 +178,13 @@ var Phaser;
var Phaser;
(function (Phaser) {
(function (FX) {
+ ///
+ /**
+ * Phaser - FX - Camera - Mirror
+ *
+ * Creates a mirror effect for a camera.
+ * Can mirror the camera image horizontally, vertically or both with an optional fill color overlay.
+ */
(function (Camera) {
var Mirror = (function () {
function Mirror(game, parent) {
@@ -128,7 +199,11 @@ var Phaser;
this._canvas.height = parent.height;
this._context = this._canvas.getContext('2d');
}
- Mirror.prototype.start = function (x, y, region, fillColor) {
+ Mirror.prototype.start = /**
+ * This is the rectangular region to grab from the Camera used in the Mirror effect
+ * It is rendered to the Stage at Mirror.x/y (note the use of Stage coordinates, not World coordinates)
+ */
+ function (x, y, region, fillColor) {
if (typeof fillColor === "undefined") { fillColor = 'rgba(0, 0, 100, 0.5)'; }
this.x = x;
this.y = y;
@@ -141,18 +216,34 @@ var Phaser;
this._context.fillStyle = this._mirrorColor;
}
};
- Mirror.prototype.postRender = function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
- this._sx = cameraX + this._mirrorX;
- this._sy = cameraY + this._mirrorY;
+ Mirror.prototype.postRender = /**
+ * Post-render is called during the objects render cycle, after the children/image data has been rendered.
+ * It happens directly BEFORE a canvas context.restore has happened if added to a Camera.
+ */
+ function (camera) {
+ this._sx = camera.screenView.x + this._mirrorX;
+ this._sy = camera.screenView.y + this._mirrorY;
if(this.flipX == true && this.flipY == false) {
this._sx = 0;
} else if(this.flipY == true && this.flipX == false) {
this._sy = 0;
}
- this._context.drawImage(this._game.stage.canvas, this._sx, this._sy, this._mirrorWidth, this._mirrorHeight, 0, 0, this._mirrorWidth, this._mirrorHeight);
+ this._context.drawImage(this._game.stage.canvas, // Source Image
+ this._sx, // Source X (location within the source image)
+ this._sy, // Source Y
+ this._mirrorWidth, // Source Width
+ this._mirrorHeight, // Source Height
+ 0, // Destination X (where on the canvas it'll be drawn)
+ 0, // Destination Y
+ this._mirrorWidth, // Destination Width (always same as Source Width unless scaled)
+ this._mirrorHeight);
+ // Destination Height (always same as Source Height unless scaled)
if(this._mirrorColor) {
this._context.fillRect(0, 0, this._mirrorWidth, this._mirrorHeight);
}
+ if(this.flipX || this.flipY) {
+ this._game.stage.context.save();
+ }
if(this.flipX && this.flipY) {
this._game.stage.context.transform(-1, 0, 0, -1, this._mirrorWidth, this._mirrorHeight);
this._game.stage.context.drawImage(this._canvas, -this.x, -this.y);
@@ -163,6 +254,9 @@ var Phaser;
this._game.stage.context.transform(1, 0, 0, -1, 0, this._mirrorHeight);
this._game.stage.context.drawImage(this._canvas, this.x, -this.y);
}
+ if(this.flipX || this.flipY) {
+ this._game.stage.context.restore();
+ }
};
return Mirror;
})();
@@ -175,19 +269,49 @@ var Phaser;
var Phaser;
(function (Phaser) {
(function (FX) {
+ ///
+ /**
+ * Phaser - FX - Camera - Shadow
+ *
+ * Creates a drop-shadow effect on the camera window.
+ */
(function (Camera) {
var Shadow = (function () {
function Shadow(game, parent) {
+ /**
+ * Render camera shadow or not. (default is false)
+ * @type {boolean}
+ */
this.showShadow = false;
+ /**
+ * Color of shadow, in css color string.
+ * @type {string}
+ */
this.shadowColor = 'rgb(0,0,0)';
+ /**
+ * Blur factor of shadow.
+ * @type {number}
+ */
this.shadowBlur = 10;
+ /**
+ * Offset of the shadow from camera's position.
+ * @type {Point}
+ */
this.shadowOffset = new Phaser.Point(4, 4);
this._game = game;
this._parent = parent;
}
- Shadow.prototype.start = function () {
+ Shadow.prototype.start = /**
+ * You can name the function that starts the effect whatever you like, but we used 'start' in our effects.
+ */
+ function () {
};
- Shadow.prototype.preRender = function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
+ Shadow.prototype.preRender = /**
+ * Pre-render is called at the start of the object render cycle, before any transforms have taken place.
+ * It happens directly AFTER a canvas context.save has happened if added to a Camera.
+ */
+ function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
+ // Shadow
if(this.showShadow == true) {
this._game.stage.context.shadowColor = this.shadowColor;
this._game.stage.context.shadowBlur = this.shadowBlur;
@@ -195,7 +319,11 @@ var Phaser;
this._game.stage.context.shadowOffsetY = this.shadowOffset.y;
}
};
- Shadow.prototype.render = function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
+ Shadow.prototype.render = /**
+ * render is called during the objects render cycle, right after all transforms have finished, but before any children/image data is rendered.
+ */
+ function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
+ // Shadow off
if(this.showShadow == true) {
this._game.stage.context.shadowBlur = 0;
this._game.stage.context.shadowOffsetX = 0;
@@ -213,6 +341,12 @@ var Phaser;
var Phaser;
(function (Phaser) {
(function (FX) {
+ ///
+ /**
+ * Phaser - FX - Camera - Scanlines
+ *
+ * Give your game that classic retro feel!
+ */
(function (Camera) {
var Scanlines = (function () {
function Scanlines(game, parent) {
@@ -221,10 +355,10 @@ var Phaser;
this._game = game;
this._parent = parent;
}
- Scanlines.prototype.postRender = function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
+ Scanlines.prototype.postRender = function (camera) {
this._game.stage.context.fillStyle = this.color;
- for(var y = cameraY; y < cameraHeight; y += this.spacing) {
- this._game.stage.context.fillRect(cameraX, y, cameraWidth, 1);
+ for(var y = camera.screenView.y; y < camera.screenView.height; y += this.spacing) {
+ this._game.stage.context.fillRect(camera.screenView.x, y, camera.screenView.width, 1);
}
};
return Scanlines;
@@ -238,6 +372,12 @@ var Phaser;
var Phaser;
(function (Phaser) {
(function (FX) {
+ ///
+ /**
+ * Phaser - FX - Camera - Shake
+ *
+ * A simple camera shake effect.
+ */
(function (Camera) {
var Shake = (function () {
function Shake(game, camera) {
@@ -254,7 +394,16 @@ var Phaser;
Shake.SHAKE_BOTH_AXES = 0;
Shake.SHAKE_HORIZONTAL_ONLY = 1;
Shake.SHAKE_VERTICAL_ONLY = 2;
- Shake.prototype.start = function (intensity, duration, onComplete, force, direction) {
+ Shake.prototype.start = /**
+ * A simple camera shake effect.
+ *
+ * @param Intensity Percentage of screen size representing the maximum distance that the screen can move while shaking.
+ * @param Duration The length in seconds that the shaking effect should last.
+ * @param OnComplete A function you want to run when the shake effect finishes.
+ * @param Force Force the effect to reset (default = true, unlike flash() and fade()!).
+ * @param Direction Whether to shake on both axes, just up and down, or just side to side (use class constants SHAKE_BOTH_AXES, SHAKE_VERTICAL_ONLY, or SHAKE_HORIZONTAL_ONLY).
+ */
+ function (intensity, duration, onComplete, force, direction) {
if (typeof intensity === "undefined") { intensity = 0.05; }
if (typeof duration === "undefined") { duration = 0.5; }
if (typeof onComplete === "undefined") { onComplete = null; }
@@ -263,6 +412,7 @@ var Phaser;
if(!force && ((this._fxShakeOffset.x != 0) || (this._fxShakeOffset.y != 0))) {
return;
}
+ // If a shake is not already running we need to store the offsets here
if(this._fxShakeOffset.x == 0 && this._fxShakeOffset.y == 0) {
this._fxShakePrevX = this._parent.x;
this._fxShakePrevY = this._parent.y;
@@ -274,6 +424,7 @@ var Phaser;
this._fxShakeOffset.setTo(0, 0);
};
Shake.prototype.postUpdate = function () {
+ // Update the "shake" special effect
if(this._fxShakeDuration > 0) {
this._fxShakeDuration -= this._game.time.elapsed;
if(this._game.math.roundTo(this._fxShakeDuration, -2) <= 0) {
@@ -286,9 +437,11 @@ var Phaser;
}
} else {
if((this._fxShakeDirection == Shake.SHAKE_BOTH_AXES) || (this._fxShakeDirection == Shake.SHAKE_HORIZONTAL_ONLY)) {
+ //this._fxShakeOffset.x = ((this._game.math.random() * this._fxShakeIntensity * this.worldView.width * 2 - this._fxShakeIntensity * this.worldView.width) * this._zoom;
this._fxShakeOffset.x = (this._game.math.random() * this._fxShakeIntensity * this._parent.worldView.width * 2 - this._fxShakeIntensity * this._parent.worldView.width);
}
if((this._fxShakeDirection == Shake.SHAKE_BOTH_AXES) || (this._fxShakeDirection == Shake.SHAKE_VERTICAL_ONLY)) {
+ //this._fxShakeOffset.y = (this._game.math.random() * this._fxShakeIntensity * this.worldView.height * 2 - this._fxShakeIntensity * this.worldView.height) * this._zoom;
this._fxShakeOffset.y = (this._game.math.random() * this._fxShakeIntensity * this._parent.worldView.height * 2 - this._fxShakeIntensity * this._parent.worldView.height);
}
}
@@ -311,6 +464,12 @@ var Phaser;
var Phaser;
(function (Phaser) {
(function (FX) {
+ ///
+ /**
+ * Phaser - FX - Camera - Fade
+ *
+ * The camera is filled with the given color and returns to normal at the given duration.
+ */
(function (Camera) {
var Fade = (function () {
function Fade(game) {
@@ -319,12 +478,21 @@ var Phaser;
this._fxFadeAlpha = 0;
this._game = game;
}
- Fade.prototype.start = function (color, duration, onComplete, force) {
+ Fade.prototype.start = /**
+ * The camera is gradually filled with this color.
+ *
+ * @param Color The color you want to use in 0xRRGGBB format, i.e. 0xffffff for white.
+ * @param Duration How long it takes for the flash to fade.
+ * @param OnComplete An optional function you want to run when the flash finishes. Set to null for no callback.
+ * @param Force Force an already running flash effect to reset.
+ */
+ function (color, duration, onComplete, force) {
if (typeof color === "undefined") { color = 0x000000; }
if (typeof duration === "undefined") { duration = 1; }
if (typeof onComplete === "undefined") { onComplete = null; }
if (typeof force === "undefined") { force = false; }
if(force === false && this._fxFadeAlpha > 0) {
+ // You can't fade again unless you force it
return;
}
if(duration <= 0) {
@@ -339,6 +507,7 @@ var Phaser;
this._fxFadeComplete = onComplete;
};
Fade.prototype.postUpdate = function () {
+ // Update the Fade effect
if(this._fxFadeAlpha > 0) {
this._fxFadeAlpha += this._game.time.elapsed / this._fxFadeDuration;
if(this._game.math.roundTo(this._fxFadeAlpha, -2) >= 1) {
@@ -350,6 +519,7 @@ var Phaser;
}
};
Fade.prototype.postRender = function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
+ // "Fade" FX
if(this._fxFadeAlpha > 0) {
this._game.stage.context.fillStyle = this._fxFadeColor + this._fxFadeAlpha + ')';
this._game.stage.context.fillRect(cameraX, cameraY, cameraWidth, cameraHeight);
diff --git a/build/phaser-fx.d.ts b/build/phaser-fx.d.ts
index 3794a9b1..d01c759b 100644
--- a/build/phaser-fx.d.ts
+++ b/build/phaser-fx.d.ts
@@ -1,3 +1,8 @@
+/**
+* Phaser - FX - Camera - Flash
+*
+* The camera is filled with the given color and returns to normal at the given duration.
+*/
module Phaser.FX.Camera {
class Flash {
constructor(game: Game);
@@ -6,35 +11,95 @@ module Phaser.FX.Camera {
private _fxFlashComplete;
private _fxFlashDuration;
private _fxFlashAlpha;
+ /**
+ * The camera is filled with this color and returns to normal at the given duration.
+ *
+ * @param Color The color you want to use in 0xRRGGBB format, i.e. 0xffffff for white.
+ * @param Duration How long it takes for the flash to fade.
+ * @param OnComplete An optional function you want to run when the flash finishes. Set to null for no callback.
+ * @param Force Force an already running flash effect to reset.
+ */
public start(color?: number, duration?: number, onComplete?, force?: bool): void;
public postUpdate(): void;
public postRender(camera: Camera, cameraX: number, cameraY: number, cameraWidth: number, cameraHeight: number): void;
}
}
+/**
+* Phaser - FX - Camera - Border
+*
+* Creates a border around a camera.
+*/
module Phaser.FX.Camera {
class Border {
constructor(game: Game, parent: Camera);
private _game;
private _parent;
+ /**
+ * Whether render border of this camera or not. (default is false)
+ * @type {boolean}
+ */
public showBorder: bool;
+ /**
+ * Color of border of this camera. (in css color string)
+ * @type {string}
+ */
public borderColor: string;
+ /**
+ * You can name the function that starts the effect whatever you like, but we used 'start' in our effects.
+ */
public start(): void;
- public postRender(camera: Camera, cameraX: number, cameraY: number, cameraWidth: number, cameraHeight: number): void;
+ /**
+ * Post-render is called during the objects render cycle, after the children/image data has been rendered.
+ * It happens directly BEFORE a canvas context.restore has happened if added to a Camera.
+ */
+ public postRender(camera: Camera): void;
}
}
+/**
+* Phaser - FX - Camera - Template
+*
+* A Template FX file you can use to create your own Camera FX.
+* If you don't use any of the methods below (i.e. preUpdate, render, etc) then DELETE THEM to avoid un-necessary calls by the FXManager.
+*/
module Phaser.FX.Camera {
class Template {
constructor(game: Game, parent: Camera);
private _game;
private _parent;
+ /**
+ * You can name the function that starts the effect whatever you like, but we used 'start' in our effects.
+ */
public start(): void;
+ /**
+ * Pre-update is called at the start of the objects update cycle, before any other updates have taken place.
+ */
public preUpdate(): void;
+ /**
+ * Post-update is called at the end of the objects update cycle, after other update logic has taken place.
+ */
public postUpdate(): void;
+ /**
+ * Pre-render is called at the start of the object render cycle, before any transforms have taken place.
+ * It happens directly AFTER a canvas context.save has happened if added to a Camera.
+ */
public preRender(camera: Camera, cameraX: number, cameraY: number, cameraWidth: number, cameraHeight: number): void;
+ /**
+ * render is called during the objects render cycle, right after all transforms have finished, but before any children/image data is rendered.
+ */
public render(camera: Camera, cameraX: number, cameraY: number, cameraWidth: number, cameraHeight: number): void;
+ /**
+ * Post-render is called during the objects render cycle, after the children/image data has been rendered.
+ * It happens directly BEFORE a canvas context.restore has happened if added to a Camera.
+ */
public postRender(camera: Camera, cameraX: number, cameraY: number, cameraWidth: number, cameraHeight: number): void;
}
}
+/**
+* Phaser - FX - Camera - Mirror
+*
+* Creates a mirror effect for a camera.
+* Can mirror the camera image horizontally, vertically or both with an optional fill color overlay.
+*/
module Phaser.FX.Camera {
class Mirror {
constructor(game: Game, parent: Camera);
@@ -54,24 +119,68 @@ module Phaser.FX.Camera {
public x: number;
public y: number;
public cls: bool;
+ /**
+ * This is the rectangular region to grab from the Camera used in the Mirror effect
+ * It is rendered to the Stage at Mirror.x/y (note the use of Stage coordinates, not World coordinates)
+ */
public start(x: number, y: number, region: Rectangle, fillColor?: string): void;
- public postRender(camera: Camera, cameraX: number, cameraY: number, cameraWidth: number, cameraHeight: number): void;
+ /**
+ * Post-render is called during the objects render cycle, after the children/image data has been rendered.
+ * It happens directly BEFORE a canvas context.restore has happened if added to a Camera.
+ */
+ public postRender(camera: Camera): void;
}
}
+/**
+* Phaser - FX - Camera - Shadow
+*
+* Creates a drop-shadow effect on the camera window.
+*/
module Phaser.FX.Camera {
class Shadow {
constructor(game: Game, parent: Camera);
private _game;
private _parent;
+ /**
+ * Render camera shadow or not. (default is false)
+ * @type {boolean}
+ */
public showShadow: bool;
+ /**
+ * Color of shadow, in css color string.
+ * @type {string}
+ */
public shadowColor: string;
+ /**
+ * Blur factor of shadow.
+ * @type {number}
+ */
public shadowBlur: number;
+ /**
+ * Offset of the shadow from camera's position.
+ * @type {Point}
+ */
public shadowOffset: Point;
+ /**
+ * You can name the function that starts the effect whatever you like, but we used 'start' in our effects.
+ */
public start(): void;
+ /**
+ * Pre-render is called at the start of the object render cycle, before any transforms have taken place.
+ * It happens directly AFTER a canvas context.save has happened if added to a Camera.
+ */
public preRender(camera: Camera, cameraX: number, cameraY: number, cameraWidth: number, cameraHeight: number): void;
+ /**
+ * render is called during the objects render cycle, right after all transforms have finished, but before any children/image data is rendered.
+ */
public render(camera: Camera, cameraX: number, cameraY: number, cameraWidth: number, cameraHeight: number): void;
}
}
+/**
+* Phaser - FX - Camera - Scanlines
+*
+* Give your game that classic retro feel!
+*/
module Phaser.FX.Camera {
class Scanlines {
constructor(game: Game, parent: Camera);
@@ -79,9 +188,14 @@ module Phaser.FX.Camera {
private _parent;
public spacing: number;
public color: string;
- public postRender(camera: Camera, cameraX: number, cameraY: number, cameraWidth: number, cameraHeight: number): void;
+ public postRender(camera: Camera): void;
}
}
+/**
+* Phaser - FX - Camera - Shake
+*
+* A simple camera shake effect.
+*/
module Phaser.FX.Camera {
class Shake {
constructor(game: Game, camera: Camera);
@@ -97,11 +211,25 @@ module Phaser.FX.Camera {
static SHAKE_BOTH_AXES: number;
static SHAKE_HORIZONTAL_ONLY: number;
static SHAKE_VERTICAL_ONLY: number;
+ /**
+ * A simple camera shake effect.
+ *
+ * @param Intensity Percentage of screen size representing the maximum distance that the screen can move while shaking.
+ * @param Duration The length in seconds that the shaking effect should last.
+ * @param OnComplete A function you want to run when the shake effect finishes.
+ * @param Force Force the effect to reset (default = true, unlike flash() and fade()!).
+ * @param Direction Whether to shake on both axes, just up and down, or just side to side (use class constants SHAKE_BOTH_AXES, SHAKE_VERTICAL_ONLY, or SHAKE_HORIZONTAL_ONLY).
+ */
public start(intensity?: number, duration?: number, onComplete?, force?: bool, direction?: number): void;
public postUpdate(): void;
public preRender(camera: Camera, cameraX: number, cameraY: number, cameraWidth: number, cameraHeight: number): void;
}
}
+/**
+* Phaser - FX - Camera - Fade
+*
+* The camera is filled with the given color and returns to normal at the given duration.
+*/
module Phaser.FX.Camera {
class Fade {
constructor(game: Game);
@@ -110,6 +238,14 @@ module Phaser.FX.Camera {
private _fxFadeComplete;
private _fxFadeDuration;
private _fxFadeAlpha;
+ /**
+ * The camera is gradually filled with this color.
+ *
+ * @param Color The color you want to use in 0xRRGGBB format, i.e. 0xffffff for white.
+ * @param Duration How long it takes for the flash to fade.
+ * @param OnComplete An optional function you want to run when the flash finishes. Set to null for no callback.
+ * @param Force Force an already running flash effect to reset.
+ */
public start(color?: number, duration?: number, onComplete?, force?: bool): void;
public postUpdate(): void;
public postRender(camera: Camera, cameraX: number, cameraY: number, cameraWidth: number, cameraHeight: number): void;
diff --git a/build/phaser-fx.js b/build/phaser-fx.js
index dc65ef51..aeac7f76 100644
--- a/build/phaser-fx.js
+++ b/build/phaser-fx.js
@@ -1,6 +1,12 @@
-var Phaser;
+var Phaser;
(function (Phaser) {
(function (FX) {
+ ///
+ /**
+ * Phaser - FX - Camera - Flash
+ *
+ * The camera is filled with the given color and returns to normal at the given duration.
+ */
(function (Camera) {
var Flash = (function () {
function Flash(game) {
@@ -9,12 +15,21 @@ var Phaser;
this._fxFlashAlpha = 0;
this._game = game;
}
- Flash.prototype.start = function (color, duration, onComplete, force) {
+ Flash.prototype.start = /**
+ * The camera is filled with this color and returns to normal at the given duration.
+ *
+ * @param Color The color you want to use in 0xRRGGBB format, i.e. 0xffffff for white.
+ * @param Duration How long it takes for the flash to fade.
+ * @param OnComplete An optional function you want to run when the flash finishes. Set to null for no callback.
+ * @param Force Force an already running flash effect to reset.
+ */
+ function (color, duration, onComplete, force) {
if (typeof color === "undefined") { color = 0xffffff; }
if (typeof duration === "undefined") { duration = 1; }
if (typeof onComplete === "undefined") { onComplete = null; }
if (typeof force === "undefined") { force = false; }
if(force === false && this._fxFlashAlpha > 0) {
+ // You can't flash again unless you force it
return;
}
if(duration <= 0) {
@@ -29,6 +44,7 @@ var Phaser;
this._fxFlashComplete = onComplete;
};
Flash.prototype.postUpdate = function () {
+ // Update the Flash effect
if(this._fxFlashAlpha > 0) {
this._fxFlashAlpha -= this._game.time.elapsed / this._fxFlashDuration;
if(this._game.math.roundTo(this._fxFlashAlpha, -2) <= 0) {
@@ -56,21 +72,42 @@ var Phaser;
var Phaser;
(function (Phaser) {
(function (FX) {
+ ///
+ /**
+ * Phaser - FX - Camera - Border
+ *
+ * Creates a border around a camera.
+ */
(function (Camera) {
var Border = (function () {
function Border(game, parent) {
+ /**
+ * Whether render border of this camera or not. (default is false)
+ * @type {boolean}
+ */
this.showBorder = false;
+ /**
+ * Color of border of this camera. (in css color string)
+ * @type {string}
+ */
this.borderColor = 'rgb(255,255,255)';
this._game = game;
this._parent = parent;
}
- Border.prototype.start = function () {
+ Border.prototype.start = /**
+ * You can name the function that starts the effect whatever you like, but we used 'start' in our effects.
+ */
+ function () {
};
- Border.prototype.postRender = function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
+ Border.prototype.postRender = /**
+ * Post-render is called during the objects render cycle, after the children/image data has been rendered.
+ * It happens directly BEFORE a canvas context.restore has happened if added to a Camera.
+ */
+ function (camera) {
if(this.showBorder == true) {
this._game.stage.context.strokeStyle = this.borderColor;
this._game.stage.context.lineWidth = 1;
- this._game.stage.context.rect(camera.scaledX, camera.scaledY, camera.worldView.width, camera.worldView.height);
+ this._game.stage.context.rect(camera.x, camera.y, camera.width, camera.height);
this._game.stage.context.stroke();
}
};
@@ -85,23 +122,50 @@ var Phaser;
var Phaser;
(function (Phaser) {
(function (FX) {
+ ///
+ /**
+ * Phaser - FX - Camera - Template
+ *
+ * A Template FX file you can use to create your own Camera FX.
+ * If you don't use any of the methods below (i.e. preUpdate, render, etc) then DELETE THEM to avoid un-necessary calls by the FXManager.
+ */
(function (Camera) {
var Template = (function () {
function Template(game, parent) {
this._game = game;
this._parent = parent;
}
- Template.prototype.start = function () {
+ Template.prototype.start = /**
+ * You can name the function that starts the effect whatever you like, but we used 'start' in our effects.
+ */
+ function () {
};
- Template.prototype.preUpdate = function () {
+ Template.prototype.preUpdate = /**
+ * Pre-update is called at the start of the objects update cycle, before any other updates have taken place.
+ */
+ function () {
};
- Template.prototype.postUpdate = function () {
+ Template.prototype.postUpdate = /**
+ * Post-update is called at the end of the objects update cycle, after other update logic has taken place.
+ */
+ function () {
};
- Template.prototype.preRender = function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
+ Template.prototype.preRender = /**
+ * Pre-render is called at the start of the object render cycle, before any transforms have taken place.
+ * It happens directly AFTER a canvas context.save has happened if added to a Camera.
+ */
+ function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
};
- Template.prototype.render = function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
+ Template.prototype.render = /**
+ * render is called during the objects render cycle, right after all transforms have finished, but before any children/image data is rendered.
+ */
+ function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
};
- Template.prototype.postRender = function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
+ Template.prototype.postRender = /**
+ * Post-render is called during the objects render cycle, after the children/image data has been rendered.
+ * It happens directly BEFORE a canvas context.restore has happened if added to a Camera.
+ */
+ function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
};
return Template;
})();
@@ -114,6 +178,13 @@ var Phaser;
var Phaser;
(function (Phaser) {
(function (FX) {
+ ///
+ /**
+ * Phaser - FX - Camera - Mirror
+ *
+ * Creates a mirror effect for a camera.
+ * Can mirror the camera image horizontally, vertically or both with an optional fill color overlay.
+ */
(function (Camera) {
var Mirror = (function () {
function Mirror(game, parent) {
@@ -128,7 +199,11 @@ var Phaser;
this._canvas.height = parent.height;
this._context = this._canvas.getContext('2d');
}
- Mirror.prototype.start = function (x, y, region, fillColor) {
+ Mirror.prototype.start = /**
+ * This is the rectangular region to grab from the Camera used in the Mirror effect
+ * It is rendered to the Stage at Mirror.x/y (note the use of Stage coordinates, not World coordinates)
+ */
+ function (x, y, region, fillColor) {
if (typeof fillColor === "undefined") { fillColor = 'rgba(0, 0, 100, 0.5)'; }
this.x = x;
this.y = y;
@@ -141,18 +216,34 @@ var Phaser;
this._context.fillStyle = this._mirrorColor;
}
};
- Mirror.prototype.postRender = function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
- this._sx = cameraX + this._mirrorX;
- this._sy = cameraY + this._mirrorY;
+ Mirror.prototype.postRender = /**
+ * Post-render is called during the objects render cycle, after the children/image data has been rendered.
+ * It happens directly BEFORE a canvas context.restore has happened if added to a Camera.
+ */
+ function (camera) {
+ this._sx = camera.screenView.x + this._mirrorX;
+ this._sy = camera.screenView.y + this._mirrorY;
if(this.flipX == true && this.flipY == false) {
this._sx = 0;
} else if(this.flipY == true && this.flipX == false) {
this._sy = 0;
}
- this._context.drawImage(this._game.stage.canvas, this._sx, this._sy, this._mirrorWidth, this._mirrorHeight, 0, 0, this._mirrorWidth, this._mirrorHeight);
+ this._context.drawImage(this._game.stage.canvas, // Source Image
+ this._sx, // Source X (location within the source image)
+ this._sy, // Source Y
+ this._mirrorWidth, // Source Width
+ this._mirrorHeight, // Source Height
+ 0, // Destination X (where on the canvas it'll be drawn)
+ 0, // Destination Y
+ this._mirrorWidth, // Destination Width (always same as Source Width unless scaled)
+ this._mirrorHeight);
+ // Destination Height (always same as Source Height unless scaled)
if(this._mirrorColor) {
this._context.fillRect(0, 0, this._mirrorWidth, this._mirrorHeight);
}
+ if(this.flipX || this.flipY) {
+ this._game.stage.context.save();
+ }
if(this.flipX && this.flipY) {
this._game.stage.context.transform(-1, 0, 0, -1, this._mirrorWidth, this._mirrorHeight);
this._game.stage.context.drawImage(this._canvas, -this.x, -this.y);
@@ -163,6 +254,9 @@ var Phaser;
this._game.stage.context.transform(1, 0, 0, -1, 0, this._mirrorHeight);
this._game.stage.context.drawImage(this._canvas, this.x, -this.y);
}
+ if(this.flipX || this.flipY) {
+ this._game.stage.context.restore();
+ }
};
return Mirror;
})();
@@ -175,19 +269,49 @@ var Phaser;
var Phaser;
(function (Phaser) {
(function (FX) {
+ ///
+ /**
+ * Phaser - FX - Camera - Shadow
+ *
+ * Creates a drop-shadow effect on the camera window.
+ */
(function (Camera) {
var Shadow = (function () {
function Shadow(game, parent) {
+ /**
+ * Render camera shadow or not. (default is false)
+ * @type {boolean}
+ */
this.showShadow = false;
+ /**
+ * Color of shadow, in css color string.
+ * @type {string}
+ */
this.shadowColor = 'rgb(0,0,0)';
+ /**
+ * Blur factor of shadow.
+ * @type {number}
+ */
this.shadowBlur = 10;
+ /**
+ * Offset of the shadow from camera's position.
+ * @type {Point}
+ */
this.shadowOffset = new Phaser.Point(4, 4);
this._game = game;
this._parent = parent;
}
- Shadow.prototype.start = function () {
+ Shadow.prototype.start = /**
+ * You can name the function that starts the effect whatever you like, but we used 'start' in our effects.
+ */
+ function () {
};
- Shadow.prototype.preRender = function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
+ Shadow.prototype.preRender = /**
+ * Pre-render is called at the start of the object render cycle, before any transforms have taken place.
+ * It happens directly AFTER a canvas context.save has happened if added to a Camera.
+ */
+ function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
+ // Shadow
if(this.showShadow == true) {
this._game.stage.context.shadowColor = this.shadowColor;
this._game.stage.context.shadowBlur = this.shadowBlur;
@@ -195,7 +319,11 @@ var Phaser;
this._game.stage.context.shadowOffsetY = this.shadowOffset.y;
}
};
- Shadow.prototype.render = function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
+ Shadow.prototype.render = /**
+ * render is called during the objects render cycle, right after all transforms have finished, but before any children/image data is rendered.
+ */
+ function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
+ // Shadow off
if(this.showShadow == true) {
this._game.stage.context.shadowBlur = 0;
this._game.stage.context.shadowOffsetX = 0;
@@ -213,6 +341,12 @@ var Phaser;
var Phaser;
(function (Phaser) {
(function (FX) {
+ ///
+ /**
+ * Phaser - FX - Camera - Scanlines
+ *
+ * Give your game that classic retro feel!
+ */
(function (Camera) {
var Scanlines = (function () {
function Scanlines(game, parent) {
@@ -221,10 +355,10 @@ var Phaser;
this._game = game;
this._parent = parent;
}
- Scanlines.prototype.postRender = function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
+ Scanlines.prototype.postRender = function (camera) {
this._game.stage.context.fillStyle = this.color;
- for(var y = cameraY; y < cameraHeight; y += this.spacing) {
- this._game.stage.context.fillRect(cameraX, y, cameraWidth, 1);
+ for(var y = camera.screenView.y; y < camera.screenView.height; y += this.spacing) {
+ this._game.stage.context.fillRect(camera.screenView.x, y, camera.screenView.width, 1);
}
};
return Scanlines;
@@ -238,6 +372,12 @@ var Phaser;
var Phaser;
(function (Phaser) {
(function (FX) {
+ ///
+ /**
+ * Phaser - FX - Camera - Shake
+ *
+ * A simple camera shake effect.
+ */
(function (Camera) {
var Shake = (function () {
function Shake(game, camera) {
@@ -254,7 +394,16 @@ var Phaser;
Shake.SHAKE_BOTH_AXES = 0;
Shake.SHAKE_HORIZONTAL_ONLY = 1;
Shake.SHAKE_VERTICAL_ONLY = 2;
- Shake.prototype.start = function (intensity, duration, onComplete, force, direction) {
+ Shake.prototype.start = /**
+ * A simple camera shake effect.
+ *
+ * @param Intensity Percentage of screen size representing the maximum distance that the screen can move while shaking.
+ * @param Duration The length in seconds that the shaking effect should last.
+ * @param OnComplete A function you want to run when the shake effect finishes.
+ * @param Force Force the effect to reset (default = true, unlike flash() and fade()!).
+ * @param Direction Whether to shake on both axes, just up and down, or just side to side (use class constants SHAKE_BOTH_AXES, SHAKE_VERTICAL_ONLY, or SHAKE_HORIZONTAL_ONLY).
+ */
+ function (intensity, duration, onComplete, force, direction) {
if (typeof intensity === "undefined") { intensity = 0.05; }
if (typeof duration === "undefined") { duration = 0.5; }
if (typeof onComplete === "undefined") { onComplete = null; }
@@ -263,6 +412,7 @@ var Phaser;
if(!force && ((this._fxShakeOffset.x != 0) || (this._fxShakeOffset.y != 0))) {
return;
}
+ // If a shake is not already running we need to store the offsets here
if(this._fxShakeOffset.x == 0 && this._fxShakeOffset.y == 0) {
this._fxShakePrevX = this._parent.x;
this._fxShakePrevY = this._parent.y;
@@ -274,6 +424,7 @@ var Phaser;
this._fxShakeOffset.setTo(0, 0);
};
Shake.prototype.postUpdate = function () {
+ // Update the "shake" special effect
if(this._fxShakeDuration > 0) {
this._fxShakeDuration -= this._game.time.elapsed;
if(this._game.math.roundTo(this._fxShakeDuration, -2) <= 0) {
@@ -286,9 +437,11 @@ var Phaser;
}
} else {
if((this._fxShakeDirection == Shake.SHAKE_BOTH_AXES) || (this._fxShakeDirection == Shake.SHAKE_HORIZONTAL_ONLY)) {
+ //this._fxShakeOffset.x = ((this._game.math.random() * this._fxShakeIntensity * this.worldView.width * 2 - this._fxShakeIntensity * this.worldView.width) * this._zoom;
this._fxShakeOffset.x = (this._game.math.random() * this._fxShakeIntensity * this._parent.worldView.width * 2 - this._fxShakeIntensity * this._parent.worldView.width);
}
if((this._fxShakeDirection == Shake.SHAKE_BOTH_AXES) || (this._fxShakeDirection == Shake.SHAKE_VERTICAL_ONLY)) {
+ //this._fxShakeOffset.y = (this._game.math.random() * this._fxShakeIntensity * this.worldView.height * 2 - this._fxShakeIntensity * this.worldView.height) * this._zoom;
this._fxShakeOffset.y = (this._game.math.random() * this._fxShakeIntensity * this._parent.worldView.height * 2 - this._fxShakeIntensity * this._parent.worldView.height);
}
}
@@ -311,6 +464,12 @@ var Phaser;
var Phaser;
(function (Phaser) {
(function (FX) {
+ ///
+ /**
+ * Phaser - FX - Camera - Fade
+ *
+ * The camera is filled with the given color and returns to normal at the given duration.
+ */
(function (Camera) {
var Fade = (function () {
function Fade(game) {
@@ -319,12 +478,21 @@ var Phaser;
this._fxFadeAlpha = 0;
this._game = game;
}
- Fade.prototype.start = function (color, duration, onComplete, force) {
+ Fade.prototype.start = /**
+ * The camera is gradually filled with this color.
+ *
+ * @param Color The color you want to use in 0xRRGGBB format, i.e. 0xffffff for white.
+ * @param Duration How long it takes for the flash to fade.
+ * @param OnComplete An optional function you want to run when the flash finishes. Set to null for no callback.
+ * @param Force Force an already running flash effect to reset.
+ */
+ function (color, duration, onComplete, force) {
if (typeof color === "undefined") { color = 0x000000; }
if (typeof duration === "undefined") { duration = 1; }
if (typeof onComplete === "undefined") { onComplete = null; }
if (typeof force === "undefined") { force = false; }
if(force === false && this._fxFadeAlpha > 0) {
+ // You can't fade again unless you force it
return;
}
if(duration <= 0) {
@@ -339,6 +507,7 @@ var Phaser;
this._fxFadeComplete = onComplete;
};
Fade.prototype.postUpdate = function () {
+ // Update the Fade effect
if(this._fxFadeAlpha > 0) {
this._fxFadeAlpha += this._game.time.elapsed / this._fxFadeDuration;
if(this._game.math.roundTo(this._fxFadeAlpha, -2) >= 1) {
@@ -350,6 +519,7 @@ var Phaser;
}
};
Fade.prototype.postRender = function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
+ // "Fade" FX
if(this._fxFadeAlpha > 0) {
this._game.stage.context.fillStyle = this._fxFadeColor + this._fxFadeAlpha + ')';
this._game.stage.context.fillRect(cameraX, cameraY, cameraWidth, cameraHeight);
diff --git a/todo/phaser tests/camera fx/mirror.js b/todo/phaser tests/camera fx/mirror.js
deleted file mode 100644
index e9abc4c5..00000000
--- a/todo/phaser tests/camera fx/mirror.js
+++ /dev/null
@@ -1,41 +0,0 @@
-///
-///
-(function () {
- var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
- function init() {
- // Just set the world to be the size of the image we're loading in
- myGame.world.setSize(1216, 896);
- myGame.loader.addImageFile('backdrop', 'assets/pics/ninja-masters2.png');
- myGame.loader.load();
- }
- var mirror;
- function create() {
- // What we need is a camera 800x400 pixels in size as the mirror effect will be 200px tall and sit below it.
- // So we resize our default camera to 400px
- myGame.camera.height = 400;
- // Because it's our default camera we need to tell it to disable clipping, otherwise we'll never see the mirror effect render.
- myGame.camera.disableClipping = true;
- // Add our effect to the camera
- mirror = myGame.camera.fx.add(Phaser.FX.Camera.Mirror);
- // The first 2 parameters are the x and y coordinates of where to display the effect. They are in STAGE coordinates, not World.
- // The next is a Quad making up the rectangular region of the Camera that we'll create the effect from (in this case the whole camera).
- // Finally we set the fill color that is put over the top of the mirror effect.
- mirror.start(0, 400, new Phaser.Quad(0, 0, 800, 400), 'rgba(0, 0, 100, 0.7)');
- // Experiment with variations on these to see the different mirror effects that can be achieved.
- //mirror.flipX = true;
- //mirror.flipY = true;
- myGame.add.sprite(0, 0, 'backdrop');
- }
- function update() {
- if(myGame.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
- myGame.camera.scroll.x -= 4;
- } else if(myGame.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
- myGame.camera.scroll.x += 4;
- }
- if(myGame.input.keyboard.isDown(Phaser.Keyboard.UP)) {
- myGame.camera.scroll.y -= 4;
- } else if(myGame.input.keyboard.isDown(Phaser.Keyboard.DOWN)) {
- myGame.camera.scroll.y += 4;
- }
- }
-})();
diff --git a/todo/phaser tests/camera fx/mirror.ts b/todo/phaser tests/camera fx/mirror.ts
deleted file mode 100644
index 3a7cdc92..00000000
--- a/todo/phaser tests/camera fx/mirror.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-///
-///
-
-(function () {
-
- var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
-
- function init() {
-
- // Just set the world to be the size of the image we're loading in
- myGame.world.setSize(1216, 896);
-
- myGame.loader.addImageFile('backdrop', 'assets/pics/ninja-masters2.png');
-
- myGame.loader.load();
-
- }
-
- var mirror: Phaser.FX.Camera.Mirror;
-
- function create() {
-
- // What we need is a camera 800x400 pixels in size as the mirror effect will be 200px tall and sit below it.
- // So we resize our default camera to 400px
- myGame.camera.height = 400;
-
- // Because it's our default camera we need to tell it to disable clipping, otherwise we'll never see the mirror effect render.
- myGame.camera.disableClipping = true;
-
- // Add our effect to the camera
- mirror = myGame.camera.fx.add(Phaser.FX.Camera.Mirror);
-
- // The first 2 parameters are the x and y coordinates of where to display the effect. They are in STAGE coordinates, not World.
- // The next is a Quad making up the rectangular region of the Camera that we'll create the effect from (in this case the whole camera).
- // Finally we set the fill color that is put over the top of the mirror effect.
- mirror.start(0, 400, new Phaser.Quad(0, 0, 800, 400), 'rgba(0, 0, 100, 0.7)');
-
- // Experiment with variations on these to see the different mirror effects that can be achieved.
- //mirror.flipX = true;
- //mirror.flipY = true;
-
- myGame.add.sprite(0, 0, 'backdrop');
-
- }
-
- function update() {
-
- if (myGame.input.keyboard.isDown(Phaser.Keyboard.LEFT))
- {
- myGame.camera.scroll.x -= 4;
- }
- else if (myGame.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
- {
- myGame.camera.scroll.x += 4;
- }
-
- if (myGame.input.keyboard.isDown(Phaser.Keyboard.UP))
- {
- myGame.camera.scroll.y -= 4;
- }
- else if (myGame.input.keyboard.isDown(Phaser.Keyboard.DOWN))
- {
- myGame.camera.scroll.y += 4;
- }
-
- }
-
-})();
diff --git a/todo/phaser tests/camera fx/scanlines.js b/todo/phaser tests/camera fx/scanlines.js
deleted file mode 100644
index 71d9bab5..00000000
--- a/todo/phaser tests/camera fx/scanlines.js
+++ /dev/null
@@ -1,32 +0,0 @@
-///
-///
-(function () {
- var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
- function init() {
- myGame.world.setSize(1216, 896);
- myGame.loader.addImageFile('backdrop', 'assets/pics/ninja-masters2.png');
- myGame.loader.load();
- }
- var scanlines;
- function create() {
- // Add our effect to the camera
- scanlines = myGame.camera.fx.add(Phaser.FX.Camera.Scanlines);
- // We'll have the scanlines spaced out every 2 pixels
- scanlines.spacing = 2;
- // This is the color the lines will be drawn in
- scanlines.color = 'rgba(0, 0, 0, 0.8)';
- myGame.add.sprite(0, 0, 'backdrop');
- }
- function update() {
- if(myGame.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
- myGame.camera.scroll.x -= 4;
- } else if(myGame.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
- myGame.camera.scroll.x += 4;
- }
- if(myGame.input.keyboard.isDown(Phaser.Keyboard.UP)) {
- myGame.camera.scroll.y -= 4;
- } else if(myGame.input.keyboard.isDown(Phaser.Keyboard.DOWN)) {
- myGame.camera.scroll.y += 4;
- }
- }
-})();
diff --git a/todo/phaser tests/camera fx/scanlines.ts b/todo/phaser tests/camera fx/scanlines.ts
deleted file mode 100644
index 019f3024..00000000
--- a/todo/phaser tests/camera fx/scanlines.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-///
-///
-
-(function () {
-
- var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
-
- function init() {
-
- myGame.world.setSize(1216, 896);
-
- myGame.loader.addImageFile('backdrop', 'assets/pics/ninja-masters2.png');
-
- myGame.loader.load();
-
- }
-
- var scanlines: Phaser.FX.Camera.Scanlines;
-
- function create() {
-
- // Add our effect to the camera
- scanlines = myGame.camera.fx.add(Phaser.FX.Camera.Scanlines);
-
- // We'll have the scanlines spaced out every 2 pixels
- scanlines.spacing = 2;
-
- // This is the color the lines will be drawn in
- scanlines.color = 'rgba(0, 0, 0, 0.8)';
-
- myGame.add.sprite(0, 0, 'backdrop');
-
- }
-
- function update() {
-
- if (myGame.input.keyboard.isDown(Phaser.Keyboard.LEFT))
- {
- myGame.camera.scroll.x -= 4;
- }
- else if (myGame.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
- {
- myGame.camera.scroll.x += 4;
- }
-
- if (myGame.input.keyboard.isDown(Phaser.Keyboard.UP))
- {
- myGame.camera.scroll.y -= 4;
- }
- else if (myGame.input.keyboard.isDown(Phaser.Keyboard.DOWN))
- {
- myGame.camera.scroll.y += 4;
- }
-
- }
-
-})();