StageXL StageXL for Dart


2D Animation & Interactivity for the Modern Web

Download this project from: http://www.swirlystudios.com/dart/template.zip

import 'dart:html' as html;
import 'package:stagexl/stagexl.dart';
//*******STEP 1: Set this to your line number, 1-9
  const int LINE_NUM = 1;
  Stage stage;
  RenderLoop renderLoop;
  ResourceManager resourceManager;
  TextField narrationTextField;
  Bitmap backgroundImage;
  Bitmap object1Image;
  Bitmap object2Image;
  Bitmap object3Image;
void main() {
  initializeStage();
  loadAssets();
  }
void loadAssets() {
  resourceManager = new ResourceManager()
  ..addSound("narration", "snd/line_${LINE_NUM}.ogg")
  //*****STEP 2: Replace the filenames here with your choses images
  ..addBitmapData("background", "img/default_background.png") //Replace 'default_background.png' with the background of your choice
  ..addBitmapData("object1", "img/default_object1.png") //Replace 'default_object1.png' with the background of your choice
  ..addBitmapData("object2", "img/default_object2.png") //Replace 'default_object2.png' with the background of your choice
  ..addBitmapData("object3", "img/default_object3.png"); //Replace 'default_object3.png' with the background of your choice
  
  resourceManager.load().then(onAssetsLoaded);
  }
  void onAssetsLoaded(var result) {
  addImages();
  addNarrations();
  addAnimations();
  }
  void addImages() {
  backgroundImage = new Bitmap(resourceManager.getBitmapData('background'));
  object1Image = new Bitmap(resourceManager.getBitmapData('object1'));
  object2Image = new Bitmap(resourceManager.getBitmapData('object2'));
  object3Image = new Bitmap(resourceManager.getBitmapData('object3'));
  
  //******STEP 3: Edit the x/y values to place your images at the correct location
  object1Image.x = 100;
  object1Image.y = 100;
  
  object2Image.x = 300;
  object2Image.y = 150;
  
  object3Image.x = 450;
  object3Image.y = 100;
  
  stage.addChild(backgroundImage);
  stage.addChild(object1Image);
  stage.addChild(object2Image);
  stage.addChild(object3Image);
  }
void addNarrations() {
  narrationTextField = new TextField();
  narrationTextField.defaultTextFormat = new TextFormat('Grinched', 30, Color.White);
  
  switch(LINE_NUM) {
  case 1 : narrationTextField.text = "That Sam-I-am! That Sam-I-am! I do not like that Sam-I-am!"; break;
  case 2 : narrationTextField.text = "Do you like green eggs and ham? I do not like them, Sam-I-am. I do not like green eggs and ham."; break;
  case 3 : narrationTextField.text = "Would you like them here or there?"; break;
  case 4 : narrationTextField.text = "I would not like them here or there. I would not like them anywhere. I do not like Green Eggs and Ham. I do not like them Sam-I-am."; break;
  case 5 : narrationTextField.text = "Would you like them in a house? Would you like them with a mouse?"; break;
  case 6 : narrationTextField.text = "I would not like them in a house. I would not like them with a mouse."; break;
  case 7 : narrationTextField.text = "Would you eat them in a box? Would you eat them with a fox?"; break;
  case 8 : narrationTextField.text = "Not in a box. Not with a fox. I would not eat green eggs and ham. I do not like them Sam-I-am."; break;
  case 9 : narrationTextField.text = "Same. If you will let me be, I will try them you will see. I like green eggs and ham! I do! I like them Sam-I-am!"; break;
  default : throw ("Invalid Line Number");
  }
  narrationTextField.x = 20;
  narrationTextField.y = 500;
  narrationTextField.width = 700;
  narrationTextField.height = 180;
  narrationTextField.wordWrap = true;
  stage.addChild(narrationTextField);
  
  Sound sound = resourceManager.getSound("narration");
  SoundChannel soundChannel = sound.play(false);
  }

//*******STEP 4: Delete the contents of this method, replace it with any code samples you would like from http://swirlystudios.com/dart/cookbook.html void addAnimations() { var object1Tween = new Tween(object1Image, 3.0); object1Tween.animate.x.to(600); object1Tween.animate.y.to(100); object1Tween.delay = 1.0; //object1Tween.onComplete = (Event e) { print(e); }; renderLoop.juggler.add(object1Tween); }

//---------------------------------------------------- //no need to edit items in this section void initializeStage() { var canvas = html.query('#stage'); stage = new Stage('myStage', canvas, 800, 600); renderLoop = new RenderLoop(); renderLoop.addStage(stage); } //----------------------------------------------------