Skip to content
PIXI.js advanced color modes, sprites, meshes
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
scripts ready for testing Sep 18, 2017
src
stubs heaven does not require spine anymore Nov 20, 2018
test
.editorconfig new build, editorconfig Nov 21, 2018
.gitignore Initial commit Sep 15, 2017
.travis.yml
LICENSE Initial commit Sep 15, 2017
README.md heaven does not require spine anymore Nov 20, 2018
package.json bump version Dec 1, 2018
tsconfig.json ready for testing Sep 18, 2017

README.md

pixi-heaven

This is heaven for sprites. Want to color them better? Wanna use advanced colors? Its all here!

Examples are in their own repo.

Done:

  • Advanced color modes
  • Polygon packing
  • Mesh batching

Be careful!

It can affect performance. Though what is performance, when you game looks like s@#$? Spawn fewer objects but make it prettier!

Integration with pixi-spine

pixi-spine is optional, however it is REQUIRED by typescript definitions.

Two ways:

  1. <///reference types="pixi-spine.d.ts"/>
  2. Use pixi-spine.d.ts file from stubs folder.

In any case, put both pixi.js and pixi-spine.js before you include heaven in your build.

How to use

Just add pixi-heaven.js file in your build.

var sprite = new PIXI.heaven.Sprite();
// good old sprite tint
sprite.color.setLight(0.5, 1.0, 0.5);

// dark tint - new feature
sprite.color.setDark(0.2, 0.2, 0.2);

// change single component, useful for tweening
sprite.color.darkG = 0.1;

Or convert PIXI sprite

var sprite = new PIXI.Sprite(someTexture);

// pixi vanilla way, optional
sprite.tint = 0x80ff80;

// activate the plugin!
sprite.convertToHeaven();

Note that if you are using TS, sprite type will be changed

let coloredSprite : PIXI.heaven.Sprite = sprite.convertColors();

Useful example: invert the colors

sprite.color.setLight(0, 0, 0);
sprite.color.setDark(1, 1, 1);

Make whole sprite of one color:

sprite.tint = 0xffaacc;
sprite.color.dark[0] = sprite.color.light[0];
sprite.color.dark[1] = sprite.color.light[1];
sprite.color.dark[2] = sprite.color.light[2];
//dont forget to invalidate, after you changed dark DIRECTLY
sprite.color.invalidate();

Meshes

Heaven meshes can be batched with heaven sprites, and that significantly reduces number of Draw Calls but it eats CPU resources and doesn't work with advanced modes like uploadUvTransform

// Default, PixiJS vanilla mode
PIXI.heaven.settings.MESH_PLUGIN = 'meshHeaven';

// New mode, meshes batched as sprites
PIXI.heaven.settings.SPINE_MESH_PLUGIN = 'spriteHeaven';

// manually set one mesh to be batched with sprites
mesh.plugin = 'spriteHeaven';

How to use with spine

This plugin enables light-dark tint of spine 3.6.

Dark-light tint works like in sprites.

spine = new PIXI.heaven.spine.Spine();
spine.color.setLight(0.5, 1.0, 0.5);
spine.color.setDark(0.2, 0.2, 0.2);

How to mask sprites with sprites

Plugin adds special renderer that has faster masks than just sprite.mask. It also works on heaven meshes.

sprite = new PIXI.heaven.Sprite();
sprite.maskSprite = sprite2; //set it
sprite.pluginName = 'spriteMasked'; //enable special plugin rendering
sprite2.renderable = false; //turn off rendering

Batching works with spine, just enable maskSprite in any sprite of spine instance.

The best practice for spine meshes is to batch them with sprites. It eats some CPU resources.

// Default mode, meshes are rendered as sprites
PIXI.heaven.settings.SPINE_MESH_PLUGIN = 'spriteHeaven';

// PixiJS vanilla mode
PIXI.heaven.settings.SPINE_MESH_PLUGIN = 'meshHeaven';

Look at Spine file to see how it actually works.

How to use colored meshes

Please make sure everything is initialized, i didnt hook it up in refresh!!! see errors in console? make sure texture is initialized

Look in the code for details.

var strip = new PIXI.heaven.mesh.Rope(PIXI.Texture.fromImage('required/assets/snake.png'), 25, 2, 0);
strip.enableColors();

//lets make it randomy!
var len = strip.vertices.length / 2;
var rgb = new Float32Array(len*3);
//set light
for (var i=0;i<len*3;i++) rgb[i] = 0.5 + Math.random() * 0.5;
strip.setRGB(rgb);
//set dark
for (var i=0;i<len*3;i++) rgb[i] = Math.random() * 0.5;
strip.setRGB(rgb, true);

Animation

Unlike pixiJS vanilla AnimatedSprite, here animation is a component:

new PIXI.heaven.AnimationState(frames).bind(rope);
rope.animState.gotoAndStop(2);

It still uses PIXI.ticker.shared if you dont specify autoUpdate=false. It will be stopped and destroyed with the bound element.

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 ./dist.

You can’t perform that action at this time.