Unityでリバーシを作る

Unityでリバーシを作る1(素材準備編)

リバーシの作り方1

どうも、りくらぼです。

Unityを使ってリバーシを作っていきましょう。

今回は素材準備編です。

Unityのインストールは各自でお願いします。
使用しているUnityのバージョンは2020.1.1f1です。

なぜリバーシを作るのか

作り始める前になぜリバーシを作るのか、リバーシを選んだ理由についてお話します。

大きな理由は3つです。

リバーシを選んだ理由
  • ボードゲームなので凝ったグラフィックも必要ない
  • ルールが単純で作りやすいから
  • プログラミングの練習になる

まず、画面の動きがないボードゲームであることです。その中でもリバーシは必要な素材もかなり少ないです。素材作りに時間を取られることなくすぐに作り始められます。

次に、ボードゲームの中でもルールが単純で難易度が低いことです。駒を置いて、ひっくり返すだけなので将棋やトランプに比べて難易度が低いです。

難易度が低いとはいえ、初めての人はそれなりに大変だと思います…

最後に、プログラミングの練習になることです。リバーシのプログラムで最低限必要な一通りのプログラミングができます。繰り返しと条件分岐を駆使していくことでプログラムを考える力が身についていきます。

リバーシのプログラミングが一人で考えられるようになれば、他のゲームの作り方も考えられるようになると思いますので、一緒に進めていきましょう。

新規プロジェクトを作る

まずは新規プロジェクトを作成しましょう。

手順
  1. テンプレートは、今回は3Dを選びました。
  2. 任意のプロジェクト名を入力します。今回は「Reversi」にしました。
  3. 任意の保存先を指定します。
create_a_new_project

画像のように設定して、作成ボタンをクリックすればプロジェクトが作成されます。

プロジェクトが作成されると、以下のような画面になります。

new_project

補足:日本語化したい場合

手順
  1. Edit(編集) -> Preferences(環境設定) をクリックしてPreferencesを開く
  2. Language(言語) -> Editor Language(Experimental)にチェック
  3. Editor Languageから日本語を選択
set_language

設定が終わったらPreferencesはそのまま閉じてOKです。

背景を作る

今の状態だと画面中央のシーンビューには背景が何もない空間が表示されていますね。

まずは背景を作りましょう。

今回は、背景として白い画像を画面いっぱいに表示します。

ちなみに隣のゲームビューに切り替えると実際のゲーム画面が表示されます。

ゲームビューはテストプレイ時やゲーム画面を見ながら作りたいときに利用します。

画像を表示するキャンバスを作る

画像を表示したいのですが、何もないところに画像を表示することはできません。

まずは画像を表示するキャンバスを作り、そこに画像を表示します。

手順
  1. ヒエラルキーの何もないところを右クリック
  2. UI -> キャンバスグループを選択
create_canvas

ヒエラルキーにCanvasが追加されます。

これでキャンバスが作成できました。

背景となる画像を作る

キャンバスを作成したらキャンバスに画像を追加しましょう。

手順
  1. 作成したCanvasを右クリック
  2. UI -> 画像を選択
create_image

Canvasの中にImageが追加されます。

CanvasとImageが入れ子になっているか確認してくださいね。もし入れ子になっていない場合はImageをCanvasにドラッグアンドドロップすれば入れ子になります。

ヒエラルキーにあるオブジェクトのことをゲームオブジェクト(Game Object)といいます。

入れ子の関係にあるゲームオブジェクトは、親オブジェクト、子オブジェクトといいます。

今回はCanvasが親オブジェクト、Imageが子オブジェクトです。

詳しくは「Unity 親子関係」で検索してみてください。

画像を設定する

ここまでできたら、ゲームビューに切り替えてみてください。

画面中央に白い四角が表示されています。

game_view

この四角が画像です。今は画像に対して何も設定していないのでこのように表示されています。

それではこの画像を画面いっぱいに広げてみましょう。

手順
  1. ヒエラルキーの作成したImageをクリック
  2. アンカープリセットをstretchにする
  3. 各項目を編集

ヒエラルキーのImageをクリックすると右のインスペクターがクリックしたゲームオブジェクトに切り替わります。

このインスペクター内で画像の設定をしていきます。

まずはRect Transformの左上のアイコンをクリックしてアンカープリセットを選択します。

右下のstretchをクリックしてください。

次に各項目を設定していきます。

以下の画像を参考に値を入力していきます。

background

Rect Transformはアンカーをstretchにしたので、左右上下はそれぞれ画面端からの距離になります。0にすることで画面いっぱいに広がります。

また、タイトルのImageをBackgroundに変更しました。わかりやすい名前にしておくことで何のオブジェクトかがわかりやすくなります。

これで画面いっぱいに背景を表示することができました。

盤と駒の素材を取り込む

背景ができたら、次はリバーシの盤と駒の素材を用意します。

今回は使う素材を置いておきますので保存して使ってください。

back white empty
素材はこれだけ!

これらの素材を、プログラムで制御して配置していきます。

素材が3種類で済むところもリバーシを選んだ理由です。

それではUnityに取り込んでみましょう。

Unityに画像を取り込む

手順
  1. 新規フォルダーを作成
  2. 画像素材を取り込む
  3. import設定を編集

まずは素材を置くフォルダを作成します。

Assets内で右クリックしてフォルダーを作成してください。

create_folder

フォルダー名はImagesにします。(設定によっては見た目が違うかもしれません。)

folder_rename

作成したImagesフォルダーに素材をドラッグアンドドロップします。

image_import

これで素材のインポートが完了しました!

インポート設定を変更する

しかし、このままでは画像として扱えないので、このファイルは画像として使いますよとUnityに教えてあげる必要があります。

取り込んだ画像「black」を選択するとインスペクターに情報が表示されます。

ここでテクスチャタイプをスプライト(2DとUI)に変更してください。

image_sprite

あとは適用するをクリックすればOKです!

white, emptyについても同じように設定をお願いします。

Shiftでファイルを複数選択すればまとめて設定することができますよ。

Prefabを作る

ん?Prefabって何???

ということで、まずはPrefabについてお話します。

Prefabってなに?

UnityではPrefabというものがあります。Prefabを使えば、同じオブジェクトを簡単に複製することができます。

例えばリバーシでは盤面が8×8マスの64マスありますね。その盤面を作るために64回もImageを作って、横幅と縦幅を設定して、Imageに画像を設定して…と繰り返すのは大変面倒くさいです。

1つ作ってそれをPrefab化すれば、何回でも同じものを複製することができます。

途中で変更があった時にも、Prefabを修正すれば、すべての複製に変更が適用されるので64個のImage全てを1つ1つ修正する必要もありません。

言葉だけでは分かりにくいと思います。まずはやってみましょう!
手順
  1. Buttonを作成
  2. Buttonをインスペクターから編集する
  3. Prefab化する

Buttonを作成する

まずはButtonを作成しましょう。

今回はマウスでクリックして操作する想定なので、1マス1マスをボタンにして押せるようにします。

Canvasを右クリックして、UI -> ボタンを選択します

(画像とはボタンの文言が違うかもしれません。)

create_button

これでCanvasにButtonが追加されました。

ButtonにはImage(画像)とText(文字)を指定できるのですが、今回は文字は表示しないのでButtonの子オブジェクトのTextを削除します。

Buttonを開いて、展開されたTextを右クリック -> 削除します。

text_delete

Buttonを設定を編集する

次にButtonのインスペクターを設定していきましょう。

以下の画像を参考に設定してみてください。

black_button

タイトルを「Black」、幅と高さを64にします。

Imageのソース画像を取り込んだBlackにします。

これで黒い駒が完成しました。

画面中央上部にある再生ボタンをクリックするとボタンが押せるか確認できます。(押しても何も起こりませんが…)

作成したButtonをPrefab化する

それではこのボタンをPrefab化しましょう。

といってもPrefab化は簡単です。

まずはImagesフォルダと同様に、Assets内にPrefabsフォルダを作成します。

create_prefabs

Prefabsフォルダーを作成したら、ヒエラルキーからBlackボタンをフォルダーにドラッグアンドドロップします。

create_prefab

これでPrefab化ができました!!

ゲームオブジェクトをPrefab化すると文字が青色に変わります。

Prefab化できたので一度ヒエラルキーからBlackを削除しておきましょう。

black_delete

削除してもPrefabsフォルダーからヒエラルキーにドラッグアンドドロップするだけで複製できます。

それでは同じようにwhite, emptyボタンを作成してPrefab化してみましょう。

prefabs_complete

ここまでで素材準備編は完了です!

お疲れさまでした!

次回はプログラミングに入ります。

どうしても内容が難しくなってしまいますが、一緒に進めていきましょう。

ここまで読んでいただきありがとうございました。

reversi2
Unityでリバーシを作る2(盤面作成前編)どうも、りくらぼです。 前回はリバーシに必要な素材を準備しました。 https://riku-lab.com/reversi...
ABOUT ME
りくらぼ
ブログ歴2ヵ月です。「りくらぼ」では雑記のほか、趣味のUnity関連のなど書きたいことを書いていきます