クリアメモリ

プログラミングやガジェットレビュー、便利なアプリケーションなど雑多に記録するブログ

【Unity】丸型ゲージを使ってメーターを作る!円形のパワーゲージに使えるかも!

f:id:clrmemory:20170422173705p:plain 

先日、UnityのCanvasという機能を使っていたところ、その中のFill Amountという機能を使うことで、丸型ゲージを作成することができました。他にも、経過時間を数えるメーターにも応用できましたので紹介します。

 

 

はじめに

 

丸いゲージと紹介しましたが、実際にどのようなものかわかりにくいと思います。

以下の画像をみてください。

 

スクリーンショット 2016-04-22 7.54.3011

 

 

このように丸が描かれたイラストがあるのですが、このイラストを少しずつ非表示にしたり、逆に表示したりする方法があります。

うまく使えば「ロード画面のくるくるまわるやつ」や「スキル使用後のクールタイム」などに使うこともできると思います。

 

実際に動かしている動画を作成しました。今回の方法を使えばこのような動作を簡単に実装することができます。

 

 

では早速このような丸いゲージを作る方法を紹介していきます。まずはメーターに使う画像を用意しましょう。

 

画像を用意する

 

今回私は以下の素材を作成しました。

 

waku

 

 

かなりわかりにくくなっていますが、1枚目のイラストは円の内側が空白で、2枚目のイラストは内側を白くしています。

  

この画像をそのまま使っても、新しく作成しても構いませんので似たような素材を用意しておいてください。

素材の準備が完了したら、いよいよUnityでメーターを作成していきましょう。

 

Sceneを準備しよう

 

Unityを起動し、先ほどの素材をインポートしておいてください。

続いて、HierarchyにCanvasを作成し、子オブジェクトにImageを作成します。

 

スクリーンショット 2016-04-22 8.13.04

 

スクリーンショット 2016-04-22 8.12.50

 

Canvasを作成したら、まずUI Scale Modeを「Scale With Screen Size」にしておきましょう。

 

スクリーンショット 2016-04-22 8.17.30

 

「Image」に先ほどの3枚目の画像にしてください。

同じようにして新しく「Image(1)」を作成し、こちらには内側が透明の1枚目の画像を割り当ててください。

 

このようにすることで、3枚目の画像が消えても枠が残るようにしてみました。

 

スクリーンショット 2016-04-22 8.20.31

  

続いて「Image」のInspectorを見てみてください。

 

スクリーンショット 2016-04-22 8.21.48

 

画像を参考にして、Image(Script)を変更しましょう。

主に確認する必要がある項目は「Image Type」「Fill Method」「Fill Origin」です。順番に見ていきましょう。

 

Image Type

 

画像タイプです。Filledにすることによって、今回のように画像を少しずつ表示したり、消したりすることができるようになります。

 

Fill Method

 

今回は360にしたので円を描くように表示、非表示させることができるのですが、「上下のみ」や「左右のみ」などに変更することもできます。

用途に合わせて設定することができるのですが、今回は360°にしておきましょう。

 

Fill Origin

 

表示、非表示の開始位置を指定することができます。私は今回「Bottom」にしてあるので、メーターの0と100が下に来ます。

もし0を上にしたいという方はBottomではなく「Top」にしてください。「Right」や「Left」もありますが、こちらも必要があったら変更しましょう。

 

Fill Amountを使う

 

今回のメインになる「円を描くように画像を非表示」にする方法は「Fill Amount」という機能を使います。

 

先ほど編集したInspectorのなかに「Fill Amount」のスライドバーがありますので、左右に移動させてみてください。

 

スクリーンショット 2016-04-22 8.31.43

 

このようにBottomを起点にして画像が非表示になっていくと思います。このFill Amountの値をスクリプトから変更することで、1秒間にメーターが1周するというような処理を作成することができます。

 

ですが、この非表示される向きを逆回転にさせたいというような時もあると思います。そのような時は以下を確認してください。

 

Clockwise

 

この項目にチェックを入れることで、回転の向きを逆にすることができます。

Clockwiseにチェックを入れると、時計回りに表示するようになります。Clockwiseというのは「右回り(時計回り)」という意味だそうですよ。

 

コードを作成しよう

 

ではいよいよ「Fill Amount」を制御するコードを書いていきましょう。以下のようなスクリプトを作成してください。

 

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class UI : MonoBehaviour {

    public Image UIobj;
        public bool roop;
    public float countTime = 5.0f;

    // Update is called once per frame
    void Update (){
        if (roop) {
            UIobj.fillAmount -= 1.0f / countTime * Time.deltaTime;
        }
    }
}

 

※今回のコードでは「using UnityEngine.UI;」が必須になります。このコードがないと「public Image ○○」を使うことができなくなってしまうので注意してください。

 

このコードを作成したら「Image」から設定していきます。画像を参考にして変更してください。

 

スクリーンショット 2016-04-22 8.42.411

 

※CountTimeは、画像が完全に非表示になるまでにかかる時間(秒)です。この例だと、1秒で丸い画像が非表示になります。

 

ではコードの解説をしていきます。

 

UIobj.fillAmount

 

このコードを使うことで、先ほどのFill Amountのスライドバーを操作することができます。

Fill Amount は0〜1の間で値が変化するので、5分の1 * Time.deltaTimeと考えると、5秒で1になりますよね。これをUIobj.fillAmountから引くことで、非表示にしていくことができます。

 

CountTimeの値は、○秒で変化させたい時間に合わせて調整してください。

 

また -= ではなく += に変えることで、○秒で画像を表示するというコードに変更することもできますよ。

たったこれだけで、冒頭で紹介したような「円を描くように少しずつ消えていく画像」を作ることができました。

 

まとめ

 

今回の方法を使うことで、簡単にメーターやロード画面、タイトルロゴなどに使える画像を用意することができると思います。

 

この機能を応用すると「画像がすべて消えたら、次は画像を表示させる」というような処理を作成できるので、メーターの表示、非表示を無限に繰り返すこともできます。

 

www.clrmemory.com

 

 

そのような応用は次回Part2で紹介するので、よければチェックしてみてください。

 

Part2に続く > >

 

新着記事