CreateJS: リッチでインタラクティブな体験をHTML5に

CreateJS: リッチでインタラクティブな体験をHTML5に [Edit]

投稿者：野中文雄 | 投稿日：2012.09.27 | [CreateJS][HTML5][野中ゼミ]

2012年9月24日にサンフランシスコでAdobeの開いたイベント「Create the Web」のセッションが、ビデオで公開されました(英語)。その中からGrant Skinner氏による「CreateJS: Creating Rich, Interactive Experiences for HTML5」について、スクリプティングに関わる部分のスライドの文章を邦訳して、コードを掲載しました。また、日本語の参考ドキュメントもリンクで加えています。

EaselJS

リッチでインタラクティブな2Dグラフィックスをオープンなwebに作成できる拡張性のあるプラットフォーム
an extensible platform for creating rich, interactive 2D graphics on the open web

機能
features

しっかりと階層化された表示リスト
robust hierarchical display list
ベクターグラフィックスやビットマップ、テキスト
vector graphics, bitmaps, text
スプライトシートとムービークリップ、およびアニメーション
spritesheets, movieclips, animation
キャッシュ、フィルタ、マスク
caching, filters, masks
マウスとマルチタッチのインタラクション
mouse & multitouch interaction
その他
etc, etc

Hello World

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script src="lib/easeljs-0.5.0.min.js"></script>
<script>
function init() {
  stage = new createjs.Stage("demo");
  txt = new createjs.Text("hello world!", "40px Arial");
  stage.addChild(txt);
  stage.update();
}
</script>
</head>
<body onLoad="init();" style="background:#CCC; margin:15px;">
通常の<strong>HTMLテキスト</strong>とcanvas要素はつぎのとおり。<br />
<canvas id="demo" width="240" height="80" style="background:#FFF" />
</body>
</html>

function init() {
  stage = new createjs.Stage("demo");
  txt = new createjs.Text("hello world!", "40px Arial");
  stage.addChild(txt);
  // stage.update();
  createjs.Ticker.addListener(this);
}
function tick() {
  txt.x += 4;
  txt.y = Math.cos(txt.x * 0.1) * 10;
  txt.color = createjs.Graphics.getHSL(360 * Math.random(), 100, 50);
  stage.update();
}

参考:「EaselJSで描いた星形を回す」

function init() {
  stage = new createjs.Stage("demo");
  stage.autoClear = false;
  txt = new createjs.Text("hello world!", "40px Arial");
  stage.addChild(txt);
  createjs.Ticker.addListener(this);
}

EaselJSの基礎
EaselJS basics

var label = new createjs.Text("Daisy!", "bold 14px Arial", "#FFF");
label.textAlign = "center";
label.x = 41;
label.y = 61;
var frame = new createjs.Shape();
frame.graphics.beginFill("#6AF")
  .beginStroke("#000").setStrokeStyle(3)
  .drawRoundRect(0, 0, 82, 82, 8);
var icon = new createjs.Bitmap("daisy.png");
var item = stage.addChild(new createjs.Container());
item.x = item.y = 50;
item.regX = item.regY = 50;
item.addChild(frame, icon, label);
item.onTick = function () {
  this.skewX += 5;
  this.skewY = this.skewX * 0.5;
}

BitmapAnimation

var spriteSheet = new createjs.SpriteSheet({
  images: ["enemy.png"],
  frames: {width:117, height:125, regX:58, regY:62},
  animations: {run: [0, 3, "run", 2], explode: [4, 10, "run", 10]}
});
var pig = stage.addChild(new createjs.BitmapAnimation(spriteSheet));
pig.setTransform(160, 160, 2, 2);
pig.gotoAndPlay("run");
pig.onClick = function () {
  this.gotoAndPlay("explode");
}

参考:「EaselJSでスプライトシートからアニメーションをつくる」

異なるグラフィックサーフェスを活用する
leverage different graphic surfaces

canvas、dom、svg、wedgl

speech = new createjs.DOMElement("div");
spacePig.addChild(pigAnim, speech);

マルチ・サーフェス
multi-surface

キャンバス2D用の試験的なレンダラ
Experimental renderers for Canvas 2D
WebGL、DOM、SVG

TweenJS

シンプルでありながら、驚くほど強力な
simple, but surprisingly powerful
トゥイーン&アニメーションライブラリ
tween & animation library

TweenJSのサンプル
TweenJS example

var ball = stage.addChild(new createjs.Shape());
ball.graphics.beginFill("F00").drawCircle(0, 0, 40);
ball.setTransform(100, -30);
var label = stage.addChild(new createjs.Text("bounce", "60px Arial"));
label.setTransform(200, 120);
createjs.Tween.get(ball).to({y:200}, 2000, createjs.Ease.bounceOut)
  .set({text:"wait"}, label).wait(1000)
  .set({text:"fade"}, label).to({alpha:0}, 1000)
  .set({text:"done"}, label).wait(500)
  .call(alert, ["all done"], window);
}

参考:「TweenJSでインスタンスにトゥイーンアニメーションを加える」

同期化したタイムライン、イージング、シーケンシング
synced timelines, easing, sequencing,
数値以外のプロパティ、オーバーライド
non-numeric props, overriding,
決定性とプラグイン
determinism & plugins

SoundJS

webオーディオをより使いやすく
making web audio (more) usable,
使うAPIはブラグインで
with pluggable API targets &
プログレッシブの強化
progressive enhancement

createjs.CSSPlugin.install();

グローバル
global

var a = [HTMLAudioPlugin, FlashPlugin];
SoundJS.registerPlugins(a);
SoundJS.getCapabilities();
SoundJS.setVolume(0.5);

soundInstance
sound instances

var snd = createjs.SoundJS.play("kaboom");
snd.setPan(-1);
snd.pause();
snd.onComplete = handleComplete;

デモ: SOUND GRID

PreloadJS

読込みのキューをインスタンス化
instantiable load queues with
イベントの進行と素材を管理
progress events & asset
management

基本
basic

var queue = new createjs.PreloadJS();
queue.onComplete = function () {alert("done!");};
queue.onProgress = function (p) {bar.width = p * 100;};
queue.loadManifest(["art.jpg", "data.xml", "code.js"]);

応用
advanced

queue.registerPlugin(createjs.SoundJS);
queue.onFileLoad = function (result) {};
queue.getResult(idOrSrc);
queue.useXHR = false;

参考:「PreloadJSで外部画像ファイルの読込みを待つ」

Toolkit for CreateJS

参考:「Adobe Flash Professional Toolkit for CreateJSについて知りたい方のためのリンク紹介」
「CreateJSの高座をふたつ務めました」
「Toolkit for CreateJS 1.1の新機能」
「Flash Professional CS6アップデート2が公開」

ランタイムスプライトシート
run time spritesheets

var ssb = new createjs.SpriteSheetBuilder();
ssb.addMovieClip(new lib.Gunnertron());
ssb.scale = 0.5;
ssb.buildAsync();

ファイルサイズ
file size

gunnertron.png: 2.5MB
gunnertron.js.zip: 19KB
savings: > 99%

F-site