Skip to content

Commit

Permalink
Typescript & module assets Rewrite, v5 update (#99)
Browse files Browse the repository at this point in the history
* 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.
  • Loading branch information
andrewstart authored Sep 14, 2021
1 parent 1d7281e commit dae195d
Show file tree
Hide file tree
Showing 366 changed files with 29,323 additions and 4,256 deletions.
8 changes: 0 additions & 8 deletions .babelrc

This file was deleted.

21 changes: 2 additions & 19 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -1,22 +1,5 @@
{
"extends": [
"eslint:recommended"
],
"rules": {
"no-console": 0,
"no-debugger": 1
},
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module"
},
"env": {
"node": true,
"browser": true,
"es6": true
},
"globals": {
"PIXI": true,
"__VERSION__": false
}
"@pixi/eslint-config"
]
}
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,5 @@
.publish/
/coverage
.DS_Store
/*.d.ts
.nyc_output
2 changes: 1 addition & 1 deletion .travis.yml
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
language: node_js
node_js:
- "8"
- "12"

install:
- npm install xvfb-maybe
Expand Down
62 changes: 52 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,16 +17,63 @@ npm install pixi-animate

### Dependencies

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

## Documentation

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

## Breaking Changes from v1.3
* 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).
* static `extend()` and `e()` methods no longer exist on the display object classes.
* On Graphics, `c()` is no longer the shorthand for `closePath()`; instead, use `cp()`.
* 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.
* ShapesCache no longer exists.
* 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.

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.

Changes that the legacy build doesn't account for:
* `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.
* `createInstance` now defaults to false, instead of true, when calling `load()`.

### Asset changes
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).
* CommonJS export: `npx pixi-animate-upgrade path/to/myFile.js path/to/my2ndFile.js`
* Asset object is the main, and only, export.
* Example: `const asset = require('./myAsset');`
* ES6 export: `npx pixi-animate-upgrade -e path/to/myFile.js path/to/my2ndFile.js`
* Asset object is the default, and only, export.
* Example: `import asset from './myAsset'` or `const asset = await import('./myAsset')`;
* ES6 autorun export: `npx pixi-animate-upgrade -a path/to/myFile.js path/to/my2ndFile.js`
* Asset automatically imports `'pixi-animate'` and runs `setup()`. Individual library items are exported by name in addition to the default export.
* Example: `import asset, {MyScene} from './myAsset'`

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).

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.
Example: `npx pixi-animate-type-assets path/to/myFile.js path/to/my2ndFile.js`

## Considerations & Limitations in Animate
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.

### Tweens
* Only classic tweens are supported at this time, not motion tweens.
* 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).
* Custom ease curves are not supported at this time, only the default selection of eases.

### Considerations with Graphics
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:
* Tweens inside Graphics won't be exported, but instead converted to keyframes.
* When a Graphic is interrupted on the timeline, each use will be a different instance in the export, causing a little bloat.

In order to minimize your asset size, there are a few things that you can do:
* Do all of your tweening at as high a level as you can manage, in something that is a MovieClip on the timeline.
* Use one Graphic per layer, and don't have blank keyframes between uses of it or mix & match Graphic instances on the same layer.

## Typescript
You can use require to get the namespace for PixiAnimate:
```typescript
// Note: Must also include the pixi.js typings globally!
import animate = require('pixi-animate');

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

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

Or simply import pixi-animate (after importing pixi.js):
```typescript
// Note: Must also include the pixi.js typings globally!
import('pixi-animate');
```

## License

Copyright (c) 2016 [Jibo, Inc.](http://github.com/jiborobot)
Expand Down
160 changes: 0 additions & 160 deletions ambient.d.ts

This file was deleted.

Loading

0 comments on commit dae195d

Please sign in to comment.