Updated Filter resolution to a 2f and added Blur and Marble filters.

drewmalin · Nov 29, 2013 · 00a9897 · 00a9897
1 parent 378ffc7
commit 00a9897
Show file tree

Hide file tree

Showing 17 changed files with 219 additions and 77 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@ Phaser 1.1
 
 Phaser is a fast, free and fun open source game framework for making desktop and mobile browser HTML5 games. It uses [Pixi.js](https://github.com/GoodBoyDigital/pixi.js/) internally for fast 2D Canvas and WebGL rendering.
 
-Version: 1.1.3 - Released: November 28th 2013
+Version: 1.1.3 - Released: November 29th 2013
 
 By Richard Davey, [Photon Storm](http://www.photonstorm.com)
 
@@ -39,7 +39,7 @@ Phaser is everything we ever wanted from an HTML5 game framework. It powers all
 Change Log
 ----------
 
-Version 1.1.3 - November 28th 2013
+Version 1.1.3 - November 29th 2013
 
 * New: Added a .jshintrc so contributions can be run through JSHint to help retain formatting across the library (thanks kevinthompson)
 * New: The entire Phaser library has been updated to match the new JSHint configuration.
@@ -228,7 +228,7 @@ Using a locally installed web server browse to the examples folder:
 
     examples/index.html
 
-Alternatively in order to start the included web server, after you've cloned the repo, run npm install to install all dependencies, then run grunt connect to start a local server. After running this command, you should be able to access your local webserver at `http://127.0.0.1:8000`. Then browse to the examples folder: `http://127.0.0.1:8000/examples/index.html`
+Alternatively in order to start the included web server, after you've cloned the repo, run `npm install` to install all dependencies, then `grunt connect `to start a local server. After running this command you should be able to access your local webserver at `http://127.0.0.1:8000`. Then browse to the examples folder: `http://127.0.0.1:8000/examples/index.html`
 
 There is a new 'Side View' example viewer as well. This loads all the examples into a left-hand frame for faster navigation.
 
@@ -237,8 +237,6 @@ You can also browse all [Phaser Examples](http://gametest.mobi/phaser/) online.
 Contributing
 ------------
 
-Phaser is in early stages and although we've still got a lot to add to it, we wanted to get it out there and share it with the world.
-
 If you find a bug (highly likely!) then please report it on github or our forum.
 
 If you have a feature request, or have written a small game or demo that shows Phaser in use, then please get in touch. We'd love to hear from you.

diff --git a/examples/_site/examples.json b/examples/_site/examples.json
@@ -178,6 +178,10 @@
     }
   ],
   "filters": [
+    {
+      "file": "blur.js",
+      "title": "blur"
+    },
     {
       "file": "checker+wave.js",
       "title": "checker wave"
@@ -186,10 +190,6 @@
       "file": "fire.js",
       "title": "fire"
     },
-    {
-      "file": "hue+rotate.js",
-      "title": "hue rotate"
-    },
     {
       "file": "lightbeams.js",
       "title": "lightbeams"

diff --git a/examples/filters/blur.js b/examples/filters/blur.js
@@ -0,0 +1,22 @@
+
+var game = new Phaser.Game(800, 600, Phaser.WEBGL, 'phaser-example', { preload: preload, create: create });
+
+function preload() {
+
+    game.load.image('phaser', 'assets/sprites/phaser2.png');
+    game.load.script('filterX', '../filters/BlurX.js');
+    game.load.script('filterY', '../filters/BlurY.js');
+
+}
+
+function create() {
+
+	var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'phaser');
+	logo.anchor.setTo(0.5, 0.5);
+
+	var blurX = game.add.filter('BlurX');
+	var blurY = game.add.filter('BlurY');
+
+	logo.filters = [blurX, blurY];
+
+}
diff --git a/examples/filters/hue rotate.js b/examples/filters/hue rotate.js
diff --git a/examples/filters/marble.js b/examples/filters/marble.js
@@ -21,7 +21,12 @@ function create() {
 	background.height = 600;
 
 	filter = game.add.filter('Marble', 800, 600);
-	//filter.alpha = 0.0;
+	filter.alpha = 0.2;
+
+	//	The following properties are available (shown at default values)
+
+	//	filter.speed = 10.0;
+	//	filter.intensity = 0.30;
 
 	background.filters = [filter];
 

diff --git a/filters/BlurX.js b/filters/BlurX.js
@@ -0,0 +1,51 @@
+/**
+* A horizontal blur filter by Mat Groves http://matgroves.com/ @Doormat23
+*/
+Phaser.Filter.BlurX = function (game) {
+
+    Phaser.Filter.call(this, game);
+
+    this.uniforms.blur = { type: '1f', value: 1 / 512 };
+
+    this.fragmentSrc = [
+
+      "precision mediump float;",
+      "varying vec2 vTextureCoord;",
+      "varying float vColor;",
+      "uniform float blur;",
+      "uniform sampler2D uSampler;",
+
+        "void main(void) {",
+        "vec4 sum = vec4(0.0);",
+
+        "sum += texture2D(uSampler, vec2(vTextureCoord.x - 4.0*blur, vTextureCoord.y)) * 0.05;",
+        "sum += texture2D(uSampler, vec2(vTextureCoord.x - 3.0*blur, vTextureCoord.y)) * 0.09;",
+        "sum += texture2D(uSampler, vec2(vTextureCoord.x - 2.0*blur, vTextureCoord.y)) * 0.12;",
+        "sum += texture2D(uSampler, vec2(vTextureCoord.x - blur, vTextureCoord.y)) * 0.15;",
+        "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;",
+        "sum += texture2D(uSampler, vec2(vTextureCoord.x + blur, vTextureCoord.y)) * 0.15;",
+        "sum += texture2D(uSampler, vec2(vTextureCoord.x + 2.0*blur, vTextureCoord.y)) * 0.12;",
+        "sum += texture2D(uSampler, vec2(vTextureCoord.x + 3.0*blur, vTextureCoord.y)) * 0.09;",
+        "sum += texture2D(uSampler, vec2(vTextureCoord.x + 4.0*blur, vTextureCoord.y)) * 0.05;",
+
+        "gl_FragColor = sum;",
+
+      "}"
+    ];
+
+};
+
+Phaser.Filter.BlurX.prototype = Object.create(Phaser.Filter.prototype);
+Phaser.Filter.BlurX.prototype.constructor = Phaser.Filter.BlurX;
+
+Object.defineProperty(Phaser.Filter.BlurX.prototype, 'blur', {
+
+    get: function() {
+        return this.uniforms.blur.value / (1/7000);
+    },
+
+    set: function(value) {
+        this.uniforms.blur.value = (1/7000) * value;
+    }
+
+});
diff --git a/filters/BlurY.js b/filters/BlurY.js
@@ -0,0 +1,52 @@
+/**
+* A vertical blur filter by Mat Groves http://matgroves.com/ @Doormat23
+*/
+Phaser.Filter.BlurY = function (game) {
+
+    Phaser.Filter.call(this, game);
+
+    this.uniforms.blur = { type: '1f', value: 1 / 512 };
+
+    this.fragmentSrc = [
+
+      "precision mediump float;",
+      "varying vec2 vTextureCoord;",
+      "varying float vColor;",
+      "uniform float blur;",
+      "uniform sampler2D uSampler;",
+
+        "void main(void) {",
+        "vec4 sum = vec4(0.0);",
+
+        "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 4.0*blur)) * 0.05;",
+        "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 3.0*blur)) * 0.09;",
+        "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - 2.0*blur)) * 0.12;",
+        "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y - blur)) * 0.15;",
+        "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y)) * 0.16;",
+        "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + blur)) * 0.15;",
+        "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 2.0*blur)) * 0.12;",
+        "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 3.0*blur)) * 0.09;",
+        "sum += texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y + 4.0*blur)) * 0.05;",
+
+        "gl_FragColor = sum;",
+
+      "}"
+
+    ];
+
+};
+
+Phaser.Filter.BlurY.prototype = Object.create(Phaser.Filter.prototype);
+Phaser.Filter.BlurY.prototype.constructor = Phaser.Filter.BlurY;
+
+Object.defineProperty(Phaser.Filter.BlurY.prototype, 'blur', {
+
+    get: function() {
+        return this.uniforms.blur.value / (1/7000);
+    },
+
+    set: function(value) {
+        this.uniforms.blur.value = (1/7000) * value;
+    }
+
+});
diff --git a/filters/CheckerWave.js b/filters/CheckerWave.js
@@ -14,7 +14,7 @@ Phaser.Filter.CheckerWave = function (game) {
     this.fragmentSrc = [
 
         "precision mediump float;",
-        "uniform vec3      resolution;",
+        "uniform vec2      resolution;",
         "uniform float     time;",
         "uniform float     alpha;",
         "uniform vec3      vrp;",
@@ -122,7 +122,7 @@ Phaser.Filter.CheckerWave.prototype.setColor2 = function (red, green, blue) {
 
 }
 
-Object.defineProperty(Phaser.Filter.HueRotate.prototype, 'alpha', {
+Object.defineProperty(Phaser.Filter.CheckerWave.prototype, 'alpha', {
 
     get: function() {
         return this.uniforms.alpha.value;
@@ -134,7 +134,7 @@ Object.defineProperty(Phaser.Filter.HueRotate.prototype, 'alpha', {
 
 });
 
-Object.defineProperty(Phaser.Filter.HueRotate.prototype, 'cameraX', {
+Object.defineProperty(Phaser.Filter.CheckerWave.prototype, 'cameraX', {
 
     get: function() {
         return this.uniforms.vrp.value.x;
@@ -146,7 +146,7 @@ Object.defineProperty(Phaser.Filter.HueRotate.prototype, 'cameraX', {
 
 });
 
-Object.defineProperty(Phaser.Filter.HueRotate.prototype, 'cameraY', {
+Object.defineProperty(Phaser.Filter.CheckerWave.prototype, 'cameraY', {
 
     get: function() {
         return this.uniforms.vrp.value.y;
@@ -158,7 +158,7 @@ Object.defineProperty(Phaser.Filter.HueRotate.prototype, 'cameraY', {
 
 });
 
-Object.defineProperty(Phaser.Filter.HueRotate.prototype, 'cameraZ', {
+Object.defineProperty(Phaser.Filter.CheckerWave.prototype, 'cameraZ', {
 
     get: function() {
         return this.uniforms.vrp.value.z;

diff --git a/filters/Fire.js b/filters/Fire.js
@@ -13,7 +13,7 @@ Phaser.Filter.Fire = function (game) {
     this.fragmentSrc = [
 
         "precision mediump float;",
-        "uniform vec3      resolution;",
+        "uniform vec2      resolution;",
         "uniform float     time;",
         "uniform float     alpha;",
         "uniform vec2      speed;",

diff --git a/filters/HueRotate.js b/filters/HueRotate.js
@@ -13,7 +13,7 @@ Phaser.Filter.HueRotate = function (game) {
     this.fragmentSrc = [
 
         "precision mediump float;",
-        "uniform vec3      resolution;",
+        "uniform vec2      resolution;",
         "uniform float     time;",
         "uniform float     alpha;",
         "uniform sampler2D iChannel0;",

diff --git a/filters/LightBeam.js b/filters/LightBeam.js
@@ -16,7 +16,7 @@ Phaser.Filter.LightBeam = function (game) {
     this.fragmentSrc = [
 
         "precision mediump float;",
-        "uniform vec3      resolution;",
+        "uniform vec2      resolution;",
         "uniform float     time;",
         "uniform float     alpha;",
         "uniform float     thickness;",