FileMakerで２次元配列ゲームの作り方（前編）
はじめに
まず２次元配列ゲームって何よ？ってとこですが、具体的に言うと、
- 〇✕ゲーム
- 将棋
- オセロ
- テトリス
- 倉庫番
- マインスイーパー
etc...
こういったゲームのことですね。
要は、盤面（画面）がマス目状になっていて、何がどこにあるのかといった管理を縦横２次元配列で行えるゲームです。こういったゲームはWebviewerを使ってjsでガリガリ...といったことをせずとも、ネイティブのFileMakerでも頑張れば再現が可能です。jsが苦手な方でも安心安全。
以前、２次元配列を利用するものは こちらでもご紹介しましたが、今回は実際にFileMakerで再現してみたゲームを題材に、全てを説明するのは難しいですが骨格の仕組みなどを前後編に分けて、出来るだけ分かり易く解説していきたいと思います。
本題
題材とするゲームは、コチラ
いわゆるスネーク（蛇）ゲームです。
動き続けるスネークがエサを食べる度に胴の長さが伸びていく...このゲームは、見ての通りポータルを使って作成しています。ポータルを使わないパターンも可能ですが、ポータルを使った方が圧倒的に色々と楽です。
ただその代償として、ポータル全体を評価（更新）する関係でやや処理が重くなります。それでもポータルを利用して作るのは、ある特徴があるからです。
２次元配列の取り扱い
とにもかくにも、２次元配列をFileMakerでどう取り扱うか、です。
幸いなことに、FileMaker16よりJSONを取りまわすことが容易になりましたので、これを利用し２次元配列を取り扱っていきます。
以下のような計算式を実行すると、
JSONFormatElements (
JSONSetElement ( "" ;
[ "[0][0]" ; 1 ; JSONNumber ];
[ "[0][1]" ; 0 ; JSONNumber ];
[ "[0][2]" ; 1 ; JSONNumber ];
[ "[1][0]" ; 1 ; JSONNumber ];
[ "[1][1]" ; 1 ; JSONNumber ];
[ "[1][2]" ; 1 ; JSONNumber ];
[ "[2][0]" ; 1 ; JSONNumber ];
[ "[2][1]" ; 1 ; JSONNumber ];
[ "[2][2]" ; 1 ; JSONNumber ]
)
)
[
[ 1, 0, 1 ],
[ 1, 1, 1 ],
[ 1, 1, 1 ]
]
このような、縦横四角形の結果を得られます。縦と横の２次元の配列、これが２次元配列です。
JSONSetElement関数については、
で詳しく説明していますので詳細は省きますが、JSON関数を利用することにより、このように多言語では一般的な２次元配列を容易に取り扱うことができます。
２次元配列は配列座標の指定の仕方に注意です。先程の計算式で、
[ "[0][2]" ; 1 ; JSONNumber ];
といった感じで、"[0][2]"の部分で配列座標を記述していますが、これは "[行(縦)][列(横)]" の順番の座標になります。つまり "[0][2]" は "[行0番地][列2番地]" を指定し 値をセットすることになります。
計算結果と座標の対応
準備その１
２次元盤面（マス目）を何で表すかですが、そこでポータルを利用します。
必要なテーブルは２つ。
playAreaとdummyといった２つのテーブルを用意します。それぞれの役割ですが、
-
playArea：dummyをポータルで表示する為のゲーム画面テーブル -
dummy：盤面を設定・表示する為のテーブル
となります。
playAreaにはnoフィールドを１つ用意します。実際はフィールドは何でもいいんですが、要はdummyとリレーションをする為のフィールドになります。
「1」を自動入力
dummyテーブルにはno id repeatedFieldの３つのフィールドを作成し、それぞれ以下の様なオプション設定に（noフィールドはplayAreaと同様「1」を自動入力）。
シリアル番号を「1」から「1」ずつ増加
繰り返し数「10」とする繰り返しフィールド
リレーションシップはno同士を繋げるカタチに。テーブルとフィールドはこれだけです。
準備その２
dummyテーブルのデータを１０レコード作成します。
repeatedFieldには何も入力しません
playAreaのレイアウトにポータルでdummyのrepeatedFieldのみ設置し、繰り返し数（10）が全て収まるようにします。またポータルの行数は、繰り返し数と同じ１０行。
繰り返しフィールドの区切り線の色も忘れずに設定
ポータルには、オブジェクト名：portalを付けておきます。
では一旦ブラウズモードに戻し、リレーションを繋ぐためにplayAreaのレコードを１つ作成してみましょう。結果、次のような２次元盤面を用意することが出来るわけです。これがポータルの大きな特徴であり、また利用する理由です。
２次元配列の指定は [行][列] の形ですから、それは即ちポータルdummy側の [id番号][繰り返し位置番号] と対応し、この盤面上でどのマスをどうするかをコントロール出来ることが分かると思います。
これが把握できれば、オセロでもテトリスでも配列ゲーは何でもござれ。
準備その３
repeatedFieldに条件付き書式を２つ設定します。
１つ目は、スネークの位置に色を付ける為のものです。
Let (
[
~row = dummy::id ;
~col = Get ( 計算式繰り返し位置番号 )
];
JSONGetElement ( $$snakeLocate ; "[" & ~row & "][" & ~col & "]" ) = 1
)
後々$$snakeLocateにはスネークの配列座標と値を格納しますが、要はポータルの２次元盤面の中で、スネークの座標と一致する箇所（スネークの配列値が「1」となっている座標）を塗ろうということです。対象座標の 行番号をidで、列番号を繰り返し位置番号で指定します。塗りつぶし色は何でも構いません（本記事では青色指定）。
２つ目は、スネークのエサを表示する為のものです。
Let (
[
~row = dummy::id ;
~col = Get ( 計算式繰り返し位置番号 )
];
JSONGetElement ( $$appleLocate ; "[" & ~row & "][" & ~col & "]" ) = 1
)
ぶっちゃけ１つ目の条件付き書式とほぼ同じです。こちらは、エサの配列を$$appleLocateに格納しますので、その対象座標を塗りつぶすというわけです。塗りつぶし色は何でも構いません（本記事では赤色指定）。
実際、試しにスネークとエサを適当に塗って（表示して）みます。
用意するスクリプトステップは３つ
変数$$snakeLocate $$appleLocate をそれぞれ次の様に設定し、最後にポータルの更新
JSONSetElement ( "" ;
[ "[3][2]" ; 1 ; JSONNumber ]
)
$$snakeLocate に、配列座標[3][2]の値が「1」 とセット
JSONSetElement ( "" ;
[ "[6][3]" ; 1 ; JSONNumber ]
)
$$appleLocate に、配列座標[6][3]の値が「1」 とセット
このスクリプトを実行すると、
スネークを青色、エサを赤色で塗りつぶすように設定しています
スネークは [3(id番号)][2(繰り返し位置番号)]
エサは [6(id番号)][3(繰り返し位置番号)]
これらの座標が塗られますよね。
一先ずのまとめ
ここまでが、大まかな下準備になります。繰り返しフィールドを単にレイアウト上で縦にバンバンバンと並べて疑似２次元盤面を作るよりも、ポータルでサクっと作るというのが一番お手軽ですね。データの取りまわしの上でも。
また今回は分かり易さを優先し、スネークとエサで配列格納先の変数を別にする前提で進めていますが、1つに纏めることも可能です。同じ変数を使い、値が「1」の時は青色 「2」の時は赤色、という風にすれば良いでしょう。
その他、色々と工夫のしどころはありますので、試行錯誤してみるのも面白いですよ。
以上、前編（準備編）でした
次回、中編（実践編）へ続く...
Discussion