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

Author: photonstorm

README.md

@@ -41,6 +41,8 @@ Change Log
 
 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: Added Phaser.Filter. A new way to use the new WebGL shaders/filters that the new version of Pixi supports.
 * New: The object returned by Math.sinCosGenerator now contains a length property.
 * New: Phaser.BitmapData object. Can be used as a texture for a Sprite or Tiling Sprite. See the new examples and docs for details.
 * New: RenderTexture.render now takes a Phaser.Group. Also added renderXY for when you don't want to make a new Point object.
@@ -68,6 +70,7 @@ Version 1.1.3 - in build
 * Fixed: Point.rotate asDegrees fixed (thanks BorisKozo)
 * Fixed: ArcadePhysics.separateTile wasn't returning the value, so the custom process callback wasn't getting called (thanks flameiguana)
 * Fixed: StageScaleMode.forceOrientation now correctly stores the forcePortrait value (thanks haden)
+* Fixed: Fixes to Math and Loader (thanks theJare)
 
 * Updated: ArcadePhysics.updateMotion applies the dt to the velocity calculations as well as position now (thanks jcs)
 * Updated: RequestAnimationFrame now retains the callbackID which is passed to cancelRequestAnimationFrame.

build/config.php

@@ -31,7 +31,7 @@
     <script src="../src/pixi/filters/DisplacementFilter.js"></script>
     <script src="../src/pixi/filters/DotScreenFilter.js"></script>
     <script src="../src/pixi/filters/FilterBlock.js"></script>
-    <script src="../src/pixi/filters/GreyFilter.js"></script>
+    <script src="../src/pixi/filters/GrayFilter.js"></script>
     <script src="../src/pixi/filters/InvertFilter.js"></script>
     <script src="../src/pixi/filters/PixelateFilter.js"></script>
     <script src="../src/pixi/filters/RGBSplitFilter.js"></script>
@@ -69,6 +69,7 @@
 	<script src="../src/core/LinkedList.js"></script>
 	<script src="../src/core/Signal.js"></script>
 	<script src="../src/core/SignalBinding.js"></script>
+	<script src="../src/core/Filter.js"></script>
 	<script src="../src/core/Plugin.js"></script>
 	<script src="../src/core/PluginManager.js"></script>
 	<script src="../src/core/Stage.js"></script>

examples/wip/binarySerpentsFilter.js

@@ -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

@@ -17,6 +17,8 @@
 
 <script type="text/javascript">
 
+var PIXI = PIXI || {};
+
 document.addEventListener('DOMContentLoaded', function() {
 
 function makeFilter () {

examples/wip/colorBoxFilter.js

@@ -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;
+
+	// filter = game.add.filter('SampleFilter', 800, 600, 0.5);
+	filter = game.add.filter('BinarySerpents', 800, 600, 100, 5.0);
 
-	var a = game.add.sprite(0, 0, 'sea');
-	a.filters = [stars];
+	background.filters = [filter];
 
 }
 
 function update() {
 
-	stars.iGlobalTime = game.time.totalElapsedSeconds();
-
-}
+	filter.update();
 
-function render() {
 }

examples/wip/colorbars_demo.js

@@ -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

@@ -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

@@ -85,6 +85,10 @@ function printJSLinks($dir, $files) {
                 $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

@@ -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

@@ -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() {
+}