羊を購入できるお店スクリプトの作成とGrid Layout Groupを用いたUI画面整形

Unity 放置インフレ系クリッカーゲームの作り方 (スマホ化対応)


Unityの本格ゲーム制作講座はこちら
【30日間の全額返金保証付き】

前回は、SheepButtonを作成して、羊購入処理等を作りました。

前回の記事↓

羊購入ボタンの作成 クリックアイテムを増やす処理
前回は、羊オブジェクトの初期パラメータをScriptableObjectで作成して、羊の色替えなどを行いました。 前回の記事↓ 今回は羊の購入UIと購入処理を実装していきます。 SheepGenerator修正 まずSheepG...

今回はそのSheepButtonを複数並べるためのShopオブジェクトを実装していき、一通りクリッカーゲームとして遊べる状態を目指していきます。


【無料転職サポート&就職後に授業料を全額返金】

Shopオブジェクト

今、Hierarchyビューを見ると、Canvas/Panel(Shop) の下にSheepButtonという状態になっています。

違う種類(金額等)の羊を選んで買えるようにしたいので、複数のSheepButtonを管理するオブジェクトとして、ShopスクリプトCanvas/Panel(Shop)に作成していきます。

そして、SheepButtonはこのShopスクリプトから作るようにしたいので消してしまいます。

では早速今作ったShopスクリプトを修正していきます。

Shopスクリプト修正

まず、以下の3つのメンバ変数を宣言していきます。

  • 前回作成したボタン(SheepButton)のプレファブ
  • 生成元になる羊データ(SheepData)の配列
  • 生成したボタン(SheepButton)を保持するList

次に、Startメソッドを消し、新たにAwakeメソッドを作成します(Startメソッドの名前を「Awake」と変えるだけでよいです)

Awakeメソッド内では渡されたSheepData配列の数だけforeachで回し、SheepButtonプレファブをInstantiate(生成)していき、sheepButtonList追加(Add)していきます。

Awakeメソッドとは

Unityのライフサイクル(裏で動いている初期化→更新→描画 など順番に呼び出す仕組み)の一つです。

今までは

  • Start() →ゲームオブジェクトが生成されてからUpdateの前に一度だけ呼び出される
  • Update() → 毎フレーム(例:1秒間に60回)呼び出されるメソッド

のみ使用してきましたが、AwakeメソッドStart()よりも前、生成された時に呼ばれるメソッドになります。

今回のSheepButtonを生成する処理は後ほどセーブロード処理において「他のオブジェクトよりも先に作られていて欲しい」ので、Awakeメソッド内で処理をするようにしています。

 

これにより、SheepData配列にSheepDataを準備した数だけボタンが生成されるようになりました。

なお、ここでの注意点はInstantiateの引数に自分自身(Shopオブジェクト)のtransformを指定することで、SheepButtonを自分自身の子要素にしつつ生成している事です。

では一旦スクリプトを保存して、UnityEditorでInspectorのセット、挙動を確認してみましょう。

Sheep Button Prefab には前回作ったSheepButtonプレファブを、
Sheep Datas には、とりあえず作ってあるSriptableObjectであるSheep1Sheep2をセットしておきましょう(羊の値段が安い順が良いです)

さて、再生して確認をしてみると

おや、羊購入ボタンが一つしか見えないですね? しかしHierarchyビューを見ると羊購入ボタン(SheepButton)はちゃんと2つ作られています。

これはまったく同じ場所に作られてしまったため、1つに見えている状態です。

ということは、生成する時(またはした直後)に位置やサイズを変更しながら作る必要があるという事でしょうか。

LayoutGroup(レイアウトグループ)

もちろんその方法でも構わないのですが、Unityの標準UIには LayoutGroup(レイアウトグループ)という、複数UIの位置合わせをしてくれる機能(コンポーネント)があります。

これには

  • Horizontal Layout Group(横に並べるレイアウト)
  • Vertical Layout Group(縦に並べるレイアウト)
  • Grid Layout Group(格子状に敷き詰めるレイアウト)

があります。

今回はGrid Layout Group(格子状)を使いましょう。

Grid Layout Group の追加

HierarchyビューCanvas/Panel(Shop) を選択し、InspectorからAdd ComponentGrid Layout Groupを追加します(Layout→Grid Layout Gorup と選択しても良いですし、検索ウインドウにGrid Layout Group と直接打ち込んでも構いません)

GridLayoutGroupには色々と設定が出来ますが、とりあえず今は初期設定のままで構いません(後でGridSizeだけ修正します)

キレイにボタンが並びましたね!
ちゃんと、渡したSheepDataが適用されているか(羊の色、初期価格)も確認しておきましょう。

SheepButtonへ依存オブジェクトのセット

さて、購入ボタンは並びましたが、購入ボタンを押しても羊が作られないですね?
それどころか、Consoleウインドウには赤い文字エラーが表示されています。

これは、再生中にHierarchyで生成されたSheepButton(Clone)を選択して、Inspectorを見ると分かるのですが、SheepGeneratorオブジェクトWalletオブジェクトNone(設定されていない)状態になっているのが原因です。

「いや、これ前回セットしたはず・・・」と思うかもしれませんが、それはあくまでもSceneに最初から配置してあったSheepButtonへの設定です。そのSheenButtonは先ほど消してしまいましたね。

プレファブにSceneのオブジェクトはセット出来ない(どのSceneで使われるか分からないため)ので、この2つがNone状態なわけです(この辺り、初学者さんが躓きがちだと思います)

これを解決する方法には

  • GameObject.Find 系メソッドを使って、Sceneから探し出す
  • WalletやSheepGeneratorはシーンに一つしかないので「シングルトンオブジェクト」にする
  • SheepButtonを生成するオブジェクトが責任もって渡してあげる(バケツリレー)

(他にはDI、サービスロケータなど使う事もありますがとりあえず今は考えないことにします)

などなどありますが、今回は

  • SheepButtonを生成するオブジェクトが責任もって渡してあげる(バケツリレー方式)

をしてあげることにします。
SheepButtonを生成するオブジェクト、すなわち ShopオブジェクトWalletオブジェクトSheepGeneratorオブジェクトを持たせて、生成時に渡すようにしてあげます。

修正後のShopスクリプトは以下のようになります。

では保存して、ShopオブジェクトにInspectorでSheepGeneratorWalletをセットします。

エラーが出なくなっているか、ちゃんと押したボタンに対応する羊が生成されるようになっているか確認してみましょう。

エラーも無くなりましたし、それぞれに設定されたSheepData通りに羊が生成されていますね。

ですが、Woolの売却価格がどれも100円なので、高い羊を買う意味がありません。また、Woolに色が無いので大分地味です。

この辺りを修正していきましょう。

Woolスクリプト修正

今、Woolスクリプトは以下のようになっています。

見て分かるように、売却金額を表す変数 price はありますが、100で固定になってますね。
売却金額についてはこのメンバ変数(price)をSheepから設定してあげればよいので特に修正の必要はありませんが、
色替えについては「何色にするか」を設定するためのColor 変数 が必要ですし、
画像の色を変えるためには羊毛の画像を描画している SpriteRenderer が必要です。

そのため以下のメンバ変数を追加します。

そして、Startメソッド内で受け取った色に変更してしまいましょう。

なお、その際にアルファ値(透明度0~1.0f →0になればなるほど透明)を修正して、半透明にしてあげたいため、woolColor.a0.9f を設定しています。
こうすることで、羊が羊毛に隠れてしまう対策と一緒にふわふわ感を出します。

では、保存をしてUnityEditorに戻ります。

Hierarchyビューwoolオブジェクトを選択すると、Wool(Script)Wool Sprite RendererNone になっていると思いますので、自身のSprite Renderer をセットしましょう。

ついでに色々と設定を変更します。

  • Price を 10 に(最初から100だと羊が買えすぎてしまうため)
  • Wool Color はとりあえず 白に
  • Overrides → Apply All で変更をプレファブに適用

再生して確認してみましょう。

羊毛の売却金額が10円になって、羊毛が半透明(後ろが透けている)になっていればOKです!

Sheepスクリプト修正

まだ、羊毛の金額や色が決め打ち(Inspectorで指定したもの)になっているので、これらをSheepスクリプトから設定するようにしてあげましょう。

SheepスクリプトShavingメソッドは今このようになっているはずです

//TODOコメント(後ほどやる予定コメント)」にも書いてありますが、Instantiate(生成)した羊毛(Wool)をローカル変数 wool に格納しているだけで、その後の設定を何もしていません。

このように、wool.price には今回刈り取った羊毛:shavingWool を入れ
wool.woolColor には、羊と同じ色:sheepData.color を入れるよう修正します。

修正後のSheepスクリプト全体はこのようになります。

スクリプトを保存しUnityEditor上で確認をしてみましょう。

灰色の羊からは灰色の羊毛が、ピンクの羊からはピンクの羊毛が刈り取れる事と
灰色の羊毛と、ピンクの羊毛で売却値段が違う(ピンクの方が高い)事を確認しましょう。

大分それらしくなってきました。

クリックアイテムの羊の種類を増やす

さて、クリッカーゲームといえば、

  • 最初はちょっとずつしかお金が増えない
  • どんどん手に入るお金が増えていき、購入するモノもインフレしていく

というのが一般的です。

今回作っているクリッカーゲームの寿命(どれだけ長く遊べるか)の期待値にもよりますが、さすがに2匹の羊だけではあっという間に終わってしまう(全部購入出来てしまう)ので、羊の種類を8種類まで増やしましょう。

羊パラメータ

さて、羊のパラメータは

  • Color:羊の色
  • BasePrice:初期値段
  • ExtendPrice:1頭追加するごとに上がる値段の額
  • MaxCount:何頭まで購入できるか
  • WoolCnt:羊が持つ羊毛の量

の5つでした。

安い羊なら買えるけど・・・。ちょっと我慢して高い羊を買いたい
→我慢して買った高い羊は羊毛も高いから急激に収入アップ!!!

が楽しい瞬間(だと僕は思っています)なので、あまり適当に値段設定をしてしまうわけにもいきません。

色々試してみたり、既存のクリッカーゲームなどを参考にしたところ

  • BasePrice は 1つ羊のランクが上がるたびに10倍~12倍
  • 同じく ExtendPriceBasePrice大体半分
  • MaxCountはとりあえず全て10
  • WoolCntExtendPrice80%~90%くらい

が良さそうです(この辺りは各人調整してみてください)

なお、

  • Colorパステルカラーで、なるべく見分けがつく色

がオススメです。

では、早速羊パラメータを増やしていきます。

羊パラメータScriptable Objectの増産

Sheep1Sheep2は既に以前の講座で作っていますので、今回作るのはSheep3~8になります。

Assets/SheepDatas/ フォルダ内の Sheep2 を選択してから、CTRL+Dキー6回押して、6つ複製します。

当然、この操作で作られたSheep3~Sheep8コピー元(Sheep2)と同じ内容になってしまっているので、全て設定(レベルデザイン)をしましょう。

羊パラメータ例

あくまでも例でちょっと単調すぎますが、思いつかない方は以下の通りに設定してみてください

名前 Color Base Price Extend Price Max Count Wool Cnt
Sheep1 (E0E0E0) 10 5 10 5
Sheep2 (FFBFBF) 100 50 10 40
Sheep3 (FADDA2) 1,100 500 10 400
Sheep4 (F9FF86) 12,000 6,000 10 5,000
Sheep5 (86FF88) 130,000 60,000 10 50,000
Sheep6 (9FD1FA) 1,500,000 700,000 10 600,000
Sheep7 (CAA0F8) 18,000,000 8,000,000 10 7,000,000
Sheep8 (FFFFFF) 200,000,000 100,000,000 10 90,000,000

何と一番高い羊は基本が200,000,000(2億)円、10匹目まで買うときには1,100,000,000(11億)円になります。良いインフレ感です。

さて、羊データがSheep1~Sheep8まで準備できましたら、Hierarchyビューで、Canvas/Panel(Shop)を選択しShopスクリプトSheep Datas に設定していきます。

若干手間ですが一つずつドラッグアンドロップして設定しましょう

では、再生して確認してみましょう。

色とりどりの8個のボタンが並びましたね!!
しかし・・・右に余白が出来ていてちょっと不格好です。

この羊購入ボタン1個1個の横幅を広げて、キレイに敷き詰められるようにGrid Layout GroupCellSizeを修正します。

GridLayoutGroup CellSize(格子のサイズ)の修正

このCellSizeGirdLayoutGroupが格子状に敷き詰めるUIの一つ一つの縦横幅を設定する項目になります。(最初は100×100です)

今回はこのPanel(Shop)で使える幅は横480 縦200なので、横に4列縦に2列の8のボタンを置くためには、CellSizeには

  • Cell Size X は480(横幅) ÷ 4列 = 120
  • Cell Size Y は200(縦幅) ÷ 2列 = 100 (そのまま)

を設定しておきます。

では、改めてプレイボタンを押して、確認してみましょう。

ボタンもきれいに敷き詰められていますし、徐々に手に入る金額が大きくなっていく「クリッカーゲームの基本」が出来ているのではないでしょうか。

テスト用の羊の削除

さて、一通りゲームの本筋が出来上がりましたので、今シーンに最初からいるテスト用の羊は消してしまいましょう。

なお。羊毛(wool)も最初から一つ置いてありますが、これはそのままにしておきます。

というのも、この羊毛(wool)を売却することで最初の羊(sheep)が買えるようになるからです。

最初から羊が居るより、最初からお金を10円持っているより、
まったく前提知識が無くゲームを開始した人でも自然と「売却」ボタンを押し、売却したことで所持金が増え、羊が買えるようになる。羊からは最初にもあった羊毛が取れる。

と、語らずともゲームが開始できる仕組みづくり(のつもり)です。

購入テスト

ところで、一番高い羊(sheep)買うのは容易じゃないですよね。

そんな時は、最初からSceneに置いてあるwool のPriceを10→好きな金額に変更してしまいましょう。

(※ただし、intなので、最高で2,147,483,647≒21億です)

買いたい放題ですね

もちろん、テストし終わったら10に戻すのを忘れないようにしましょう!!!

おさらいと次回予告

今回はShopオブジェクトの作成と、羊パラメータの増産をして、一通り遊べる状態にできました。

次回はコイン取得演出の追加と、セーブ・ロード、スマホ解像度対応をして一旦の完成を目指します。

次回の記事↓

ベクトルとTime.DeltaTimeを用いたコイン獲得時のアニメーション演出処理の作成
前回はShopオブジェクトの作成と、羊パラメータの増産をして、一通り遊べる状態にできました。 前回の記事↓ 今回はコイン取得演出の追加と、セーブ・ロードを追加して一通りの完成を目指します。 コイン取得演出の追加 今は売却ボタンを...

コメント

タイトルとURLをコピーしました