Unityで五目並べの盤を作る

Unityで五目並べの盤を作る

五目並べアプリを作るにあたって一番最初に用意しなければならないのは間違えなく盤だ。五目並べは、囲碁盤(19×19)や、連珠盤(15×15)でよく打たれるらしいですね。ただ今回は、盤の目を自由に選べるようにしていきたいと思います。

先に目次から「ここまでの成果」を見ておくと理解しながらすすめるかも。

画像の用意

3つの画像が必要になってきます。

  • 選択されていないマス
  • プレイヤー1に選択されたマス
  • プレイヤー2に選択されたマス

適当に作っておいたので右クリックで保存してunityのAssets>Prefabsに保存してください。

まだPrefabsを作ってない方はこちらを先に見てください。

必要になるゲームオブジェクトを追加

最終的なGameシーンの中身はこんな感じのゲームオブジェクトで構成されています。

GameMaster

これは空のオブジェクトです。名前をGameMasterにします。この中にこれから作るゲームオブジェクトは入れてください。

ヒエラルキー右クリックで空のオブジェクト。

僕は何となくMain Cameraもこの中に入れておきました。

Canvas

これはキャンバスです。UIを使ったりするときに便利です。これを使うとユーザーの画面にあった配置を簡単に実現できます。

ヒエラルキーを右クリックでUI>キャンバスグループ で追加できます。

 

キャンバスを追加すると自動的にEventSystemも追加されます。

BoardViewport

これは空のオブジェクトです。Canvasの中に入れてください。あとで説明するScroll Rectに使います。

Board

これも空のオブジェクトです。BoardViewportの中に入れてください。これもあとで説明するScroll Rectに使います。後で、この中に100個のパネル(10 x 10 の盤の場合)を自動的に作るスクリプトを書きます。

0

これは画像です。あとで100個複製するときの元になります。

ヒエラルキー右クリックで、UI>画像

ゲームオブジェクトにコンポーネントを追加

BoardViewport

このオブジェクトにScroll RectとRect Mask2D コンポーネントを追加してください。

追加した後、Scroll Rect のコンテンツにBoardオブジェクトを選んでください。

同じ方法で、ビューポートにはBoardViewportオブジェクトを選択。

さらに移動タイプは「クランプ済」、慣性をオフ、スクロール感度を1にします。

最終的にこんな感じになってます。

Board

これにはGridLayoutGroup コンポーネントを追加します。

変えるところは制約をFixed Column Countにして、制約数はとりあえず10にしておきましょう。

スクリプトを書く

Assets>Scriptsに、Board, Game, UIOrganize というc#スクリプトを作ります。

BoardはなぜかMonoBehaviourの継承を外しました。後から考えるとあったままでもいいきが。。。

Board

Boardクラスは2つの重要な変数を持っています。

sizeは盤の一辺の長さで、boardは今の盤の状態が保存されているList<int>です。(5-6行目)

setSizeはパラメーターでもらったparamをsizeに収納。(12-16行目)

initializeはboardを空にして、もう一回 size x sizeの分だけ0をboardに追加する。いわゆるboardの初期化。(17-27行目)

getDeepBoardはboardのディープコピー。オンライン対戦なんかやるとき必要になりそう。。。(28-43行目)

getShallowBoardはboardのシャローコピー。(44-49行目)

inputはパラメーターから場所と今のプレイヤーのIDを受け取って、それをもとにboardを操作する。(50-54行目)

Game

19-28行目: Boardクラスのインスタンスを作ってsetSize とinitializeを Start()の中でする。 ゲームが始まるとこれが一回呼ばれる。

31-38行目: GetTargetOnClick()はクリックされたオブジェクトの名前をintに直して返す。10 x 10 の場合はindex 0 – 99。この関数はどこもタッチされていないと-1が返る。-1じゃなかったらそのインデックスでboardに入力。

40-59行目: drawBoard()は初期化したときとかに使う。この関数はBoard(オブジェクト)に初めから入っている0(オブジェクト)を100こ複製する。Instantiate は便利なので使い方ググってみてください。

65-75行目: updatePanel()はマスの画像を変える。例えば、インデックス5にプレイヤー1が入力した場合、5(オブジェクト)をplayer1用の画像に変える。

77-82行目: input()はBoardのinput()とGameのupdatePanel()を実行した後に次のプレイヤーの番にする。

83-86行目:nextPlayer()は次のプレイヤーの番にする。ID -1が一人目、1が二人目だから、毎回 IDに-1を掛けると次のプレイヤーIDにできる。

94-125行目:これはデバッグ用。というのもアンドロイドアプリを作っているのでマウスのクリックは判定しなくていいはず。ただ毎回テスト用に自分の端末にインストールしてデバッグをするのがめんどくさいのでエディタ用にクリックの処理をしている。やっていることは下記の128-158行目と同じ。

128-158行目: ここではタッチスクリーンの処理をしている。もしも指が動いたら、その指はマスを選択したわけではなく、マスの画面を動かしたいということ。なのでis_selecting = false。is_selectingがtrueの場合、RayCastを使って当たったオブジェクトの名前を整数に直して返す。

UIOrganize

ここではCanvas>BoardViewport>Board(オブジェクト)のサイズを盤の目の数に合わせて変え、同じくCanvas>BoardViewport>Board(オブジェクト)のコンポーネントとして追加したGridLayoutGroupの制約数を変更する。こうすることでBoardが正方形になる。

ここまでの成果

このままではプレイヤーがどのマスでもクリックできるようになってしまいます。次の記事では五目並べのルールを追加していきます。

ちなみにWebGL版でもビルドしてみました。

Gomokuカテゴリの最新記事