開発メモ 「GUI(GUI Skin),プログラムの優先順位」
GUI Skinについて、
少しは理解できて来たので、メモ。
今まで、
GUI Skinは便利な機能と知っていたけれど、
1つも分かってなく、使用していなかった。悔しかったので、
色々試していたら、初歩的なことだが分かってきた。
今回は、
Google Playにシューティングゲームを出す前にやりたいことがあった。
それは、
タイトル画面から、チュートリアル画面へ移行できるようにしたい。
(今までは、初期起動時のみ表示するようにしていた)
ただそれだけ。
結局は、
GUI Skinの練習みたいなものです。
で、
結果的に、どんな感じかというと、以下のようになりました。
一様、ボタンです。
今まで、何に悩んでボタンを付けなかったのかというと、
「タッチ」と「ボタン」の共存の仕方が分からなかったからです。
じゃあ、
どっちもボタンにしようと考えました。
画面全体に、大きなボタン(タッチの代わり)
上の画像の、小さなボタン(普通の大きさのボタン)
を設定。
で、初めは、こんな感じで作りました。
[GUI Skinの設定]
***************************************************************************
#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をまたいじくり、
こんな感じになりました。
「?」のボタンをタッチすることで、
「チュートリアル」に移行するか、「タイトル」に戻るかを分岐するように、
以下のようにしました。
あとは、
タッチしたとき、
「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;
を使用して、幅や長さの計算を頑張らないと...。
まぁ、これで追記終了。