【Unity】プログレスバーを"いい感じ"に実装する

C#

今回はUnityのプログレスバーを心理学的にいい感じに実装していこうと思います。

いい感じとは?

普段、ネットとかで【プログレスバー 実装】について調べてみると、様々な言語で0% ~ 100%までを等間隔で表示させたりするものが多く紹介されています。
↓↓こんな感じで↓↓

float progress = 0f;
Text progress_text = GetComponent<Text>();
for( int i = 0; i < hoge.length; i++ ) {
  progress = (float)( i / hoge.length ) * 100f;
  progress_text.text = progress.ToString("f2") + "%";
}

私も普段はこのように実装していたのですが、ふとゲームで遊んでいると等間隔じゃなくて何か\sqrt[n]{x}っぽい動きをしているように見えました。

そこで、色々なサイトで同じように考えている人がいないか探してみたところ、TEDで紹介で同じようなことが紹介されていました。
www.ted.com

つまり、最初を早くすることで心理学的に、ユーザーからは実際よりも早く進んでいるという感じるそうです。

なので、今回はy=xy=\sqrt{x}y=\sqrt[3]{x}の3つを実装していこうと思います。

f:id:reishisu:20191011004204p:plain
それぞれの関数のグラフ

長いので先に実行結果だけを見たい人は一番下に動画を載せてます!!

実装

1. 画像を準備する

まず、Unityでプログレスバーを実装するには円の画像を用意します。
今回は適当にPowerPointで適当に円を作りました(白いので見えにくいですがあります)

f:id:reishisu:20191011002740p:plain
円のサンプル画像

↑右クリックしてDLしてください。

2. Unityで2Dのプロジェクトを新規作成する

私は今回、「ProgressBarText」という名前のプロジェクトを作成しました。(TextとTestのスペル間違えました…)

f:id:reishisu:20191011005049p:plain
新規プロジェクト作成

3. 背景色を変える

そのままでもいいのですが、文字をみやすくするために「Main Camera」→「Camera」→「Background」を押してカラーパレットから「Silver」を選択しました。

f:id:reishisu:20191011010110p:plain
背景色を変える

4. DLした画像をImagesをフォルダに入れる

そして、Assetsのなかに「Images」フォルダを作成して、その中に先ほどDLした円の画像をドラッグ&ドロップします。

f:id:reishisu:20191011012331p:plain
Imagesフォルダにドラッグ&ドロップ

5. プログレスバーの作成

まずは、Hierarchyの中に「Canvas」を作成して「Render Mode」を「Screen Space – Camera」に変更。

f:id:reishisu:20191011011030p:plain
Render Modeの変更

そして、「Render Camera」を「Main Camera」に設定する。

f:id:reishisu:20191011012905p:plain
Render CameraをMain Cameraに設定

こちらのサイトをみながら、実際に作ってみる。
ghoul-life.hatenablog.com

そして、サイズを「ProgressBar」は300×300に、「Center」は250×250に変更。

f:id:reishisu:20191011014507p:plain
サイズを変更する

6. 進捗率用のTextとラベル用のTextを作成して1つのGameObjectにまとめる

進捗率を表示するため「ProgressText」とラベルとして表示するための「Label」というTextオブジェクトを作成。
その後、Canvasの中に「X_default」という名前で空のGameObjectを作成し、「ProgressBar」「ProgressText」「Label」を「X_default」の下に移動させる。

f:id:reishisu:20191011015917p:plain
1つのGameObjectにまとめる

7. 作成したX_defaultを複製して名前を変える

作成したX_defaultをコピーして、「X_pow_2」「X_pow_3」という名前にリネームする。
そして、均等になるように調節してそれぞれラベルとプログレスバーの色を変える。

f:id:reishisu:20191011020904p:plain
コピーして調節する

8. スクリプトを作成する

Assetsのなかに「Scripts」フォルダを作成して、その中に「ProgressController」と「ButtonController」という名前で2つC#スクリプトを作成する。

f:id:reishisu:20191011022823p:plain
スクリプトの作成

9. 作成したスクリプトにコピペする

【ProgressController】

【ButtonController】

平方根をとるには、Mathf.Pow関数の第二引数を小数にすることで取れる。

10. 同時に実行するためスタートボタンを作成する

f:id:reishisu:20191011023900p:plain
スタートボタンの作成

11. スクリプトをアタッチする

スクリプトの作成が終わったので、作成した「Button」に「ButtonController」、「X_default」「X_pow_2」「X_pow_3」にそれぞれ「ProgressController」をアタッチする。

f:id:reishisu:20191011024713p:plain
スクリプトをアタッチする

12. それぞれプロパティをセットする

それぞれのGameObjectに対して、プロパティをセット。
【Button】

f:id:reishisu:20191011025335p:plain
Buttonにプロパティをセット

【X_default】【X_pow_2】【X_pow_3】
この3つはほとんどやり方が同じなので、代表として「X_default」のセット方法だけを紹介します。
それぞれの子のProgressBarとProgressTextをセットするのは同じですが、Pow_valueのところだけX_pow2では「2」、X_pow_3では「3」をセットする。

f:id:reishisu:20191011030159p:plain
X_defaultのプロパティをセット

13. スタートボタンにクリックされた時の関数を実装する

まず、赤の四角で囲われている「+」ボタンを押すことで関数をセットできる状態になるので、押したら「Button」を画像のようにドラッグ&ドロップする。そして、すぐ右上のボタンを押して画像のように「OnClickStart()」を押すことでセットが完了する。

f:id:reishisu:20191011031116p:plain
スタートボタンに関数をセットする

実行!!

このように、プログラムの実行時間自体はどれも同じですが、体感速度が明らかに違うことが分かります!!

コメント

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