enchant.jsのサンプルコードを解読する(RPG編その2)

SPONSORED LINK

Pocket

前編に引き続きenchant.jsのサンプルコードを読み解いていきますよ。

マップの配列が終わったので次はプレイヤー部分ですね。早速コードを見てみましょう。

        var player = new Sprite(16, 24); // プレイヤーの大きさを16×24に設定
        player.x = 6 * 16; // プレイヤーのx位置。左から6マス目ですね。
        player.y = 10 * 16 + 8; // プレイヤーのy位置。上から10マス目よりちょっと下ですな。
        var image = new Surface(48, 96); // プレイヤー画像用のSurfaceを作成。
        image.draw(game.assets['player.gif'], 0, 0, 48, 96, 0, 0, 48, 96); // 画像の一部をSurfaceに読み込み。 
        player.image = image; // それをプレイヤー画像にします。

ま、xとyの配置はいいですよね。

↑ こういうことです。

さて次のSurfaceが若干複雑です。

まず、元画像(player.gif)を見てみましょう。

↑ これです。

これだけ見ると、ちょっとでもenchant.jsをいじったことがある人なら次のようなコードでいいんじゃね?と思っちゃいますよね。

game.preload('player.gif');
var player = new Sprite(16, 24);
player.image = game.assets['player.gif'];

ただ、あとのコードを読み解くとわかるのですが、実はこのサンプルゲームでは、この画像の左半分しか使っていないのです・・・。

そのためにいったんSurfaceを経由して左半分だけの画像をつくり、それをplayerにセットしている、という裏技を使っています。

ちなみに「Surfaceって何?」と思う人が多いかと思いますが(ドキュメントにもあまり説明がないので)、これはHTML5のCanvasのラッパーです。なのでdrawではCanvas的な文法になります。

context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
imageの(sx,sy)地点からsw分の幅、sh分の高さの画像を、(dx,dy)地点のdw幅、dh高さの領域へコピー。

なぜこうしたのかの理由は「元画像がそう作ってあるから」というものだと思いますが、テクニックとしてはおもしろいですね。覚えておきたいところです。

さて次にいきたいところですが、ちょっと出かけねばいけないので続きはのちほど・・・。

ツイッターもやっています!

SPONSORED LINK

  1. No comments yet.

  1. No trackbacks yet.