New filters and demos: LightBeams, Fire and Tunnel. Also Loader can now load script files.

README.md

@@ -46,6 +46,7 @@ Version 1.1.3 - in build
 * New: Added a new in-built texture. Sprites now use __default if no texture was provided (a 32x32 transparent PNG) or __missing if one was given but not found (a 32x32 black box with a green cross through it)
 * New: Phaser.Filter. A new way to use the new WebGL shaders/filters that the new version of Pixi supports.
 * New: Phaser.BitmapData object. A Canvas you can freely draw to with lots of functions. Can be used as a texture for Sprites. See the new examples and docs for details.
+* New: Loader can now load JavaScript files. Just use game.load.script('key', 'url') - the file will be turned into a script tag in the document head on successful load.
 * New: RenderTexture.render now takes a Phaser.Group. Also added renderXY for when you don't want to make a new Point object.
 * New: Physics.overlap now supports Sprites, Groups or Emitters and can perform group vs. group (etc) overlap checks with a custom callback and process handler.
 * New: Added Sound.externalNode which allows you to connect a Sound to an external node input rather than the SoundManager gain node.
@@ -99,6 +100,8 @@ Version 1.1.3 - in build
 * Fixed: InputHandler.checkPointerOver now checks the visible status of the Sprite Group before processing.
 * Fixed: The Sprite hulls (used for tile collision) were not being updated in sprite->sprite separations (thanks jcs)
 * Fixed: Plugins that had a postUpdate but no Update weren't being marked as active (thanks crazysam)
+* Fixed: StateManager.onPausedCallback function is not called when the game is paused (thanks haden)
+* Fixed: Fix for 'jitter' in scrolling where tilemaps & sprites are one frame off (thanks jcs)
 
 You can view the complete Change Log for all previous versions at https://github.com/photonstorm/phaser/changelog.md
 

examples/filters/fire.js

@@ -7,6 +7,7 @@ var filter;
 function preload() {
 
     game.load.image('phaser', 'assets/sprites/phaser2.png');
+    game.load.script('fire', '../filters/Fire.js');
 
 }
 

examples/filters/lightbeams.js

@@ -0,0 +1,41 @@
+
+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('light', '../filters/LightBeam.js');
+
+}
+
+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('LightBeam', 800, 600);
+
+	//	You have the following values to play with (defaults shown):
+	filter.alpha = 0.0;
+	// filter.red = 1.0;
+	// filter.green = 1.0;
+	// filter.blue = 2.0;
+	// filter.thickness = 70.0;
+	// filter.speed = 1.0;
+
+	background.filters = [filter];
+
+}
+
+function update() {
+
+	filter.update();
+
+}

examples/filters/plasma.js

@@ -0,0 +1,43 @@
+
+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');
+    game.load.script('plasma', '../filters/Plasma.js');
+
+}
+
+function create() {
+
+	background = game.add.sprite(0, 0);
+	background.width = 800;
+	background.height = 600;
+
+	filter = game.add.filter('Plasma', 800, 600);
+
+	//	You have the following values to play with (defaults shown below):
+
+	// filter.size = 0.03;
+	// filter.redShift = 0.5;
+	// filter.greenShift = 0.5;
+	// filter.blueShift = 0.9;
+
+	background.filters = [filter];
+
+	var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'phaser');
+	logo.anchor.setTo(0.5, 0.5);
+
+}
+
+function update() {
+
+	filter.update();
+
+	//	Uncomment for coolness :)
+	// filter.blueShift -= 0.001;
+
+}

examples/filters/tunnel.js

@@ -0,0 +1,40 @@
+
+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/phaser.png');
+    game.load.image('texture', 'assets/textures/ooze.png');
+    game.load.script('tunnel', '../filters/Tunnel.js');
+
+}
+
+function create() {
+
+	background = game.add.sprite(0, 0, 'texture');
+	background.width = 800;
+	background.height = 600;
+
+	filter = game.add.filter('Tunnel', 800, 600, background.texture);
+
+	//	You have the following value to play with (default value is 2.0):
+	filter.origin = 1.0;
+
+	background.filters = [filter];
+
+	var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'phaser');
+	logo.anchor.setTo(0.5, 0.5);
+
+}
+
+function update() {
+
+	filter.update();
+
+	//	Uncomment for coolness :)
+	filter.origin = filter.origin + 0.001;
+
+}

examples/wip/fire_demo.js

@@ -7,6 +7,7 @@ var filter;
 function preload() {
 
     game.load.image('phaser', 'assets/sprites/phaser2.png');
+    game.load.script('fire', '../filters/Fire.js');
 
 }
 

examples/wip/index.php

@@ -85,11 +85,6 @@
                 $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>
-        <script src="../filters/Fire.js" type="text/javascript"></script>
         <?php
             }
         ?>

examples/wip/lightbeam_demo.js

@@ -0,0 +1,41 @@
+
+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('light', '../filters/LightBeam.js');
+
+}
+
+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('LightBeam', 800, 600);
+
+	//	You have the following values to play with (defaults shown):
+	filter.alpha = 0.0;
+	// filter.red = 1.0;
+	// filter.green = 1.0;
+	// filter.blue = 2.0;
+	// filter.thickness = 70.0;
+	// filter.speed = 1.0;
+
+	background.filters = [filter];
+
+}
+
+function update() {
+
+	filter.update();
+
+}

examples/wip/plasma_demo.js

@@ -0,0 +1,43 @@
+
+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');
+    game.load.script('fire', '../filters/Plasma.js');
+
+}
+
+function create() {
+
+	background = game.add.sprite(0, 0);
+	background.width = 800;
+	background.height = 600;
+
+	filter = game.add.filter('Plasma', 800, 600);
+
+	//	You have the following values to play with (defaults shown below):
+
+	// filter.size = 0.03;
+	// filter.redShift = 0.5;
+	// filter.greenShift = 0.5;
+	// filter.blueShift = 0.9;
+
+	background.filters = [filter];
+
+	var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'phaser');
+	logo.anchor.setTo(0.5, 0.5);
+
+}
+
+function update() {
+
+	filter.update();
+
+	//	Uncomment for coolness :)
+	// filter.blueShift -= 0.001;
+
+}

examples/wip/tunnel_demo.js

@@ -1,35 +1,41 @@
 
-var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
+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('texture', 'wip/tex00.jpg');
-    game.load.image('sea', 'assets/pics/undersea.jpg');
+    game.load.image('phaser', 'assets/sprites/phaser.png');
+    game.load.image('texture2', 'wip/tex00.jpg');
+    game.load.image('texture', 'assets/textures/ooze.png');
+    game.load.script('tunnel', '../filters/Tunnel.js');
 
 }
 
 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;
+	//	You have the following value to play with (default value is 2.0):
+	filter.origin = 1.0;
 
 	background.filters = [filter];
 
+	var logo = game.add.sprite(game.world.centerX, game.world.centerY, 'phaser');
+	logo.anchor.setTo(0.5, 0.5);
+
 }
 
 function update() {
 
 	filter.update();
 
+	//	Uncomment for coolness :)
+	filter.origin = filter.origin + 0.001;
+
 }

filters/LightBeam.js

@@ -0,0 +1,130 @@
+/**
+* Original shader from http://glsl.heroku.com/e#4122.10
+* Tweaked, uniforms added and converted to Phaser/PIXI by Richard Davey
+*/
+Phaser.Filter.LightBeam = function (game) {
+
+	Phaser.Filter.call(this, game);
+
+	this.uniforms.alpha = { type: '1f', value: 1 }
+	this.uniforms.thickness = { type: '1f', value: 70.0 }
+	this.uniforms.speed = { type: '1f', value: 1.0 }
+	this.uniforms.red = { type: '1f', value: 2.0 }
+	this.uniforms.green = { type: '1f', value: 1.0 }
+	this.uniforms.blue = { type: '1f', value: 1.0 }
+		
+	this.fragmentSrc = [
+
+		"precision mediump float;",
+		"uniform vec3      resolution;",
+		"uniform float     time;",
+		"uniform float     alpha;",
+		"uniform float     thickness;",
+		"uniform float     speed;",
+		"uniform float     red;",
+		"uniform float     green;",
+		"uniform float     blue;",
+
+		"void main(void) {",
+
+			"vec2 uPos = (gl_FragCoord.xy / resolution.xy);",
+	
+			"uPos.y -= 0.50;",
+	
+			"float vertColor = 0.0;",
+
+			"for (float i = 0.0; i < 1.0; i++)",
+			"{",
+				"float t = time * (i + speed);",
+				"uPos.y += sin(uPos.x + t) * 0.2;",
+				"float fTemp = abs(1.0 / uPos.y / thickness);",
+				"vertColor += fTemp;",
+			"}",
+	
+			"vec4 color = vec4(vertColor * red, vertColor * green, vertColor * blue, alpha);",
+			"gl_FragColor = color;",
+		"}"
+	];	
+
+};
+
+Phaser.Filter.LightBeam.prototype = Object.create(Phaser.Filter.prototype);
+Phaser.Filter.LightBeam.prototype.constructor = Phaser.Filter.LightBeam;
+
+Phaser.Filter.LightBeam.prototype.init = function (width, height) {
+
+	this.setResolution(width, height);
+
+}
+
+Object.defineProperty(Phaser.Filter.LightBeam.prototype, 'alpha', {
+
+    get: function() {
+        return this.uniforms.alpha.value;
+    },
+
+    set: function(value) {
+    	this.uniforms.alpha.value = value;
+    }
+
+});
+
+Object.defineProperty(Phaser.Filter.LightBeam.prototype, 'red', {
+
+    get: function() {
+        return this.uniforms.red.value;
+    },
+
+    set: function(value) {
+    	this.uniforms.red.value = value;
+    }
+
+});
+
+Object.defineProperty(Phaser.Filter.LightBeam.prototype, 'green', {
+
+    get: function() {
+        return this.uniforms.green.value;
+    },
+
+    set: function(value) {
+    	this.uniforms.green.value = value;
+    }
+
+});
+
+Object.defineProperty(Phaser.Filter.LightBeam.prototype, 'blue', {
+
+    get: function() {
+        return this.uniforms.blue.value;
+    },
+
+    set: function(value) {
+    	this.uniforms.blue.value = value;
+    }
+
+});
+
+Object.defineProperty(Phaser.Filter.LightBeam.prototype, 'thickness', {
+
+    get: function() {
+        return this.uniforms.thickness.value;
+    },
+
+    set: function(value) {
+    	this.uniforms.thickness.value = value;
+    }
+
+});
+
+Object.defineProperty(Phaser.Filter.LightBeam.prototype, 'speed', {
+
+    get: function() {
+        return this.uniforms.speed.value;
+    },
+
+    set: function(value) {
+    	this.uniforms.speed.value = value;
+    }
+
+});

filters/Plasma.js

@@ -0,0 +1,123 @@
+/**
+* Original shader by TriggerHLM (https://www.shadertoy.com/view/MdXGDH)
+* Tweaked, uniforms added and converted to Phaser/PIXI by Richard Davey
+*/
+Phaser.Filter.Plasma = function (game) {
+
+	Phaser.Filter.call(this, game);
+
+	this.uniforms.alpha = { type: '1f', value: 1.0 };
+	this.uniforms.size = { type: '1f', value: 0.03 };
+	this.uniforms.redShift = { type: '1f', value: 0.5 };
+	this.uniforms.greenShift = { type: '1f', value: 0.5 };
+	this.uniforms.blueShift = { type: '1f', value: 0.9 };
+		
+	this.fragmentSrc = [
+
+		"precision mediump float;",
+		"uniform float     time;",
+		"uniform float     alpha;",
+		"uniform float     size;",
+		"uniform float     redShift;",
+		"uniform float     greenShift;",
+		"uniform float     blueShift;",
+
+		"const float PI = 3.14159265;",
+
+		"float ptime = time * 0.1;",
+
+		"void main(void) {",
+
+			"float color1, color2, color;",
+
+			"color1 = (sin(dot(gl_FragCoord.xy, vec2(sin(ptime * 3.0), cos(ptime * 3.0))) * 0.02 + ptime * 3.0) + 1.0) / 2.0;",
+			"vec2 center = vec2(640.0 / 2.0, 360.0 / 2.0) + vec2(640.0 / 2.0 * sin(-ptime * 3.0), 360.0 / 2.0 * cos(-ptime * 3.0));",
+			"color2 = (cos(length(gl_FragCoord.xy - center) * size) + 1.0) / 2.0;",
+			"color = (color1 + color2) / 2.0;",
+
+			"float red = (cos(PI * color / redShift + ptime * 3.0) + 1.0) / 2.0;",
+			"float green = (sin(PI * color / greenShift + ptime * 3.0) + 1.0) / 2.0;",
+			"float blue = (sin(PI * color / blueShift + ptime * 3.0) + 1.0) / 2.0;",
+
+			"gl_FragColor = vec4(red, green, blue, alpha);",
+		"}"
+	];
+
+};
+
+Phaser.Filter.Plasma.prototype = Object.create(Phaser.Filter.prototype);
+Phaser.Filter.Plasma.prototype.constructor = Phaser.Filter.Plasma;
+
+Phaser.Filter.Plasma.prototype.init = function (width, height, alpha, size) {
+
+	this.setResolution(width, height);
+
+	if (typeof alpha !== 'undefined') { 
+		this.uniforms.alpha.value = alpha;
+	}
+
+	if (typeof size !== 'undefined') { 
+		this.uniforms.size.value = size;
+	}
+
+}
+
+Object.defineProperty(Phaser.Filter.Plasma.prototype, 'alpha', {
+
+    get: function() {
+        return this.uniforms.alpha.value;
+    },
+
+    set: function(value) {
+    	this.uniforms.alpha.value = value;
+    }
+
+});
+
+Object.defineProperty(Phaser.Filter.Plasma.prototype, 'size', {
+
+    get: function() {
+        return this.uniforms.size.value;
+    },
+
+    set: function(value) {
+    	this.uniforms.size.value = value;
+    }
+
+});
+
+Object.defineProperty(Phaser.Filter.Plasma.prototype, 'redShift', {
+
+    get: function() {
+        return this.uniforms.redShift.value;
+    },
+
+    set: function(value) {
+    	this.uniforms.redShift.value = value;
+    }
+
+});
+
+Object.defineProperty(Phaser.Filter.Plasma.prototype, 'greenShift', {
+
+    get: function() {
+        return this.uniforms.greenShift.value;
+    },
+
+    set: function(value) {
+    	this.uniforms.greenShift.value = value;
+    }
+
+});
+
+Object.defineProperty(Phaser.Filter.Plasma.prototype, 'blueShift', {
+
+    get: function() {
+        return this.uniforms.blueShift.value;
+    },
+
+    set: function(value) {
+    	this.uniforms.blueShift.value = value;
+    }
+
+});

filters/Tunnel.js

@@ -63,7 +63,7 @@ Object.defineProperty(Phaser.Filter.Tunnel.prototype, 'origin', {
     },
 
     set: function(value) {
-    	this.uniforms.origin.value = value.toFixed(2);
+    	this.uniforms.origin.value = value;
     }
 
 });

src/core/StateManager.js

@@ -110,6 +110,9 @@ Phaser.StateManager.prototype = {
     */
     boot: function () {
 
+        this.game.onPause.add(this.pause, this);
+        this.game.onResume.add(this.resume, this);
+
         if (this._pendingState !== null)
         {
             if (typeof this._pendingState === 'string')
@@ -392,6 +395,32 @@ Phaser.StateManager.prototype = {
 
     },
 
+    /**
+    * @method Phaser.StateManager#pause
+    * @protected
+    */
+    pause: function () {
+
+        if (this._created && this.onPausedCallback)
+        {
+            this.onPausedCallback.call(this.callbackContext, this.game, true);
+        }
+
+    },
+
+    /**
+    * @method Phaser.StateManager#resume
+    * @protected
+    */
+    resume: function () {
+
+        if (this._created && this.onre)
+        {
+            this.onPausedCallback.call(this.callbackContext, this.game, false);
+        }
+
+    },
+
     /**
     * @method Phaser.StateManager#update
     * @protected

src/loader/Loader.js

@@ -345,6 +345,21 @@ Phaser.Loader.prototype = {
 
     },
 
+    /**
+    * Add a JavaScript file to the Loader. Once loaded the JavaScript file will be automatically turned into a script tag (and executed), so be careful what you load!
+    *
+    * @method Phaser.Loader#script
+    * @param {string} key - Unique asset key of the script file.
+    * @param {string} url - URL of the JavaScript file.
+    */
+    script: function (key, url) {
+
+        this.addToFileList('script', key, url);
+
+        return this;
+
+    },
+
     /**
     * Add a new sprite sheet to the loader.
     *
@@ -824,6 +839,19 @@ Phaser.Loader.prototype = {
                 };
                 this._xhr.send();
                 break;
+
+            case 'script':
+
+                this._xhr.open("GET", this.baseURL + file.url, true);
+                this._xhr.responseType = "text";
+                this._xhr.onload = function () {
+                    return _this.fileComplete(_this._fileIndex);
+                };
+                this._xhr.onerror = function () {
+                    return _this.fileError(_this._fileIndex);
+                };
+                this._xhr.send();
+                break;
         }
 
     },
@@ -1007,6 +1035,15 @@ Phaser.Loader.prototype = {
                 file.data = this._xhr.responseText;
                 this.game.cache.addText(file.key, file.url, file.data);
                 break;
+
+            case 'script':
+                file.data = document.createElement('script');
+                file.data.language = 'javascript';
+                file.data.type = 'text/javascript';
+                file.data.defer = true;
+                file.data.text = this._xhr.responseText;
+                document.head.appendChild(file.data);
+                break;
         }
 
         if (loadNext)