Unityで簡単なクリックゲーム作成【01:盤面を作成】

Unity初心者の方に向けて自分の作ったゲームの作り方を紹介しようと思います。
このゲームは制限時間中に白い盤面上をランダムに動く黒い点をクリックして黒に塗りつぶしていき、どれだけ黒く塗れたかを競うとてもシンプルなゲームです。
いわゆる連打ゲームみたいな感じです。
非常に簡単につくれますのでUnityでゲームつくりたいけど何を作って良いのかわからないという方におすすめします。

PCのみとなりますが、こちらでプレイ可能です。

全部で5つの記事に別れています。

初回はゲームに必要となる素材の作成とそれを使って盤面を作るところまでやってみたいと思います。
Unityの新規2Dプロジェクトを作成し作業を初めて行きます。

Unityスキルアップ、
始めるなら今

パズル、脱出、RPG...目標のゲームを完成させよう!

人気のUnity講座はこちら

Udemy講座

素材の準備

ではまずゲームに必要となる素材を準備します。
具体的には下記のような素材です。

  1. 盤面を作るための白い画像
  2. 動き回る黒い画像
  3. マウスカーソルについてくるターゲットマーク

盤面と動き回る黒い点は4*4の白黒の画像を用意しました。
ターゲットマークは適当にそれっぽいものをドット絵ツールで作成しました。
UnityのAssetsフォルダの中にSpritesというフォルダを作成し、それらを入れていきます。
Assetsフォルダの確認

mapTileは4*4の白黒画像が一つの画像になっています。
これは後ほど分割していきます。
ではドット絵を使う準備をしていきましょう。
mapTileとTargetを複数選択した状態でInspectorのFillterModeをPoint(no filter)に、CompressionをNoneに変更しApplyをクリックします。
画像複数選択しながらInspectorで調整

続いてmapTileを分割します。
mapTileだけを選択しSprite ModeをMultipleに変更しApplyをクリック。
次にSprite EditorをクリックしSprite Editorを立ち上げます。
SliceのプルダウンをクリックしてGrid By Cell Sizeを選び、Pixel SizeをX,Y共に4にしてSliceをクリックしてApplyします。
Sprite ModeをMultipleに変更
Sprite Editorで画像を分割

これで白と黒の四角が分割されました。
以上で素材の準備は終わりです。

盤面の基礎となるゲームオブジェクトの作成

盤面親要素(Map)と子要素(WhiteChip)の設定

続いて盤面を作っていきましょう。
まず白いタイルを敷き詰めるための親のゲームオブジェクトを作ります。
今回はMapとしました。
その子要素にさきほど分割したmapTileの白い方を追加します。
名前をWhiteChipとしました。

WhiteChipのPrefab化

WhiteChipにBoxCollider2Dコンポーネントを追加します。
isTriggerにチェックを入れておきましょう。
BoxCollider2DのisTrigger

そしてTagを設定します。
今回はWhiteとしました。
ここまでできたらAssetsフォルダ内にPrefabsというフォルダを作りHierarchy上のWhiteChipをドラッグアンドドロップしてPrefab化します。
ゲームオブジェクトをPrefab化
Prefab化できたらHierarchy上のWhiteChipは削除してしまいましょう。

プレファブを四角に並べてみる

ここから先程作ったWhiteChipを並べ盤面を作っていく作業に入ります。

Mapにスクリプト作成

WhiteChipの親要素となるMapにスクリプトを追加していきます。
Assetsの中にScriptsフォルダを作成し、その中にMapControllerというC#スクリプトを作成します。
作成したらMapオブジェクトにMapControllerを追加します。
MapControllerをゲームオブジェクトにアタッチ

それではMapControllerの中身を記述していきましょう。

とりあえずこのような中身になりました。
プレファブと横縦の並べる数をInspector上から設定出来るようにSerializeFieldにしてあります。
chipSizeはWhiteChipの一片の長さを格納するために宣言してあります。

Start関数内でWhiteChipPrefabの長さを取得します。
それから横と縦の二重ループを開始し、WhiteChipPrefabを設置する場所を決め、InstantiateでWhiteChipを生成しています。

それではHierarchyでMapを選択してInspectorでそれぞれ設定していきましょう。
今回横80、縦80のWhiteChipを並べてみたいと思います。
縦横のマス目の設定

これで実行してみます。
Unityエディタで起動
このようにWhiteChipが敷き詰められ白い盤面が出来ました。

盤面を中心に持ってくる

お気づきになったと思いますが、盤面がゲーム画面の中心に来ていません。
これは最初のWhiteChipのポジションがXYともに0から始まっているからです。
これを中心に来るように修正していきましょう。
具体的には横と縦それぞれの半分にchipSizeをかけてマイナスすることで中心に持ってくることができます。
ソースコードを下記のように修正します。

これで実行するとゲーム画面の中央に白い盤面が表示されました。
ゲームオブジェクトを画面中央に配置

ここまででゲームの盤面の生成が完成しました。

今回の内容はgithubで公開しています。
よかったら参考にしてみてください。

関連記事

最後までご覧頂いてありがとうございました。

セール中!
C#プログラミング入門

もっと早く教えてほしかった!

Unity C#プログラミング入門