■ マップを出してみる

米光：さて、まずはマップを出すわけですね。
荻原：はい。今回は、2次元配列をつかってマップを描画するようにします。
米光：2次元配列って？
荻原：えーと、とにかく具体的にやってみましょう。まず、マップを見てください。これです。



米光：これは、壁と床の2つのパーツを配置して構成しているわけですね。
荻原：32×32の背景パーツを、縦9マス横9マス配置しています。
米光：この配置を「2次元配列」とやらで。
荻原：そう。まずムービークリップを作ります。“tile”って名前にしましょう。このムービークリップ“tile”の中に3つのフレームを作って、3つの種類の背景パーツを配置します。
米光：3つ？
荻原：壁と床と王様。
米光：王様も背景パーツなんですか？
荻原：移動させないから、背景パーツでいきました。それぞれのマスに表示した背景パーツのフレーム番号を2次元配列に格納すると、以下のようなスクリプトになります。

//マップの配列 var mapArray:Array = new Array(); mapArray[0] = [2, 2, 2, 2, 2, 2, 2, 2, 2]; mapArray[1] = [2, 1, 1, 1, 1, 1, 1, 1, 2]; mapArray[2] = [2, 1, 1, 1, 1, 1, 1, 1, 2]; mapArray[3] = [2, 1, 1, 1, 3, 1, 1, 1, 2]; mapArray[4] = [2, 1, 1, 1, 1, 1, 1, 1, 2]; mapArray[5] = [2, 1, 1, 1, 1, 1, 1, 1, 2]; mapArray[6] = [2, 1, 1, 1, 1, 1, 1, 1, 2]; mapArray[7] = [2, 1, 1, 1, 1, 1, 1, 1, 2]; mapArray[8] = [2, 2, 2, 2, 1, 2, 2, 2, 2];

荻原：2次元配列というのは、配列の中に配列を入れ子にするというものです。上記のスクリプトでいうと、まず、mapArrayという縦の配列を作って、その一つ一つの要素の中にさらに横の配列を入れているわけです。図で見ると分かりやすいかもしれません。


米光：一番左の絵が、ゲームで表示される絵。で、真ん中がパーツがわかるようにラインを引いている絵。で、一番右側が、それに対応しているタイルの番号ですね。つまり配列で数字の2のところは、タイムラインの2フレーム目の壁を示して、壁が表示されていると。
荻原：そうです。その対応通りに配置していけばいいわけです。

function buildMap(mapArray:Array):Void { mapWidth = mapArray[0].length; mapHeight = mapArray.length; for (var i:Number = 0; i < mapHeight; i++) { for (var ii:Number = 0; ii < mapWidth; ii++) { var tile:MovieClip = this.map.attachMovie("tile", "t_"+i+"_"+j, this.map.getNextHighestDepth()); tile._x = (ii*tileW); tile._y = (i*tileH); tile.gotoAndStop(mapArray[i][ii]); } } }

荻原：mapWidth = mapArray[0].length;　で、横の配列の数を数え、マップの横が何マスかを取得します。
米光：mapArray[0].lengthで、mapArray[0]の配列の数を求めるわけですね。

○○.lengh　○○の長さ（数）を返す 例） mojisuu = "six".length mojisuuに"six"という文字列が何文字かを入れる（結果は3）

荻原：同様に縦のマスの数も取得して、mapHeightに代入します。
米光：mapArray.length;で縦の配列の数が求めるんですね。
荻原：はい。次に、取得したmapHeightとmapWidthから、forループを使ってマスの数だけにムービークリップ“tile”を配置します。
米光：ループで繰り返して、パーツを配置していくわけですね。
荻原：まず、縦のマス目と横のマス目から、位置を調整します。

tile._x = (ii*tileW); tile._y = (i*tileH);

米光：最初に

var tileW:Number = 32; var tileH:Number = 32;

って設定してるんですね。えーと32というのは1ブロックぶんのドット数。それに配列何個目かの数をかけてやることで、パーツの配置する位置を指定してやる。
荻原：最後に、そのマスの配列に格納した数字から、表示する背景のフレームを表示します。

tile.gotoAndStop(mapArray[i][ii]);

米光：配列の中身が3だったら、ムービークリップ"tile"の3フレームへ行って止まっておけ、と。
荻原：そうです。このようにマップを描画すれば、修正するのが凄く楽ですし、プレイヤーが移動を制御するのも凄く楽になるんです。

米光：今回はここまで。次回は「プレイヤキャラクタの移動」！

●米光一成＆荻原貴明 一覧へ●

●ご意見・ご感想をお寄せ下さい●