羊購入ボタンの作成 クリックアイテムを増やす処理

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


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

前回は、羊オブジェクトの初期パラメータをScriptableObjectで作成して、羊の色替えなどを行いました。

前回の記事↓

ScriptableObjectの使い方をマスター! 羊パラメータの作成
前回は、羊オブジェクトの生成・移動処理を作りました。 前回の記事↓ 今回は羊オブジェクトのパラメータを管理するオブジェクトを作っていきます。 羊パラメータの作成 ScriptableObjectの使い方をマスターしよう さて、ち...

今回は羊の購入UIと購入処理を実装していきます。

SheepGenerator修正

まずSheepGeneratorをちょっと修正します。

このままでは、前回折角作ったSheepDataによる複数の羊生成ができないので、生成メソッド(CreateSheep)ではSheepDataを受け取って、生成したプレファブにSheepDataをセットするよう修正します。(なお、テストで用意したUpdateメソッド処理は削ってしまいましょう)

スクリプトは忘れずに保存しておきましょう。

羊購入ボタン(SheepButton)作成

では、先ほど修正したSheepGeneratorを使う羊購入ボタンを作っていきます。

HierarchyのCanvas/Panel(Shop)を右クリックして、UI→Buttonを選択し、ボタンを追加しましょう。

まだ、位置やサイズなどはそのままで構いません。

このButtonの名前をButton(SheepButton)に変更し、スクリプトを追加します。スクリプトの名前も「SheepButton」にしましょう。

このSheepButtonスクリプトを以下のように修正します。

 

まず、生成ボタンをInscpetorでセット出来るように、Button変数と生成したい羊データ(SheepData)用の変数、羊生成オブジェクト(SheepGenerator)を受け取るための変数を宣言しておきます。

なお、 Button を使うために using UnityEngine.UI;が4行目に追加されているので注意してください。

次に、羊作成用の処理 CreateSheepメソッドを用意しています。

中では羊生成オブジェクトのCreateSheepメソッドを呼んでいるだけです。

そして、ボタンが押されたことによってCreateSheepが呼ばれる必要があるため、Startメソッド内でボタンクリックへの登録をしています。

では、保存をして、Unity Editor上、InspectorでButtonコンポーネントとSheepGeneratorオブジェクトをそれぞれセットして、再生してみましょう。

ボタンを押す度に、羊が生成されるようになっていればばっちりです。

このSheepButtonはAssets/Prefabs/にドラッグアンドドロップしてPrefabにしておきます。

 

 

羊購入ボタンに羊情報表示

さて、SheepButtonの見た目も作っていきます。

SheepButtonプレファブを修正していきましょう。HierarchyのSheepButtonの横にある 「>」をクリックして、プレファブ編集モードにします。

プレファブ編集モードではこのようにHierarchyビューとSceneビューが、このように編集中のプレファブのコンテンツだけになります

羊購入ボタンの表示(UI)には

  • 羊の色
  • 羊の金額
  • 羊の数/上限数
  • 購入可否

が確認できるようにします。

Imageの追加

まず、羊の色情報用にImageをSheepButtonに追加します。

SheepButtonを右クリックして、UI→Imageを追加します。

ImageのSourceImageには Assets/Images の sheep を設定しておきましょう。

配置は、ボタンの幅全体に使用したいので、RectTransformのAnchorPresetsをShift+Altを押しながら右下をクリックしておきます。

もちろん、ボタンの幅全体に広がると羊画像はこのように広がってしまうので

Image TypeのPreserve Aspect にチェックを入れておきます。

このチェックを入れておく事で縦横幅は親オブジェクト(ボタン)のサイズをしようしますが、画像の比率は元の画像のままになるようになります。

親オブジェクト(SheepButton)をHierarchyで選択し、サイズを直接変更すると分かりやすいです。
(その際には Tキーを押して 操作モードをRectTool  にしておくと良いです)

ここに、羊の金額や購入羊数などを表示するので、最終的にちょっと縦長にしておきましょう。

Imageのサイズを直接変更しないよう注意しましょう

Textの設定

金額Text

羊の購入金額表示用のTextを作ります。
と言っても、Buttonオブジェクトには最初からTextが配置されているため、それを使用しましょう。

しかし、Textが先ほど追加したImageの後ろに隠れてしまっています。

これは賛否あるUnityのuiの仕様なのですが、Hierarchyでの上から順番に描画がされるためです。

ドラッグで順番を変えて、Imageの上にTextが表示されるように修正しておきます。

では、SheepButton内のTextオブジェクトをを以下のように修正します

  • 名前: Text(Price)
  • Font : Assets/Fonts/ShigotoMemogaki-Regular-1-01
  • Text :  “1,000,000,000”
  • Font Style: BOLD
  • Font Size : 40
  • Best Fit : チェック(true)

この「Best Fit」にチェックを入れておく事で、文字が溢れそうになった時に勝手にフォントサイズを調整してくれるようになります。

今回のクリッカーゲームのような、金額がインフレするゲームでは付けておくと安心です。

頭数Text、購入可否Text

先ほどの金額Text(Text(Price))を選択して、CTRL+Dキーを2回押し、複製を二つ作ります。

Text(Price)(1)と(2)が作成されていると思います(Unityバージョンによって若干複製時の名前が違うかもしれません。適宜環境に合わせて読み変えてください)

Text(Price)(1)は以下のように

  • 名前: Text(Count)
  • Text :  “10頭/10頭”
  • Text/Alighnment : 上寄せ

Text(Price)(2)→

  • 名前: Text(Info)
  • Text :  “お金が足りません”
  • Text/Alighnment : 下寄せ

Sceneビューは以下のようになります。

SheepButtonスクリプト修正

では、SheepDataの内容を先ほど追加したUIに表示されるよう、スクリプトを修正していきます。

変数には、今回用意した

  • 羊画像 :Image sheepImage
  • 金額Text :Text priceText
  • 頭数Text :Text countText
  • 販売可否Text :Text infoText

に加えて、「今持っているお金で買えるかどうか」を判断したいので、お金を表すオブジェクトとして、以前作った「所持金オブジェクト」をセット出来るように

  • 所持金オブジェクト:Wallet wallet

の宣言と、何頭購入済みか(現在の羊の数)を管理するために

  • 現在の頭数:int currentCnt

を追加します。

次に、実際に画面に羊情報を表示するために、Updateメソッドの中でsheepDataや所持金などを考慮しながら、以下のようにImageの色やTextをセットしていきます。

大体コメントに書いてある通りではありますが、重要な箇所をかいつまんで説明すると
ローカル変数 price に、羊の基本金額(basePrice) + 値上がり幅(extendPrice) * 現在の頭数(currentCnt) を計算して格納しています。

これは、金額Text(priceText)にセットするためでもありますが、所持金(wallet.money)と比較して、購入出来るか出来ないによって、購入可否Text(infoText)の内容を変更するのにも使用しています。

この時点でのSheepButtonスクリプトは以下のようになります。

スクリプトの変更を保存し、UnityEditor上、Inspectorで各種オブジェクト/コンポーネントをセットしていきます。

ImageやTextはセットが出来ますが、WalletオブジェクトSheepGeneratorオブジェクトが無いのでセット出来ませんね。

と、いうより、SheepGeneratorオブジェクトは既にセットしたはずなのにNoneになっている・・・?

と混乱してしまうかもしれませんが、それもそのはず。

今は「プレファブ編集モード」のため、シーンに置いてあるSheepButtonを編集してあるのではなく、SheepButtonプレファブ、すなわち、Aseets/Prefabsに置いてあるSheepButtonプレファブを編集している状態です。

そのためシーンにおいてあるオブジェクトは指定できません。(今はシーンが1つしかないですが、シーンが複数あるプロジェクトの場合、特定のシーンのオブジェクトがプレファブにセット出来ては困りますよね)

なので、一旦プレファブ編集モードを閉じましょう、以下の画像の赤い枠内のどちらかをクリックすることで、プレファブ編集モードを終了させることが出来ます。

プレハブ編集モードを終了させると、HierarchyやSceneビューがいつもの状態に戻ると思います。

改めて、SheepButtonを選択し、Walletオブジェクトをセットします。
(Walletオブジェクトは、Canvas/Panel(Header)/Text(Wallet) に設定してあるので、このText(Wallet)をドラッグアンドドロップします。)

さて、再生して確認を・・・、と行きたいところですが、今SheepButtonはこのようになっていると思います。

これも「さっき縦長にしたのにな?」と思いがちですが、縦長にしたのもプレハブ編集モードでの事なので、シーン上のSheepButtonはそのままです(位置情報等はシーンの配置から変更されると困るので、そこは適用されないようになっています)

サイズを調整して、こちらもちょと縦長にしておきます(UIのサイズを調整するので、同じく Tキーを押して 操作モードをRectTool  にしておくと良いです)

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

色や金額は適用されていまし、ボタンを押すと羊も増えますが、まだ完璧じゃないですね。
これは、羊購入処理がまだちゃんと実装されていないからです。

羊購入処理

さて、今わかっているSheepButtonスクリプトの足りない処理を列挙すると

  • お金が足りなくても羊が購入できてしまう
  • 羊を購入しても金額が減らない
  • 羊を購入しても羊の頭数が変わらない(羊の値段が上がっていかない)

となります。

では、修正していきましょう。

お金が無くても羊が購入出来てしまう

これは、購入ボタンの有効化・無効化を変更すれば良さそうです。

Buttonオブジェクトの有効、無効は interactabletrueを入れれば有効、falseを入れれば無効(グレーアウトしてボタンが押せない状態)になります。

購入上限及び所持金不足の時にfalse、購入できる時だけtrueにしてあげるので、以下のように修正します。

(慎重な方はこの時点でスクリプトを保存してUnityEditor上で挙動を確認してみましょう。こまめな確認は不具合を減らすのに非常に有効で良い事です。)

羊を購入しても金額が減らない・羊の頭数が変わらない(羊の値段が上がっていかない)

これは、羊生成処理:SheepCreateの中で所持金オブジェクト:Wallet.money を減らし、現在の頭数を表す sheepCntを増やすだけで良さそうです。

この時点で、SheepButtonスクリプトはこのようになっています。

さて、保存をしてUnityEditorで確認してみましょう。

羊(Sheep)の購入・お金が足りなくて購入出来ないので羊毛(Wool)の売却・また羊の購入・・・と一連の流れが出来ました!

なお、最初からシーン上にいる1頭がカウントから外れてしまっていますが、この羊はあくまでもテスト用なので、最終的にはシーン配置からも外す想定です。

加えて羊毛の値段が高すぎてあっという間に購入上限に達してしまいますが、それはまた次回修正予定です。

リファクタリング

※ここは余裕が無い方・動きさえすればよい。という方は飛ばして頂いて構いません。

先ほどのSheepButtonスクリプト修正の中で

という、購入金額(price)を求める計算が、2回出てきている事に気付きましたでしょうか?(分かりやすいように、コメントまで同じにしてあります)

CreateSheepメソッドで1回、Updateメソッドで1回です。(人によっては同じだと気付いてコピーアンドペーストをした方もいるかもしれません。)

もちろんこれでも想定通りに動きますが、このように「同じもの(今回で言うと購入金額)」を表すためのものが2か所計算で求められている。 というのはあまりよくありません。

同じものを表す処理(特に計算処理等)が複数回出てきたら、出来るだけ1つにまとめるのをオススメします。

そのためには色々と方法はありますが、今回は「現在の羊の購入金額」を返却するメソッド「GetPrice()」を作ってしまいましょう。

そして元々購入金額を計算していた箇所2か所はこのGetPrice()を使用するように修正します。

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

ただし、これは修正前と実行結果は何も変わりません(むしろ変わってしまっていたら何か修正を誤っている可能性が高いので、コードを見直してみてください)

なんでそんな無駄な事を? と思う方もおられるでしょう。

ただ、例えば「羊が安すぎて面白くないので、全体的に購入金額を倍に上げたい」と考えたとします。
そんな時に修正前のスクリプトだと誤ってどちらか一方の購入金額の計算だけを2倍にしてしまう。 というリスクが潜んでいます。

その点、今回のように GetPrice() という、購入金額を返却するメソッドがあれば、購入額を倍にするのであればそのメソッドの中を修正すればいいというのは一目瞭然ですし、「購入できるかどうかの判定の金額」と「実際の購入金額」が異なる事がなくなります。

すなわち仕様の変更に強くなっているわけです。

このように挙動は変えずに、スクリプトの内部構造を(良い方に)整理することをリファクタリングと言います。

もしかしたら既にこの一連の講座の中にも重複している処理や、無駄な処理なんかがあるかもしれません。 もし見つけたら「リファクタリング」してみてもいいかもしれませんね。(もちろん、「挙動が変わってないかどうか」の確認は念入りに!)

おさらいと次回予告

今回は羊購入ボタンを作っていきました。

次回は複数の羊の購入のための店(Shop)オブジェクトの作成などをやっていきます。

次回の記事↓

羊を購入できるお店スクリプトの作成とGrid Layout Groupを用いたUI画面整形
前回は、SheepButtonを作成して、羊購入処理等を作りました。 前回の記事↓ 今回はそのSheepButtonを複数並べるためのShopオブジェクトを実装していき、一通りクリッカーゲームとして遊べる状態を目指していきます。 ...

コメント

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