【CreateJS】画像ファイルをLoadQueueで読み込むサンプル
CreateJS（PreloadJS）で画像を事前ロードする時のサンプルコードです
See the Pen CreateJS Image Load by yochans (@yochans) on CodePen.
LoadQueueで画像ファイルを読み込むサンプルコード
HTML
<!DOCTYPE html><html lang="ja">
<head>
<meta charset="utf-8">
<title>CreateJSサンプルコード</title>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
</head>
<body>
<canvas id="main" width="500" height="300"></canvas>
<script src="main.js"></script>
</body></html>
main.js
//ファイル情報の保存先
let images = [];
function lorder(){
//manifestに読み込むファイルを指定
let manifest = [
{src:"画像URL",id:"任意の画像ID"},
{src:"画像URL",id:"任意の画像ID"}
];
let loader = new createjs.LoadQueue(false);
//読み込むmanifestを指定してロード
loader.loadManifest(manifest,true);
//個別ロード中の処理をfileload関数に定義
loader.addEventListener("fileload", fileload);
//全てのファイルロード完了後の処理をcomplete関数に定義
loader.addEventListener("complete", complete);
function fileload(event){
//ファイルの種類が画像だった場合に配列imageに格納
if (event.item.type == "image"){
images[event.item.id] = event.result;
}
}
//ファイルロードが完了したらfileloadとcompleteを削除してinit()を実行
function complete (event) {
event.target.removeEventListener("fileload",fileload);
event.target.removeEventListener("complete",complete);
init();
}
}
function init() {
//canvas id mainをstageに設定
let stage = new createjs.Stage("main");
//背景にする四角形を作成
let bg = new createjs.Shape();
//背景にする四角形の色と位置・サイズを指定
bg.graphics.beginFill("black").drawRect(0, 0, 500, 300);
//背景にする四角形をstageに追加
stage.addChild(bg);
//画像を定義して配置
let img1 = new createjs.Bitmap(images["任意の画像ID"]);
stage.addChild(img1);
img1.x = 50;
kitarou.y = 50;
img1.scaleX = 0.2;
img1.scaleY = 0.2;
//画像を定義して配置
let img2 = new createjs.Bitmap(images["任意の画像ID"]);
stage.addChild(img2);
img2.x = 300;
img2.y = 160;
img2.scaleX = 0.1;
img2.scaleY = 0.1;
//stageを更新
stage.update();
}
//lorderを実行
lorder();manifestについて
配列に登録するファイルデータは省略型も可能でその場合idにはファイルのパス名が自動で定義されます
let manifest = ["ファイルURL","ファイルURL","ファイルURL"];createjs.LoadQueue()について
newで新規ローダーを定義します
let loader = new createjs.LoadQueue(false);loadManifestについて
読み込むmanifestデータを指定して実行します
サンプルでは変数名manifestとしているので、manifestを記述しています
loader.loadManifest(manifest,true);