FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
category
スポンサー広告
Relation Entry

Create.js を使ってみる Stage 001

サブタイ付けて001から始めると001だけで終わる法則。
それはさておき・・・
とりあえず1つ決めていじっていってみようかと、
Create.jsをチョイスしてみました。
第1回はとりあえず画像表示から・・・
さらっとCreate.js入門的なサイトさんを漁ってみた感じでは、

1.createjs.Stage を new してhtml5のcanvasタグのIDに紐付けておく
2.create.Bitmap を new して表示用ビットマップ変数を準備
3.別途読み込んでおいた画像ファイルを2で作ったbitmap変数につっこむ
4.作ったbitmapを1のstageに子要素としてぶらさげる
5.画面描画更新

てな流れっぽいすね。
JQueryやってた時もそうだけど、javascriptの処理が先行しすぎると
画像読み込む前に処理が流れてしまい、画像が表示されない事が・・・
それをなくす為に登場するのが、Preload.js です!

先にJSON形式で読み込むファイルを定義しておき、
preloadキューにつっこんでファイル先読み、
読み込み完了したら別途関数を呼んで描画処理へと繋げる、と

この時間差テクニックはsetTimeputが裏で動いてそうですな。
JQRだと初回読み込み遅くて動かない事もあったので、そういうのは解決しそう。

ソース的なメモは以下に。

--------------------------------------------

var manifest = [
{ src:"img/001.png", id:"dog" }
];
preload = new createjs.LoadQueue(false);
preload.loadManifest(manifest);
preload.addEventListener("complete",handleImageLoad);

function handleImageLoad() {
var stage = new createjs.Stage("sample_canvas");
var bitmap = new createjs.Bitmap("img/001.png")
bitmap.x = 100;
stage.addChild(bitmap);
stage.update();
}

--------------------------------------------

ブログ上で動作確認できるようなのも、
そのうちチョイチョイ作っていってみよう。

スポンサーサイト
category
プログラム
Relation Entry

Comment

Trackback

http://shootingstarz.blog110.fc2.com/tb.php/263-9095053d

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。