サイトトップ
Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

EaselJSで外部ビットマップファイルを読込んで回す

ID: FN1204005 Technique: HTML5 and JavaScript

EaselJSで外部から読込んだビットマップファイルをCanvasに表示し、さらにアニメーションで回してみます。EaselJSの基本的な使い方や必要な設定については、「EaselJSで図形を描く」をお読みください。


01 円のShapeインスタンスをふたつつくる
ビットマップはPNGファイル(Pen.png)で用意しました。HTMLドキュメントと同じ場所に画像用のフォルダ(images)をつくり、その中に納めます(図001)。

図001■PNGファイルを画像用フォルダに納める
図001

HTMLドキュメントの<body>要素には<canvas>要素("myCanvas")が記述され、描画のためのJavaScriptの関数(xInitialize())を呼出しているものとします。EaselJSの基本的な設定については、前出「EaselJSで図形を描く」をお読みください。

<body onload="xInitialize()">
  <canvas id="myCanvas" width="240" height="180"></canvas>
</body>

EaselJSで外部ビットマップファイルを読込んで、Canvasに表示するのは簡単です。つぎの3つの手順を踏みます。

  1. EaselJSライブラリのBitmap.jsを読込む
  2. Bitmapクラスのコンストラクタメソッドでインスタンスをつくる
  3. BitmapインスタンスをStageオブジェクトの子に加える

Bitmapクラスのコンストラクタメソッドには、読込むビットマップファイルのURIを文字列で引数に渡します。

new Bitmap(読込むファイルのURI)

以下のコード001をHTMLドキュメントの<script>要素として加えると、外部から読込まれたPNGファイルの画像が画面左上に表示されます(図002)。

図002■外部から読込んだファイルの画像が画面左上に表示された
図002

コード001■EaselJSでPNGファイルを読込んでCanvasに表示する
  1. <script src="easeljs/utils/UID.js"></script>
  2. <script src="easeljs/geom/Matrix2D.js"></script>
  3. <script src="easeljs/display/DisplayObject.js"></script>
  4. <script src="easeljs/display/Container.js"></script>
  5. <script src="easeljs/display/Stage.js"></script>
  6. <script src="easeljs/display/Bitmap.js"></script>
  7. <script type="text/javascript">
  8.   var stage;
  9.   var myBitmap;
  10.   function xInitialize() {
  11.     var canvasObject = document.getElementById('myCanvas');
  12.     stage = new Stage(canvasObject);
  13.     xDraw();
  14.   }
  15.   function xDraw() {
  16.     myBitmap = new Bitmap("images/Pen.png");
  17.     stage.addChild(myBitmap);
  18.     stage.update();
  19.   }
  20. </script>

まず、EaselJSライブラリのBitmap.jsの読込みを<script>要素に加えます(コード001第6行目)。つぎに、Bitmapクラスのコンストラクタメソッドに読込むファイルのURIを渡して呼出します(第16行目)。そして、でき上がったBitmapインスタンスを、Container.addChild()メソッドでStageオブジェクトの表示リストに加えました(第17行目)。


02 インスタンスを回すアニメーション
インスタンスを回すアニメーションについては、「EaselJSで描いた星形を回す」の02「EaselJSを使ったスクリプトによるアニメーション」でご説明しました。インスタンスがBitmapでも、とくに回し方そのものは変わりません。すると、前掲コード001につぎの記述を加えればよさそうです。

    <script src="easeljs/utils/Ticker.js"></script>   // 追加
  1. <script type="text/javascript">
  1.   function xDraw() {
  2.     myBitmap = new Bitmap("images/Pen.png");
  3.     stage.addChild(myBitmap);
  4.     stage.update();
        Ticker.addListener(window);   // 追加
  5.   }
      // 追加
      function tick() {
        myBitmap.rotation += 5;
        stage.update();
      }
  6. </script>

このコードを試すと、確かに画像の回るアニメーションになります。ただし、回転の中心が画像の左上角になってしまいます(図003)。

図003■左上角を中心に画像が回る
図003右


03 インスタンスを中心から回す
DisplayObjectクラスにはDisplayObject.regXとDisplayObject.regYというプロパティがあり、インスタンスの基準点を変えることができます。また、BitmapインスタンスのBitmap.imageプロパティから、読込んだ画像のImageオブジェクトが参照できます。これらのプロパティを使って、Bitmapインスタンスを中心から回すようにしたのがつぎのコード002です。

コード002■外部から読込んだ画像をCanvas中央に置いて中心から回す
  1. <script src="easeljs/utils/UID.js"></script>
  2. <script src="easeljs/geom/Matrix2D.js"></script>
  3. <script src="easeljs/display/DisplayObject.js"></script>
  4. <script src="easeljs/display/Container.js"></script>
  5. <script src="easeljs/display/Stage.js"></script>
  6. <script src="easeljs/display/Bitmap.js"></script>
  7. <script src="easeljs/utils/Ticker.js"></script>
  8. <script type="text/javascript">
  9.   var stage;
  10.   var myBitmap;
  11.   function xInitialize() {
  12.     var canvasObject = document.getElementById('myCanvas');
  13.     stage = new Stage(canvasObject);
  14.     xDraw(canvasObject.width / 2, canvasObject.height / 2);
  15.   }
  16.   function xDraw(nX, nY) {
  17.     myBitmap = new Bitmap("images/Pen.png");
  18.     myBitmap.regX = myBitmap.image.width / 2;
  19.     myBitmap.regY = myBitmap.image.height / 2;
  20.     myBitmap.x = nX;
  21.     myBitmap.y = nY;
  22.     stage.addChild(myBitmap);
  23.     stage.update();
  24.     Ticker.addListener(window);
  25.   }
  26.   function tick() {
  27.     myBitmap.rotation += 5;
  28.     stage.update();
  29.   }
  30. </script>

BitmapインスタンスをつくってCanvasに配置する関数(xDraw)に、xy座標とするふたつの引数が定められました(コード002第16行目)。そして、初期設定の関数(xInitialize())から、Canvasの中心となるxy座標を渡して呼出します(第14行目)。

Bitmapインスタンスをつくる関数(xDraw())では、読込んだ画像のImageオブジェクトをBitmap.imageプロパティで参照して、幅と高さの半分の値をそれぞれBitmapインスタンスのDisplayObject.regXとDisplayObject.regYプロパティに定めました(コード002第18〜19行目)。これで、Bitmapインスタンスの基準点は中央になります。そのうえで、関数の引数に受取ったCanvasの中心のxy座標をBitmapインスタンスに設定しました(第20〜21行目)。

これでBitmapインスタンスはCanvasの中央に置かれ、アニメーションはその中心から回ります(図004)。

図004■Canvasの中央に置かれた画像が中心から回る
図004左   図004右

作成者: 野中文雄
作成日: 2012年4月7日
Copyright © 2001-2012 Fumio Nonaka.  All rights reserved.