HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う

第1回 読み込んだ画像をトゥイーンアニメーションさせる

この記事を読むのに必要な時間:およそ 7 分

まず,new演算子とBitmap()コンストラクタで,Bitmapオブジェクトをつくる。引数は読込んだ画像イメージのImageオブジェクトだ。Imageオブジェクトは,ハンドラの引数に渡されるイベントオブジェクトのresultプロパティから得られる。

Bitmapオブジェクト = new createjs.Bitmap(Imageオブジェクト)

つぎに,ステージに描くオブジェクトは,必ずStageオブジェクトの子に加えなければならない。そのためには,Stageオブジェクトに対してContainer.addChild()メソッドを呼び出し,子オブジェクトはその引数に渡す。

Stageオブジェクト.addChild(子オブジェクト)

そして,忘れていけないのが,ステージを再描画するStage.update()メソッドの呼出しだ。Canvasそのものはアニメーションを考えていないので,命じられないかぎり画面は描き変えない。EaselJSはアニメーションのため一定の時間間隔で繰返し処理する仕組みをもつものの,おそらく無駄な負荷を省くため,画面はStage.update()メソッドで描き変える。

Stageオブジェクト.update()

画像イメージをステージに描くため,以上の処理をAbstractLoader.onFileLoadイベントのハンドラ(draw())に加える。Stageオブジェクトは初期設定の関数(initialize())で変数(stage)に入れておいたので,それを参照している。

var myBitmap;

function draw(eventObject) {
  var myImage = eventObject.result;

  myBitmap = new createjs.Bitmap(myImage);

  stage.addChild(myBitmap);
  stage.update();
}

ここまでご紹介したJavaScriptコードで,画像ファイルを読込んでそのイメージをBitmapインスタンスとしてステージに描くことができる。もっとも,位置決めをしていないので,ステージの左上角にある原点(0, 0)に,Bitmapインスタンスのデフォルトの基準点となる左上角が配置される図1)⁠

図1 ステージの左上角に画像イメージが描かれる

図1 ステージの左上角に画像イメージが描かれる

この後トゥイーンアニメーションするには,Bitmapインスタンスの基準点はイメージの中心に置いた方が扱いやすい。また,アニメーションを始める位置は,Canvasのサイズにもとづいて決めることにする。

Canvasの大きさは,初期設定の関数(initialize())で調べられる。Bitmapオブジェクトの垂直位置を真ん中にするため,Canvasの高さ(heightプロパティ)を変数(bottom)にとった。

Bitmapインスタンスの基準点は,読込んだ画像イメージのサイズをもとに導く。したがって,読み込み終えたとき呼び出されるハンドラ(draw())で処理する。画像イメージ(Imageオブジェクト)の幅と高さ(widthとheight)を調べて,その半分の座標(halfWidthとhalfHeight)をインスタンスの基準点に定める。

基準点のxy座標を決めるプロパティは,DisplayObject.regXDisplayObject.regYだ。インスタンスの幅と高さの半分の値(halfWidthとhalfHeight)を,それぞれに与える。そのうえで,インスタンスの垂直位置DisplayObject.yプロパティ)はCanvasの高さの半分,水平位置DisplayObject.xプロパティ)は左端から基準点の水平座標分内側に置いた。

var bottom;
function initialize() {
  canvasObject = document.getElementById("myCanvas");

  bottom = canvasObject.height;

}
function draw(eventObject) {
  var myImage = eventObject.result;
  var halfWidth = myImage.width / 2;
  var halfHeight = myImage.height / 2;

  myBitmap.regX = halfWidth;
  myBitmap.regY = halfHeight;
  myBitmap.x = halfWidth;
  myBitmap.y = bottom / 2;

}

これで読込まれた画像イメージをもつBitmapオブジェクトが,Canvasの左端で垂直方向は真ん中に描かれる図2)⁠script要素全体は,つぎのコード1のとおりだ。

図2 読込んだ画像ファイルのイメージがCanvas左端に描かれた

図2 読込んだ画像ファイルのイメージがCanvas左端に描かれた

コード1 PreloadJSで読込んだ画像イメージをCanvasに描く

<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.2.0.min.js"></script>
<script>
var stage;
var myBitmap;
var bottom;
function initialize() {
  canvasObject = document.getElementById("myCanvas");
  var file = "images/Pen.png";
  var loader = new createjs.PreloadJS(false);
  bottom = canvasObject.height;
  stage = new createjs.Stage(canvasObject);
  loader.onFileLoad = draw;
  loader.loadFile(file);
}
function draw(eventObject) {
  var myImage = eventObject.result;
  var halfWidth = myImage.width / 2;
  var halfHeight = myImage.height / 2;
  myBitmap = new createjs.Bitmap(myImage);
  myBitmap.regX = halfWidth;
  myBitmap.regY = halfHeight;
  myBitmap.x = halfWidth;
  myBitmap.y = bottom / 2;
  stage.addChild(myBitmap);
  stage.update();
}
</script>

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

  • preloadjsのバージョンに注意

    new createjs.PreloadJS(false);

    は0.3.xからはエラーになります。
    以下参照。
    http://kudox.jp/java-script/createjs-preloadjs-loadqueue

    Commented : #1  Y.Miyazaki (2014/06/29, 00:44)

コメントの記入