Skip to content

Commit dae195d

Browse files
authored
Typescript & module assets Rewrite, v5 update (#99)
* Initial set-up - bring over build process from pixi-particles (nothing works yet). * Convert mixins to TS and ES6 classes extending originals. * Continue conversion - changed files are mostly complete, have some type issues. * More conversion progress. MovieClip has a few things to fix. * Convert Scene to typescript. * Fix tabs->spaces in Scene. Remove constructor as it only called super(). * Convert Animator/AnimatorTimeline. * Fix errors in MovieClip. * Fix some small errors. * Rename the former mixins to avoid conflicts in bundled .d.ts * Update dts-bundle-generator to see if it fixed remaining .d.ts issue. It did not. * Fix some references to PIXI namespace. * Change internal name of utils to fix .d.ts output issue. * Get .d.ts output fully working. * Rename 'mixin' classes on library export for nicer exports. * Enable tree-shaking on IIFE built version. * Start fixing broken tests. * Add shim for existing asset format. Fix Timeline issues. * Update floss, fix problems with image comparison in tests. * Clean up docs. * Fix closePath/setColorTransform shorthand shenanigans. * Fix npm audit issues. * Drop pixi.js v4 support, add v5 support. * Change basic tests to use require(). Rename render tests to legacy. * Remove global caches, set up new asset format, start updating tests. * Fix whitespace, some docs, note a breaking change in the readme. * Remove `import type` because typedoc was choking on it. Turns out removing it doesn't harm anything - typescript correctly removes those type-only imports. * Manual conversions of a couple more test files. * Add script for conversion of v1 assets to v2 assets. * Fix asset conversion script, convert other test assets. * Remove eye-disappearing from tests, unused JSON output format file. * Tag for prerelease testing. * Fix docs generation folder. * Update contributors. * Remove JSDoc config. * Use @pixi/eslint-config for eslint settings. Fix npm audit issues. * Update eslint & get it actually running on source files (and fix them). * Rearrange build & utility scripts, update to match linting. * Move v1-asset-shim into a legacy build. * Remove unused test assets. * Bring test code up to speed with linting style. * Asset upgrade script now handles .shapes.json files referenced in .js * Add usage message and ES6 auto import/run mode to asset upgrade script. * Add script to generate .d.ts files for assets. * Fix documentation around asset scripts. * Update rollup-plugin-ts, rearrange source so that .d.ts output works. * Add tests to confirm that the library definitions aren't broken. * Fix addHole() in legacy shim, add test for a hole shape - test made with v1.3.5 of pixi-animate * Update asset conversion - handle .txt, fix holes, add current hole test. * Handle newer named instance format in createDeclaration. * Fix typo in AnimateAsset. * Further createDeclaration improvements. * Tag for rc4 * Improve asset specific type generation via namespaces. * Minor docs tweaks in AnimateAsset. * Fix potential error when loading spritesheets for legacy assets. * Update to subpackages of pixi, fix npm audit. * Fix some issues with update. * Update to latest pixi release candidate. * Update type generation. * Clean up pixi deps, fix build externals. * More build/test fixes. * Further fix tests. * Temp build requirements: Remove before release! * Update to latest pixi release candidate, fix type issues to the best of our ability. * Update Pixi requirement, remove unused dependency * Update PixiJS dependencies. * Remove uneeded lib, update ts rollup plugin. * Improve tween support. * Increment version. * Add ability to deserialize keyframes with tweens. * Bump prerelease version. * Get docs building again. * Increase node version for travis. * Implement support for classic ease. * Implement other standard ease methods. * Make ease strength optional in compressed tween data (untested). * Do a basic asset version check when loading. * Fix reading of serialized eases. * Clean up/fix tween reading issues. * Fix extendLastFrame() having an off by one error. * Fix bounce eases. * Fix Sprite tint setTint() implementation. * Implement color/tint tweening. * Update PixiJS dependency. * Update floss/electron. * Bump version for a new release candidate * Handle per-property eases. * Fix issues with assembling tweens. * Tag a new prerelease * Add publishing info to the readme. * Make asset conversion script a bit more permissive to handle older/incomplete assets. * Fix @pixi dependencies being overly specific. * Fix a timed mask/keyframe issue.
1 parent 1d7281e commit dae195d

File tree

366 files changed

+29323
-4256
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

366 files changed

+29323
-4256
lines changed

.babelrc

-8
This file was deleted.

.eslintrc

+2-19
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,5 @@
11
{
22
"extends": [
3-
"eslint:recommended"
4-
],
5-
"rules": {
6-
"no-console": 0,
7-
"no-debugger": 1
8-
},
9-
"parserOptions": {
10-
"ecmaVersion": 6,
11-
"sourceType": "module"
12-
},
13-
"env": {
14-
"node": true,
15-
"browser": true,
16-
"es6": true
17-
},
18-
"globals": {
19-
"PIXI": true,
20-
"__VERSION__": false
21-
}
3+
"@pixi/eslint-config"
4+
]
225
}

.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,5 @@
55
.publish/
66
/coverage
77
.DS_Store
8+
/*.d.ts
9+
.nyc_output

.travis.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
language: node_js
22
node_js:
3-
- "8"
3+
- "12"
44

55
install:
66
- npm install xvfb-maybe

README.md

+52-10
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,63 @@ npm install pixi-animate
1717

1818
### Dependencies
1919

20-
* [Pixi.js v4](http://pixijs.com) is required
20+
* [Pixi.js v6](http://pixijs.com) is required
2121

2222
## Documentation
2323

2424
https://pixijs.io/pixi-animate/
2525

26+
## Breaking Changes from v1.3
27+
* DisplayObject, Container, Graphics, Sprite, and Text from PIXI are no longer modified. Instead, subclasses are provided from the library with the same names (or on the PIXI.animate namespace).
28+
* static `extend()` and `e()` methods no longer exist on the display object classes.
29+
* On Graphics, `c()` is no longer the shorthand for `closePath()`; instead, use `cp()`.
30+
* On Graphics, `drawHole()` and `h()` no longer exist. Instead of making the previous shape a hole, use `beginHole()` (`bh()`) before drawing a hole and `endHole()` (`eh()`) when it is complete.
31+
* ShapesCache no longer exists.
32+
* The SymbolLoader plugin no longer exists, so individual images are no longer added to PIXI's global texture cache by resource name, and shape assets are no longer added to a global shape cache.
33+
34+
Using the legacy bundle file `dist/pixi-animate-legacy.js` (requires `PIXI` namespace to be set up) will restore the removed functionality so that assets published for the previous version of PixiAnimate will work correctly.
35+
36+
Changes that the legacy build doesn't account for:
37+
* `load()` no longer has so many variants allowed. Instead, the first argument is always the scene that you want to load, followed by either a callback or an options object. If using the legacy build, pass in the constructor for the main scene MovieClip, as you did in v1.
38+
* `createInstance` now defaults to false, instead of true, when calling `load()`.
39+
40+
### Asset changes
41+
The expected asset format is now a module based asset that uses ES6 classes, for use with `require()` (publish for CommonJS) or `import()` (publish for ES6). A script has been provided to update v1 assets to the new format - `pixi-animate-upgrade` (see `bin/assetConversion.js` for the source).
42+
* CommonJS export: `npx pixi-animate-upgrade path/to/myFile.js path/to/my2ndFile.js`
43+
* Asset object is the main, and only, export.
44+
* Example: `const asset = require('./myAsset');`
45+
* ES6 export: `npx pixi-animate-upgrade -e path/to/myFile.js path/to/my2ndFile.js`
46+
* Asset object is the default, and only, export.
47+
* Example: `import asset from './myAsset'` or `const asset = await import('./myAsset')`;
48+
* ES6 autorun export: `npx pixi-animate-upgrade -a path/to/myFile.js path/to/my2ndFile.js`
49+
* Asset automatically imports `'pixi-animate'` and runs `setup()`. Individual library items are exported by name in addition to the default export.
50+
* Example: `import asset, {MyScene} from './myAsset'`
51+
52+
Note that this script will do its best to update graphics paths (`*.shapes.json` files), but you should confirm that they were properly updated (closePath & hole changes).
53+
54+
If you want to have a Typescript declaration specific to an individual asset file, use the `pixi-animate-type-assets` script to generate a .d.ts file. This script will work on any of the 3 variants of the current asset format.
55+
Example: `npx pixi-animate-type-assets path/to/myFile.js path/to/my2ndFile.js`
56+
57+
## Considerations & Limitations in Animate
58+
While we now support publishing tweens from Animate, there are some things to take into account to ensure that you get the smallest, most efficient asset size possible.
59+
60+
### Tweens
61+
* Only classic tweens are supported at this time, not motion tweens.
62+
* Tweens that only affect color (alpha, tint, color adjustment) can't be detected during publishing, but will be included if your tween also affects the transformation (position, scale, rotation/skew).
63+
* Custom ease curves are not supported at this time, only the default selection of eases.
64+
65+
### Considerations with Graphics
66+
In order to maintain an accurate export, Animate creates a unique Graphic (MovieClip in the runtime) instance for each usage in your library of anything that is a Graphic on the timeline. This has a few effects:
67+
* Tweens inside Graphics won't be exported, but instead converted to keyframes.
68+
* When a Graphic is interrupted on the timeline, each use will be a different instance in the export, causing a little bloat.
69+
70+
In order to minimize your asset size, there are a few things that you can do:
71+
* Do all of your tweening at as high a level as you can manage, in something that is a MovieClip on the timeline.
72+
* Use one Graphic per layer, and don't have blank keyframes between uses of it or mix & match Graphic instances on the same layer.
73+
2674
## Typescript
2775
You can use require to get the namespace for PixiAnimate:
2876
```typescript
29-
// Note: Must also include the pixi.js typings globally!
3077
import animate = require('pixi-animate');
3178

3279
let myMC:animate.MovieClip = new animate.MovieClip();
@@ -35,18 +82,13 @@ let myMC:animate.MovieClip = new animate.MovieClip();
3582
Or use a triple slash reference for using the PIXI.animate namespace:
3683
```typescript
3784
// Note: Must also include the pixi.js typings globally!
38-
/// <reference path="node_modules/pixi-animate/ambient.d.ts" />
39-
require('pixi-animate');
85+
/// <reference path="node_modules/pixi-animate/dist/pixi-animate-ambient.d.ts" />
86+
// In your HTML:
87+
// <script src="node_modules/pixi-animate/dist/pixi-animate.d.ts"></script>
4088

4189
let myMC:PIXI.animate.MovieClip = new PIXI.animate.MovieClip();
4290
```
4391

44-
Or simply import pixi-animate (after importing pixi.js):
45-
```typescript
46-
// Note: Must also include the pixi.js typings globally!
47-
import('pixi-animate');
48-
```
49-
5092
## License
5193

5294
Copyright (c) 2016 [Jibo, Inc.](http://github.com/jiborobot)

ambient.d.ts

-160
This file was deleted.

0 commit comments

Comments
 (0)