wassname/phaser
1
0
Fork 0
mirror of https://github.com/wassname/phaser.git synced 2026-09-09 11:28:47 +08:00
Code Issues Packages Projects Releases 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
Download Patch File Download Diff File Expand all files Collapse all files
Tests/camera fx/mirror.js
+41
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;
}
}
})();
Tests/camera fx/mirror.ts
+70
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;
}
}
})();