【CreateJS】画像ファイルをLoadQueueで読み込むサンプル

2018年8月31日JavaScriptCreateJS, JavaScriptライブラリ

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);

2018年8月31日JavaScriptCreateJS, JavaScriptライブラリ

Posted by Yousuke.U