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);
}
//----------------------------------------------------