CreateJSを応用したダイナミックなアニメーション

画像を読込む

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
EaselJSで外部画像を読込んで、Canvasに描きます。
講師:
08:39

字幕

この HTML ドキュメントには EaselJS を使うための 最小限のコードが書いてあります ここにステートメントを加えて 外部の PNG 画像を 読み込んでみたいと思います 外部ファイルを読み込むには 予めそのパスを 知っておく必要があります ここではパスは既に 変数に取ってあります HTML ドキュメントと同じ階層の images というフォルダの中に image.png というファイルが あるものとします EaselJS では画像は Bitmap というクラスの オブジェクトで扱います そのオブジェクトを入れるための変数を 宣言しておきましょう var の myBitmap とします そして Bitmap の オブジェクトを作ります myBitmap に対して コンストラクタでオブジェクトを作って 変数に代入します コンストラクタはお約束ですが new で createjs ドット Bitmap です そしてこのコンストラクタの 引数の中に パスを入れます パスは変数に取ってあるので これをコピーすれば良いですね コントロールもしくは コマンドドラッグです さてこれで画像を入れたビットマップは できるんですけれども 位置の調整もしましょう 位置の調整には 関数を別に定めることとします 名前は xSetAppearance としましょう そして引数を渡します 引数は先ず設定する- インスタンスですねオブジェクト 今回はこの Bitmap のオブジェクトです ドラッグコピーしますコントロールキー もしくはコマンドキーを押しながら そして x y 座標を 指定することにします x y 座標は Canvas ステージの 真ん中にしたいので canvasElement から コピーしましてこの幅ですね 幅は width です それを半分にすれば中央になりますね 同様に canvasElement の 参照を取ってきて ドラッグコピーです今度は高さですね 半分にします これが関数の呼び出し方で 関数をここに定めます functionの コピーしましょうコントロールもしくは コマンドドラッグでドラッグコピーです 取り敢えず括弧を閉じてしまって 中括弧 { この中括弧の中に関数本体の処理を 書き加えるわけですが 引数がありますので それを定めましょう 先ずインスタンスを受け取りますね instance という名前にしました 変数も 後は x 座標と y 座標を受け取る 関数本体の処理を 書き加えていきましょう コピーを使える所は できるだけコピーを使いましょうね ドラッグコピーです コントロールもしくはコマンドドラッグ そして x 座標を定めます x 座標は引数として 受け取っていますので それを設定です y 座標も同様に 同様ですからコピーしましょう そしてペーストです x を y に変更します それからステージに表示するには ステージの子に加えないと いけないですね いわゆる addChild という メソッドを発行します これはこの中で やってしまいましょう stage が変数として 取ってありますので stage に対して addChild です この instance をドラッグコピーして 引数に渡します 忘れてはいけないのは CreateJS では 描画の書き換えというのは Canvas に依存しているので Canvas に描画してくださいなと お願いする必要があります それは EaselJS のメソッドとして Stage に対して update ですね これを忘れてしまうと エラーも出ないんですけれども 描画もされません ファイルを保存して ブラウザーで確かめてみましょう ファイルメニューから ブラウザーでプレビューです Canvas に何も表示されません もう一度読み込みをしてみましょう 今度は表示されました ただステージ中央に見えないですね これでステージ中央なんです どういうことか というと ビットマップというのは左上隅に 中心となる点があります 基準となる点があるので この左上隅が指定したステージの Canvas の中央に 持ってきています でも普通希望するのは このビットマップの中心がステージの Canvas の中心に来て欲しいですよね 最初に表示されなかったこと それから この位置調整をするためには 実は今のままではいけないんです その点を確認しましょう ブラウザーは閉じます 画像が最初に 表示されなかったのは この update のメソッドに 理由があります update しないと 表示されませんと申し上げました update してありますいいじゃないか と思うかもしれませんが 画像の読み込みが update に間に合ってないんです update した後に画像を 読み込んでいます ですから画像を読み込んだ後の update が されていないので表示されないということです リロードした時更新した時 表示されたのは 既にキャッシュに残っているので update が間に合ったんです 2 つ目の問題は Bitmap のオブジェクトの 位置調整でしたね 画像が画像の中心が Canvas の中心に ステージの中心になるようにしたい そう思った時に では画像の 幅高さの半分ずつ 左上に持ち上げれば良いですね ところが今の update と 同じ問題があります 画像を読み込まないと 画像の幅と高さが分かりません ということで最初からちゃんと きちんと画像を表示し あるいはその画像のサイズをもとに 位置調整をしたいという場合には 画像の読み込みを待つという処理が どうしても必要になります そのためにはプリロードという手続きを しなければいけません ですから このままでは 正しい表示ができないということです プリロードあるいは 読込み待ちと言ったりしますが その処理は次の段階の課題とします ここまでの所を先ず まとめておきましょう 外部の画像を CreateJS もう少し絞り込むと EaselJS の オブジェクトとして 配置するという方法です 先ずは画像のパスを 知っておく必要があります そして画像は Bitmap というクラスの オブジェクトとして作ります オブジェクトは new 演算子で createjs.Bitmap 括弧括弧です この括弧の引数として 読み込む外部ファイルのパスを渡します そして位置を調整して ステージの子ども addChild その引数に渡せば Canvas ステージ上に配置されます 但し描画の問題が残っています 描画は画像を読み込んでから stage の update を しなければいけませんし もし画像の大きさを知って 位置調整をしたいんだったら これはプリロード読込み待ち という処理が必要になります

CreateJSを応用したダイナミックなアニメーション

このコースではCreateJSの基礎を学んだ方に、ダイナミックでインタラクティブなアニメーションの作り方を解説します。JavaScriptであまり扱われない項目や、数学や物理などスクリプト以外の考え方も合わせて解説しています。CreateJSでぜひFlashに負けないコンテンツを作ってみましょう。

2時間43分 (16 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年01月07日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。