StageXL - Texture Packer runtime

Texture Packer is a popular tool to convert your image assets to a texture atlas. The StageXL library supports the JSON output formats of Texture Packer and all layout optimizations available in Texture Packer. Using a texture atlas accelerates the download of your assets and can improve the render performance in some browsers. The demo below shows the texture atlas on the left and a small animation on the right using the assets from the texture atlas.

library demo;

import 'dart:math';
import 'dart:html' as html;
import 'package:stagexl/stagexl.dart';

part 'texture_packer_demo.dart';

Stage stage = new Stage(html.querySelector('#stage'), webGL: true);
RenderLoop renderLoop = new RenderLoop();
ResourceManager resourceManager = new ResourceManager();

void main() {

  renderLoop.addStage(stage);
  
  resourceManager = new ResourceManager()
    ..addTextureAtlas('levelUp', 'images/LevelupTextureAtlas.json', TextureAtlasFormat.JSONARRAY);
  
  resourceManager.load()
    .then((_) => stage.addChild(new TexturePackerDemo()))
    .catchError((e) => print(e));
}

part of demo;

class TexturePackerDemo extends DisplayObjectContainer {

  TextureAtlas _textureAtlas;

  TexturePackerDemo() {

    _textureAtlas = resourceManager.getTextureAtlas('levelUp');
    _showLevelupAnimation();

    BitmapData.load('images/LevelupTextureAtlas.png').then((bitmapData) {
      Bitmap bitmap = new Bitmap(bitmapData);
      bitmap.x = 70;
      bitmap.y = 40;
      addChild(bitmap);
    });
  }

  _showLevelupAnimation() {

    for(int i = 0, offset = 330; i < 7; i++) {

      var bitmapData = _textureAtlas.getBitmapData('LevelUp${i}');
      var bitmap = new Bitmap(bitmapData)
        ..pivotX = bitmapData.width / 2
        ..pivotY = bitmapData.height / 2
        ..x = offset + bitmapData.width / 2
        ..y = 150
        ..scaleX = 0.0
        ..scaleY = 0.0
        ..addTo(this);

      stage.juggler.tween(bitmap, 2.0, TransitionFunction.easeOutElastic)
        ..animate.scaleX.to(1.0)
        ..animate.scaleY.to(1.0)
        ..delay = i * 0.05;

      stage.juggler.tween(bitmap, 0.4, TransitionFunction.linear)
        ..animate.scaleX.to(0.0)
        ..animate.scaleY.to(0.0)
        ..delay = 2.0
        ..onComplete = () => bitmap.removeFromParent();

      offset = offset + 5 + bitmapData.width;
    }

    stage.juggler.delayCall(() => _showLevelupAnimation(), 3.0);
  }
}