【ゲーム制作】四目並べを作ろう1

Unityで四目並べのゲーム制作に挑戦します。
制作過程を記事にします。
手探りでの制作で、きっと迷走しますがよろしくお願いします。

前作
仕様
素材作成
作成開始
実行結果
改善点

前作

過去に一度、四目並べのゲームを作ったことがあります。
過去作の紹介記事はこちら(動画での紹介になります)

ある程度の仕組みは出来ていたのですが、
画面サイズが大きすぎた事や、
機能面で物足りない点があったので、
公開はしませんでした。

今回、リメイクに挑戦します！

仕様

四目並べのルール
2人のプレイヤーが交互にコマ(ブロック)を置き、
縦か横かナナメに4つ並べたプレイヤーが勝利する。
盤面には重力がかかり、コマは床に積み重なる。

実装したい機能
・プレイヤー対戦(1Pvs2P)
・CPU対戦(1PvsCPU, CPUvs2P, CPUvsCPU)
・ヒント(リーチ表示)
・棋譜保存&リプレイ
※全ては実現できないかもしれません。

ゲーム画面サイズ
800(px)×400(px)
このサイズが適切か自信がありません。
環境によっては見切れるかもしれません。
(スマホのテスト環境が少ないので検証が困難です。)

盤面
10(マス)×6(マス)
画面のバランスを考慮してこのサイズにしました。
変更するかもしれません。

素材作成

コマ(58px): 赤(1P), 青(2P), 緑(予備)
コマ(20px): ターン表示用
盤面, 床, リーチ表示画像, クリア表示画像

作成した画像素材です。
ドット絵エディタEDGEでPNG画像を作成し、
画像エディタGIMPで背景色を透過しました。

コマのサイズは58pxとしました。
コマと盤面のサイズがなかなか決まらず、
全素材を3回くらい作り直しました・・・

作成開始

参考書籍

Unityの勉強に使った書籍です。

Unityの教科書 Unity 2018完全対応版 (2D&3Dスマートフォンゲーム入門講座)
たのしい2Dゲームの作り方 Unityではじめるゲーム開発入門

どちらも分かりやすかったです。

Unityプロジェクト作成

過去に作成した環境ではありますが、
Unity Hub をインストールし、
Unity Hub の中に Unity 2020.1.3f1 の環境を作りました。
このバージョンでUnity(2D)の新規プロジェクトを作成しました。

画像素材取り込み

プロジェクトウィンドウ(画面下側)に画像用フォルダを作成し、
画像素材をドラッグ&ドロップで取り込みました。
全素材を選択し、
インスペクターウィンドウ(画面右側)で画像の設定を変更しました。

Pixels Per Unit: 1
Filter Mode: Point (no filter)
Compression: None

詳しくは分かりませんが、画像の表示サイズと圧縮に関する設定だと思います。

ヒエラルキーウィンドウ(画面左側)から Main Camera を選択し、
サイズを変更しました。

Size: 200

盤面・床・コマの作成

盤面・床・コマの画像素材をシーンに
ドラッグ&ドロップして表示しました。

物理演算

コマの落下処理のため、物理演算を追加しました。

Add Component -> Physics 2D -> Rigidbody 2D を追加
Gravity Scale: 100
Freeze Rotation □Z にチェック

コマと床にコライダー(当たり判定)を追加しました。

Add Component -> Physics 2D -> Box Collider 2D

実行するとブロックが落下しました。

プレハブ化

コマはプロジェクトウィンドウにドラッグ&ドロップして
プレハブ(Prefab)にしました。
プレハブ化したオブジェクトはスクリプトから複製が可能になります。

ブロック生成スクリプト

BlockGenerator.cs
プロジェクトウィンドウでスクリプトを作成しました。
盤面がクリックされたらコマ(赤)を生成します。
(※今回はソースコードを載せてみましたが、
次回以降は載せません。コードが汚いので・・・)

盤面クリックイベント

BlockGenerator.cs

盤面オブジェクトにBlockGenerator.csを追加し、
パブリック変数にプレハブ化したコマを設定しました。

Add Component -> Scripts -> Block Generator
Block Red Prefab: block_red_58(コマ赤のプレハブ)
Block Blue Prefab: block_blue_58(コマ青のプレハブ)
Block Green Prefab: block_blue_58(コマ緑のプレハブ)

Box Collider 2D

盤面オブジェクトにコライダーを追加しました。

Add Component -> Physics 2D -> Box Collider 2D
Is Trigger にチェックを入れる

このコライダーはクリック判定にしか使わないので、
Is Trigger にチェックを入れています。
これによりコマと干渉しなくなります。

Event Trigger

盤面オブジェクトにイベントトリガーを追加しました。

Add Component -> Event -> Event Trigger
Add New Event Type -> Pointer Up
Listの「+」をクリック
None(Objeck)の枠に盤面オブジェクト(BlockGenerator.csが追加されたもの)をドラッグ&ドロップ
No Function の枠に Block Generator -> OnClickMap ()