├── .gitignore ├── .jscsrc ├── .jshintrc ├── Gruntfile.js ├── LICENSE ├── README.md ├── bower.json ├── dist ├── phaser-state-transition-plugin.js └── phaser-state-transition-plugin.min.js ├── package.json └── src └── phaser-state-transition-plugin.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .bower.json 3 | -------------------------------------------------------------------------------- /.jscsrc: -------------------------------------------------------------------------------- 1 | { 2 | "requireCurlyBraces": ["if", "else", "for", "while", "do", "try", "catch"], 3 | "requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"], 4 | "requireSpaceBeforeKeywords": ["else", "catch"], 5 | "requireParenthesesAroundIIFE": true, 6 | "requireSpacesInFunctionExpression": { 7 | "beforeOpeningCurlyBrace": true 8 | }, 9 | "requireSpacesInFunctionExpression": { 10 | "beforeOpeningCurlyBrace": true 11 | }, 12 | "disallowEmptyBlocks": true, 13 | "disallowSpacesInsideArrayBrackets": true, 14 | "disallowSpacesInsideParentheses": true, 15 | "disallowSpaceAfterObjectKeys": true, 16 | "requireCommaBeforeLineBreak": true, 17 | "requireOperatorBeforeLineBreak": ["?", "+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="], 18 | "requireSpaceBeforeBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!=="], 19 | "requireSpaceAfterBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!=="], 20 | "disallowMixedSpacesAndTabs": true, 21 | "disallowTrailingWhitespace": true, 22 | "requireCapitalizedConstructors": true, 23 | "disallowMultipleLineBreaks": true, 24 | "requireSpaceBeforeBlockStatements": true, 25 | "validateQuoteMarks": { 26 | "escape": true, 27 | "mark": "'" 28 | }, 29 | "validateParameterSeparator": ", " 30 | } 31 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | // JSHint Default Configuration File (as on JSHint website) 3 | // See http://jshint.com/docs/ for more details 4 | 5 | "maxerr" : 50, // {int} Maximum error before stopping 6 | 7 | // Enforcing 8 | "bitwise" : true, // true: Prohibit bitwise operators (&, |, ^, etc.) 9 | "camelcase" : true, // true: Identifiers must be in camelCase 10 | "curly" : true, // true: Require {} for every new block or scope 11 | "eqeqeq" : true, // true: Require triple equals (===) for comparison 12 | "freeze" : true, // true: prohibits overwriting prototypes of native objects such as Array, Date etc. 13 | "forin" : true, // true: Require filtering for..in loops with obj.hasOwnProperty() 14 | "immed" : false, // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());` 15 | "indent" : 2, // {int} Number of spaces to use for indentation 16 | "latedef" : false, // true: Require variables/functions to be defined before being used 17 | "newcap" : false, // true: Require capitalization of all constructor functions e.g. `new F()` 18 | "noarg" : true, // true: Prohibit use of `arguments.caller` and `arguments.callee` 19 | "noempty" : true, // true: Prohibit use of empty blocks 20 | "nonbsp" : true, // true: Prohibit "non-breaking whitespace" characters. 21 | "nonew" : false, // true: Prohibit use of constructors for side-effects (without assignment) 22 | "plusplus" : false, // true: Prohibit use of `++` & `--` 23 | "quotmark" : false, // Quotation mark consistency: 24 | // false : do nothing (default) 25 | // true : ensure whatever is used is consistent 26 | // "single" : require single quotes 27 | // "double" : require double quotes 28 | "undef" : true, // true: Require all non-global variables to be declared (prevents global leaks) 29 | "unused" : true, // true: Require all defined variables be used 30 | "strict" : true, // true: Requires all functions run in ES5 Strict Mode 31 | "maxparams" : false, // {int} Max number of formal params allowed per function 32 | "maxdepth" : false, // {int} Max depth of nested blocks (within functions) 33 | "maxstatements" : false, // {int} Max number statements per function 34 | "maxcomplexity" : false, // {int} Max cyclomatic complexity per function 35 | "maxlen" : false, // {int} Max number of characters per line 36 | 37 | // Relaxing 38 | "asi" : false, // true: Tolerate Automatic Semicolon Insertion (no semicolons) 39 | "boss" : false, // true: Tolerate assignments where comparisons would be expected 40 | "debug" : false, // true: Allow debugger statements e.g. browser breakpoints. 41 | "eqnull" : false, // true: Tolerate use of `== null` 42 | "es5" : false, // true: Allow ES5 syntax (ex: getters and setters) 43 | "esnext" : false, // true: Allow ES.next (ES6) syntax (ex: `const`) 44 | "moz" : false, // true: Allow Mozilla specific syntax (extends and overrides esnext features) 45 | // (ex: `for each`, multiple try/catch, function expression…) 46 | "evil" : false, // true: Tolerate use of `eval` and `new Function()` 47 | "expr" : false, // true: Tolerate `ExpressionStatement` as Programs 48 | "funcscope" : false, // true: Tolerate defining variables inside control statements 49 | "globalstrict" : false, // true: Allow global "use strict" (also enables 'strict') 50 | "iterator" : false, // true: Tolerate using the `__iterator__` property 51 | "lastsemic" : false, // true: Tolerate omitting a semicolon for the last statement of a 1-line block 52 | "laxbreak" : false, // true: Tolerate possibly unsafe line breakings 53 | "laxcomma" : false, // true: Tolerate comma-first style coding 54 | "loopfunc" : false, // true: Tolerate functions being defined in loops 55 | "multistr" : false, // true: Tolerate multi-line strings 56 | "noyield" : false, // true: Tolerate generator functions with no yield statement in them. 57 | "notypeof" : false, // true: Tolerate invalid typeof operator values 58 | "proto" : false, // true: Tolerate using the `__proto__` property 59 | "scripturl" : false, // true: Tolerate script-targeted URLs 60 | "shadow" : false, // true: Allows re-define variables later in code e.g. `var x=1; x=2;` 61 | "sub" : false, // true: Tolerate using `[]` notation when it can still be expressed in dot notation 62 | "supernew" : false, // true: Tolerate `new function () { ... };` and `new Object;` 63 | "validthis" : true, // true: Tolerate using this in a non-constructor function 64 | 65 | // Environments 66 | "browser" : true, // Web Browser (window, document, etc) 67 | "browserify" : true, // Browserify (node.js code in the browser) 68 | "couch" : false, // CouchDB 69 | "devel" : true, // Development/debugging (alert, confirm, etc) 70 | "dojo" : false, // Dojo Toolkit 71 | "jasmine" : false, // Jasmine 72 | "jquery" : false, // jQuery 73 | "mocha" : true, // Mocha 74 | "mootools" : false, // MooTools 75 | "node" : true, // Node.js 76 | "nonstandard" : false, // Widely adopted globals (escape, unescape, etc) 77 | "prototypejs" : false, // Prototype and Scriptaculous 78 | "qunit" : false, // QUnit 79 | "rhino" : false, // Rhino 80 | "shelljs" : false, // ShellJS 81 | "worker" : false, // Web Workers 82 | "wsh" : false, // Windows Scripting Host 83 | "yui" : false, // Yahoo User Interface 84 | 85 | // Custom Globals 86 | "globals" : {"Phaser": false} // additional predefined global variables 87 | } 88 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function (grunt) { 4 | var srcFiles = ['src/*.js', 'Gruntfile.js'], 5 | bumpFiles = ['package.json', 'bower.json']; 6 | 7 | // Load grunt tasks automatically 8 | require('load-grunt-tasks')(grunt); 9 | 10 | // Define the configuration for all the tasks 11 | grunt.initConfig({ 12 | copy: { 13 | files: { src: 'src/phaser-state-transition-plugin.js', dest: 'dist/phaser-state-transition-plugin.js' } 14 | }, 15 | uglify: { 16 | dist: { 17 | files: { 18 | 'dist/phaser-state-transition-plugin.min.js': ['src/phaser-state-transition-plugin.js'] 19 | } 20 | } 21 | }, 22 | jscs: { 23 | options: { 24 | config: '.jscsrc', 25 | reporter: require('jscs-stylish').path 26 | }, 27 | all: { 28 | src: srcFiles 29 | } 30 | }, 31 | jshint: { 32 | options: { 33 | jshintrc: '.jshintrc', 34 | reporter: require('jshint-stylish') 35 | }, 36 | src: srcFiles 37 | }, 38 | bump: { 39 | options: { 40 | files: bumpFiles, 41 | updateConfigs: [], 42 | commit: true, 43 | commitMessage: 'Release %VERSION%', 44 | commitFiles: bumpFiles, 45 | createTag: true, 46 | tagName: '%VERSION%', 47 | tagMessage: 'Version %VERSION%', 48 | push: true, 49 | pushTo: 'origin', 50 | gitDescribeOptions: '--tags --always --abbrev=1 --dirty=-d' 51 | } 52 | }, 53 | }); 54 | 55 | // Register grunt tasks 56 | grunt.registerTask('default', 'build'); 57 | grunt.registerTask('build', ['jshint', 'jscs', 'uglify', 'copy']); 58 | }; 59 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Alan Accurso 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # DEPRECATED! 2 | 3 | Use original [phaser-state-transition](https://github.com/cristianbote/phaser-state-transition) plugin, which is up-to-date with the latest version of Phaser.js. 4 | 5 | # phaser-state-transition-plugin 6 | 7 | > State transition plugin for Phaser.js 8 | 9 | ## Disclaimer 10 | 11 | This plugin is based on [@cristianbote](https://github.com/cristianbote)'s [phaser-state-transition](https://github.com/cristianbote/phaser-state-transition) so lots of thanks to him. 12 | 13 | He's been inactive for quite a long time now, so I've taken the liberty to create a new repository with some custom modifications from the original plugin (plus code refactor). 14 | 15 | Contributions are most welcome! 16 | 17 | ## Installation 18 | 19 | ### Bower 20 | 21 | To install this plugin via bower: 22 | ``` 23 | bower install phaser-state-transition-plugin --save 24 | ``` 25 | Add it to your index.html (after phaser.js): 26 | ```html 27 | 28 | 29 | 30 | ``` 31 | 32 | ## Usage 33 | 34 | [Demo](http://aaccurso.github.io/phaser-state-transition-plugin/demo/)!! 35 | 36 | Initialize it (if you have a boot state that's where you want to do it): 37 | ```js 38 | this.game.stateTransition = this.game.plugins.add(Phaser.Plugin.StateTransition); 39 | ``` 40 | 41 | Configure global transition tweening properties: 42 | ```js 43 | this.game.stateTransition.configure({ 44 | duration: Phaser.Timer.SECOND * 0.8, 45 | ease: Phaser.Easing.Exponential.InOut, 46 | properties: { 47 | alpha: 0, 48 | scale: { 49 | x: 1.4, 50 | y: 1.4 51 | } 52 | } 53 | }); 54 | ``` 55 | > In a later release we want to support tween configuration per transition. 56 | 57 | Use it: 58 | ```js 59 | this.game.stateTransition.to('state2'); 60 | ``` 61 | or if you need to pass more arguments like in the original State.start method: 62 | ```js 63 | // to(key, clearWorld, clearCache, parameter) 64 | this.game.stateTransition.to('state2', true, false, {levelId: 2}); 65 | ``` 66 | > This isn't supported in the original plugin, and it was the main reason we decided to refactor it. 67 | 68 | ## Happy transitioning 69 | Made with <3 70 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "phaser-state-transition-plugin", 3 | "version": "0.1.6", 4 | "homepage": "https://github.com/aaccurso/phaser-state-transition-plugin", 5 | "authors": [ 6 | "aaccurso " 7 | ], 8 | "description": "State Transition plugin for Phaser.js", 9 | "main": "dist/phaser-state-transition-plugin.min.js", 10 | "keywords": [ 11 | "phaser", 12 | "state", 13 | "transition", 14 | "plugin" 15 | ], 16 | "license": "MIT", 17 | "ignore": [ 18 | "**/.*", 19 | "node_modules", 20 | "bower_components", 21 | "test", 22 | "tests" 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /dist/phaser-state-transition-plugin.js: -------------------------------------------------------------------------------- 1 | /** 2 | * StateTransition Plugin for Phaser 3 | */ 4 | (function (window, Phaser) { 5 | 'use strict'; 6 | 7 | Phaser.Plugin.StateTransition = function (game, parent) { 8 | Phaser.Plugin.call(this, game, parent); 9 | 10 | // Default transition settings 11 | this.settings = { 12 | duration: Phaser.Timer.SECOND * 0.3, 13 | ease: Phaser.Easing.Exponential.InOut, 14 | properties: { 15 | alpha: 0 16 | } 17 | }; 18 | // Original implementations of state methods 19 | this._originalStateMethods = {}; 20 | }; 21 | 22 | Phaser.Plugin.StateTransition.prototype = Object.create(Phaser.Plugin.prototype); 23 | 24 | Phaser.Plugin.StateTransition.prototype.constructor = Phaser.Plugin.StateTransition; 25 | 26 | Phaser.Plugin.StateTransition.prototype.configure = function (options) { 27 | var property; 28 | 29 | if (options) { 30 | for (property in options) { 31 | if (this.settings[property]) { 32 | this.settings[property] = options[property]; 33 | } 34 | } 35 | } else { 36 | return Object.create(this.settings); 37 | } 38 | }; 39 | 40 | /** 41 | * Handles the state changes and transitions 42 | */ 43 | Phaser.Plugin.StateTransition.prototype.to = function () { 44 | var stateName = arguments[0], 45 | _this = this, 46 | _init, 47 | _create; 48 | 49 | if (!stateName) { 50 | throw 'No state passed.'; 51 | } 52 | 53 | // In case last transition went wrong 54 | this._destroy(); 55 | 56 | // Pause game to take world snapshot 57 | this.game.paused = true; 58 | 59 | // Create current state texture 60 | this._texture = new Phaser.RenderTexture(this.game, this.game.width, this.game.height, 'cover'); 61 | 62 | // Draw the current world to the render 63 | this._texture.renderXY(this.game.world, -this.game.camera.x, -this.game.camera.y); 64 | 65 | // Save original implementation of state's init and create methods 66 | this._originalStateMethods[stateName] = this._originalStateMethods[stateName] || { 67 | init: this.game.state.states[stateName].init, 68 | create: this.game.state.states[stateName].create 69 | }; 70 | _init = this._originalStateMethods[stateName].init; 71 | _create = this._originalStateMethods[stateName].create; 72 | 73 | // Extend state init method to add cover 74 | this.game.state.states[stateName].init = function() { 75 | this.game.add.existing(_this._newCover()); 76 | if (_init) { 77 | _init.apply(this, arguments); 78 | } 79 | }; 80 | 81 | // Extend state create method to animate cover 82 | this.game.state.states[stateName].create = function() { 83 | if (_create) { 84 | _create.apply(this, arguments); 85 | } 86 | _this.bringToTop(); 87 | _this._animateCover(); 88 | }; 89 | 90 | // Resume the game and start next state 91 | this.game.paused = false; 92 | this.game.state.start.apply(this.game.state, arguments); 93 | }; 94 | 95 | /** 96 | * Create previous state cover 97 | */ 98 | Phaser.Plugin.StateTransition.prototype._newCover = function () { 99 | // Create current state cover sprite 100 | this._cover = new Phaser.Sprite(this.game, 0, 0, this._texture); 101 | this._cover.fixedToCamera = true; 102 | this._cover.anchor.set(0.5); 103 | // Instead of x/y we need to set the cameraOffset point 104 | this._cover.cameraOffset.x = this.game.width / 2; 105 | this._cover.cameraOffset.y = this.game.height / 2; 106 | return this._cover; 107 | }; 108 | 109 | /** 110 | * Can be called in the create function of states that you transition to, 111 | * to ensure that the transition-sprite is on top of everything 112 | */ 113 | Phaser.Plugin.StateTransition.prototype.bringToTop = function () { 114 | if (this._cover) { 115 | this._cover.bringToTop(); 116 | } 117 | }; 118 | 119 | Phaser.Plugin.StateTransition.prototype._animateCover = function () { 120 | var propertyValueObject, property, tween; 121 | 122 | for (property in this.settings.properties) { 123 | if (typeof this.settings.properties[property] === 'object') { 124 | // Create a tween for specific object property 125 | tween = this.game.add 126 | .tween(this._cover[property]) 127 | .to(this.settings.properties[property], 128 | this.settings.duration, 129 | this.settings.ease, true); 130 | } else { 131 | // Create properties object for specific property value 132 | propertyValueObject = {}; 133 | propertyValueObject[property] = this.settings.properties[property]; 134 | tween = this.game.add 135 | .tween(this._cover) 136 | .to(propertyValueObject, 137 | this.settings.duration, 138 | this.settings.ease, true); 139 | } 140 | } 141 | // Since all tweens have the same duration we listen to the last one created 142 | tween.onComplete.addOnce(this._destroy, this); 143 | }; 144 | 145 | Phaser.Plugin.StateTransition.prototype._destroy = function () { 146 | if (this._cover) { 147 | this._cover.destroy(); 148 | } 149 | if (this._texture) { 150 | this._texture.destroy(); 151 | } 152 | }; 153 | 154 | }(window, Phaser)); 155 | -------------------------------------------------------------------------------- /dist/phaser-state-transition-plugin.min.js: -------------------------------------------------------------------------------- 1 | !function(a,b){"use strict";b.Plugin.StateTransition=function(a,c){b.Plugin.call(this,a,c),this.settings={duration:.3*b.Timer.SECOND,ease:b.Easing.Exponential.InOut,properties:{alpha:0}},this._originalStateMethods={}},b.Plugin.StateTransition.prototype=Object.create(b.Plugin.prototype),b.Plugin.StateTransition.prototype.constructor=b.Plugin.StateTransition,b.Plugin.StateTransition.prototype.configure=function(a){var b;if(!a)return Object.create(this.settings);for(b in a)this.settings[b]&&(this.settings[b]=a[b])},b.Plugin.StateTransition.prototype.to=function(){var a,c,d=arguments[0],e=this;if(!d)throw"No state passed.";this._destroy(),this.game.paused=!0,this._texture=new b.RenderTexture(this.game,this.game.width,this.game.height,"cover"),this._texture.renderXY(this.game.world,-this.game.camera.x,-this.game.camera.y),this._originalStateMethods[d]=this._originalStateMethods[d]||{init:this.game.state.states[d].init,create:this.game.state.states[d].create},a=this._originalStateMethods[d].init,c=this._originalStateMethods[d].create,this.game.state.states[d].init=function(){this.game.add.existing(e._newCover()),a&&a.apply(this,arguments)},this.game.state.states[d].create=function(){c&&c.apply(this,arguments),e.bringToTop(),e._animateCover()},this.game.paused=!1,this.game.state.start.apply(this.game.state,arguments)},b.Plugin.StateTransition.prototype._newCover=function(){return this._cover=new b.Sprite(this.game,0,0,this._texture),this._cover.fixedToCamera=!0,this._cover.anchor.set(.5),this._cover.cameraOffset.x=this.game.width/2,this._cover.cameraOffset.y=this.game.height/2,this._cover},b.Plugin.StateTransition.prototype.bringToTop=function(){this._cover&&this._cover.bringToTop()},b.Plugin.StateTransition.prototype._animateCover=function(){var a,b,c;for(b in this.settings.properties)"object"==typeof this.settings.properties[b]?c=this.game.add.tween(this._cover[b]).to(this.settings.properties[b],this.settings.duration,this.settings.ease,!0):(a={},a[b]=this.settings.properties[b],c=this.game.add.tween(this._cover).to(a,this.settings.duration,this.settings.ease,!0));c.onComplete.addOnce(this._destroy,this)},b.Plugin.StateTransition.prototype._destroy=function(){this._cover&&this._cover.destroy(),this._texture&&this._texture.destroy()}}(window,Phaser); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "phaser-state-transition-plugin", 3 | "version": "0.1.6", 4 | "description": "State Transition plugin for Phaser.js", 5 | "main": "dist/phaser-state-transition-plugin.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/aaccurso/phaser-state-transition-plugin.git" 12 | }, 13 | "keywords": [ 14 | "phaser", 15 | "state", 16 | "transition", 17 | "plugin" 18 | ], 19 | "author": "aaccurso", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/aaccurso/phaser-state-transition-plugin/issues" 23 | }, 24 | "homepage": "https://github.com/aaccurso/phaser-state-transition-plugin", 25 | "devDependencies": { 26 | "grunt": "^0.4.5", 27 | "grunt-bump": "0.0.16", 28 | "grunt-contrib-copy": "^0.8.0", 29 | "grunt-contrib-jshint": "^0.10.0", 30 | "grunt-contrib-uglify": "^0.6.0", 31 | "grunt-jscs": "^1.0.0", 32 | "jscs-stylish": "^0.3.1", 33 | "jshint-stylish": "^1.0.0", 34 | "load-grunt-tasks": "^1.0.0" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/phaser-state-transition-plugin.js: -------------------------------------------------------------------------------- 1 | /** 2 | * StateTransition Plugin for Phaser 3 | */ 4 | (function (window, Phaser) { 5 | 'use strict'; 6 | 7 | Phaser.Plugin.StateTransition = function (game, parent) { 8 | Phaser.Plugin.call(this, game, parent); 9 | 10 | // Default transition settings 11 | this.settings = { 12 | duration: Phaser.Timer.SECOND * 0.3, 13 | ease: Phaser.Easing.Exponential.InOut, 14 | properties: { 15 | alpha: 0 16 | } 17 | }; 18 | // Original implementations of state methods 19 | this._originalStateMethods = {}; 20 | }; 21 | 22 | Phaser.Plugin.StateTransition.prototype = Object.create(Phaser.Plugin.prototype); 23 | 24 | Phaser.Plugin.StateTransition.prototype.constructor = Phaser.Plugin.StateTransition; 25 | 26 | Phaser.Plugin.StateTransition.prototype.configure = function (options) { 27 | var property; 28 | 29 | if (options) { 30 | for (property in options) { 31 | if (this.settings[property]) { 32 | this.settings[property] = options[property]; 33 | } 34 | } 35 | } else { 36 | return Object.create(this.settings); 37 | } 38 | }; 39 | 40 | /** 41 | * Handles the state changes and transitions 42 | */ 43 | Phaser.Plugin.StateTransition.prototype.to = function () { 44 | var stateName = arguments[0], 45 | _this = this, 46 | _init, 47 | _create; 48 | 49 | if (!stateName) { 50 | throw 'No state passed.'; 51 | } 52 | 53 | // In case last transition went wrong 54 | this._destroy(); 55 | 56 | // Pause game to take world snapshot 57 | this.game.paused = true; 58 | 59 | // Create current state texture 60 | this._texture = new Phaser.RenderTexture(this.game, this.game.width, this.game.height, 'cover'); 61 | 62 | // Draw the current world to the render 63 | this._texture.renderXY(this.game.world, -this.game.camera.x, -this.game.camera.y); 64 | 65 | // Save original implementation of state's init and create methods 66 | this._originalStateMethods[stateName] = this._originalStateMethods[stateName] || { 67 | init: this.game.state.states[stateName].init, 68 | create: this.game.state.states[stateName].create 69 | }; 70 | _init = this._originalStateMethods[stateName].init; 71 | _create = this._originalStateMethods[stateName].create; 72 | 73 | // Extend state init method to add cover 74 | this.game.state.states[stateName].init = function() { 75 | this.game.add.existing(_this._newCover()); 76 | if (_init) { 77 | _init.apply(this, arguments); 78 | } 79 | }; 80 | 81 | // Extend state create method to animate cover 82 | this.game.state.states[stateName].create = function() { 83 | if (_create) { 84 | _create.apply(this, arguments); 85 | } 86 | _this.bringToTop(); 87 | _this._animateCover(); 88 | }; 89 | 90 | // Resume the game and start next state 91 | this.game.paused = false; 92 | this.game.state.start.apply(this.game.state, arguments); 93 | }; 94 | 95 | /** 96 | * Create previous state cover 97 | */ 98 | Phaser.Plugin.StateTransition.prototype._newCover = function () { 99 | // Create current state cover sprite 100 | this._cover = new Phaser.Sprite(this.game, 0, 0, this._texture); 101 | this._cover.fixedToCamera = true; 102 | this._cover.anchor.set(0.5); 103 | // Instead of x/y we need to set the cameraOffset point 104 | this._cover.cameraOffset.x = this.game.width / 2; 105 | this._cover.cameraOffset.y = this.game.height / 2; 106 | return this._cover; 107 | }; 108 | 109 | /** 110 | * Can be called in the create function of states that you transition to, 111 | * to ensure that the transition-sprite is on top of everything 112 | */ 113 | Phaser.Plugin.StateTransition.prototype.bringToTop = function () { 114 | if (this._cover) { 115 | this._cover.bringToTop(); 116 | } 117 | }; 118 | 119 | Phaser.Plugin.StateTransition.prototype._animateCover = function () { 120 | var propertyValueObject, property, tween; 121 | 122 | for (property in this.settings.properties) { 123 | if (typeof this.settings.properties[property] === 'object') { 124 | // Create a tween for specific object property 125 | tween = this.game.add 126 | .tween(this._cover[property]) 127 | .to(this.settings.properties[property], 128 | this.settings.duration, 129 | this.settings.ease, true); 130 | } else { 131 | // Create properties object for specific property value 132 | propertyValueObject = {}; 133 | propertyValueObject[property] = this.settings.properties[property]; 134 | tween = this.game.add 135 | .tween(this._cover) 136 | .to(propertyValueObject, 137 | this.settings.duration, 138 | this.settings.ease, true); 139 | } 140 | } 141 | // Since all tweens have the same duration we listen to the last one created 142 | tween.onComplete.addOnce(this._destroy, this); 143 | }; 144 | 145 | Phaser.Plugin.StateTransition.prototype._destroy = function () { 146 | if (this._cover) { 147 | this._cover.destroy(); 148 | } 149 | if (this._texture) { 150 | this._texture.destroy(); 151 | } 152 | }; 153 | 154 | }(window, Phaser)); 155 | --------------------------------------------------------------------------------