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

HTML5テクニカルノート

PreloadJSに備わる予定のLoadQueueクラスで外部画像ファイルの読込みを待つ

ID: FN1301008 Technique: HTML5 and JavaScript

2013年1月づけでCreateJSサイトにつぎのリリース候補バージョン(release candidates)が公開されました。PreloadJSライブラリについては、これまで使われてきたライブラリと同名のクラス(PreloadJS)に替えて、LoadQueueクラスが備わりました(図001)。そこで、PreloadJSクラスが使われているスクリプトを、LoadQueueクラスにどのように書替えればよいのかについてご説明します。

図001■リリース候補のPreloadJSライブラリとLoadQueueクラス
図001左 図001右

01 script要素に読込むクラス

書替えのお題には、「PreloadJSで外部画像ファイルの読込みを待つ」のコード003を採上げます。外部画像ファイルを読込んだ後、そのイメージの情報をもとに配置しています。書替えたscript要素全体は、後にコード001として掲げます。抜書きするスクリプトの行番号はこのコード001にもとづきます。

まずは、script要素に読込むJavaScript(JS)ファイルです。クラスはPreloadJSを、LoadQueueに差替えます(第14行目)。そして、このCreateJSのバージョンではイベントをEventDispatcherクラスが扱うため、そのJSファイルも読込みます(第7行目)。

  1. <script src="easeljs/events/EventDispatcher.js"></script>
    <!--
    <script src="preloadjs/PreloadJS.js"></script>
    -->
  1. <script src="preloadjs/LoadQueue.js"></script>

なお、ひとつひとつのクラスのJSファイルでなく、コンパクト(min)版をscript要素で読込んでいる場合には、easeljsとpreloadjsのバージョン(NEXTの部分)だけ変えれば、その中でクラスは差替わります。

<script src="lib/easeljs-NEXT.min.js"></script>
<script src="lib/preloadjs-NEXT.min.js"></script>


02 LoadQueueクラスを使う

つぎに、JavaScriptコードのPreloadJSクラスを使ったステートメントは、LoadQueueクラスの仕様にしたがって書替えます。コンストラクタは、PreloadJSクラスと同じく、XMLHttpRequestを使うかどうかをブール(論理)値で渡して呼出します。したがって、関数名を変えるだけで済みます(第25行目)。

new LoadQueue(XMLHttpRequestの使用)
  1. function xInitialize() {
      // var loader = new PreloadJS(false);
  1.   var loader = new LoadQueue(false);
  1. }

PreloadJS.loadFile()メソッドの引数に渡すObjectにdataプロパティを加えると、イベントハンドラが受取るイベントオブジェクトのdataプロパティとして受取れました。LoadQueue.loadFile()メソッドに渡したファイルの指定は、イベントオブジェクトのitemプロパティにオブジェクトで納められます。したがって、itemプロパティから得たオブジェクトからdataプロパティの値を取出します。

  1. function xInitialize() {
  1.   var file = {src:"images/large.png", id:"image", data:position}
  2.   var loader = new LoadQueue(false);
  1.   loader.loadFile(file);
  2. }
  3. function xDraw(eventObject) {
      // var position = eventObject.data
  1.   var position = eventObject.item.data
  1. }

書替えたscript要素の全体はつぎのコード001のとおりです。これで、リリース候補のCreateJSのライブラリでとくに問題なく、外部画像ファイルを読込んで、ステージの真ん中に配置します。

コード001■LoadQueueクラスで読込んだ外部画像ファイルのイメージをステージ中央に置く
  1. <script>
  2. var createjs = window;
  3. </script>
  4. <script src="easeljs/utils/UID.js"></script>
  5. <script src="easeljs/geom/Matrix2D.js"></script>
  6. <script src="easeljs/geom/Point.js"></script>
  7. <script src="easeljs/events/EventDispatcher.js"></script>
  8. <script src="easeljs/events/MouseEvent.js"></script>
  9. <script src="easeljs/display/DisplayObject.js"></script>
  10. <script src="easeljs/display/Container.js"></script>
  11. <script src="easeljs/display/Stage.js"></script>
  12. <script src="easeljs/display/Bitmap.js"></script>
  13. <script src="preloadjs/AbstractLoader.js"></script>
  14. <script src="preloadjs/LoadQueue.js"></script>
  15. <script src="preloadjs/TagLoader.js"></script>
  16. <script src="preloadjs/XHRLoader.js"></script>
  17. <script type="text/javascript">
  18. var stage;
  19. var myBitmap;
  20. var canvasObject;
  21. function xInitialize() {
  22.   canvasObject = document.getElementById('myCanvas');
  23.   var position = new Point(canvasObject.width / 2, canvasObject.height / 2);
  24.   var file = {src:"images/large.png", id:"image", data:position}
  25.   var loader = new LoadQueue(false);
  26.   stage = new Stage(canvasObject);
  27.   loader.onFileLoad = xDraw;
  28.   loader.loadFile(file);
  29. }
  30. function xDraw(eventObject) {
  31.   var myImage = eventObject.result;
  32.   var position = eventObject.item.data
  33.   myBitmap = new Bitmap(myImage);
  34.   myBitmap.x = position.x - myImage.width / 2;
  35.   myBitmap.y = position.y - myImage.height / 2;
  36.   stage.addChild(myBitmap);
  37.   stage.update();
  38. }
  39. </script>

03 名前空間を加える

コード001で取りあえずは動きました。けれど、それだけで済まさず、来るべきスクリプティングのスタイルに装いを変えましょう。手始めは、名前空間です。すでにcreatejsという名前空間がCreateJS Suiteのクラスには加えられています。大規模な開発や複数のライブラリを使う場合に備えて、名前空間を添えることにします。そこで、名前空間を省くscript要素は除きます。

<!--
<script>
var createjs = window;
</script>
-->

そして、CreateJSのクラスの参照には、すべて名前空間createjsを加えます。今回のスクリプトでは、インスタンスを作成するステートメントが対象です(第6、第8〜9、第16行目)。

  1. function xInitialize() {
  2.   canvasObject = document.getElementById('myCanvas');
      // var position = new Point(canvasObject.width / 2, canvasObject.height / 2);
  3.   var position = new createjs.Point(canvasObject.width / 2, canvasObject.height / 2);
      // var loader = new LoadQueue(false);
  1.   var loader = new createjs.LoadQueue(false);
      // stage = new Stage(canvasObject);
  2.   stage = new createjs.Stage(canvasObject);
  1. }
  2. function xDraw(eventObject) {
  3.   var myImage = eventObject.result;
      // myBitmap = new Bitmap(myImage);
  1.   myBitmap = new createjs.Bitmap(myImage);
  1. }

04 イベントリスナーを使う

リリース候補のバージョンでは、EaselJSライブラリにEventDispatcherクラスが加わることも、大きな変更のひとつです。イベントが起こったときに呼出す関数は、EventDispatcher.addEventListener()メソッドでリスナーに加えます。ファイルをひとつロードし終えたというイベントは、文字列"fileload"で定めます。

オブジェクト.addEventListener(イベント, 関数)
  1. function xInitialize() {
      // loader.onFileLoad = xDraw;
  1.   loader.addEventListener("fileload", xDraw);
  1. }

前掲コード001に名前空間とイベントリスナーを加えたJavaScriptコードが。つぎのコード002です。なお、本稿はリリース候補のバージョンにもとづきますので、正規公開までには仕様や実装が変わる場合もあります。

コード002■名前空間とイベントリスナーを使ったPreloadJSライブラリによる外部画像の読込み
  1. var stage;
  2. var myBitmap;
  3. var canvasObject;
  4. function xInitialize() {
  5.   canvasObject = document.getElementById('myCanvas');
  6.   var position = new createjs.Point(canvasObject.width / 2, canvasObject.height / 2);
  7.   var file = {src:"images/large.png", id:"image", data:position}
  8.   var loader = new createjs.LoadQueue(false);
  9.   stage = new createjs.Stage(canvasObject);
  10.   loader.addEventListener("fileload", xDraw);
  11.   loader.loadFile(file);
  12. }
  13. function xDraw(eventObject) {
  14.   var myImage = eventObject.result;
  15.   var position = eventObject.item.data
  16.   myBitmap = new createjs.Bitmap(myImage);
  17.   myBitmap.x = position.x - myImage.width / 2;
  18.   myBitmap.y = position.y - myImage.height / 2;
  19.   stage.addChild(myBitmap);
  20.   stage.update();
  21. }

作成者: 野中文雄
作成日: 2013年1月23日
Copyright © 2001-2013 Fumio Nonaka.  All rights reserved.