JSPM

  • Created
  • Published
  • Downloads 3506
  • Score
    100M100P100Q127699F
  • License MIT

Two-point projection for pixi v^4

Package Exports

  • pixi-projection

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (pixi-projection) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

pixi-projection

Collection of projections, both 2d and 3d.

There are many ways to define projections even when we are using only 2 dimensions.

Two-point projections in 2d are good for parallax.

Done:

  • Projective 2d transform
  • Projective 2d quad mapping
  • Bilinear 2d quad mapping

Backlog:

  • Projective 2d by euler angles
  • Option to "drop" projection and go back to PIXI.Matrix in a child

To-do:

  • Docs

Examples

Projective sprites: Container2d, Sprite2d, Text2d

Two-point projection Projective transform of quad

Surface sprites: Container2s, Sprite2s, Text2s for now only bilinear

Bilinear transform of quad

Usage

convert existing elements

Same can be applied to Container2s. You cant use both projective and surface sprites

var sprite = new PIXI.Sprite();
sprite.convertTo2d();
sprite.proj; //available now!

var container = new PIXI.Container();
container.convertTo2d();
sprite.proj; //available now!

var tree = new PIXI.Container();
var child = new PIXI.Container();
tree.addChild(child);
tree.convertSubtreeTo2d(tree);
child.proj; //available now!

Building

You will need to have node setup on your machine.

Make sure you have yarn installed:

npm install -g yarn

Then you can install dependencies and build:

yarn
yarn build

That will output the built distributables to ./bin.