wassname/phaser
1
0
Fork 0
mirror of https://github.com/wassname/phaser.git synced 2026-08-11 11:23:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added Phaser.Filter and started moving the shaders over into their own filter classes, so they won't all get bundled in unless needed.

Browse Source
This commit is contained in:
photonstorm
2013-11-21 05:00:07 +00:00
parent e32c127a97
commit 496639ff25
39 changed files with 985 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/wip/binarySerpentsFilter.js
+4 -4
View File
@@ -14,10 +14,10 @@ PIXI.BinarySerpentsFilter = function(width, height, texture)
];
this.uniforms = {
iResolution: { type: 'f3', value: { x: width, y: height, z: 0 }},
iMouse: { type: 'f3', value: { x: 0, y: 0, z: 0 }},
iGlobalTime: { type: 'f', value: 1 },
iDate: { type: 'f4', value: dates },
iResolution: { type: '3f', value: { x: width, y: height, z: 0 }},
iMouse: { type: '3f', value: { x: 0, y: 0, z: 0 }},
iGlobalTime: { type: '1f', value: 1 },
iDate: { type: '4fv', value: dates },
iChannel0: { type: 'sampler2D', value: texture, wrap: 'repeat' }
};
examples/wip/book/part2.html
+2
View File
@@ -17,6 +17,8 @@
<script type="text/javascript">
var PIXI = PIXI || {};
document.addEventListener('DOMContentLoaded', function() {
function makeFilter () {
examples/wip/colorBoxFilter.js
+12 -65
View File
@@ -1,78 +1,25 @@
PIXI.ColorBoxFilter = function()
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
var d = new Date();
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { create: create, update: update });
var dates = [
d.getFullYear(), // the year (four digits)
d.getMonth(), // the month (from 0-11)
d.getDate(), // the day of the month (from 1-31)
d.getHours()*60.0*60 + d.getMinutes()*60 + d.getSeconds()
];
this.uniforms = {
iResolution: { type: 'f3', value: { x: 800, y: 600, z: 0 }},
iGlobalTime: { type: 'f', value: 1 },
iDate: { type: 'f4', value: dates }
};
this.fragmentSrc = [
"precision mediump float;",
"uniform vec3 iResolution;",
"uniform float iGlobalTime;",
"uniform float iChannelTime[4];",
"uniform vec4 iMouse;",
"uniform vec4 iDate;",
"uniform vec3 iChannelResolution[4];",
"void main(void) {",
"vec2 uv = gl_FragCoord.xy / iResolution.xy;",
"gl_FragColor = vec4(uv, 0.5 * sin(iGlobalTime), 0.0);",
"}"
];
}
PIXI.ColorBoxFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.ColorBoxFilter.prototype.constructor = PIXI.ColorBoxFilter;
Object.defineProperty(PIXI.ColorBoxFilter.prototype, 'iGlobalTime', {
get: function() {
return this.uniforms.iGlobalTime.value;
},
set: function(value) {
this.uniforms.iGlobalTime.value = value;
}
});
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.image('tex', 'wip/tex16.png');
game.load.image('sea', 'assets/pics/undersea.jpg');
}
var stars;
var background;
var filter;
function create() {
stars = new PIXI.ColorBoxFilter();
// Because we don't specify a texture it will revert to using __default, a 64x64 transparent PNG - ideal for applying a filter to
background = game.add.sprite(0, 0);
background.width = 800;
background.height = 600;
var a = game.add.sprite(0, 0, 'sea');
a.filters = [stars];
// filter = game.add.filter('SampleFilter', 800, 600, 0.5);
filter = game.add.filter('BinarySerpents', 800, 600, 100, 5.0);
background.filters = [filter];
}
function update() {
stars.iGlobalTime = game.time.totalElapsedSeconds();
filter.update();
}
function render() {
}
examples/wip/colorbars_demo.js
+35
View File
@@ -0,0 +1,35 @@
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
var background;
var filter;
function preload() {
game.load.image('phaser', 'assets/sprites/phaser2.png');
}
function create() {
var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'phaser');
logo.anchor.setTo(0.5, 0.5);
background = game.add.sprite(0, 0);
background.width = 800;
background.height = 600;
filter = game.add.filter('ColorBars', 800, 600);
filter.alpha = 0.0;
background.filters = [filter];
}
function update() {
filter.update();
}
examples/wip/filter.js
+3 -3
View File
@@ -14,9 +14,9 @@ PIXI.RayTracedBallsFilter = function(width, height, texture)
];
this.uniforms = {
resolution: { type: 'f2', value: { x: width, y: height }},
mouse: { type: 'f2', value: { x: 0, y: 0 }},
time: { type: 'f', value: 1 }
resolution: { type: '2f', value: { x: width, y: height }},
mouse: { type: '2f', value: { x: 0, y: 0 }},
time: { type: '1f', value: 1 }
};
// http://glsl.heroku.com/e#11707.0
examples/wip/index.php
+4
View File
@@ -85,6 +85,10 @@
$f = $_GET['f'];
?>
<script src="wip/<?php echo $f?>" type="text/javascript"></script>
<script src="../filters/SampleFilter.js" type="text/javascript"></script>
<script src="../filters/BinarySerpents.js" type="text/javascript"></script>
<script src="../filters/Tunnel.js" type="text/javascript"></script>
<script src="../filters/ColorBars.js" type="text/javascript"></script>
<?php
}
?>
examples/wip/tunnel_demo.js
+35
View File
@@ -0,0 +1,35 @@
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
var background;
var filter;
function preload() {
game.load.image('texture', 'wip/tex00.jpg');
game.load.image('sea', 'assets/pics/undersea.jpg');
}
function create() {
game.add.sprite(0, 0, 'sea');
background = game.add.sprite(0, 0, 'texture');
background.width = 800;
background.height = 600;
filter = game.add.filter('Tunnel', 800, 600, background.texture);
// filter.alpha = 0.5;
// filter.origin = 0.5;
background.filters = [filter];
}
function update() {
filter.update();
}
examples/wip/wobbleFilter.js
+103
View File
@@ -0,0 +1,103 @@
PIXI.WobbleFilter = function(width, height, texture0, texture1)
{
PIXI.AbstractFilter.call( this );
this.passes = [this];
var d = new Date();
var dates = [
d.getFullYear(), // the year (four digits)
d.getMonth(), // the month (from 0-11)
d.getDate(), // the day of the month (from 1-31)
d.getHours()*60.0*60 + d.getMinutes()*60 + d.getSeconds()
];
this.uniforms = {
iResolution: { type: 'f3', value: { x: width, y: height, z: 0 }},
iGlobalTime: { type: 'f', value: 1 },
iDate: { type: 'f4', value: dates },
iChannel0: { type: 'sampler2D', value: texture0, wrap: 'repeat' },
iChannel1: { type: 'sampler2D', value: texture1, wrap: 'repeat' }
};
// Shader by deps (https://www.shadertoy.com/view/MssGDM)
this.fragmentSrc = [
"precision mediump float;",
"uniform vec3 iResolution;",
"uniform float iGlobalTime;",
"uniform float iChannelTime[4];",
"uniform vec4 iMouse;",
"uniform vec4 iDate;",
"uniform vec3 iChannelResolution[4];",
"uniform sampler2D iChannel0;",
"uniform sampler2D iChannel1;",
"// add any extra uniforms here",
"void main(void)",
"{",
"vec2 uv = (gl_FragCoord.xy / iResolution.xy);",
"uv.y = 1.0-uv.y;",
"float time = iGlobalTime * 0.75;",
"vec4 pixel2 = texture2D(iChannel1, (uv+vec2(sin(time),cos(time))) * 0.15 );",
"float xDiff = pixel2.r * 0.02;",
"float yDiff = 0.0;",
"vec2 diffVec = vec2( xDiff, yDiff );",
"vec4 pixel = texture2D(iChannel0, uv + diffVec);",
"gl_FragColor = pixel;",
"}"];
}
PIXI.WobbleFilter.prototype = Object.create( PIXI.AbstractFilter.prototype );
PIXI.WobbleFilter.prototype.constructor = PIXI.WobbleFilter;
Object.defineProperty(PIXI.WobbleFilter.prototype, 'iGlobalTime', {
get: function() {
return this.uniforms.iGlobalTime.value;
},
set: function(value) {
this.uniforms.iGlobalTime.value = value;
}
});
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.image('texture0', 'wip/tex04.jpg');
game.load.image('texture1', 'wip/tex10.png');
}
var filter;
var sprite;
function create() {
noise = game.add.sprite(0, 0, 'texture1');
sprite = game.add.sprite(0, 0, 'texture0');
sprite.width = 800;
sprite.height = 600;
filter = new PIXI.WobbleFilter(sprite.width, sprite.height, sprite.texture, noise.texture);
sprite.filters = [filter];
}
function update() {
filter.iGlobalTime = game.time.totalElapsedSeconds();
}
function render() {
}