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で公開しています。
よかったら参考にしてみてください。

おすすめUnityオンライン学習

一人でゲーム開発が不安な方はオンラインスクールで学習すると効率が良いと思います。
以下に当てはまる人は検討してみると良いかもしれません。

「ゲーム作りけど何から初めればいい?」
「入門書をの次に何をしたらいいの?」
「疑問や問題を一人で解決出来ない。。」
「ゲームを完成させる自信がない。。」
「気軽に質問できる環境が欲しい。。」

自分で学習することに限界を感じたら
オンライン学習しましょう!

Udemy

Udemy
特徴:教材動画買い切り型
レッスン方法:動画教材/Q&Aで質問
習得スキル:教材動画によって異なる
コース概要: ピンポイントで作りたいゲームジャンルの動画を見つけることができるかもしれません。 また頻繁にセールを開催していますのでゲーム開発講座が1500円~で購入することも可能です。
ゲームジャンル別おすすめ講座はこちら Udemy 詳細

テックアカデミー

テックアカデミー
特徴:現役エンジニア伴走型レッスン
レッスン方法:チャット(週2回)/テキストチャット/課題レビュー
習得スキル:オリジナルゲームアプリの作成
コース概要: 途中で挫折しないためにメンター(相談者)が週2回、マンツーマンであなたの質問・相談に答えてくれるので、ゲーム開発・プログラミング未経験の人でも安心してゲーム開発に取り組めます。転職したい人向けのサポートもあります。無料体験もあります。
テックアカデミー 詳細

テックスタジアム

テックスタジアム
特徴:ゲーム開発の為のオンラインスクール
レッスン方法:動画教材,Slackでの質問(24時間)
習得スキル: Unity,UnrealEngine、CG、企画、サーバー、AI、XR等
コース概要: ゲーム業界で必須な技術の習得が可能です。Slack上で待機している先生への24時間、何度でも質問できます。またIT・ゲーム業界への就職サポートが無料で受けられます。
ゲーム開発に特化したオンラインスクールですので、Unityはもとより、他のゲームエンジンやゲーム業界に興味がある方にはオススメです。
テックスタジアム 詳細

デジハリONLINE

デジハリONLINE
特徴:動画カリキュラム型レッスン
レッスン方法:動画講座/Slack/予約制Zoom相談
習得スキル:Unity基礎,実践/ハイクオリティ3Dゲーム
コース概要: デジタルハリウッド大学・大学院などを通じたデジタルコンテンツ業界とのつながりを活かし、最新かつ実践的なカリキュラムを提供しています。【基礎編】【実践編】とカリキュラムが分かれていて、それぞれに課題があり、ご自身の理解度を把握できます。最終的にはハイクオリティの3Dゲームが作れるようになります。
デジハリONLINE 詳細

関連記事

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

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

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

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