ゲームが作れるようになるまでがんばる日記

ゲーム制作のことを中心にゲームに関することを書いています

背景をテクスチャで塗りつぶす

たとえば、マップチップのテクスチャ画像を使って背景を塗りつぶすような場合にはSurfaceを使う。Surfaceのdrawメソッドでテクスチャ画像の一部を描画して、そのSurfaceをSpriteのimageにすれば良い。
たとえば、マップチップ一つのサイズが16x16で320x320の背景を左上のマップチップで塗りつぶすような場合は次のような感じ。

var bg = new Sprite(320,320);
var maptex = game.assets[IMAGE.map];
var image = new Surface(320,320);
for(var j=0; j<320; j+=16) {
    for(var i=0; i<320; i+=16) {
	image.draw(maptex,0,0,16,16,i,j,16,16);
    }
}
bg.image = image;
game.rootScene.addChild(bg);

ここでは同じマップチップで塗りつぶしているが、マップチップを適宜変えればマップとして利用出来るだろう。
で、ここまで書いてenchant.jsのドキュメントを見たところ、Mapオブジェクトというそのものずばりのものが用意されていた。マップ描画なら当然、こちらを利用したほうが簡単。
マップを作るには