CreateJSを学びなおす

以前、Web上で「語学学習支援プレイヤー(Repete)」の雰囲気を伝えるためのデモを作成するためにCreateJSを学びました。
2013年9月ごろです。
アプリの「語学学習支援プレイヤー(Repete)」は、自動で無音を検知します。デモでは雰囲気を伝えれば良いということで、あらかじめ定めておいた読み上げ文とあらかじめ決められた秒数を用い、再生・ポーズ・再開をおこないました。
いったんは、アップしたものの、ブラウザによっては音割れを起こしているものがあって困りました。メンテしていくのが大変かつ広報効果があまりなかったので、結局デモは取り下げました。

それ以来、iOSアプリ開発にかかりきりで、CreateJSのアップデートを追っていなかったのですが、昨日の記事(SoundJSを使った音楽の再生)を書くために現在のCreateJSを調べました。

2013年9月からやっていない人が追いつくために見たサイト

公式サイト

CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5
久しぶりに見ると、公式サイトもすっかりリニューアルされていました
(2014年12月にリニューアル)
ドキュメント、デモが充実している

CreateJSのブログ

CreateJS Blog
ブログを読むと、アップデート内容をたどることができます

CreateJSGitHub

CreateJS · GitHub
CreateJSのGitHub
各ライブラリのVersions.txtにバージョンごとの機能変更がこまかく記されています

野中文雄さんの記事

F-site | CreateJSの2014年12月12日および2015年5月21日の改訂のまとめ
野中文雄さんによるCreateJSの改訂状況のまとめ
日本語による情報。
このページを見ると、CreateJSの変化がわかります
FN1412007 | CreateJS 14/12/12 : getter/setterプロパティを実装する | HTML5 : テクニカルノート
SoundJS 0.6.0で、かなりgetter/setterプロパティが採り入れられています
最新のCreateJSを取り巻く環境にキャッチアップする | CreateJSのアップデートとFlash Professional CC 2015のHTML5 Canvasパブリッシュ | CreateJS勉強会 (第6回)
2015年9月に公開された記事。現在のCreateJS。

応用・実践編

gskinner lab
CreateJSの作者G-.Skinnerのラボ。

ICS LAB – HTML5/WebGL/Flash開発者の必読メディア
ICS LABのサイトで実践的なCreateJSの使い方が記されています
HTML5の音声ファイル最適化技術オーディオスプライトとは?―CreateJS勉強会/鹿野発表資料 – ICS LAB
複数のオーディオファイルを一つにまとめて読み込み時間を短縮する方法が紹介されています

[CreateJS][SoundJS]音を鳴らす。playとpauseが出来るようにする。(SoundJS ver 0.6.1)

以前、
[CreateJS][SoundJS]音を鳴らす。playとpauseが出来るようにする。 | nackpan Blog
という記事を書きました。
SoundJS ver0.5.0(2013年9月)の時代のもので、2015年9月現在CreateJSはアップデートしてサイトもリニューアルされたので、記事中のリンク先が切れているものが多いです。
そこで、SoundJS ver0.6.1(2015年5月リリース)にアップデートした記事を書きました。


ss 2015-08-31 22.36.01
SoundJS | A JavaScript library that lets you easily work with HTML5 audio.

CreateJSの4種のスイートのひとつ、SoundJSを使って音をあつかいます。

まずは音を出してみる

ファイル構成
fileorganization
index.htm

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>音を鳴らす</head>
<body>
    <script type="text/javascript" src="https://code.createjs.com/soundjs-0.6.1.min.js"></script>
    <script type="text/javascript" src="js/playSound.js"></script>
</body>
</html>

playSound.js

(function (window){
    
    init();
    
    function init() {
        //オーディオファイルのロードが終了したならloadHandlerが呼ばれる
        createjs.Sound.addEventListener("fileload", loadHandler);
        //オーディオファイルを登録
        createjs.Sound.registerSound( "assets/sound.mp3", "sound01");
    }
    
    function loadHandler(event)
    {
        //音を出す
        createjs.Sound.play("sound01");
    }   
      
}(window));

これで、音が鳴ります。

playボタンとpauseボタンをつくろう

playボタンを押すと音が出て、pauseボタンで止まる。そこでplayボタンを押すと続きから再生される。というのをやってみます。

SoundJS v0.6.1 API Documentation : SoundJS

SoundJSのドキュメントです。
こちらに、サウンドをコントロールするのにAbstractSoundInstanceクラスのインスタンスを用いるとあります。

AbstractSoundInstanceのドキュメント。
SoundJS v0.6.1 API Documentation : SoundJS
サウンドインスタンスの作成方法

// idでオーディオファイルを指定。パスでも指定できる
var instance = createjs.Sound.play("sound01");

あるいは

// idでオーディオファイルを指定。パスでも指定できる
var instance = cj.Sound.createInstance("sound01");

このように記述する事で、サウンドインスタンスが出来ます。このインスタンスをplay, pauseすればよい。

参考になるものがないかとCreateJSのデモページを見てみました。
CreateJS | Demos
さまざまなデモがあってCreateJSの多彩な使い方を知ることができます。
(Demo画面の右下には
live edit
というボタンがあって、自由にコードを編集でき実行できます。)

デモページの
ss 2015-09-11 11.25.04
MORE DEMOSボタンからSoundJSのデモを見てると、
ssMediaPlayer(注・音出ます)
CreateJS | Demos for SoundJS – Media Player
というDemoがありました。

このMedia Playerデモのコードを見て、play, pauseのやり方を調べてみました。

instance.paused ? instance.paused = false : instance.paused = true;

サウンドインスタンスのpausedプロパティで、pauseを切り替えることができることがわかりました。

ということで、
再生(play)、一時停止(pause)、再開(resume)をおこなう例をつくりました。

forked: [CreateJS][SoundJS]音を鳴らしてみる(SoundJS ver 0.6.1) – jsdo.it

[CreateJS][SoundJS]音を鳴らす。playとpauseが出来るようにする。

(2015年9月11日追記。
この記事の情報はSoundJS ver 0.5(2013年9月)に基づくものです。
SoundJS ver 0.6.1(2015年5月リリース)に基づいて
こちらに
[CreateJS][SoundJS]音を鳴らす。playとpauseが出来るようにする。(SoundJS ver 0.6.1) | nackpan Blog
記事を書き直しました)


以下の情報はSoundJS ver 0.5(2013年9月)に基づくものです

ssSoundJS
SoundJSのサイト
CreateJSの4種のスイートのひとつ、SoundJSを使って音をあつかってみよう。

まずは音を出してみる

ファイル構成
fileorganization
index.htm

<!DOCTYPE html>
<html>
<head>音を鳴らす</head>
<body>
    <script type="text/javascript" src="http://code.createjs.com/soundjs-0.5.0.min.js"></script>
    <script type="text/javascript" src="js/playSound.js"></script>
</body>
</html>

playSound.js

(function (window){
    init();
    
    function init() {
        //オーディオファイルのロードが終了したならhandleFileLoadが呼ばれる
        createjs.Sound.addEventListener("fileload", handleFileLoad);
        //オーディオファイルを登録
        createjs.Sound.registerSound( {id:"sound01", src:"assets/sound.mp3"} );
    }
    
    functioin handleFileLoad(event)
    {
        //音を出す
        createjs.Sound.play("sound01");
    }        
}(window));

これで、音が鳴る。

playボタンとpauseボタンをつくろう

playボタンを押すと音が出る、pauseボタンで止まって、そこでplayボタンを押すと続きから再生される。というのをやってみよう。
ssSoundJSResources
SoundJSのサイトのResourcesにある、チュートリアル、ドキュメントを見ていくと、SoundInstanceクラスというのがある。
SoundInstanceクラスのドキュメンテーション
サウンドインスタンスの作成方法

// idでオーディオファイルを指定。パスやevent.srcでも指定できる
var instance = createjs.Sound.play("sound01");

あるいは

// idでオーディオファイルを指定。パスやevent.srcでも指定できる
var instance = cj.Sound.createInstance("sound01");

このように記述する事で、サウンドインスタンスが出来る。このインスタンスをplay, pause, resumeすればいい。

ここで、SoundJSのサイトのDEMOSをあらためて見たら、
ssMediaPlayer(注・音出ます)
MediaPlayerというのがあるじゃないですか。
これみたら、

soundInstance.paused

で、そのインスタンスがポーズしているかどうか調べられるんだ、ということ分かった。

ということで、
再生(play)、一時停止(pause)、再開(resume)をおこなう例をつくりました。
[CreateJS][SoundJS]音を鳴らしてみる – jsdo.it

tweenについて、easingについて

TweenJSをあつかうにあたって、tweenのことが良くわかってなかったので調べた。
イージングでquadとか、cubicとか出てくるけどどういう事を示しているのか知らなかった。
tweenとは、アニメーションの際に始まりと終わりを指定するとその間をうまいこと補間してくれる機能。
イージングで、どのように補間するか定める。イージングで、in, out の指定があるが、それは、始点でどのように動くか、終点でどのように動くか指定するもの。
Robert Pennerさんによるイージングが広く用いられている。
こちらに、Robert Pennerさんのイージングに関係する情報がいろいろとのっている。(図や、スライド、文章・・・)
Robert Penner’s Easing Functions
このなかに書籍”Robert Penner’s Programming MacroMedia Flash MX”の中のtweenに関する章がpdfで掲載されている。
http://www.robertpenner.com/easing/penner_chapter7_tweening.pdf
順を追って、丁寧に平易にPenner’s Easingがどのように作り出されていったか述べてある。
t : time (現在時刻)
d : duration (始まりから終わりまでにかかる時間)
b : begin (始まりの量)
c : change (変化量)

イージングで用いられている用語とその変化の度合い

(t は、始点時0、終点時1となるように調整。(t = t / duration) )
quad : quadratic(二次) f(t) = t * t
cubic : cubic (三次) f(t) = t * t * t
quart : quartic (四次) f(t) = t * t * t * t

quad といえば、4を意味するのでは?と思った。この章で、作者も触れている。
quadraticは、正方形の、2次の、という意味。ラテン語の正方形 quadratum から来ている。quadratumが「4辺」という意味合いの言葉だった。

イージング Linear, quadratic In , cubic In , quartic In が どのようになるのか描いてみた。

CreateJSを使ってみる – 読み込んだ画像をアニメーションさせながら変形

イメージ図。
image_transform

前回(CreateJSを使ってみる – 画像の読み込み)は、画像を読み込むところまでやった。

画像を変形する

イメージ図のようにするために、画像を回転させて、縦方向に圧縮しましょう。

EaselJS には回転、拡大縮小、移動などを行列で行うクラス Matrix2D がある。

こちらのブログで、matrix を用いた回転や拡大縮小の例を分かりやすく解説している。
EaselJSのMatrix2Dクラスを使った変換行列の操作 | kudox.jp
この時点(EaselJS 0.5.0)では、Matrix2D のscale メソッドは、matrix にmatrix を乗算したものと違う挙動をしていた。
FN1305002 – EaselJSのMatrix2D.scale()メソッドを他の変換の後に呼出すと正しく伸縮されない – HTML5 : テクニカルノート
2013年5月15日付けEaselJS 0.6.1 以降は、Matrix2D の scale メソッドのバグは修正されている。

実例。matrix による画像の変形。
ボタンを押すと、だんだんと変形の度合いが強くなるようにした。

        var rotation = (endRotation - startRotation) * ratio + startRotation;
        var scaleX = (endScaleX - startScaleX) * ratio + startScaleX;
        var scaleY = (endScaleY - startScaleY) * ratio + startScaleY;
        
        var matrix = new cj.Matrix2D(1,0,0,1,0,0);
        matrix.rotate(rotation * Math.PI/180);
        matrix.scale(scaleX, scaleY);
        matrix.decompose(container);

この部分で、単位行列 に、回転matrix と拡大縮小matrix をかけてできた行列をcontainer に適用している。

アニメーションする

アニメーションの際は、ゆっくり動き出して速く動いた後、またゆっくりになって止まるなど、スピードを調整したい。
あと、変形が終わった後、さらに移動させたりしたい。
CreateJS には、そのあたりを簡単に記述できるライブラリTweenJS があるので、それを使ってみよう。
TweenJS の使い方は、こちらのブログが分かりやすかった。
トゥイーンで簡単canvasアニメーション!TweenJSの使い方 | kudox.jp

TweenJS で、x やy , rotationなどはあつかいやすい。
けど、matrix に変換行列をかけていくのをやるにはどうしたらいいのかな。プラグインをつくって、そこで計算してターゲットのmatrixに変更を加える事にしよう。

TransformMatrixPlugin.js というのを作って、matrixに変更を加えて適用するようにした。

   var tween = cj.Tween.get(imgLayers[i],{override:false})
    .to({x:80, y: 80}, i * 10)
    .set({matEnabled:true})
    .to({mat:{rotation:45,scaleX:1.0, scaleY:0.3}, x:160, y:280 - i * 10}, 500,cj.Ease.quadIn)
    .set({matEnabled:false})
    .to({x:160, y: 280 - i * 35},500, cj.Ease.backOut);

ひとつめのtween部分、このうち、

    .set({matEnabled:true})
    .to({mat:{rotation:45,scaleX:1.0, scaleY:0.3}, x:160, y:280 - i * 10}, 500,cj.Ease.quadIn)
    .set({matEnabled:false})

部分が、TransformMatrixPlugin が関係している部分。

   .to({mat:{rotation:45,scaleX:1.0, scaleY:0.3}, x:160, y:280 - i * 10}, 500,cj.Ease.quadIn)

のところで、matrixを使った変形を指定。
mat というプロパティをTransformMatrixPluginで設定した。
mat は、skewX, skewY, rotation, scaleX, scaleY をもち、値を設定する事が出来る。
そして、mat プロパティを使うときには

  .set({matEnabled:true})

をその直前に、そして、

  .set({matEnabled:false})

をmat プロパティを使った直後に書く。

TransformMatrixPlugin.js

/*
* TransformMatrixPlugin
* Visit http://createjs.com/ for documentation, updates and examples.
*
* Copyright (c) 2013 nackpan
* 
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use,
* copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following
* conditions:
* 
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
* 
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
* OTHER DEALINGS IN THE SOFTWARE.
*/
 
// namespace:
this.createjs = this.createjs||{};
 
(function() {
/**
 * TransformMatrixPlugin.js
 * You can transform the target by tweening its matrix. 
 * These transformation functions include skewing, rotation, and scaling.
 *
 *To use, install the plugin after TweenJS has loaded. 
 *
 * <h4>Example</h4>
 *
 *      createjs.Tween.get(target).to({x:100, y:40}).set({matEnabled:true}).to({mat:{skewX:20, rotation:20}).set({matEnabled:false}) ;
 *
 * You can transform the target's matrix by using the 'mat' property.
 * The 'mat' has properties: skewX, skewY, rotation, scallX and scallY; 
 * You must insert '.set({matEnabled:true})'  just before using 'mat' property.
 * And add '.set({matEnabled:false})' after using 'mat' property.
 * @class TransformMatrixPlugin
 * @constructor
 **/
var TransformMatrixPlugin = function() {
  throw("TransformMatrixPlugin cannot be instantiated.");
};
    
// static interface:
    /**
     * @property priority
     * @static
     **/
    TransformMatrixPlugin.priority = -10;
 
    /**
     * Installs this plugin for use with TweenJS, and registers for a list of properties that this plugin will operate
     * with. Call this once after TweenJS is loaded to enable this plugin.
     * @method install
     * @static
     **/
    TransformMatrixPlugin.install = function() {
        // this registers this plugin to work with the "test" property.
        createjs.Tween.installPlugin(TransformMatrixPlugin, ["matEnabled","mat"]);
    };
    
    /**
     * @method init
     * @static
     **/
    TransformMatrixPlugin.init = function(tween, prop, value) {
        if(!value){ 
            value = {rotation:0.0,scaleX:1.0, scaleY:1.0, skewX:0.0, skewY:0.0};
        }
        return value;
    };
    
    /**
     * @method init
     * @static
     **/
    TransformMatrixPlugin.step = function(tween, prop, startValue, endValue, injectProps) {
    };
    
    /**
     * @method tween
     * @static
     **/
    TransformMatrixPlugin.tween = function(tween, prop, value, startValues, endValues, ratio, wait, end) {
        if (wait) return value;
        if(tween._target.matEnabled === void 0) return value;
        if(!tween._target.matEnabled) return value;
        
        var tx = tween._target.x;
        var ty = tween._target.y;       
        
        var v0 = startValues.mat;
        var v1 = endValues.mat;
        var arr = ["rotation","scaleX","scaleY","skewX","skewY"];
        for(var i = 0; i < arr.length; i++){
            if(v0[arr[i]] === void 0){
                if(arr[i] == "rotation"){
                    v0[arr[i]] = 0;
                }else{
                    v0[arr[i]] = 1;
                }
            }
        }
        for(i = 0; i < arr.length; i++){
            if(v1[arr[i]] === void 0){
                v1[arr[i]] = v0[arr[i]];
            }
        }
        
        var skewX = (v1.skewX - v0.skewX) * ratio + v0.skewX ;
        var skewY = (v1.skewY - v0.skewY) * ratio + v0.skewY;
        var rot = (v1.rotation - v0.rotation) * ratio + v0.rotation;
        var scaleX = (v1.scaleX - v0.scaleX) * ratio + v0.scaleX ;
        var scaleY = (v1.scaleY - v0.scaleY) * ratio + v0.scaleY;
        var matrix = new createjs.Matrix2D(1,0,0,1,0,0);
        matrix.skew(skewX, skewY);
        matrix.rotate(rot * Math.PI/180);
        matrix.scale(scaleX, scaleY);
        matrix.translate(tx, ty);
        matrix.decompose(tween._target);
        
        return value;
    };
    
createjs.TransformMatrixPlugin = TransformMatrixPlugin;
}());

CreateJSを使ってみる – 画像の読み込み

CreateJSを使って、画像を読み込んで、変形したい。
イメージ図。
image_transform
何枚かレイヤーが重なっている状態、ボタンを押すとレイヤー構造が分かりやすく見えるように変形。

まず、今回は、画像の読み込みをやろう。複数の画像を読み込んで、canvasに重ねて表示。
画像読み込みには、PrelaodJSを使うとやりやすい。
PreloadJSは、画像やオーディオファイル、XML等々、外部ファイルを読み込むのをサポートしてくれるライブラリ。
スクリーンショット 2013-09-13 10.10.20

外部ファイル読み込みの例がこちらのブログ記事に書いてある。
PreloadJSの簡単な使い方 : アシアルブログ
新しくなったPreloadJSのLoadQueueクラスで外部ファイルを読み込もう | kudox.jp
これらの記事や、PreloadJSページのDemoやドキュメントを参考にしながら、画像読み込みをやってみた。

    //並列に読み込み
    loader.setMaxConnections(6);

setMaxConnections()で、複数のファイルを並列に読みこむ。

    // 画像の並び替え
    stage.sortChildren(function(a,b){return a.id - b.id;});

複数の画像を読み込んだあと、奥から順番に並ぶように、並べ替え(深度の変更)を行っている。
画像のidに深度をふっておいて、ここで深度順になるように並べ替えている。
Stageのメソッド sortChildren の説明 | EaselJS v0.6.1 API Documentation : EaselJS
Array.sort – JavaScript | MDN (javascriptのArray.sortの説明)

関連ページ

CreateJSを使ってみる – 読み込んだ画像をアニメーションさせながら変形 | nackpan Blog

CreateJSを使ってみる – 図形のドラッグ

CreateJSを使って、Canvasに図形を描いてみる。
そして、その図形、ドラッグできるようにする。
イメージ図。
img20130902
CreateJSのサイト
スクリーンショット 2013-09-02 3.23.06
CreateJSは、EaselJS, TweenJS, SoundJS, PreloadJS の4つのライブラリからなる。単体で用いることが出来る。

EaselJS : Canvas要素を扱いやすくする。

TweenJS : トゥイーンとアニメーションを扱う。

SoundJS : サウンドを扱う。

PreloadJS : 外部ファイルを扱う。

今回は、EaselJSのみ用いる。

EaselJS のページ
スクリーンショット 2013-09-02 4.22.20
デモやリソース(ドキュメント、チュートリアルetc)が充実しているので、これを参考にやっていった。
図形をドラッグして移動できる。

[js gutter=”false”]
cj.Touch.enable(stage);
[/js]
この部分で、タッチを受け付けるようにしている。
これで、iPhoneなどスマートフォンやタブレットで指でなぞって図形を動かすことが出来る。