#2 自動販売機の表示関係を整える(プロジェクト作成)【Unityミニゲーム】

2022-01-302023-02-13

では自動販売機ミニゲームを作って行きましょう！ここではゲームに利用するビューやプレファブを作成したいと思います。

プロジェクト準備とゲームの表示関係を作成する

今回利用する画像素材は私の方で用意してますが、作り終わった後はお好みの素材に差し替えたりして遊んでみてください。演出面もやや弱めなので、お好みでカスタマイズをしてみてください

プロジェクト作成

プロジェクトは2Dのテンプレートで作成をしてください。プロジェクトの作成はUnityHubから行ってください。プロジェクト作成方法がわからない場合は、下記リンクを参考にしてください。

必要な画像データをダウンロード

今回のゲームで利用する２D画像素材です。ダウンロードリンクからダウンロードしてください。ダウンロードしたファイルを解凍するとUnitypackage形式のファイルが入っています。空のプロジェクトに追加を行うことで利用可能です。Assets>Import Package>Custom Packageから追加するか、ドラッグアンドドロップでプロジェクトビューに入れるかのいずれかで導入可能です。

解凍したパッケージ内には以下の2つが含まれます。導入するパッケージはimagesonly.unigypackageを利用してください

パッケージ名	使い方
vendermachine.images	こちらのパッケージを利用してください。画像のみが含まれています
fullsample.unitypackage	自動販売機ミニゲームの完成版が入っています。作ってみてどうしてもわからない場合新しいプロジェクトに入れてみてください。（作成途中のものに混ぜるとエラーが起こる場合があります）

UI関係を作る

ゲーム内で利用するUIはこんな感じ。左側にボタンが４つ、右上に投入金額を表示できていればOK。

ざっくり手順

シーン内にキャンバスを追加(Canvas)
CanvasのCanvasScalerの設定(UIScaleMode>ScaleWithScreenSize , ReferenceResolution(1280×720))
Canvasの下にButtonを作成x4（Width:150 , Height:150 ,ボタン下のテキストに金額、font size:75)
Canvasの下にTextを作成（画面右上に移動。Width:215 Height:65 font size:50）

UIは上記のパーツが揃っていればOK

スライム

ざっくり手順とは少し作りが異なりますが、パッケージの中にUIが作られたシーンを用意しています。参考にしてみてください
Assets/Samples/Scenes/Sample.UI

ゲームサイドの表示を作る

ゲーム側はボタン代わりになるジュースプレファブを作り、自動販売機に作ったプレファブをセットしていきます。

ジュースボタンプレファブを作る

ジュースボタン用プレファブを作る手順は以下

ジュースの画像(何でもOK)をシーン内にドラッグアンドドロップ
SpriteRendererのOrderInLayerを10に設定
追加した画像の名前をPrefJuiceと変更
AddComponent：BoxCollider2D(size x:1.28 y:1.28)

上記準備が出来たらPrefJuiceをプロジェクトビューにドラッグアンドドロップしてプレファブ化しましょう。

このプレファブはこのあとさらに修正します。今は表示上プリセットされたドリンクのみになりますが問題ありません。

ゲーム側の表示をセットアップ

以下の画像をシーン内に設定して座標などの設定を行ってください。各ドリンクはプレファブで対応してください。

画像/Prefab	Transform	SpriteRenderer/その他
background	座標(0,0)	OrderInLayer:-10
vendermachine	座標(0,0)	OrderInLayer: 0
change	座標(1.85,1)	OrderInLayer: 5 AddComponent >CircleCollider2D(Radius：0.64)
PrefJuice	それっぽく	OrderInLayer:10(プレファブでセット済み)

フェアリー

こちらも作成に困る場合はサンプルを見ていただければと思います。
Assets/Samples/Scenes/Sample.GameView

スクリプトとスクリプタブルオブジェクト

ビューの準備をしたのでついでに必要になるスクリプトファイルの準備を行います。ここではファイルを作成するだけ。ただしスクリプタブルオブジェクトの用意はここでやっちゃいます。コピペでもいいのでファイルを作ってアセットを準備してみましょう。

スクリプトファイル

必要になるスクリプトファイルをまずは事前に作成しておきます。

ファイル名	役割
ChangeButton	押すことでお釣りを払い出す
JuiceButton	ドリンクを購入するためのボタン
JuiceModel	ドリンク用のデータ。ScriptableObject このあと編集します。
StateBase	各状態のベースクラス
StateMachineBase	ステートパターンのコアスクリプト
VenderMain	メインスクリプト

今更ながらDrinkで統一しておけばよかったと思いました。

スクリプタブルオブジェクト

今回はリソースやファイルの準備がメインでしたが、スクリプタブルオブジェクトだけは作っておこうかと思います。スクリプタブルオブジェクトは今回だと各飲み物のデータを一つの塊として扱うことが出来るデータです。形自体はシンプルなので一度作ってみて、これがスクリプタブルオブジェクトかーと実感するのが良いと思います。

ソースファイル

編集ファイルはJuiceModelです。ファイルを開いたら以下のソースコードを記載してください。

using UnityEngine;

[CreateAssetMenu(menuName ="ScriptableObject/JuiceModel")]
public class JuiceModel : ScriptableObject
{
	public string juice_name;
	public int price;
	public Sprite sprite;
}

エラーが無ければOK

飲み物のアセットデータを作る

JuiceModelが正しく作成できていれば、プロジェクトビューでアセットを作ることが出来るようになっています。

プロジェクトビューで右クリックメニューから「Create>ScriptableObject/JuiceModel」を選択してください。すると「New Juice Model」というファイルが作られると思います。ファイル名をわかりやすい名前に変更して確定。作られたファイルを選択するとインスペクターにJuice_name/Price/Spriteが設定できるはずですので、好きな名前と価格をセットしてください。(価格は最小単位は10)