2013-08-06 02:14:48 +00:00
|
|
|
/// <reference path="../../Phaser/Game.ts" />
|
|
|
|
/// <reference path="../../Phaser/core/Plugin.ts" />
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Phaser - Plugins - Camera FX - Mirrir
|
|
|
|
*
|
|
|
|
* Give your game that classic retro feel!
|
|
|
|
*/
|
|
|
|
|
|
|
|
module Phaser.Plugins.CameraFX {
|
|
|
|
|
|
|
|
export class Mirror extends Phaser.Plugin {
|
|
|
|
|
|
|
|
constructor(game: Phaser.Game, parent) {
|
|
|
|
|
|
|
|
super(game, parent);
|
|
|
|
this.camera = parent;
|
|
|
|
|
|
|
|
this._canvas = <HTMLCanvasElement> document.createElement('canvas');
|
|
|
|
this._canvas.width = parent.width;
|
|
|
|
this._canvas.height = parent.height;
|
|
|
|
this._context = this._canvas.getContext('2d');
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
private _canvas: HTMLCanvasElement;
|
|
|
|
private _context: CanvasRenderingContext2D;
|
|
|
|
|
|
|
|
private _sx: number;
|
|
|
|
private _sy: number;
|
|
|
|
private _mirrorX: number;
|
|
|
|
private _mirrorY: number;
|
|
|
|
private _mirrorWidth: number;
|
|
|
|
private _mirrorHeight: number;
|
|
|
|
private _mirrorColor: string = null;
|
|
|
|
|
|
|
|
public camera: Phaser.Camera;
|
|
|
|
|
2013-08-13 03:22:24 +00:00
|
|
|
public flipX: bool = false;
|
|
|
|
public flipY: bool = true;
|
2013-08-06 02:14:48 +00:00
|
|
|
|
|
|
|
public x: number;
|
|
|
|
public y: number;
|
2013-08-13 03:22:24 +00:00
|
|
|
public cls: bool = false;
|
2013-08-06 02:14:48 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* 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)
|
|
|
|
*/
|
2013-08-08 10:34:33 +00:00
|
|
|
public start(x: number, y: number, region: Phaser.Rectangle, fillColor: string = 'rgba(0, 0, 100, 0.5)') {
|
2013-08-06 02:14:48 +00:00
|
|
|
|
|
|
|
this.x = x;
|
|
|
|
this.y = y;
|
|
|
|
|
|
|
|
this._mirrorX = region.x;
|
|
|
|
this._mirrorY = region.y;
|
|
|
|
this._mirrorWidth = region.width;
|
|
|
|
this._mirrorHeight = region.height;
|
|
|
|
|
|
|
|
if (fillColor)
|
|
|
|
{
|
|
|
|
this._mirrorColor = fillColor;
|
|
|
|
this._context.fillStyle = this._mirrorColor;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
public postRender() {
|
|
|
|
|
|
|
|
this._sx = this.camera.screenView.x + this._mirrorX;
|
|
|
|
this._sy = this.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
|
|
|
|
);
|
|
|
|
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
else if (this.flipX)
|
|
|
|
{
|
|
|
|
this.game.stage.context.transform(-1, 0, 0, 1, this._mirrorWidth, 0);
|
|
|
|
this.game.stage.context.drawImage(this._canvas, -this.x, this.y);
|
|
|
|
}
|
|
|
|
else if (this.flipY)
|
|
|
|
{
|
|
|
|
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();
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|