mirror of
https://github.com/photonstorm/phaser
synced 2025-02-16 22:18:29 +00:00
128 lines
4.3 KiB
TypeScript
128 lines
4.3 KiB
TypeScript
/// <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.
|
|
*/
|
|
|
|
module Phaser.FX.Camera {
|
|
|
|
export class Mirror {
|
|
|
|
constructor(game: Game, parent: Phaser.Camera) {
|
|
|
|
this._game = game;
|
|
this._parent = parent;
|
|
|
|
this._canvas = <HTMLCanvasElement> document.createElement('canvas');
|
|
this._canvas.width = parent.width;
|
|
this._canvas.height = parent.height;
|
|
this._context = this._canvas.getContext('2d');
|
|
|
|
}
|
|
|
|
private _game: Game;
|
|
private _parent: Phaser.Camera;
|
|
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 flipX: bool = false;
|
|
public flipY: bool = true;
|
|
|
|
public x: number;
|
|
public y: number;
|
|
public cls: bool = false;
|
|
|
|
/**
|
|
* 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: Phaser.Rectangle, fillColor?: string = 'rgba(0, 0, 100, 0.5)') {
|
|
|
|
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;
|
|
}
|
|
|
|
}
|
|
|
|
/**
|
|
* 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) {
|
|
|
|
//if (this.cls)
|
|
//{
|
|
// this._context.clearRect(0, 0, this._mirrorWidth, this._mirrorHeight);
|
|
//}
|
|
|
|
this._sx = cameraX + this._mirrorX;
|
|
this._sy = cameraY + 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, // 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.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);
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|