stagexl 0.13.5

A fast and universal 2D rendering engine for HTML5 and Dart.

example/example.dart

library slot_machine;

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

Future main() async {

  // configure StageXL default options

  StageXL.stageOptions.renderEngine = RenderEngine.WebGL;
  StageXL.stageOptions.backgroundColor = Color.Black;
  StageXL.bitmapDataLoadOptions.webp = false;

  // init Stage and RenderLoop

  var canvas = html.querySelector('#stage');
  var stage = new Stage(canvas, width: 800, height: 600);
  var renderLoop = new RenderLoop();
  renderLoop.addStage(stage);

  var demoSprite = new Sprite();
  demoSprite.graphics.circle(0, 0, 100);
  demoSprite.graphics.fillColor(Color.White);

  var demoText = new TextField();
  demoText.defaultTextFormat = new TextFormat('Helvetica,Arial', 25, Color.Black);
  demoText.x = 0;
  demoText.y = 0;
  demoText.text = 'Test';
  demoSprite.addChild(demoText);

  //If scale is set to zero, the text field will be invisible until mouse click event
  demoSprite.scaleX = 0.1;
  demoSprite.scaleY = 0.1;
  demoSprite.onMouseClick.listen((e) => demoText.text = demoText.text);

  stage.addChild(demoSprite);

  stage.juggler.add(moveToAndScale(demoSprite, new Point(300, 300), 1));

}

Animatable moveToAndScale(Sprite sprite, Point point, num scale, [var seconds, var transitionFunc]) {
  if(seconds == null) seconds = 2;
  if(transitionFunc == null) transitionFunc = Transition.easeInCubic;

  AnimationGroup ag = new AnimationGroup();

  Tween moveTween = new Tween(sprite, seconds, transitionFunc);
  moveTween.animate.x.to(point.x);
  moveTween.animate.y.to(point.y);
  ag.add(moveTween);

  Tween scaleTween = new Tween(sprite, seconds, transitionFunc);
  scaleTween.animate.scaleX.to(scale);
  scaleTween.animate.scaleY.to(scale);
  ag.add(scaleTween);

  return ag;
}