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

Added Camera Mirror FX and test case.

Browse source
This commit is contained in:
Richard Davey 2013-05-02 01:02:06 +01:00
parent 7d98a1bb9d
commit e62b300a25
16 changed files with 579 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
Phaser/gameobjects/GeomSprite.ts
View file

@ -301,15 +301,24 @@ module Phaser {
// And now the edge points
this._game.stage.context.fillStyle = 'rgb(255,255,255)';
this.renderPoint(this._dx, this._dy, this.rect.topLeft, 2);
this.renderPoint(this._dx, this._dy, this.rect.topCenter, 2);
this.renderPoint(this._dx, this._dy, this.rect.topRight, 2);
this.renderPoint(this._dx, this._dy, this.rect.leftCenter, 2);
this.renderPoint(this._dx, this._dy, this.rect.center, 2);
this.renderPoint(this._dx, this._dy, this.rect.rightCenter, 2);
this.renderPoint(this._dx, this._dy, this.rect.bottomLeft, 2);
this.renderPoint(this._dx, this._dy, this.rect.bottomCenter, 2);
this.renderPoint(this._dx, this._dy, this.rect.bottomRight, 2);
//this.renderPoint(this.rect.topLeft, this._dx, this._dy, 2);
//this.renderPoint(this.rect.topCenter, this._dx, this._dy, 2);
//this.renderPoint(this.rect.topRight, this._dx, this._dy, 2);
//this.renderPoint(this.rect.leftCenter, this._dx, this._dy, 2);
//this.renderPoint(this.rect.center, this._dx, this._dy, 2);
//this.renderPoint(this.rect.rightCenter, this._dx, this._dy, 2);
//this.renderPoint(this.rect.bottomLeft, this._dx, this._dy, 2);
//this.renderPoint(this.rect.bottomCenter, this._dx, this._dy, 2);
//this.renderPoint(this.rect.bottomRight, this._dx, this._dy, 2);
this.renderPoint(this.rect.topLeft, 0, 0, 2);
this.renderPoint(this.rect.topCenter, 0, 0, 2);
this.renderPoint(this.rect.topRight, 0, 0, 2);
this.renderPoint(this.rect.leftCenter, 0, 0, 2);
this.renderPoint(this.rect.center, 0, 0, 2);
this.renderPoint(this.rect.rightCenter, 0, 0, 2);
this.renderPoint(this.rect.bottomLeft, 0, 0, 2);
this.renderPoint(this.rect.bottomCenter, 0, 0, 2);
this.renderPoint(this.rect.bottomRight, 0, 0, 2);
}
@ -330,11 +339,9 @@ module Phaser {
}
public renderPoint(offsetX, offsetY, point, size) {
public renderPoint(point, offsetX?: number = 0, offsetY?: number = 0, size?: number = 1) {
offsetX = 0;
offsetY = 0;
this._game.stage.context.fillRect(offsetX + point.x, offsetY + point.y, 1, 1);
this._game.stage.context.fillRect(offsetX + point.x, offsetY + point.y, size, size);
}

5
Phaser/system/Camera.ts
View file

@ -62,6 +62,7 @@ module Phaser {
public deadzone: Rectangle = null;
// Camera Border
public disableClipping: bool = false;
public showBorder: bool = false;
public borderColor: string = 'rgb(255,255,255)';
@ -317,7 +318,7 @@ module Phaser {
this.fx.render(this, this._stageX, this._stageY, this.worldView.width, this.worldView.height);
// Clip the camera so we don't get sprites appearing outside the edges
if (this._clip)
if (this._clip && this.disableClipping == false)
{
this._game.stage.context.beginPath();
this._game.stage.context.rect(this._sx, this._sy, this.worldView.width, this.worldView.height);
@ -343,7 +344,7 @@ module Phaser {
this.fx.postRender(this, this._sx, this._sy, this.worldView.width, this.worldView.height);
if (this._rotation !== 0 || this._clip)
if (this._rotation !== 0 || (this._clip && this.disableClipping == false))
{
this._game.stage.context.translate(0, 0);
}

9
README.md
View file

@ -7,8 +7,8 @@ By Richard Davey, [Photon Storm](http://www.photonstorm.com)
Phaser is a 2D JavaScript/TypeScript HTML5 Game Framework based heavily on [Flixel](http://www.flixel.org).
[Twitter](https://twitter.com/photonstorm)
[Development Blog](http://www.photonstorm.com)
[Twitter](https://twitter.com/photonstorm)<br />
[Development Blog](http://www.photonstorm.com)<br />
[Support Forum](http://www.html5gamedevs.com/forum/14-phaser/)
Try out the [Phaser Test Suite](http://gametest.mobi/phaser/)
@ -33,6 +33,11 @@ V0.9.5
* Fixed a bug in Flash, Fade and Shake where the duration would fail on anything above 3 seconds.
* Fixed a bug in Camera Shake that made it go a bit haywire, now shakes correctly.
* Added new Scanlines Camera FX.
* Fixed offset values being ignored in GeomSprite.renderPoint (thanks bapuna).
* Added new Mirror Camera FX. Can mirror the camera image horizontally, vertically or both with an optional fill color overlay.
* Added Camera.disableClipping for when you don't care about things being drawn outside the edge (usful for some FX).
Requirements

19
SpecialFX/Camera/Mirror.js Normal file
View file

@ -0,0 +1,19 @@
var Shapes;
(function (Shapes) {
var Point = Shapes.Point = (function () {
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.getDist = function () {
return Math.sqrt((this.x * this.x) + (this.y * this.y));
};
Point.origin = new Point(0, 0);
return Point;
})();
})(Shapes || (Shapes = {}));
var p = new Shapes.Point(3, 4);
var dist = p.getDist();

130
SpecialFX/Camera/Mirror.ts Normal file
View file

@ -0,0 +1,130 @@
/// <reference path="../../Phaser/Game.d.ts" />
/// <reference path="../../Phaser/system/Camera.d.ts" />
/// <reference path="../../Phaser/FXManager.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.Quad, 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);
}
}
}
}

11
SpecialFX/SpecialFX.csproj
View file

@ -1,4 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<PropertyGroup>
<Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
@ -48,6 +48,7 @@
<TypeScriptSourceMap>false</TypeScriptSourceMap>
<TypeScriptOutFile>../build/phaser-fx.js</TypeScriptOutFile>
<TypeScriptGeneratesDeclarations>true</TypeScriptGeneratesDeclarations>
<TypeScriptIncludeDefaultLib>true</TypeScriptIncludeDefaultLib>
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)' == 'Release'">
<TypeScriptTarget>ES5</TypeScriptTarget>
@ -55,6 +56,7 @@
<TypeScriptSourceMap>false</TypeScriptSourceMap>
<TypeScriptOutFile>../build/phaser-fx.js</TypeScriptOutFile>
<TypeScriptGeneratesDeclarations>true</TypeScriptGeneratesDeclarations>
<TypeScriptIncludeDefaultLib>true</TypeScriptIncludeDefaultLib>
</PropertyGroup>
<ItemGroup>
<TypeScriptCompile Include="Camera\Flash.ts" />
@ -64,6 +66,10 @@
<DependentUpon>Fade.ts</DependentUpon>
</Content>
<TypeScriptCompile Include="Camera\Template.ts" />
<TypeScriptCompile Include="Camera\Mirror.ts" />
<Content Include="Camera\Mirror.js">
<DependentUpon>Mirror.ts</DependentUpon>
</Content>
<Content Include="Camera\Template.js">
<DependentUpon>Template.ts</DependentUpon>
</Content>
@ -80,6 +86,9 @@
<DependentUpon>Flash.ts</DependentUpon>
</Content>
</ItemGroup>
<ItemGroup>
<Folder Include="Textures\" />
</ItemGroup>
<Import Project="$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets" />
<PropertyGroup>
<PostBuildEvent>cd $(ProjectDir)..\build

4
Tests/Tests.csproj
View file

@ -107,6 +107,10 @@
</Content>
<TypeScriptCompile Include="camera fx\shake.ts" />
<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>

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

@ -0,0 +1,40 @@
/// <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 mirror;
var cam;
function create() {
// What we need is a camera 800x400 pixels in size, the mirror effect will 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
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 we're going to display the mirror effect in STAGE coordinates
// The next is 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)');
mirror.flipX = true;
mirror.flipY = true;
myGame.createSprite(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
Tests/camera fx/mirror.ts Normal file
View file

@ -0,0 +1,68 @@
/// <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, the mirror effect will 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
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 we're going to display the mirror effect in STAGE coordinates
// The next is 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.createSprite(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;
}
}
})();

4
Tests/camera fx/scanlines.js
View file

@ -11,7 +11,9 @@
function create() {
// Add our effect to the camera
scanlines = myGame.camera.fx.add(Phaser.FX.Camera.Scanlines);
scanlines.spacing = 3;
// 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.createSprite(0, 0, 'backdrop');
}

92
Tests/phaser-fx.js
View file

@ -129,6 +129,98 @@ var Phaser;
var FX = Phaser.FX;
})(Phaser || (Phaser = {}));
var Phaser;
(function (Phaser) {
(function (FX) {
/// <reference path="../../Phaser/Game.d.ts" />
/// <reference path="../../Phaser/system/Camera.d.ts" />
/// <reference path="../../Phaser/FXManager.d.ts" />
/**
* Phaser - FX - Camera - Mirror
*
* 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 Mirror = (function () {
function Mirror(game, parent) {
this._mirrorColor = null;
this.flipX = false;
this.flipY = true;
this.cls = false;
this._game = game;
this._parent = parent;
this._canvas = document.createElement('canvas');
this._canvas.width = parent.width;
this._canvas.height = parent.height;
this._context = this._canvas.getContext('2d');
}
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;
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;
}
};
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, cameraX, cameraY, cameraWidth, cameraHeight) {
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);
}
//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);
}
//this._game.stage.context.restore();
};
return Mirror;
})();
Camera.Mirror = Mirror;
})(FX.Camera || (FX.Camera = {}));
var Camera = FX.Camera;
})(Phaser.FX || (Phaser.FX = {}));
var FX = Phaser.FX;
})(Phaser || (Phaser = {}));
var Phaser;
(function (Phaser) {
(function (FX) {
/// <reference path="../../Phaser/Game.d.ts" />

41
Tests/phaser.js
View file

@ -925,6 +925,7 @@ var Phaser;
this.bounds = null;
this.deadzone = null;
// Camera Border
this.disableClipping = false;
this.showBorder = false;
this.borderColor = 'rgb(255,255,255)';
// Camera Background Color
@ -1113,7 +1114,7 @@ var Phaser;
}
this.fx.render(this, this._stageX, this._stageY, this.worldView.width, this.worldView.height);
// Clip the camera so we don't get sprites appearing outside the edges
if(this._clip) {
if(this._clip && this.disableClipping == false) {
this._game.stage.context.beginPath();
this._game.stage.context.rect(this._sx, this._sy, this.worldView.width, this.worldView.height);
this._game.stage.context.closePath();
@ -1131,7 +1132,7 @@ var Phaser;
this._game.stage.context.scale(1, 1);
}
this.fx.postRender(this, this._sx, this._sy, this.worldView.width, this.worldView.height);
if(this._rotation !== 0 || this._clip) {
if(this._rotation !== 0 || (this._clip && this.disableClipping == false)) {
this._game.stage.context.translate(0, 0);
}
this._game.stage.context.restore();
@ -10927,15 +10928,24 @@ var Phaser;
}
// And now the edge points
this._game.stage.context.fillStyle = 'rgb(255,255,255)';
this.renderPoint(this._dx, this._dy, this.rect.topLeft, 2);
this.renderPoint(this._dx, this._dy, this.rect.topCenter, 2);
this.renderPoint(this._dx, this._dy, this.rect.topRight, 2);
this.renderPoint(this._dx, this._dy, this.rect.leftCenter, 2);
this.renderPoint(this._dx, this._dy, this.rect.center, 2);
this.renderPoint(this._dx, this._dy, this.rect.rightCenter, 2);
this.renderPoint(this._dx, this._dy, this.rect.bottomLeft, 2);
this.renderPoint(this._dx, this._dy, this.rect.bottomCenter, 2);
this.renderPoint(this._dx, this._dy, this.rect.bottomRight, 2);
//this.renderPoint(this.rect.topLeft, this._dx, this._dy, 2);
//this.renderPoint(this.rect.topCenter, this._dx, this._dy, 2);
//this.renderPoint(this.rect.topRight, this._dx, this._dy, 2);
//this.renderPoint(this.rect.leftCenter, this._dx, this._dy, 2);
//this.renderPoint(this.rect.center, this._dx, this._dy, 2);
//this.renderPoint(this.rect.rightCenter, this._dx, this._dy, 2);
//this.renderPoint(this.rect.bottomLeft, this._dx, this._dy, 2);
//this.renderPoint(this.rect.bottomCenter, this._dx, this._dy, 2);
//this.renderPoint(this.rect.bottomRight, this._dx, this._dy, 2);
this.renderPoint(this.rect.topLeft, 0, 0, 2);
this.renderPoint(this.rect.topCenter, 0, 0, 2);
this.renderPoint(this.rect.topRight, 0, 0, 2);
this.renderPoint(this.rect.leftCenter, 0, 0, 2);
this.renderPoint(this.rect.center, 0, 0, 2);
this.renderPoint(this.rect.rightCenter, 0, 0, 2);
this.renderPoint(this.rect.bottomLeft, 0, 0, 2);
this.renderPoint(this.rect.bottomCenter, 0, 0, 2);
this.renderPoint(this.rect.bottomRight, 0, 0, 2);
}
this._game.stage.restoreCanvasValues();
if(this.rotation !== 0) {
@ -10947,10 +10957,11 @@ var Phaser;
}
return true;
};
GeomSprite.prototype.renderPoint = function (offsetX, offsetY, point, size) {
offsetX = 0;
offsetY = 0;
this._game.stage.context.fillRect(offsetX + point.x, offsetY + point.y, 1, 1);
GeomSprite.prototype.renderPoint = function (point, offsetX, offsetY, size) {
if (typeof offsetX === "undefined") { offsetX = 0; }
if (typeof offsetY === "undefined") { offsetY = 0; }
if (typeof size === "undefined") { size = 1; }
this._game.stage.context.fillRect(offsetX + point.x, offsetY + point.y, size, size);
};
GeomSprite.prototype.renderDebugInfo = function (x, y, color) {
if (typeof color === "undefined") { color = 'rgb(255,255,255)'; }

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

@ -64,6 +64,43 @@ module Phaser.FX.Camera {
}
}
/**
* Phaser - FX - Camera - Mirror
*
* 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 Mirror {
constructor(game: Game, parent: Camera);
private _game;
private _parent;
private _canvas;
private _context;
private _sx;
private _sy;
private _mirrorX;
private _mirrorY;
private _mirrorWidth;
private _mirrorHeight;
private _mirrorColor;
public flipX: bool;
public flipY: bool;
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: Quad, fillColor?: string): 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 - Scanlines
*
* Give your game that classic retro feel!

92
build/phaser-fx.js
View file

@ -129,6 +129,98 @@ var Phaser;
var FX = Phaser.FX;
})(Phaser || (Phaser = {}));
var Phaser;
(function (Phaser) {
(function (FX) {
/// <reference path="../../Phaser/Game.d.ts" />
/// <reference path="../../Phaser/system/Camera.d.ts" />
/// <reference path="../../Phaser/FXManager.d.ts" />
/**
* Phaser - FX - Camera - Mirror
*
* 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 Mirror = (function () {
function Mirror(game, parent) {
this._mirrorColor = null;
this.flipX = false;
this.flipY = true;
this.cls = false;
this._game = game;
this._parent = parent;
this._canvas = document.createElement('canvas');
this._canvas.width = parent.width;
this._canvas.height = parent.height;
this._context = this._canvas.getContext('2d');
}
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;
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;
}
};
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, cameraX, cameraY, cameraWidth, cameraHeight) {
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);
}
//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);
}
//this._game.stage.context.restore();
};
return Mirror;
})();
Camera.Mirror = Mirror;
})(FX.Camera || (FX.Camera = {}));
var Camera = FX.Camera;
})(Phaser.FX || (Phaser.FX = {}));
var FX = Phaser.FX;
})(Phaser || (Phaser = {}));
var Phaser;
(function (Phaser) {
(function (FX) {
/// <reference path="../../Phaser/Game.d.ts" />

3
build/phaser.d.ts vendored
View file

@ -564,6 +564,7 @@ module Phaser {
public scroll: MicroPoint;
public bounds: Rectangle;
public deadzone: Rectangle;
public disableClipping: bool;
public showBorder: bool;
public borderColor: string;
public opaque: bool;
@ -5274,7 +5275,7 @@ module Phaser {
public update(): void;
public inCamera(camera: Rectangle): bool;
public render(camera: Camera, cameraOffsetX: number, cameraOffsetY: number): bool;
public renderPoint(offsetX, offsetY, point, size): void;
public renderPoint(point, offsetX?: number, offsetY?: number, size?: number): void;
public renderDebugInfo(x: number, y: number, color?: string): void;
public collide(source: GeomSprite): bool;
}

41
build/phaser.js
View file

@ -925,6 +925,7 @@ var Phaser;
this.bounds = null;
this.deadzone = null;
// Camera Border
this.disableClipping = false;
this.showBorder = false;
this.borderColor = 'rgb(255,255,255)';
// Camera Background Color
@ -1113,7 +1114,7 @@ var Phaser;
}
this.fx.render(this, this._stageX, this._stageY, this.worldView.width, this.worldView.height);
// Clip the camera so we don't get sprites appearing outside the edges
if(this._clip) {
if(this._clip && this.disableClipping == false) {
this._game.stage.context.beginPath();
this._game.stage.context.rect(this._sx, this._sy, this.worldView.width, this.worldView.height);
this._game.stage.context.closePath();
@ -1131,7 +1132,7 @@ var Phaser;
this._game.stage.context.scale(1, 1);
}
this.fx.postRender(this, this._sx, this._sy, this.worldView.width, this.worldView.height);
if(this._rotation !== 0 || this._clip) {
if(this._rotation !== 0 || (this._clip && this.disableClipping == false)) {
this._game.stage.context.translate(0, 0);
}
this._game.stage.context.restore();
@ -10927,15 +10928,24 @@ var Phaser;
}
// And now the edge points
this._game.stage.context.fillStyle = 'rgb(255,255,255)';
this.renderPoint(this._dx, this._dy, this.rect.topLeft, 2);
this.renderPoint(this._dx, this._dy, this.rect.topCenter, 2);
this.renderPoint(this._dx, this._dy, this.rect.topRight, 2);
this.renderPoint(this._dx, this._dy, this.rect.leftCenter, 2);
this.renderPoint(this._dx, this._dy, this.rect.center, 2);
this.renderPoint(this._dx, this._dy, this.rect.rightCenter, 2);
this.renderPoint(this._dx, this._dy, this.rect.bottomLeft, 2);
this.renderPoint(this._dx, this._dy, this.rect.bottomCenter, 2);
this.renderPoint(this._dx, this._dy, this.rect.bottomRight, 2);
//this.renderPoint(this.rect.topLeft, this._dx, this._dy, 2);
//this.renderPoint(this.rect.topCenter, this._dx, this._dy, 2);
//this.renderPoint(this.rect.topRight, this._dx, this._dy, 2);
//this.renderPoint(this.rect.leftCenter, this._dx, this._dy, 2);
//this.renderPoint(this.rect.center, this._dx, this._dy, 2);
//this.renderPoint(this.rect.rightCenter, this._dx, this._dy, 2);
//this.renderPoint(this.rect.bottomLeft, this._dx, this._dy, 2);
//this.renderPoint(this.rect.bottomCenter, this._dx, this._dy, 2);
//this.renderPoint(this.rect.bottomRight, this._dx, this._dy, 2);
this.renderPoint(this.rect.topLeft, 0, 0, 2);
this.renderPoint(this.rect.topCenter, 0, 0, 2);
this.renderPoint(this.rect.topRight, 0, 0, 2);
this.renderPoint(this.rect.leftCenter, 0, 0, 2);
this.renderPoint(this.rect.center, 0, 0, 2);
this.renderPoint(this.rect.rightCenter, 0, 0, 2);
this.renderPoint(this.rect.bottomLeft, 0, 0, 2);
this.renderPoint(this.rect.bottomCenter, 0, 0, 2);
this.renderPoint(this.rect.bottomRight, 0, 0, 2);
}
this._game.stage.restoreCanvasValues();
if(this.rotation !== 0) {
@ -10947,10 +10957,11 @@ var Phaser;
}
return true;
};
GeomSprite.prototype.renderPoint = function (offsetX, offsetY, point, size) {
offsetX = 0;
offsetY = 0;
this._game.stage.context.fillRect(offsetX + point.x, offsetY + point.y, 1, 1);
GeomSprite.prototype.renderPoint = function (point, offsetX, offsetY, size) {
if (typeof offsetX === "undefined") { offsetX = 0; }
if (typeof offsetY === "undefined") { offsetY = 0; }
if (typeof size === "undefined") { size = 1; }
this._game.stage.context.fillRect(offsetX + point.x, offsetY + point.y, size, size);
};
GeomSprite.prototype.renderDebugInfo = function (x, y, color) {
if (typeof color === "undefined") { color = 'rgb(255,255,255)'; }