モノクロタイム

I'm from the future!

Unityでメニューバーを実装してみる(そのいち)

 

f:id:yomoyamareiji:20120710204109p:plain

こんにちは。れいじです。

 

UnityWorkShopをきっかけに、やたらとUnityに触れる機会が多いので

なんだかUnityに詳しくなってきてます。

 

まぁ、忘れない為の自分用メモってことで!

たいしたコードも書いてないし、見た目の問題ですしね

 

今回はUnityでスクロールするバーを簡単にですが実装してみましたよ

 

こんなん

 

f:id:yomoyamareiji:20120710210425p:plain

 

ここが

 

f:id:yomoyamareiji:20120710210447p:plain

 

こんなんなっちゃうやつね

 

あ、今回画像頑張ってるでしょ。がんばったんですよ(えっ

 

 

元々はフリックでスクロールするメニューを作りたかったのですが、

Unityで実装するのはちょいと難しそうです。

とりあえず今日はスクロールするメニューを表示させて

あたかもそれっぽく見せるまで。

 

 

JSでもそもそ書いていくのがいいのでしょうけど、

GUIをいじってポンポン作っていったほうが見た目もいいので…

 

まず使うのは

GUI.BeginScrollView 

スクロールバーで自由に動かすことのできるビューを作ります

このGUI.BeginScrollView の中身ですが、

 

GUI.BeginScrollView (

Rect ( x座標,

     y座標,

           表示される幅,

     表示される高さ),

scrollViewVector,

Rect (x軸方向表示開始地点座標,

          y軸方向表示開始地点座標,

          テーブル全体の幅,

    テーブル全体の高さ)

);

 

となります。

このとき、テーブル全体の幅(高さ)を表示される幅(高さ)の値より小さくするとその部分のスクロールバーを消すことができます。

動作に支障はありませんのでご安心を。

Rectは長方形領域を表し、構造体の中身を変えて作っていきます

 

実際の使い方はこんな感じ

 

 

var scrollViewVector : Vector2 = Vector2.zero;

function OnGUI () {

// Begin the ScrollView

scrollViewVector = GUI.BeginScrollView(Rect(10, 10, 220,400) , scrollViewVector, Rect (0, 0, 100, 400));

 

// inside the ScrollView

GUI.Box (Rect (10, 10, 200, 20), "Please select");

// Button

GUI.Button (Rect (10,40,180,100), "abc");

GUI.Button (Rect (10,140,180,100), "def");

GUI.Button (Rect (10,240,180,100), "ghi");

GUI.Button (Rect (10,340,180,100), "jkl");

  ・

  ・

// End the ScrollView

GUI.EndScrollView();

}

 

因みにGUI.Buttonの構造は

GUI.Button(

Rect(x軸,

          y軸,

          ボタンの幅,

          ボタンの高さ)

)

になります

このとき、ScrollViewの中身となるので、

GUI.Buttonの中のRect構造体の中身の数値は、ゲーム画面全体の座標としてではなく

ScrollViewのテーブル中の座標をとります。

 

これでメニューバーが簡単に実装できます。

ボタンとボタンの感覚が無いほうがメニューバーっぽくて良いですね

 

*図中では日本語表示ができていますが、MonoDevelopでは日本語の文字化け(Macのみ)や日本語の入力ができない?(Macのみ?要検証)などの不具合がありますが、.jsファイルをMonoDevelopではなく日本語入力に対応した別のエディタで編集すれば反映されます。また、端末にてデバッグをする時、日本語が表示されないなどの不具合が生じます。日本語を表示させるにはまた色々やらなきゃならないみたいなのですが、そこはまた後日…

 

画像のソースコードはこんな感じ

 

f:id:yomoyamareiji:20120710220118p:plain

 

需要ねぇよ…

説明するところとしては、

どんな画面の大きさでもメニューバーの位置がずれないようにScreen関数で画面の大きさを拾ってきて数値として使ってます

端末でデバッグする時、縦向きでも横向きでもちゃんと動きます

 

フリックスクロールができるメニュー目指して調べないとな〜