diff --git a/README.md b/README.md index 8d6a43a6..c9728058 100644 --- 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 index 8a68d60f..0a8ab574 100644 --- 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 new file mode 100644 index 00000000..ce6c9d40 --- /dev/null +++ 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 deleted file mode 100644 index b435dfcd..00000000 --- a/examples/filters/hue rotate.js +++ /dev/null @@ -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(); - -} diff --git a/examples/filters/marble.js b/examples/filters/marble.js index 723421a6..068a9f49 100644 --- 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 new file mode 100644 index 00000000..66a0a9e6 --- /dev/null +++ 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 new file mode 100644 index 00000000..c168f68c --- /dev/null +++ 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 index 5e8deb94..0494dd93 100644 --- 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 index f0126360..adfb5c48 100644 --- 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 index 4f258bd4..c1e7f60f 100644 --- 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 index 6cd86c55..9f8664e1 100644 --- 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;", diff --git a/filters/Marble.js b/filters/Marble.js index 8b4a1950..1858b72f 100644 --- a/filters/Marble.js +++ b/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 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(); diff --git a/src/loader/Loader.js b/src/loader/Loader.js index ee77aae4..9213eebb 100644 --- a/src/loader/Loader.js +++ b/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;