uGUIを用いた得点スコアの表示法と作り方

unityパズルゲームの作り方

第10回では、設定画面やタイトル画面の際に用いられるUnityUI(よくuGUIと略されます)を使って、得点表示を作成していきます。

前回の記事はこちら↓

ボールを一気に消す爆弾とアニメーションの作り方
第9回では、ボールを一気に消す爆弾を作成します。また、ボールが消える時のエフェクトも一緒に作成していきます。 前回の記事を読みたい方はこちら↓ 爆弾の作成 爆弾は、スマホ系のパズルゲームでよく用いられるアイテムで、周囲のボ...

得点用UIの設定

uGUIを使う際には、基本的にCanvasというゲームオブジェクトを使用します。

Canvasは描画用の一枚の板を表すゲームオブジェクトです。このCanvasに文字やボタンや画像を張り付けると、その位置に合わせて描画され、Game上で綺麗にUIが表示されるようになります。

それでは、uGUIを使っていきましょう。まず、ヒエラルキーからUI→Imageを作成してください。

すると、同時にCanvasが作成され、その子オブジェクトとしてImageが作成される様子が確認できます。

ここで、得点表示を左上に固定したいため、アンカープリセット(Anchor Presets)を設定します。

下のようにmiddle-center図をクリックして左上のtop-leftにアンカーポイントを変更しましょう。

この状態でPos XとPos Yを0にすると、中心座標(0,0)が画面左上であるため、Imageも左上に移動するようになります(余談ですが、AndroidStudioを使う際も似たようなUI設計を行うので、覚えておくと良いかもしれません)。

しかし、この状態だとImageが画面から切れて表示されていることが分かります。現在はImageの中心を原点としているためこのような結果となります。そのため、Imageの原点を中心ではなく左上に変えていきます。この原点の位置のことをPivotと呼びます。

Pivotを(X,Y)=(0,1)に設定してImageの左上を原点にしてください。今回は横長のウインドウにしたいため、Widthを300、Heightを50に設定して幅300×高さ50のサイズに調整しましょう。これで得点表示の背景が完成しました。

次に、Imageの子オブジェクトとしてUI→Textで文字を生成しましょう。すると「New Text」という文字が出てきたと思います。

この状態で、インスペクターのTextコンポーネントに次の設定を行ってください

  • Font Sizeを28に設定
  • Horizontal OverflowとVertical OverflowをOverflowに設定
  • Alignment左項目の中央ボタンを選択
  • Textを「SCORE」に変更

さらに、アンカーポイントをmiddle-leftに変えてください。

最後に、位置の微調整としてPositionを(X,Y)=(30,0)に変えてください。

次に、TextをCtrl + Dで複製して、スコア用の文字を作成しましょう。変更する点は次の通りです。

  • ゲームオブジェクトの名前を「ScoreText」へ改名
  • Pos Xを300に設定
  • Textを「000000」に設定

最後に背景と文字を自分の好みの色に調整しましょう。

これで得点用UIの配置が完了しました。

得点の計算/表示

次に、得点の計算と表示を行っていきます。計算と表示には新しいスクリプトを用意して行います。

得点の計算

まずは、ScoreManager.csを作成して開きましょう。

ScoreManager.csは次のようなコードに書き換えてください。

Text型の変数textObjとint型のscoreを定義して、point分だけスコアが増えるといった処理をAddScore関数として加えてください。AddScore関数内にて、scoreにpointだけ加算し、Text型の変数textobjの文字列変数textにその数値を反映させています。

ここで、「”” + score」は「scoreを文字列に変換したもの」を表します。score.ToString()といったように数値を文字列に変換する関数も存在しますが、今回のように数式のみで型を変換させることもできます。これを型のキャストと呼びます。

それでは、TouchManager.csにScoreManager型の変数scoreManagerを追加してください。

さらに、TouchManager.csのReleaseObject関数を次のように変えてください。追加した部分は末尾のif文の部分です。計算方法は、繋げる数が多いほど得点が上がりやすくするため、Mathf.Pow関数を用いて消去するオブジェクトの数の2乗としました。

例えば、3つ消去する際は2の3乗の8が、4つ消去する際は2の4乗の16が得点として追加されます。この時、3つの消去を4回した場合の得点は32(=(2^3)×4回)となりますが、4つの消去を3回した場合の得点は48(=(2^4)×3回)と繋げる数が多ければ、ボールを同じ数消しても得点が上がりやすくなることが分かります。

得点の表示

コードを書き終えたら、TouchManager.csのインスペクタのscoreManagerにScoreManagerをドラッグ&ドロップしてください。

最後に、ScoreManagerという名前の空のゲームオブジェクトを作成してScoreManager.csを追加してください。TextObjにはScoreTextをドラッグ&ドロップしてください。

この状態で実行すると、下のように消去したときに得点が増える様子が確認できます。

これでこのゲームは完成です。

おさらい

これで、ゲームが完成しました。

あとはタイトル画面を別シーンで追加したり通信機能を追加して対戦ゲームにしたりすることでよりゲームらしくなります。

ここまで読んでいただき誠にありがとうございます。

「【unityでパズルゲーム開発】ツムツム風落ち物アクションパズルゲームの作り方」に戻る>>

【unityでパズルゲーム開発】ツムツム風落ち物アクションパズルゲームの作り方
このunityゲーム開発講座では3DUnityを用いたツムツム風アクションパズルゲームの制作を行っていきます! 講座は全部で10回に分かれており、unity初心者にも取り組みやすい形の講座です。 unity3Dの物理エンジンを用いた衝突判定・重力処理や入力処理、ツムツム風パズルゲームの根幹と同じ色のボールをなぞって消す処理なども作っていきます。 最後は簡単なアニメーションを作ったり、周囲のボールを全部消せる爆弾も作成します。 得点スコアを導入して「unityで作るツムツム風物理パズルゲーム」の完成です!
【必見】無料資料請求でスクエアエニックスのゲーム開発の企画動画が見れる学校アリ
令和時代のゲームクリエイターになるための必須スキルがUnity。未経験からでもUnityを学んでオリジナルゲーム制作&ゲーム会社就職が可能なゲーム専門学校・プログラミングスクールの情報をオンライン&対面形式に分けてまとめました。 無料資料請求でスクエアエニックスのゲーム開発企画の動画もらえるので見てみるといいですよ。
unityパズルゲームの作り方
unity入門の森 ゲームの作り方

コメント

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