├── .gitignore ├── build └── phaser3-transitions.js ├── lib.webpack.config.js ├── package.json ├── readme.md ├── src ├── defaults │ ├── base-transition.js │ ├── explode-transition.js │ ├── fade-transition.js │ ├── grow-transition.js │ ├── materialize-transition.js │ ├── slide-transition.js │ ├── slidefade-transition.js │ └── util │ │ ├── chain.js │ │ ├── fuzz-int.js │ │ ├── get-offscreen-pos.js │ │ └── is-function.js ├── phaser3-transitions.js └── transitions-plugin.js ├── tests.webpack.config.js ├── tests ├── dat-gui-controller.js ├── dat-gui-data.js ├── game.js ├── scenes │ ├── main.js │ └── preload.js └── www │ ├── assets │ └── sprites │ │ ├── button.png │ │ ├── phaser3.png │ │ ├── sprites.json │ │ ├── sprites.png │ │ └── station.png │ ├── bundle.js │ └── index.html └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /package-lock.json 3 | /.vscode/ -------------------------------------------------------------------------------- /build/phaser3-transitions.js: -------------------------------------------------------------------------------- 1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("phaser")):"function"==typeof define&&define.amd?define(["phaser"],e):"object"==typeof exports?exports["phaser3-transitions"]=e(require("phaser")):t["phaser3-transitions"]=e(t.phaser)}(window,function(t){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(e,n){e.exports=t},function(t,e,n){"use strict";n.r(e);var o=n(0),r=n.n(o);var i=function(t){return t&&"[object Function]"==={}.toString.call(t)};var a=function(t,e){if(0===e)return t;let n=t*e,o=Math.floor(Math.random()*Math.floor(n));return t+(Math.random()<.5?-1:1)*o};var s=function(t,e,n){var o=n.props.map(()=>t.tweens.createTimeline());e.forEach((t,e)=>{let r=i(n.from)?n.from(t,e):n.from,s=i(n.to)?n.to(t,e):n.to;for(let e=0;e{r.push(new Promise((e,n)=>{t.on("complete",()=>{e()})})),t.play()}),Promise.all(r)};var f=class{constructor(t){this.scene=t.scene,this._targets=t.targets||[],this._defaults=t.defaults||{},this._config=Object.assign({},t.defaults||{},t.config||{}),this._enterConfig=t.enterConfig,this._exitConfig=t.exitConfig,this._affectedProps=t.affectedProps||[],this._cachedProps=this._cacheProps(this._targets,this._affectedProps),this.isTransitioning=!1}setConfig(t={}){this._config=Object.assign({},this._defaults,this._config,t)}resetProps(){let t=this._targets,e=this._cachedProps;t.forEach((t,n)=>{for(let o in e[n])t[o]=e[n][o]})}enter(t){if(!this.isTransitioning){this.isTransitioning=!0,null!=t&&this.setConfig(t),this.resetProps();var e=this._enterConfig(this.scene,this._config);return s(this.scene,this._targets,e).then(()=>{this.isTransitioning=!1})}}exit(t){if(!this.isTransitioning){this.isTransitioning=!0,null!=t&&this.setConfig(t);var e=this._exitConfig(this.scene,this._config);return s(this.scene,this._targets,e).then(()=>{this.isTransitioning=!1})}}_cacheProps(t,e){let n=[];return t.forEach(t=>{let o={};e.forEach(e=>{o[e]=t[e]}),n.push(o)}),n}};class u extends f{constructor(t,e,n={}){super({scene:t,targets:e,config:n,defaults:u.Defaults,affectedProps:u.AffectedProps,enterConfig:u.EnterConfig,exitConfig:u.ExitConfig})}}u.AffectedProps=["alpha"],u.Defaults={chain:!1,fuzz:0,offset:null,duration:500},u.EnterConfig=function(t,e){let n=e.offest||"-=".concat(.8*e.duration);null==e.fuzz||e.fuzz;return{props:["alpha"],ease:"Quad.easeOut",from:[0],to:function(t){return[t.alpha]},duration:e.duration,offset:e.chain?n:0}},u.ExitConfig=function(t,e){let n=e.offest||"-=".concat(.8*e.duration);null==e.fuzz||e.fuzz;return{props:["alpha"],ease:"Quad.easeIn",from:function(t){return[t.alpha]},to:[0],duration:e.duration,offset:e.chain?n:0}};var c=u;var l=function(t,e,n){switch(n){case"left":return-e.displayWidth*e.originX;case"right":return t.sys.game.config.width+e.displayWidth*e.originX;case"top":return-e.displayHeight*e.originY;case"bottom":return t.sys.game.config.height+e.displayHeight*e.originX}};class p extends f{constructor(t,e,n={}){super({scene:t,targets:e,config:n,defaults:p.Defaults,affectedProps:p.AffectedProps,enterConfig:p.EnterConfig,exitConfig:p.ExitConfig})}}p.AffectedProps=["x","y"],p.Defaults={chain:!0,offset:null,duration:500,enterFrom:"left",exitTo:"right"},p.EnterConfig=function(t,e){let n="top"==e.enterFrom||"bottom"==e.enterFrom?"y":"x",o=null!=e.offest?e.offest:"-=".concat(.8*e.duration);return{fuzz:null==e.fuzz?null:{ratio:e.fuzz,props:n},offset:e.chain?o:0,duration:e.duration,props:[n],ease:"Quad.easeOut",from:n=>[l(t,n,e.enterFrom)],to:(t,e)=>[t[n]]}},p.ExitConfig=function(t,e){let n="top"==e.exitTo||"bottom"==e.exitTo?"y":"x",o=null!=e.offest?e.offest:"-=".concat(.75*e.duration);return{fuzz:null==e.fuzz?null:{ratio:e.fuzz,props:n},offset:e.chain?o:0,duration:e.duration,props:[n],ease:"Quad.easeIn",from:(t,e)=>[t[n]],to:n=>[l(t,n,e.exitTo)]}};var d=p;class h extends f{constructor(t,e,n={}){super({scene:t,targets:e,config:n,defaults:h.Defaults,affectedProps:h.AffectedProps,enterConfig:h.EnterConfig,exitConfig:h.ExitConfig})}}h.AffectedProps=["scaleX","scaleY"],h.Defaults={chain:!1,offset:"-=300",fuzz:0,duration:500},h.EnterConfig=function(t,e){return{fuzz:{ratio:e.fuzz,props:["scaleX","scaleY"]},offset:e.chain?e.offset:0,duration:e.duration,ease:"Quad.easeOut",props:["scaleX","scaleY"],from:[0,0],to:function(t){return[t.scaleX,t.scaleY]}}},h.ExitConfig=function(t,e){return{fuzz:{ratio:e.fuzz,props:["scaleX","scaleY"]},offset:e.chain?e.offset:0,duration:e.duration,ease:"Quad.easeIn",props:["scaleX","scaleY"],from:function(t){return[t.scaleX,t.scaleY]},to:[0,0]}};var g=h;class z extends f{constructor(t,e,n={}){super({scene:t,targets:e,config:n,defaults:z.Defaults,affectedProps:z.AffectedProps,enterConfig:z.EnterConfig,exitConfig:z.ExitConfig})}}z.AffectedProps=["alpha","scaleX","scaleY","x","y"],z.Defaults={chain:!1,fuzz:0,offset:null,duration:500},z.EnterConfig=function(t,e){let n=t.sys.game.config.width/2,o=t.sys.game.config.height/2,r=null!=e.offest?e.offest:"-=".concat(.8*e.duration);return{fuzz:null==e.fuzz?null:{ratio:e.fuzz,props:["alpha","x","y"]},offset:e.chain?r:0,duration:e.duration,ease:"Quad.easeOut",props:["alpha","scaleX","scaleY","x","y"],from:[0,0,0,n,o],to:function(t){return[t.alpha,t.scaleX,t.scaleY,t.x,t.y]}}},z.ExitConfig=function(t,e){let n=t.sys.game.config.width/2,o=t.sys.game.config.height/2,r=null!=e.offest?e.offest:"-=".concat(.8*e.duration);return{fuzz:null==e.fuzz?null:{ratio:e.fuzz,props:["alpha","x","y"]},offset:e.chain?r:0,duration:e.duration,ease:"Quad.easeIn",props:["alpha","scaleX","scaleY","x","y"],from:function(t){return[t.alpha,t.scaleX,t.scaleY,t.x,t.y]},to:[0,0,0,n,o]}};var x=z;class m extends f{constructor(t,e,n={}){super({scene:t,targets:e,config:n,defaults:m.Defaults,affectedProps:m.AffectedProps,enterConfig:m.EnterConfig,exitConfig:m.ExitConfig})}}function C(t,e,n,o){switch(n){case"left":return e.getCenter().x-(o||e.width);case"right":return e.getCenter().x+(o||e.width);case"top":return e.getCenter().y-(o||e.height);case"bottom":return e.getCenter().y+(o||e.height)}}m.AffectedProps=["alpha","x","y"],m.Defaults={enterFrom:"bottom",exitTo:"top",chain:!1,fuzz:0,offset:null,duration:500,distance:null},m.EnterConfig=function(t,e){let n="top"==e.enterFrom||"bottom"==e.enterFrom?"y":"x",o=e.offest||"-=".concat(.8*e.duration),r=null==e.fuzz?null:{ratio:e.fuzz,props:["alpha","x","y"]};return{props:["alpha",n],ease:"Quad.easeOut",duration:e.duration,offset:e.chain?o:0,fuzz:r,from:n=>{return[0,C(t,n,e.enterFrom,e.distance)]},to:function(t){return[t.alpha,t[n]]}}},m.ExitConfig=function(t,e){let n="top"==e.exitTo||"bottom"==e.exitTo?"y":"x",o=e.offest||"-=".concat(.8*e.duration),r=null==e.fuzz?null:{ratio:e.fuzz,props:["alpha","x","y"]};return{props:["alpha",n],ease:"Quad.easeOut",duration:e.duration,offset:e.chain?o:0,fuzz:r,from:t=>[t.alpha,t[n]],to:function(n){return[0,C(t,n,e.exitTo,e.distance)]}}};var y=m;class P extends f{constructor(t,e,n={}){super({scene:t,targets:e,config:n,defaults:P.Defaults,affectedProps:P.AffectedProps,enterConfig:P.EnterConfig,exitConfig:P.ExitConfig})}}P.AffectedProps=["alphaBottomLeft","alphaBottomRight","alphaTopLeft","alphaTopRight"],P.Defaults={chain:!1,fuzz:.75,offset:null,duration:500},P.EnterConfig=function(t,e){let n=e.offest||"-=".concat(.8*e.duration);null==e.fuzz||e.fuzz;return{props:["alphaBottomLeft","alphaBottomRight","alphaTopLeft","alphaTopRight"],ease:"Quad.easeOut",from:[0,0,0,0],to:function(t){return[t.alphaBottomLeft,t.alphaBottomRight,t.alphaTopLeft,t.alphaTopRight]},duration:e.duration,offset:e.chain?n:0}},P.ExitConfig=function(t,e){let n=e.offest||"-=".concat(.8*e.duration);null==e.fuzz||e.fuzz;return{props:["alphaBottomLeft","alphaBottomRight","alphaTopLeft","alphaTopRight"],ease:"Quad.easeIn",from:function(t){return[t.alphaBottomLeft,t.alphaBottomRight,t.alphaTopLeft,t.alphaTopRight]},to:[0,0,0,0],duration:e.duration,offset:e.chain?n:0}};const T={fade:c,slide:d,grow:g,explode:x,slidefade:y,fadeslide:y,materialize:P};var E=class extends r.a.Plugins.ScenePlugin{constructor(t,e){super(t,e),this.scene=t}register(t,e){T[t]=e}create(t,e){return new(0,T[e.type.toLowerCase()])(this.scene,t,e)}enter(t,e){return new(0,T[e.type.toLowerCase()])(this.scene,t,e).enter()}exit(t,e){return new(0,T[e.type.toLowerCase()])(this.scene,t,e).exit()}};n.d(e,"TransitionsPlugin",function(){return E}),n.d(e,"BaseTransition",function(){return f}),n.d(e,"ExplodeTransition",function(){return x}),n.d(e,"FadeTransition",function(){return c}),n.d(e,"GrowTransition",function(){return g}),n.d(e,"SlideTransition",function(){return d}),n.d(e,"SlideFadeTransition",function(){return y}),n.d(e,"MaterializeTransition",function(){return y})}])}); -------------------------------------------------------------------------------- /lib.webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | //const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 3 | const APP_DIR = path.resolve(__dirname, 'src', 'phaser3-transitions.js'); 4 | const BUILD_DIR = path.resolve(__dirname, 'build'); 5 | 6 | module.exports = { 7 | name: "phaser3-transitions", 8 | mode: "production", 9 | entry: APP_DIR, 10 | output: { 11 | path: BUILD_DIR, 12 | filename: 'phaser3-transitions.js', 13 | library: 'phaser3-transitions', 14 | libraryTarget: 'umd', 15 | }, 16 | externals : { 17 | phaser : 'phaser' 18 | }, 19 | module: { 20 | rules: [ { test: /\.js$/, use: ['babel-loader'] } ] 21 | }, 22 | optimization: { 23 | minimize: true 24 | }, 25 | //plugins: [ 26 | // new BundleAnalyzerPlugin() 27 | //] 28 | } 29 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "phaser3-transitions", 3 | "version": "1.0.1", 4 | "description": "Phaser 3 plugin for creating seamless menu transitions.", 5 | "author": "Joshua Avrick", 6 | "license": "MIT", 7 | "main": "./build/phaser3-transitions.js", 8 | "scripts": { 9 | "build": "webpack -p --watch", 10 | "dev": "webpack -d --watch", 11 | "server": "webpack-dev-server --open" 12 | }, 13 | "devDependencies": { 14 | "babel-cli": "^6.26.0", 15 | "babel-core": "^6.26.3", 16 | "babel-loader": "^7.1.5", 17 | "babel-preset-env": "^1.7.0", 18 | "webpack": "^4.16.4", 19 | "webpack-cli": "^3.1.0", 20 | "webpack-dev-server": "^3.1.5", 21 | "dat.gui": "^0.7.2" 22 | }, 23 | "peerDependencies": { 24 | "phaser": "^3.11.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # phaser3-transitions 2 | 3 | A UI transitions plugin for Phaser 3. This plugin essentialy provides a simple wrapper for some complex tweens that move UI components into and out of the scene. Each transition can also be used declaratively if you prefer not to pollute your scene with excessive plugins. 4 | 5 | - [Features](#feature) 6 | - [Install and Setup](#install) 7 | - [Examples](#examples) 8 | - [Plugin API](#pluginapi) 9 | - [Transition Classes](#transitions-classses) 10 | - [BaseTransition](#base-transition) 11 | - [FadeTransition](#fade-transition) 12 | - [SlideTransition](#slide-transition) 13 | - [GrowTransition](#grow-transition) 14 | - [ExplodeTransition](#explode-transition) 15 | - [SlideFadeTransition](#slidefade-transition) 16 | - [Using Declaratively](#using-declaratively) 17 | - [Custom Transitions](#custom-transitions) 18 | 19 | 20 | ### Features 21 | - Smooth transitions for moving UI components on and off the screen 22 | - Simple config options for light customization 23 | - Abstracts away repetitive and/or complex tweens 24 | - Easily extensible via the `BaseTransition` class 25 | 26 | 27 | ### Install 28 | `npm install --save phaser3-transitions` 29 | 30 | 31 | ### Setup 32 | 33 | ```javascript 34 | import Phaser from 'phaser'; 35 | import TransitionsPlugin from 'phaser3-transitions'; 36 | 37 | const gameConfig = { 38 | type: Phaser.WEBGL, 39 | parent: 'game-container', 40 | width: 400, 41 | height: 600, 42 | scene: [ 43 | Preload, 44 | DemoScene 45 | ], 46 | plugins: { 47 | scene: [ 48 | { 49 | key: 'transitions', 50 | mapping: 'transitions', 51 | plugin: TransitionsPlugin 52 | } 53 | ] 54 | }, 55 | }; 56 | 57 | const game = new Phaser.Game(gameConfig); 58 | 59 | ``` 60 | 61 | 62 | ### Examples 63 | --- 64 | Slide in from the left, slide out to the bottom. 65 | ```javascript 66 | import TransitionsPlugin 'phaser3-transitions'; 67 | 68 | //In your create() function 69 | function create(){ 70 | 71 | //The transition will return the sprites to their original positions 72 | let sprite1 = this.add.sprite(100, 100, 'menuItem'); 73 | let sprite2 = this.add.sprite(100, 200, 'menuItem'); 74 | let sprite3 = this.add.sprite(100, 300, 'menuItem'); 75 | let sprites = [sprite1, sprite2, sprite3]; //etc. 76 | 77 | let config = { 78 | type: 'slide', 79 | duration: 500, 80 | enterFrom: 'left', 81 | exitTo: 'bottom' 82 | } 83 | 84 | let slide = this.transitions.create(sprites, config); 85 | 86 | //This will slide all the objects in and then immediately exit 87 | slide.enter().then(() => { 88 | slide.exit(); 89 | }); 90 | 91 | } 92 | ``` 93 | --- 94 | Fade into place, fade AND slide out to the top. 95 | ```javascript 96 | import TransitionsPlugin 'phaser3-transitions'; 97 | 98 | //In your create() function 99 | function create(){ 100 | 101 | //The transition will return the sprites to their original positions 102 | let sprite1 = this.add.sprite(100, 100, 'menuItem'); 103 | let sprite2 = this.add.sprite(100, 200, 'menuItem'); 104 | let sprite3 = this.add.sprite(100, 300, 'menuItem'); 105 | let sprites = [sprite1, sprite2, sprite3]; //etc. 106 | 107 | let enterConfig = { 108 | type: 'Fade', //not case sensitive 109 | } 110 | 111 | let exitConfig = { 112 | type: 'FadeSlide', 113 | exitTo: 'top' 114 | } 115 | 116 | let enterTransitions = this.transitions.create(sprites, enterConfig); 117 | let exitTransition = this.transitions.create(sprites, exitConfig); 118 | 119 | //This will fade all the objects in and then immediately exit 120 | enterTransition.enter().then(() => { 121 | exitTransition.exit(); 122 | }); 123 | 124 | } 125 | ``` 126 | 127 | ## Plugin API 128 | 129 | ### TransitionsPlugin 130 | 131 | The TransitionsPlugin is a factory class which creates transitions for you. Each transition extends the `BaseTransition` class and is essentially a wrapper over top of a (sometimes) complex tween. This plugin also has some ease-of-use methods for quick transitions when your transition are simple. 132 | * Methods: 133 | * [register(key, transitionClass)](#TransitionsPlugin+register) 134 | * [create(targets, config)](#TransitionsPlugin+create) ⇒ BaseTransition 135 | * [enter(targets, config)](#TransitionsPlugin+enter) ⇒ Promise 136 | * [exit(targets, config)](#TransitionsPlugin+exit) ⇒ Promise 137 | 138 | 139 | 140 | ### transitions.register(key, transitionClass) 141 | Adds a transition class to the plugin's dictionary. A transition class must extend `BaseTransition` and be registered if it is not already one of the default classes. 142 | 143 | 144 | 145 | | Param | Type | Description | 146 | | --- | --- | --- | 147 | | key | String | The key by which the transition can be referenced | 148 | | transitionClass | BaseTransition | A class which extends the BaseTransition class | 149 | 150 | 151 | 152 | ### transitions.create(targets, config) ⇒ BaseTransition 153 | Creates a new transition based on the given config 154 | 155 | 156 | **Returns**: BaseTransition - - A transition class extending `BaseTransition` 157 | 158 | | Param | Type | Description | 159 | | --- | --- | --- | 160 | | targets | Array | The targets for this transition. These cannot be changed once the transition is created. | 161 | | config | Object | Settings for the transition | 162 | | config.type | String | A key to one of the default transitions, which currently includes any of the following: `"Fade"`, `"Slide"`, `"Grow"`, `"Explode"`, or `"FadeSlide"`. See the class descriptions for more info about each transition. | 163 | 164 | 165 | 166 | ### transitions.enter(targets, config) ⇒ Promise 167 | Creates and starts a new enter transition 168 | 169 | 170 | **Returns**: Promise - - Returns a promise which resolves when the transition is complete 171 | 172 | | Param | Type | Description | 173 | | --- | --- | --- | 174 | | targets | Array | The GameObject targets to transition | 175 | | config | Object | Settings for the transition. Must contain a transition-type key, but can also contain other config settings for the given transition type. | 176 | | config.type | String | The transition key | 177 | 178 | 179 | 180 | ### transitions.exit(targets, config) ⇒ Promise 181 | Creates and starts a new exit transition 182 | 183 | 184 | **Returns**: Promise - - Returns a promise which resolves when the transition is complete 185 | 186 | | Param | Type | Description | 187 | | --- | --- | --- | 188 | | targets | Array | The GameObject targets to transition | 189 | | config | Object | Settings for the transition. Must contain a transition-type key, but can also contain other config settings for the given transition type. | 190 | | config.type | String | The transition key | 191 | 192 | 193 | --- 194 | 195 | 196 | ## Transition Classes 197 | 198 | 199 | ### BaseTransition 200 | 201 | The BaseTransition class implements the tweens defined in it's child classes. This class cannot be used directly as a transition, but it's methods (namely `enter()` and `exit()`) are called to initiate transitions. None of the BaseTransition methods generally need to be overridden. 202 | 203 | * Methods 204 | * [new BaseTransition(params)](#new_BaseTransition_new) 205 | * [setConfig(config)](#BaseTransition+setConfig) 206 | * [resetProps(targets, cachedProps)](#BaseTransition+resetProps) 207 | * [enter([userConfig])](#BaseTransition+enter) ⇒ Promise 208 | * [exit([userConfig])](#BaseTransition+exit) ⇒ Promise 209 | 210 | ### new BaseTransition(params) 211 | 212 | | Param | Type | Description | 213 | | --- | --- | --- | 214 | | params | Object | The config object | 215 | | params.scene | Phaser.Scene | The parent scene | 216 | | params.targets | Array | The target objects for the transition | 217 | | params.defaults | Object | The default config options for this transition | 218 | | params.config | Object | The user-defined config object, which is merged with the defaults (if provided) | 219 | | params.enterConfig | function | A function which returns the tween config for the `enter` tween | 220 | | params.exitConfig | function | A function which returns the tween config for the `exit` tween | 221 | | params.affectedProps | Array.<String> | An array listing the props which are affected by this transition. This list is used to cache and reset those props when `resetProps()` is called. | 222 | 223 | 224 | ### baseTransition.setConfig(config) 225 | Update the configuration for this transition. Any unset properties will be resolved to their defaults or settings from a previously set configuration. 226 | 227 | | Param | Type | Description | 228 | | --- | --- | --- | 229 | | config | Object | An object defining transition configurations, such as duration, chain, etc. | 230 | 231 | 232 | 233 | ### baseTransition.resetProps(targets, cachedProps) 234 | Returns each target object to it's initial state before either `enter()` or `exit()` was called. 235 | 236 | | Param | Type | Description | 237 | | --- | --- | --- | 238 | | targets | Array | An array of GameObject targets | 239 | | cachedProps | Array | An array of props generated by _cacheProps() | 240 | 241 | 242 | ### baseTransition.enter([userConfig]) ⇒ Promise 243 | Starts the enter transition 244 | 245 | **Returns**: Promise - - A promise which resolves when the transition's tween is complete 246 | 247 | | Param | Type | Description | 248 | | --- | --- | --- | 249 | | [userConfig] | Object | A new config object for on-the-fly changes | 250 | 251 | 252 | ### baseTransition.exit([userConfig]) ⇒ Promise 253 | Starts the exit transition 254 | 255 | **Returns**: Promise - - A promise which resolves when the transition's tween is complete 256 | 257 | | Param | Type | Description | 258 | | --- | --- | --- | 259 | | [userConfig] | Object | A new config object for on-the-fly changes | 260 | 261 | --- 262 | 263 | 264 | ### new FadeTransition(scene, targets, [config]) 265 | 266 | This transition tweens the `alpha` property of it's targets, fading object each into or out of view. 267 | 268 | | Param | Type | Default | Description | 269 | | --- | --- | --- | --- | 270 | | scene | Phaser.Scene | null | The parent scene | 271 | | targets | Array | null | An array of game objects to be included in this transition | 272 | | [config] | Object | `FadeTransition.Defaults` | The config object. Defaults will be used if not provided | 273 | | [config.duration] | Number | 500 | The duration of this transition | 274 | | [config.chain] | Bool | false | When true, each object will enter individually with overlap determined by the `offset` setting | 275 | | [config.offset] | String | 80% of duration| The amount of overlap (in ms) between transitions when `chain` is set to true, using this format: `"-=500"`, `"+=500"`, etc. | 276 | | [config.fuzz] | Number | `0` | A number between 0 and 1 which adds randomness to the duration of this transition | 277 | 278 | 279 | ### new SlideTransition(scene, targets, [config]) 280 | The SlideTransition slides it's targets in and out of the scene based on the directions specified via `enterFrom` and `exitTo`. The following properties are affected: `x`, `y` 281 | 282 | | Param | Type | Default | Description | 283 | | --- | --- | --- | --- | 284 | | scene | Phaser.Scene | null | The parent scene | 285 | | targets | Array | null | An array of game objects to be included in this transition | 286 | | [config] | Object | SlideTransition.Defaults | The config object. Defaults will be used if not provided. | 287 | | [config.duration] | Number | 500 | The duration of this transition | 288 | | [config.chain] | Bool | false | When true, each object will enter individually with overlap determined by the `offset` setting | 289 | | [config.offset] | String | 80% of duration | The amount of overlap (in ms) between transitions when `chain` is set to true, using this format: `"-=500"`, `"+=500"`, etc. | 290 | | [config.fuzz] | Number | 0 | A number between 0 and 1 which adds randomness to the duration of this transition | 291 | | [config.enterFrom] | String | 'left' | The direction from which the transition will enter. Valid options include: `"left"`, `"right"`, `"top"`, and `"bottom"` | 292 | | [config.exitTo] | String | 'right' | The direction from which the transition will exit. Valid options include: `"left"`, `"right"`, `"top"`, and `"bottom"` | 293 | 294 | 295 | ### new GrowTransition(scene, targets, [config]) 296 | 297 | The GrowTransition scales each object up from zero in place (as opposed to the ExplodeTransition which moves from the center out but also scales it's objects). The following properties are affected: `scaleX`, `scaleY` 298 | 299 | | Param | Type | Default | Description | 300 | | --- | --- | --- | --- | 301 | | scene | Phaser.Scene | | The parent scene | 302 | | targets | Array | | An array of game objects to be included in this transition | 303 | | [config] | Object | SlideTransition.Defaults | The config object. Defaults will be used if not provided. | 304 | | [config.duration] | Number | 500 | The duration of this transition | 305 | | [config.chain] | Bool | false | When true, each object will enter individually with overlap determined by the `offset` setting | 306 | | [config.offset] | String | 80% of duration | The amount of overlap (in ms) between transitions when `chain` is set to true, using this format: `"-=500"`, `"+=500"`, etc. | 307 | | [config.fuzz] | Number | 0 | A number between 0 and 1 which adds randomness to the duration of this transition | 308 | 309 | 310 | ### new ExplodeTransition(scene, targets, [config]) 311 | 312 | The ExplodeTransition scales each object up from zero while sliding out from the center. The following properties are affected: `alpha`, `scaleX`, `scaleY`, `x`, `y` 313 | 314 | | Param | Type | Default | Description | 315 | | --- | --- | --- | --- | 316 | | scene | Phaser.Scene | | The parent scene | 317 | | targets | Array | | An array of game objects to be included in this transition | 318 | | [config] | Object | ExplodeTransition.Defaults | The config object. Defaults will be used if not provided. | 319 | | [config.duration] | Number | 500 | The duration of this transition | 320 | | [config.chain] | Bool | false | When true, each object will enter individually with overlap determined by the `offset` setting | 321 | | [config.offset] | String | 80% of duration | The amount of overlap (in ms) between transitions when `chain` is set to true, using this format: `"-=500"`, `"+=500"`, etc. | 322 | | [config.fuzz] | Number | 0 | A number between 0 and 1 which adds randomness to the duration of this transition | 323 | 324 | 325 | 326 | ### new SlideFadeTransition(scene, targets, [config]) 327 | 328 | A combination of the Slide and Fade transitions. The following properties are affected: `alpha`, `x`, `y` 329 | 330 | | Param | Type | Default | Description | 331 | | --- | --- | --- | --- | 332 | | scene | Phaser.Scene | | The parent scene | 333 | | targets | Array | | An array of game objects to be included in this transition | 334 | | [config] | Object | SlideFadeTransition.Defaults | The config object. Defaults will be used if not provided. | 335 | | [config.duration] | Number | 500 | The duration of this transition | 336 | | [config.chain] | Bool | false | When true, each object will enter individually with overlap determined by the `offset` setting | 337 | | [config.offset] | String | 80% of duration | The amount of overlap (in ms) between transitions when `chain` is set to true, using this format: `"-=500"`, `"+=500"`, etc. | 338 | | [config.fuzz] | Number | 0 | A number between 0 and 1 which adds randomness to the duration of this transition | 339 | | [config.enterFrom] | String | 'bottom' | The direction from which the transition will enter. Valid options include: `"left"`, `"right"`, `"top"`, and `"bottom"` | 340 | | [config.exitTo] | String | 'top' | The direction from which the transition will exit. Valid options include: `"left"`, `"right"`, `"top"`, and `"bottom"` | 341 | 342 | 343 | ## Using Declaratively 344 | 345 | You can bypass the plugin altogether and use each transition class declaratively if you wish. You can import any of the transition classes directly. 346 | 347 | ```javascript 348 | import { SlideTransition } from 'phaser3-transitions'; 349 | 350 | function create(){ 351 | 352 | //The transition will return the sprites to their original positions 353 | let sprite1 = this.add.sprite(100, 100, 'menuItem'); 354 | let sprite2 = this.add.sprite(100, 200, 'menuItem'); 355 | let sprite3 = this.add.sprite(100, 300, 'menuItem'); 356 | let sprites = [sprite1, sprite2, sprite3]; //etc. 357 | 358 | //You can omit the 'type' property when creating transition directly 359 | let config = { 360 | duration: 500, 361 | enterFrom: 'left', 362 | exitTo: 'bottom' 363 | } 364 | 365 | //PARAMS: Scene, Targets, Config 366 | let slide = new SlideTransition(this, targets, config); 367 | 368 | slide.enter(); 369 | 370 | } 371 | 372 | ``` 373 | 374 | 375 | ## Custom Transitions 376 | 377 | This section also coming soon... 378 | -------------------------------------------------------------------------------- /src/defaults/base-transition.js: -------------------------------------------------------------------------------- 1 | import chain from './util/chain'; 2 | 3 | /** 4 | * @property {Bool} isTransitioning - Flag which denotes whether the transition object is actively transitionaing 5 | */ 6 | class BaseTransition { 7 | /** 8 | * 9 | * @param {Object} params - The config object 10 | * @param {Phaser.Scene} params.scene - The parent scene 11 | * @param {Array} params.targets - The target objects for the transition 12 | * @param {Object} params.defaults - The default config options for this transition 13 | * @param {Object} params.config - The user-defined config object, which is merged with the defaults (if provided) 14 | * @param {Function} params.enterConfig - A function which returns the tween config for the `enter` tween 15 | * @param {Function} params.exitConfig - A function which returns the tween config for the `exit` tween 16 | * @param {Array.} params.affectedProps - An array listing the props which are affected by this transition. This list is used to cache and reset those props when `resetProps()` is called. 17 | * 18 | */ 19 | constructor(params){ 20 | /** 21 | * The parent scene 22 | */ 23 | this.scene = params.scene; 24 | 25 | /** 26 | * The targets of this transition effect 27 | */ 28 | this._targets = params.targets || []; 29 | 30 | /** 31 | * Default config, defined in child class 32 | */ 33 | this._defaults = params.defaults || {}; 34 | 35 | /** 36 | * The user-defined settings merged w/ the transition defaults 37 | */ 38 | this._config = Object.assign({}, params.defaults || {} , params.config || {}); 39 | 40 | /** 41 | * The enter/exit config is a function which is called before every "enter" 42 | * or "exit" transition and returns an updated tween based on the current 43 | * state of the user-defined config object. 44 | */ 45 | this._enterConfig = params.enterConfig; 46 | this._exitConfig = params.exitConfig; 47 | 48 | /** 49 | * An array of strings denoting properties that this transition will 50 | * modify, and therefore may require reset. 51 | */ 52 | this._affectedProps = params.affectedProps || []; 53 | 54 | /** 55 | * An array of objects w/ key/value pairs to be reassigned as properties 56 | * when resetProps() is called 57 | */ 58 | this._cachedProps = this._cacheProps(this._targets, this._affectedProps); 59 | 60 | /** 61 | * Flag denoting whether this transition is active 62 | */ 63 | this.isTransitioning = false; 64 | } 65 | 66 | /** 67 | * Update the configuration for this transition. Any unset properties will 68 | * be resolved to their defaults or settings from a previously set configuration. 69 | * 70 | * @param {Object} config - An object defining transition configurations, such as duration, chain, etc. 71 | */ 72 | setConfig(newConfig = {}){ 73 | //Assign in order: Empty <-- Config Defaults <-- Previous Config <-- New Config 74 | this._config = Object.assign({}, this._defaults, this._config, newConfig); 75 | } 76 | 77 | /** 78 | * Returns each target object to it's initial state before either `enter()` or `exit()` was called. 79 | * 80 | * @param {Array} targets - An array of GameObject targets 81 | * @param {Array} cachedProps - An array of props generated by _cacheProps() 82 | */ 83 | resetProps(){ 84 | 85 | let targets = this._targets; 86 | let cachedProps = this._cachedProps; 87 | 88 | targets.forEach( (target, index) => { 89 | for (let key in cachedProps[index]){ 90 | target[key] = cachedProps[index][key]; 91 | } 92 | }); 93 | } 94 | 95 | /** 96 | * Starts the enter transition 97 | * 98 | * @param {Object} [userConfig] - A new config object for on-the-fly changes 99 | * @returns {Promise} - A promise which resolves when the transition's tween is complete 100 | */ 101 | enter(userConfig){ 102 | if (this.isTransitioning) return; 103 | this.isTransitioning = true; 104 | 105 | /** 106 | * Update the config if necessary 107 | */ 108 | if (userConfig != null) this.setConfig(userConfig); 109 | 110 | /** 111 | * Reset the props BEFORE the enter transition (or else it will use the 112 | * properties of each target as they were AFTER exiting) 113 | */ 114 | this.resetProps(); 115 | 116 | /** 117 | * Get the updated tween config from the child class and begin the 118 | * transition 119 | */ 120 | var tweenConfig = this._enterConfig(this.scene, this._config); 121 | return chain(this.scene, this._targets, tweenConfig).then(() => { 122 | this.isTransitioning = false; 123 | }); 124 | } 125 | 126 | /** 127 | * Starts the exit transition 128 | * 129 | * @param {Object} [userConfig] - A new config object for on-the-fly changes 130 | * @returns {Promise} - A promise which resolves when the transition's tween is complete 131 | */ 132 | exit(userConfig){ 133 | if (this.isTransitioning) return; 134 | this.isTransitioning = true; 135 | 136 | /** 137 | * Update the config if necessary 138 | */ 139 | if (userConfig != null) this.setConfig(userConfig); 140 | 141 | /** 142 | * Get the updated tween config from the child class and begin the 143 | * transition 144 | */ 145 | var tweenConfig = this._exitConfig(this.scene, this._config); 146 | return chain(this.scene, this._targets, tweenConfig).then(() => { 147 | this.isTransitioning = false; 148 | }); 149 | } 150 | 151 | /** 152 | * Stores key/value pairs for a given list of GameObjects and props for 153 | * later use 154 | * 155 | * @param {Array} targets - An array of GameObject targets 156 | * @param {Array} props - An array of strings denoting properties for the 157 | * targets. The value of these properties will be cached. 158 | */ 159 | _cacheProps(targets, props){ 160 | let propsCache = []; 161 | targets.forEach(target => { 162 | 163 | let targetCache = {}; 164 | props.forEach(prop => { 165 | targetCache[prop] = target[prop]; 166 | }); 167 | 168 | propsCache.push(targetCache); 169 | 170 | }); 171 | 172 | return propsCache; 173 | } 174 | 175 | } 176 | 177 | export default BaseTransition; -------------------------------------------------------------------------------- /src/defaults/explode-transition.js: -------------------------------------------------------------------------------- 1 | import BaseTransition from './base-transition'; 2 | 3 | class ExplodeTransition extends BaseTransition { 4 | /** 5 | * 6 | * @param {Phaser.Scene} scene - The parent scene 7 | * @param {Array} targets - An array of game objects to be included in this transition 8 | * @param {Object} [config=ExplodeTransition.Defaults] - The config object. Defaults will be used if not provided. 9 | * @param {Number} [config.duration=500] - The duration of this transition 10 | * @param {Bool} [config.chain=false] - When true, each object will enter individually with overlap determined by the `offset` setting 11 | * @param {String} [config.offset= 80% of duration] - The amount of overlap (in ms) between transitions when `chain` is set to true, using this format: `"-=500"`, `"+=500"`, etc. 12 | * @param {Number} [config.fuzz=0] - A number between 0 and 1 which adds randomness to the duration of this transition 13 | */ 14 | constructor(scene, targets, userConfig = {}){ 15 | super({ 16 | scene: scene, 17 | targets: targets, 18 | config: userConfig, 19 | defaults: ExplodeTransition.Defaults, 20 | affectedProps: ExplodeTransition.AffectedProps, 21 | enterConfig: ExplodeTransition.EnterConfig, 22 | exitConfig: ExplodeTransition.ExitConfig 23 | }); 24 | } 25 | } 26 | 27 | ExplodeTransition.AffectedProps = ['alpha', 'scaleX', 'scaleY', 'x', 'y']; 28 | ExplodeTransition.Defaults = { 29 | chain: false, 30 | fuzz: 0, 31 | offset: null, /* This is calculated later as 80% of duration time if left null */ 32 | duration: 500 33 | } 34 | 35 | ExplodeTransition.EnterConfig = function(scene, config){ 36 | 37 | let centerX = scene.sys.game.config.width / 2; 38 | let centerY = scene.sys.game.config.height / 2; 39 | let offset = config.offest != null ? config.offest : "-=".concat(config.duration * .80); 40 | let fuzz = config.fuzz == null ? null : { 41 | ratio: config.fuzz, 42 | props: ['alpha', 'x', 'y'] 43 | } 44 | 45 | return { 46 | fuzz: fuzz, 47 | offset: config.chain ? offset : 0, 48 | duration: config.duration, 49 | ease: 'Quad.easeOut', 50 | props: ['alpha', 'scaleX', 'scaleY', 'x', 'y'], 51 | from: [0, 0, 0, centerX, centerY], 52 | to: function(target){ 53 | return [ 54 | target.alpha, 55 | target.scaleX, 56 | target.scaleY, 57 | target.x, 58 | target.y 59 | ] 60 | } 61 | } 62 | } 63 | 64 | ExplodeTransition.ExitConfig = function(scene, config){ 65 | 66 | let centerX = scene.sys.game.config.width / 2; 67 | let centerY = scene.sys.game.config.height / 2; 68 | let offset = config.offest != null ? config.offest : "-=".concat(config.duration * .80); 69 | let fuzz = config.fuzz == null ? null : { 70 | ratio: config.fuzz, 71 | props: ['alpha', 'x', 'y'] 72 | } 73 | 74 | return { 75 | fuzz: fuzz, 76 | offset: config.chain ? offset : 0, 77 | duration: config.duration, 78 | ease: 'Quad.easeIn', 79 | props: ['alpha', 'scaleX', 'scaleY', 'x', 'y'], 80 | from: function(target){ 81 | return [ 82 | target.alpha, 83 | target.scaleX, 84 | target.scaleY, 85 | target.x, 86 | target.y 87 | ] 88 | }, 89 | to: [0, 0, 0, centerX, centerY] 90 | } 91 | } 92 | 93 | export default ExplodeTransition; -------------------------------------------------------------------------------- /src/defaults/fade-transition.js: -------------------------------------------------------------------------------- 1 | import BaseTransition from './base-transition'; 2 | 3 | class FadeTransition extends BaseTransition { 4 | /** 5 | * 6 | * @param {Phaser.Scene} scene - The parent scene 7 | * @param {Array.} targets - An array of game objects to be included in this transition 8 | * @param {Object} [config] - The config object. Defaults will be used if not provided. 9 | * @param {Number} [config.duration=500] - The duration of this transition 10 | * @param {Bool} [config.chain=false] - When true, each object will enter individually with overlap determined by the `offset` setting 11 | * @param {String} [config.offset= 80% of duration] - The amount of overlap (in ms) between transitions when `chain` is set to true, using this format: `"-=500"`, `"+=500"`, etc. 12 | * @param {Number} [config.fuzz=0] - A number between 0 and 1 which adds randomness to the duration of this transition 13 | * 14 | */ 15 | constructor(scene, targets, userConfig = {}){ 16 | super({ 17 | scene: scene, 18 | targets: targets, 19 | config: userConfig, 20 | defaults: FadeTransition.Defaults, 21 | affectedProps: FadeTransition.AffectedProps, 22 | enterConfig: FadeTransition.EnterConfig, 23 | exitConfig: FadeTransition.ExitConfig 24 | }); 25 | } 26 | } 27 | 28 | FadeTransition.AffectedProps = ['alpha']; 29 | FadeTransition.Defaults = { 30 | chain: false, 31 | fuzz: 0, 32 | offset: null, /* This is calculated later as 80% of duration time if left null */ 33 | duration: 500 34 | } 35 | 36 | FadeTransition.EnterConfig = function(scene, config){ 37 | let offset = config.offest || "-=".concat(config.duration * .80); 38 | let fuzz = config.fuzz == null ? null : { 39 | ratio: config.fuzz, 40 | props: ['alpha'] 41 | } 42 | 43 | return { 44 | props: ['alpha'], 45 | ease: 'Quad.easeOut', 46 | from: [0], 47 | to: function(target){ return [target.alpha] }, 48 | duration: config.duration, 49 | offset: config.chain ? offset : 0 50 | } 51 | } 52 | 53 | FadeTransition.ExitConfig = function(scene, config){ 54 | 55 | let offset = config.offest || "-=".concat(config.duration * .80); 56 | let fuzz = config.fuzz == null ? null : { 57 | ratio: config.fuzz, 58 | props: ['alpha'] 59 | } 60 | 61 | return { 62 | props: ['alpha'], 63 | ease: 'Quad.easeIn', 64 | from: function(target){ return [target.alpha] }, 65 | to: [0], 66 | duration: config.duration, 67 | offset: config.chain ? offset : 0 68 | } 69 | } 70 | 71 | export default FadeTransition; 72 | -------------------------------------------------------------------------------- /src/defaults/grow-transition.js: -------------------------------------------------------------------------------- 1 | import BaseTransition from './base-transition'; 2 | 3 | class GrowTransition extends BaseTransition { 4 | /** 5 | * 6 | * @param {Phaser.Scene} scene - The parent scene 7 | * @param {Array} targets - An array of game objects to be included in this transition 8 | * @param {Object} [config=SlideTransition.Defaults] - The config object. Defaults will be used if not provided. 9 | * @param {Number} [config.duration=500] - The duration of this transition 10 | * @param {Bool} [config.chain=false] - When true, each object will enter individually with overlap determined by the `offset` setting 11 | * @param {String} [config.offset= 80% of duration] - The amount of overlap (in ms) between transitions when `chain` is set to true, using this format: `"-=500"`, `"+=500"`, etc. 12 | * @param {Number} [config.fuzz=0] - A number between 0 and 1 which adds randomness to the duration of this transition 13 | */ 14 | constructor(scene, targets, config = {}){ 15 | super({ 16 | scene: scene, 17 | targets: targets, 18 | config: config, 19 | defaults: GrowTransition.Defaults, 20 | affectedProps: GrowTransition.AffectedProps, 21 | enterConfig: GrowTransition.EnterConfig, 22 | exitConfig: GrowTransition.ExitConfig 23 | }); 24 | } 25 | } 26 | 27 | GrowTransition.AffectedProps = ['scaleX', 'scaleY']; 28 | GrowTransition.Defaults = { 29 | chain: false, 30 | offset: "-=300", 31 | fuzz: 0, 32 | duration: 500 33 | } 34 | 35 | GrowTransition.EnterConfig = function(scene, config) { 36 | 37 | let fuzz = { ratio: config.fuzz, props: ['scaleX', 'scaleY'] } 38 | let offset = config.chain ? config.offset : 0; 39 | let duration = config.duration; 40 | 41 | return { 42 | fuzz: fuzz, 43 | offset: offset, 44 | duration: duration, 45 | ease: 'Quad.easeOut', 46 | props: ['scaleX', 'scaleY'], 47 | from: [0, 0], 48 | to: function(target){ 49 | return [target.scaleX, target.scaleY] 50 | } 51 | } 52 | } 53 | 54 | GrowTransition.ExitConfig = function(scene, config) { 55 | 56 | let fuzz = { ratio: config.fuzz, props: ['scaleX', 'scaleY'] } 57 | let offset = config.chain ? config.offset : 0; 58 | let duration = config.duration; 59 | 60 | return { 61 | fuzz: fuzz, 62 | offset: offset, 63 | duration: duration, 64 | ease: 'Quad.easeIn', 65 | props: ['scaleX', 'scaleY'], 66 | from: function(target){ 67 | return [target.scaleX, target.scaleY] 68 | }, 69 | to: [0, 0] 70 | } 71 | } 72 | 73 | export default GrowTransition; -------------------------------------------------------------------------------- /src/defaults/materialize-transition.js: -------------------------------------------------------------------------------- 1 | import BaseTransition from './base-transition'; 2 | 3 | class MaterializeTransition extends BaseTransition { 4 | /** 5 | * 6 | * @param {Phaser.Scene} scene - The parent scene 7 | * @param {Array.} targets - An array of game objects to be included in this transition 8 | * @param {Object} [config] - The config object. Defaults will be used if not provided. 9 | * @param {Number} [config.duration=500] - The duration of this transition 10 | * @param {Bool} [config.chain=false] - When true, each object will enter individually with overlap determined by the `offset` setting 11 | * @param {String} [config.offset= 80% of duration] - The amount of overlap (in ms) between transitions when `chain` is set to true, using this format: `"-=500"`, `"+=500"`, etc. 12 | * @param {Number} [config.fuzz=0] - A number between 0 and 1 which adds randomness to the duration of this transition 13 | * 14 | */ 15 | constructor(scene, targets, userConfig = {}){ 16 | super({ 17 | scene: scene, 18 | targets: targets, 19 | config: userConfig, 20 | defaults: MaterializeTransition.Defaults, 21 | affectedProps: MaterializeTransition.AffectedProps, 22 | enterConfig: MaterializeTransition.EnterConfig, 23 | exitConfig: MaterializeTransition.ExitConfig 24 | }); 25 | } 26 | } 27 | 28 | MaterializeTransition.AffectedProps = ['alphaBottomLeft', 'alphaBottomRight', 'alphaTopLeft', 'alphaTopRight']; 29 | MaterializeTransition.Defaults = { 30 | chain: false, 31 | fuzz: .75, 32 | offset: null, /* This is calculated later as 80% of duration time if left null */ 33 | duration: 500 34 | } 35 | 36 | MaterializeTransition.EnterConfig = function(scene, config){ 37 | let offset = config.offest || "-=".concat(config.duration * .80); 38 | let fuzz = config.fuzz == null ? null : { 39 | ratio: config.fuzz, 40 | props: ['alphaBottomLeft', 'alphaBottomRight', 'alphaTopLeft', 'alphaTopRight'] 41 | } 42 | 43 | return { 44 | props: ['alphaBottomLeft', 'alphaBottomRight', 'alphaTopLeft', 'alphaTopRight'], 45 | ease: 'Quad.easeOut', 46 | from: [0, 0, 0, 0], 47 | to: function(target){ 48 | return [ 49 | target.alphaBottomLeft, 50 | target.alphaBottomRight, 51 | target.alphaTopLeft, 52 | target.alphaTopRight 53 | ] 54 | }, 55 | duration: config.duration, 56 | offset: config.chain ? offset : 0 57 | } 58 | } 59 | 60 | MaterializeTransition.ExitConfig = function(scene, config){ 61 | 62 | let offset = config.offest || "-=".concat(config.duration * .80); 63 | let fuzz = config.fuzz == null ? null : { 64 | ratio: config.fuzz, 65 | props: ['alphaBottomLeft', 'alphaBottomRight', 'alphaTopLeft', 'alphaTopRight'] 66 | } 67 | 68 | return { 69 | props: ['alphaBottomLeft', 'alphaBottomRight', 'alphaTopLeft', 'alphaTopRight'], 70 | ease: 'Quad.easeIn', 71 | from: function(target){ 72 | return [ 73 | target.alphaBottomLeft, 74 | target.alphaBottomRight, 75 | target.alphaTopLeft, 76 | target.alphaTopRight 77 | ] 78 | }, 79 | to: [0, 0, 0, 0], 80 | duration: config.duration, 81 | offset: config.chain ? offset : 0 82 | } 83 | } 84 | 85 | export default MaterializeTransition; 86 | -------------------------------------------------------------------------------- /src/defaults/slide-transition.js: -------------------------------------------------------------------------------- 1 | import BaseTransition from './base-transition'; 2 | import getOffscreenPosition from './util/get-offscreen-pos'; 3 | 4 | class SlideTransition extends BaseTransition { 5 | /** 6 | * 7 | * @param {Phaser.Scene} scene - The parent scene 8 | * @param {Array} targets - An array of game objects to be included in this transition 9 | * @param {Object} [config=SlideTransition.Defaults] - The config object. Defaults will be used if not provided. 10 | * @param {Number} [config.duration=500] - The duration of this transition 11 | * @param {Bool} [config.chain=false] - When true, each object will enter individually with overlap determined by the `offset` setting 12 | * @param {String} [config.offset= 80% of duration] - The amount of overlap (in ms) between transitions when `chain` is set to true, using this format: `"-=500"`, `"+=500"`, etc. 13 | * @param {Number} [config.fuzz=0] - A number between 0 and 1 which adds randomness to the duration of this transition 14 | * @param {String} [config.enterFrom='left'] - The direction from which the transition will enter. Valid options include: `"left"`, `"right"`, `"top"`, and `"bottom"` 15 | * @param {String} [config.exitTo='right'] - The direction from which the transition will exit. Valid options include: `"left"`, `"right"`, `"top"`, and `"bottom"` 16 | */ 17 | constructor(scene, targets, userConfig = {}){ 18 | super({ 19 | scene: scene, 20 | targets: targets, 21 | config: userConfig, 22 | defaults: SlideTransition.Defaults, 23 | affectedProps: SlideTransition.AffectedProps, 24 | enterConfig: SlideTransition.EnterConfig, 25 | exitConfig: SlideTransition.ExitConfig 26 | }); 27 | } 28 | } 29 | 30 | SlideTransition.AffectedProps = ['x', 'y']; 31 | SlideTransition.Defaults = { 32 | chain: true, 33 | offset: null, /* This is calculated later as 80% of duration time */ 34 | duration: 500, 35 | enterFrom: 'left', 36 | exitTo: 'right' 37 | } 38 | 39 | SlideTransition.EnterConfig = function(scene, config){ 40 | 41 | let prop = config.enterFrom == 'top' || config.enterFrom == 'bottom' ? 'y' : 'x'; 42 | let offset = config.offest != null ? config.offest : "-=".concat(config.duration * .80); 43 | let fuzz = config.fuzz == null ? null : { 44 | ratio: config.fuzz, 45 | props: prop 46 | } 47 | 48 | return { 49 | fuzz: fuzz, 50 | offset: config.chain ? offset : 0, 51 | duration: config.duration, 52 | props: [prop], 53 | ease: 'Quad.easeOut', 54 | from: (target) => { 55 | return [getOffscreenPosition(scene, target, config.enterFrom)] 56 | }, 57 | to: (target, index) => { 58 | return [target[prop]]; 59 | } 60 | } 61 | } 62 | 63 | SlideTransition.ExitConfig = function(scene, config){ 64 | 65 | let prop = config.exitTo == 'top' || config.exitTo == 'bottom' ? 'y' : 'x'; 66 | let offset = config.offest != null ? config.offest : "-=".concat(config.duration * .75); 67 | let fuzz = config.fuzz == null ? null : { 68 | ratio: config.fuzz, 69 | props: prop 70 | } 71 | 72 | return { 73 | fuzz: fuzz, 74 | offset: config.chain ? offset : 0, 75 | duration: config.duration, 76 | props: [prop], 77 | ease: 'Quad.easeIn', 78 | from: (target, index) => { 79 | return [target[prop]]; 80 | }, 81 | to: (target) => { 82 | return [getOffscreenPosition(scene, target, config.exitTo)] 83 | } 84 | } 85 | } 86 | 87 | export default SlideTransition; -------------------------------------------------------------------------------- /src/defaults/slidefade-transition.js: -------------------------------------------------------------------------------- 1 | import BaseTransition from './base-transition'; 2 | 3 | class SlideFadeTransition extends BaseTransition { 4 | /** 5 | * 6 | * @param {Phaser.Scene} scene - The parent scene 7 | * @param {Array} targets - An array of game objects to be included in this transition 8 | * @param {Object} [config=SlideTransition.Defaults] - The config object. Defaults will be used if not provided. 9 | * @param {Number} [config.duration=500] - The duration of this transition 10 | * @param {Bool} [config.chain=false] - When true, each object will enter individually with overlap determined by the `offset` setting 11 | * @param {String} [config.offset= 80% of duration] - The amount of overlap (in ms) between transitions when `chain` is set to true, using this format: `"-=500"`, `"+=500"`, etc. 12 | * @param {Number} [config.fuzz=0] - A number between 0 and 1 which adds randomness to the duration of this transition 13 | * @param {String} [config.enterFrom='bottom'] - The direction from which the transition will enter. Valid options include: `"left"`, `"right"`, `"top"`, and `"bottom"` 14 | * @param {String} [config.exitTo='top'] - The direction from which the transition will exit. Valid options include: `"left"`, `"right"`, `"top"`, and `"bottom"` 15 | * @param {String} [config.distance= half of object width or height] - The slide distance 16 | */ 17 | constructor(scene, targets, userConfig = {}){ 18 | super({ 19 | scene: scene, 20 | targets: targets, 21 | config: userConfig, 22 | defaults: SlideFadeTransition.Defaults, 23 | affectedProps: SlideFadeTransition.AffectedProps, 24 | enterConfig: SlideFadeTransition.EnterConfig, 25 | exitConfig: SlideFadeTransition.ExitConfig 26 | }); 27 | } 28 | } 29 | 30 | SlideFadeTransition.AffectedProps = ['alpha', 'x', 'y']; 31 | SlideFadeTransition.Defaults = { 32 | enterFrom: 'bottom', 33 | exitTo: 'top', 34 | chain: false, 35 | fuzz: 0, 36 | offset: null, /* This is calculated later as 80% of duration time if left null */ 37 | duration: 500, 38 | distance: null /* If left null, this is calculated as half of width or height */ 39 | } 40 | 41 | SlideFadeTransition.EnterConfig = function(scene, config){ 42 | 43 | let directionProp = config.enterFrom == 'top' || config.enterFrom == 'bottom' ? 'y' : 'x'; 44 | let offset = config.offest || "-=".concat(config.duration * .80); 45 | let fuzz = config.fuzz == null ? null : { 46 | ratio: config.fuzz, 47 | props: ['alpha', 'x', 'y'] 48 | } 49 | 50 | return { 51 | props: ['alpha', directionProp], 52 | ease: 'Quad.easeOut', 53 | duration: config.duration, 54 | offset: config.chain ? offset : 0, 55 | fuzz: fuzz, 56 | from: (target) => { 57 | let startPos = getSlidePosition(scene, target, config.enterFrom, config.distance); 58 | return [0, startPos]; 59 | }, 60 | to: function(target){ 61 | return [target.alpha, target[directionProp]]; 62 | }, 63 | } 64 | } 65 | 66 | SlideFadeTransition.ExitConfig = function(scene, config){ 67 | 68 | let directionProp = config.exitTo== 'top' || config.exitTo == 'bottom' ? 'y' : 'x'; 69 | let offset = config.offest || "-=".concat(config.duration * .80); 70 | let fuzz = config.fuzz == null ? null : { 71 | ratio: config.fuzz, 72 | props: ['alpha', 'x', 'y'] 73 | } 74 | 75 | return { 76 | props: ['alpha', directionProp], 77 | ease: 'Quad.easeOut', 78 | duration: config.duration, 79 | offset: config.chain ? offset : 0, 80 | fuzz: fuzz, 81 | from: (target) => { 82 | return [target.alpha, target[directionProp]]; 83 | }, 84 | to: function(target){ 85 | let endPos = getSlidePosition(scene, target, config.exitTo, config.distance); 86 | return [0, endPos]; 87 | }, 88 | } 89 | } 90 | 91 | function getSlidePosition(scene, target, direction, distance){ 92 | switch (direction){ 93 | case 'left': 94 | return target.getCenter().x - (distance || target.width); 95 | case 'right': 96 | return target.getCenter().x + (distance || target.width); 97 | case 'top': 98 | return target.getCenter().y - (distance || target.height); 99 | case 'bottom': 100 | return target.getCenter().y + (distance || target.height); 101 | } 102 | } 103 | 104 | export default SlideFadeTransition; 105 | -------------------------------------------------------------------------------- /src/defaults/util/chain.js: -------------------------------------------------------------------------------- 1 | import isFunction from './is-function'; 2 | import fuzzInt from './fuzz-int'; 3 | 4 | function chain(scene, targets, config){ 5 | 6 | /** 7 | * Make our timelines up front as no position within the loop is suitable 8 | * for their creation 9 | */ 10 | var timelines = config.props.map(() => scene.tweens.createTimeline()); 11 | 12 | /** 13 | * Loop through each target, and then each property to be tweened 14 | */ 15 | targets.forEach((target, index) => { 16 | 17 | /** 18 | * Get the start and ending values. These may be strings (for single props), 19 | * or arrays (for multiple props). 20 | */ 21 | let startVal = isFunction(config.from) ? config.from(target, index) : config.from; 22 | let endVal = isFunction(config.to) ? config.to(target, index) : config.to; 23 | 24 | 25 | /** 26 | * Wrap the prop in an array if it is not already an array 27 | * (for the sake of convenience), and then loop through all props and 28 | * create a new timeline for each 29 | */ 30 | //var timeline = scene.tweens.createTimeline(); 31 | for (let i = 0; i < config.props.length; i++){ 32 | let fuzzRatio = config.fuzz != undefined 33 | && config.fuzz.props.includes(config.props[i]) 34 | ? config.fuzz.ratio 35 | : 0; 36 | 37 | let tween = { 38 | targets: target, 39 | ease: config.ease, 40 | duration: fuzzInt(config.duration, fuzzRatio), 41 | offset: config.offset 42 | } 43 | 44 | //Set start and end values for the target from the props array 45 | tween[config.props[i]] = endVal[i]; 46 | target[config.props[i]] = startVal[i]; 47 | 48 | timelines[i].add(tween); 49 | } 50 | }); 51 | 52 | /** 53 | * Play all the timelines and collect their promises 54 | */ 55 | let promises = [] 56 | timelines.forEach(timeline => { 57 | promises.push(new Promise((resolve, reject) => { 58 | timeline.on("complete", () => { 59 | resolve(); 60 | }); 61 | })); 62 | timeline.play(); 63 | }) 64 | 65 | return Promise.all(promises); 66 | } 67 | 68 | export default chain; 69 | -------------------------------------------------------------------------------- /src/defaults/util/fuzz-int.js: -------------------------------------------------------------------------------- 1 | function fuzzInt(number, fuzzRatio){ 2 | if (fuzzRatio === 0) return number; 3 | 4 | let ratioChunk = number * fuzzRatio; 5 | let randChunk = Math.floor(Math.random() * Math.floor(ratioChunk)); 6 | let randSign = Math.random() < 0.5 ? -1 : 1; 7 | 8 | return number + (randSign * randChunk); 9 | 10 | } 11 | 12 | export default fuzzInt; -------------------------------------------------------------------------------- /src/defaults/util/get-offscreen-pos.js: -------------------------------------------------------------------------------- 1 | function getOffscreenPosition(scene, target, direction){ 2 | switch (direction){ 3 | case 'left': 4 | return -(target.displayWidth * target.originX); 5 | case 'right': 6 | let sceneWidth = scene.sys.game.config.width; 7 | return sceneWidth + (target.displayWidth * target.originX); 8 | case 'top': 9 | return -(target.displayHeight * target.originY); 10 | case 'bottom': 11 | let sceneHeight = scene.sys.game.config.height; 12 | return sceneHeight + (target.displayHeight * target.originX); 13 | } 14 | } 15 | 16 | export default getOffscreenPosition; -------------------------------------------------------------------------------- /src/defaults/util/is-function.js: -------------------------------------------------------------------------------- 1 | function isFunction(functionToCheck) { 2 | return functionToCheck && {}.toString.call(functionToCheck) === '[object Function]'; 3 | } 4 | 5 | export default isFunction; -------------------------------------------------------------------------------- /src/phaser3-transitions.js: -------------------------------------------------------------------------------- 1 | import TransitionsPlugin from './transitions-plugin'; 2 | import BaseTransition from './defaults/base-transition'; 3 | 4 | import ExplodeTransition from './defaults/explode-transition'; 5 | import FadeTransition from './defaults/fade-transition'; 6 | import GrowTransition from './defaults/grow-transition'; 7 | import SlideTransition from './defaults/slide-transition'; 8 | import SlideFadeTransition from './defaults/slidefade-transition'; 9 | import MaterializeTransition from './defaults/slidefade-transition'; 10 | 11 | export { 12 | TransitionsPlugin, 13 | BaseTransition, 14 | ExplodeTransition, 15 | FadeTransition, 16 | GrowTransition, 17 | SlideTransition, 18 | SlideFadeTransition, 19 | MaterializeTransition 20 | } -------------------------------------------------------------------------------- /src/transitions-plugin.js: -------------------------------------------------------------------------------- 1 | import Phaser from 'phaser'; 2 | 3 | /** 4 | * The default transitions classes 5 | */ 6 | import FadeTransition from './defaults/fade-transition'; 7 | import SlideTransition from './defaults/slide-transition'; 8 | import GrowTransition from './defaults/grow-transition'; 9 | import ExplodeTransition from './defaults/explode-transition'; 10 | import SlideFadeTransition from './defaults/slidefade-transition'; 11 | import BaseTransition from './defaults/base-transition'; 12 | import MaterializeTransition from './defaults/materialize-transition'; 13 | 14 | /** 15 | * Dictionary for resolving a key to it's respective transition class 16 | */ 17 | const Transitions = { 18 | fade: FadeTransition, 19 | slide: SlideTransition, 20 | grow: GrowTransition, 21 | explode: ExplodeTransition, 22 | slidefade: SlideFadeTransition, 23 | fadeslide: SlideFadeTransition, 24 | materialize: MaterializeTransition 25 | } 26 | 27 | /** 28 | * @typicalname transitions 29 | */ 30 | class TransitionsPlugin extends Phaser.Plugins.ScenePlugin { 31 | constructor(scene, pluginManager){ 32 | super(scene, pluginManager); 33 | this.scene = scene; 34 | } 35 | 36 | /** 37 | * Adds a transition class to the plugin's dictionary. A transition class must extend 38 | * BaseTransition and be registered if it is not already one of the default 39 | * classes. 40 | * 41 | * @param {String} key - The key by which the transition can be referenced 42 | * @param {BaseTransition} transitionClass - A class which extends the BaseTransition class 43 | */ 44 | register(key, transitionClass){ 45 | Transitions[key] = transitionClass; 46 | } 47 | 48 | /** 49 | * Creates a new transition based on the given config 50 | * 51 | * @param {Array} targets - The targets for this transition. These cannot be changed 52 | * once the transition is created. 53 | * @param {Object} config - Settings for the transition 54 | * @param {String} config.type - A key to one of the default transitions, which currently includes any of the following: `"Fade"`, `"Slide"`, `"Grow"`, `"Explode"`, or `"FadeSlide"`. See the class descriptions for more info about each transition. 55 | * @returns {BaseTransition} - A transition class extending `BaseTransition` 56 | */ 57 | create(targets, config){ 58 | let transitionClass = Transitions[config.type.toLowerCase()]; 59 | return new transitionClass(this.scene, targets, config); 60 | } 61 | 62 | /** 63 | * Creates and starts a new enter transition 64 | * 65 | * @param {Array} targets - The GameObject targets to transition 66 | * @param {Object} config - Settings for the transition. Must contain a transition-type key, but can also contain other config settings for the given transition type. 67 | * @param {String} config.type - The transition key 68 | * @returns {Promise} - Returns a promise which resolves when the transition is complete 69 | */ 70 | enter(targets, config){ 71 | let transitionClass = Transitions[config.type.toLowerCase()]; 72 | let transition = new transitionClass(this.scene, targets, config); 73 | return transition.enter(); 74 | } 75 | 76 | /** 77 | * Creates and starts a new exit transition 78 | * 79 | * @param {Array} targets - The GameObject targets to transition 80 | * @param {Object} config - Settings for the transition. Must contain a transition-type key, but can also contain other config settings for the given transition type. 81 | * @param {String} config.type - The transition key 82 | * @returns {Promise} - Returns a promise which resolves when the transition is complete 83 | */ 84 | exit(targets, config){ 85 | //Get and create the transition class 86 | let transitionClass = Transitions[config.type.toLowerCase()]; 87 | let transition = new transitionClass(this.scene, targets, config); 88 | return transition.exit(); 89 | } 90 | 91 | } 92 | 93 | export default TransitionsPlugin; -------------------------------------------------------------------------------- /tests.webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | 4 | const APP_DIR = path.resolve(__dirname, 'tests', 'game.js'); 5 | const BUILD_DIR = path.resolve(__dirname, 'tests', 'www'); 6 | 7 | module.exports = { 8 | name: "phaser3-transitions-tests", 9 | mode: "development", 10 | entry: APP_DIR, 11 | output: { 12 | path: BUILD_DIR, 13 | filename: 'bundle.js', 14 | }, 15 | plugins: [ 16 | new webpack.HotModuleReplacementPlugin() 17 | ], 18 | module: { 19 | rules: [ { test: /\.js$/, use: ['babel-loader'] } ] 20 | }, 21 | optimization: { 22 | minimize: true 23 | }, 24 | devServer: { 25 | contentBase: BUILD_DIR, 26 | compress: true, 27 | port: 8000 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /tests/dat-gui-controller.js: -------------------------------------------------------------------------------- 1 | import * as dat from 'dat.gui'; 2 | 3 | class DatGuiController { 4 | constructor(dataSet){ 5 | this.dataSet = dataSet; 6 | 7 | //Create the GUI 8 | this.gui = new dat.GUI({ autoPlace: false, width: 200 }); 9 | document.getElementById('gui-container').appendChild(this.gui.domElement); 10 | 11 | this.gui.add({ Menu: 'List' }, 'Menu'); 12 | 13 | //Create the folders 14 | this.enterF = this.gui.addFolder('Enter'); 15 | this.exitF = this.gui.addFolder('Exit'); 16 | 17 | this.enterF.closed = false; 18 | this.exitF.closed = false; 19 | 20 | //Create the type controllers and add onChange events 21 | this.enterF.add(dataSet.enterData, 'type', dataSet.enterMeta.type) 22 | .onFinishChange(this.handleEnterChange.bind(this)); 23 | 24 | this.exitF.add(dataSet.exitData, 'type', dataSet.exitMeta.type) 25 | .onFinishChange(this.handleExitChange.bind(this)); 26 | 27 | //Arrays to hold items that are added/removed on type change 28 | this.enterI = []; 29 | this.exitI = []; 30 | 31 | //Init 32 | this.addEnterItems(); 33 | this.addExitItems(); 34 | } 35 | 36 | clearEnterItems(){ 37 | console.log(this.enterI); 38 | 39 | this.enterI.forEach(item => { 40 | this.enterF.remove(item); 41 | }); 42 | 43 | this.enterI = []; 44 | } 45 | 46 | clearExitItems(){ 47 | this.exitI.forEach(item => { 48 | console.log(item); 49 | this.exitF.remove(item); 50 | }); 51 | 52 | this.exitI = []; 53 | } 54 | 55 | addEnterItems(){ 56 | let type = this.dataSet.enterData.type; 57 | let config = this.dataSet.enterData.configs[type]; 58 | let meta = this.dataSet.enterMeta.configs[type]; 59 | 60 | for (var key in config){ 61 | let optionMeta = meta[key]; 62 | 63 | var item; 64 | if (Array.isArray(optionMeta)) 65 | item = this.enterF.add(config, key, ...optionMeta); 66 | else 67 | item = this.enterF.add(config, key, optionMeta); 68 | 69 | this.enterI.push(item); 70 | 71 | } 72 | } 73 | 74 | addExitItems(){ 75 | let type = this.dataSet.exitData.type; 76 | let config = this.dataSet.exitData.configs[type]; 77 | let meta = this.dataSet.exitMeta.configs[type]; 78 | 79 | for (var key in config){ 80 | let optionMeta = meta[key]; 81 | 82 | var item; 83 | if (Array.isArray(optionMeta)) 84 | item = this.exitF.add(config, key, ...optionMeta); 85 | else 86 | item = this.exitF.add(config, key, optionMeta); 87 | 88 | this.exitI.push(item); 89 | } 90 | } 91 | 92 | 93 | handleEnterChange(value){ 94 | this.clearEnterItems(); 95 | this.addEnterItems(); 96 | } 97 | 98 | handleExitChange(value){ 99 | this.clearExitItems(); 100 | this.addExitItems(); 101 | } 102 | 103 | } 104 | 105 | export default DatGuiController; -------------------------------------------------------------------------------- /tests/dat-gui-data.js: -------------------------------------------------------------------------------- 1 | const EnterData = { 2 | type: 'slide', 3 | configs: { 4 | grow: { 5 | chain: false, 6 | duration: 750, 7 | fuzz: 0.01 8 | }, 9 | explode: { 10 | chain: false, 11 | duration: 750, 12 | fuzz: 0.01, 13 | offset: 300 14 | }, 15 | fade: { 16 | chain: false, 17 | duration: 750, 18 | fuzz: 0.01 19 | }, 20 | slide: { 21 | enterFrom: 'left', 22 | chain: false, 23 | duration: 750, 24 | fuzz: 0.01 25 | }, 26 | slidefade: { 27 | enterFrom: 'left', 28 | chain: false, 29 | duration: 750, 30 | fuzz: 0.01, 31 | distance: 0 32 | }, 33 | materialize: { 34 | chain: false, 35 | duration: 750, 36 | fuzz: 0.50 37 | }, 38 | } 39 | } 40 | 41 | const EnterMeta = { 42 | type: { 43 | Slide: 'slide', 44 | SlideFade: 'slidefade', 45 | Grow: 'grow', 46 | Explode: 'explode', 47 | Fade: 'fade', 48 | Materialize: 'materialize' 49 | }, 50 | configs: { 51 | grow: { 52 | chain: null, 53 | duration: [100, 1500], 54 | fuzz: [0, .99] 55 | }, 56 | explode: { 57 | chain: null, 58 | duration: [100, 1500], 59 | fuzz: [0, .99], 60 | offset: [0, 1000] 61 | }, 62 | fade: { 63 | chain: null, 64 | duration: [100, 1500], 65 | fuzz: [0, .99] 66 | }, 67 | slide: { 68 | enterFrom: { 69 | Left: 'left', 70 | Right: 'right', 71 | Top: 'top', 72 | Bottom: 'bottom' 73 | }, 74 | chain: null, 75 | duration: [100, 1500], 76 | fuzz: [0, .99] 77 | }, 78 | slidefade: { 79 | enterFrom: { 80 | Left: 'left', 81 | Right: 'right', 82 | Top: 'top', 83 | Bottom: 'bottom' 84 | }, 85 | chain: null, 86 | duration: [100, 1500], 87 | fuzz: [0, .99], 88 | distance: [0, 2000] 89 | }, 90 | materialize: { 91 | chain: null, 92 | duration: [100, 1500], 93 | fuzz: [0, .99] 94 | } 95 | } 96 | } 97 | 98 | const ExitData = { 99 | type: 'slide', 100 | configs: { 101 | grow: { 102 | chain: false, 103 | duration: 750, 104 | fuzz: 0 105 | }, 106 | explode: { 107 | chain: false, 108 | duration: 750, 109 | fuzz: 0 110 | }, 111 | fade: { 112 | chain: false, 113 | duration: 750, 114 | fuzz: 0 115 | }, 116 | slide: { 117 | exitTo: 'right', 118 | chain: false, 119 | duration: 750, 120 | fuzz: 0 121 | }, 122 | slidefade: { 123 | exitTo: 'right', 124 | chain: false, 125 | duration: 750, 126 | fuzz: 0, 127 | distance: 0 128 | } , 129 | materialize: { 130 | chain: false, 131 | duration: 750, 132 | fuzz: 0.50 133 | }, 134 | } 135 | } 136 | 137 | const ExitMeta = { 138 | type: { 139 | Slide: 'slide', 140 | SlideFade: 'slidefade', 141 | Grow: 'grow', 142 | Explode: 'explode', 143 | Fade: 'fade', 144 | Materialize: 'materialize' 145 | }, 146 | configs: { 147 | grow: { 148 | chain: null, 149 | duration: [100, 3000], 150 | fuzz: [0, .99] 151 | }, 152 | explode: { 153 | chain: null, 154 | duration: [100, 3000], 155 | fuzz: [0, .99] 156 | }, 157 | fade: { 158 | chain: null, 159 | duration: [100, 3000], 160 | fuzz: [0, .99] 161 | }, 162 | slide: { 163 | exitTo: { 164 | Left: 'left', 165 | Right: 'right', 166 | Top: 'top', 167 | Bottom: 'bottom' 168 | }, 169 | chain: null, 170 | duration: [100, 3000], 171 | fuzz: [0, .99] 172 | }, 173 | slidefade: { 174 | exitTo: { 175 | Left: 'left', 176 | Right: 'right', 177 | Top: 'top', 178 | Bottom: 'bottom' 179 | }, 180 | chain: null, 181 | duration: [100, 3000], 182 | fuzz: [0, .99], 183 | distance: [0, 2000] 184 | }, 185 | materialize: { 186 | chain: null, 187 | duration: [100, 1500], 188 | fuzz: [0, .99] 189 | } 190 | } 191 | } 192 | 193 | const DataSet = { 194 | enterData: EnterData, 195 | enterMeta: EnterMeta, 196 | exitData: ExitData, 197 | exitMeta: ExitMeta 198 | } 199 | 200 | export default DataSet; -------------------------------------------------------------------------------- /tests/game.js: -------------------------------------------------------------------------------- 1 | import Phaser from 'phaser'; 2 | import DataSet from './dat-gui-data'; 3 | import DatGuiController from './dat-gui-controller'; 4 | 5 | /** 6 | * Create the GUI 7 | */ 8 | const GuiController = new DatGuiController(DataSet); 9 | 10 | /** 11 | * The Transitions plugin we are testing 12 | */ 13 | import { TransitionsPlugin } from '../build/phaser3-transitions'; 14 | 15 | /** 16 | * Scenes 17 | */ 18 | import Preload from './scenes/preload'; 19 | import Main from './scenes/main'; 20 | 21 | 22 | /** 23 | * Set up game config and create scenes 24 | */ 25 | const config = { 26 | type: Phaser.WEBGL, 27 | parent: 'game-container', 28 | width: 400, 29 | height: 800, 30 | physics: { 31 | default: 'arcade', 32 | arcade: { 33 | gravity: { y: 800 }, 34 | debug: false 35 | } 36 | }, 37 | scene: [ 38 | Preload, 39 | Main 40 | ], 41 | plugins: { 42 | scene: [ 43 | { 44 | key: 'transitions', 45 | mapping: 'transitions', 46 | plugin: TransitionsPlugin 47 | } 48 | ] 49 | }, 50 | }; 51 | 52 | const game = new Phaser.Game(config); -------------------------------------------------------------------------------- /tests/scenes/main.js: -------------------------------------------------------------------------------- 1 | import Phaser from 'phaser'; 2 | import DataSet from '../dat-gui-data'; 3 | 4 | class Main extends Phaser.Scene { 5 | constructor() { 6 | super({key: 'Main'}); 7 | } 8 | 9 | getEnter(){ 10 | let type = DataSet.enterData.type; 11 | let settings = DataSet.enterData.configs[type]; 12 | let config = Object.assign({}, { type: type }, settings); 13 | this.enter = this.transitions.create(this.targets, config); 14 | } 15 | 16 | getExit(){ 17 | let type = DataSet.exitData.type; 18 | let settings = DataSet.exitData.configs[type]; 19 | let config = Object.assign({}, { type: type }, settings); 20 | this.exit = this.transitions.create(this.targets, config); 21 | } 22 | 23 | create(){ 24 | this.targets = []; 25 | 26 | var btn = new Phaser.GameObjects.Sprite(this, 100, 100, 'button'); 27 | this.add.existing(btn); 28 | this.targets.push(btn); 29 | 30 | this.getEnter(); 31 | this.getExit(); 32 | 33 | var entered = false; 34 | this.enter.enter().then(() => { 35 | entered = true; 36 | }); 37 | 38 | this.input.keyboard.on('keydown', () => { 39 | if (this.enter.isTransitioning || this.exit.isTransitioning) return; 40 | 41 | if (entered){ 42 | 43 | this.getExit(); 44 | this.exit.exit().then(() => { 45 | entered = false; 46 | }) 47 | 48 | } else { 49 | this.exit.resetProps(); 50 | 51 | this.getEnter(); 52 | this.enter.enter().then(() => { 53 | entered = true; 54 | }) 55 | 56 | } 57 | }); 58 | 59 | } 60 | 61 | } 62 | 63 | export default Main; -------------------------------------------------------------------------------- /tests/scenes/preload.js: -------------------------------------------------------------------------------- 1 | import Phaser from 'phaser'; 2 | 3 | 4 | class Preload extends Phaser.Scene { 5 | constructor() { 6 | super({key: 'Preload'}); 7 | } 8 | 9 | preload(){ 10 | this.load.image('button', "assets/sprites/button.png"); 11 | } 12 | 13 | create(){ 14 | this.scene.start('Main'); 15 | } 16 | 17 | } 18 | 19 | export default Preload; -------------------------------------------------------------------------------- /tests/www/assets/sprites/button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JHAvrick/phaser3-transitions/6cb1a1ced626533fd8c29c78119c2333c2e36c12/tests/www/assets/sprites/button.png -------------------------------------------------------------------------------- /tests/www/assets/sprites/phaser3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JHAvrick/phaser3-transitions/6cb1a1ced626533fd8c29c78119c2333c2e36c12/tests/www/assets/sprites/phaser3.png -------------------------------------------------------------------------------- /tests/www/assets/sprites/sprites.json: -------------------------------------------------------------------------------- 1 | {"frames": [ 2 | 3 | { 4 | "filename": "banner", 5 | "frame": {"x":1,"y":1,"w":720,"h":176}, 6 | "rotated": false, 7 | "trimmed": true, 8 | "spriteSourceSize": {"x":0,"y":12,"w":720,"h":176}, 9 | "sourceSize": {"w":720,"h":200} 10 | }, 11 | { 12 | "filename": "barIcon", 13 | "frame": {"x":896,"y":445,"w":54,"h":62}, 14 | "rotated": false, 15 | "trimmed": true, 16 | "spriteSourceSize": {"x":23,"y":19,"w":54,"h":62}, 17 | "sourceSize": {"w":100,"h":100} 18 | }, 19 | { 20 | "filename": "colorBlob_00", 21 | "frame": {"x":529,"y":179,"w":72,"h":72}, 22 | "rotated": false, 23 | "trimmed": false, 24 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 25 | "sourceSize": {"w":72,"h":72} 26 | }, 27 | { 28 | "filename": "colorBlob_01", 29 | "frame": {"x":498,"y":349,"w":72,"h":72}, 30 | "rotated": false, 31 | "trimmed": false, 32 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 33 | "sourceSize": {"w":72,"h":72} 34 | }, 35 | { 36 | "filename": "colorBlob_02", 37 | "frame": {"x":526,"y":423,"w":72,"h":72}, 38 | "rotated": false, 39 | "trimmed": false, 40 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 41 | "sourceSize": {"w":72,"h":72} 42 | }, 43 | { 44 | "filename": "colorBlob_03", 45 | "frame": {"x":572,"y":349,"w":72,"h":72}, 46 | "rotated": false, 47 | "trimmed": false, 48 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 49 | "sourceSize": {"w":72,"h":72} 50 | }, 51 | { 52 | "filename": "colorBlob_04", 53 | "frame": {"x":600,"y":423,"w":72,"h":72}, 54 | "rotated": false, 55 | "trimmed": false, 56 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 57 | "sourceSize": {"w":72,"h":72} 58 | }, 59 | { 60 | "filename": "colorBlob_05", 61 | "frame": {"x":1117,"y":371,"w":72,"h":71}, 62 | "rotated": false, 63 | "trimmed": true, 64 | "spriteSourceSize": {"x":0,"y":1,"w":72,"h":71}, 65 | "sourceSize": {"w":72,"h":72} 66 | }, 67 | { 68 | "filename": "colorBlob_06", 69 | "frame": {"x":580,"y":253,"w":72,"h":72}, 70 | "rotated": false, 71 | "trimmed": false, 72 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 73 | "sourceSize": {"w":72,"h":72} 74 | }, 75 | { 76 | "filename": "colorBlob_07", 77 | "frame": {"x":603,"y":179,"w":72,"h":72}, 78 | "rotated": false, 79 | "trimmed": false, 80 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 81 | "sourceSize": {"w":72,"h":72} 82 | }, 83 | { 84 | "filename": "colorBlob_08", 85 | "frame": {"x":973,"y":149,"w":69,"h":72}, 86 | "rotated": false, 87 | "trimmed": true, 88 | "spriteSourceSize": {"x":3,"y":0,"w":69,"h":72}, 89 | "sourceSize": {"w":72,"h":72} 90 | }, 91 | { 92 | "filename": "colorBlob_09", 93 | "frame": {"x":1205,"y":438,"w":70,"h":70}, 94 | "rotated": false, 95 | "trimmed": true, 96 | "spriteSourceSize": {"x":2,"y":0,"w":70,"h":70}, 97 | "sourceSize": {"w":72,"h":72} 98 | }, 99 | { 100 | "filename": "colorBlob_10", 101 | "frame": {"x":1092,"y":1,"w":71,"h":71}, 102 | "rotated": false, 103 | "trimmed": true, 104 | "spriteSourceSize": {"x":1,"y":1,"w":71,"h":71}, 105 | "sourceSize": {"w":72,"h":72} 106 | }, 107 | { 108 | "filename": "colorBlob_11", 109 | "frame": {"x":1191,"y":366,"w":71,"h":70}, 110 | "rotated": false, 111 | "trimmed": true, 112 | "spriteSourceSize": {"x":1,"y":2,"w":71,"h":70}, 113 | "sourceSize": {"w":72,"h":72} 114 | }, 115 | { 116 | "filename": "colorBlob_12", 117 | "frame": {"x":1017,"y":75,"w":72,"h":71}, 118 | "rotated": false, 119 | "trimmed": true, 120 | "spriteSourceSize": {"x":0,"y":1,"w":72,"h":71}, 121 | "sourceSize": {"w":72,"h":72} 122 | }, 123 | { 124 | "filename": "colorBlob_13", 125 | "frame": {"x":1018,"y":1,"w":72,"h":71}, 126 | "rotated": false, 127 | "trimmed": true, 128 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":71}, 129 | "sourceSize": {"w":72,"h":72} 130 | }, 131 | { 132 | "filename": "colorBlob_14", 133 | "frame": {"x":1159,"y":294,"w":72,"h":70}, 134 | "rotated": false, 135 | "trimmed": true, 136 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":70}, 137 | "sourceSize": {"w":72,"h":72} 138 | }, 139 | { 140 | "filename": "colorBlob_15", 141 | "frame": {"x":1044,"y":148,"w":72,"h":71}, 142 | "rotated": false, 143 | "trimmed": true, 144 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":71}, 145 | "sourceSize": {"w":72,"h":72} 146 | }, 147 | { 148 | "filename": "confettiOne", 149 | "frame": {"x":202,"y":468,"w":40,"h":40}, 150 | "rotated": false, 151 | "trimmed": false, 152 | "spriteSourceSize": {"x":0,"y":0,"w":40,"h":40}, 153 | "sourceSize": {"w":40,"h":40} 154 | }, 155 | { 156 | "filename": "confettiThree", 157 | "frame": {"x":244,"y":468,"w":40,"h":40}, 158 | "rotated": false, 159 | "trimmed": false, 160 | "spriteSourceSize": {"x":0,"y":0,"w":40,"h":40}, 161 | "sourceSize": {"w":40,"h":40} 162 | }, 163 | { 164 | "filename": "confettiTwo", 165 | "frame": {"x":286,"y":468,"w":40,"h":40}, 166 | "rotated": false, 167 | "trimmed": false, 168 | "spriteSourceSize": {"x":0,"y":0,"w":40,"h":40}, 169 | "sourceSize": {"w":40,"h":40} 170 | }, 171 | { 172 | "filename": "cube_00", 173 | "frame": {"x":1518,"y":275,"w":58,"h":58}, 174 | "rotated": false, 175 | "trimmed": true, 176 | "spriteSourceSize": {"x":7,"y":8,"w":58,"h":58}, 177 | "sourceSize": {"w":72,"h":72} 178 | }, 179 | { 180 | "filename": "cube_01", 181 | "frame": {"x":1014,"y":445,"w":60,"h":59}, 182 | "rotated": false, 183 | "trimmed": true, 184 | "spriteSourceSize": {"x":6,"y":7,"w":60,"h":59}, 185 | "sourceSize": {"w":72,"h":72} 186 | }, 187 | { 188 | "filename": "cube_02", 189 | "frame": {"x":394,"y":445,"w":62,"h":62}, 190 | "rotated": false, 191 | "trimmed": true, 192 | "spriteSourceSize": {"x":5,"y":6,"w":62,"h":62}, 193 | "sourceSize": {"w":72,"h":72} 194 | }, 195 | { 196 | "filename": "cube_03", 197 | "frame": {"x":1488,"y":420,"w":64,"h":64}, 198 | "rotated": false, 199 | "trimmed": true, 200 | "spriteSourceSize": {"x":4,"y":5,"w":64,"h":64}, 201 | "sourceSize": {"w":72,"h":72} 202 | }, 203 | { 204 | "filename": "cube_04", 205 | "frame": {"x":1515,"y":72,"w":66,"h":65}, 206 | "rotated": false, 207 | "trimmed": true, 208 | "spriteSourceSize": {"x":3,"y":4,"w":66,"h":65}, 209 | "sourceSize": {"w":72,"h":72} 210 | }, 211 | { 212 | "filename": "cube_05", 213 | "frame": {"x":1448,"y":213,"w":68,"h":68}, 214 | "rotated": false, 215 | "trimmed": true, 216 | "spriteSourceSize": {"x":2,"y":3,"w":68,"h":68}, 217 | "sourceSize": {"w":72,"h":72} 218 | }, 219 | { 220 | "filename": "cube_06", 221 | "frame": {"x":1488,"y":1,"w":70,"h":69}, 222 | "rotated": false, 223 | "trimmed": true, 224 | "spriteSourceSize": {"x":1,"y":2,"w":70,"h":69}, 225 | "sourceSize": {"w":72,"h":72} 226 | }, 227 | { 228 | "filename": "cube_07", 229 | "frame": {"x":1091,"y":74,"w":72,"h":71}, 230 | "rotated": false, 231 | "trimmed": true, 232 | "spriteSourceSize": {"x":0,"y":1,"w":72,"h":71}, 233 | "sourceSize": {"w":72,"h":72} 234 | }, 235 | { 236 | "filename": "cube_08", 237 | "frame": {"x":646,"y":327,"w":72,"h":72}, 238 | "rotated": false, 239 | "trimmed": false, 240 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 241 | "sourceSize": {"w":72,"h":72} 242 | }, 243 | { 244 | "filename": "cube_09", 245 | "frame": {"x":654,"y":253,"w":72,"h":72}, 246 | "rotated": false, 247 | "trimmed": false, 248 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 249 | "sourceSize": {"w":72,"h":72} 250 | }, 251 | { 252 | "filename": "cube_10", 253 | "frame": {"x":677,"y":179,"w":72,"h":72}, 254 | "rotated": false, 255 | "trimmed": false, 256 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 257 | "sourceSize": {"w":72,"h":72} 258 | }, 259 | { 260 | "filename": "cube_11", 261 | "frame": {"x":674,"y":401,"w":72,"h":72}, 262 | "rotated": false, 263 | "trimmed": false, 264 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 265 | "sourceSize": {"w":72,"h":72} 266 | }, 267 | { 268 | "filename": "cube_12", 269 | "frame": {"x":720,"y":327,"w":72,"h":72}, 270 | "rotated": false, 271 | "trimmed": false, 272 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 273 | "sourceSize": {"w":72,"h":72} 274 | }, 275 | { 276 | "filename": "cubeOutline", 277 | "frame": {"x":952,"y":445,"w":60,"h":60}, 278 | "rotated": false, 279 | "trimmed": true, 280 | "spriteSourceSize": {"x":6,"y":7,"w":60,"h":60}, 281 | "sourceSize": {"w":72,"h":72} 282 | }, 283 | { 284 | "filename": "cubeShape", 285 | "frame": {"x":1076,"y":445,"w":59,"h":59}, 286 | "rotated": false, 287 | "trimmed": true, 288 | "spriteSourceSize": {"x":7,"y":7,"w":59,"h":59}, 289 | "sourceSize": {"w":72,"h":72} 290 | }, 291 | { 292 | "filename": "fill", 293 | "frame": {"x":1,"y":179,"w":31,"h":115}, 294 | "rotated": false, 295 | "trimmed": true, 296 | "spriteSourceSize": {"x":21,"y":0,"w":31,"h":115}, 297 | "sourceSize": {"w":72,"h":115} 298 | }, 299 | { 300 | "filename": "hex_00", 301 | "frame": {"x":1518,"y":205,"w":61,"h":68}, 302 | "rotated": false, 303 | "trimmed": true, 304 | "spriteSourceSize": {"x":5,"y":3,"w":61,"h":68}, 305 | "sourceSize": {"w":72,"h":72} 306 | }, 307 | { 308 | "filename": "hex_01", 309 | "frame": {"x":1380,"y":1,"w":63,"h":69}, 310 | "rotated": false, 311 | "trimmed": true, 312 | "spriteSourceSize": {"x":4,"y":2,"w":63,"h":69}, 313 | "sourceSize": {"w":72,"h":72} 314 | }, 315 | { 316 | "filename": "hex_02", 317 | "frame": {"x":1421,"y":433,"w":65,"h":70}, 318 | "rotated": false, 319 | "trimmed": true, 320 | "spriteSourceSize": {"x":3,"y":2,"w":65,"h":70}, 321 | "sourceSize": {"w":72,"h":72} 322 | }, 323 | { 324 | "filename": "hex_03", 325 | "frame": {"x":1118,"y":147,"w":67,"h":71}, 326 | "rotated": false, 327 | "trimmed": true, 328 | "spriteSourceSize": {"x":2,"y":1,"w":67,"h":71}, 329 | "sourceSize": {"w":72,"h":72} 330 | }, 331 | { 332 | "filename": "hex_04", 333 | "frame": {"x":1090,"y":297,"w":67,"h":72}, 334 | "rotated": false, 335 | "trimmed": true, 336 | "spriteSourceSize": {"x":2,"y":0,"w":67,"h":72}, 337 | "sourceSize": {"w":72,"h":72} 338 | }, 339 | { 340 | "filename": "hex_05", 341 | "frame": {"x":1024,"y":223,"w":69,"h":72}, 342 | "rotated": false, 343 | "trimmed": true, 344 | "spriteSourceSize": {"x":1,"y":0,"w":69,"h":72}, 345 | "sourceSize": {"w":72,"h":72} 346 | }, 347 | { 348 | "filename": "hex_06", 349 | "frame": {"x":1044,"y":371,"w":71,"h":72}, 350 | "rotated": false, 351 | "trimmed": true, 352 | "spriteSourceSize": {"x":0,"y":0,"w":71,"h":72}, 353 | "sourceSize": {"w":72,"h":72} 354 | }, 355 | { 356 | "filename": "hex_07", 357 | "frame": {"x":728,"y":253,"w":72,"h":72}, 358 | "rotated": false, 359 | "trimmed": false, 360 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 361 | "sourceSize": {"w":72,"h":72} 362 | }, 363 | { 364 | "filename": "hex_08", 365 | "frame": {"x":748,"y":401,"w":72,"h":72}, 366 | "rotated": false, 367 | "trimmed": false, 368 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 369 | "sourceSize": {"w":72,"h":72} 370 | }, 371 | { 372 | "filename": "hex_09", 373 | "frame": {"x":794,"y":327,"w":72,"h":72}, 374 | "rotated": false, 375 | "trimmed": false, 376 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 377 | "sourceSize": {"w":72,"h":72} 378 | }, 379 | { 380 | "filename": "hex_10", 381 | "frame": {"x":822,"y":401,"w":72,"h":72}, 382 | "rotated": false, 383 | "trimmed": false, 384 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 385 | "sourceSize": {"w":72,"h":72} 386 | }, 387 | { 388 | "filename": "hex_11", 389 | "frame": {"x":723,"y":1,"w":72,"h":72}, 390 | "rotated": false, 391 | "trimmed": false, 392 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 393 | "sourceSize": {"w":72,"h":72} 394 | }, 395 | { 396 | "filename": "hex_12", 397 | "frame": {"x":723,"y":75,"w":72,"h":72}, 398 | "rotated": false, 399 | "trimmed": false, 400 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 401 | "sourceSize": {"w":72,"h":72} 402 | }, 403 | { 404 | "filename": "hexOutline", 405 | "frame": {"x":1309,"y":72,"w":63,"h":70}, 406 | "rotated": false, 407 | "trimmed": true, 408 | "spriteSourceSize": {"x":4,"y":2,"w":63,"h":70}, 409 | "sourceSize": {"w":72,"h":72} 410 | }, 411 | { 412 | "filename": "hexShape", 413 | "frame": {"x":1384,"y":215,"w":62,"h":69}, 414 | "rotated": false, 415 | "trimmed": true, 416 | "spriteSourceSize": {"x":4,"y":2,"w":62,"h":69}, 417 | "sourceSize": {"w":72,"h":72} 418 | }, 419 | { 420 | "filename": "orb_00", 421 | "frame": {"x":328,"y":445,"w":64,"h":62}, 422 | "rotated": false, 423 | "trimmed": true, 424 | "spriteSourceSize": {"x":4,"y":5,"w":64,"h":62}, 425 | "sourceSize": {"w":72,"h":72} 426 | }, 427 | { 428 | "filename": "orb_01", 429 | "frame": {"x":1515,"y":139,"w":66,"h":64}, 430 | "rotated": false, 431 | "trimmed": true, 432 | "spriteSourceSize": {"x":3,"y":4,"w":66,"h":64}, 433 | "sourceSize": {"w":72,"h":72} 434 | }, 435 | { 436 | "filename": "orb_02", 437 | "frame": {"x":1480,"y":352,"w":68,"h":66}, 438 | "rotated": false, 439 | "trimmed": true, 440 | "spriteSourceSize": {"x":2,"y":3,"w":68,"h":66}, 441 | "sourceSize": {"w":72,"h":72} 442 | }, 443 | { 444 | "filename": "orb_03", 445 | "frame": {"x":1402,"y":143,"w":70,"h":68}, 446 | "rotated": false, 447 | "trimmed": true, 448 | "spriteSourceSize": {"x":1,"y":2,"w":70,"h":68}, 449 | "sourceSize": {"w":72,"h":72} 450 | }, 451 | { 452 | "filename": "orb_04", 453 | "frame": {"x":1443,"y":72,"w":70,"h":68}, 454 | "rotated": false, 455 | "trimmed": true, 456 | "spriteSourceSize": {"x":1,"y":2,"w":70,"h":68}, 457 | "sourceSize": {"w":72,"h":72} 458 | }, 459 | { 460 | "filename": "orb_05", 461 | "frame": {"x":1166,"y":220,"w":72,"h":70}, 462 | "rotated": false, 463 | "trimmed": true, 464 | "spriteSourceSize": {"x":0,"y":1,"w":72,"h":70}, 465 | "sourceSize": {"w":72,"h":72} 466 | }, 467 | { 468 | "filename": "orb_06", 469 | "frame": {"x":751,"y":149,"w":72,"h":72}, 470 | "rotated": false, 471 | "trimmed": false, 472 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 473 | "sourceSize": {"w":72,"h":72} 474 | }, 475 | { 476 | "filename": "orb_07", 477 | "frame": {"x":802,"y":223,"w":72,"h":72}, 478 | "rotated": false, 479 | "trimmed": false, 480 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 481 | "sourceSize": {"w":72,"h":72} 482 | }, 483 | { 484 | "filename": "orb_08", 485 | "frame": {"x":868,"y":297,"w":72,"h":72}, 486 | "rotated": false, 487 | "trimmed": false, 488 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 489 | "sourceSize": {"w":72,"h":72} 490 | }, 491 | { 492 | "filename": "orb_09", 493 | "frame": {"x":896,"y":371,"w":72,"h":72}, 494 | "rotated": false, 495 | "trimmed": false, 496 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 497 | "sourceSize": {"w":72,"h":72} 498 | }, 499 | { 500 | "filename": "orb_10", 501 | "frame": {"x":797,"y":1,"w":72,"h":72}, 502 | "rotated": false, 503 | "trimmed": false, 504 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 505 | "sourceSize": {"w":72,"h":72} 506 | }, 507 | { 508 | "filename": "orb_11", 509 | "frame": {"x":797,"y":75,"w":72,"h":72}, 510 | "rotated": false, 511 | "trimmed": false, 512 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 513 | "sourceSize": {"w":72,"h":72} 514 | }, 515 | { 516 | "filename": "orb_12", 517 | "frame": {"x":825,"y":149,"w":72,"h":72}, 518 | "rotated": false, 519 | "trimmed": false, 520 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 521 | "sourceSize": {"w":72,"h":72} 522 | }, 523 | { 524 | "filename": "orbOutline", 525 | "frame": {"x":458,"y":444,"w":66,"h":64}, 526 | "rotated": false, 527 | "trimmed": true, 528 | "spriteSourceSize": {"x":3,"y":4,"w":66,"h":64}, 529 | "sourceSize": {"w":72,"h":72} 530 | }, 531 | { 532 | "filename": "orbShape", 533 | "frame": {"x":1137,"y":444,"w":66,"h":64}, 534 | "rotated": false, 535 | "trimmed": true, 536 | "spriteSourceSize": {"x":3,"y":4,"w":66,"h":64}, 537 | "sourceSize": {"w":72,"h":72} 538 | }, 539 | { 540 | "filename": "player_00", 541 | "frame": {"x":1233,"y":292,"w":70,"h":70}, 542 | "rotated": false, 543 | "trimmed": true, 544 | "spriteSourceSize": {"x":1,"y":1,"w":70,"h":70}, 545 | "sourceSize": {"w":72,"h":72} 546 | }, 547 | { 548 | "filename": "player_01", 549 | "frame": {"x":1264,"y":364,"w":70,"h":70}, 550 | "rotated": false, 551 | "trimmed": true, 552 | "spriteSourceSize": {"x":1,"y":1,"w":70,"h":70}, 553 | "sourceSize": {"w":72,"h":72} 554 | }, 555 | { 556 | "filename": "player_02", 557 | "frame": {"x":1277,"y":436,"w":70,"h":70}, 558 | "rotated": false, 559 | "trimmed": true, 560 | "spriteSourceSize": {"x":1,"y":1,"w":70,"h":70}, 561 | "sourceSize": {"w":72,"h":72} 562 | }, 563 | { 564 | "filename": "player_03", 565 | "frame": {"x":1165,"y":1,"w":70,"h":70}, 566 | "rotated": false, 567 | "trimmed": true, 568 | "spriteSourceSize": {"x":1,"y":1,"w":70,"h":70}, 569 | "sourceSize": {"w":72,"h":72} 570 | }, 571 | { 572 | "filename": "player_04", 573 | "frame": {"x":1165,"y":73,"w":70,"h":70}, 574 | "rotated": false, 575 | "trimmed": true, 576 | "spriteSourceSize": {"x":1,"y":1,"w":70,"h":70}, 577 | "sourceSize": {"w":72,"h":72} 578 | }, 579 | { 580 | "filename": "player_05", 581 | "frame": {"x":1187,"y":145,"w":70,"h":70}, 582 | "rotated": false, 583 | "trimmed": true, 584 | "spriteSourceSize": {"x":1,"y":1,"w":70,"h":70}, 585 | "sourceSize": {"w":72,"h":72} 586 | }, 587 | { 588 | "filename": "player_06", 589 | "frame": {"x":1240,"y":217,"w":70,"h":70}, 590 | "rotated": false, 591 | "trimmed": true, 592 | "spriteSourceSize": {"x":1,"y":1,"w":70,"h":70}, 593 | "sourceSize": {"w":72,"h":72} 594 | }, 595 | { 596 | "filename": "player_07", 597 | "frame": {"x":1305,"y":289,"w":70,"h":70}, 598 | "rotated": false, 599 | "trimmed": true, 600 | "spriteSourceSize": {"x":1,"y":1,"w":70,"h":70}, 601 | "sourceSize": {"w":72,"h":72} 602 | }, 603 | { 604 | "filename": "player_08", 605 | "frame": {"x":1336,"y":361,"w":70,"h":70}, 606 | "rotated": false, 607 | "trimmed": true, 608 | "spriteSourceSize": {"x":1,"y":1,"w":70,"h":70}, 609 | "sourceSize": {"w":72,"h":72} 610 | }, 611 | { 612 | "filename": "player_09", 613 | "frame": {"x":1349,"y":433,"w":70,"h":70}, 614 | "rotated": false, 615 | "trimmed": true, 616 | "spriteSourceSize": {"x":1,"y":1,"w":70,"h":70}, 617 | "sourceSize": {"w":72,"h":72} 618 | }, 619 | { 620 | "filename": "player_10", 621 | "frame": {"x":1237,"y":1,"w":70,"h":70}, 622 | "rotated": false, 623 | "trimmed": true, 624 | "spriteSourceSize": {"x":1,"y":1,"w":70,"h":70}, 625 | "sourceSize": {"w":72,"h":72} 626 | }, 627 | { 628 | "filename": "player_11", 629 | "frame": {"x":1237,"y":73,"w":70,"h":70}, 630 | "rotated": false, 631 | "trimmed": true, 632 | "spriteSourceSize": {"x":1,"y":1,"w":70,"h":70}, 633 | "sourceSize": {"w":72,"h":72} 634 | }, 635 | { 636 | "filename": "player_12", 637 | "frame": {"x":1259,"y":145,"w":70,"h":70}, 638 | "rotated": false, 639 | "trimmed": true, 640 | "spriteSourceSize": {"x":1,"y":1,"w":70,"h":70}, 641 | "sourceSize": {"w":72,"h":72} 642 | }, 643 | { 644 | "filename": "player_13", 645 | "frame": {"x":1312,"y":217,"w":70,"h":70}, 646 | "rotated": false, 647 | "trimmed": true, 648 | "spriteSourceSize": {"x":1,"y":1,"w":70,"h":70}, 649 | "sourceSize": {"w":72,"h":72} 650 | }, 651 | { 652 | "filename": "player_14", 653 | "frame": {"x":1377,"y":289,"w":70,"h":70}, 654 | "rotated": false, 655 | "trimmed": true, 656 | "spriteSourceSize": {"x":1,"y":1,"w":70,"h":70}, 657 | "sourceSize": {"w":72,"h":72} 658 | }, 659 | { 660 | "filename": "player_15", 661 | "frame": {"x":1408,"y":361,"w":70,"h":70}, 662 | "rotated": false, 663 | "trimmed": true, 664 | "spriteSourceSize": {"x":1,"y":1,"w":70,"h":70}, 665 | "sourceSize": {"w":72,"h":72} 666 | }, 667 | { 668 | "filename": "progressBar", 669 | "frame": {"x":100,"y":373,"w":100,"h":20}, 670 | "rotated": false, 671 | "trimmed": false, 672 | "spriteSourceSize": {"x":0,"y":0,"w":100,"h":20}, 673 | "sourceSize": {"w":100,"h":20} 674 | }, 675 | { 676 | "filename": "shadow", 677 | "frame": {"x":1,"y":497,"w":10,"h":10}, 678 | "rotated": false, 679 | "trimmed": false, 680 | "spriteSourceSize": {"x":0,"y":0,"w":10,"h":10}, 681 | "sourceSize": {"w":10,"h":10} 682 | }, 683 | { 684 | "filename": "specialOrb_00", 685 | "frame": {"x":1,"y":296,"w":97,"h":100}, 686 | "rotated": false, 687 | "trimmed": true, 688 | "spriteSourceSize": {"x":16,"y":12,"w":97,"h":100}, 689 | "sourceSize": {"w":125,"h":125} 690 | }, 691 | { 692 | "filename": "specialOrb_01", 693 | "frame": {"x":1,"y":398,"w":100,"h":97}, 694 | "rotated": false, 695 | "trimmed": true, 696 | "spriteSourceSize": {"x":13,"y":15,"w":100,"h":97}, 697 | "sourceSize": {"w":125,"h":125} 698 | }, 699 | { 700 | "filename": "specialOrb_02", 701 | "frame": {"x":34,"y":179,"w":105,"h":96}, 702 | "rotated": false, 703 | "trimmed": true, 704 | "spriteSourceSize": {"x":10,"y":16,"w":105,"h":96}, 705 | "sourceSize": {"w":125,"h":125} 706 | }, 707 | { 708 | "filename": "specialOrb_03", 709 | "frame": {"x":100,"y":277,"w":107,"h":94}, 710 | "rotated": false, 711 | "trimmed": true, 712 | "spriteSourceSize": {"x":10,"y":18,"w":107,"h":94}, 713 | "sourceSize": {"w":125,"h":125} 714 | }, 715 | { 716 | "filename": "specialOrb_04", 717 | "frame": {"x":141,"y":179,"w":106,"h":94}, 718 | "rotated": false, 719 | "trimmed": true, 720 | "spriteSourceSize": {"x":10,"y":18,"w":106,"h":94}, 721 | "sourceSize": {"w":125,"h":125} 722 | }, 723 | { 724 | "filename": "specialOrb_05", 725 | "frame": {"x":202,"y":373,"w":102,"h":93}, 726 | "rotated": false, 727 | "trimmed": true, 728 | "spriteSourceSize": {"x":13,"y":18,"w":102,"h":93}, 729 | "sourceSize": {"w":125,"h":125} 730 | }, 731 | { 732 | "filename": "specialOrb_06", 733 | "frame": {"x":103,"y":395,"w":97,"h":94}, 734 | "rotated": false, 735 | "trimmed": true, 736 | "spriteSourceSize": {"x":19,"y":15,"w":97,"h":94}, 737 | "sourceSize": {"w":125,"h":125} 738 | }, 739 | { 740 | "filename": "specialOrb_07", 741 | "frame": {"x":249,"y":179,"w":93,"h":89}, 742 | "rotated": false, 743 | "trimmed": true, 744 | "spriteSourceSize": {"x":24,"y":16,"w":93,"h":89}, 745 | "sourceSize": {"w":125,"h":125} 746 | }, 747 | { 748 | "filename": "specialOrb_08", 749 | "frame": {"x":404,"y":266,"w":88,"h":84}, 750 | "rotated": false, 751 | "trimmed": true, 752 | "spriteSourceSize": {"x":25,"y":18,"w":88,"h":84}, 753 | "sourceSize": {"w":125,"h":125} 754 | }, 755 | { 756 | "filename": "specialOrb_09", 757 | "frame": {"x":494,"y":265,"w":84,"h":82}, 758 | "rotated": false, 759 | "trimmed": true, 760 | "spriteSourceSize": {"x":24,"y":20,"w":84,"h":82}, 761 | "sourceSize": {"w":125,"h":125} 762 | }, 763 | { 764 | "filename": "specialOrb_10", 765 | "frame": {"x":440,"y":179,"w":87,"h":84}, 766 | "rotated": false, 767 | "trimmed": true, 768 | "spriteSourceSize": {"x":23,"y":20,"w":87,"h":84}, 769 | "sourceSize": {"w":125,"h":125} 770 | }, 771 | { 772 | "filename": "specialOrb_11", 773 | "frame": {"x":306,"y":358,"w":92,"h":85}, 774 | "rotated": false, 775 | "trimmed": true, 776 | "spriteSourceSize": {"x":22,"y":20,"w":92,"h":85}, 777 | "sourceSize": {"w":125,"h":125} 778 | }, 779 | { 780 | "filename": "specialOrb_12", 781 | "frame": {"x":306,"y":270,"w":96,"h":86}, 782 | "rotated": false, 783 | "trimmed": true, 784 | "spriteSourceSize": {"x":19,"y":18,"w":96,"h":86}, 785 | "sourceSize": {"w":125,"h":125} 786 | }, 787 | { 788 | "filename": "specialOrb_13", 789 | "frame": {"x":400,"y":358,"w":96,"h":84}, 790 | "rotated": false, 791 | "trimmed": true, 792 | "spriteSourceSize": {"x":17,"y":18,"w":96,"h":84}, 793 | "sourceSize": {"w":125,"h":125} 794 | }, 795 | { 796 | "filename": "specialOrb_14", 797 | "frame": {"x":344,"y":179,"w":94,"h":85}, 798 | "rotated": false, 799 | "trimmed": true, 800 | "spriteSourceSize": {"x":16,"y":16,"w":94,"h":85}, 801 | "sourceSize": {"w":125,"h":125} 802 | }, 803 | { 804 | "filename": "specialOrb_15", 805 | "frame": {"x":209,"y":275,"w":95,"h":90}, 806 | "rotated": false, 807 | "trimmed": true, 808 | "spriteSourceSize": {"x":15,"y":12,"w":95,"h":90}, 809 | "sourceSize": {"w":125,"h":125} 810 | }, 811 | { 812 | "filename": "tri_00", 813 | "frame": {"x":1449,"y":283,"w":67,"h":67}, 814 | "rotated": false, 815 | "trimmed": true, 816 | "spriteSourceSize": {"x":1,"y":2,"w":67,"h":67}, 817 | "sourceSize": {"w":72,"h":72} 818 | }, 819 | { 820 | "filename": "tri_01", 821 | "frame": {"x":1374,"y":72,"w":67,"h":69}, 822 | "rotated": false, 823 | "trimmed": true, 824 | "spriteSourceSize": {"x":1,"y":1,"w":67,"h":69}, 825 | "sourceSize": {"w":72,"h":72} 826 | }, 827 | { 828 | "filename": "tri_02", 829 | "frame": {"x":1095,"y":221,"w":69,"h":71}, 830 | "rotated": false, 831 | "trimmed": true, 832 | "spriteSourceSize": {"x":0,"y":0,"w":69,"h":71}, 833 | "sourceSize": {"w":72,"h":72} 834 | }, 835 | { 836 | "filename": "tri_03", 837 | "frame": {"x":945,"y":75,"w":70,"h":72}, 838 | "rotated": false, 839 | "trimmed": true, 840 | "spriteSourceSize": {"x":0,"y":0,"w":70,"h":72}, 841 | "sourceSize": {"w":72,"h":72} 842 | }, 843 | { 844 | "filename": "tri_04", 845 | "frame": {"x":945,"y":1,"w":71,"h":72}, 846 | "rotated": false, 847 | "trimmed": true, 848 | "spriteSourceSize": {"x":0,"y":0,"w":71,"h":72}, 849 | "sourceSize": {"w":72,"h":72} 850 | }, 851 | { 852 | "filename": "tri_05", 853 | "frame": {"x":876,"y":223,"w":72,"h":72}, 854 | "rotated": false, 855 | "trimmed": false, 856 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 857 | "sourceSize": {"w":72,"h":72} 858 | }, 859 | { 860 | "filename": "tri_06", 861 | "frame": {"x":942,"y":297,"w":72,"h":72}, 862 | "rotated": false, 863 | "trimmed": false, 864 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 865 | "sourceSize": {"w":72,"h":72} 866 | }, 867 | { 868 | "filename": "tri_07", 869 | "frame": {"x":970,"y":371,"w":72,"h":72}, 870 | "rotated": false, 871 | "trimmed": false, 872 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 873 | "sourceSize": {"w":72,"h":72} 874 | }, 875 | { 876 | "filename": "tri_08", 877 | "frame": {"x":871,"y":1,"w":72,"h":72}, 878 | "rotated": false, 879 | "trimmed": false, 880 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 881 | "sourceSize": {"w":72,"h":72} 882 | }, 883 | { 884 | "filename": "tri_09", 885 | "frame": {"x":871,"y":75,"w":72,"h":72}, 886 | "rotated": false, 887 | "trimmed": false, 888 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 889 | "sourceSize": {"w":72,"h":72} 890 | }, 891 | { 892 | "filename": "tri_10", 893 | "frame": {"x":899,"y":149,"w":72,"h":72}, 894 | "rotated": false, 895 | "trimmed": false, 896 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 897 | "sourceSize": {"w":72,"h":72} 898 | }, 899 | { 900 | "filename": "tri_11", 901 | "frame": {"x":950,"y":223,"w":72,"h":72}, 902 | "rotated": false, 903 | "trimmed": false, 904 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 905 | "sourceSize": {"w":72,"h":72} 906 | }, 907 | { 908 | "filename": "tri_12", 909 | "frame": {"x":1016,"y":297,"w":72,"h":72}, 910 | "rotated": false, 911 | "trimmed": false, 912 | "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72}, 913 | "sourceSize": {"w":72,"h":72} 914 | }, 915 | { 916 | "filename": "triOutline", 917 | "frame": {"x":1309,"y":1,"w":69,"h":69}, 918 | "rotated": false, 919 | "trimmed": true, 920 | "spriteSourceSize": {"x":0,"y":1,"w":69,"h":69}, 921 | "sourceSize": {"w":72,"h":72} 922 | }, 923 | { 924 | "filename": "triShape", 925 | "frame": {"x":1331,"y":144,"w":69,"h":69}, 926 | "rotated": false, 927 | "trimmed": true, 928 | "spriteSourceSize": {"x":0,"y":1,"w":69,"h":69}, 929 | "sourceSize": {"w":72,"h":72} 930 | }], 931 | "meta": { 932 | "app": "http://www.codeandweb.com/texturepacker", 933 | "version": "1.0", 934 | "image": "sprites.png", 935 | "format": "RGBA8888", 936 | "size": {"w":1582,"h":509}, 937 | "scale": "1", 938 | "smartupdate": "$TexturePacker:SmartUpdate:1472b08dec9861d197491c497e9c4459:05e2d7c4d49b49401f0e21f498dec2f4:1eabdf11f75e3a4fe3147baf7b5be24b$" 939 | } 940 | } 941 | -------------------------------------------------------------------------------- /tests/www/assets/sprites/sprites.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JHAvrick/phaser3-transitions/6cb1a1ced626533fd8c29c78119c2333c2e36c12/tests/www/assets/sprites/sprites.png -------------------------------------------------------------------------------- /tests/www/assets/sprites/station.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JHAvrick/phaser3-transitions/6cb1a1ced626533fd8c29c78119c2333c2e36c12/tests/www/assets/sprites/station.png -------------------------------------------------------------------------------- /tests/www/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Phaser 3 Boilerplate 7 | 8 | 9 | 10 | 60 | 61 |
62 |
63 |
64 |
65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | 4 | const APP_DIR = path.resolve(__dirname, 'src', 'phaser3-transitions.js'); 5 | const BUILD_DIR = path.resolve(__dirname, 'build'); 6 | 7 | const LibBuild = require('./lib.webpack.config'); 8 | const TestBuild = require('./tests.webpack.config'); 9 | 10 | module.exports = [ 11 | LibBuild, 12 | TestBuild 13 | ] 14 | 15 | --------------------------------------------------------------------------------