Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including pixi-flash with all npm packages installed. Try it out:

var pixiFlash = require("pixi-flash")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

pixi-flash v0.4.0

PIXI Flash Build Status Dependency Status GitHub version

A library for bridging CreateJS animations from Flash for use in Pixi.js. Publish Flash content like you normally would for CreateJS (with an HTML5 Canvas document), but export for Pixi.js instead. While there are some known issues with this approach, it produces fast animation playback for WebGL and is superior to using Flash's WebGL document.

Game Examples

The animation in these games has been created and exported with PixiFlash.

Examples

Animated examples are from Fizzy's Lunch Lab and used with permission from Lunch Lab, LLC

Flash Publishing

Install Publishing Helper (optional)

Install the post-publish tool by running tools/install.jsfl. This provides some error checking when publishing for PIXI Flash, including error checking images and symbol namespaces.

Flash Setup

  1. Make sure you use a Flash "HTML5 Canvas" document type
  2. Change the publishing settings under JavaScript Namespaces
  • Symbols: pixiflash_lib
  • Images: pixiflash_images
  • CreateJS: pixiflash
  1. Publishing document

Running Content

Installing Library

To run content exported with PixiFlash, you must load the JavaScript library within your project. You can install using Bower or NPM:

Bower

bower install pixi-flash

NPM

npm install pixi-flash

Dependencies

  • Pixi.js is required
  • TweenJS is a dependency for doing timeline animation

Usage

Here's a example using PIXI where the images were assembled using TexturePacker. See the example folder for an example which uses the Flash SpriteSheet exporting.

var renderer = new PIXI.autoDetectRenderer(800, 500);
var stage = new PIXI.Container();

// Load the atlas for the character
var loader = new PIXI.loaders.Loader();

// This atlas is created with TexturePacker from the 
// output individual images from Flash publishing
loader.add('CharacterAtlas',"CharacterAtlas.json");
loader.once('complete',function(loader, resources)
{
    // Assign the atlas to global images in pixiflash_images
    pixiflash.utils.addImages(resources.CharacterAtlas);

    // Create the character, all library symbols live
    // on the pixiflash_lib window object
    var character = new pixiflash_lib.Character();
    character.framerate = 30;
    character.play();

    // Add to stage
    stage.addChild(character);
});
loader.load();

// Normal render
update();
function update()
{
    requestAnimationFrame(update);
    renderer.render(stage);
}

##Known Issues

  • Abutting vector shapes create a small seams which make it possible to see the color underneath (similar to EaselJS)
  • Complex shapes with a negative shape inside of it only render the outer-most shape. For example, a donut shape would only render the outer circle and not the hole.
  • Cannot "Test Movie" in side of Flash to preview the animation
  • Flash Color Effects are supported only for Advanced style multiplicative color changes (RGB percents) by translating to PIXI 'tint' property. Additive color effects such as Tint, and the additive RGB modifiers in the Advanced Color Effect style will be ignored. The Brightness effect is only capable of darkening the symbol (Brightened symbols will be rendered darker than original). Keyframes and tweening of Color Effects are not supported.

##License

Copyright (c) 2015 CloudKid

Released under the MIT License.

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free