Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-10 15:14:47 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fixed Camera FX: Mirror and Scanlines and updated the tests.

Browse source
This commit is contained in:
Richard Davey 2013-08-02 20:03:53 +01:00
parent f3dcd3e831
commit 84ef32e62a
13 changed files with 660 additions and 262 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
SpecialFX/Camera/Border.ts
View file

@ -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();
}

21
SpecialFX/Camera/Mirror.ts
View file

@ -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();
}
}
}

6
SpecialFX/Camera/Scanlines.ts
View file

@ -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);
}
}

4
Tests/Tests.csproj
View file

@ -79,6 +79,10 @@
<DependentUpon>fade.ts</DependentUpon>
</Content>
<TypeScriptCompile Include="camera fx\scanlines.ts" />
<TypeScriptCompile Include="camera fx\mirror.ts" />
<Content Include="camera fx\mirror.js">
<DependentUpon>mirror.ts</DependentUpon>
</Content>
<Content Include="camera fx\scanlines.js">
<DependentUpon>scanlines.ts</DependentUpon>
</Content>

41
Tests/camera fx/mirror.js Normal file
View file

@ -0,0 +1,41 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../build/phaser-fx.d.ts" />
(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;
}
}
})();

70
Tests/camera fx/mirror.ts Normal file
View file

@ -0,0 +1,70 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../build/phaser-fx.d.ts" />
(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 = <Phaser.FX.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;
}
}
})();

218
Tests/phaser-fx.js
View file

@ -1,6 +1,12 @@
var Phaser;
var Phaser;
(function (Phaser) {
(function (FX) {
/// <reference path="../../build/phaser.d.ts" />
/**
* 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) {
/// <reference path="../../build/phaser.d.ts" />
/**
* 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) {
/// <reference path="../../build/phaser.d.ts" />
/**
* 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) {
/// <reference path="../../build/phaser.d.ts" />
/**
* 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) {
/// <reference path="../../build/phaser.d.ts" />
/**
* 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) {
/// <reference path="../../build/phaser.d.ts" />
/**
* 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) {
/// <reference path="../../build/phaser.d.ts" />
/**
* 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) {
/// <reference path="../../build/phaser.d.ts" />
/**
* 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);

142
build/phaser-fx.d.ts vendored
View file

@ -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;

218
build/phaser-fx.js
View file

@ -1,6 +1,12 @@
var Phaser;
var Phaser;
(function (Phaser) {
(function (FX) {
/// <reference path="../../build/phaser.d.ts" />
/**
* 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) {
/// <reference path="../../build/phaser.d.ts" />
/**
* 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) {
/// <reference path="../../build/phaser.d.ts" />
/**
* 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) {
/// <reference path="../../build/phaser.d.ts" />
/**
* 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) {
/// <reference path="../../build/phaser.d.ts" />
/**
* 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) {
/// <reference path="../../build/phaser.d.ts" />
/**
* 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) {
/// <reference path="../../build/phaser.d.ts" />
/**
* 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) {
/// <reference path="../../build/phaser.d.ts" />
/**
* 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);

41
todo/phaser tests/camera fx/mirror.js
View file

@ -1,41 +0,0 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../build/phaser-fx.d.ts" />
(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;
}
}
})();

68
todo/phaser tests/camera fx/mirror.ts
View file

@ -1,68 +0,0 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../build/phaser-fx.d.ts" />
(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 = <Phaser.FX.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;
}
}
})();

32
todo/phaser tests/camera fx/scanlines.js
View file

@ -1,32 +0,0 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../build/phaser-fx.d.ts" />
(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;
}
}
})();

57
todo/phaser tests/camera fx/scanlines.ts
View file

@ -1,57 +0,0 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../build/phaser-fx.d.ts" />
(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 = <Phaser.FX.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;
}
}
})();