Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-27 07:01:20 +00:00
Code Issues Projects Releases Packages Wiki Activity
phaser/Tests/phaser-fx.js

534 lines
26 KiB
JavaScript
Raw Normal View History

New FXManager system and Camera FX now in place.
2013-05-01 03:10:21 +00:00
var Phaser;
(function (Phaser) {
(function (FX) {
Preparing new tests
2013-05-29 01:58:56 +00:00
/// <reference path="../../build/phaser.d.ts" />
New FXManager system and Camera FX now in place.
2013-05-01 03:10:21 +00:00
/**
* 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) {
this._fxFlashComplete = null;
this._fxFlashDuration = 0;
this._fxFlashAlpha = 0;
this._game = game;
}
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) {
duration = 1;
}
var red = color >> 16 & 0xFF;
var green = color >> 8 & 0xFF;
var blue = color & 0xFF;
this._fxFlashColor = 'rgba(' + red + ',' + green + ',' + blue + ',';
this._fxFlashDuration = duration;
this._fxFlashAlpha = 1;
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) {
this._fxFlashAlpha = 0;
if(this._fxFlashComplete !== null) {
this._fxFlashComplete();
}
}
}
};
Flash.prototype.postRender = function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
if(this._fxFlashAlpha > 0) {
this._game.stage.context.fillStyle = this._fxFlashColor + this._fxFlashAlpha + ')';
this._game.stage.context.fillRect(cameraX, cameraY, cameraWidth, cameraHeight);
}
};
return Flash;
})();
Camera.Flash = Flash;
})(FX.Camera || (FX.Camera = {}));
var Camera = FX.Camera;
})(Phaser.FX || (Phaser.FX = {}));
var FX = Phaser.FX;
})(Phaser || (Phaser = {}));
var Phaser;
(function (Phaser) {
(function (FX) {
Preparing new tests
2013-05-29 01:58:56 +00:00
/// <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 = /**
* You can name the function that starts the effect whatever you like, but we used 'start' in our effects.
*/
function () {
};
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, cameraX, cameraY, cameraWidth, cameraHeight) {
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.stroke();
}
};
return Border;
})();
Camera.Border = Border;
})(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="../../build/phaser.d.ts" />
New FXManager system and Camera FX now in place.
2013-05-01 03:10:21 +00:00
/**
* 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 = /**
* You can name the function that starts the effect whatever you like, but we used 'start' in our effects.
*/
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 = /**
* Post-update is called at the end of the objects update cycle, after other update logic has taken place.
*/
function () {
};
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 = /**
* 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 = /**
* 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;
})();
Camera.Template = Template;
})(FX.Camera || (FX.Camera = {}));
var Camera = FX.Camera;
})(Phaser.FX || (Phaser.FX = {}));
var FX = Phaser.FX;
})(Phaser || (Phaser = {}));
var Phaser;
Added Camera Mirror FX and test case.
2013-05-02 00:02:06 +00:00
(function (Phaser) {
(function (FX) {
Preparing new tests
2013-05-29 01:58:56 +00:00
/// <reference path="../../build/phaser.d.ts" />
Added Camera Mirror FX and test case.
2013-05-02 00:02:06 +00:00
/**
* Phaser - FX - Camera - Mirror
*
Added FullScreen API support and fixed numerous StageScaleMode issues.
2013-05-14 02:37:38 +00:00
* Creates a mirror effect for a camera.
* Can mirror the camera image horizontally, vertically or both with an optional fill color overlay.
Added Camera Mirror FX and test case.
2013-05-02 00:02:06 +00:00
*/
(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) {
Added FullScreen API support and fixed numerous StageScaleMode issues.
2013-05-14 02:37:38 +00:00
if (typeof fillColor === "undefined") { fillColor = 'rgba(0, 0, 100, 0.5)'; }
Added Camera Mirror FX and test case.
2013-05-02 00:02:06 +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;
}
};
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) {
Preparing new tests
2013-05-29 01:58:56 +00:00
//if (this.cls)
//{
// this._context.clearRect(0, 0, this._mirrorWidth, this._mirrorHeight);
//}
Added Camera Mirror FX and test case.
2013-05-02 00:02:06 +00:00
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);
}
Added FullScreen API support and fixed numerous StageScaleMode issues.
2013-05-14 02:37:38 +00:00
};
Added Camera Mirror FX and test case.
2013-05-02 00:02:06 +00:00
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;
New FXManager system and Camera FX now in place.
2013-05-01 03:10:21 +00:00
(function (Phaser) {
(function (FX) {
Preparing new tests
2013-05-29 01:58:56 +00:00
/// <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 = /**
* You can name the function that starts the effect whatever you like, but we used 'start' in our effects.
*/
function () {
};
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;
this._game.stage.context.shadowOffsetX = this.shadowOffset.x;
this._game.stage.context.shadowOffsetY = this.shadowOffset.y;
}
};
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;
this._game.stage.context.shadowOffsetY = 0;
}
};
return Shadow;
})();
Camera.Shadow = Shadow;
})(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="../../build/phaser.d.ts" />
New FXManager system and Camera FX now in place.
2013-05-01 03:10:21 +00:00
/**
* Phaser - FX - Camera - Scanlines
*
* Give your game that classic retro feel!
*/
(function (Camera) {
var Scanlines = (function () {
function Scanlines(game, parent) {
this.spacing = 4;
this.color = 'rgba(0, 0, 0, 0.3)';
this._game = game;
this._parent = parent;
}
Scanlines.prototype.postRender = function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
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);
}
};
return Scanlines;
})();
Camera.Scanlines = Scanlines;
})(FX.Camera || (FX.Camera = {}));
var Camera = FX.Camera;
})(Phaser.FX || (Phaser.FX = {}));
var FX = Phaser.FX;
})(Phaser || (Phaser = {}));
var Phaser;
(function (Phaser) {
(function (FX) {
Preparing new tests
2013-05-29 01:58:56 +00:00
/// <reference path="../../build/phaser.d.ts" />
New FXManager system and Camera FX now in place.
2013-05-01 03:10:21 +00:00
/**
* Phaser - FX - Camera - Shake
*
* A simple camera shake effect.
*/
(function (Camera) {
var Shake = (function () {
function Shake(game, camera) {
this._fxShakeIntensity = 0;
this._fxShakeDuration = 0;
this._fxShakeComplete = null;
Preparing new tests
2013-05-29 01:58:56 +00:00
this._fxShakeOffset = new Phaser.Point(0, 0);
New FXManager system and Camera FX now in place.
2013-05-01 03:10:21 +00:00
this._fxShakeDirection = 0;
this._fxShakePrevX = 0;
this._fxShakePrevY = 0;
this._game = game;
this._parent = camera;
}
Shake.SHAKE_BOTH_AXES = 0;
Shake.SHAKE_HORIZONTAL_ONLY = 1;
Shake.SHAKE_VERTICAL_ONLY = 2;
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; }
if (typeof force === "undefined") { force = true; }
if (typeof direction === "undefined") { direction = Shake.SHAKE_BOTH_AXES; }
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;
}
this._fxShakeIntensity = intensity;
this._fxShakeDuration = duration;
this._fxShakeComplete = onComplete;
this._fxShakeDirection = direction;
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) {
this._fxShakeDuration = 0;
this._fxShakeOffset.setTo(0, 0);
this._parent.x = this._fxShakePrevX;
this._parent.y = this._fxShakePrevY;
if(this._fxShakeComplete != null) {
this._fxShakeComplete();
}
} 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);
}
}
}
};
Shake.prototype.preRender = function (camera, cameraX, cameraY, cameraWidth, cameraHeight) {
if((this._fxShakeOffset.x != 0) || (this._fxShakeOffset.y != 0)) {
this._parent.x = this._fxShakePrevX + this._fxShakeOffset.x;
this._parent.y = this._fxShakePrevY + this._fxShakeOffset.y;
}
};
return Shake;
})();
Camera.Shake = Shake;
})(FX.Camera || (FX.Camera = {}));
var Camera = FX.Camera;
})(Phaser.FX || (Phaser.FX = {}));
var FX = Phaser.FX;
})(Phaser || (Phaser = {}));
var Phaser;
(function (Phaser) {
(function (FX) {
Preparing new tests
2013-05-29 01:58:56 +00:00
/// <reference path="../../build/phaser.d.ts" />
New FXManager system and Camera FX now in place.
2013-05-01 03:10:21 +00:00
/**
* 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) {
this._fxFadeComplete = null;
this._fxFadeDuration = 0;
this._fxFadeAlpha = 0;
this._game = game;
}
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) {
duration = 1;
}
var red = color >> 16 & 0xFF;
var green = color >> 8 & 0xFF;
var blue = color & 0xFF;
this._fxFadeColor = 'rgba(' + red + ',' + green + ',' + blue + ',';
this._fxFadeDuration = duration;
this._fxFadeAlpha = 0.01;
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) {
this._fxFadeAlpha = 1;
if(this._fxFadeComplete !== null) {
this._fxFadeComplete();
}
}
}
};
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);
}
};
return Fade;
})();
Camera.Fade = Fade;
})(FX.Camera || (FX.Camera = {}));
var Camera = FX.Camera;
})(Phaser.FX || (Phaser.FX = {}));
var FX = Phaser.FX;
})(Phaser || (Phaser = {}));
Reference in a new issue Copy permalink