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

unityパズルゲームの作り方

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

得点用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をドラッグ&ドロップしてください。

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

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

おさらい

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

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

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

 

コメント

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