IDEA*IDEAさんの「RPG編その4」の部分の解説補足(その1)

enchant.jsのサンプルコードを解読する（RPG編その4） | IDEA*IDEA
http://www.ideaxidea.com/archives/2011/04/rpg_4.html

IDEA*IDEAさんの「RPG編その4」読みました。自分もmin()、max()使うよりかはif文でやっちゃうかなぁ？と思いました。

でもまぁ、min()、max()の方も読めはしないといけないのでそちら側のルーチンについて詳しく解説しときます。

まずは最初の

var x = Math.min((game.width  - 32) / 2 - player.x, 0);

の所を解説します。

この部分はPlayerがMapの左端でうろちょろしている時のMapのスクロールを制御しています。min()で一番理解が難しい所は

 (game.width  - 32) - player.x

だと思います。こちらはこの様になっています。

(game.width  - 32)
    ↓
(ゲーム画面の幅  - 32) / 2
    ↓
(ゲーム画面の幅/2) - 16
    ↓
画面中央を求める(-16は微調整用の値)

なお、この値が min(〜, 0) となっているのは1つ目の引数の値がどんなに大きくなっても上限は0と制限をかける為に設定してあります。1つ目の引数が例えば1などになった場合は0の方が小さいので結果としてxには0が代入をされます。

この処理をしないとどうなるかはプログラムの以下の部分を変更し、Playerを右に
移動させると理解しやすいです。

var x = Math.min((game.width  - 32) / 2 - player.x, 0);
    ↓
var x = (game.width  - 32) / 2 - player.x;

2つ目の引数の0はリミッターの役割をしていてマップの描画開始位置を0より大きな値にさせない(Mapの描画開始位置を0より大きい値にさせない)役割が有ります。

つまり、ここではminの中の1つ目の引数

(game.width  - 32) / 2 - player.x

はPlayerが右に移動し、

player.xの値が増加
    ↓
 - player.x になっている為Playerが右に移動する程、値は減って行く
    ↓
0より小さい値になったらxにはそちらの値が代入される様になり
Mapの描画開始位置がマイナスの位置からになる(見た目にはMapが
左にスクロール)。

ここで改めて (game.width - 32) / 2 に注目すると
意味が分かって来ると思います。つまり、そのスクロール開始を
遅らせているのです。

1つ目の引数が - player.x だけであればPlayer.xの値が
1になった瞬間にマップは即座にスクロールしてしまいます。
それを防ぎ、画面中央辺りまでPlayerが移動してからMapを
スクロールさせる為に (game.width - 32) / 2 が付いています。

Math.max()の話も続けて書こうかと思ったのですがそろそろ、時間切れなので続きはまた明日以降に書きます。

強火で進め