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

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.

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"

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];
+
+}

examples/filters/hue rotate.js

@@ -1,38 +0,0 @@
-
-var game = new Phaser.Game(800, 600, Phaser.WEBGL, 'phaser-example', { preload: preload, create: create, update: update });
-
-var background;
-var filter;
-
-function preload() {
-
-    game.load.image('phaser', 'assets/sprites/phaser2.png');
-    game.load.script('filter', '../filters/HueRotate.js');
-    // game.load.image('texture', 'assets/textures/ooze.png');
-    game.load.image('texture', 'assets/pics/ra_einstein.png');
-
-}
-
-function create() {
-
-	var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'texture');
-	logo.anchor.setTo(0.5, 0.5);
-	logo.texture.baseTexture._powerOf2 = true;
-
-
-	background = game.add.sprite(0, 0);
-	background.width = logo.width;
-	background.height = logo.height;
-
-	filter = game.add.filter('HueRotate', logo.width, logo.height, logo.texture);
-	// filter.alpha = 0.0;
-
-	background.filters = [filter];
-
-}
-
-function update() {
-
-	filter.update();
-
-}

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];
 

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;
+    }
+
+});

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;
+    }
+
+});

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;

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;",

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;",

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;",

filters/Marble.js

@@ -1,25 +1,32 @@
 /**
-* A sample demonstrating how to create new Phaser Filters.
+* Original shader from http://glsl.heroku.com/e#9213.0
+* Tweaked, uniforms added and converted to Phaser/PIXI by Richard Davey
 */
 Phaser.Filter.Marble = function (game) {
 
     Phaser.Filter.call(this, game);
 
-    //this.uniforms.divisor = { type: '1f', value: 0.5 };
+    this.uniforms.alpha = { type: '1f', value: 1.0 }
+
+    // Drives speed, higher number will make it slower.
+    this.uniforms.fluid_speed = { type: '1f', value: 10.0 }
+
+    this.uniforms.color_intensity = { type: '1f', value: 0.30 }
         
     //  The fragment shader source
     this.fragmentSrc = [
 
         "precision mediump float;",
-        "uniform vec3      resolution;",
+        "uniform vec2      resolution;",
         "uniform float     time;",
-        "//uniform vec2      mouse;",
+        "uniform vec2      mouse;",
+        "uniform float     alpha;",
+        "uniform float     fluid_speed;",
+        "uniform float     color_intensity;",
 
         "const int   complexity      = 40;    // More points of color.",
         "const float mouse_factor    = 25.0;  // Makes it more/less jumpy.",
         "const float mouse_offset    = 5.0;   // Drives complexity in the amount of curls/cuves.  Zero is a single whirlpool.",
-        "const float fluid_speed     = 45.0;  // Drives speed, higher number will make it slower.",
-        "const float color_intensity = 0.30;",
 
         "const float Pi = 3.14159;",
 
@@ -32,22 +39,18 @@ Phaser.Filter.Marble = function (game) {
             "return sinApprox(x + 0.5 * Pi);",
         "}",
 
-        "//vec3 mouse = vec3(0,0,0);",
-
         "void main()",
         "{",
             "vec2 p=(2.0*gl_FragCoord.xy-resolution)/max(resolution.x,resolution.y);",
             "for(int i=1;i<complexity;i++)",
             "{",
                 "vec2 newp=p;",
-                "//newp.x+=0.6/float(i)*sin(float(i)*p.y+time/fluid_speed+0.3*float(i))+mouse.y/mouse_factor+mouse_offset;",
-                "//newp.y+=0.6/float(i)*sin(float(i)*p.x+time/fluid_speed+0.3*float(i+10))-mouse.x/mouse_factor+mouse_offset;",
-                "newp.x+=0.6/float(i)*sin(float(i)*p.y+time/fluid_speed+0.3*float(i));",
-                "newp.y+=0.6/float(i)*sin(float(i)*p.x+time/fluid_speed+0.3*float(i+10));",
+                "newp.x+=0.6/float(i)*sin(float(i)*p.y+time/fluid_speed+0.3*float(i))+mouse.y/mouse_factor+mouse_offset;",
+                "newp.y+=0.6/float(i)*sin(float(i)*p.x+time/fluid_speed+0.3*float(i+10))-mouse.x/mouse_factor+mouse_offset;",
                 "p=newp;",
             "}",
             "vec3 col=vec3(color_intensity*sin(3.0*p.x)+color_intensity,color_intensity*sin(3.0*p.y)+color_intensity,color_intensity*sin(p.x+p.y)+color_intensity);",
-            "gl_FragColor=vec4(col, 1.0);",
+            "gl_FragColor=vec4(col, alpha);",
         "}"
     ];
 
@@ -56,8 +59,50 @@ Phaser.Filter.Marble = function (game) {
 Phaser.Filter.Marble.prototype = Object.create(Phaser.Filter.prototype);
 Phaser.Filter.Marble.prototype.constructor = Phaser.Filter.Marble;
 
-Phaser.Filter.Marble.prototype.init = function (width, height) {
+Phaser.Filter.Marble.prototype.init = function (width, height, speed, intensity) {
 
     this.setResolution(width, height);
 
+    if (typeof speed === 'undefined') { speed = 10.0; }
+    if (typeof intensity === 'undefined') { intensity = 0.30; }
+
+    this.uniforms.fluid_speed.value = speed;
+    this.uniforms.color_intensity.value = intensity;
+
 }
+
+Object.defineProperty(Phaser.Filter.Marble.prototype, 'alpha', {
+
+    get: function() {
+        return this.uniforms.alpha.value;
+    },
+
+    set: function(value) {
+        this.uniforms.alpha.value = value;
+    }
+
+});
+
+Object.defineProperty(Phaser.Filter.Marble.prototype, 'speed', {
+
+    get: function() {
+        return this.uniforms.fluid_speed.value;
+    },
+
+    set: function(value) {
+        this.uniforms.fluid_speed.value = value;
+    }
+
+});
+
+Object.defineProperty(Phaser.Filter.Marble.prototype, 'intensity', {
+
+    get: function() {
+        return this.uniforms.color_intensity.value;
+    },
+
+    set: function(value) {
+        this.uniforms.color_intensity.value = value;
+    }
+
+});

filters/Tunnel.js

@@ -13,7 +13,7 @@ Phaser.Filter.Tunnel = function (game) {
     this.fragmentSrc = [
 
         "precision mediump float;",
-        "uniform vec3      resolution;",
+        "uniform vec2      resolution;",
         "uniform float     time;",
         "uniform sampler2D iChannel0;",
         "uniform float     alpha;",

src/core/Filter.js

@@ -52,9 +52,9 @@ Phaser.Filter = function (game, uniforms, fragmentSrc) {
     */
     this.uniforms = {
 
-        resolution: { type: '3f', value: { x: 256, y: 256, z: 0 }},
         time: { type: '1f', value: 0 },
-        mouse: { type: '4fv', value: { x: 0, y: 0, z: 0, w: 0 }}
+        resolution: { type: '2f', value: { x: 256, y: 256 }},
+        mouse: { type: '2f', value: { x: 0.0, y: 0.0 }}
 
     };
     
@@ -97,8 +97,15 @@ Phaser.Filter.prototype = {
 
         if (typeof pointer !== 'undefined')
         {
-            this.uniforms.mouse.x = pointer.x;
-            this.uniforms.mouse.y = pointer.y;
+            if (pointer.x > 0)
+            {
+                this.uniforms.mouse.x = pointer.x.toFixed(2);
+            }
+
+            if (pointer.y > 0)
+            {
+                this.uniforms.mouse.y = pointer.y.toFixed(2);
+            }
         }
 
         this.uniforms.time.value = this.game.time.totalElapsedSeconds();

src/loader/Loader.js

@@ -67,7 +67,7 @@ Phaser.Loader = function (game) {
     /**
     * You can optionally link a sprite to the preloader.
     * If you do so the Sprite's width or height will be cropped based on the percentage loaded.
-    * @property {Description} preloadSprite
+    * @property {Phaser.Sprite} preloadSprite
     * @default
     */
     this.preloadSprite = null;
@@ -1058,7 +1058,7 @@ Phaser.Loader.prototype = {
                 file.data = document.createElement('script');
                 file.data.language = 'javascript';
                 file.data.type = 'text/javascript';
-                file.data.defer = true;
+                file.data.defer = false;
                 file.data.text = this._xhr.responseText;
                 document.head.appendChild(file.data);
                 break;