横スクロール / CreateJS


シューティングみたいな横スクロールつくってみる。
背景とか画像読み込むので PreloadJS も使う。

1
<script src="http://code.createjs.com/preloadjs-0.2.0.min.js"></script>
1
2
3
4
5
6
var manifest = [
    { src: "img/bg.png", id: "background" },
    { src: "img/fg.png", id: "foreground" }
];
var loader = new createjs.PreloadJS;
loader.loadManifest(manifest);

画像の読み込み完了してから各処理に移りたいので、下記のようにしておく。

1
2
3
4
5
6
7
8
9
10
11
12
13
var assets = [];

loader.onFileLoad = handleFileLoad;
loader.onComplete = handleComplete;

function handleFileLoad(e){
    assets.push(e);
}
function handleComplete(){
    for (var i = 0; i < assets.length; i++){
        // 読み込まれた画像を処理する
     }
}

onComplete 時には assets に読み込んだ画像データが格納されています。
画像もこれまでの円や四角と同じで Shape で作成します。

1
2
3
4
5
6
for (var i = 0; i < assets.length; i++){
    var result = assets[i].result;
    var s = new createjs.Shape;
    s.graphics.beginBitmapFill(result).drawRect(0, 0, result.width, result.height);
...
}

あとはオブジェクトごとに tick でそれぞれ動きをつければそれらしくなります。
画像を複数枚用意してアニメーションさせることも出来るみたいです。
今回は簡単に座標の移動だけやってみました。

Error: Suspended

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です