開発メモ 「時間制限バー(GUI.BeginGroup，GUI.DrawTexture)」

クイズゲームを開発する際、

外したくない機能として、時間制限を表すバーがある。

今回は、

それを取り上げてみる。

 以下が主なスクリプトである。

***************************************************************************

#pragma strict

//画面の大きさを変数に代入
private var sw : float = Screen.width;
private var sh : float = Screen.height;

//制限時間表示
var bgImage : Texture2D;//外枠画像
var fgImage : Texture2D;//中身の画像
private var cooldown = 1.0;//1でタイマーMAX
private var timer : float = 10;

function Update(){
    if(Input.touchCount > 0){
        cooldown = 1;
    }
    //タイマーゲージ減少させる
    if(cooldown > 0){
        cooldown -= Time.deltaTime/timer;
    }
}

function OnGUI(){
    //タイマー表示
    GUI.BeginGroup(Rect(50, 100, sw / 2, sh / 30));
    GUI.DrawTexture(Rect(0, 0, sw / 2, sh / 30), bgImage,ScaleMode.StretchToFill, true, 10.0f);
    GUI.BeginGroup(Rect(0, 0, cooldown * sw / 2, sh / 30));
    GUI.DrawTexture(Rect(0, 0, sw / 2, sh / 30), fgImage,ScaleMode.StretchToFill, true, 10.0f);
    GUI.EndGroup();
    GUI.EndGroup();
}

***************************************************************************

どこのサイトでもよく見る模範的なプログラムです。

で、

GUIをグループで扱えるのが便利で、

GUI.BeginGroupでグループの領域をRectで指定して、

Groupの位置を起点に配置できる。

あと、

個人的に「GUI.DrawTexture」というものを

よく分かっていないので、なんだろうと思い色々いじくってみました。

初めに、

GUI.DrawTexture(Rect(0, 0, sw / 2, sh / 30), fgImage,ScaleMode.StretchToFill, true, 10.0f);

について。

GUI.DrawTexture(Rect(x座標, y座標, 横幅, 縦幅), 画像, 画像を描くモード, 透過を行うかどうか, 画像の比率を変化);

...多分、そんな感じです。詳しくは、公式サイトをご覧ください。

「imageAspect」は、もし、

デフォルトの0なら、画像そのままの比率が反映されて、望むような比率(10.0f)にしたいなら、

縦横のピクセルを変えないで元々の画像を調整して合わせてくれる。

「ScaleMode」については、実験して違いを確認してみた。

GUI.DrawTexture(Rect(0, 0, sw / 2, sh / 30), bgImage,ScaleMode.StretchToFill, true, 10.0f);

の外枠を表示するScaleModeを①、
GUI.DrawTexture(Rect(0, 0, sw / 2, sh / 30), fgImage,ScaleMode.StretchToFill, true, 10.0f);

のバーの中身を表示するScaleModeを②

として検証する。

また、

元の画像を以下とする。(大きさはどちらも600×40)

①,②StretchToFillの場合

①,②ScaleAndCropの場合

①,②StretchToFillの場合

①StretchToFill、②ScaleAndCropの場合

①StretchToFill、②ScaleToFitの場合

①ScaleAndCrop、②StretchToFillの場合

①ScaleAndCrop、②ScaleToFitの場合

①ScaleToFit、②StretchToFillの場合

①ScaleToFit、②ScaleAndCropの場合

実験してみて、

正直なところ、上から3つやり終えた時点で、

残りの結果は分かってしまっていた...。

最後までやりきったのは、自己満足です...はい。

とまぁ、

GUI.DrawTextureをいじくってみて、

分からなかったところを理解できたので、良しとします。

うん。

GUIはやはり面白いです。

いつか、色々GUIについて調べていこうと思います。

終了。