diff --git a/README.md b/README.md index 8efe2dc6..28b97daf 100644 --- a/README.md +++ b/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 diff --git a/examples/assets/textures/cyberglow.png b/examples/assets/textures/cyberglow.png new file mode 100644 index 00000000..98a8cadf Binary files /dev/null and b/examples/assets/textures/cyberglow.png differ diff --git a/examples/assets/textures/factory.png b/examples/assets/textures/factory.png new file mode 100644 index 00000000..54df553e Binary files /dev/null and b/examples/assets/textures/factory.png differ diff --git a/examples/assets/textures/metal.png b/examples/assets/textures/metal.png new file mode 100644 index 00000000..63fa9943 Binary files /dev/null and b/examples/assets/textures/metal.png differ diff --git a/examples/assets/textures/ooze.png b/examples/assets/textures/ooze.png new file mode 100644 index 00000000..12188e59 Binary files /dev/null and b/examples/assets/textures/ooze.png differ diff --git a/examples/assets/textures/tron.png b/examples/assets/textures/tron.png new file mode 100644 index 00000000..7ed3c3c4 Binary files /dev/null and b/examples/assets/textures/tron.png differ diff --git a/examples/assets/textures/wetstone.png b/examples/assets/textures/wetstone.png new file mode 100644 index 00000000..f5c5991f Binary files /dev/null and b/examples/assets/textures/wetstone.png differ diff --git a/examples/filters/fire.js b/examples/filters/fire.js index 363a8fd6..7208df53 100644 --- a/examples/filters/fire.js +++ b/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'); } diff --git a/examples/filters/lightbeams.js b/examples/filters/lightbeams.js new file mode 100644 index 00000000..3802670f --- /dev/null +++ b/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(); + +} diff --git a/examples/filters/plasma.js b/examples/filters/plasma.js new file mode 100644 index 00000000..90d59f32 --- /dev/null +++ b/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; + +} diff --git a/examples/filters/tunnel.js b/examples/filters/tunnel.js new file mode 100644 index 00000000..42314d62 --- /dev/null +++ b/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; + +} diff --git a/examples/wip/fire_demo.js b/examples/wip/fire_demo.js index 30afb25a..dc8ef457 100644 --- a/examples/wip/fire_demo.js +++ b/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'); } diff --git a/examples/wip/index.php b/examples/wip/index.php index 574cb377..7fa7f2b6 100644 --- a/examples/wip/index.php +++ b/examples/wip/index.php @@ -85,11 +85,6 @@ $f = $_GET['f']; ?> - - - - - diff --git a/examples/wip/lightbeam_demo.js b/examples/wip/lightbeam_demo.js new file mode 100644 index 00000000..3802670f --- /dev/null +++ b/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(); + +} diff --git a/examples/wip/plasma_demo.js b/examples/wip/plasma_demo.js new file mode 100644 index 00000000..dcdcb8c5 --- /dev/null +++ b/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; + +} diff --git a/examples/wip/tunnel_demo.js b/examples/wip/tunnel_demo.js index 37a7c4bc..9ce48f60 100644 --- a/examples/wip/tunnel_demo.js +++ b/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; + } diff --git a/filters/LightBeam.js b/filters/LightBeam.js new file mode 100644 index 00000000..d69cbe65 --- /dev/null +++ b/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; + } + +}); diff --git a/filters/Plasma.js b/filters/Plasma.js new file mode 100644 index 00000000..7caf2f6e --- /dev/null +++ b/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; + } + +}); diff --git a/filters/Tunnel.js b/filters/Tunnel.js index fb71e6ef..f6880473 100644 --- a/filters/Tunnel.js +++ b/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; } }); diff --git a/resources/Screen Shots/phaser_tunnel.png b/resources/Screen Shots/phaser_tunnel.png new file mode 100644 index 00000000..2a3134ae Binary files /dev/null and b/resources/Screen Shots/phaser_tunnel.png differ diff --git a/src/core/StateManager.js b/src/core/StateManager.js index 496d7697..ef61ed26 100644 --- a/src/core/StateManager.js +++ b/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 diff --git a/src/loader/Loader.js b/src/loader/Loader.js index 22df8861..ccd6081c 100644 --- a/src/loader/Loader.js +++ b/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)