├── .babelrc ├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── lib ├── @types │ ├── @pixi__core │ │ └── index.d.js │ ├── @pixi__display │ │ └── index.d.js │ ├── @pixi__sprite │ │ └── index.d.js │ └── @pixi__ticker │ │ └── index.d.js ├── Options.d.ts ├── Options.js ├── Vector.d.ts ├── Vector.js ├── camera.d.ts ├── camera.js ├── effects │ ├── Effect.d.ts │ ├── Effect.js │ ├── Fade.d.ts │ ├── Fade.js │ ├── Rotate.d.ts │ ├── Rotate.js │ ├── Shake.d.ts │ ├── Shake.js │ ├── pan_to.d.ts │ ├── pan_to.js │ ├── zoom_to.d.ts │ └── zoom_to.js ├── index.d.ts └── index.js ├── package-lock.json ├── package.json ├── pixi-game-camera.js ├── rollup.config.js ├── src ├── @types │ ├── @pixi__core │ │ └── index.d.ts │ ├── @pixi__display │ │ └── index.d.ts │ ├── @pixi__sprite │ │ └── index.d.ts │ └── @pixi__ticker │ │ └── index.d.ts ├── camera.ts ├── effects │ ├── effect.ts │ ├── fade.ts │ ├── pan_to.ts │ ├── rotate.ts │ ├── shake.ts │ └── zoom_to.ts ├── index.ts ├── options.ts └── vector.ts ├── test ├── assets │ ├── caveman.png │ └── parallax_forest_pack │ │ ├── layers │ │ ├── parallax-forest-back-trees.png │ │ ├── parallax-forest-front-trees.png │ │ ├── parallax-forest-lights.png │ │ └── parallax-forest-middle-trees.png │ │ ├── license.txt │ │ └── parallax-forest.psd ├── index.html ├── pixi-game-camera.js ├── pixi-game-camera.test.js └── server.js └── tsconfig.json /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/env", 4 | "@babel/typescript" 5 | ], 6 | "plugins": [ 7 | "@babel/proposal-class-properties", 8 | "@babel/proposal-object-rest-spread" 9 | ] 10 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # parcel-bundler cache (https://parceljs.org/) 61 | .cache 62 | 63 | # next.js build output 64 | .next 65 | 66 | # nuxt.js build output 67 | .nuxt 68 | 69 | # vuepress build output 70 | .vuepress/dist 71 | 72 | # Serverless directories 73 | .serverless -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 1.0.2 / 2021-02-20 2 | - [HOTFIX] Made the optional arguments for camera and the easing effects actually optional. 3 | 4 | ## 1.0.1 / 2021-02-12 5 | - [MISC] Updated all dependencies to their latest versions. 6 | 7 | ## 1.0.0 / 2020-10-01 8 | - [FEATURE] Exported all parts of the package individually so you can use just what you need. 9 | - [FEATURE] Detached containier from app so that any container can be used for any effect. 10 | - [MISC] Removed easing functions to offer greater flexability and smaller file sizes. A linear ease is used by default and any easing function can be passed in to effects that can be eased. 11 | - [MISC] Change file names from PascalCase to snake_case. 12 | - [MISC] Removed all default exports and made them all named. 13 | 14 | ## 0.2.2 / 2020-09-30 15 | - [TEST] Changed test server to use fastify for ease of use. 16 | - [MISC] Flatted directory structure in src directory. 17 | - [MISC] Removed unnecessary typings. 18 | - [MISC] Updated out-of-date dependencies to their latest versions and fixed all security vulnerabilities. 19 | - [MISC] Added extra build scripts. 20 | 21 | ## 0.2.1 / 2020-04-16 22 | - [MISC] Updated out-of-date dependencies to their latest versions which also fixed some fixed security vulnerabilities. 23 | 24 | ## 0.2.0 / 2020-03-18 25 | - [FEATURE] Added rotate effect. 26 | - [DOCS] Updated docs to show usage of rotate effect. 27 | - [TEST] Added test for rotate effect. 28 | - [MISC] Added logo to README. 29 | 30 | ## 0.1.1 / 2020-03-18 31 | - [MISC] Fixed security vulnerabilities that could be fixed. The rest require updates to @babel/cli. 32 | - [MISC] Updated out-of-date dependencies to their latest versions. 33 | 34 | ## 0.1.0 / 2020-02-28 35 | - Initial release. 36 | 37 | ## 0.0.6 / 2020-02-27 38 | - [FEATURE] Finished fadeTo effect. 39 | - [TESTS] Added testing for effects. 40 | 41 | ## 0.0.5 / 2020-02-26 42 | - [FEATURE] Finished panTo effect. 43 | - [HOTFIX] Fixed issue with zooming that caused it to finish before the duration of the effect had been reached. 44 | 45 | ## 0.0.4 / 2020-02-25 46 | - [FEATURE] Finished shake effect. 47 | - [FEATURE] Started panTo effect. 48 | 49 | ## 0.0.3 / 2020-02-24 50 | - [FEATURE] Added ability to pass in PIXI.Ticker. 51 | - [FEATURE] Removed update methods as they caused multiple instances of an effect to be created each frame. 52 | - [FEATURE] Added ability to use easing functions from `instance.EASING`. 53 | - [FEATURE] Finished zoomTo functionality but started work on shake again. 54 | 55 | ## 0.0.2 / 2020-02-24 56 | - [FEATURE] Finished shake functionality. 57 | - [FEATURE] Added an effects class to keep track of shared properties between effects. 58 | 59 | ## 0.0.1 / 2020-02-22 60 | - [FEATURE] Added camera class to manage effects more easily. 61 | 62 | ## 0.0.1 / 2020-02-21 63 | - Initial commit 64 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Robert Corponoi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | 5 |

Pixi Game Camera

6 | 7 |

A flexible and non-opinionated way to add camera effects to your PIXI application via containers.

8 | 9 |

10 | 11 | [![NPM version](https://img.shields.io/npm/v/pixi-game-camera.svg?style=flat)](https://www.npmjs.com/package/pixi-game-camera) 12 | [![Known Vulnerabilities](https://snyk.io/test/github/robertcorponoi/pixi-game-camera/badge.svg)](https://snyk.io/test/github/robertcorponoi/pixi-game-camera) 13 | ![npm](https://img.shields.io/npm/dt/pixi-game-camera) 14 | [![NPM downloads](https://img.shields.io/npm/dm/pixi-game-camera.svg?style=flat)](https://www.npmjs.com/package/pixi-game-camera) 15 | issues 16 | license 17 | [![Gitter](https://badges.gitter.im/gitterHQ/gitter.svg)](https://gitter.im/robertcorponoi) 18 | 19 |
20 | 21 | `pixi-game-camera` allows you to apply camera effects to any PIXI Container without requiring you to use PIXI in any certain way. PIXI is not bundled with this package resulting in a small file size but it also means that some effects need you to pass PIXI components to them. 22 | 23 | **Table of Contents** 24 | 25 | - [Installation](#installation) 26 | - [Importing](#importing) 27 | - [Effects](#effects) 28 | - [Shake](#shake) 29 | - [ZoomTo](#zoomto) 30 | - [PanTo](#panto) 31 | - [Fade](#fade) 32 | - [Rotate](#rotate) 33 | - [Creating Your Own Effects](#creating-your-own-effects) 34 | - [Tests](#tests) 35 | 36 | ## **Installation** 37 | 38 | To install pixi-game-camera, use: 39 | 40 | ```bash 41 | $ npm install pixi-game-camera 42 | ``` 43 | 44 | or you can use the script from unpkg like so: 45 | 46 | ```html 47 | 48 | ``` 49 | 50 | ## **Importing** 51 | 52 | Each part and effect of `pixi-game-camera` is exported on its own so you can import just the effects you need. Below is an example of importing all parts (so far) of `pixi-game-camera`: 53 | 54 | ```js 55 | import { 56 | Fade, 57 | PanTo, 58 | Shake, 59 | Rotate, 60 | ZoomTo, 61 | Camera, 62 | } from './pixi-game-camera.js'; 63 | ``` 64 | 65 | The `Camera` object is necessary to be instantiated in order to use the effects so the first thing you would do is initialize that: 66 | 67 | ```js 68 | const camera = new Camera(); 69 | ``` 70 | 71 | When initializing `pixi-game-camera`, you can also pass in the following options: 72 | 73 | 74 | | param | type | description | default | 75 | |---------|--------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------| 76 | | ticker | PIXI.Ticker | A reference to the PIXI ticker if it's being used. If you are not using the ticker and instead just using a custom loop with requestAnimationFrame then the app will call its own internal game loop and remove it as necessary to run the camera effects. | | 77 | 78 | **Example:** 79 | 80 | ```js 81 | // 1. Using PIXI ticker from a basic setup. 82 | const app = new PIXI.Application({ width: 500, height: 300 }); 83 | 84 | const options = { 85 | ticker: app.ticker 86 | }; 87 | 88 | const camera = new Camera(options); 89 | 90 | // 2. Using requestAnimationFrame. 91 | const renderer = new PIXI.Renderer({ width: 500, height: 300 }); 92 | 93 | const camera = new Camera(); 94 | ``` 95 | 96 | ## **Effects** 97 | 98 | Once you've created a camera, you can use the following effects. Each effect has to be initialized with its properties before it can be passed to the camera to be used. All of the effects assume a camera has been made with the name of `camera`. 99 | 100 | **Note:** Some of the effects can take an easing function as their last parameter. To keep file size low, only a default linear ease has been included to be used when no easing function is passed to these effects. If you would like to use a different easing function you can pass in any function that takes a single number as a parameter such as the easings from [d3-ease](https://github.com/d3/d3-ease) or from [easings.net](https://easings.net/). Also note that the effects will affect timing and `pixi-game-camera` will do its best to make sure that the effect finishes at the specified duration but easings like bounce can affect the accuracy of that. 101 | 102 | ### **Shake** 103 | 104 | Causes the container to shake for a specified amount of time and for a certain duration. 105 | 106 | | param | type | description | default | 107 | |------------|-----------------|------------------------------------------------------------------------|----------| 108 | | container | PIXI.Container | The container to apply the shake effect to. | | 109 | | intensity | number | The intensity of the shake with 1 being lowest and 10 being highest. | 5 | 110 | | duration | number | The amount of time, in milliseconds, that this effect should last for. | Infinity | 111 | 112 | **example:** 113 | 114 | ```js 115 | // Shake the main container at an intensity of 3 for 5 seconds. 116 | const mildShake = new Shake(app.stage, 3, 5000); 117 | camera.effect(mildShake); 118 | 119 | // Shake a sub container at an intensity of 10 for 2 seconds. 120 | const intenseShake = new Shake(container2, 10, 2000); 121 | camera.effect(intenseShake); 122 | ``` 123 | 124 | ### **ZoomTo** 125 | 126 | Zooms in or out on a container with an optional easing. 127 | 128 | | param | type | description | default | 129 | |------------|----------|---------------------------------------------------------------------------------------------------------------------------|------------| 130 | | container | PIXI.Container | The container to apply the zoom effect to. | | 131 | | xZoomLevel | number | The zoom level to zoom horizontally with values larger than 1 being zoomed in and values smaller than 1 being zoomed out. | | 132 | | yZoomLevel | number | The zoom level to zoom vertically with values larger than 1 being zoomed in and values smaller than 1 being zoomed out. | | 133 | | duration | number | The amount of time it should take for the zoom to complete. | | 134 | | easing | Function | The easing function to apply to the zoom. | easeLinear | 135 | 136 | **example:** 137 | 138 | ```js 139 | // Zoom in on the container at 2x over 5 seconds with the default linear ease. 140 | const zoomIn = new ZoomTo(app.stage, 2, 2, 5000); 141 | camera.effect(zoomIn); 142 | 143 | // Zoom in at 2x horizontally and 1.5x vertically over 3 seconds with a bouncing effect. 144 | import { easeBounceIn } from 'd3-ease'; 145 | 146 | const zoomMixed = new ZoomTo(app.stage 2, 1.5, 3000, easeBounceIn); 147 | camera.effect(zoomMixed); 148 | ``` 149 | 150 | ### **PanTo** 151 | 152 | Pans to a specific location on the container with an optional easing. 153 | 154 | | param | type | description | default | 155 | |-----------|----------------|------------------------------------------------------------|------------| 156 | | container | PIXI.Container | The container to apply the PanTo effect to. | | 157 | | x | number | The x coordinate of the location to pan to. | | 158 | | y | number | The y coordinate of the location to pan to. | | 159 | | duration | number | The amount of time it should take for the pan to complete. | | 160 | | easing | Function | The easing function to apply to the pan. | easeLinear | 161 | 162 | **example:** 163 | 164 | ```js 165 | // Pan to (200, 250) over 5 seconds. 166 | const panToCenter = new PanTo(app.stage, 200, 250, 5000); 167 | camera.effect(panToCenter); 168 | 169 | // Pan to (1050, 870) over 3 seconds with a cubic easing. 170 | import { easeCubicIn } from 'd3-ease'; 171 | 172 | const panToBottomRight = new PanTo(1050, 870, 3000, easeCubicIn); 173 | camera.effect(panToBottomRight); 174 | ``` 175 | 176 | ### **Fade** 177 | 178 | Fades in or out to a specified opacity of a color with an optional easing. This effect requires a `PIXI.Sprite` with a white texture to be passed to it. 179 | 180 | | param | type | description | default | 181 | |-----------|----------------|----------------------------------------------------------------------------|------------| 182 | | container | PIXI.Container | The container to apply the fade effect to. | | 183 | | sprite | PIXI.Sprite | The sprite with a white texture to be used for the fade effect | | 184 | | color | number | The hex of the color to fade in or out of. | | 185 | | opacity | number | The opacity to fade to with 1 being fully to the color and 0 being opaque. | | 186 | | duration | number | The amount of time it should take for the fade to complete. | | 187 | | easing | Function | The easing function to apply to the fade. | easeLinear | 188 | 189 | **example:** 190 | 191 | ```js 192 | // Fade to black over 5 seconds with the default linear easing. 193 | const fadeToBlack = new FadeTo(app.stage, new PIXI.Sprite(PIXI.Texture.WHITE), 0x000000, 1, 5000); 194 | camera.effect(fadeToBlack); 195 | 196 | // Fade to mostly blue over 3 seconds with a cubic easing. 197 | import { easeCubicIn } from 'd3-ease'; 198 | 199 | const fadeToBlue = new FadeTo(app.stage, new PIXI.Sprite(PIXI.Texture.WHITE), 0x337ab7, 0.7, 3000, easeCubicIn); 200 | camera.effect(fadeToBlue); 201 | ``` 202 | 203 | ### **rotate** 204 | 205 | Rotates to a specified angle with an optional easing. 206 | 207 | | param | type | description | default | 208 | |----------|----------|----------------------------------------------------------------------------------------------------------------------------------|------------| 209 | | container | PIXI.Container | The container to apply the rotate effect to. | | 210 | | angle | number | The angle to rotate to, from 0 to 360 with 0 being the default state and 360 being all the way around back to the default state. | | 211 | | duration | number | The amount of time it should take for the rotation to complete. | | 212 | | easing | Function | The easing function to apply to the rotation. | easeLinear | 213 | 214 | **example:** 215 | 216 | ```js 217 | // Rotate to 45 degrees in 3 seconds with the default linear easing. 218 | const rotate45Deg = new Rotate(app.stage, 45, 3000); 219 | camera.effect(rotate45Deg); 220 | 221 | // Rotate to 365 degrees in 5 seconds with a cubic easing. 222 | import { easeCubicIn } from 'd3-ease'; 223 | 224 | const rotate365Deg = new Rotate(app.stage, 365, 5000, easeCubicIn); 225 | camera.effect(rotate365Deg); 226 | ``` 227 | 228 | ## **Creating Your Own Effects** 229 | 230 | Creating your own effects can be done by extending the `Effect` abstract class. Let's go through the step-by-step process of creating an effect that shakes the camera (essentially going over how the `Shake` method is created). 231 | 232 | 1. First, you have to import the `Effect` module and extend your class with it like so: 233 | 234 | ```ts 235 | import { Effect } from 'pixi-game-camera'; 236 | 237 | export class MyCustomShake extends Effect { 238 | } 239 | ``` 240 | 241 | 2. Let's see the values we need for this effect. 242 | 243 | We need the following private variables to keep track of the animation: 244 | 245 | - The intensity of the shake, from a scale of 1-10. 246 | - The initial pivot of the container so we can reset the pivot after the shake effect is complete. 247 | 248 | The reference to the container and other time keeping properties are handld by the `Effect` parent class. 249 | 250 | Now as far as user input, we need the following things: 251 | 252 | - The container to apply the shake effect to. 253 | - The intensity of the shake effect. 254 | - The length of time the shake effect should last for. 255 | 256 | So now let's see what our custom effect class looks like now: 257 | 258 | ```ts 259 | /** 260 | * A Shake effect involves shaking the camera at various amounts up to a sepcified intensity. 261 | */ 262 | export class MyCustomShake extends Effect { 263 | /** 264 | * The intensity of the shake, from 1-10. 265 | * 266 | * @private 267 | * 268 | * @property {number} 269 | * 270 | * @default 5 271 | */ 272 | private _intensity = 5; 273 | 274 | /** 275 | * A reference to the initial pivot of the container. 276 | * 277 | * @private 278 | * 279 | * @property {Vector} 280 | */ 281 | private _initialPivot: Vector; 282 | 283 | /** 284 | * @param {Container} container A reference to the container to apply the shake effect to. 285 | * @param {number} intensity The intensity of the shake, from a scale of 1 to 10. 286 | * @param {number} duration The duration of the shake effect. 287 | */ 288 | constructor(container: PIXI.Container, intensity: number, duration: number) { 289 | super(container); 290 | 291 | this._intensity = intensity; 292 | this.duration = duration; 293 | this._initialPivot = { x: this.container.pivot.x, y: this.container.pivot.y }; 294 | 295 | this.started = performance.now(); 296 | } 297 | } 298 | ``` 299 | 300 | What we do above is keep track of the intensity and duration like we discussed earlier and also set the `started` property that's on the Effect class to the current time. 301 | 302 | 3. Next we need to override the `update` and `criteriaMet` abstract methods of the `Effect` class. 303 | 304 | The `update` method is called every frame and it'll check to see if the effect is complete and if so it dispatches the `finished` signal which is used by the Effect class to cancel the game loop. If the effect is not finished then we need to specify what needs to be done this frame. 305 | 306 | The `criteraMet` method has to return a boolean which represents whether the effect has finished or not. 307 | 308 | For our example, we'll use the `update` method to check if the effect is complete and if so we reset the container's pivot and dispatch the `finished` signal. Otherwise, we pick a random value to apply to the container's pivot to create a shaking effect and then if a `PIXI.Ticker` isn't being used we have to call `requestAnimationFrame` on `update` again to keep the shake effect going. The `criteriaMet` method simply checks to see if the current time - the time we started the effect at, which exists on the Effect class, is greater than or equal to the desired effect duration which would indicate that the effect is complete. 309 | 310 | ```ts 311 | /** 312 | * Updates the status of the shake. 313 | */ 314 | update() { 315 | if (this.criteriaMet()) { 316 | this.container.pivot.x = this._initialPivot.x; 317 | this.container.pivot.y = this._initialPivot.y; 318 | 319 | this.finished.dispatch(); 320 | return; 321 | } 322 | 323 | this.current = performance.now(); 324 | 325 | const dx = Math.random() * this._intensity; 326 | const dy = Math.random() * this._intensity; 327 | 328 | this.container.pivot.x = dx; 329 | this.container.pivot.y = dy; 330 | 331 | if (this.useRAF) this.id = requestAnimationFrame(() => this.update()); 332 | } 333 | 334 | /** 335 | * Checks to see if the shake effect is done. 336 | * 337 | * @returns {boolean} Returns true if the shake effect is done or not. 338 | */ 339 | criteriaMet(): boolean { 340 | if (this.current - this.started >= this.duration) return true; 341 | return false; 342 | } 343 | ``` 344 | 345 | Lastly we just create an instance of our effect and add it to the camera: 346 | 347 | ```ts 348 | const customShake = new MyCustomShake(app.stage, 5, 5000); 349 | camera.effect(customShake); 350 | ``` 351 | 352 | That's it! The Effect class will handle the logic of the game loop and what not. If you would like a more complex example that involves easing just check out the `Rotate` or `ZoomTo` effect which will look largely similar to this example but a bit more complicated. All of the effects have a similar structure which makes it easy to understand effects and create new ones. 353 | 354 | If you create any cool effects make sure to create a pull request and I'll gladly add them. 355 | 356 | ## **Tests** 357 | 358 | The tests for `pixi-game-camera` are browser based so to run them you need to first run: 359 | 360 | ```bash 361 | $ npm run test 362 | ``` 363 | 364 | Which starts up a local server at `localhost:3000` and if you navigate to it you can see all of the effects being tested. 365 | 366 | ## **License** 367 | 368 | MIT -------------------------------------------------------------------------------- /lib/@types/@pixi__core/index.d.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbXX0= -------------------------------------------------------------------------------- /lib/@types/@pixi__display/index.d.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbXX0= -------------------------------------------------------------------------------- /lib/@types/@pixi__sprite/index.d.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbXX0= -------------------------------------------------------------------------------- /lib/@types/@pixi__ticker/index.d.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbXX0= -------------------------------------------------------------------------------- /lib/Options.d.ts: -------------------------------------------------------------------------------- 1 | import { Ticker } from '@pixi/ticker'; 2 | /** 3 | * A reference to the options passed to camera-pixi on initialization. 4 | */ 5 | export declare class Options { 6 | /** 7 | * If you want to use an existing PIXI.Ticker instance then you can pass it 8 | * here. If a ticker is not provided, `requestAnimationFrame` will be used 9 | * in its stead. 10 | * 11 | * @property {Ticker} 12 | */ 13 | ticker?: Ticker; 14 | /** 15 | * @param {Object} [options] The options passed to Camera on initialization. 16 | * @param {Ticker} [ticker] An instance of PIXI.Ticker to be used instead of the default `requestAnimationFrame`. 17 | */ 18 | constructor(options?: Object); 19 | } 20 | -------------------------------------------------------------------------------- /lib/Options.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.Options = void 0; 7 | 8 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 9 | 10 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 11 | 12 | /** 13 | * A reference to the options passed to camera-pixi on initialization. 14 | */ 15 | var Options = 16 | /** 17 | * If you want to use an existing PIXI.Ticker instance then you can pass it 18 | * here. If a ticker is not provided, `requestAnimationFrame` will be used 19 | * in its stead. 20 | * 21 | * @property {Ticker} 22 | */ 23 | 24 | /** 25 | * @param {Object} [options] The options passed to Camera on initialization. 26 | * @param {Ticker} [ticker] An instance of PIXI.Ticker to be used instead of the default `requestAnimationFrame`. 27 | */ 28 | function Options() { 29 | var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; 30 | 31 | _classCallCheck(this, Options); 32 | 33 | _defineProperty(this, "ticker", void 0); 34 | 35 | Object.assign(this, options); 36 | }; 37 | 38 | exports.Options = Options; 39 | //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9vcHRpb25zLnRzIl0sIm5hbWVzIjpbIk9wdGlvbnMiLCJvcHRpb25zIiwiT2JqZWN0IiwiYXNzaWduIl0sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7QUFJQTtBQUNBO0FBQ0E7SUFDYUEsTztBQUNYO0FBQ0Y7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQUdFO0FBQ0Y7QUFDQTtBQUNBO0FBQ0UsbUJBQWtDO0FBQUEsTUFBdEJDLE9BQXNCLHVFQUFKLEVBQUk7O0FBQUE7O0FBQUE7O0FBQ2hDQyxFQUFBQSxNQUFNLENBQUNDLE1BQVAsQ0FBYyxJQUFkLEVBQW9CRixPQUFwQjtBQUNELEMiLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIHN0cmljdCdcclxuXHJcbmltcG9ydCB7IFRpY2tlciB9IGZyb20gJ0BwaXhpL3RpY2tlcic7XHJcblxyXG4vKipcclxuICogQSByZWZlcmVuY2UgdG8gdGhlIG9wdGlvbnMgcGFzc2VkIHRvIGNhbWVyYS1waXhpIG9uIGluaXRpYWxpemF0aW9uLlxyXG4gKi9cclxuZXhwb3J0IGNsYXNzIE9wdGlvbnMge1xyXG4gIC8qKlxyXG4gICAqIElmIHlvdSB3YW50IHRvIHVzZSBhbiBleGlzdGluZyBQSVhJLlRpY2tlciBpbnN0YW5jZSB0aGVuIHlvdSBjYW4gcGFzcyBpdFxyXG4gICAqIGhlcmUuIElmIGEgdGlja2VyIGlzIG5vdCBwcm92aWRlZCwgYHJlcXVlc3RBbmltYXRpb25GcmFtZWAgd2lsbCBiZSB1c2VkXHJcbiAgICogaW4gaXRzIHN0ZWFkLlxyXG4gICAqIFxyXG4gICAqIEBwcm9wZXJ0eSB7VGlja2VyfVxyXG4gICAqL1xyXG4gIHRpY2tlcj86IFRpY2tlcjtcclxuXHJcbiAgLyoqXHJcbiAgICogQHBhcmFtIHtPYmplY3R9IFtvcHRpb25zXSBUaGUgb3B0aW9ucyBwYXNzZWQgdG8gQ2FtZXJhIG9uIGluaXRpYWxpemF0aW9uLlxyXG4gICAqIEBwYXJhbSB7VGlja2VyfSBbdGlja2VyXSBBbiBpbnN0YW5jZSBvZiBQSVhJLlRpY2tlciB0byBiZSB1c2VkIGluc3RlYWQgb2YgdGhlIGRlZmF1bHQgYHJlcXVlc3RBbmltYXRpb25GcmFtZWAuXHJcbiAgICovXHJcbiAgY29uc3RydWN0b3Iob3B0aW9uczogT2JqZWN0ID0ge30pIHtcclxuICAgIE9iamVjdC5hc3NpZ24odGhpcywgb3B0aW9ucyk7XHJcbiAgfVxyXG59Il19 -------------------------------------------------------------------------------- /lib/Vector.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Defines the structure of an object that acts as a (x, y) definition. 3 | */ 4 | export interface Vector { 5 | x: number; 6 | y: number; 7 | } 8 | -------------------------------------------------------------------------------- /lib/Vector.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | /** 3 | * Defines the structure of an object that acts as a (x, y) definition. 4 | */ 5 | //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy92ZWN0b3IudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUFFQTtBQUNBO0FBQ0EiLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIHN0cmljdCdcclxuXHJcbi8qKlxyXG4gKiBEZWZpbmVzIHRoZSBzdHJ1Y3R1cmUgb2YgYW4gb2JqZWN0IHRoYXQgYWN0cyBhcyBhICh4LCB5KSBkZWZpbml0aW9uLlxyXG4gKi9cclxuZXhwb3J0IGludGVyZmFjZSBWZWN0b3Ige1xyXG4gIC8vIFRoZSB4IHZhbHVlIG9mIHRoZSB2ZWN0b3IuXHJcbiAgeDogbnVtYmVyO1xyXG4gIC8vIFRoZSB5IHZhbHVlIG9mIHRoZSB2ZWN0b3IuXHJcbiAgeTogbnVtYmVyO1xyXG59Il19 -------------------------------------------------------------------------------- /lib/camera.d.ts: -------------------------------------------------------------------------------- 1 | import { Effect } from './effects/effect'; 2 | /** 3 | * Camera that can be applied to a game/animation made with pixijs. 4 | */ 5 | export declare class Camera { 6 | /** 7 | * A reference to the options passed to camera pixi on initialization. 8 | * 9 | * @private 10 | * 11 | * @private {Options} 12 | */ 13 | private _options; 14 | /** 15 | * A reference to the PIXI Ticker, if it's being used. 16 | * 17 | * @private 18 | * 19 | * @property {Ticker} 20 | */ 21 | private _ticker?; 22 | /** 23 | * @param {Ticker} [options] A reference to the PIXI Ticker, if it's being used. 24 | */ 25 | constructor(options?: Object); 26 | /** 27 | * Runs a provided effect. 28 | * 29 | * @param {Effect} effect The instance of the effect to run. 30 | */ 31 | effect(effect: Effect): void; 32 | /** 33 | * Adds an effect to the PIXI Ticker if it's being used and removes it when necessary. 34 | * 35 | * @private 36 | * 37 | * @param {Effect} effect The effect to add to the Ticker. 38 | */ 39 | private _addToTicker; 40 | } 41 | -------------------------------------------------------------------------------- /lib/camera.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.Camera = void 0; 7 | 8 | var _ticker = require("@pixi/ticker"); 9 | 10 | var _options = require("./options"); 11 | 12 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 13 | 14 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } 15 | 16 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } 17 | 18 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 19 | 20 | /** 21 | * Camera that can be applied to a game/animation made with pixijs. 22 | */ 23 | var Camera = /*#__PURE__*/function () { 24 | /** 25 | * A reference to the options passed to camera pixi on initialization. 26 | * 27 | * @private 28 | * 29 | * @private {Options} 30 | */ 31 | 32 | /** 33 | * A reference to the PIXI Ticker, if it's being used. 34 | * 35 | * @private 36 | * 37 | * @property {Ticker} 38 | */ 39 | 40 | /** 41 | * @param {Ticker} [options] A reference to the PIXI Ticker, if it's being used. 42 | */ 43 | function Camera(options) { 44 | _classCallCheck(this, Camera); 45 | 46 | _defineProperty(this, "_options", void 0); 47 | 48 | _defineProperty(this, "_ticker", void 0); 49 | 50 | this._options = new _options.Options(options); 51 | if (this._options.ticker) this._ticker = this._options.ticker; 52 | } 53 | /** 54 | * Runs a provided effect. 55 | * 56 | * @param {Effect} effect The instance of the effect to run. 57 | */ 58 | 59 | 60 | _createClass(Camera, [{ 61 | key: "effect", 62 | value: function effect(_effect) { 63 | this._addToTicker(_effect); 64 | } 65 | /** 66 | * Adds an effect to the PIXI Ticker if it's being used and removes it when necessary. 67 | * 68 | * @private 69 | * 70 | * @param {Effect} effect The effect to add to the Ticker. 71 | */ 72 | 73 | }, { 74 | key: "_addToTicker", 75 | value: function _addToTicker(effect) { 76 | var _this = this; 77 | 78 | var effectBound = effect.update.bind(effect); 79 | 80 | if (this._ticker) { 81 | var _this$_ticker2; 82 | 83 | effect.finished.add(function () { 84 | var _this$_ticker; 85 | 86 | return (_this$_ticker = _this._ticker) === null || _this$_ticker === void 0 ? void 0 : _this$_ticker.remove(effectBound, _this); 87 | }); 88 | (_this$_ticker2 = this._ticker) === null || _this$_ticker2 === void 0 ? void 0 : _this$_ticker2.add(effectBound, this, _ticker.UPDATE_PRIORITY.NORMAL); 89 | } else effect.start(); 90 | } 91 | }]); 92 | 93 | return Camera; 94 | }(); 95 | 96 | exports.Camera = Camera; 97 | //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9jYW1lcmEudHMiXSwibmFtZXMiOlsiQ2FtZXJhIiwib3B0aW9ucyIsIl9vcHRpb25zIiwiT3B0aW9ucyIsInRpY2tlciIsIl90aWNrZXIiLCJlZmZlY3QiLCJfYWRkVG9UaWNrZXIiLCJlZmZlY3RCb3VuZCIsInVwZGF0ZSIsImJpbmQiLCJmaW5pc2hlZCIsImFkZCIsInJlbW92ZSIsIlVQREFURV9QUklPUklUWSIsIk5PUk1BTCIsInN0YXJ0Il0sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7OztBQUVBOztBQUNBOzs7Ozs7Ozs7O0FBR0E7QUFDQTtBQUNBO0lBQ2FBLE07QUFDWDtBQUNGO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTs7QUFHRTtBQUNGO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTs7QUFHRTtBQUNGO0FBQ0E7QUFDRSxrQkFBWUMsT0FBWixFQUE4QjtBQUFBOztBQUFBOztBQUFBOztBQUM1QixTQUFLQyxRQUFMLEdBQWdCLElBQUlDLGdCQUFKLENBQVlGLE9BQVosQ0FBaEI7QUFDQSxRQUFJLEtBQUtDLFFBQUwsQ0FBY0UsTUFBbEIsRUFBMEIsS0FBS0MsT0FBTCxHQUFlLEtBQUtILFFBQUwsQ0FBY0UsTUFBN0I7QUFDM0I7QUFFRDtBQUNGO0FBQ0E7QUFDQTtBQUNBOzs7OztXQUNFLGdCQUFPRSxPQUFQLEVBQXVCO0FBQ3JCLFdBQUtDLFlBQUwsQ0FBa0JELE9BQWxCO0FBQ0Q7QUFFRDtBQUNGO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTs7OztXQUNFLHNCQUFxQkEsTUFBckIsRUFBcUM7QUFBQTs7QUFDbkMsVUFBTUUsV0FBVyxHQUFHRixNQUFNLENBQUNHLE1BQVAsQ0FBY0MsSUFBZCxDQUFtQkosTUFBbkIsQ0FBcEI7O0FBRUEsVUFBSSxLQUFLRCxPQUFULEVBQWtCO0FBQUE7O0FBQ2hCQyxRQUFBQSxNQUFNLENBQUNLLFFBQVAsQ0FBZ0JDLEdBQWhCLENBQW9CO0FBQUE7O0FBQUEsa0NBQU0sS0FBSSxDQUFDUCxPQUFYLGtEQUFNLGNBQWNRLE1BQWQsQ0FBcUJMLFdBQXJCLEVBQWtDLEtBQWxDLENBQU47QUFBQSxTQUFwQjtBQUNBLCtCQUFLSCxPQUFMLGtFQUFjTyxHQUFkLENBQWtCSixXQUFsQixFQUErQixJQUEvQixFQUFxQ00sd0JBQWdCQyxNQUFyRDtBQUNELE9BSEQsTUFHT1QsTUFBTSxDQUFDVSxLQUFQO0FBQ1IiLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIHN0cmljdCdcclxuXHJcbmltcG9ydCB7IFRpY2tlciwgVVBEQVRFX1BSSU9SSVRZIH0gZnJvbSAnQHBpeGkvdGlja2VyJztcclxuaW1wb3J0IHsgT3B0aW9ucyB9IGZyb20gJy4vb3B0aW9ucyc7XHJcbmltcG9ydCB7IEVmZmVjdCB9IGZyb20gJy4vZWZmZWN0cy9lZmZlY3QnO1xyXG5cclxuLyoqXHJcbiAqIENhbWVyYSB0aGF0IGNhbiBiZSBhcHBsaWVkIHRvIGEgZ2FtZS9hbmltYXRpb24gbWFkZSB3aXRoIHBpeGlqcy5cclxuICovXHJcbmV4cG9ydCBjbGFzcyBDYW1lcmEge1xyXG4gIC8qKlxyXG4gICAqIEEgcmVmZXJlbmNlIHRvIHRoZSBvcHRpb25zIHBhc3NlZCB0byBjYW1lcmEgcGl4aSBvbiBpbml0aWFsaXphdGlvbi5cclxuICAgKiBcclxuICAgKiBAcHJpdmF0ZVxyXG4gICAqIFxyXG4gICAqIEBwcml2YXRlIHtPcHRpb25zfVxyXG4gICAqL1xyXG4gIHByaXZhdGUgX29wdGlvbnM6IE9wdGlvbnM7XHJcblxyXG4gIC8qKlxyXG4gICAqIEEgcmVmZXJlbmNlIHRvIHRoZSBQSVhJIFRpY2tlciwgaWYgaXQncyBiZWluZyB1c2VkLlxyXG4gICAqIFxyXG4gICAqIEBwcml2YXRlXHJcbiAgICogXHJcbiAgICogQHByb3BlcnR5IHtUaWNrZXJ9XHJcbiAgICovXHJcbiAgcHJpdmF0ZSBfdGlja2VyPzogVGlja2VyO1xyXG5cclxuICAvKipcclxuICAgKiBAcGFyYW0ge1RpY2tlcn0gW29wdGlvbnNdIEEgcmVmZXJlbmNlIHRvIHRoZSBQSVhJIFRpY2tlciwgaWYgaXQncyBiZWluZyB1c2VkLlxyXG4gICAqL1xyXG4gIGNvbnN0cnVjdG9yKG9wdGlvbnM/OiBPYmplY3QpIHtcclxuICAgIHRoaXMuX29wdGlvbnMgPSBuZXcgT3B0aW9ucyhvcHRpb25zKTtcclxuICAgIGlmICh0aGlzLl9vcHRpb25zLnRpY2tlcikgdGhpcy5fdGlja2VyID0gdGhpcy5fb3B0aW9ucy50aWNrZXI7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBSdW5zIGEgcHJvdmlkZWQgZWZmZWN0LlxyXG4gICAqIFxyXG4gICAqIEBwYXJhbSB7RWZmZWN0fSBlZmZlY3QgVGhlIGluc3RhbmNlIG9mIHRoZSBlZmZlY3QgdG8gcnVuLlxyXG4gICAqL1xyXG4gIGVmZmVjdChlZmZlY3Q6IEVmZmVjdCkge1xyXG4gICAgdGhpcy5fYWRkVG9UaWNrZXIoZWZmZWN0KTtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIEFkZHMgYW4gZWZmZWN0IHRvIHRoZSBQSVhJIFRpY2tlciBpZiBpdCdzIGJlaW5nIHVzZWQgYW5kIHJlbW92ZXMgaXQgd2hlbiBuZWNlc3NhcnkuXHJcbiAgICogXHJcbiAgICogQHByaXZhdGVcclxuICAgKiBcclxuICAgKiBAcGFyYW0ge0VmZmVjdH0gZWZmZWN0IFRoZSBlZmZlY3QgdG8gYWRkIHRvIHRoZSBUaWNrZXIuXHJcbiAgICovXHJcbiAgcHJpdmF0ZSBfYWRkVG9UaWNrZXIoZWZmZWN0OiBFZmZlY3QpIHtcclxuICAgIGNvbnN0IGVmZmVjdEJvdW5kID0gZWZmZWN0LnVwZGF0ZS5iaW5kKGVmZmVjdCk7XHJcblxyXG4gICAgaWYgKHRoaXMuX3RpY2tlcikge1xyXG4gICAgICBlZmZlY3QuZmluaXNoZWQuYWRkKCgpID0+IHRoaXMuX3RpY2tlcj8ucmVtb3ZlKGVmZmVjdEJvdW5kLCB0aGlzKSk7XHJcbiAgICAgIHRoaXMuX3RpY2tlcj8uYWRkKGVmZmVjdEJvdW5kLCB0aGlzLCBVUERBVEVfUFJJT1JJVFkuTk9STUFMKTtcclxuICAgIH0gZWxzZSBlZmZlY3Quc3RhcnQoKTtcclxuICB9XHJcbn1cclxuIl19 -------------------------------------------------------------------------------- /lib/effects/Effect.d.ts: -------------------------------------------------------------------------------- 1 | import { Container } from '@pixi/display'; 2 | import Hypergiant from 'hypergiant'; 3 | /** 4 | * A generic object that contains the properties and methods of all effects. 5 | */ 6 | export declare abstract class Effect { 7 | /** 8 | * The container that the effect is happening on. 9 | * 10 | * @property {Container} 11 | */ 12 | container: Container; 13 | /** 14 | * The duration of thie effect. 15 | * 16 | * @private 17 | * 18 | * @property {number} 19 | * 20 | * @default 0 21 | */ 22 | duration: number; 23 | /** 24 | * A timestamp of when this effect was started. 25 | * 26 | * @property {DOMHighResTimeStamp} 27 | * 28 | * @default 0; 29 | */ 30 | started: number; 31 | /** 32 | * A timestamp of when this effect was last run. 33 | * 34 | * @property {DOMHighResTimeStamp} 35 | * 36 | * @default 0 37 | */ 38 | current: number; 39 | /** 40 | * A reference to the singal that is dispatched when this effect is finished. 41 | * 42 | * @property {Hypergiant} 43 | */ 44 | finished: Hypergiant; 45 | /** 46 | * Indicates whether requestAnimationFrame is being used or not. 47 | * 48 | * @property {boolean} 49 | * 50 | * @default false 51 | */ 52 | useRAF: boolean; 53 | /** 54 | * A reference to the requestAnimationFrame id if RAF is being used. 55 | * 56 | * @property {number} 57 | */ 58 | id?: number; 59 | /** 60 | * @param {Container} container The container that the effect is happening on. 61 | */ 62 | constructor(container: Container); 63 | /** 64 | * Starts the requestAnimationFrame loop to use this effect if a Ticker is not provided. 65 | */ 66 | start(): void; 67 | /** 68 | * The default ease-linear easing function used if no easing function is provided. 69 | * 70 | * @param {number} t The percent we are currently through the animation. 71 | */ 72 | easeLinear(t: number): number; 73 | /** 74 | * Updates the effect frame by frame. 75 | * 76 | * @param {number} [delta] The delta value passed by the game loop. 77 | */ 78 | abstract update(delta?: number): void; 79 | /** 80 | * Checks to see if the effect has been achieved. 81 | * 82 | * @returns {boolean} Returns true if the effect is complete or false otherwise. 83 | */ 84 | abstract criteriaMet?(): boolean; 85 | } 86 | -------------------------------------------------------------------------------- /lib/effects/Effect.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | exports.Effect = void 0; 7 | 8 | var _hypergiant = _interopRequireDefault(require("hypergiant")); 9 | 10 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } 11 | 12 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 13 | 14 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } 15 | 16 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } 17 | 18 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 19 | 20 | /** 21 | * A generic object that contains the properties and methods of all effects. 22 | */ 23 | var Effect = /*#__PURE__*/function () { 24 | /** 25 | * The container that the effect is happening on. 26 | * 27 | * @property {Container} 28 | */ 29 | 30 | /** 31 | * The duration of thie effect. 32 | * 33 | * @private 34 | * 35 | * @property {number} 36 | * 37 | * @default 0 38 | */ 39 | 40 | /** 41 | * A timestamp of when this effect was started. 42 | * 43 | * @property {DOMHighResTimeStamp} 44 | * 45 | * @default 0; 46 | */ 47 | 48 | /** 49 | * A timestamp of when this effect was last run. 50 | * 51 | * @property {DOMHighResTimeStamp} 52 | * 53 | * @default 0 54 | */ 55 | 56 | /** 57 | * A reference to the singal that is dispatched when this effect is finished. 58 | * 59 | * @property {Hypergiant} 60 | */ 61 | 62 | /** 63 | * Indicates whether requestAnimationFrame is being used or not. 64 | * 65 | * @property {boolean} 66 | * 67 | * @default false 68 | */ 69 | 70 | /** 71 | * A reference to the requestAnimationFrame id if RAF is being used. 72 | * 73 | * @property {number} 74 | */ 75 | 76 | /** 77 | * @param {Container} container The container that the effect is happening on. 78 | */ 79 | function Effect(container) { 80 | _classCallCheck(this, Effect); 81 | 82 | _defineProperty(this, "container", void 0); 83 | 84 | _defineProperty(this, "duration", 0); 85 | 86 | _defineProperty(this, "started", 0); 87 | 88 | _defineProperty(this, "current", 0); 89 | 90 | _defineProperty(this, "finished", new _hypergiant["default"]()); 91 | 92 | _defineProperty(this, "useRAF", false); 93 | 94 | _defineProperty(this, "id", void 0); 95 | 96 | this.container = container; 97 | this.started = performance.now(); 98 | } 99 | /** 100 | * Starts the requestAnimationFrame loop to use this effect if a Ticker is not provided. 101 | */ 102 | 103 | 104 | _createClass(Effect, [{ 105 | key: "start", 106 | value: function start() { 107 | var _this = this; 108 | 109 | this.useRAF = true; 110 | this.finished.add(function () { 111 | return cancelAnimationFrame(_this.id); 112 | }); 113 | this.update(); 114 | } 115 | /** 116 | * The default ease-linear easing function used if no easing function is provided. 117 | * 118 | * @param {number} t The percent we are currently through the animation. 119 | */ 120 | 121 | }, { 122 | key: "easeLinear", 123 | value: function easeLinear(t) { 124 | return +t; 125 | } 126 | /** 127 | * Updates the effect frame by frame. 128 | * 129 | * @param {number} [delta] The delta value passed by the game loop. 130 | */ 131 | 132 | }]); 133 | 134 | return Effect; 135 | }(); 136 | 137 | exports.Effect = Effect; 138 | //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9lZmZlY3RzL2VmZmVjdC50cyJdLCJuYW1lcyI6WyJFZmZlY3QiLCJjb250YWluZXIiLCJIeXBlcmdpYW50Iiwic3RhcnRlZCIsInBlcmZvcm1hbmNlIiwibm93IiwidXNlUkFGIiwiZmluaXNoZWQiLCJhZGQiLCJjYW5jZWxBbmltYXRpb25GcmFtZSIsImlkIiwidXBkYXRlIiwidCJdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7Ozs7QUFHQTs7Ozs7Ozs7Ozs7O0FBRUE7QUFDQTtBQUNBO0lBQ3NCQSxNO0FBQ3BCO0FBQ0Y7QUFDQTtBQUNBO0FBQ0E7O0FBR0U7QUFDRjtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQUdFO0FBQ0Y7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQUdFO0FBQ0Y7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQUdFO0FBQ0Y7QUFDQTtBQUNBO0FBQ0E7O0FBR0U7QUFDRjtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7O0FBR0U7QUFDRjtBQUNBO0FBQ0E7QUFDQTs7QUFHRTtBQUNGO0FBQ0E7QUFDRSxrQkFBWUMsU0FBWixFQUFrQztBQUFBOztBQUFBOztBQUFBLHNDQTlDdkIsQ0E4Q3VCOztBQUFBLHFDQXJDeEIsQ0FxQ3dCOztBQUFBLHFDQTVCeEIsQ0E0QndCOztBQUFBLHNDQXJCdkIsSUFBSUMsc0JBQUosRUFxQnVCOztBQUFBLG9DQVp6QixLQVl5Qjs7QUFBQTs7QUFDaEMsU0FBS0QsU0FBTCxHQUFpQkEsU0FBakI7QUFDQSxTQUFLRSxPQUFMLEdBQWVDLFdBQVcsQ0FBQ0MsR0FBWixFQUFmO0FBQ0Q7QUFFRDtBQUNGO0FBQ0E7Ozs7O1dBQ0UsaUJBQVE7QUFBQTs7QUFDTixXQUFLQyxNQUFMLEdBQWMsSUFBZDtBQUNBLFdBQUtDLFFBQUwsQ0FBY0MsR0FBZCxDQUFrQjtBQUFBLGVBQU1DLG9CQUFvQixDQUFDLEtBQUksQ0FBQ0MsRUFBTixDQUExQjtBQUFBLE9BQWxCO0FBRUEsV0FBS0MsTUFBTDtBQUNEO0FBRUQ7QUFDRjtBQUNBO0FBQ0E7QUFDQTs7OztXQUNFLG9CQUFXQyxDQUFYLEVBQXNCO0FBQ3BCLGFBQU8sQ0FBQ0EsQ0FBUjtBQUNEO0FBRUQ7QUFDRjtBQUNBO0FBQ0E7QUFDQSIsInNvdXJjZXNDb250ZW50IjpbIid1c2Ugc3RyaWN0J1xyXG5cclxuaW1wb3J0IHsgQ29udGFpbmVyIH0gZnJvbSAnQHBpeGkvZGlzcGxheSc7XHJcbmltcG9ydCBIeXBlcmdpYW50IGZyb20gJ2h5cGVyZ2lhbnQnO1xyXG5cclxuLyoqXHJcbiAqIEEgZ2VuZXJpYyBvYmplY3QgdGhhdCBjb250YWlucyB0aGUgcHJvcGVydGllcyBhbmQgbWV0aG9kcyBvZiBhbGwgZWZmZWN0cy5cclxuICovXHJcbmV4cG9ydCBhYnN0cmFjdCBjbGFzcyBFZmZlY3Qge1xyXG4gIC8qKlxyXG4gICAqIFRoZSBjb250YWluZXIgdGhhdCB0aGUgZWZmZWN0IGlzIGhhcHBlbmluZyBvbi5cclxuICAgKiBcclxuICAgKiBAcHJvcGVydHkge0NvbnRhaW5lcn1cclxuICAgKi9cclxuICBjb250YWluZXI6IENvbnRhaW5lcjtcclxuXHJcbiAgLyoqXHJcbiAgICogVGhlIGR1cmF0aW9uIG9mIHRoaWUgZWZmZWN0LlxyXG4gICAqIFxyXG4gICAqIEBwcml2YXRlXHJcbiAgICogXHJcbiAgICogQHByb3BlcnR5IHtudW1iZXJ9XHJcbiAgICogXHJcbiAgICogQGRlZmF1bHQgMFxyXG4gICAqL1xyXG4gIGR1cmF0aW9uID0gMDtcclxuXHJcbiAgLyoqXHJcbiAgICogQSB0aW1lc3RhbXAgb2Ygd2hlbiB0aGlzIGVmZmVjdCB3YXMgc3RhcnRlZC5cclxuICAgKiBcclxuICAgKiBAcHJvcGVydHkge0RPTUhpZ2hSZXNUaW1lU3RhbXB9XHJcbiAgICogXHJcbiAgICogQGRlZmF1bHQgMDtcclxuICAgKi9cclxuICBzdGFydGVkID0gMDtcclxuXHJcbiAgLyoqXHJcbiAgICogQSB0aW1lc3RhbXAgb2Ygd2hlbiB0aGlzIGVmZmVjdCB3YXMgbGFzdCBydW4uXHJcbiAgICogXHJcbiAgICogQHByb3BlcnR5IHtET01IaWdoUmVzVGltZVN0YW1wfVxyXG4gICAqIFxyXG4gICAqIEBkZWZhdWx0IDBcclxuICAgKi9cclxuICBjdXJyZW50ID0gMDtcclxuXHJcbiAgLyoqXHJcbiAgICogQSByZWZlcmVuY2UgdG8gdGhlIHNpbmdhbCB0aGF0IGlzIGRpc3BhdGNoZWQgd2hlbiB0aGlzIGVmZmVjdCBpcyBmaW5pc2hlZC5cclxuICAgKiBcclxuICAgKiBAcHJvcGVydHkge0h5cGVyZ2lhbnR9XHJcbiAgICovXHJcbiAgZmluaXNoZWQgPSBuZXcgSHlwZXJnaWFudCgpO1xyXG5cclxuICAvKipcclxuICAgKiBJbmRpY2F0ZXMgd2hldGhlciByZXF1ZXN0QW5pbWF0aW9uRnJhbWUgaXMgYmVpbmcgdXNlZCBvciBub3QuXHJcbiAgICogXHJcbiAgICogQHByb3BlcnR5IHtib29sZWFufVxyXG4gICAqIFxyXG4gICAqIEBkZWZhdWx0IGZhbHNlXHJcbiAgICovXHJcbiAgdXNlUkFGID0gZmFsc2U7XHJcblxyXG4gIC8qKlxyXG4gICAqIEEgcmVmZXJlbmNlIHRvIHRoZSByZXF1ZXN0QW5pbWF0aW9uRnJhbWUgaWQgaWYgUkFGIGlzIGJlaW5nIHVzZWQuXHJcbiAgICogXHJcbiAgICogQHByb3BlcnR5IHtudW1iZXJ9IFxyXG4gICAqL1xyXG4gIGlkPzogbnVtYmVyO1xyXG5cclxuICAvKipcclxuICAgKiBAcGFyYW0ge0NvbnRhaW5lcn0gY29udGFpbmVyIFRoZSBjb250YWluZXIgdGhhdCB0aGUgZWZmZWN0IGlzIGhhcHBlbmluZyBvbi5cclxuICAgKi9cclxuICBjb25zdHJ1Y3Rvcihjb250YWluZXI6IENvbnRhaW5lcikge1xyXG4gICAgdGhpcy5jb250YWluZXIgPSBjb250YWluZXI7XHJcbiAgICB0aGlzLnN0YXJ0ZWQgPSBwZXJmb3JtYW5jZS5ub3coKTtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIFN0YXJ0cyB0aGUgcmVxdWVzdEFuaW1hdGlvbkZyYW1lIGxvb3AgdG8gdXNlIHRoaXMgZWZmZWN0IGlmIGEgVGlja2VyIGlzIG5vdCBwcm92aWRlZC5cclxuICAgKi9cclxuICBzdGFydCgpIHtcclxuICAgIHRoaXMudXNlUkFGID0gdHJ1ZTtcclxuICAgIHRoaXMuZmluaXNoZWQuYWRkKCgpID0+IGNhbmNlbEFuaW1hdGlvbkZyYW1lKHRoaXMuaWQhKSk7XHJcblxyXG4gICAgdGhpcy51cGRhdGUoKTtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIFRoZSBkZWZhdWx0IGVhc2UtbGluZWFyIGVhc2luZyBmdW5jdGlvbiB1c2VkIGlmIG5vIGVhc2luZyBmdW5jdGlvbiBpcyBwcm92aWRlZC5cclxuICAgKiBcclxuICAgKiBAcGFyYW0ge251bWJlcn0gdCBUaGUgcGVyY2VudCB3ZSBhcmUgY3VycmVudGx5IHRocm91Z2ggdGhlIGFuaW1hdGlvbi5cclxuICAgKi9cclxuICBlYXNlTGluZWFyKHQ6IG51bWJlcikge1xyXG4gICAgcmV0dXJuICt0O1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogVXBkYXRlcyB0aGUgZWZmZWN0IGZyYW1lIGJ5IGZyYW1lLlxyXG4gICAqIFxyXG4gICAqIEBwYXJhbSB7bnVtYmVyfSBbZGVsdGFdIFRoZSBkZWx0YSB2YWx1ZSBwYXNzZWQgYnkgdGhlIGdhbWUgbG9vcC5cclxuICAgKi9cclxuICBhYnN0cmFjdCB1cGRhdGUoZGVsdGE/OiBudW1iZXIpOiB2b2lkO1xyXG5cclxuICAvKipcclxuICAgKiBDaGVja3MgdG8gc2VlIGlmIHRoZSBlZmZlY3QgaGFzIGJlZW4gYWNoaWV2ZWQuXHJcbiAgICogXHJcbiAgICogQHJldHVybnMge2Jvb2xlYW59IFJldHVybnMgdHJ1ZSBpZiB0aGUgZWZmZWN0IGlzIGNvbXBsZXRlIG9yIGZhbHNlIG90aGVyd2lzZS5cclxuICAgKi9cclxuICBhYnN0cmFjdCBjcml0ZXJpYU1ldD8oKTogYm9vbGVhbjtcclxufSJdfQ== -------------------------------------------------------------------------------- /lib/effects/Fade.d.ts: -------------------------------------------------------------------------------- 1 | import { Sprite } from '@pixi/sprite'; 2 | import { Container } from '@pixi/display'; 3 | import { Effect } from './effect'; 4 | /** 5 | * A panning effect that makes the camera focus on a point in the container. 6 | */ 7 | export declare class Fade extends Effect { 8 | /** 9 | * A reference to the camera's filter. 10 | * 11 | * @private 12 | * 13 | * @property {Sprite} 14 | */ 15 | private _filter; 16 | /** 17 | * The color to fade to. 18 | * 19 | * @private 20 | * 21 | * @property {number} 22 | */ 23 | private _color; 24 | /** 25 | * The opacity to set the filter to. 26 | * 27 | * @private 28 | * 29 | * @property {number} 30 | */ 31 | private _opacity; 32 | /** 33 | * The easing function to use. 34 | * 35 | * @private 36 | * 37 | * @property {Function} 38 | */ 39 | private _easing; 40 | /** 41 | * Indicates whether its fading in or out. 42 | * 43 | * @private 44 | * 45 | * @property {boolean} 46 | * 47 | * @default true 48 | */ 49 | private _fadeOut; 50 | /** 51 | * The initial opacity of the filter as of the start of this effect. 52 | * 53 | * @private 54 | * 55 | * @property {number} 56 | */ 57 | private _initialOpacity; 58 | /** 59 | * @param {Container} container A reference to the container to apply the fade effect to. 60 | * @param {Sprite} sprite A reference to the PIXI Sprite to use for the fade effect. 61 | * @param {number} color The hex of the color to fade to. 62 | * @param {number} duration The amount of time, in milliseconds, that the effect should take. 63 | * @param {Function} [easing] The easing function to use. 64 | */ 65 | constructor(container: Container, sprite: Sprite, color: number, opacity: number, duration: number, easing?: Function); 66 | /** 67 | * Updates the status of this effect on a frame by frame basis. 68 | */ 69 | update(): void; 70 | /** 71 | * Checks to see if the fade effect is done or not. 72 | * 73 | * @returns {boolean} Returns true if the fade effect is done or not. 74 | */ 75 | criteriaMet(): boolean; 76 | } 77 | -------------------------------------------------------------------------------- /lib/effects/Fade.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } 4 | 5 | Object.defineProperty(exports, "__esModule", { 6 | value: true 7 | }); 8 | exports.Fade = void 0; 9 | 10 | var _effect = require("./effect"); 11 | 12 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 13 | 14 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } 15 | 16 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } 17 | 18 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } 19 | 20 | function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } 21 | 22 | function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } 23 | 24 | function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } 25 | 26 | function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } 27 | 28 | function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } 29 | 30 | function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } 31 | 32 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 33 | 34 | /** 35 | * A panning effect that makes the camera focus on a point in the container. 36 | */ 37 | var Fade = /*#__PURE__*/function (_Effect) { 38 | _inherits(Fade, _Effect); 39 | 40 | var _super = _createSuper(Fade); 41 | 42 | /** 43 | * A reference to the camera's filter. 44 | * 45 | * @private 46 | * 47 | * @property {Sprite} 48 | */ 49 | 50 | /** 51 | * The color to fade to. 52 | * 53 | * @private 54 | * 55 | * @property {number} 56 | */ 57 | 58 | /** 59 | * The opacity to set the filter to. 60 | * 61 | * @private 62 | * 63 | * @property {number} 64 | */ 65 | 66 | /** 67 | * The easing function to use. 68 | * 69 | * @private 70 | * 71 | * @property {Function} 72 | */ 73 | 74 | /** 75 | * Indicates whether its fading in or out. 76 | * 77 | * @private 78 | * 79 | * @property {boolean} 80 | * 81 | * @default true 82 | */ 83 | 84 | /** 85 | * The initial opacity of the filter as of the start of this effect. 86 | * 87 | * @private 88 | * 89 | * @property {number} 90 | */ 91 | 92 | /** 93 | * @param {Container} container A reference to the container to apply the fade effect to. 94 | * @param {Sprite} sprite A reference to the PIXI Sprite to use for the fade effect. 95 | * @param {number} color The hex of the color to fade to. 96 | * @param {number} duration The amount of time, in milliseconds, that the effect should take. 97 | * @param {Function} [easing] The easing function to use. 98 | */ 99 | function Fade(container, sprite, color, opacity, duration, easing) { 100 | var _this; 101 | 102 | _classCallCheck(this, Fade); 103 | 104 | _this = _super.call(this, container); 105 | 106 | _defineProperty(_assertThisInitialized(_this), "_filter", void 0); 107 | 108 | _defineProperty(_assertThisInitialized(_this), "_color", void 0); 109 | 110 | _defineProperty(_assertThisInitialized(_this), "_opacity", void 0); 111 | 112 | _defineProperty(_assertThisInitialized(_this), "_easing", void 0); 113 | 114 | _defineProperty(_assertThisInitialized(_this), "_fadeOut", true); 115 | 116 | _defineProperty(_assertThisInitialized(_this), "_initialOpacity", void 0); 117 | 118 | _this._color = color; 119 | _this._opacity = opacity; 120 | _this.duration = duration; 121 | _this._easing = easing || _this.easeLinear; 122 | _this._filter = sprite; 123 | _this._filter.width = _this.container.width; 124 | _this._filter.height = _this.container.height; 125 | _this._filter.alpha = 0; 126 | 127 | _this.container.addChild(_this._filter); 128 | 129 | _this._filter.tint = _this._color; 130 | _this._initialOpacity = _this._filter.alpha; 131 | if (_this._filter.alpha > _this._opacity) _this._fadeOut = false; 132 | return _this; 133 | } 134 | /** 135 | * Updates the status of this effect on a frame by frame basis. 136 | */ 137 | 138 | 139 | _createClass(Fade, [{ 140 | key: "update", 141 | value: function update() { 142 | var _this2 = this; 143 | 144 | if (this.criteriaMet()) { 145 | this._filter.alpha = this._opacity; 146 | this.finished.dispatch(); 147 | return; 148 | } 149 | 150 | this.current = performance.now(); 151 | var timeDiffPercentage = (this.current - this.started) / this.duration; 152 | 153 | var percentageThroughAnimation = this._easing(timeDiffPercentage); 154 | 155 | var fadeAmount = 1 * percentageThroughAnimation; 156 | this._filter.alpha = this._fadeOut ? fadeAmount : this._initialOpacity - fadeAmount; 157 | if (this.useRAF) this.id = requestAnimationFrame(function () { 158 | return _this2.update(); 159 | }); 160 | } 161 | /** 162 | * Checks to see if the fade effect is done or not. 163 | * 164 | * @returns {boolean} Returns true if the fade effect is done or not. 165 | */ 166 | 167 | }, { 168 | key: "criteriaMet", 169 | value: function criteriaMet() { 170 | if (this._fadeOut && this._filter.alpha >= this._opacity - 0.01 || !this._fadeOut && this._filter.alpha <= this._opacity + 0.01) return true; 171 | return false; 172 | } 173 | }]); 174 | 175 | return Fade; 176 | }(_effect.Effect); 177 | 178 | exports.Fade = Fade; 179 | //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9lZmZlY3RzL2ZhZGUudHMiXSwibmFtZXMiOlsiRmFkZSIsImNvbnRhaW5lciIsInNwcml0ZSIsImNvbG9yIiwib3BhY2l0eSIsImR1cmF0aW9uIiwiZWFzaW5nIiwiX2NvbG9yIiwiX29wYWNpdHkiLCJfZWFzaW5nIiwiZWFzZUxpbmVhciIsIl9maWx0ZXIiLCJ3aWR0aCIsImhlaWdodCIsImFscGhhIiwiYWRkQ2hpbGQiLCJ0aW50IiwiX2luaXRpYWxPcGFjaXR5IiwiX2ZhZGVPdXQiLCJjcml0ZXJpYU1ldCIsImZpbmlzaGVkIiwiZGlzcGF0Y2giLCJjdXJyZW50IiwicGVyZm9ybWFuY2UiLCJub3ciLCJ0aW1lRGlmZlBlcmNlbnRhZ2UiLCJzdGFydGVkIiwicGVyY2VudGFnZVRocm91Z2hBbmltYXRpb24iLCJmYWRlQW1vdW50IiwidXNlUkFGIiwiaWQiLCJyZXF1ZXN0QW5pbWF0aW9uRnJhbWUiLCJ1cGRhdGUiLCJFZmZlY3QiXSwibWFwcGluZ3MiOiJBQUFBOzs7Ozs7Ozs7QUFLQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBRUE7QUFDQTtBQUNBO0lBQ2FBLEk7Ozs7O0FBQ1g7QUFDRjtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7O0FBR0U7QUFDRjtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7O0FBR0U7QUFDRjtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7O0FBR0U7QUFDRjtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7O0FBR0U7QUFDRjtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQUdFO0FBQ0Y7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQUdFO0FBQ0Y7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0UsZ0JBQVlDLFNBQVosRUFBa0NDLE1BQWxDLEVBQWtEQyxLQUFsRCxFQUFpRUMsT0FBakUsRUFBa0ZDLFFBQWxGLEVBQW9HQyxNQUFwRyxFQUF1SDtBQUFBOztBQUFBOztBQUNySCw4QkFBTUwsU0FBTjs7QUFEcUg7O0FBQUE7O0FBQUE7O0FBQUE7O0FBQUEsK0RBbEJwRyxJQWtCb0c7O0FBQUE7O0FBR3JILFVBQUtNLE1BQUwsR0FBY0osS0FBZDtBQUNBLFVBQUtLLFFBQUwsR0FBZ0JKLE9BQWhCO0FBQ0EsVUFBS0MsUUFBTCxHQUFnQkEsUUFBaEI7QUFDQSxVQUFLSSxPQUFMLEdBQWVILE1BQU0sSUFBSSxNQUFLSSxVQUE5QjtBQUVBLFVBQUtDLE9BQUwsR0FBZVQsTUFBZjtBQUVBLFVBQUtTLE9BQUwsQ0FBYUMsS0FBYixHQUFxQixNQUFLWCxTQUFMLENBQWVXLEtBQXBDO0FBQ0EsVUFBS0QsT0FBTCxDQUFhRSxNQUFiLEdBQXNCLE1BQUtaLFNBQUwsQ0FBZVksTUFBckM7QUFDQSxVQUFLRixPQUFMLENBQWFHLEtBQWIsR0FBcUIsQ0FBckI7O0FBRUEsVUFBS2IsU0FBTCxDQUFlYyxRQUFmLENBQXdCLE1BQUtKLE9BQTdCOztBQUVBLFVBQUtBLE9BQUwsQ0FBYUssSUFBYixHQUFvQixNQUFLVCxNQUF6QjtBQUNBLFVBQUtVLGVBQUwsR0FBdUIsTUFBS04sT0FBTCxDQUFhRyxLQUFwQztBQUVBLFFBQUksTUFBS0gsT0FBTCxDQUFhRyxLQUFiLEdBQXFCLE1BQUtOLFFBQTlCLEVBQXdDLE1BQUtVLFFBQUwsR0FBZ0IsS0FBaEI7QUFuQjZFO0FBb0J0SDtBQUVEO0FBQ0Y7QUFDQTs7Ozs7V0FDRSxrQkFBUztBQUFBOztBQUNQLFVBQUksS0FBS0MsV0FBTCxFQUFKLEVBQXdCO0FBQ3RCLGFBQUtSLE9BQUwsQ0FBYUcsS0FBYixHQUFxQixLQUFLTixRQUExQjtBQUNBLGFBQUtZLFFBQUwsQ0FBY0MsUUFBZDtBQUVBO0FBQ0Q7O0FBRUQsV0FBS0MsT0FBTCxHQUFlQyxXQUFXLENBQUNDLEdBQVosRUFBZjtBQUVBLFVBQU1DLGtCQUFrQixHQUFHLENBQUMsS0FBS0gsT0FBTCxHQUFlLEtBQUtJLE9BQXJCLElBQWdDLEtBQUtyQixRQUFoRTs7QUFDQSxVQUFNc0IsMEJBQTBCLEdBQUcsS0FBS2xCLE9BQUwsQ0FBYWdCLGtCQUFiLENBQW5DOztBQUVBLFVBQU1HLFVBQVUsR0FBRyxJQUFJRCwwQkFBdkI7QUFDQSxXQUFLaEIsT0FBTCxDQUFhRyxLQUFiLEdBQXFCLEtBQUtJLFFBQUwsR0FBZ0JVLFVBQWhCLEdBQTZCLEtBQUtYLGVBQUwsR0FBdUJXLFVBQXpFO0FBRUEsVUFBSSxLQUFLQyxNQUFULEVBQWlCLEtBQUtDLEVBQUwsR0FBVUMscUJBQXFCLENBQUM7QUFBQSxlQUFNLE1BQUksQ0FBQ0MsTUFBTCxFQUFOO0FBQUEsT0FBRCxDQUEvQjtBQUNsQjtBQUVEO0FBQ0Y7QUFDQTtBQUNBO0FBQ0E7Ozs7V0FDRSx1QkFBdUI7QUFDckIsVUFBSyxLQUFLZCxRQUFMLElBQWlCLEtBQUtQLE9BQUwsQ0FBYUcsS0FBYixJQUFzQixLQUFLTixRQUFMLEdBQWdCLElBQXhELElBQWtFLENBQUMsS0FBS1UsUUFBTixJQUFrQixLQUFLUCxPQUFMLENBQWFHLEtBQWIsSUFBc0IsS0FBS04sUUFBTCxHQUFnQixJQUE5SCxFQUFxSSxPQUFPLElBQVA7QUFDckksYUFBTyxLQUFQO0FBQ0Q7Ozs7RUFwSHVCeUIsYyIsInNvdXJjZXNDb250ZW50IjpbIid1c2Ugc3RyaWN0J1xyXG5cclxuaW1wb3J0IHsgU3ByaXRlIH0gZnJvbSAnQHBpeGkvc3ByaXRlJztcclxuaW1wb3J0IHsgQ29udGFpbmVyIH0gZnJvbSAnQHBpeGkvZGlzcGxheSc7XHJcblxyXG5pbXBvcnQgeyBFZmZlY3QgfSBmcm9tICcuL2VmZmVjdCc7XHJcblxyXG4vKipcclxuICogQSBwYW5uaW5nIGVmZmVjdCB0aGF0IG1ha2VzIHRoZSBjYW1lcmEgZm9jdXMgb24gYSBwb2ludCBpbiB0aGUgY29udGFpbmVyLlxyXG4gKi9cclxuZXhwb3J0IGNsYXNzIEZhZGUgZXh0ZW5kcyBFZmZlY3Qge1xyXG4gIC8qKlxyXG4gICAqIEEgcmVmZXJlbmNlIHRvIHRoZSBjYW1lcmEncyBmaWx0ZXIuXHJcbiAgICogXHJcbiAgICogQHByaXZhdGVcclxuICAgKiBcclxuICAgKiBAcHJvcGVydHkge1Nwcml0ZX1cclxuICAgKi9cclxuICBwcml2YXRlIF9maWx0ZXI6IFNwcml0ZTtcclxuXHJcbiAgLyoqXHJcbiAgICogVGhlIGNvbG9yIHRvIGZhZGUgdG8uXHJcbiAgICogXHJcbiAgICogQHByaXZhdGVcclxuICAgKiBcclxuICAgKiBAcHJvcGVydHkge251bWJlcn1cclxuICAgKi9cclxuICBwcml2YXRlIF9jb2xvcjogbnVtYmVyO1xyXG5cclxuICAvKipcclxuICAgKiBUaGUgb3BhY2l0eSB0byBzZXQgdGhlIGZpbHRlciB0by5cclxuICAgKiBcclxuICAgKiBAcHJpdmF0ZVxyXG4gICAqIFxyXG4gICAqIEBwcm9wZXJ0eSB7bnVtYmVyfVxyXG4gICAqL1xyXG4gIHByaXZhdGUgX29wYWNpdHk6IG51bWJlcjtcclxuXHJcbiAgLyoqXHJcbiAgICogVGhlIGVhc2luZyBmdW5jdGlvbiB0byB1c2UuXHJcbiAgICogXHJcbiAgICogQHByaXZhdGVcclxuICAgKiBcclxuICAgKiBAcHJvcGVydHkge0Z1bmN0aW9ufVxyXG4gICAqL1xyXG4gIHByaXZhdGUgX2Vhc2luZzogRnVuY3Rpb247XHJcblxyXG4gIC8qKlxyXG4gICAqIEluZGljYXRlcyB3aGV0aGVyIGl0cyBmYWRpbmcgaW4gb3Igb3V0LlxyXG4gICAqIFxyXG4gICAqIEBwcml2YXRlXHJcbiAgICogXHJcbiAgICogQHByb3BlcnR5IHtib29sZWFufVxyXG4gICAqIFxyXG4gICAqIEBkZWZhdWx0IHRydWVcclxuICAgKi9cclxuICBwcml2YXRlIF9mYWRlT3V0ID0gdHJ1ZTtcclxuXHJcbiAgLyoqXHJcbiAgICogVGhlIGluaXRpYWwgb3BhY2l0eSBvZiB0aGUgZmlsdGVyIGFzIG9mIHRoZSBzdGFydCBvZiB0aGlzIGVmZmVjdC5cclxuICAgKiBcclxuICAgKiBAcHJpdmF0ZVxyXG4gICAqIFxyXG4gICAqIEBwcm9wZXJ0eSB7bnVtYmVyfVxyXG4gICAqL1xyXG4gIHByaXZhdGUgX2luaXRpYWxPcGFjaXR5OiBudW1iZXI7XHJcblxyXG4gIC8qKlxyXG4gICAqIEBwYXJhbSB7Q29udGFpbmVyfSBjb250YWluZXIgQSByZWZlcmVuY2UgdG8gdGhlIGNvbnRhaW5lciB0byBhcHBseSB0aGUgZmFkZSBlZmZlY3QgdG8uXHJcbiAgICogQHBhcmFtIHtTcHJpdGV9IHNwcml0ZSBBIHJlZmVyZW5jZSB0byB0aGUgUElYSSBTcHJpdGUgdG8gdXNlIGZvciB0aGUgZmFkZSBlZmZlY3QuXHJcbiAgICogQHBhcmFtIHtudW1iZXJ9IGNvbG9yIFRoZSBoZXggb2YgdGhlIGNvbG9yIHRvIGZhZGUgdG8uXHJcbiAgICogQHBhcmFtIHtudW1iZXJ9IGR1cmF0aW9uIFRoZSBhbW91bnQgb2YgdGltZSwgaW4gbWlsbGlzZWNvbmRzLCB0aGF0IHRoZSBlZmZlY3Qgc2hvdWxkIHRha2UuXHJcbiAgICogQHBhcmFtIHtGdW5jdGlvbn0gW2Vhc2luZ10gVGhlIGVhc2luZyBmdW5jdGlvbiB0byB1c2UuXHJcbiAgICovXHJcbiAgY29uc3RydWN0b3IoY29udGFpbmVyOiBDb250YWluZXIsIHNwcml0ZTogU3ByaXRlLCBjb2xvcjogbnVtYmVyLCBvcGFjaXR5OiBudW1iZXIsIGR1cmF0aW9uOiBudW1iZXIsIGVhc2luZz86IEZ1bmN0aW9uKSB7XHJcbiAgICBzdXBlcihjb250YWluZXIpO1xyXG5cclxuICAgIHRoaXMuX2NvbG9yID0gY29sb3I7XHJcbiAgICB0aGlzLl9vcGFjaXR5ID0gb3BhY2l0eTtcclxuICAgIHRoaXMuZHVyYXRpb24gPSBkdXJhdGlvbjtcclxuICAgIHRoaXMuX2Vhc2luZyA9IGVhc2luZyB8fCB0aGlzLmVhc2VMaW5lYXI7XHJcblxyXG4gICAgdGhpcy5fZmlsdGVyID0gc3ByaXRlO1xyXG5cclxuICAgIHRoaXMuX2ZpbHRlci53aWR0aCA9IHRoaXMuY29udGFpbmVyLndpZHRoO1xyXG4gICAgdGhpcy5fZmlsdGVyLmhlaWdodCA9IHRoaXMuY29udGFpbmVyLmhlaWdodDtcclxuICAgIHRoaXMuX2ZpbHRlci5hbHBoYSA9IDA7XHJcblxyXG4gICAgdGhpcy5jb250YWluZXIuYWRkQ2hpbGQodGhpcy5fZmlsdGVyKTtcclxuXHJcbiAgICB0aGlzLl9maWx0ZXIudGludCA9IHRoaXMuX2NvbG9yO1xyXG4gICAgdGhpcy5faW5pdGlhbE9wYWNpdHkgPSB0aGlzLl9maWx0ZXIuYWxwaGE7XHJcblxyXG4gICAgaWYgKHRoaXMuX2ZpbHRlci5hbHBoYSA+IHRoaXMuX29wYWNpdHkpIHRoaXMuX2ZhZGVPdXQgPSBmYWxzZTtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIFVwZGF0ZXMgdGhlIHN0YXR1cyBvZiB0aGlzIGVmZmVjdCBvbiBhIGZyYW1lIGJ5IGZyYW1lIGJhc2lzLlxyXG4gICAqL1xyXG4gIHVwZGF0ZSgpIHtcclxuICAgIGlmICh0aGlzLmNyaXRlcmlhTWV0KCkpIHtcclxuICAgICAgdGhpcy5fZmlsdGVyLmFscGhhID0gdGhpcy5fb3BhY2l0eTtcclxuICAgICAgdGhpcy5maW5pc2hlZC5kaXNwYXRjaCgpO1xyXG5cclxuICAgICAgcmV0dXJuO1xyXG4gICAgfVxyXG5cclxuICAgIHRoaXMuY3VycmVudCA9IHBlcmZvcm1hbmNlLm5vdygpO1xyXG5cclxuICAgIGNvbnN0IHRpbWVEaWZmUGVyY2VudGFnZSA9ICh0aGlzLmN1cnJlbnQgLSB0aGlzLnN0YXJ0ZWQpIC8gdGhpcy5kdXJhdGlvbjtcclxuICAgIGNvbnN0IHBlcmNlbnRhZ2VUaHJvdWdoQW5pbWF0aW9uID0gdGhpcy5fZWFzaW5nKHRpbWVEaWZmUGVyY2VudGFnZSk7XHJcblxyXG4gICAgY29uc3QgZmFkZUFtb3VudCA9IDEgKiBwZXJjZW50YWdlVGhyb3VnaEFuaW1hdGlvbjtcclxuICAgIHRoaXMuX2ZpbHRlci5hbHBoYSA9IHRoaXMuX2ZhZGVPdXQgPyBmYWRlQW1vdW50IDogdGhpcy5faW5pdGlhbE9wYWNpdHkgLSBmYWRlQW1vdW50O1xyXG5cclxuICAgIGlmICh0aGlzLnVzZVJBRikgdGhpcy5pZCA9IHJlcXVlc3RBbmltYXRpb25GcmFtZSgoKSA9PiB0aGlzLnVwZGF0ZSgpKTtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIENoZWNrcyB0byBzZWUgaWYgdGhlIGZhZGUgZWZmZWN0IGlzIGRvbmUgb3Igbm90LlxyXG4gICAqIFxyXG4gICAqIEByZXR1cm5zIHtib29sZWFufSBSZXR1cm5zIHRydWUgaWYgdGhlIGZhZGUgZWZmZWN0IGlzIGRvbmUgb3Igbm90LlxyXG4gICAqL1xyXG4gIGNyaXRlcmlhTWV0KCk6IGJvb2xlYW4ge1xyXG4gICAgaWYgKCh0aGlzLl9mYWRlT3V0ICYmIHRoaXMuX2ZpbHRlci5hbHBoYSA+PSB0aGlzLl9vcGFjaXR5IC0gMC4wMSkgfHwgKCF0aGlzLl9mYWRlT3V0ICYmIHRoaXMuX2ZpbHRlci5hbHBoYSA8PSB0aGlzLl9vcGFjaXR5ICsgMC4wMSkpIHJldHVybiB0cnVlO1xyXG4gICAgcmV0dXJuIGZhbHNlO1xyXG4gIH1cclxufSJdfQ== -------------------------------------------------------------------------------- /lib/effects/Rotate.d.ts: -------------------------------------------------------------------------------- 1 | import { Container } from '@pixi/display'; 2 | import { Effect } from './effect'; 3 | /** 4 | * A rotating effect that involves rotating the game a specified number of degrees. 5 | */ 6 | export declare class Rotate extends Effect { 7 | /** 8 | * A reference to the initial angle. 9 | * 10 | * @private 11 | * 12 | * @property {number} 13 | */ 14 | private _initialAngle; 15 | /** 16 | * The angle to rotate to, from 0 to 360 with 0 being the default state and 360 being all the way around back to the default state. 17 | * 18 | * @private 19 | * 20 | * @property {number} 21 | */ 22 | private _desiredAngle; 23 | /** 24 | * The initial pivot of the container. 25 | * 26 | * @private 27 | * 28 | * @property {Vector} 29 | */ 30 | private _initialPivot; 31 | /** 32 | * A reference to the easing function to use for this effect. 33 | * 34 | * @private 35 | * 36 | * @property {Function} 37 | */ 38 | private _easing; 39 | /** 40 | * @param {Container} container A reference to the container to apply the rotate effect to. 41 | * @param {number} angle The angle to rotate to, from 0 to 360 with 0 being the default state and 360 being all the way around back to the default state. 42 | * @param {number} duration The amount of time, in milliseconds, that the effect should take. 43 | * @param {Function} [easing] The easing function that should be used. 44 | */ 45 | constructor(container: Container, angle: number, duration: number, easing?: Function); 46 | /** 47 | * Updates the status of this effect on a frame by frame basis. 48 | */ 49 | update(): void; 50 | /** 51 | * Checks to see if the container's current angle is very close to the desired angle. 52 | * 53 | * We can't use container angle == desired angle because with the game loop we might miss that exact moment so we check a very small window. 54 | * 55 | * @private 56 | * 57 | * @returns {boolean} Returns true if the angle criteria is met or false otherwise. 58 | */ 59 | criteriaMet(): boolean; 60 | } 61 | -------------------------------------------------------------------------------- /lib/effects/Rotate.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } 4 | 5 | Object.defineProperty(exports, "__esModule", { 6 | value: true 7 | }); 8 | exports.Rotate = void 0; 9 | 10 | var _effect = require("./effect"); 11 | 12 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 13 | 14 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } 15 | 16 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } 17 | 18 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } 19 | 20 | function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } 21 | 22 | function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } 23 | 24 | function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } 25 | 26 | function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } 27 | 28 | function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } 29 | 30 | function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } 31 | 32 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 33 | 34 | /** 35 | * A rotating effect that involves rotating the game a specified number of degrees. 36 | */ 37 | var Rotate = /*#__PURE__*/function (_Effect) { 38 | _inherits(Rotate, _Effect); 39 | 40 | var _super = _createSuper(Rotate); 41 | 42 | /** 43 | * A reference to the initial angle. 44 | * 45 | * @private 46 | * 47 | * @property {number} 48 | */ 49 | 50 | /** 51 | * The angle to rotate to, from 0 to 360 with 0 being the default state and 360 being all the way around back to the default state. 52 | * 53 | * @private 54 | * 55 | * @property {number} 56 | */ 57 | 58 | /** 59 | * The initial pivot of the container. 60 | * 61 | * @private 62 | * 63 | * @property {Vector} 64 | */ 65 | 66 | /** 67 | * A reference to the easing function to use for this effect. 68 | * 69 | * @private 70 | * 71 | * @property {Function} 72 | */ 73 | 74 | /** 75 | * @param {Container} container A reference to the container to apply the rotate effect to. 76 | * @param {number} angle The angle to rotate to, from 0 to 360 with 0 being the default state and 360 being all the way around back to the default state. 77 | * @param {number} duration The amount of time, in milliseconds, that the effect should take. 78 | * @param {Function} [easing] The easing function that should be used. 79 | */ 80 | function Rotate(container, angle, duration, easing) { 81 | var _this; 82 | 83 | _classCallCheck(this, Rotate); 84 | 85 | _this = _super.call(this, container); 86 | 87 | _defineProperty(_assertThisInitialized(_this), "_initialAngle", void 0); 88 | 89 | _defineProperty(_assertThisInitialized(_this), "_desiredAngle", void 0); 90 | 91 | _defineProperty(_assertThisInitialized(_this), "_initialPivot", void 0); 92 | 93 | _defineProperty(_assertThisInitialized(_this), "_easing", void 0); 94 | 95 | _this._initialAngle = container.angle; 96 | _this._desiredAngle = angle; 97 | _this.duration = duration; 98 | _this._easing = easing || _this.easeLinear; 99 | _this._initialPivot = { 100 | x: _this.container.pivot.x, 101 | y: _this.container.pivot.y 102 | }; 103 | if (_this._initialPivot.x == 0) _this.container.pivot.x = _this.container.width / 2; 104 | if (_this._initialPivot.y == 0) _this.container.pivot.y = _this.container.height / 2; 105 | return _this; 106 | } 107 | /** 108 | * Updates the status of this effect on a frame by frame basis. 109 | */ 110 | 111 | 112 | _createClass(Rotate, [{ 113 | key: "update", 114 | value: function update() { 115 | var _this2 = this; 116 | 117 | if (this.criteriaMet()) { 118 | this.finished.dispatch(); 119 | return; 120 | } 121 | 122 | this.current = performance.now(); 123 | var timeDiffPercentage = (this.current - this.started) / this.duration; 124 | 125 | var percentageThroughAnimation = this._easing(timeDiffPercentage); 126 | 127 | var angleAmount = this._desiredAngle * percentageThroughAnimation; 128 | this.container.angle = this._initialAngle + angleAmount; 129 | if (this.useRAF) this.id = requestAnimationFrame(function () { 130 | return _this2.update(); 131 | }); 132 | } 133 | /** 134 | * Checks to see if the container's current angle is very close to the desired angle. 135 | * 136 | * We can't use container angle == desired angle because with the game loop we might miss that exact moment so we check a very small window. 137 | * 138 | * @private 139 | * 140 | * @returns {boolean} Returns true if the angle criteria is met or false otherwise. 141 | */ 142 | 143 | }, { 144 | key: "criteriaMet", 145 | value: function criteriaMet() { 146 | if (this.container.angle > this._desiredAngle) return true; 147 | return false; 148 | } 149 | }]); 150 | 151 | return Rotate; 152 | }(_effect.Effect); 153 | 154 | exports.Rotate = Rotate; 155 | //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9lZmZlY3RzL3JvdGF0ZS50cyJdLCJuYW1lcyI6WyJSb3RhdGUiLCJjb250YWluZXIiLCJhbmdsZSIsImR1cmF0aW9uIiwiZWFzaW5nIiwiX2luaXRpYWxBbmdsZSIsIl9kZXNpcmVkQW5nbGUiLCJfZWFzaW5nIiwiZWFzZUxpbmVhciIsIl9pbml0aWFsUGl2b3QiLCJ4IiwicGl2b3QiLCJ5Iiwid2lkdGgiLCJoZWlnaHQiLCJjcml0ZXJpYU1ldCIsImZpbmlzaGVkIiwiZGlzcGF0Y2giLCJjdXJyZW50IiwicGVyZm9ybWFuY2UiLCJub3ciLCJ0aW1lRGlmZlBlcmNlbnRhZ2UiLCJzdGFydGVkIiwicGVyY2VudGFnZVRocm91Z2hBbmltYXRpb24iLCJhbmdsZUFtb3VudCIsInVzZVJBRiIsImlkIiwicmVxdWVzdEFuaW1hdGlvbkZyYW1lIiwidXBkYXRlIiwiRWZmZWN0Il0sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7O0FBSUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUdBO0FBQ0E7QUFDQTtJQUNhQSxNOzs7OztBQUNYO0FBQ0Y7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQUdFO0FBQ0Y7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQUdFO0FBQ0Y7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQUdFO0FBQ0Y7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQUdFO0FBQ0Y7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNFLGtCQUFZQyxTQUFaLEVBQWtDQyxLQUFsQyxFQUFpREMsUUFBakQsRUFBbUVDLE1BQW5FLEVBQXNGO0FBQUE7O0FBQUE7O0FBQ3BGLDhCQUFNSCxTQUFOOztBQURvRjs7QUFBQTs7QUFBQTs7QUFBQTs7QUFHcEYsVUFBS0ksYUFBTCxHQUFxQkosU0FBUyxDQUFDQyxLQUEvQjtBQUNBLFVBQUtJLGFBQUwsR0FBcUJKLEtBQXJCO0FBQ0EsVUFBS0MsUUFBTCxHQUFnQkEsUUFBaEI7QUFDQSxVQUFLSSxPQUFMLEdBQWVILE1BQU0sSUFBSSxNQUFLSSxVQUE5QjtBQUNBLFVBQUtDLGFBQUwsR0FBcUI7QUFBRUMsTUFBQUEsQ0FBQyxFQUFFLE1BQUtULFNBQUwsQ0FBZVUsS0FBZixDQUFxQkQsQ0FBMUI7QUFBNkJFLE1BQUFBLENBQUMsRUFBRSxNQUFLWCxTQUFMLENBQWVVLEtBQWYsQ0FBcUJDO0FBQXJELEtBQXJCO0FBRUEsUUFBSSxNQUFLSCxhQUFMLENBQW1CQyxDQUFuQixJQUF3QixDQUE1QixFQUErQixNQUFLVCxTQUFMLENBQWVVLEtBQWYsQ0FBcUJELENBQXJCLEdBQXlCLE1BQUtULFNBQUwsQ0FBZVksS0FBZixHQUF1QixDQUFoRDtBQUMvQixRQUFJLE1BQUtKLGFBQUwsQ0FBbUJHLENBQW5CLElBQXdCLENBQTVCLEVBQStCLE1BQUtYLFNBQUwsQ0FBZVUsS0FBZixDQUFxQkMsQ0FBckIsR0FBeUIsTUFBS1gsU0FBTCxDQUFlYSxNQUFmLEdBQXdCLENBQWpEO0FBVnFEO0FBV3JGO0FBRUQ7QUFDRjtBQUNBOzs7OztXQUNFLGtCQUFTO0FBQUE7O0FBQ1AsVUFBSSxLQUFLQyxXQUFMLEVBQUosRUFBd0I7QUFDdEIsYUFBS0MsUUFBTCxDQUFjQyxRQUFkO0FBQ0E7QUFDRDs7QUFFRCxXQUFLQyxPQUFMLEdBQWVDLFdBQVcsQ0FBQ0MsR0FBWixFQUFmO0FBRUEsVUFBTUMsa0JBQWtCLEdBQUcsQ0FBQyxLQUFLSCxPQUFMLEdBQWUsS0FBS0ksT0FBckIsSUFBZ0MsS0FBS25CLFFBQWhFOztBQUNBLFVBQU1vQiwwQkFBMEIsR0FBRyxLQUFLaEIsT0FBTCxDQUFhYyxrQkFBYixDQUFuQzs7QUFFQSxVQUFNRyxXQUFXLEdBQUcsS0FBS2xCLGFBQUwsR0FBcUJpQiwwQkFBekM7QUFDQSxXQUFLdEIsU0FBTCxDQUFlQyxLQUFmLEdBQXVCLEtBQUtHLGFBQUwsR0FBcUJtQixXQUE1QztBQUVBLFVBQUksS0FBS0MsTUFBVCxFQUFpQixLQUFLQyxFQUFMLEdBQVVDLHFCQUFxQixDQUFDO0FBQUEsZUFBTSxNQUFJLENBQUNDLE1BQUwsRUFBTjtBQUFBLE9BQUQsQ0FBL0I7QUFDbEI7QUFFRDtBQUNGO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7Ozs7V0FDRSx1QkFBdUI7QUFDckIsVUFBSSxLQUFLM0IsU0FBTCxDQUFlQyxLQUFmLEdBQXVCLEtBQUtJLGFBQWhDLEVBQStDLE9BQU8sSUFBUDtBQUMvQyxhQUFPLEtBQVA7QUFDRDs7OztFQXhGeUJ1QixjIiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBzdHJpY3QnXHJcblxyXG5pbXBvcnQgeyBDb250YWluZXIgfSBmcm9tICdAcGl4aS9kaXNwbGF5JztcclxuXHJcbmltcG9ydCB7IEVmZmVjdCB9IGZyb20gJy4vZWZmZWN0JztcclxuaW1wb3J0IHsgVmVjdG9yIH0gZnJvbSAnLi4vdmVjdG9yJztcclxuXHJcbi8qKlxyXG4gKiBBIHJvdGF0aW5nIGVmZmVjdCB0aGF0IGludm9sdmVzIHJvdGF0aW5nIHRoZSBnYW1lIGEgc3BlY2lmaWVkIG51bWJlciBvZiBkZWdyZWVzLlxyXG4gKi9cclxuZXhwb3J0IGNsYXNzIFJvdGF0ZSBleHRlbmRzIEVmZmVjdCB7XHJcbiAgLyoqXHJcbiAgICogQSByZWZlcmVuY2UgdG8gdGhlIGluaXRpYWwgYW5nbGUuXHJcbiAgICogXHJcbiAgICogQHByaXZhdGVcclxuICAgKiBcclxuICAgKiBAcHJvcGVydHkge251bWJlcn1cclxuICAgKi9cclxuICBwcml2YXRlIF9pbml0aWFsQW5nbGU6IG51bWJlcjtcclxuXHJcbiAgLyoqXHJcbiAgICogVGhlIGFuZ2xlIHRvIHJvdGF0ZSB0bywgZnJvbSAwIHRvIDM2MCB3aXRoIDAgYmVpbmcgdGhlIGRlZmF1bHQgc3RhdGUgYW5kIDM2MCBiZWluZyBhbGwgdGhlIHdheSBhcm91bmQgYmFjayB0byB0aGUgZGVmYXVsdCBzdGF0ZS5cclxuICAgKiBcclxuICAgKiBAcHJpdmF0ZVxyXG4gICAqIFxyXG4gICAqIEBwcm9wZXJ0eSB7bnVtYmVyfVxyXG4gICAqL1xyXG4gIHByaXZhdGUgX2Rlc2lyZWRBbmdsZTogbnVtYmVyO1xyXG5cclxuICAvKipcclxuICAgKiBUaGUgaW5pdGlhbCBwaXZvdCBvZiB0aGUgY29udGFpbmVyLlxyXG4gICAqIFxyXG4gICAqIEBwcml2YXRlXHJcbiAgICogXHJcbiAgICogQHByb3BlcnR5IHtWZWN0b3J9XHJcbiAgICovXHJcbiAgcHJpdmF0ZSBfaW5pdGlhbFBpdm90OiBWZWN0b3I7XHJcblxyXG4gIC8qKlxyXG4gICAqIEEgcmVmZXJlbmNlIHRvIHRoZSBlYXNpbmcgZnVuY3Rpb24gdG8gdXNlIGZvciB0aGlzIGVmZmVjdC5cclxuICAgKiBcclxuICAgKiBAcHJpdmF0ZVxyXG4gICAqIFxyXG4gICAqIEBwcm9wZXJ0eSB7RnVuY3Rpb259XHJcbiAgICovXHJcbiAgcHJpdmF0ZSBfZWFzaW5nOiBGdW5jdGlvbjtcclxuXHJcbiAgLyoqXHJcbiAgICogQHBhcmFtIHtDb250YWluZXJ9IGNvbnRhaW5lciBBIHJlZmVyZW5jZSB0byB0aGUgY29udGFpbmVyIHRvIGFwcGx5IHRoZSByb3RhdGUgZWZmZWN0IHRvLlxyXG4gICAqIEBwYXJhbSB7bnVtYmVyfSBhbmdsZSBUaGUgYW5nbGUgdG8gcm90YXRlIHRvLCBmcm9tIDAgdG8gMzYwIHdpdGggMCBiZWluZyB0aGUgZGVmYXVsdCBzdGF0ZSBhbmQgMzYwIGJlaW5nIGFsbCB0aGUgd2F5IGFyb3VuZCBiYWNrIHRvIHRoZSBkZWZhdWx0IHN0YXRlLlxyXG4gICAqIEBwYXJhbSB7bnVtYmVyfSBkdXJhdGlvbiBUaGUgYW1vdW50IG9mIHRpbWUsIGluIG1pbGxpc2Vjb25kcywgdGhhdCB0aGUgZWZmZWN0IHNob3VsZCB0YWtlLlxyXG4gICAqIEBwYXJhbSB7RnVuY3Rpb259IFtlYXNpbmddIFRoZSBlYXNpbmcgZnVuY3Rpb24gdGhhdCBzaG91bGQgYmUgdXNlZC5cclxuICAgKi9cclxuICBjb25zdHJ1Y3Rvcihjb250YWluZXI6IENvbnRhaW5lciwgYW5nbGU6IG51bWJlciwgZHVyYXRpb246IG51bWJlciwgZWFzaW5nPzogRnVuY3Rpb24pIHtcclxuICAgIHN1cGVyKGNvbnRhaW5lcik7XHJcblxyXG4gICAgdGhpcy5faW5pdGlhbEFuZ2xlID0gY29udGFpbmVyLmFuZ2xlO1xyXG4gICAgdGhpcy5fZGVzaXJlZEFuZ2xlID0gYW5nbGVcclxuICAgIHRoaXMuZHVyYXRpb24gPSBkdXJhdGlvbjtcclxuICAgIHRoaXMuX2Vhc2luZyA9IGVhc2luZyB8fCB0aGlzLmVhc2VMaW5lYXI7XHJcbiAgICB0aGlzLl9pbml0aWFsUGl2b3QgPSB7IHg6IHRoaXMuY29udGFpbmVyLnBpdm90LngsIHk6IHRoaXMuY29udGFpbmVyLnBpdm90LnkgfTtcclxuXHJcbiAgICBpZiAodGhpcy5faW5pdGlhbFBpdm90LnggPT0gMCkgdGhpcy5jb250YWluZXIucGl2b3QueCA9IHRoaXMuY29udGFpbmVyLndpZHRoIC8gMjtcclxuICAgIGlmICh0aGlzLl9pbml0aWFsUGl2b3QueSA9PSAwKSB0aGlzLmNvbnRhaW5lci5waXZvdC55ID0gdGhpcy5jb250YWluZXIuaGVpZ2h0IC8gMjtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIFVwZGF0ZXMgdGhlIHN0YXR1cyBvZiB0aGlzIGVmZmVjdCBvbiBhIGZyYW1lIGJ5IGZyYW1lIGJhc2lzLlxyXG4gICAqL1xyXG4gIHVwZGF0ZSgpIHtcclxuICAgIGlmICh0aGlzLmNyaXRlcmlhTWV0KCkpIHtcclxuICAgICAgdGhpcy5maW5pc2hlZC5kaXNwYXRjaCgpO1xyXG4gICAgICByZXR1cm47XHJcbiAgICB9XHJcblxyXG4gICAgdGhpcy5jdXJyZW50ID0gcGVyZm9ybWFuY2Uubm93KCk7XHJcblxyXG4gICAgY29uc3QgdGltZURpZmZQZXJjZW50YWdlID0gKHRoaXMuY3VycmVudCAtIHRoaXMuc3RhcnRlZCkgLyB0aGlzLmR1cmF0aW9uO1xyXG4gICAgY29uc3QgcGVyY2VudGFnZVRocm91Z2hBbmltYXRpb24gPSB0aGlzLl9lYXNpbmcodGltZURpZmZQZXJjZW50YWdlKTtcclxuXHJcbiAgICBjb25zdCBhbmdsZUFtb3VudCA9IHRoaXMuX2Rlc2lyZWRBbmdsZSAqIHBlcmNlbnRhZ2VUaHJvdWdoQW5pbWF0aW9uO1xyXG4gICAgdGhpcy5jb250YWluZXIuYW5nbGUgPSB0aGlzLl9pbml0aWFsQW5nbGUgKyBhbmdsZUFtb3VudDtcclxuXHJcbiAgICBpZiAodGhpcy51c2VSQUYpIHRoaXMuaWQgPSByZXF1ZXN0QW5pbWF0aW9uRnJhbWUoKCkgPT4gdGhpcy51cGRhdGUoKSk7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBDaGVja3MgdG8gc2VlIGlmIHRoZSBjb250YWluZXIncyBjdXJyZW50IGFuZ2xlIGlzIHZlcnkgY2xvc2UgdG8gdGhlIGRlc2lyZWQgYW5nbGUuXHJcbiAgICogXHJcbiAgICogV2UgY2FuJ3QgdXNlIGNvbnRhaW5lciBhbmdsZSA9PSBkZXNpcmVkIGFuZ2xlIGJlY2F1c2Ugd2l0aCB0aGUgZ2FtZSBsb29wIHdlIG1pZ2h0IG1pc3MgdGhhdCBleGFjdCBtb21lbnQgc28gd2UgY2hlY2sgYSB2ZXJ5IHNtYWxsIHdpbmRvdy5cclxuICAgKiBcclxuICAgKiBAcHJpdmF0ZVxyXG4gICAqIFxyXG4gICAqIEByZXR1cm5zIHtib29sZWFufSBSZXR1cm5zIHRydWUgaWYgdGhlIGFuZ2xlIGNyaXRlcmlhIGlzIG1ldCBvciBmYWxzZSBvdGhlcndpc2UuXHJcbiAgICovXHJcbiAgY3JpdGVyaWFNZXQoKTogYm9vbGVhbiB7XHJcbiAgICBpZiAodGhpcy5jb250YWluZXIuYW5nbGUgPiB0aGlzLl9kZXNpcmVkQW5nbGUpIHJldHVybiB0cnVlO1xyXG4gICAgcmV0dXJuIGZhbHNlO1xyXG4gIH1cclxufSJdfQ== -------------------------------------------------------------------------------- /lib/effects/Shake.d.ts: -------------------------------------------------------------------------------- 1 | import { Container } from '@pixi/display'; 2 | import { Effect } from './effect'; 3 | /** 4 | * A Shake effect involves shaking the camera at various amounts up to a sepcified intensity. 5 | */ 6 | export declare class Shake extends Effect { 7 | /** 8 | * The intensity of the shake, from 1-10. 9 | * 10 | * @private 11 | * 12 | * @property {number} 13 | * 14 | * @default 5 15 | */ 16 | private _intensity; 17 | /** 18 | * A reference to the initial pivot of the container. 19 | * 20 | * @private 21 | * 22 | * @property {Vector} 23 | */ 24 | private _initialPivot; 25 | /** 26 | * @param {Container} container A reference to the container to apply the shake effect to. 27 | * @param {number} intensity The intensity of the shake, from a scale of 1 to 10. 28 | * @param {number} duration The duration of the shake effect. 29 | */ 30 | constructor(container: Container, intensity: number, duration: number); 31 | /** 32 | * Updates the status of the shake. 33 | */ 34 | update(): void; 35 | /** 36 | * Checks to see if the shake effect is done. 37 | * 38 | * @returns {boolean} Returns true if the shake effect is done or not. 39 | */ 40 | criteriaMet(): boolean; 41 | } 42 | -------------------------------------------------------------------------------- /lib/effects/Shake.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } 4 | 5 | Object.defineProperty(exports, "__esModule", { 6 | value: true 7 | }); 8 | exports.Shake = void 0; 9 | 10 | var _effect = require("./effect"); 11 | 12 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 13 | 14 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } 15 | 16 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } 17 | 18 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } 19 | 20 | function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } 21 | 22 | function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } 23 | 24 | function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } 25 | 26 | function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } 27 | 28 | function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } 29 | 30 | function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } 31 | 32 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 33 | 34 | /** 35 | * A Shake effect involves shaking the camera at various amounts up to a sepcified intensity. 36 | */ 37 | var Shake = /*#__PURE__*/function (_Effect) { 38 | _inherits(Shake, _Effect); 39 | 40 | var _super = _createSuper(Shake); 41 | 42 | /** 43 | * The intensity of the shake, from 1-10. 44 | * 45 | * @private 46 | * 47 | * @property {number} 48 | * 49 | * @default 5 50 | */ 51 | 52 | /** 53 | * A reference to the initial pivot of the container. 54 | * 55 | * @private 56 | * 57 | * @property {Vector} 58 | */ 59 | 60 | /** 61 | * @param {Container} container A reference to the container to apply the shake effect to. 62 | * @param {number} intensity The intensity of the shake, from a scale of 1 to 10. 63 | * @param {number} duration The duration of the shake effect. 64 | */ 65 | function Shake(container, intensity, duration) { 66 | var _this; 67 | 68 | _classCallCheck(this, Shake); 69 | 70 | _this = _super.call(this, container); 71 | 72 | _defineProperty(_assertThisInitialized(_this), "_intensity", 5); 73 | 74 | _defineProperty(_assertThisInitialized(_this), "_initialPivot", void 0); 75 | 76 | _this._intensity = intensity; 77 | _this.duration = duration; 78 | _this._initialPivot = { 79 | x: _this.container.pivot.x, 80 | y: _this.container.pivot.y 81 | }; 82 | _this.started = performance.now(); 83 | return _this; 84 | } 85 | /** 86 | * Updates the status of the shake. 87 | */ 88 | 89 | 90 | _createClass(Shake, [{ 91 | key: "update", 92 | value: function update() { 93 | var _this2 = this; 94 | 95 | if (this.criteriaMet()) { 96 | this.container.pivot.x = this._initialPivot.x; 97 | this.container.pivot.y = this._initialPivot.y; 98 | this.finished.dispatch(); 99 | return; 100 | } 101 | 102 | this.current = performance.now(); 103 | 104 | var dx = Math.random() * this._intensity; 105 | 106 | var dy = Math.random() * this._intensity; 107 | 108 | this.container.pivot.x = dx; 109 | this.container.pivot.y = dy; 110 | if (this.useRAF) this.id = requestAnimationFrame(function () { 111 | return _this2.update(); 112 | }); 113 | } 114 | /** 115 | * Checks to see if the shake effect is done. 116 | * 117 | * @returns {boolean} Returns true if the shake effect is done or not. 118 | */ 119 | 120 | }, { 121 | key: "criteriaMet", 122 | value: function criteriaMet() { 123 | if (this.current - this.started >= this.duration) return true; 124 | return false; 125 | } 126 | }]); 127 | 128 | return Shake; 129 | }(_effect.Effect); 130 | 131 | exports.Shake = Shake; 132 | //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9lZmZlY3RzL3NoYWtlLnRzIl0sIm5hbWVzIjpbIlNoYWtlIiwiY29udGFpbmVyIiwiaW50ZW5zaXR5IiwiZHVyYXRpb24iLCJfaW50ZW5zaXR5IiwiX2luaXRpYWxQaXZvdCIsIngiLCJwaXZvdCIsInkiLCJzdGFydGVkIiwicGVyZm9ybWFuY2UiLCJub3ciLCJjcml0ZXJpYU1ldCIsImZpbmlzaGVkIiwiZGlzcGF0Y2giLCJjdXJyZW50IiwiZHgiLCJNYXRoIiwicmFuZG9tIiwiZHkiLCJ1c2VSQUYiLCJpZCIsInJlcXVlc3RBbmltYXRpb25GcmFtZSIsInVwZGF0ZSIsIkVmZmVjdCJdLCJtYXBwaW5ncyI6IkFBQUE7Ozs7Ozs7OztBQUlBOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFHQTtBQUNBO0FBQ0E7SUFDYUEsSzs7Ozs7QUFDWDtBQUNGO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7O0FBR0U7QUFDRjtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7O0FBR0U7QUFDRjtBQUNBO0FBQ0E7QUFDQTtBQUNFLGlCQUFZQyxTQUFaLEVBQWtDQyxTQUFsQyxFQUFxREMsUUFBckQsRUFBdUU7QUFBQTs7QUFBQTs7QUFDckUsOEJBQU1GLFNBQU47O0FBRHFFLGlFQWhCbEQsQ0FnQmtEOztBQUFBOztBQUdyRSxVQUFLRyxVQUFMLEdBQWtCRixTQUFsQjtBQUNBLFVBQUtDLFFBQUwsR0FBZ0JBLFFBQWhCO0FBQ0EsVUFBS0UsYUFBTCxHQUFxQjtBQUFFQyxNQUFBQSxDQUFDLEVBQUUsTUFBS0wsU0FBTCxDQUFlTSxLQUFmLENBQXFCRCxDQUExQjtBQUE2QkUsTUFBQUEsQ0FBQyxFQUFFLE1BQUtQLFNBQUwsQ0FBZU0sS0FBZixDQUFxQkM7QUFBckQsS0FBckI7QUFFQSxVQUFLQyxPQUFMLEdBQWVDLFdBQVcsQ0FBQ0MsR0FBWixFQUFmO0FBUHFFO0FBUXRFO0FBRUQ7QUFDRjtBQUNBOzs7OztXQUNFLGtCQUFTO0FBQUE7O0FBQ1AsVUFBSSxLQUFLQyxXQUFMLEVBQUosRUFBd0I7QUFDdEIsYUFBS1gsU0FBTCxDQUFlTSxLQUFmLENBQXFCRCxDQUFyQixHQUF5QixLQUFLRCxhQUFMLENBQW1CQyxDQUE1QztBQUNBLGFBQUtMLFNBQUwsQ0FBZU0sS0FBZixDQUFxQkMsQ0FBckIsR0FBeUIsS0FBS0gsYUFBTCxDQUFtQkcsQ0FBNUM7QUFFQSxhQUFLSyxRQUFMLENBQWNDLFFBQWQ7QUFDQTtBQUNEOztBQUVELFdBQUtDLE9BQUwsR0FBZUwsV0FBVyxDQUFDQyxHQUFaLEVBQWY7O0FBRUEsVUFBTUssRUFBRSxHQUFHQyxJQUFJLENBQUNDLE1BQUwsS0FBZ0IsS0FBS2QsVUFBaEM7O0FBQ0EsVUFBTWUsRUFBRSxHQUFHRixJQUFJLENBQUNDLE1BQUwsS0FBZ0IsS0FBS2QsVUFBaEM7O0FBRUEsV0FBS0gsU0FBTCxDQUFlTSxLQUFmLENBQXFCRCxDQUFyQixHQUF5QlUsRUFBekI7QUFDQSxXQUFLZixTQUFMLENBQWVNLEtBQWYsQ0FBcUJDLENBQXJCLEdBQXlCVyxFQUF6QjtBQUVBLFVBQUksS0FBS0MsTUFBVCxFQUFpQixLQUFLQyxFQUFMLEdBQVVDLHFCQUFxQixDQUFDO0FBQUEsZUFBTSxNQUFJLENBQUNDLE1BQUwsRUFBTjtBQUFBLE9BQUQsQ0FBL0I7QUFDbEI7QUFFRDtBQUNGO0FBQ0E7QUFDQTtBQUNBOzs7O1dBQ0UsdUJBQXVCO0FBQ3JCLFVBQUksS0FBS1IsT0FBTCxHQUFlLEtBQUtOLE9BQXBCLElBQStCLEtBQUtOLFFBQXhDLEVBQWtELE9BQU8sSUFBUDtBQUNsRCxhQUFPLEtBQVA7QUFDRDs7OztFQW5Fd0JxQixjIiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBzdHJpY3QnXHJcblxyXG5pbXBvcnQgeyBDb250YWluZXIgfSBmcm9tICdAcGl4aS9kaXNwbGF5JztcclxuXHJcbmltcG9ydCB7IEVmZmVjdCB9IGZyb20gJy4vZWZmZWN0JztcclxuaW1wb3J0IHsgVmVjdG9yIH0gZnJvbSAnLi4vdmVjdG9yJztcclxuXHJcbi8qKlxyXG4gKiBBIFNoYWtlIGVmZmVjdCBpbnZvbHZlcyBzaGFraW5nIHRoZSBjYW1lcmEgYXQgdmFyaW91cyBhbW91bnRzIHVwIHRvIGEgc2VwY2lmaWVkIGludGVuc2l0eS5cclxuICovXHJcbmV4cG9ydCBjbGFzcyBTaGFrZSBleHRlbmRzIEVmZmVjdCB7XHJcbiAgLyoqXHJcbiAgICogVGhlIGludGVuc2l0eSBvZiB0aGUgc2hha2UsIGZyb20gMS0xMC5cclxuICAgKiBcclxuICAgKiBAcHJpdmF0ZVxyXG4gICAqIFxyXG4gICAqIEBwcm9wZXJ0eSB7bnVtYmVyfVxyXG4gICAqIFxyXG4gICAqIEBkZWZhdWx0IDVcclxuICAgKi9cclxuICBwcml2YXRlIF9pbnRlbnNpdHkgPSA1O1xyXG5cclxuICAvKipcclxuICAgKiBBIHJlZmVyZW5jZSB0byB0aGUgaW5pdGlhbCBwaXZvdCBvZiB0aGUgY29udGFpbmVyLlxyXG4gICAqIFxyXG4gICAqIEBwcml2YXRlXHJcbiAgICogXHJcbiAgICogQHByb3BlcnR5IHtWZWN0b3J9XHJcbiAgICovXHJcbiAgcHJpdmF0ZSBfaW5pdGlhbFBpdm90OiBWZWN0b3I7XHJcblxyXG4gIC8qKlxyXG4gICAqIEBwYXJhbSB7Q29udGFpbmVyfSBjb250YWluZXIgQSByZWZlcmVuY2UgdG8gdGhlIGNvbnRhaW5lciB0byBhcHBseSB0aGUgc2hha2UgZWZmZWN0IHRvLlxyXG4gICAqIEBwYXJhbSB7bnVtYmVyfSBpbnRlbnNpdHkgVGhlIGludGVuc2l0eSBvZiB0aGUgc2hha2UsIGZyb20gYSBzY2FsZSBvZiAxIHRvIDEwLlxyXG4gICAqIEBwYXJhbSB7bnVtYmVyfSBkdXJhdGlvbiBUaGUgZHVyYXRpb24gb2YgdGhlIHNoYWtlIGVmZmVjdC5cclxuICAgKi9cclxuICBjb25zdHJ1Y3Rvcihjb250YWluZXI6IENvbnRhaW5lciwgaW50ZW5zaXR5OiBudW1iZXIsIGR1cmF0aW9uOiBudW1iZXIpIHtcclxuICAgIHN1cGVyKGNvbnRhaW5lcik7XHJcblxyXG4gICAgdGhpcy5faW50ZW5zaXR5ID0gaW50ZW5zaXR5O1xyXG4gICAgdGhpcy5kdXJhdGlvbiA9IGR1cmF0aW9uO1xyXG4gICAgdGhpcy5faW5pdGlhbFBpdm90ID0geyB4OiB0aGlzLmNvbnRhaW5lci5waXZvdC54LCB5OiB0aGlzLmNvbnRhaW5lci5waXZvdC55IH07XHJcblxyXG4gICAgdGhpcy5zdGFydGVkID0gcGVyZm9ybWFuY2Uubm93KCk7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBVcGRhdGVzIHRoZSBzdGF0dXMgb2YgdGhlIHNoYWtlLlxyXG4gICAqL1xyXG4gIHVwZGF0ZSgpIHtcclxuICAgIGlmICh0aGlzLmNyaXRlcmlhTWV0KCkpIHtcclxuICAgICAgdGhpcy5jb250YWluZXIucGl2b3QueCA9IHRoaXMuX2luaXRpYWxQaXZvdC54O1xyXG4gICAgICB0aGlzLmNvbnRhaW5lci5waXZvdC55ID0gdGhpcy5faW5pdGlhbFBpdm90Lnk7XHJcblxyXG4gICAgICB0aGlzLmZpbmlzaGVkLmRpc3BhdGNoKCk7XHJcbiAgICAgIHJldHVybjtcclxuICAgIH1cclxuXHJcbiAgICB0aGlzLmN1cnJlbnQgPSBwZXJmb3JtYW5jZS5ub3coKTtcclxuXHJcbiAgICBjb25zdCBkeCA9IE1hdGgucmFuZG9tKCkgKiB0aGlzLl9pbnRlbnNpdHk7XHJcbiAgICBjb25zdCBkeSA9IE1hdGgucmFuZG9tKCkgKiB0aGlzLl9pbnRlbnNpdHk7XHJcblxyXG4gICAgdGhpcy5jb250YWluZXIucGl2b3QueCA9IGR4O1xyXG4gICAgdGhpcy5jb250YWluZXIucGl2b3QueSA9IGR5O1xyXG5cclxuICAgIGlmICh0aGlzLnVzZVJBRikgdGhpcy5pZCA9IHJlcXVlc3RBbmltYXRpb25GcmFtZSgoKSA9PiB0aGlzLnVwZGF0ZSgpKTtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIENoZWNrcyB0byBzZWUgaWYgdGhlIHNoYWtlIGVmZmVjdCBpcyBkb25lLlxyXG4gICAqIFxyXG4gICAqIEByZXR1cm5zIHtib29sZWFufSBSZXR1cm5zIHRydWUgaWYgdGhlIHNoYWtlIGVmZmVjdCBpcyBkb25lIG9yIG5vdC5cclxuICAgKi9cclxuICBjcml0ZXJpYU1ldCgpOiBib29sZWFuIHtcclxuICAgIGlmICh0aGlzLmN1cnJlbnQgLSB0aGlzLnN0YXJ0ZWQgPj0gdGhpcy5kdXJhdGlvbikgcmV0dXJuIHRydWU7XHJcbiAgICByZXR1cm4gZmFsc2U7XHJcbiAgfVxyXG59XHJcbiJdfQ== -------------------------------------------------------------------------------- /lib/effects/pan_to.d.ts: -------------------------------------------------------------------------------- 1 | import { Container } from '@pixi/display'; 2 | import { Effect } from './effect'; 3 | /** 4 | * A panning effect that makes the camera focus on a point in the container. 5 | */ 6 | export declare class PanTo extends Effect { 7 | /** 8 | * The (x, y) coordinate pair to pan to. 9 | * 10 | * @private 11 | * 12 | * @property {Vector} 13 | */ 14 | private _coordinates; 15 | /** 16 | * The difference in coordinates from the current and the desired. 17 | * 18 | * @private 19 | * 20 | * @property {Vector} 21 | */ 22 | private _difference; 23 | /** 24 | * Indicates whether the desired x is greater than the current x or not. 25 | * 26 | * @private 27 | * 28 | * @property {boolean} 29 | * 30 | * @default false 31 | */ 32 | private _xIsGreater; 33 | /** 34 | * Indicates whether the desired y is greater than the current y or not. 35 | * 36 | * @private 37 | * 38 | * @property {boolean} 39 | * 40 | * @default false 41 | */ 42 | private _yIsGreater; 43 | /** 44 | * @param {Container} container A reference to the container to apply the panto effect to. 45 | * @param {number} x The x coordinate to pan to. 46 | * @param {number} y The y coordinate to pan to. 47 | * @param {number} duration The amount of time, in milliseconds, that the effect should take. 48 | */ 49 | constructor(container: Container, x: number, y: number, duration: number); 50 | /** 51 | * Updates the status of this effect on a frame by frame basis. 52 | */ 53 | update(): void; 54 | /** 55 | * Checks to see if the panto criteria has been met so that the effect can end. 56 | * 57 | * @returns {boolean} Returns true if the panto effect is finished or false otherwise. 58 | */ 59 | criteriaMet(): boolean; 60 | } 61 | -------------------------------------------------------------------------------- /lib/effects/pan_to.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } 4 | 5 | Object.defineProperty(exports, "__esModule", { 6 | value: true 7 | }); 8 | exports.PanTo = void 0; 9 | 10 | var _effect = require("./effect"); 11 | 12 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 13 | 14 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } 15 | 16 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } 17 | 18 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } 19 | 20 | function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } 21 | 22 | function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } 23 | 24 | function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } 25 | 26 | function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } 27 | 28 | function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } 29 | 30 | function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } 31 | 32 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 33 | 34 | /** 35 | * A panning effect that makes the camera focus on a point in the container. 36 | */ 37 | var PanTo = /*#__PURE__*/function (_Effect) { 38 | _inherits(PanTo, _Effect); 39 | 40 | var _super = _createSuper(PanTo); 41 | 42 | /** 43 | * The (x, y) coordinate pair to pan to. 44 | * 45 | * @private 46 | * 47 | * @property {Vector} 48 | */ 49 | 50 | /** 51 | * The difference in coordinates from the current and the desired. 52 | * 53 | * @private 54 | * 55 | * @property {Vector} 56 | */ 57 | 58 | /** 59 | * Indicates whether the desired x is greater than the current x or not. 60 | * 61 | * @private 62 | * 63 | * @property {boolean} 64 | * 65 | * @default false 66 | */ 67 | 68 | /** 69 | * Indicates whether the desired y is greater than the current y or not. 70 | * 71 | * @private 72 | * 73 | * @property {boolean} 74 | * 75 | * @default false 76 | */ 77 | 78 | /** 79 | * @param {Container} container A reference to the container to apply the panto effect to. 80 | * @param {number} x The x coordinate to pan to. 81 | * @param {number} y The y coordinate to pan to. 82 | * @param {number} duration The amount of time, in milliseconds, that the effect should take. 83 | */ 84 | function PanTo(container, x, y, duration) { 85 | var _this; 86 | 87 | _classCallCheck(this, PanTo); 88 | 89 | _this = _super.call(this, container); 90 | 91 | _defineProperty(_assertThisInitialized(_this), "_coordinates", void 0); 92 | 93 | _defineProperty(_assertThisInitialized(_this), "_difference", void 0); 94 | 95 | _defineProperty(_assertThisInitialized(_this), "_xIsGreater", false); 96 | 97 | _defineProperty(_assertThisInitialized(_this), "_yIsGreater", false); 98 | 99 | _this._coordinates = { 100 | x: x, 101 | y: y 102 | }; 103 | _this.duration = duration; 104 | if (_this._coordinates.x > _this.container.pivot.x) _this._xIsGreater = true; 105 | if (_this._coordinates.y > _this.container.pivot.y) _this._yIsGreater = true; 106 | _this._difference = { 107 | x: Math.abs(_this._coordinates.x - _this.container.pivot.x), 108 | y: Math.abs(_this._coordinates.y - _this.container.pivot.y) 109 | }; 110 | return _this; 111 | } 112 | /** 113 | * Updates the status of this effect on a frame by frame basis. 114 | */ 115 | 116 | 117 | _createClass(PanTo, [{ 118 | key: "update", 119 | value: function update() { 120 | var _this2 = this; 121 | 122 | if (this.criteriaMet()) { 123 | this.finished.dispatch(); 124 | return; 125 | } 126 | 127 | this.current = performance.now(); 128 | var timeDiffPercentage = (this.current - this.started) / this.duration; 129 | var timeDiffPercentageNegative = (this.duration - this.current) / this.duration; 130 | var xPanAmount = this._xIsGreater ? this._difference.x * timeDiffPercentage : this._difference.x * timeDiffPercentageNegative; 131 | var yPanAmount = this._yIsGreater ? this._difference.y * timeDiffPercentage : this._difference.y * timeDiffPercentageNegative; 132 | this.container.pivot.x = xPanAmount; 133 | this.container.pivot.y = yPanAmount; 134 | if (this.useRAF) this.id = requestAnimationFrame(function () { 135 | return _this2.update(); 136 | }); 137 | } 138 | /** 139 | * Checks to see if the panto criteria has been met so that the effect can end. 140 | * 141 | * @returns {boolean} Returns true if the panto effect is finished or false otherwise. 142 | */ 143 | 144 | }, { 145 | key: "criteriaMet", 146 | value: function criteriaMet() { 147 | if (this.container.pivot.x > this._coordinates.x - 5 && this.container.pivot.x < this._coordinates.x + 5 && this.container.pivot.y > this._coordinates.y - 5 && this.container.pivot.y < this._coordinates.y + 5) return true; 148 | return false; 149 | } 150 | }]); 151 | 152 | return PanTo; 153 | }(_effect.Effect); 154 | 155 | exports.PanTo = PanTo; 156 | //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9lZmZlY3RzL3Bhbl90by50cyJdLCJuYW1lcyI6WyJQYW5UbyIsImNvbnRhaW5lciIsIngiLCJ5IiwiZHVyYXRpb24iLCJfY29vcmRpbmF0ZXMiLCJwaXZvdCIsIl94SXNHcmVhdGVyIiwiX3lJc0dyZWF0ZXIiLCJfZGlmZmVyZW5jZSIsIk1hdGgiLCJhYnMiLCJjcml0ZXJpYU1ldCIsImZpbmlzaGVkIiwiZGlzcGF0Y2giLCJjdXJyZW50IiwicGVyZm9ybWFuY2UiLCJub3ciLCJ0aW1lRGlmZlBlcmNlbnRhZ2UiLCJzdGFydGVkIiwidGltZURpZmZQZXJjZW50YWdlTmVnYXRpdmUiLCJ4UGFuQW1vdW50IiwieVBhbkFtb3VudCIsInVzZVJBRiIsImlkIiwicmVxdWVzdEFuaW1hdGlvbkZyYW1lIiwidXBkYXRlIiwiRWZmZWN0Il0sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7O0FBSUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUdBO0FBQ0E7QUFDQTtJQUNhQSxLOzs7OztBQUNYO0FBQ0Y7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQUdFO0FBQ0Y7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQUdFO0FBQ0Y7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTs7QUFHRTtBQUNGO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7O0FBR0U7QUFDRjtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0UsaUJBQVlDLFNBQVosRUFBa0NDLENBQWxDLEVBQTZDQyxDQUE3QyxFQUF3REMsUUFBeEQsRUFBMEU7QUFBQTs7QUFBQTs7QUFDeEUsOEJBQU1ILFNBQU47O0FBRHdFOztBQUFBOztBQUFBLGtFQW5CcEQsS0FtQm9EOztBQUFBLGtFQVJwRCxLQVFvRDs7QUFHeEUsVUFBS0ksWUFBTCxHQUFvQjtBQUFFSCxNQUFBQSxDQUFDLEVBQURBLENBQUY7QUFBS0MsTUFBQUEsQ0FBQyxFQUFEQTtBQUFMLEtBQXBCO0FBQ0EsVUFBS0MsUUFBTCxHQUFnQkEsUUFBaEI7QUFFQSxRQUFJLE1BQUtDLFlBQUwsQ0FBa0JILENBQWxCLEdBQXNCLE1BQUtELFNBQUwsQ0FBZUssS0FBZixDQUFxQkosQ0FBL0MsRUFBa0QsTUFBS0ssV0FBTCxHQUFtQixJQUFuQjtBQUNsRCxRQUFJLE1BQUtGLFlBQUwsQ0FBa0JGLENBQWxCLEdBQXNCLE1BQUtGLFNBQUwsQ0FBZUssS0FBZixDQUFxQkgsQ0FBL0MsRUFBa0QsTUFBS0ssV0FBTCxHQUFtQixJQUFuQjtBQUVsRCxVQUFLQyxXQUFMLEdBQW1CO0FBQUVQLE1BQUFBLENBQUMsRUFBRVEsSUFBSSxDQUFDQyxHQUFMLENBQVMsTUFBS04sWUFBTCxDQUFrQkgsQ0FBbEIsR0FBc0IsTUFBS0QsU0FBTCxDQUFlSyxLQUFmLENBQXFCSixDQUFwRCxDQUFMO0FBQTZEQyxNQUFBQSxDQUFDLEVBQUVPLElBQUksQ0FBQ0MsR0FBTCxDQUFTLE1BQUtOLFlBQUwsQ0FBa0JGLENBQWxCLEdBQXNCLE1BQUtGLFNBQUwsQ0FBZUssS0FBZixDQUFxQkgsQ0FBcEQ7QUFBaEUsS0FBbkI7QUFUd0U7QUFVekU7QUFFRDtBQUNGO0FBQ0E7Ozs7O1dBQ0Usa0JBQVM7QUFBQTs7QUFDUCxVQUFJLEtBQUtTLFdBQUwsRUFBSixFQUF3QjtBQUN0QixhQUFLQyxRQUFMLENBQWNDLFFBQWQ7QUFDQTtBQUNEOztBQUVELFdBQUtDLE9BQUwsR0FBZUMsV0FBVyxDQUFDQyxHQUFaLEVBQWY7QUFFQSxVQUFNQyxrQkFBa0IsR0FBRyxDQUFDLEtBQUtILE9BQUwsR0FBZSxLQUFLSSxPQUFyQixJQUFnQyxLQUFLZixRQUFoRTtBQUNBLFVBQU1nQiwwQkFBMEIsR0FBRyxDQUFDLEtBQUtoQixRQUFMLEdBQWdCLEtBQUtXLE9BQXRCLElBQWlDLEtBQUtYLFFBQXpFO0FBRUEsVUFBTWlCLFVBQVUsR0FBRyxLQUFLZCxXQUFMLEdBQW1CLEtBQUtFLFdBQUwsQ0FBaUJQLENBQWpCLEdBQXFCZ0Isa0JBQXhDLEdBQTZELEtBQUtULFdBQUwsQ0FBaUJQLENBQWpCLEdBQXFCa0IsMEJBQXJHO0FBQ0EsVUFBTUUsVUFBVSxHQUFHLEtBQUtkLFdBQUwsR0FBbUIsS0FBS0MsV0FBTCxDQUFpQk4sQ0FBakIsR0FBcUJlLGtCQUF4QyxHQUE2RCxLQUFLVCxXQUFMLENBQWlCTixDQUFqQixHQUFxQmlCLDBCQUFyRztBQUVBLFdBQUtuQixTQUFMLENBQWVLLEtBQWYsQ0FBcUJKLENBQXJCLEdBQXlCbUIsVUFBekI7QUFDQSxXQUFLcEIsU0FBTCxDQUFlSyxLQUFmLENBQXFCSCxDQUFyQixHQUF5Qm1CLFVBQXpCO0FBRUEsVUFBSSxLQUFLQyxNQUFULEVBQWlCLEtBQUtDLEVBQUwsR0FBVUMscUJBQXFCLENBQUM7QUFBQSxlQUFNLE1BQUksQ0FBQ0MsTUFBTCxFQUFOO0FBQUEsT0FBRCxDQUEvQjtBQUNsQjtBQUVEO0FBQ0Y7QUFDQTtBQUNBO0FBQ0E7Ozs7V0FDRSx1QkFBdUI7QUFDckIsVUFBSSxLQUFLekIsU0FBTCxDQUFlSyxLQUFmLENBQXFCSixDQUFyQixHQUF5QixLQUFLRyxZQUFMLENBQWtCSCxDQUFsQixHQUFzQixDQUEvQyxJQUFvRCxLQUFLRCxTQUFMLENBQWVLLEtBQWYsQ0FBcUJKLENBQXJCLEdBQXlCLEtBQUtHLFlBQUwsQ0FBa0JILENBQWxCLEdBQXNCLENBQW5HLElBQXlHLEtBQUtELFNBQUwsQ0FBZUssS0FBZixDQUFxQkgsQ0FBckIsR0FBeUIsS0FBS0UsWUFBTCxDQUFrQkYsQ0FBbEIsR0FBc0IsQ0FBeEosSUFBNkosS0FBS0YsU0FBTCxDQUFlSyxLQUFmLENBQXFCSCxDQUFyQixHQUF5QixLQUFLRSxZQUFMLENBQWtCRixDQUFsQixHQUFzQixDQUFoTixFQUFtTixPQUFPLElBQVA7QUFDbk4sYUFBTyxLQUFQO0FBQ0Q7Ozs7RUExRndCd0IsYyIsInNvdXJjZXNDb250ZW50IjpbIid1c2Ugc3RyaWN0J1xyXG5cclxuaW1wb3J0IHsgQ29udGFpbmVyIH0gZnJvbSAnQHBpeGkvZGlzcGxheSc7XHJcblxyXG5pbXBvcnQgeyBFZmZlY3QgfSBmcm9tICcuL2VmZmVjdCc7XHJcbmltcG9ydCB7IFZlY3RvciB9IGZyb20gJy4uL3ZlY3Rvcic7XHJcblxyXG4vKipcclxuICogQSBwYW5uaW5nIGVmZmVjdCB0aGF0IG1ha2VzIHRoZSBjYW1lcmEgZm9jdXMgb24gYSBwb2ludCBpbiB0aGUgY29udGFpbmVyLlxyXG4gKi9cclxuZXhwb3J0IGNsYXNzIFBhblRvIGV4dGVuZHMgRWZmZWN0IHtcclxuICAvKipcclxuICAgKiBUaGUgKHgsIHkpIGNvb3JkaW5hdGUgcGFpciB0byBwYW4gdG8uXHJcbiAgICogXHJcbiAgICogQHByaXZhdGVcclxuICAgKiBcclxuICAgKiBAcHJvcGVydHkge1ZlY3Rvcn1cclxuICAgKi9cclxuICBwcml2YXRlIF9jb29yZGluYXRlczogVmVjdG9yO1xyXG5cclxuICAvKipcclxuICAgKiBUaGUgZGlmZmVyZW5jZSBpbiBjb29yZGluYXRlcyBmcm9tIHRoZSBjdXJyZW50IGFuZCB0aGUgZGVzaXJlZC5cclxuICAgKiBcclxuICAgKiBAcHJpdmF0ZVxyXG4gICAqIFxyXG4gICAqIEBwcm9wZXJ0eSB7VmVjdG9yfVxyXG4gICAqL1xyXG4gIHByaXZhdGUgX2RpZmZlcmVuY2U6IFZlY3RvcjtcclxuXHJcbiAgLyoqXHJcbiAgICogSW5kaWNhdGVzIHdoZXRoZXIgdGhlIGRlc2lyZWQgeCBpcyBncmVhdGVyIHRoYW4gdGhlIGN1cnJlbnQgeCBvciBub3QuXHJcbiAgICogXHJcbiAgICogQHByaXZhdGVcclxuICAgKiBcclxuICAgKiBAcHJvcGVydHkge2Jvb2xlYW59XHJcbiAgICogXHJcbiAgICogQGRlZmF1bHQgZmFsc2VcclxuICAgKi9cclxuICBwcml2YXRlIF94SXNHcmVhdGVyID0gZmFsc2U7XHJcblxyXG4gIC8qKlxyXG4gICAqIEluZGljYXRlcyB3aGV0aGVyIHRoZSBkZXNpcmVkIHkgaXMgZ3JlYXRlciB0aGFuIHRoZSBjdXJyZW50IHkgb3Igbm90LlxyXG4gICAqIFxyXG4gICAqIEBwcml2YXRlXHJcbiAgICogXHJcbiAgICogQHByb3BlcnR5IHtib29sZWFufVxyXG4gICAqIFxyXG4gICAqIEBkZWZhdWx0IGZhbHNlXHJcbiAgICovXHJcbiAgcHJpdmF0ZSBfeUlzR3JlYXRlciA9IGZhbHNlO1xyXG5cclxuICAvKipcclxuICAgKiBAcGFyYW0ge0NvbnRhaW5lcn0gY29udGFpbmVyIEEgcmVmZXJlbmNlIHRvIHRoZSBjb250YWluZXIgdG8gYXBwbHkgdGhlIHBhbnRvIGVmZmVjdCB0by5cclxuICAgKiBAcGFyYW0ge251bWJlcn0geCBUaGUgeCBjb29yZGluYXRlIHRvIHBhbiB0by5cclxuICAgKiBAcGFyYW0ge251bWJlcn0geSBUaGUgeSBjb29yZGluYXRlIHRvIHBhbiB0by5cclxuICAgKiBAcGFyYW0ge251bWJlcn0gZHVyYXRpb24gVGhlIGFtb3VudCBvZiB0aW1lLCBpbiBtaWxsaXNlY29uZHMsIHRoYXQgdGhlIGVmZmVjdCBzaG91bGQgdGFrZS5cclxuICAgKi9cclxuICBjb25zdHJ1Y3Rvcihjb250YWluZXI6IENvbnRhaW5lciwgeDogbnVtYmVyLCB5OiBudW1iZXIsIGR1cmF0aW9uOiBudW1iZXIpIHtcclxuICAgIHN1cGVyKGNvbnRhaW5lcik7XHJcblxyXG4gICAgdGhpcy5fY29vcmRpbmF0ZXMgPSB7IHgsIHkgfTtcclxuICAgIHRoaXMuZHVyYXRpb24gPSBkdXJhdGlvbjtcclxuXHJcbiAgICBpZiAodGhpcy5fY29vcmRpbmF0ZXMueCA+IHRoaXMuY29udGFpbmVyLnBpdm90LngpIHRoaXMuX3hJc0dyZWF0ZXIgPSB0cnVlO1xyXG4gICAgaWYgKHRoaXMuX2Nvb3JkaW5hdGVzLnkgPiB0aGlzLmNvbnRhaW5lci5waXZvdC55KSB0aGlzLl95SXNHcmVhdGVyID0gdHJ1ZTtcclxuXHJcbiAgICB0aGlzLl9kaWZmZXJlbmNlID0geyB4OiBNYXRoLmFicyh0aGlzLl9jb29yZGluYXRlcy54IC0gdGhpcy5jb250YWluZXIucGl2b3QueCksIHk6IE1hdGguYWJzKHRoaXMuX2Nvb3JkaW5hdGVzLnkgLSB0aGlzLmNvbnRhaW5lci5waXZvdC55KSB9O1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogVXBkYXRlcyB0aGUgc3RhdHVzIG9mIHRoaXMgZWZmZWN0IG9uIGEgZnJhbWUgYnkgZnJhbWUgYmFzaXMuXHJcbiAgICovXHJcbiAgdXBkYXRlKCkge1xyXG4gICAgaWYgKHRoaXMuY3JpdGVyaWFNZXQoKSkge1xyXG4gICAgICB0aGlzLmZpbmlzaGVkLmRpc3BhdGNoKCk7XHJcbiAgICAgIHJldHVybjtcclxuICAgIH1cclxuXHJcbiAgICB0aGlzLmN1cnJlbnQgPSBwZXJmb3JtYW5jZS5ub3coKTtcclxuICAgIFxyXG4gICAgY29uc3QgdGltZURpZmZQZXJjZW50YWdlID0gKHRoaXMuY3VycmVudCAtIHRoaXMuc3RhcnRlZCkgLyB0aGlzLmR1cmF0aW9uO1xyXG4gICAgY29uc3QgdGltZURpZmZQZXJjZW50YWdlTmVnYXRpdmUgPSAodGhpcy5kdXJhdGlvbiAtIHRoaXMuY3VycmVudCkgLyB0aGlzLmR1cmF0aW9uO1xyXG5cclxuICAgIGNvbnN0IHhQYW5BbW91bnQgPSB0aGlzLl94SXNHcmVhdGVyID8gdGhpcy5fZGlmZmVyZW5jZS54ICogdGltZURpZmZQZXJjZW50YWdlIDogdGhpcy5fZGlmZmVyZW5jZS54ICogdGltZURpZmZQZXJjZW50YWdlTmVnYXRpdmU7XHJcbiAgICBjb25zdCB5UGFuQW1vdW50ID0gdGhpcy5feUlzR3JlYXRlciA/IHRoaXMuX2RpZmZlcmVuY2UueSAqIHRpbWVEaWZmUGVyY2VudGFnZSA6IHRoaXMuX2RpZmZlcmVuY2UueSAqIHRpbWVEaWZmUGVyY2VudGFnZU5lZ2F0aXZlO1xyXG5cclxuICAgIHRoaXMuY29udGFpbmVyLnBpdm90LnggPSB4UGFuQW1vdW50O1xyXG4gICAgdGhpcy5jb250YWluZXIucGl2b3QueSA9IHlQYW5BbW91bnQ7XHJcblxyXG4gICAgaWYgKHRoaXMudXNlUkFGKSB0aGlzLmlkID0gcmVxdWVzdEFuaW1hdGlvbkZyYW1lKCgpID0+IHRoaXMudXBkYXRlKCkpO1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogQ2hlY2tzIHRvIHNlZSBpZiB0aGUgcGFudG8gY3JpdGVyaWEgaGFzIGJlZW4gbWV0IHNvIHRoYXQgdGhlIGVmZmVjdCBjYW4gZW5kLlxyXG4gICAqIFxyXG4gICAqIEByZXR1cm5zIHtib29sZWFufSBSZXR1cm5zIHRydWUgaWYgdGhlIHBhbnRvIGVmZmVjdCBpcyBmaW5pc2hlZCBvciBmYWxzZSBvdGhlcndpc2UuXHJcbiAgICovXHJcbiAgY3JpdGVyaWFNZXQoKTogYm9vbGVhbiB7XHJcbiAgICBpZiAodGhpcy5jb250YWluZXIucGl2b3QueCA+IHRoaXMuX2Nvb3JkaW5hdGVzLnggLSA1ICYmIHRoaXMuY29udGFpbmVyLnBpdm90LnggPCB0aGlzLl9jb29yZGluYXRlcy54ICsgNSAgJiYgdGhpcy5jb250YWluZXIucGl2b3QueSA+IHRoaXMuX2Nvb3JkaW5hdGVzLnkgLSA1ICYmIHRoaXMuY29udGFpbmVyLnBpdm90LnkgPCB0aGlzLl9jb29yZGluYXRlcy55ICsgNSkgcmV0dXJuIHRydWU7XHJcbiAgICByZXR1cm4gZmFsc2U7XHJcbiAgfVxyXG59Il19 -------------------------------------------------------------------------------- /lib/effects/zoom_to.d.ts: -------------------------------------------------------------------------------- 1 | import { Container } from '@pixi/display'; 2 | import { Effect } from './effect'; 3 | /** 4 | * A zooming effect that involves the camera zooming in to a particular point on the container. 5 | */ 6 | export declare class ZoomTo extends Effect { 7 | /** 8 | * The zoom level to zoom to with values larger than 1 being zoomed in and values smaller than 1 being zoomed out. 9 | * 10 | * @private 11 | * 12 | * @property {Vector} 13 | */ 14 | private _desiredZoomLevel; 15 | /** 16 | * A reference to the easing function to use for this effect. 17 | * 18 | * @private 19 | * 20 | * @property {Function} 21 | */ 22 | private _easing; 23 | /** 24 | * A reference to the initial zoom level. 25 | * 26 | * @private 27 | * 28 | * @property {Vector} 29 | */ 30 | private _initialZoomLevel; 31 | /** 32 | * Indicates whether the desired x zoom level is greater than the current zoom level or not. 33 | * 34 | * @private 35 | * 36 | * @property {boolean} 37 | */ 38 | private _xIsGreater; 39 | /** 40 | * Indicates whether the desired y zoom level is greater than the current zoom level or not. 41 | * 42 | * @private 43 | * 44 | * @property {boolean} 45 | */ 46 | private _yIsGreater; 47 | /** 48 | * @param {Container} container A reference to the container to apply the zoomto effect to. 49 | * @param {number} xZoomLevel The zoom level to zoom horizontally with values larger than 1 being zoomed in and values smaller than 1 being zoomed out. 50 | * @param {number} yZoomLevel The zoom level to zoom vertically with values larger than 1 being zoomed in and values smaller than 1 being zoomed out. 51 | * @param {number} duration The amount of time, in milliseconds, that the effect should take. 52 | * @param {Function} [easing] The easing function that should be used. 53 | */ 54 | constructor(container: Container, xZoomLevel: number, yZoomLevel: number, duration: number, easing?: Function); 55 | /** 56 | * Updates the status of this effect on a frame by frame basis. 57 | */ 58 | update(): void; 59 | /** 60 | * Checks to see if the container's current zoom level is very close to the desired zoom level. 61 | * 62 | * We can't use container zoom == desired zoom because with the game loop we might miss that exact moment so we check a very small window. 63 | * 64 | * @private 65 | * 66 | * @returns {boolean} Returns true if the zoom criteria is met or false otherwise. 67 | */ 68 | criteriaMet(): boolean; 69 | } 70 | -------------------------------------------------------------------------------- /lib/effects/zoom_to.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } 4 | 5 | Object.defineProperty(exports, "__esModule", { 6 | value: true 7 | }); 8 | exports.ZoomTo = void 0; 9 | 10 | var _effect = require("./effect"); 11 | 12 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 13 | 14 | function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } 15 | 16 | function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } 17 | 18 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } 19 | 20 | function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } 21 | 22 | function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } 23 | 24 | function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } 25 | 26 | function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } 27 | 28 | function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } 29 | 30 | function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } 31 | 32 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 33 | 34 | /** 35 | * A zooming effect that involves the camera zooming in to a particular point on the container. 36 | */ 37 | var ZoomTo = /*#__PURE__*/function (_Effect) { 38 | _inherits(ZoomTo, _Effect); 39 | 40 | var _super = _createSuper(ZoomTo); 41 | 42 | /** 43 | * The zoom level to zoom to with values larger than 1 being zoomed in and values smaller than 1 being zoomed out. 44 | * 45 | * @private 46 | * 47 | * @property {Vector} 48 | */ 49 | 50 | /** 51 | * A reference to the easing function to use for this effect. 52 | * 53 | * @private 54 | * 55 | * @property {Function} 56 | */ 57 | 58 | /** 59 | * A reference to the initial zoom level. 60 | * 61 | * @private 62 | * 63 | * @property {Vector} 64 | */ 65 | 66 | /** 67 | * Indicates whether the desired x zoom level is greater than the current zoom level or not. 68 | * 69 | * @private 70 | * 71 | * @property {boolean} 72 | */ 73 | 74 | /** 75 | * Indicates whether the desired y zoom level is greater than the current zoom level or not. 76 | * 77 | * @private 78 | * 79 | * @property {boolean} 80 | */ 81 | 82 | /** 83 | * @param {Container} container A reference to the container to apply the zoomto effect to. 84 | * @param {number} xZoomLevel The zoom level to zoom horizontally with values larger than 1 being zoomed in and values smaller than 1 being zoomed out. 85 | * @param {number} yZoomLevel The zoom level to zoom vertically with values larger than 1 being zoomed in and values smaller than 1 being zoomed out. 86 | * @param {number} duration The amount of time, in milliseconds, that the effect should take. 87 | * @param {Function} [easing] The easing function that should be used. 88 | */ 89 | function ZoomTo(container, xZoomLevel, yZoomLevel, duration, easing) { 90 | var _this; 91 | 92 | _classCallCheck(this, ZoomTo); 93 | 94 | _this = _super.call(this, container); 95 | 96 | _defineProperty(_assertThisInitialized(_this), "_desiredZoomLevel", void 0); 97 | 98 | _defineProperty(_assertThisInitialized(_this), "_easing", void 0); 99 | 100 | _defineProperty(_assertThisInitialized(_this), "_initialZoomLevel", void 0); 101 | 102 | _defineProperty(_assertThisInitialized(_this), "_xIsGreater", false); 103 | 104 | _defineProperty(_assertThisInitialized(_this), "_yIsGreater", false); 105 | 106 | _this.duration = duration; 107 | _this._desiredZoomLevel = { 108 | x: xZoomLevel, 109 | y: yZoomLevel 110 | }; 111 | _this._easing = easing || _this.easeLinear; 112 | _this._initialZoomLevel = { 113 | x: _this.container.scale.x, 114 | y: _this.container.scale.y 115 | }; 116 | if (_this._desiredZoomLevel.x > _this._initialZoomLevel.x) _this._xIsGreater = true; 117 | if (_this._desiredZoomLevel.y > _this._initialZoomLevel.y) _this._yIsGreater = true; 118 | return _this; 119 | } 120 | /** 121 | * Updates the status of this effect on a frame by frame basis. 122 | */ 123 | 124 | 125 | _createClass(ZoomTo, [{ 126 | key: "update", 127 | value: function update() { 128 | var _this2 = this; 129 | 130 | if (this.criteriaMet() || this.current > this.duration) { 131 | this.finished.dispatch(); 132 | return; 133 | } 134 | 135 | this.current = performance.now(); 136 | var timeDiffPercentage = (this.current - this.started) / this.duration; 137 | 138 | var percentageThroughAnimation = this._easing(timeDiffPercentage); 139 | 140 | var xZoomAmount = this._desiredZoomLevel.x * percentageThroughAnimation; 141 | var yZoomAmount = this._desiredZoomLevel.y * percentageThroughAnimation; 142 | this.container.scale.x = this._xIsGreater ? this._initialZoomLevel.x + xZoomAmount / 2 : this._initialZoomLevel.x - xZoomAmount; 143 | this.container.scale.y = this._yIsGreater ? this._initialZoomLevel.y + yZoomAmount / 2 : this._initialZoomLevel.y - yZoomAmount; 144 | if (this.useRAF) this.id = requestAnimationFrame(function () { 145 | return _this2.update(); 146 | }); 147 | } 148 | /** 149 | * Checks to see if the container's current zoom level is very close to the desired zoom level. 150 | * 151 | * We can't use container zoom == desired zoom because with the game loop we might miss that exact moment so we check a very small window. 152 | * 153 | * @private 154 | * 155 | * @returns {boolean} Returns true if the zoom criteria is met or false otherwise. 156 | */ 157 | 158 | }, { 159 | key: "criteriaMet", 160 | value: function criteriaMet() { 161 | if (this.container.scale.x > this._desiredZoomLevel.x - 0.01 && this.container.scale.x < this._desiredZoomLevel.x + 0.01 && this.container.scale.y > this._desiredZoomLevel.y - 0.01 && this.container.scale.y < this._desiredZoomLevel.y + 0.01) return true; 162 | return false; 163 | } 164 | }]); 165 | 166 | return ZoomTo; 167 | }(_effect.Effect); 168 | 169 | exports.ZoomTo = ZoomTo; 170 | //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9lZmZlY3RzL3pvb21fdG8udHMiXSwibmFtZXMiOlsiWm9vbVRvIiwiY29udGFpbmVyIiwieFpvb21MZXZlbCIsInlab29tTGV2ZWwiLCJkdXJhdGlvbiIsImVhc2luZyIsIl9kZXNpcmVkWm9vbUxldmVsIiwieCIsInkiLCJfZWFzaW5nIiwiZWFzZUxpbmVhciIsIl9pbml0aWFsWm9vbUxldmVsIiwic2NhbGUiLCJfeElzR3JlYXRlciIsIl95SXNHcmVhdGVyIiwiY3JpdGVyaWFNZXQiLCJjdXJyZW50IiwiZmluaXNoZWQiLCJkaXNwYXRjaCIsInBlcmZvcm1hbmNlIiwibm93IiwidGltZURpZmZQZXJjZW50YWdlIiwic3RhcnRlZCIsInBlcmNlbnRhZ2VUaHJvdWdoQW5pbWF0aW9uIiwieFpvb21BbW91bnQiLCJ5Wm9vbUFtb3VudCIsInVzZVJBRiIsImlkIiwicmVxdWVzdEFuaW1hdGlvbkZyYW1lIiwidXBkYXRlIiwiRWZmZWN0Il0sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7O0FBSUE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUdBO0FBQ0E7QUFDQTtJQUNhQSxNOzs7OztBQUNYO0FBQ0Y7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQUdFO0FBQ0Y7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQUdFO0FBQ0Y7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQUdFO0FBQ0Y7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQUdFO0FBQ0Y7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQUdFO0FBQ0Y7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0Usa0JBQVlDLFNBQVosRUFBa0NDLFVBQWxDLEVBQXNEQyxVQUF0RCxFQUEwRUMsUUFBMUUsRUFBNEZDLE1BQTVGLEVBQStHO0FBQUE7O0FBQUE7O0FBQzdHLDhCQUFNSixTQUFOOztBQUQ2Rzs7QUFBQTs7QUFBQTs7QUFBQSxrRUFsQnpGLEtBa0J5Rjs7QUFBQSxrRUFUekYsS0FTeUY7O0FBRzdHLFVBQUtHLFFBQUwsR0FBZ0JBLFFBQWhCO0FBQ0EsVUFBS0UsaUJBQUwsR0FBeUI7QUFBRUMsTUFBQUEsQ0FBQyxFQUFFTCxVQUFMO0FBQWlCTSxNQUFBQSxDQUFDLEVBQUVMO0FBQXBCLEtBQXpCO0FBQ0EsVUFBS00sT0FBTCxHQUFlSixNQUFNLElBQUksTUFBS0ssVUFBOUI7QUFFQSxVQUFLQyxpQkFBTCxHQUF5QjtBQUFFSixNQUFBQSxDQUFDLEVBQUUsTUFBS04sU0FBTCxDQUFlVyxLQUFmLENBQXFCTCxDQUExQjtBQUE2QkMsTUFBQUEsQ0FBQyxFQUFFLE1BQUtQLFNBQUwsQ0FBZVcsS0FBZixDQUFxQko7QUFBckQsS0FBekI7QUFFQSxRQUFJLE1BQUtGLGlCQUFMLENBQXVCQyxDQUF2QixHQUEyQixNQUFLSSxpQkFBTCxDQUF1QkosQ0FBdEQsRUFBeUQsTUFBS00sV0FBTCxHQUFtQixJQUFuQjtBQUN6RCxRQUFJLE1BQUtQLGlCQUFMLENBQXVCRSxDQUF2QixHQUEyQixNQUFLRyxpQkFBTCxDQUF1QkgsQ0FBdEQsRUFBeUQsTUFBS00sV0FBTCxHQUFtQixJQUFuQjtBQVZvRDtBQVc5RztBQUVEO0FBQ0Y7QUFDQTs7Ozs7V0FDRSxrQkFBUztBQUFBOztBQUNQLFVBQUksS0FBS0MsV0FBTCxNQUFzQixLQUFLQyxPQUFMLEdBQWUsS0FBS1osUUFBOUMsRUFBd0Q7QUFDdEQsYUFBS2EsUUFBTCxDQUFjQyxRQUFkO0FBQ0E7QUFDRDs7QUFFRCxXQUFLRixPQUFMLEdBQWVHLFdBQVcsQ0FBQ0MsR0FBWixFQUFmO0FBRUEsVUFBTUMsa0JBQTBCLEdBQUcsQ0FBQyxLQUFLTCxPQUFMLEdBQWUsS0FBS00sT0FBckIsSUFBZ0MsS0FBS2xCLFFBQXhFOztBQUNBLFVBQU1tQiwwQkFBa0MsR0FBRyxLQUFLZCxPQUFMLENBQWFZLGtCQUFiLENBQTNDOztBQUVBLFVBQU1HLFdBQW1CLEdBQUcsS0FBS2xCLGlCQUFMLENBQXVCQyxDQUF2QixHQUEyQmdCLDBCQUF2RDtBQUNBLFVBQU1FLFdBQW1CLEdBQUcsS0FBS25CLGlCQUFMLENBQXVCRSxDQUF2QixHQUEyQmUsMEJBQXZEO0FBRUEsV0FBS3RCLFNBQUwsQ0FBZVcsS0FBZixDQUFxQkwsQ0FBckIsR0FBeUIsS0FBS00sV0FBTCxHQUFtQixLQUFLRixpQkFBTCxDQUF1QkosQ0FBdkIsR0FBMkJpQixXQUFXLEdBQUcsQ0FBNUQsR0FBZ0UsS0FBS2IsaUJBQUwsQ0FBdUJKLENBQXZCLEdBQTJCaUIsV0FBcEg7QUFDQSxXQUFLdkIsU0FBTCxDQUFlVyxLQUFmLENBQXFCSixDQUFyQixHQUF5QixLQUFLTSxXQUFMLEdBQW1CLEtBQUtILGlCQUFMLENBQXVCSCxDQUF2QixHQUEyQmlCLFdBQVcsR0FBRyxDQUE1RCxHQUFnRSxLQUFLZCxpQkFBTCxDQUF1QkgsQ0FBdkIsR0FBMkJpQixXQUFwSDtBQUVBLFVBQUksS0FBS0MsTUFBVCxFQUFpQixLQUFLQyxFQUFMLEdBQVVDLHFCQUFxQixDQUFDO0FBQUEsZUFBTSxNQUFJLENBQUNDLE1BQUwsRUFBTjtBQUFBLE9BQUQsQ0FBL0I7QUFDbEI7QUFFRDtBQUNGO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7Ozs7V0FDRSx1QkFBdUI7QUFDckIsVUFDRyxLQUFLNUIsU0FBTCxDQUFlVyxLQUFmLENBQXFCTCxDQUFyQixHQUF5QixLQUFLRCxpQkFBTCxDQUF1QkMsQ0FBdkIsR0FBMkIsSUFBcEQsSUFBNEQsS0FBS04sU0FBTCxDQUFlVyxLQUFmLENBQXFCTCxDQUFyQixHQUF5QixLQUFLRCxpQkFBTCxDQUF1QkMsQ0FBdkIsR0FBMkIsSUFBakgsSUFDQyxLQUFLTixTQUFMLENBQWVXLEtBQWYsQ0FBcUJKLENBQXJCLEdBQXlCLEtBQUtGLGlCQUFMLENBQXVCRSxDQUF2QixHQUEyQixJQUFwRCxJQUE0RCxLQUFLUCxTQUFMLENBQWVXLEtBQWYsQ0FBcUJKLENBQXJCLEdBQXlCLEtBQUtGLGlCQUFMLENBQXVCRSxDQUF2QixHQUEyQixJQUZuSCxFQUdFLE9BQU8sSUFBUDtBQUVGLGFBQU8sS0FBUDtBQUNEOzs7O0VBekd5QnNCLGMiLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIHN0cmljdCdcclxuXHJcbmltcG9ydCB7IENvbnRhaW5lciB9IGZyb20gJ0BwaXhpL2Rpc3BsYXknO1xyXG5cclxuaW1wb3J0IHsgRWZmZWN0IH0gZnJvbSAnLi9lZmZlY3QnO1xyXG5pbXBvcnQgeyBWZWN0b3IgfSBmcm9tICcuLi92ZWN0b3InO1xyXG5cclxuLyoqXHJcbiAqIEEgem9vbWluZyBlZmZlY3QgdGhhdCBpbnZvbHZlcyB0aGUgY2FtZXJhIHpvb21pbmcgaW4gdG8gYSBwYXJ0aWN1bGFyIHBvaW50IG9uIHRoZSBjb250YWluZXIuXHJcbiAqL1xyXG5leHBvcnQgY2xhc3MgWm9vbVRvIGV4dGVuZHMgRWZmZWN0IHtcclxuICAvKipcclxuICAgKiBUaGUgem9vbSBsZXZlbCB0byB6b29tIHRvIHdpdGggdmFsdWVzIGxhcmdlciB0aGFuIDEgYmVpbmcgem9vbWVkIGluIGFuZCB2YWx1ZXMgc21hbGxlciB0aGFuIDEgYmVpbmcgem9vbWVkIG91dC5cclxuICAgKiBcclxuICAgKiBAcHJpdmF0ZVxyXG4gICAqIFxyXG4gICAqIEBwcm9wZXJ0eSB7VmVjdG9yfVxyXG4gICAqL1xyXG4gIHByaXZhdGUgX2Rlc2lyZWRab29tTGV2ZWw6IFZlY3RvcjtcclxuXHJcbiAgLyoqXHJcbiAgICogQSByZWZlcmVuY2UgdG8gdGhlIGVhc2luZyBmdW5jdGlvbiB0byB1c2UgZm9yIHRoaXMgZWZmZWN0LlxyXG4gICAqIFxyXG4gICAqIEBwcml2YXRlXHJcbiAgICogXHJcbiAgICogQHByb3BlcnR5IHtGdW5jdGlvbn1cclxuICAgKi9cclxuICBwcml2YXRlIF9lYXNpbmc6IEZ1bmN0aW9uO1xyXG5cclxuICAvKipcclxuICAgKiBBIHJlZmVyZW5jZSB0byB0aGUgaW5pdGlhbCB6b29tIGxldmVsLlxyXG4gICAqIFxyXG4gICAqIEBwcml2YXRlXHJcbiAgICogXHJcbiAgICogQHByb3BlcnR5IHtWZWN0b3J9XHJcbiAgICovXHJcbiAgcHJpdmF0ZSBfaW5pdGlhbFpvb21MZXZlbDogVmVjdG9yO1xyXG5cclxuICAvKipcclxuICAgKiBJbmRpY2F0ZXMgd2hldGhlciB0aGUgZGVzaXJlZCB4IHpvb20gbGV2ZWwgaXMgZ3JlYXRlciB0aGFuIHRoZSBjdXJyZW50IHpvb20gbGV2ZWwgb3Igbm90LlxyXG4gICAqIFxyXG4gICAqIEBwcml2YXRlXHJcbiAgICogXHJcbiAgICogQHByb3BlcnR5IHtib29sZWFufVxyXG4gICAqL1xyXG4gIHByaXZhdGUgX3hJc0dyZWF0ZXIgPSBmYWxzZTtcclxuXHJcbiAgLyoqXHJcbiAgICogSW5kaWNhdGVzIHdoZXRoZXIgdGhlIGRlc2lyZWQgeSB6b29tIGxldmVsIGlzIGdyZWF0ZXIgdGhhbiB0aGUgY3VycmVudCB6b29tIGxldmVsIG9yIG5vdC5cclxuICAgKiBcclxuICAgKiBAcHJpdmF0ZVxyXG4gICAqIFxyXG4gICAqIEBwcm9wZXJ0eSB7Ym9vbGVhbn1cclxuICAgKi9cclxuICBwcml2YXRlIF95SXNHcmVhdGVyID0gZmFsc2U7XHJcblxyXG4gIC8qKlxyXG4gICAqIEBwYXJhbSB7Q29udGFpbmVyfSBjb250YWluZXIgQSByZWZlcmVuY2UgdG8gdGhlIGNvbnRhaW5lciB0byBhcHBseSB0aGUgem9vbXRvIGVmZmVjdCB0by5cclxuICAgKiBAcGFyYW0ge251bWJlcn0geFpvb21MZXZlbCBUaGUgem9vbSBsZXZlbCB0byB6b29tIGhvcml6b250YWxseSB3aXRoIHZhbHVlcyBsYXJnZXIgdGhhbiAxIGJlaW5nIHpvb21lZCBpbiBhbmQgdmFsdWVzIHNtYWxsZXIgdGhhbiAxIGJlaW5nIHpvb21lZCBvdXQuXHJcbiAgICogQHBhcmFtIHtudW1iZXJ9IHlab29tTGV2ZWwgVGhlIHpvb20gbGV2ZWwgdG8gem9vbSB2ZXJ0aWNhbGx5IHdpdGggdmFsdWVzIGxhcmdlciB0aGFuIDEgYmVpbmcgem9vbWVkIGluIGFuZCB2YWx1ZXMgc21hbGxlciB0aGFuIDEgYmVpbmcgem9vbWVkIG91dC5cclxuICAgKiBAcGFyYW0ge251bWJlcn0gZHVyYXRpb24gVGhlIGFtb3VudCBvZiB0aW1lLCBpbiBtaWxsaXNlY29uZHMsIHRoYXQgdGhlIGVmZmVjdCBzaG91bGQgdGFrZS5cclxuICAgKiBAcGFyYW0ge0Z1bmN0aW9ufSBbZWFzaW5nXSBUaGUgZWFzaW5nIGZ1bmN0aW9uIHRoYXQgc2hvdWxkIGJlIHVzZWQuXHJcbiAgICovXHJcbiAgY29uc3RydWN0b3IoY29udGFpbmVyOiBDb250YWluZXIsIHhab29tTGV2ZWw6IG51bWJlciwgeVpvb21MZXZlbDogbnVtYmVyLCBkdXJhdGlvbjogbnVtYmVyLCBlYXNpbmc/OiBGdW5jdGlvbikge1xyXG4gICAgc3VwZXIoY29udGFpbmVyKTtcclxuXHJcbiAgICB0aGlzLmR1cmF0aW9uID0gZHVyYXRpb247XHJcbiAgICB0aGlzLl9kZXNpcmVkWm9vbUxldmVsID0geyB4OiB4Wm9vbUxldmVsLCB5OiB5Wm9vbUxldmVsIH07XHJcbiAgICB0aGlzLl9lYXNpbmcgPSBlYXNpbmcgfHwgdGhpcy5lYXNlTGluZWFyO1xyXG5cclxuICAgIHRoaXMuX2luaXRpYWxab29tTGV2ZWwgPSB7IHg6IHRoaXMuY29udGFpbmVyLnNjYWxlLngsIHk6IHRoaXMuY29udGFpbmVyLnNjYWxlLnkgfTtcclxuXHJcbiAgICBpZiAodGhpcy5fZGVzaXJlZFpvb21MZXZlbC54ID4gdGhpcy5faW5pdGlhbFpvb21MZXZlbC54KSB0aGlzLl94SXNHcmVhdGVyID0gdHJ1ZTtcclxuICAgIGlmICh0aGlzLl9kZXNpcmVkWm9vbUxldmVsLnkgPiB0aGlzLl9pbml0aWFsWm9vbUxldmVsLnkpIHRoaXMuX3lJc0dyZWF0ZXIgPSB0cnVlO1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogVXBkYXRlcyB0aGUgc3RhdHVzIG9mIHRoaXMgZWZmZWN0IG9uIGEgZnJhbWUgYnkgZnJhbWUgYmFzaXMuXHJcbiAgICovXHJcbiAgdXBkYXRlKCkge1xyXG4gICAgaWYgKHRoaXMuY3JpdGVyaWFNZXQoKSB8fCB0aGlzLmN1cnJlbnQgPiB0aGlzLmR1cmF0aW9uKSB7XHJcbiAgICAgIHRoaXMuZmluaXNoZWQuZGlzcGF0Y2goKTtcclxuICAgICAgcmV0dXJuO1xyXG4gICAgfVxyXG5cclxuICAgIHRoaXMuY3VycmVudCA9IHBlcmZvcm1hbmNlLm5vdygpO1xyXG5cclxuICAgIGNvbnN0IHRpbWVEaWZmUGVyY2VudGFnZTogbnVtYmVyID0gKHRoaXMuY3VycmVudCAtIHRoaXMuc3RhcnRlZCkgLyB0aGlzLmR1cmF0aW9uO1xyXG4gICAgY29uc3QgcGVyY2VudGFnZVRocm91Z2hBbmltYXRpb246IG51bWJlciA9IHRoaXMuX2Vhc2luZyh0aW1lRGlmZlBlcmNlbnRhZ2UpO1xyXG5cclxuICAgIGNvbnN0IHhab29tQW1vdW50OiBudW1iZXIgPSB0aGlzLl9kZXNpcmVkWm9vbUxldmVsLnggKiBwZXJjZW50YWdlVGhyb3VnaEFuaW1hdGlvbjtcclxuICAgIGNvbnN0IHlab29tQW1vdW50OiBudW1iZXIgPSB0aGlzLl9kZXNpcmVkWm9vbUxldmVsLnkgKiBwZXJjZW50YWdlVGhyb3VnaEFuaW1hdGlvbjtcclxuXHJcbiAgICB0aGlzLmNvbnRhaW5lci5zY2FsZS54ID0gdGhpcy5feElzR3JlYXRlciA/IHRoaXMuX2luaXRpYWxab29tTGV2ZWwueCArIHhab29tQW1vdW50IC8gMiA6IHRoaXMuX2luaXRpYWxab29tTGV2ZWwueCAtIHhab29tQW1vdW50O1xyXG4gICAgdGhpcy5jb250YWluZXIuc2NhbGUueSA9IHRoaXMuX3lJc0dyZWF0ZXIgPyB0aGlzLl9pbml0aWFsWm9vbUxldmVsLnkgKyB5Wm9vbUFtb3VudCAvIDIgOiB0aGlzLl9pbml0aWFsWm9vbUxldmVsLnkgLSB5Wm9vbUFtb3VudDtcclxuXHJcbiAgICBpZiAodGhpcy51c2VSQUYpIHRoaXMuaWQgPSByZXF1ZXN0QW5pbWF0aW9uRnJhbWUoKCkgPT4gdGhpcy51cGRhdGUoKSk7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBDaGVja3MgdG8gc2VlIGlmIHRoZSBjb250YWluZXIncyBjdXJyZW50IHpvb20gbGV2ZWwgaXMgdmVyeSBjbG9zZSB0byB0aGUgZGVzaXJlZCB6b29tIGxldmVsLlxyXG4gICAqIFxyXG4gICAqIFdlIGNhbid0IHVzZSBjb250YWluZXIgem9vbSA9PSBkZXNpcmVkIHpvb20gYmVjYXVzZSB3aXRoIHRoZSBnYW1lIGxvb3Agd2UgbWlnaHQgbWlzcyB0aGF0IGV4YWN0IG1vbWVudCBzbyB3ZSBjaGVjayBhIHZlcnkgc21hbGwgd2luZG93LlxyXG4gICAqIFxyXG4gICAqIEBwcml2YXRlXHJcbiAgICogXHJcbiAgICogQHJldHVybnMge2Jvb2xlYW59IFJldHVybnMgdHJ1ZSBpZiB0aGUgem9vbSBjcml0ZXJpYSBpcyBtZXQgb3IgZmFsc2Ugb3RoZXJ3aXNlLlxyXG4gICAqL1xyXG4gIGNyaXRlcmlhTWV0KCk6IGJvb2xlYW4ge1xyXG4gICAgaWYgKFxyXG4gICAgICAodGhpcy5jb250YWluZXIuc2NhbGUueCA+IHRoaXMuX2Rlc2lyZWRab29tTGV2ZWwueCAtIDAuMDEgJiYgdGhpcy5jb250YWluZXIuc2NhbGUueCA8IHRoaXMuX2Rlc2lyZWRab29tTGV2ZWwueCArIDAuMDEpICYmXHJcbiAgICAgICh0aGlzLmNvbnRhaW5lci5zY2FsZS55ID4gdGhpcy5fZGVzaXJlZFpvb21MZXZlbC55IC0gMC4wMSAmJiB0aGlzLmNvbnRhaW5lci5zY2FsZS55IDwgdGhpcy5fZGVzaXJlZFpvb21MZXZlbC55ICsgMC4wMSkgXHJcbiAgICApIHJldHVybiB0cnVlO1xyXG5cclxuICAgIHJldHVybiBmYWxzZTtcclxuICB9XHJcbn0iXX0= -------------------------------------------------------------------------------- /lib/index.d.ts: -------------------------------------------------------------------------------- 1 | import { Camera } from './camera'; 2 | import { Effect } from './effects/effect'; 3 | import { Fade } from './effects/fade'; 4 | import { Shake } from './effects/shake'; 5 | import { PanTo } from './effects/pan_to'; 6 | import { Rotate } from './effects/rotate'; 7 | import { ZoomTo } from './effects/zoom_to'; 8 | export { Effect, Fade, Shake, PanTo, Rotate, ZoomTo, Camera, }; 9 | -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | Object.defineProperty(exports, "Camera", { 7 | enumerable: true, 8 | get: function get() { 9 | return _camera.Camera; 10 | } 11 | }); 12 | Object.defineProperty(exports, "Effect", { 13 | enumerable: true, 14 | get: function get() { 15 | return _effect.Effect; 16 | } 17 | }); 18 | Object.defineProperty(exports, "Fade", { 19 | enumerable: true, 20 | get: function get() { 21 | return _fade.Fade; 22 | } 23 | }); 24 | Object.defineProperty(exports, "Shake", { 25 | enumerable: true, 26 | get: function get() { 27 | return _shake.Shake; 28 | } 29 | }); 30 | Object.defineProperty(exports, "PanTo", { 31 | enumerable: true, 32 | get: function get() { 33 | return _pan_to.PanTo; 34 | } 35 | }); 36 | Object.defineProperty(exports, "Rotate", { 37 | enumerable: true, 38 | get: function get() { 39 | return _rotate.Rotate; 40 | } 41 | }); 42 | Object.defineProperty(exports, "ZoomTo", { 43 | enumerable: true, 44 | get: function get() { 45 | return _zoom_to.ZoomTo; 46 | } 47 | }); 48 | 49 | var _camera = require("./camera"); 50 | 51 | var _effect = require("./effects/effect"); 52 | 53 | var _fade = require("./effects/fade"); 54 | 55 | var _shake = require("./effects/shake"); 56 | 57 | var _pan_to = require("./effects/pan_to"); 58 | 59 | var _rotate = require("./effects/rotate"); 60 | 61 | var _zoom_to = require("./effects/zoom_to"); 62 | //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBRUE7O0FBRUE7O0FBQ0E7O0FBQ0E7O0FBQ0E7O0FBQ0E7O0FBQ0EiLCJzb3VyY2VzQ29udGVudCI6WyIndXNlIHN0cmljdCdcclxuXHJcbmltcG9ydCB7IENhbWVyYSB9IGZyb20gJy4vY2FtZXJhJztcclxuXHJcbmltcG9ydCB7IEVmZmVjdCB9IGZyb20gJy4vZWZmZWN0cy9lZmZlY3QnO1xyXG5pbXBvcnQgeyBGYWRlIH0gZnJvbSAnLi9lZmZlY3RzL2ZhZGUnO1xyXG5pbXBvcnQgeyBTaGFrZSB9IGZyb20gJy4vZWZmZWN0cy9zaGFrZSc7XHJcbmltcG9ydCB7IFBhblRvIH0gZnJvbSAnLi9lZmZlY3RzL3Bhbl90byc7XHJcbmltcG9ydCB7IFJvdGF0ZSB9IGZyb20gJy4vZWZmZWN0cy9yb3RhdGUnO1xyXG5pbXBvcnQgeyBab29tVG8gfSBmcm9tICcuL2VmZmVjdHMvem9vbV90byc7XHJcblxyXG5leHBvcnQge1xyXG4gICAgLy8gRWZmZWN0c1xyXG4gICAgRWZmZWN0LFxyXG4gICAgRmFkZSxcclxuICAgIFNoYWtlLFxyXG4gICAgUGFuVG8sXHJcbiAgICBSb3RhdGUsXHJcbiAgICBab29tVG8sXHJcbiAgICAvLyBNYWluXHJcbiAgICBDYW1lcmEsXHJcbn0iXX0= -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pixi-game-camera", 3 | "version": "1.0.2", 4 | "description": "A flexible and non-opinionated way to add camera effects to your PIXI application via containers.", 5 | "main": "index.js", 6 | "scripts": { 7 | "rm:lib": "rm -rf lib", 8 | "rm:bundle": "rm -rf pixi-game-camera.js", 9 | "tsconfig": "tsc --init --declaration --allowSyntheticDefaultImports --target esnext --outDir lib", 10 | "type-check": "tsc --noEmit", 11 | "type-check:watch": "npm run type-check -- --watch", 12 | "build": "npm run rm:lib && npm run build:types && npm run build:js", 13 | "build:types": "tsc --emitDeclarationOnly", 14 | "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline", 15 | "bundle": "npm run rm:bundle && rollup -c", 16 | "bundle:watch": "rollup -c --watch", 17 | "test": "node test/server.js" 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "git@github.com:robertcorponoi/pixi-game-camera.git" 22 | }, 23 | "keywords": [ 24 | "pixi", 25 | "PIXI", 26 | "pixi.js", 27 | "game", 28 | "camera", 29 | "shake", 30 | "fade", 31 | "zoom", 32 | "pan", 33 | "rotate" 34 | ], 35 | "author": "Robert Corponoi", 36 | "license": "MIT", 37 | "module": "pixi-game-camera.js", 38 | "typings": "lib/index.d.ts", 39 | "devDependencies": { 40 | "@babel/cli": "^7.12.16", 41 | "@babel/core": "^7.12.16", 42 | "@babel/plugin-proposal-class-properties": "^7.12.13", 43 | "@babel/plugin-proposal-numeric-separator": "^7.12.13", 44 | "@babel/plugin-proposal-object-rest-spread": "^7.12.13", 45 | "@babel/preset-env": "^7.12.16", 46 | "@babel/preset-typescript": "^7.12.16", 47 | "@pixi/core": "^5.3.7", 48 | "@pixi/display": "^5.3.7", 49 | "@pixi/sprite": "^5.3.7", 50 | "@pixi/ticker": "^5.3.7", 51 | "@rollup/plugin-babel": "^5.2.3", 52 | "@rollup/plugin-commonjs": "^17.1.0", 53 | "@rollup/plugin-node-resolve": "^11.1.1", 54 | "fastify": "^3.11.0", 55 | "fastify-static": "^3.4.0", 56 | "rollup": "^2.39.0", 57 | "rollup-plugin-terser": "^7.0.2", 58 | "typescript": "^4.1.5" 59 | }, 60 | "dependencies": { 61 | "hypergiant": "^3.1.0" 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /pixi-game-camera.js: -------------------------------------------------------------------------------- 1 | function t(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function e(t,e){for(var i=0;i1&&"undefined"==typeof MSStream}; 2 | /*! 3 | * @pixi/settings - v5.3.7 4 | * Compiled Tue, 29 Dec 2020 19:30:11 UTC 5 | * 6 | * @pixi/settings is licensed under the MIT License. 7 | * http://www.opensource.org/licenses/mit-license 8 | */ 9 | var I=function(t){var e={userAgent:"",platform:"",maxTouchPoints:0};t||"undefined"==typeof navigator?"string"==typeof t?e.userAgent=t:t&&t.userAgent&&(e={userAgent:t.userAgent,platform:t.platform,maxTouchPoints:t.maxTouchPoints||0}):e={userAgent:navigator.userAgent,platform:navigator.platform,maxTouchPoints:navigator.maxTouchPoints||0};var i=e.userAgent,n=i.split("[FBAN");void 0!==n[1]&&(i=n[0]),void 0!==(n=i.split("Twitter"))[1]&&(i=n[0]);var r=function(t){return function(e){return e.test(t)}}(i),s={apple:{phone:r(c)&&!r(m),ipod:r(d),tablet:!r(c)&&(r(l)||k(e))&&!r(m),universal:r(f),device:(r(c)||r(d)||r(l)||r(f)||k(e))&&!r(m)},amazon:{phone:r(v),tablet:!r(v)&&r(y),device:r(v)||r(y)},android:{phone:!r(m)&&r(v)||!r(m)&&r(p),tablet:!r(m)&&!r(v)&&!r(p)&&(r(y)||r(_)),device:!r(m)&&(r(v)||r(y)||r(p)||r(_))||r(/\bokhttp\b/i)},windows:{phone:r(m),tablet:r(x),device:r(m)||r(x)},other:{blackberry:r(b),blackberry10:r(g),opera:r(M),firefox:r(S),chrome:r(A),device:r(b)||r(g)||r(M)||r(S)||r(A)},any:!1,phone:!1,tablet:!1};return s.any=s.apple.device||s.android.device||s.windows.device||s.other.device,s.phone=s.apple.phone||s.android.phone||s.windows.phone,s.tablet=s.apple.tablet||s.android.tablet||s.windows.tablet,s}(window.navigator);var T,O={MIPMAP_TEXTURES:1,ANISOTROPIC_LEVEL:0,RESOLUTION:1,FILTER_RESOLUTION:1,SPRITE_MAX_TEXTURES:function(t){var e=!0;if(I.tablet||I.phone){var i;if(I.apple.device)if(i=navigator.userAgent.match(/OS (\d+)_(\d+)?/))parseInt(i[1],10)<11&&(e=!1);if(I.android.device)if(i=navigator.userAgent.match(/Android\s([0-9.]*)/))parseInt(i[1],10)<7&&(e=!1)}return e?t:4}(32),SPRITE_BATCH_SIZE:4096,RENDER_OPTIONS:{view:null,antialias:!1,autoDensity:!1,transparent:!1,backgroundColor:0,clearBeforeRender:!0,preserveDrawingBuffer:!1,width:800,height:600,legacy:!1},GC_MODE:0,GC_MAX_IDLE:3600,GC_MAX_CHECK_COUNT:600,WRAP_MODE:33071,SCALE_MODE:1,PRECISION_VERTEX:"highp",PRECISION_FRAGMENT:I.apple.device?"highp":"mediump",CAN_UPLOAD_SAME_BUFFER:!I.apple.device,CREATE_IMAGE_BITMAP:!1,ROUND_PIXELS:!1}; 10 | /*! 11 | * @pixi/ticker - v5.3.7 12 | * Compiled Tue, 29 Dec 2020 19:30:11 UTC 13 | * 14 | * @pixi/ticker is licensed under the MIT License. 15 | * http://www.opensource.org/licenses/mit-license 16 | */O.TARGET_FPMS=.06,function(t){t[t.INTERACTION=50]="INTERACTION",t[t.HIGH=25]="HIGH",t[t.NORMAL=0]="NORMAL",t[t.LOW=-25]="LOW",t[t.UTILITY=-50]="UTILITY"}(T||(T={}));var P=function(){function t(t,e,i,n){void 0===e&&(e=null),void 0===i&&(i=0),void 0===n&&(n=!1),this.fn=t,this.context=e,this.priority=i,this.once=n,this.next=null,this.previous=null,this._destroyed=!1}return t.prototype.match=function(t,e){return void 0===e&&(e=null),this.fn===t&&this.context===e},t.prototype.emit=function(t){this.fn&&(this.context?this.fn.call(this.context,t):this.fn(t));var e=this.next;return this.once&&this.destroy(!0),this._destroyed&&(this.next=null),e},t.prototype.connect=function(t){this.previous=t,t.next&&(t.next.previous=this),this.next=t.next,t.next=this},t.prototype.destroy=function(t){void 0===t&&(t=!1),this._destroyed=!0,this.fn=null,this.context=null,this.previous&&(this.previous.next=this.next),this.next&&(this.next.previous=this.previous);var e=this.next;return this.next=t?null:e,this.previous=null,e},t}();!function(){function t(){var t=this;this._head=new P(null,null,1/0),this._requestId=null,this._maxElapsedMS=100,this._minElapsedMS=0,this.autoStart=!1,this.deltaTime=1,this.deltaMS=1/O.TARGET_FPMS,this.elapsedMS=1/O.TARGET_FPMS,this.lastTime=-1,this.speed=1,this.started=!1,this._protected=!1,this._lastFrame=-1,this._tick=function(e){t._requestId=null,t.started&&(t.update(e),t.started&&null===t._requestId&&t._head.next&&(t._requestId=requestAnimationFrame(t._tick)))}}t.prototype._requestIfNeeded=function(){null===this._requestId&&this._head.next&&(this.lastTime=performance.now(),this._lastFrame=this.lastTime,this._requestId=requestAnimationFrame(this._tick))},t.prototype._cancelIfNeeded=function(){null!==this._requestId&&(cancelAnimationFrame(this._requestId),this._requestId=null)},t.prototype._startIfPossible=function(){this.started?this._requestIfNeeded():this.autoStart&&this.start()},t.prototype.add=function(t,e,i){return void 0===i&&(i=T.NORMAL),this._addListener(new P(t,e,i))},t.prototype.addOnce=function(t,e,i){return void 0===i&&(i=T.NORMAL),this._addListener(new P(t,e,i,!0))},t.prototype._addListener=function(t){var e=this._head.next,i=this._head;if(e){for(;e;){if(t.priority>e.priority){t.connect(i);break}i=e,e=e.next}t.previous||t.connect(i)}else t.connect(i);return this._startIfPossible(),this},t.prototype.remove=function(t,e){for(var i=this._head.next;i;)i=i.match(t,e)?i.destroy():i.next;return this._head.next||this._cancelIfNeeded(),this},Object.defineProperty(t.prototype,"count",{get:function(){if(!this._head)return 0;for(var t=0,e=this._head;e=e.next;)t++;return t},enumerable:!1,configurable:!0}),t.prototype.start=function(){this.started||(this.started=!0,this._requestIfNeeded())},t.prototype.stop=function(){this.started&&(this.started=!1,this._cancelIfNeeded())},t.prototype.destroy=function(){if(!this._protected){this.stop();for(var t=this._head.next;t;)t=t.destroy(!0);this._head.destroy(),this._head=null}},t.prototype.update=function(t){var e;if(void 0===t&&(t=performance.now()),t>this.lastTime){if((e=this.elapsedMS=t-this.lastTime)>this._maxElapsedMS&&(e=this._maxElapsedMS),e*=this.speed,this._minElapsedMS){var i=t-this._lastFrame|0;if(i0&&void 0!==arguments[0]?arguments[0]:{};t(this,e),n(this,"ticker",void 0),Object.assign(this,i)},w=function(){function e(i){t(this,e),n(this,"_options",void 0),n(this,"_ticker",void 0),this._options=new E(i),this._options.ticker&&(this._ticker=this._options.ticker)}return i(e,[{key:"effect",value:function(t){this._addToTicker(t)}},{key:"_addToTicker",value:function(t){var e,i=this,n=t.update.bind(t);this._ticker?(t.finished.add((function(){var t;return null===(t=i._ticker)||void 0===t?void 0:t.remove(n,i)})),null===(e=this._ticker)||void 0===e||e.add(n,this,T.NORMAL)):t.start()}}]),e}();var R=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")};function L(t,e){for(var i=0;i1&&void 0!==arguments[1]&&arguments[1];return this._tasks.push(new C(t,e)),this}},{key:"dispatch",value:function(){for(var t=0;td._opacity&&(d._fadeOut=!1),d}return i(o,[{key:"update",value:function(){var t=this;if(this.criteriaMet())return this._filter.alpha=this._opacity,void this.finished.dispatch();this.current=performance.now();var e=(this.current-this.started)/this.duration,i=1*this._easing(e);this._filter.alpha=this._fadeOut?i:this._initialOpacity-i,this.useRAF&&(this.id=requestAnimationFrame((function(){return t.update()})))}},{key:"criteriaMet",value:function(){return!!(this._fadeOut&&this._filter.alpha>=this._opacity-.01||!this._fadeOut&&this._filter.alpha<=this._opacity+.01)}}]),o}(),j=function(e){r(o,q);var s=u(o);function o(e,i,r){var h;return t(this,o),n(a(h=s.call(this,e)),"_intensity",5),n(a(h),"_initialPivot",void 0),h._intensity=i,h.duration=r,h._initialPivot={x:h.container.pivot.x,y:h.container.pivot.y},h.started=performance.now(),h}return i(o,[{key:"update",value:function(){var t=this;if(this.criteriaMet())return this.container.pivot.x=this._initialPivot.x,this.container.pivot.y=this._initialPivot.y,void this.finished.dispatch();this.current=performance.now();var e=Math.random()*this._intensity,i=Math.random()*this._intensity;this.container.pivot.x=e,this.container.pivot.y=i,this.useRAF&&(this.id=requestAnimationFrame((function(){return t.update()})))}},{key:"criteriaMet",value:function(){return this.current-this.started>=this.duration}}]),o}(),D=function(e){r(o,q);var s=u(o);function o(e,i,r,h){var u;return t(this,o),n(a(u=s.call(this,e)),"_coordinates",void 0),n(a(u),"_difference",void 0),n(a(u),"_xIsGreater",!1),n(a(u),"_yIsGreater",!1),u._coordinates={x:i,y:r},u.duration=h,u._coordinates.x>u.container.pivot.x&&(u._xIsGreater=!0),u._coordinates.y>u.container.pivot.y&&(u._yIsGreater=!0),u._difference={x:Math.abs(u._coordinates.x-u.container.pivot.x),y:Math.abs(u._coordinates.y-u.container.pivot.y)},u}return i(o,[{key:"update",value:function(){var t=this;if(this.criteriaMet())this.finished.dispatch();else{this.current=performance.now();var e=(this.current-this.started)/this.duration,i=(this.duration-this.current)/this.duration,n=this._xIsGreater?this._difference.x*e:this._difference.x*i,r=this._yIsGreater?this._difference.y*e:this._difference.y*i;this.container.pivot.x=n,this.container.pivot.y=r,this.useRAF&&(this.id=requestAnimationFrame((function(){return t.update()})))}}},{key:"criteriaMet",value:function(){return this.container.pivot.x>this._coordinates.x-5&&this.container.pivot.xthis._coordinates.y-5&&this.container.pivot.ythis._desiredAngle}}]),o}(),B=function(e){r(o,q);var s=u(o);function o(e,i,r,h,u){var c;return t(this,o),n(a(c=s.call(this,e)),"_desiredZoomLevel",void 0),n(a(c),"_easing",void 0),n(a(c),"_initialZoomLevel",void 0),n(a(c),"_xIsGreater",!1),n(a(c),"_yIsGreater",!1),c.duration=h,c._desiredZoomLevel={x:i,y:r},c._easing=u||c.easeLinear,c._initialZoomLevel={x:c.container.scale.x,y:c.container.scale.y},c._desiredZoomLevel.x>c._initialZoomLevel.x&&(c._xIsGreater=!0),c._desiredZoomLevel.y>c._initialZoomLevel.y&&(c._yIsGreater=!0),c}return i(o,[{key:"update",value:function(){var t=this;if(this.criteriaMet()||this.current>this.duration)this.finished.dispatch();else{this.current=performance.now();var e=(this.current-this.started)/this.duration,i=this._easing(e),n=this._desiredZoomLevel.x*i,r=this._desiredZoomLevel.y*i;this.container.scale.x=this._xIsGreater?this._initialZoomLevel.x+n/2:this._initialZoomLevel.x-n,this.container.scale.y=this._yIsGreater?this._initialZoomLevel.y+r/2:this._initialZoomLevel.y-r,this.useRAF&&(this.id=requestAnimationFrame((function(){return t.update()})))}}},{key:"criteriaMet",value:function(){return this.container.scale.x>this._desiredZoomLevel.x-.01&&this.container.scale.xthis._desiredZoomLevel.y-.01&&this.container.scale.y(...children: T): T[0]; 13 | } 14 | } -------------------------------------------------------------------------------- /src/@types/@pixi__sprite/index.d.ts: -------------------------------------------------------------------------------- 1 | declare module '@pixi/sprite' { 2 | import { Texture } from '@pixi/core'; 3 | 4 | export class Sprite { 5 | tint: number; 6 | alpha: number; 7 | width: number; 8 | height: number; 9 | 10 | constructor(texture: Texture) 11 | } 12 | } -------------------------------------------------------------------------------- /src/@types/@pixi__ticker/index.d.ts: -------------------------------------------------------------------------------- 1 | declare module '@pixi/ticker' { 2 | export enum UPDATE_PRIORITY { 3 | INTERACTION = 50, 4 | HIGH = 25, 5 | NORMAL = 0, 6 | LOW = -25, 7 | UTILITY = -50, 8 | } 9 | 10 | export type TickerCallback = (this: T, dt: number) => any; 11 | 12 | export class Ticker { 13 | add(fn: TickerCallback, context: T, priority: UPDATE_PRIORITY.NORMAL): this; 14 | remove(fn: TickerCallback, context: T): this; 15 | } 16 | } -------------------------------------------------------------------------------- /src/camera.ts: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | import { Ticker, UPDATE_PRIORITY } from '@pixi/ticker'; 4 | import { Options } from './options'; 5 | import { Effect } from './effects/effect'; 6 | 7 | /** 8 | * Camera that can be applied to a game/animation made with pixijs. 9 | */ 10 | export class Camera { 11 | /** 12 | * A reference to the options passed to camera pixi on initialization. 13 | * 14 | * @private 15 | * 16 | * @private {Options} 17 | */ 18 | private _options: Options; 19 | 20 | /** 21 | * A reference to the PIXI Ticker, if it's being used. 22 | * 23 | * @private 24 | * 25 | * @property {Ticker} 26 | */ 27 | private _ticker?: Ticker; 28 | 29 | /** 30 | * @param {Ticker} [options] A reference to the PIXI Ticker, if it's being used. 31 | */ 32 | constructor(options?: Object) { 33 | this._options = new Options(options); 34 | if (this._options.ticker) this._ticker = this._options.ticker; 35 | } 36 | 37 | /** 38 | * Runs a provided effect. 39 | * 40 | * @param {Effect} effect The instance of the effect to run. 41 | */ 42 | effect(effect: Effect) { 43 | this._addToTicker(effect); 44 | } 45 | 46 | /** 47 | * Adds an effect to the PIXI Ticker if it's being used and removes it when necessary. 48 | * 49 | * @private 50 | * 51 | * @param {Effect} effect The effect to add to the Ticker. 52 | */ 53 | private _addToTicker(effect: Effect) { 54 | const effectBound = effect.update.bind(effect); 55 | 56 | if (this._ticker) { 57 | effect.finished.add(() => this._ticker?.remove(effectBound, this)); 58 | this._ticker?.add(effectBound, this, UPDATE_PRIORITY.NORMAL); 59 | } else effect.start(); 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/effects/effect.ts: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | import { Container } from '@pixi/display'; 4 | import Hypergiant from 'hypergiant'; 5 | 6 | /** 7 | * A generic object that contains the properties and methods of all effects. 8 | */ 9 | export abstract class Effect { 10 | /** 11 | * The container that the effect is happening on. 12 | * 13 | * @property {Container} 14 | */ 15 | container: Container; 16 | 17 | /** 18 | * The duration of thie effect. 19 | * 20 | * @private 21 | * 22 | * @property {number} 23 | * 24 | * @default 0 25 | */ 26 | duration = 0; 27 | 28 | /** 29 | * A timestamp of when this effect was started. 30 | * 31 | * @property {DOMHighResTimeStamp} 32 | * 33 | * @default 0; 34 | */ 35 | started = 0; 36 | 37 | /** 38 | * A timestamp of when this effect was last run. 39 | * 40 | * @property {DOMHighResTimeStamp} 41 | * 42 | * @default 0 43 | */ 44 | current = 0; 45 | 46 | /** 47 | * A reference to the singal that is dispatched when this effect is finished. 48 | * 49 | * @property {Hypergiant} 50 | */ 51 | finished = new Hypergiant(); 52 | 53 | /** 54 | * Indicates whether requestAnimationFrame is being used or not. 55 | * 56 | * @property {boolean} 57 | * 58 | * @default false 59 | */ 60 | useRAF = false; 61 | 62 | /** 63 | * A reference to the requestAnimationFrame id if RAF is being used. 64 | * 65 | * @property {number} 66 | */ 67 | id?: number; 68 | 69 | /** 70 | * @param {Container} container The container that the effect is happening on. 71 | */ 72 | constructor(container: Container) { 73 | this.container = container; 74 | this.started = performance.now(); 75 | } 76 | 77 | /** 78 | * Starts the requestAnimationFrame loop to use this effect if a Ticker is not provided. 79 | */ 80 | start() { 81 | this.useRAF = true; 82 | this.finished.add(() => cancelAnimationFrame(this.id!)); 83 | 84 | this.update(); 85 | } 86 | 87 | /** 88 | * The default ease-linear easing function used if no easing function is provided. 89 | * 90 | * @param {number} t The percent we are currently through the animation. 91 | */ 92 | easeLinear(t: number) { 93 | return +t; 94 | } 95 | 96 | /** 97 | * Updates the effect frame by frame. 98 | * 99 | * @param {number} [delta] The delta value passed by the game loop. 100 | */ 101 | abstract update(delta?: number): void; 102 | 103 | /** 104 | * Checks to see if the effect has been achieved. 105 | * 106 | * @returns {boolean} Returns true if the effect is complete or false otherwise. 107 | */ 108 | abstract criteriaMet?(): boolean; 109 | } -------------------------------------------------------------------------------- /src/effects/fade.ts: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | import { Sprite } from '@pixi/sprite'; 4 | import { Container } from '@pixi/display'; 5 | 6 | import { Effect } from './effect'; 7 | 8 | /** 9 | * A panning effect that makes the camera focus on a point in the container. 10 | */ 11 | export class Fade extends Effect { 12 | /** 13 | * A reference to the camera's filter. 14 | * 15 | * @private 16 | * 17 | * @property {Sprite} 18 | */ 19 | private _filter: Sprite; 20 | 21 | /** 22 | * The color to fade to. 23 | * 24 | * @private 25 | * 26 | * @property {number} 27 | */ 28 | private _color: number; 29 | 30 | /** 31 | * The opacity to set the filter to. 32 | * 33 | * @private 34 | * 35 | * @property {number} 36 | */ 37 | private _opacity: number; 38 | 39 | /** 40 | * The easing function to use. 41 | * 42 | * @private 43 | * 44 | * @property {Function} 45 | */ 46 | private _easing: Function; 47 | 48 | /** 49 | * Indicates whether its fading in or out. 50 | * 51 | * @private 52 | * 53 | * @property {boolean} 54 | * 55 | * @default true 56 | */ 57 | private _fadeOut = true; 58 | 59 | /** 60 | * The initial opacity of the filter as of the start of this effect. 61 | * 62 | * @private 63 | * 64 | * @property {number} 65 | */ 66 | private _initialOpacity: number; 67 | 68 | /** 69 | * @param {Container} container A reference to the container to apply the fade effect to. 70 | * @param {Sprite} sprite A reference to the PIXI Sprite to use for the fade effect. 71 | * @param {number} color The hex of the color to fade to. 72 | * @param {number} duration The amount of time, in milliseconds, that the effect should take. 73 | * @param {Function} [easing] The easing function to use. 74 | */ 75 | constructor(container: Container, sprite: Sprite, color: number, opacity: number, duration: number, easing?: Function) { 76 | super(container); 77 | 78 | this._color = color; 79 | this._opacity = opacity; 80 | this.duration = duration; 81 | this._easing = easing || this.easeLinear; 82 | 83 | this._filter = sprite; 84 | 85 | this._filter.width = this.container.width; 86 | this._filter.height = this.container.height; 87 | this._filter.alpha = 0; 88 | 89 | this.container.addChild(this._filter); 90 | 91 | this._filter.tint = this._color; 92 | this._initialOpacity = this._filter.alpha; 93 | 94 | if (this._filter.alpha > this._opacity) this._fadeOut = false; 95 | } 96 | 97 | /** 98 | * Updates the status of this effect on a frame by frame basis. 99 | */ 100 | update() { 101 | if (this.criteriaMet()) { 102 | this._filter.alpha = this._opacity; 103 | this.finished.dispatch(); 104 | 105 | return; 106 | } 107 | 108 | this.current = performance.now(); 109 | 110 | const timeDiffPercentage = (this.current - this.started) / this.duration; 111 | const percentageThroughAnimation = this._easing(timeDiffPercentage); 112 | 113 | const fadeAmount = 1 * percentageThroughAnimation; 114 | this._filter.alpha = this._fadeOut ? fadeAmount : this._initialOpacity - fadeAmount; 115 | 116 | if (this.useRAF) this.id = requestAnimationFrame(() => this.update()); 117 | } 118 | 119 | /** 120 | * Checks to see if the fade effect is done or not. 121 | * 122 | * @returns {boolean} Returns true if the fade effect is done or not. 123 | */ 124 | criteriaMet(): boolean { 125 | if ((this._fadeOut && this._filter.alpha >= this._opacity - 0.01) || (!this._fadeOut && this._filter.alpha <= this._opacity + 0.01)) return true; 126 | return false; 127 | } 128 | } -------------------------------------------------------------------------------- /src/effects/pan_to.ts: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | import { Container } from '@pixi/display'; 4 | 5 | import { Effect } from './effect'; 6 | import { Vector } from '../vector'; 7 | 8 | /** 9 | * A panning effect that makes the camera focus on a point in the container. 10 | */ 11 | export class PanTo extends Effect { 12 | /** 13 | * The (x, y) coordinate pair to pan to. 14 | * 15 | * @private 16 | * 17 | * @property {Vector} 18 | */ 19 | private _coordinates: Vector; 20 | 21 | /** 22 | * The difference in coordinates from the current and the desired. 23 | * 24 | * @private 25 | * 26 | * @property {Vector} 27 | */ 28 | private _difference: Vector; 29 | 30 | /** 31 | * Indicates whether the desired x is greater than the current x or not. 32 | * 33 | * @private 34 | * 35 | * @property {boolean} 36 | * 37 | * @default false 38 | */ 39 | private _xIsGreater = false; 40 | 41 | /** 42 | * Indicates whether the desired y is greater than the current y or not. 43 | * 44 | * @private 45 | * 46 | * @property {boolean} 47 | * 48 | * @default false 49 | */ 50 | private _yIsGreater = false; 51 | 52 | /** 53 | * @param {Container} container A reference to the container to apply the panto effect to. 54 | * @param {number} x The x coordinate to pan to. 55 | * @param {number} y The y coordinate to pan to. 56 | * @param {number} duration The amount of time, in milliseconds, that the effect should take. 57 | */ 58 | constructor(container: Container, x: number, y: number, duration: number) { 59 | super(container); 60 | 61 | this._coordinates = { x, y }; 62 | this.duration = duration; 63 | 64 | if (this._coordinates.x > this.container.pivot.x) this._xIsGreater = true; 65 | if (this._coordinates.y > this.container.pivot.y) this._yIsGreater = true; 66 | 67 | this._difference = { x: Math.abs(this._coordinates.x - this.container.pivot.x), y: Math.abs(this._coordinates.y - this.container.pivot.y) }; 68 | } 69 | 70 | /** 71 | * Updates the status of this effect on a frame by frame basis. 72 | */ 73 | update() { 74 | if (this.criteriaMet()) { 75 | this.finished.dispatch(); 76 | return; 77 | } 78 | 79 | this.current = performance.now(); 80 | 81 | const timeDiffPercentage = (this.current - this.started) / this.duration; 82 | const timeDiffPercentageNegative = (this.duration - this.current) / this.duration; 83 | 84 | const xPanAmount = this._xIsGreater ? this._difference.x * timeDiffPercentage : this._difference.x * timeDiffPercentageNegative; 85 | const yPanAmount = this._yIsGreater ? this._difference.y * timeDiffPercentage : this._difference.y * timeDiffPercentageNegative; 86 | 87 | this.container.pivot.x = xPanAmount; 88 | this.container.pivot.y = yPanAmount; 89 | 90 | if (this.useRAF) this.id = requestAnimationFrame(() => this.update()); 91 | } 92 | 93 | /** 94 | * Checks to see if the panto criteria has been met so that the effect can end. 95 | * 96 | * @returns {boolean} Returns true if the panto effect is finished or false otherwise. 97 | */ 98 | criteriaMet(): boolean { 99 | if (this.container.pivot.x > this._coordinates.x - 5 && this.container.pivot.x < this._coordinates.x + 5 && this.container.pivot.y > this._coordinates.y - 5 && this.container.pivot.y < this._coordinates.y + 5) return true; 100 | return false; 101 | } 102 | } -------------------------------------------------------------------------------- /src/effects/rotate.ts: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | import { Container } from '@pixi/display'; 4 | 5 | import { Effect } from './effect'; 6 | import { Vector } from '../vector'; 7 | 8 | /** 9 | * A rotating effect that involves rotating the game a specified number of degrees. 10 | */ 11 | export class Rotate extends Effect { 12 | /** 13 | * A reference to the initial angle. 14 | * 15 | * @private 16 | * 17 | * @property {number} 18 | */ 19 | private _initialAngle: number; 20 | 21 | /** 22 | * The angle to rotate to, from 0 to 360 with 0 being the default state and 360 being all the way around back to the default state. 23 | * 24 | * @private 25 | * 26 | * @property {number} 27 | */ 28 | private _desiredAngle: number; 29 | 30 | /** 31 | * The initial pivot of the container. 32 | * 33 | * @private 34 | * 35 | * @property {Vector} 36 | */ 37 | private _initialPivot: Vector; 38 | 39 | /** 40 | * A reference to the easing function to use for this effect. 41 | * 42 | * @private 43 | * 44 | * @property {Function} 45 | */ 46 | private _easing: Function; 47 | 48 | /** 49 | * @param {Container} container A reference to the container to apply the rotate effect to. 50 | * @param {number} angle The angle to rotate to, from 0 to 360 with 0 being the default state and 360 being all the way around back to the default state. 51 | * @param {number} duration The amount of time, in milliseconds, that the effect should take. 52 | * @param {Function} [easing] The easing function that should be used. 53 | */ 54 | constructor(container: Container, angle: number, duration: number, easing?: Function) { 55 | super(container); 56 | 57 | this._initialAngle = container.angle; 58 | this._desiredAngle = angle 59 | this.duration = duration; 60 | this._easing = easing || this.easeLinear; 61 | this._initialPivot = { x: this.container.pivot.x, y: this.container.pivot.y }; 62 | 63 | if (this._initialPivot.x == 0) this.container.pivot.x = this.container.width / 2; 64 | if (this._initialPivot.y == 0) this.container.pivot.y = this.container.height / 2; 65 | } 66 | 67 | /** 68 | * Updates the status of this effect on a frame by frame basis. 69 | */ 70 | update() { 71 | if (this.criteriaMet()) { 72 | this.finished.dispatch(); 73 | return; 74 | } 75 | 76 | this.current = performance.now(); 77 | 78 | const timeDiffPercentage = (this.current - this.started) / this.duration; 79 | const percentageThroughAnimation = this._easing(timeDiffPercentage); 80 | 81 | const angleAmount = this._desiredAngle * percentageThroughAnimation; 82 | this.container.angle = this._initialAngle + angleAmount; 83 | 84 | if (this.useRAF) this.id = requestAnimationFrame(() => this.update()); 85 | } 86 | 87 | /** 88 | * Checks to see if the container's current angle is very close to the desired angle. 89 | * 90 | * We can't use container angle == desired angle because with the game loop we might miss that exact moment so we check a very small window. 91 | * 92 | * @private 93 | * 94 | * @returns {boolean} Returns true if the angle criteria is met or false otherwise. 95 | */ 96 | criteriaMet(): boolean { 97 | if (this.container.angle > this._desiredAngle) return true; 98 | return false; 99 | } 100 | } -------------------------------------------------------------------------------- /src/effects/shake.ts: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | import { Container } from '@pixi/display'; 4 | 5 | import { Effect } from './effect'; 6 | import { Vector } from '../vector'; 7 | 8 | /** 9 | * A Shake effect involves shaking the camera at various amounts up to a sepcified intensity. 10 | */ 11 | export class Shake extends Effect { 12 | /** 13 | * The intensity of the shake, from 1-10. 14 | * 15 | * @private 16 | * 17 | * @property {number} 18 | * 19 | * @default 5 20 | */ 21 | private _intensity = 5; 22 | 23 | /** 24 | * A reference to the initial pivot of the container. 25 | * 26 | * @private 27 | * 28 | * @property {Vector} 29 | */ 30 | private _initialPivot: Vector; 31 | 32 | /** 33 | * @param {Container} container A reference to the container to apply the shake effect to. 34 | * @param {number} intensity The intensity of the shake, from a scale of 1 to 10. 35 | * @param {number} duration The duration of the shake effect. 36 | */ 37 | constructor(container: Container, intensity: number, duration: number) { 38 | super(container); 39 | 40 | this._intensity = intensity; 41 | this.duration = duration; 42 | this._initialPivot = { x: this.container.pivot.x, y: this.container.pivot.y }; 43 | 44 | this.started = performance.now(); 45 | } 46 | 47 | /** 48 | * Updates the status of the shake. 49 | */ 50 | update() { 51 | if (this.criteriaMet()) { 52 | this.container.pivot.x = this._initialPivot.x; 53 | this.container.pivot.y = this._initialPivot.y; 54 | 55 | this.finished.dispatch(); 56 | return; 57 | } 58 | 59 | this.current = performance.now(); 60 | 61 | const dx = Math.random() * this._intensity; 62 | const dy = Math.random() * this._intensity; 63 | 64 | this.container.pivot.x = dx; 65 | this.container.pivot.y = dy; 66 | 67 | if (this.useRAF) this.id = requestAnimationFrame(() => this.update()); 68 | } 69 | 70 | /** 71 | * Checks to see if the shake effect is done. 72 | * 73 | * @returns {boolean} Returns true if the shake effect is done or not. 74 | */ 75 | criteriaMet(): boolean { 76 | if (this.current - this.started >= this.duration) return true; 77 | return false; 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/effects/zoom_to.ts: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | import { Container } from '@pixi/display'; 4 | 5 | import { Effect } from './effect'; 6 | import { Vector } from '../vector'; 7 | 8 | /** 9 | * A zooming effect that involves the camera zooming in to a particular point on the container. 10 | */ 11 | export class ZoomTo extends Effect { 12 | /** 13 | * The zoom level to zoom to with values larger than 1 being zoomed in and values smaller than 1 being zoomed out. 14 | * 15 | * @private 16 | * 17 | * @property {Vector} 18 | */ 19 | private _desiredZoomLevel: Vector; 20 | 21 | /** 22 | * A reference to the easing function to use for this effect. 23 | * 24 | * @private 25 | * 26 | * @property {Function} 27 | */ 28 | private _easing: Function; 29 | 30 | /** 31 | * A reference to the initial zoom level. 32 | * 33 | * @private 34 | * 35 | * @property {Vector} 36 | */ 37 | private _initialZoomLevel: Vector; 38 | 39 | /** 40 | * Indicates whether the desired x zoom level is greater than the current zoom level or not. 41 | * 42 | * @private 43 | * 44 | * @property {boolean} 45 | */ 46 | private _xIsGreater = false; 47 | 48 | /** 49 | * Indicates whether the desired y zoom level is greater than the current zoom level or not. 50 | * 51 | * @private 52 | * 53 | * @property {boolean} 54 | */ 55 | private _yIsGreater = false; 56 | 57 | /** 58 | * @param {Container} container A reference to the container to apply the zoomto effect to. 59 | * @param {number} xZoomLevel The zoom level to zoom horizontally with values larger than 1 being zoomed in and values smaller than 1 being zoomed out. 60 | * @param {number} yZoomLevel The zoom level to zoom vertically with values larger than 1 being zoomed in and values smaller than 1 being zoomed out. 61 | * @param {number} duration The amount of time, in milliseconds, that the effect should take. 62 | * @param {Function} [easing] The easing function that should be used. 63 | */ 64 | constructor(container: Container, xZoomLevel: number, yZoomLevel: number, duration: number, easing?: Function) { 65 | super(container); 66 | 67 | this.duration = duration; 68 | this._desiredZoomLevel = { x: xZoomLevel, y: yZoomLevel }; 69 | this._easing = easing || this.easeLinear; 70 | 71 | this._initialZoomLevel = { x: this.container.scale.x, y: this.container.scale.y }; 72 | 73 | if (this._desiredZoomLevel.x > this._initialZoomLevel.x) this._xIsGreater = true; 74 | if (this._desiredZoomLevel.y > this._initialZoomLevel.y) this._yIsGreater = true; 75 | } 76 | 77 | /** 78 | * Updates the status of this effect on a frame by frame basis. 79 | */ 80 | update() { 81 | if (this.criteriaMet() || this.current > this.duration) { 82 | this.finished.dispatch(); 83 | return; 84 | } 85 | 86 | this.current = performance.now(); 87 | 88 | const timeDiffPercentage: number = (this.current - this.started) / this.duration; 89 | const percentageThroughAnimation: number = this._easing(timeDiffPercentage); 90 | 91 | const xZoomAmount: number = this._desiredZoomLevel.x * percentageThroughAnimation; 92 | const yZoomAmount: number = this._desiredZoomLevel.y * percentageThroughAnimation; 93 | 94 | this.container.scale.x = this._xIsGreater ? this._initialZoomLevel.x + xZoomAmount / 2 : this._initialZoomLevel.x - xZoomAmount; 95 | this.container.scale.y = this._yIsGreater ? this._initialZoomLevel.y + yZoomAmount / 2 : this._initialZoomLevel.y - yZoomAmount; 96 | 97 | if (this.useRAF) this.id = requestAnimationFrame(() => this.update()); 98 | } 99 | 100 | /** 101 | * Checks to see if the container's current zoom level is very close to the desired zoom level. 102 | * 103 | * We can't use container zoom == desired zoom because with the game loop we might miss that exact moment so we check a very small window. 104 | * 105 | * @private 106 | * 107 | * @returns {boolean} Returns true if the zoom criteria is met or false otherwise. 108 | */ 109 | criteriaMet(): boolean { 110 | if ( 111 | (this.container.scale.x > this._desiredZoomLevel.x - 0.01 && this.container.scale.x < this._desiredZoomLevel.x + 0.01) && 112 | (this.container.scale.y > this._desiredZoomLevel.y - 0.01 && this.container.scale.y < this._desiredZoomLevel.y + 0.01) 113 | ) return true; 114 | 115 | return false; 116 | } 117 | } -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | import { Camera } from './camera'; 4 | 5 | import { Effect } from './effects/effect'; 6 | import { Fade } from './effects/fade'; 7 | import { Shake } from './effects/shake'; 8 | import { PanTo } from './effects/pan_to'; 9 | import { Rotate } from './effects/rotate'; 10 | import { ZoomTo } from './effects/zoom_to'; 11 | 12 | export { 13 | // Effects 14 | Effect, 15 | Fade, 16 | Shake, 17 | PanTo, 18 | Rotate, 19 | ZoomTo, 20 | // Main 21 | Camera, 22 | } -------------------------------------------------------------------------------- /src/options.ts: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | import { Ticker } from '@pixi/ticker'; 4 | 5 | /** 6 | * A reference to the options passed to camera-pixi on initialization. 7 | */ 8 | export class Options { 9 | /** 10 | * If you want to use an existing PIXI.Ticker instance then you can pass it 11 | * here. If a ticker is not provided, `requestAnimationFrame` will be used 12 | * in its stead. 13 | * 14 | * @property {Ticker} 15 | */ 16 | ticker?: Ticker; 17 | 18 | /** 19 | * @param {Object} [options] The options passed to Camera on initialization. 20 | * @param {Ticker} [ticker] An instance of PIXI.Ticker to be used instead of the default `requestAnimationFrame`. 21 | */ 22 | constructor(options: Object = {}) { 23 | Object.assign(this, options); 24 | } 25 | } -------------------------------------------------------------------------------- /src/vector.ts: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | /** 4 | * Defines the structure of an object that acts as a (x, y) definition. 5 | */ 6 | export interface Vector { 7 | // The x value of the vector. 8 | x: number; 9 | // The y value of the vector. 10 | y: number; 11 | } -------------------------------------------------------------------------------- /test/assets/caveman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robertcorponoi/pixi-game-camera/e0a32a59d9731fd4132a026fb7f251368b22cbe2/test/assets/caveman.png -------------------------------------------------------------------------------- /test/assets/parallax_forest_pack/layers/parallax-forest-back-trees.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robertcorponoi/pixi-game-camera/e0a32a59d9731fd4132a026fb7f251368b22cbe2/test/assets/parallax_forest_pack/layers/parallax-forest-back-trees.png -------------------------------------------------------------------------------- /test/assets/parallax_forest_pack/layers/parallax-forest-front-trees.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robertcorponoi/pixi-game-camera/e0a32a59d9731fd4132a026fb7f251368b22cbe2/test/assets/parallax_forest_pack/layers/parallax-forest-front-trees.png -------------------------------------------------------------------------------- /test/assets/parallax_forest_pack/layers/parallax-forest-lights.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robertcorponoi/pixi-game-camera/e0a32a59d9731fd4132a026fb7f251368b22cbe2/test/assets/parallax_forest_pack/layers/parallax-forest-lights.png -------------------------------------------------------------------------------- /test/assets/parallax_forest_pack/layers/parallax-forest-middle-trees.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robertcorponoi/pixi-game-camera/e0a32a59d9731fd4132a026fb7f251368b22cbe2/test/assets/parallax_forest_pack/layers/parallax-forest-middle-trees.png -------------------------------------------------------------------------------- /test/assets/parallax_forest_pack/license.txt: -------------------------------------------------------------------------------- 1 | Artwork created by Luis Zuno (@ansimuz) 2 | 3 | License (CC0) You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission: http://creativecommons.org/publicdomain/zero/1.0/ 4 | 5 | Get more resources at ansimuz.com, Spread the word! 6 | 7 | -------------------------------------------------------------------------------- /test/assets/parallax_forest_pack/parallax-forest.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/robertcorponoi/pixi-game-camera/e0a32a59d9731fd4132a026fb7f251368b22cbe2/test/assets/parallax_forest_pack/parallax-forest.psd -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | PIXI Game Camera Custom Tests 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /test/pixi-game-camera.js: -------------------------------------------------------------------------------- 1 | function t(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function e(t,e){for(var i=0;i1&&"undefined"==typeof MSStream}; 2 | /*! 3 | * @pixi/settings - v5.3.7 4 | * Compiled Tue, 29 Dec 2020 19:30:11 UTC 5 | * 6 | * @pixi/settings is licensed under the MIT License. 7 | * http://www.opensource.org/licenses/mit-license 8 | */ 9 | var I=function(t){var e={userAgent:"",platform:"",maxTouchPoints:0};t||"undefined"==typeof navigator?"string"==typeof t?e.userAgent=t:t&&t.userAgent&&(e={userAgent:t.userAgent,platform:t.platform,maxTouchPoints:t.maxTouchPoints||0}):e={userAgent:navigator.userAgent,platform:navigator.platform,maxTouchPoints:navigator.maxTouchPoints||0};var i=e.userAgent,n=i.split("[FBAN");void 0!==n[1]&&(i=n[0]),void 0!==(n=i.split("Twitter"))[1]&&(i=n[0]);var r=function(t){return function(e){return e.test(t)}}(i),s={apple:{phone:r(c)&&!r(m),ipod:r(d),tablet:!r(c)&&(r(l)||k(e))&&!r(m),universal:r(f),device:(r(c)||r(d)||r(l)||r(f)||k(e))&&!r(m)},amazon:{phone:r(v),tablet:!r(v)&&r(y),device:r(v)||r(y)},android:{phone:!r(m)&&r(v)||!r(m)&&r(p),tablet:!r(m)&&!r(v)&&!r(p)&&(r(y)||r(_)),device:!r(m)&&(r(v)||r(y)||r(p)||r(_))||r(/\bokhttp\b/i)},windows:{phone:r(m),tablet:r(x),device:r(m)||r(x)},other:{blackberry:r(b),blackberry10:r(g),opera:r(M),firefox:r(S),chrome:r(A),device:r(b)||r(g)||r(M)||r(S)||r(A)},any:!1,phone:!1,tablet:!1};return s.any=s.apple.device||s.android.device||s.windows.device||s.other.device,s.phone=s.apple.phone||s.android.phone||s.windows.phone,s.tablet=s.apple.tablet||s.android.tablet||s.windows.tablet,s}(window.navigator);var T,O={MIPMAP_TEXTURES:1,ANISOTROPIC_LEVEL:0,RESOLUTION:1,FILTER_RESOLUTION:1,SPRITE_MAX_TEXTURES:function(t){var e=!0;if(I.tablet||I.phone){var i;if(I.apple.device)if(i=navigator.userAgent.match(/OS (\d+)_(\d+)?/))parseInt(i[1],10)<11&&(e=!1);if(I.android.device)if(i=navigator.userAgent.match(/Android\s([0-9.]*)/))parseInt(i[1],10)<7&&(e=!1)}return e?t:4}(32),SPRITE_BATCH_SIZE:4096,RENDER_OPTIONS:{view:null,antialias:!1,autoDensity:!1,transparent:!1,backgroundColor:0,clearBeforeRender:!0,preserveDrawingBuffer:!1,width:800,height:600,legacy:!1},GC_MODE:0,GC_MAX_IDLE:3600,GC_MAX_CHECK_COUNT:600,WRAP_MODE:33071,SCALE_MODE:1,PRECISION_VERTEX:"highp",PRECISION_FRAGMENT:I.apple.device?"highp":"mediump",CAN_UPLOAD_SAME_BUFFER:!I.apple.device,CREATE_IMAGE_BITMAP:!1,ROUND_PIXELS:!1}; 10 | /*! 11 | * @pixi/ticker - v5.3.7 12 | * Compiled Tue, 29 Dec 2020 19:30:11 UTC 13 | * 14 | * @pixi/ticker is licensed under the MIT License. 15 | * http://www.opensource.org/licenses/mit-license 16 | */O.TARGET_FPMS=.06,function(t){t[t.INTERACTION=50]="INTERACTION",t[t.HIGH=25]="HIGH",t[t.NORMAL=0]="NORMAL",t[t.LOW=-25]="LOW",t[t.UTILITY=-50]="UTILITY"}(T||(T={}));var P=function(){function t(t,e,i,n){void 0===e&&(e=null),void 0===i&&(i=0),void 0===n&&(n=!1),this.fn=t,this.context=e,this.priority=i,this.once=n,this.next=null,this.previous=null,this._destroyed=!1}return t.prototype.match=function(t,e){return void 0===e&&(e=null),this.fn===t&&this.context===e},t.prototype.emit=function(t){this.fn&&(this.context?this.fn.call(this.context,t):this.fn(t));var e=this.next;return this.once&&this.destroy(!0),this._destroyed&&(this.next=null),e},t.prototype.connect=function(t){this.previous=t,t.next&&(t.next.previous=this),this.next=t.next,t.next=this},t.prototype.destroy=function(t){void 0===t&&(t=!1),this._destroyed=!0,this.fn=null,this.context=null,this.previous&&(this.previous.next=this.next),this.next&&(this.next.previous=this.previous);var e=this.next;return this.next=t?null:e,this.previous=null,e},t}();!function(){function t(){var t=this;this._head=new P(null,null,1/0),this._requestId=null,this._maxElapsedMS=100,this._minElapsedMS=0,this.autoStart=!1,this.deltaTime=1,this.deltaMS=1/O.TARGET_FPMS,this.elapsedMS=1/O.TARGET_FPMS,this.lastTime=-1,this.speed=1,this.started=!1,this._protected=!1,this._lastFrame=-1,this._tick=function(e){t._requestId=null,t.started&&(t.update(e),t.started&&null===t._requestId&&t._head.next&&(t._requestId=requestAnimationFrame(t._tick)))}}t.prototype._requestIfNeeded=function(){null===this._requestId&&this._head.next&&(this.lastTime=performance.now(),this._lastFrame=this.lastTime,this._requestId=requestAnimationFrame(this._tick))},t.prototype._cancelIfNeeded=function(){null!==this._requestId&&(cancelAnimationFrame(this._requestId),this._requestId=null)},t.prototype._startIfPossible=function(){this.started?this._requestIfNeeded():this.autoStart&&this.start()},t.prototype.add=function(t,e,i){return void 0===i&&(i=T.NORMAL),this._addListener(new P(t,e,i))},t.prototype.addOnce=function(t,e,i){return void 0===i&&(i=T.NORMAL),this._addListener(new P(t,e,i,!0))},t.prototype._addListener=function(t){var e=this._head.next,i=this._head;if(e){for(;e;){if(t.priority>e.priority){t.connect(i);break}i=e,e=e.next}t.previous||t.connect(i)}else t.connect(i);return this._startIfPossible(),this},t.prototype.remove=function(t,e){for(var i=this._head.next;i;)i=i.match(t,e)?i.destroy():i.next;return this._head.next||this._cancelIfNeeded(),this},Object.defineProperty(t.prototype,"count",{get:function(){if(!this._head)return 0;for(var t=0,e=this._head;e=e.next;)t++;return t},enumerable:!1,configurable:!0}),t.prototype.start=function(){this.started||(this.started=!0,this._requestIfNeeded())},t.prototype.stop=function(){this.started&&(this.started=!1,this._cancelIfNeeded())},t.prototype.destroy=function(){if(!this._protected){this.stop();for(var t=this._head.next;t;)t=t.destroy(!0);this._head.destroy(),this._head=null}},t.prototype.update=function(t){var e;if(void 0===t&&(t=performance.now()),t>this.lastTime){if((e=this.elapsedMS=t-this.lastTime)>this._maxElapsedMS&&(e=this._maxElapsedMS),e*=this.speed,this._minElapsedMS){var i=t-this._lastFrame|0;if(i0&&void 0!==arguments[0]?arguments[0]:{};t(this,e),n(this,"ticker",void 0),Object.assign(this,i)},w=function(){function e(i){t(this,e),n(this,"_options",void 0),n(this,"_ticker",void 0),this._options=new E(i),this._options.ticker&&(this._ticker=this._options.ticker)}return i(e,[{key:"effect",value:function(t){this._addToTicker(t)}},{key:"_addToTicker",value:function(t){var e,i=this,n=t.update.bind(t);this._ticker?(t.finished.add((function(){var t;return null===(t=i._ticker)||void 0===t?void 0:t.remove(n,i)})),null===(e=this._ticker)||void 0===e||e.add(n,this,T.NORMAL)):t.start()}}]),e}();var R=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")};function L(t,e){for(var i=0;i1&&void 0!==arguments[1]&&arguments[1];return this._tasks.push(new C(t,e)),this}},{key:"dispatch",value:function(){for(var t=0;td._opacity&&(d._fadeOut=!1),d}return i(o,[{key:"update",value:function(){var t=this;if(this.criteriaMet())return this._filter.alpha=this._opacity,void this.finished.dispatch();this.current=performance.now();var e=(this.current-this.started)/this.duration,i=1*this._easing(e);this._filter.alpha=this._fadeOut?i:this._initialOpacity-i,this.useRAF&&(this.id=requestAnimationFrame((function(){return t.update()})))}},{key:"criteriaMet",value:function(){return!!(this._fadeOut&&this._filter.alpha>=this._opacity-.01||!this._fadeOut&&this._filter.alpha<=this._opacity+.01)}}]),o}(),j=function(e){r(o,q);var s=u(o);function o(e,i,r){var h;return t(this,o),n(a(h=s.call(this,e)),"_intensity",5),n(a(h),"_initialPivot",void 0),h._intensity=i,h.duration=r,h._initialPivot={x:h.container.pivot.x,y:h.container.pivot.y},h.started=performance.now(),h}return i(o,[{key:"update",value:function(){var t=this;if(this.criteriaMet())return this.container.pivot.x=this._initialPivot.x,this.container.pivot.y=this._initialPivot.y,void this.finished.dispatch();this.current=performance.now();var e=Math.random()*this._intensity,i=Math.random()*this._intensity;this.container.pivot.x=e,this.container.pivot.y=i,this.useRAF&&(this.id=requestAnimationFrame((function(){return t.update()})))}},{key:"criteriaMet",value:function(){return this.current-this.started>=this.duration}}]),o}(),D=function(e){r(o,q);var s=u(o);function o(e,i,r,h){var u;return t(this,o),n(a(u=s.call(this,e)),"_coordinates",void 0),n(a(u),"_difference",void 0),n(a(u),"_xIsGreater",!1),n(a(u),"_yIsGreater",!1),u._coordinates={x:i,y:r},u.duration=h,u._coordinates.x>u.container.pivot.x&&(u._xIsGreater=!0),u._coordinates.y>u.container.pivot.y&&(u._yIsGreater=!0),u._difference={x:Math.abs(u._coordinates.x-u.container.pivot.x),y:Math.abs(u._coordinates.y-u.container.pivot.y)},u}return i(o,[{key:"update",value:function(){var t=this;if(this.criteriaMet())this.finished.dispatch();else{this.current=performance.now();var e=(this.current-this.started)/this.duration,i=(this.duration-this.current)/this.duration,n=this._xIsGreater?this._difference.x*e:this._difference.x*i,r=this._yIsGreater?this._difference.y*e:this._difference.y*i;this.container.pivot.x=n,this.container.pivot.y=r,this.useRAF&&(this.id=requestAnimationFrame((function(){return t.update()})))}}},{key:"criteriaMet",value:function(){return this.container.pivot.x>this._coordinates.x-5&&this.container.pivot.xthis._coordinates.y-5&&this.container.pivot.ythis._desiredAngle}}]),o}(),B=function(e){r(o,q);var s=u(o);function o(e,i,r,h,u){var c;return t(this,o),n(a(c=s.call(this,e)),"_desiredZoomLevel",void 0),n(a(c),"_easing",void 0),n(a(c),"_initialZoomLevel",void 0),n(a(c),"_xIsGreater",!1),n(a(c),"_yIsGreater",!1),c.duration=h,c._desiredZoomLevel={x:i,y:r},c._easing=u||c.easeLinear,c._initialZoomLevel={x:c.container.scale.x,y:c.container.scale.y},c._desiredZoomLevel.x>c._initialZoomLevel.x&&(c._xIsGreater=!0),c._desiredZoomLevel.y>c._initialZoomLevel.y&&(c._yIsGreater=!0),c}return i(o,[{key:"update",value:function(){var t=this;if(this.criteriaMet()||this.current>this.duration)this.finished.dispatch();else{this.current=performance.now();var e=(this.current-this.started)/this.duration,i=this._easing(e),n=this._desiredZoomLevel.x*i,r=this._desiredZoomLevel.y*i;this.container.scale.x=this._xIsGreater?this._initialZoomLevel.x+n/2:this._initialZoomLevel.x-n,this.container.scale.y=this._yIsGreater?this._initialZoomLevel.y+r/2:this._initialZoomLevel.y-r,this.useRAF&&(this.id=requestAnimationFrame((function(){return t.update()})))}}},{key:"criteriaMet",value:function(){return this.container.scale.x>this._desiredZoomLevel.x-.01&&this.container.scale.xthis._desiredZoomLevel.y-.01&&this.container.scale.y this.update()); 43 | } 44 | 45 | criteriaMet() { 46 | if (this.container.angle > this._desiredAngle) return true; 47 | return false; 48 | } 49 | } 50 | 51 | // Create the PIXI App. 52 | for (let i = 0; i < 7; ++i) { 53 | const app = new PIXI.Application({ width: 500, height: 300 }); 54 | 55 | // Create the containers that will represent the 4 layers of our test scene. 56 | const container1 = new PIXI.Container(); 57 | const container2 = new PIXI.Container(); 58 | const container3 = new PIXI.Container(); 59 | const container4 = new PIXI.Container(); 60 | 61 | // Append the canvas that contains the scene to the document. 62 | document.body.appendChild(app.view); 63 | 64 | // Load up the 4 images that we need for our scene. 65 | const image1 = PIXI.Sprite.from('assets/parallax_forest_pack/layers/parallax-forest-back-trees.png'); 66 | const image2 = PIXI.Sprite.from('assets/parallax_forest_pack/layers/parallax-forest-lights.png'); 67 | const image3 = PIXI.Sprite.from('assets/parallax_forest_pack/layers/parallax-forest-middle-trees.png'); 68 | const image4 = PIXI.Sprite.from('assets/parallax_forest_pack/layers/parallax-forest-front-trees.png'); 69 | const images = []; 70 | images.push(image1, image2, image3, image4); 71 | 72 | // Set the width and height of each image to be the same. 73 | images.forEach(image => { 74 | image.width = 1500; 75 | image.height = 1300; 76 | }); 77 | 78 | // Add each image to their own container so that they're each on a different layer. 79 | container1.addChild(image1); 80 | container2.addChild(image2); 81 | container3.addChild(image3); 82 | container4.addChild(image4); 83 | 84 | // Lastly to finish setting up our scene we add the containers to the main container. 85 | app.stage.addChild(container1, container2, container3, container4); 86 | 87 | // Create an instance of the Camera and set it to use our PIXI app's ticker. 88 | const camera = new Camera({ ticker: app.ticker }); 89 | 90 | switch (i) { 91 | case 0: 92 | // Creates an effect that gets passed to the Camera to shake the container at 93 | // a specified intensity and for a specified duration. 94 | const mildShake = new Shake(app.stage, 3, 3000); 95 | camera.effect(mildShake); 96 | break; 97 | case 1: 98 | // Creates an effect that gets passed to the Camera to zoom in on the container 99 | // for a specified duration. 100 | const zoomIn = new ZoomTo(app.stage, 2, 2, 2000); 101 | camera.effect(zoomIn); 102 | break; 103 | case 2: 104 | // Creates an effect that gets passed to the Camera to zoom out on the container 105 | // for a specified duration. 106 | const zoomOut = new ZoomTo(app.stage, 0.5, 0.75, 2000); 107 | camera.effect(zoomOut); 108 | break; 109 | case 3: 110 | // Creates an effect that gets passed to the Camera to pan to a location at the 111 | // bottom right of the container. 112 | const panToBottomRight = new PanTo(app.stage, 500, 750, 2000); 113 | camera.effect(panToBottomRight); 114 | break; 115 | case 4: 116 | // Creates an effect that gets passed to the Camera to fade to black on the 117 | // container. 118 | const fadeToBlack = new Fade(app.stage, new PIXI.Sprite(PIXI.Texture.WHITE), 0x000000, 1, 2000); 119 | camera.effect(fadeToBlack); 120 | break; 121 | case 5: 122 | // Creates an effect that gets passed to the Camera to rotate the container by 123 | // 45 degrees. 124 | const rotate45Deg = new Rotate(app.stage, 45, 3000); 125 | camera.effect(rotate45Deg); 126 | break; 127 | case 6: 128 | // Custom rotate to have the Camera rotate the container 365 degrees. 129 | const rotateCustom365Deg = new CustomRotate(app.stage, 365, 5000); 130 | camera.effect(rotateCustom365Deg); 131 | } 132 | } -------------------------------------------------------------------------------- /test/server.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const path = require('path'); 4 | const fastify = require('fastify')({ logger: false }); 5 | 6 | // Set fastify-static to serve everything in the test folder. 7 | fastify.register(require('fastify-static'), { root: path.resolve(__dirname) }); 8 | 9 | // Set the home page to serve the index.html file. 10 | fastify.get('/', function (req, reply) { 11 | return reply.sendFile('index.html'); 12 | }); 13 | 14 | // Have the server listen on port 3000. 15 | fastify.listen(3000, (err, address) => { 16 | if (err) throw err; 17 | console.log(`Listening on port 3000`); 18 | }); -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Basic Options */ 4 | // "incremental": true, /* Enable incremental compilation */ 5 | "target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */ 6 | "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 7 | // "lib": [], /* Specify library files to be included in the compilation. */ 8 | // "allowJs": true, /* Allow javascript files to be compiled. */ 9 | // "checkJs": true, /* Report errors in .js files. */ 10 | // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 11 | "declaration": true, /* Generates corresponding '.d.ts' file. */ 12 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 13 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 14 | // "outFile": "./", /* Concatenate and emit output to single file. */ 15 | "outDir": "lib", /* Redirect output structure to the directory. */ 16 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 17 | // "composite": true, /* Enable project compilation */ 18 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ 19 | // "removeComments": true, /* Do not emit comments to output. */ 20 | // "noEmit": true, /* Do not emit outputs. */ 21 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 22 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 23 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 24 | 25 | /* Strict Type-Checking Options */ 26 | "strict": true, /* Enable all strict type-checking options. */ 27 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 28 | // "strictNullChecks": true, /* Enable strict null checks. */ 29 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 30 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ 31 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 32 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 33 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 34 | 35 | /* Additional Checks */ 36 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 37 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 38 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 39 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 40 | 41 | /* Module Resolution Options */ 42 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 43 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 44 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 45 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 46 | // "typeRoots": [], /* List of folders to include type definitions from. */ 47 | // "types": [], /* Type declaration files to be included in compilation. */ 48 | "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 49 | "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 50 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 51 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 52 | 53 | /* Source Map Options */ 54 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 55 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 56 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 57 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 58 | 59 | /* Experimental Options */ 60 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 61 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 62 | 63 | /* Advanced Options */ 64 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ 65 | } 66 | } 67 | --------------------------------------------------------------------------------