シヴァのブログ

UnityやUE4や趣味とかいろいろ...

開発メモ 「GUI(GUI Skin),プログラムの優先順位」

GUI Skinについて、

少しは理解できて来たので、メモ。

 今まで、

GUI Skinは便利な機能と知っていたけれど、

1つも分かってなく、使用していなかった。悔しかったので、

色々試していたら、初歩的なことだが分かってきた。

 

今回は、

Google Playシューティングゲームを出す前にやりたいことがあった。

それは、

タイトル画面から、チュートリアル画面へ移行できるようにしたい。

(今までは、初期起動時のみ表示するようにしていた)

ただそれだけ。

 

結局は、

GUI Skinの練習みたいなものです。

で、

結果的に、どんな感じかというと、以下のようになりました。

f:id:shivaT:20130622031801p:plain

 

一様、ボタンです。

今まで、何に悩んでボタンを付けなかったのかというと、

「タッチ」と「ボタン」の共存の仕方が分からなかったからです。

 

じゃあ、

どっちもボタンにしようと考えました。

画面全体に、大きなボタン(タッチの代わり)

上の画像の、小さなボタン(普通の大きさのボタン)

を設定。

 

で、初めは、こんな感じで作りました。

[GUI Skinの設定]

f:id:shivaT:20130622035610p:plain

[JavaScript]

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

#pragma strict

//チュートリアルのボタン
var skin : GUISkin;
var btnTexture : Texture2D;

function OnGUI(){
    var sw : float = Screen.width;
    var sh : float = Screen.height;

    //Button表示
    GUI.skin=skin;

    //画面全体をボタンとしている(Touch Screenために設定)
    if(GUI.Button(Rect(0, 0, sw, sh), "", "textfield")){
        audio.clip = OkSound;
        audio.Play();
        Application.LoadLevel("Main");
    }
    if(GUI.Button(Rect(0, sh - 100, 100, 100), btnTexture, "button")){
        audio.clip = OkSound;
        audio.Play();
        Application.LoadLevel("Tutorial");
    }
}

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

出来た!っと思って、確認しましたが、

チュートリアル画面に移行しない...?

 

なんでかなーって、

よくスクリプトの中身を見ていると、おかしなことを発見。

それは、初歩的なことで、

プログラミングって、上から順に読まれていくから、

このままだと、

プログラムを読んでいく優先順位が、

Application.LoadLevel("Main"); が先で、

Application.LoadLevel("Tutorial"); が後だということ。

 

だから、このプログラムでいうと、以下が正しい。

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

#pragma strict

//チュートリアルのボタン
var skin : GUISkin;
var btnTexture : Texture2D;

function OnGUI(){
    var sw : float = Screen.width;
    var sh : float = Screen.height;

    //Button表示
    GUI.skin=skin;

    if(GUI.Button(Rect(0, sh - 100, 100, 100), btnTexture, "button")){
        audio.clip = OkSound;
        audio.Play();
        Application.LoadLevel("Tutorial");
    }

    //画面全体をボタンとしている(Touch Screenために設定)
    if(GUI.Button(Rect(0, 0, sw, sh), "", "textfield")){
        audio.clip = OkSound;
        audio.Play();
        Application.LoadLevel("Main");
    }
}

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

 

うん。

GUI Skinも大切だけれど、

初歩的なこと(基礎)も、やっぱり大事だと、

今回の経験ですごく思った。

 

以上。

 

≪≪≪≪≪≪≪≪≪≪≪≪≪≪≪≪≪≪≪追記≫≫≫≫≫≫≫≫≫≫≫≫≫≫≫≫≫≫≫

後日、GUI Skinをまたいじくり、

こんな感じになりました。

f:id:shivaT:20130622171002p:plain

「?」のボタンをタッチすることで、

チュートリアル」に移行するか、「タイトル」に戻るかを分岐するように、

以下のようにしました。

f:id:shivaT:20130622171409p:plain

あとは、

タッチしたとき、

「Yes」と「No」の文字の色を赤くするようにして、

どちらをタッチしたかを分かりやすく表示しました。

で、

JavaScriptはこれ。

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

#pragma strict

private var sw : float = Screen.width;
private var sh : float = Screen.height;

//チュートリアルのボタン
var skin : GUISkin;
var btnTexture : Texture2D;//チュートリアルボタン
private var flag : boolean = false;//trueでダイアログを表示

function OnGUI(){

    //Button表示
    GUI.skin=skin;
    if(GUI.Button(Rect(0, sh - sw / 10, sw / 10, sw / 10), btnTexture, "button")){
        flag = true;
    }
    //画面全体をボタンとしている(Touch Screenために設定)
    if(flag == false){
        if(GUI.Button(Rect(0, 0, sw, sh), "", "textfield")){
            Application.LoadLevel("Main");
        }
    }else{
        GUI.Label(Rect(sw / 4, sh / 3, sw / 2, sh / 3), "Tutorial?", "window");
        if(GUI.Button(Rect(sw / 4 + 20, sh / 2, sw / 10, sh / 10), "Yes", "textarea")){
            Application.LoadLevel("Tutorial");
        }
        if(GUI.Button(Rect(

(sw / 4) + (sw / 2) - (sw / 10) - 20,sh / 2, sw / 10, sh / 10),"No", "textarea")){
            flag = false;       
        }
    }
}

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

 

うん。

GUI Skinの"button","textfield","window","textarea"を、

ふんだんに無駄遣いして使用してみた。

これをいかに、まとめるかで、処理スピードも変化してくるから、

考えなくては...。

あとは、

どんな端末にも対応出来るように、

var sw : float = Screen.width;
var sh : float = Screen.height;

を使用して、幅や長さの計算を頑張らないと...。

 

まぁ、これで追記終了。