友愛その４。

続きます。

　１．シーンに実体を残さない PPG にします
　２．パラメータの値に変化があったらアクションを起こすようにします
　３．パラメータ をワクで囲みます
　４．パラメータを横並びにします
　５．パラメータの表示形式を、ドロップダウンメニューにします
　６．ボタン の大きさを変えます

前回で２まで終わりました。３以降行きましょう。



パラメータをワクで囲みます。ジャンルごとにワクで囲ったりすると、見た目がすっきりして良いです。　このワクのことを PPGLayout 的には Group と呼ぶようです。

PPGLayout.AddItem の呪文を唱える部分を、以下のように AddGroup と EndGroup で囲みます。

//    さっき作ったPPGLayout に、すでに作成してあるパラメータを登場させる
//    AddItem メソッドで、作成済みのパラメータ名、UI に登場させる時の名前を指定。
//    AddGroup と EndGroup で囲うことによって、ワクが描かれる
oLayout.AddGroup ( "ぬるん" );
　　oLayout.AddItem ( "Icon", "愛根" );
　　oLayout.AddItem ( "Size",  "砕図" );
oLayout.EndGroup ( );


すると、こんな風になります。

愛根と砕図のパラメータのまわりに、「ぬるん」　というラベルのついたワクが描かれました。　このワクが Group です。AddGroup の呪文によって召還します。その後は EndGroup の呪文を唱えてワクの終了を明示してあげないとダメです。

ちなみに２行目と３行目、つまり囲われた部分は行頭に空白を入れてありますが、別に必須ではありません。 AddGroup と EndGroup の影響範囲が視覚的にわかりやすいかな、と思ってやっているだけです。



次にこのように書くと、

oLayout.AddGroup ( "ぬるん" );
　　oLayout.AddItem ( "Icon", "愛根" );
oLayout.EndGroup ( );

oLayout.AddGroup ( "ぬるる～ん" );
　　oLayout.AddItem ( "Size",  "砕図" );
oLayout.EndGroup ( );


当然このようになります。

ボタンまで含めてももちろん桶です。

oLayout.AddGroup ( "ぬ　ら　り　ひ　ょ　ー　ん　(ﾟ∀ﾟ)" );
　　oLayout.AddItem ( "Icon", "愛根" );
　　oLayout.AddItem ( "Size",  "砕図" );
　　oLayout.AddButton ( "Set",  "切吐" );
oLayout.EndGroup ( );

次。横並び行きます。　現在は愛根と砕図それぞれが１行を占有しています。　この２つを１行の中に詰め込みます。

oLayout.AddGroup ( "ぬらぬらりん" );
　　oLayout.AddRow ( );
　　　　oLayout.AddItem ( "Icon", "愛根" );
　　　　oLayout.AddItem ( "Size",  "砕図" );
　　oLayout.EndRow ( );
oLayout.EndGroup ( );

また新しい呪文が出てきました。 AddRow と EndRow です。 Row ってのは　「行」　のことですね。　AddRow と EndRow に囲まれた部分は、「１行」になるわけです。


こうなります。

AddGroup とは違い、AddRow も EndRow もカッコの中で指定できるオプションはありません。　この呪文は囲んだ部分を１行に押し込めろと言っているだけなので、オプションもクソもありません。



もちろん３つでも４つでも押し込められます。

oLayout.AddGroup ( "ぬらぬらりん" );
　　oLayout.AddRow ( );
  　　　oLayout.AddItem ( "Icon", "愛根" );
　　　　oLayout.AddItem ( "Size",  "砕図" );
　　　　oLayout.AddButton ( "Set",  "切吐" );
　　oLayout.EndRow ( );
oLayout.EndGroup ( );

このように AddButton の呪文も Row の包囲網に入れてしまえば、

このように１行に３つ並びます。



しかし、よく見てみると、愛根と砕図のスライダが消えて、手打ちフィールドしかない状態になっています。　これは、ウインドウのサイズに対していっぱいいっぱいで、スライダを入れる余裕がないからです。こういうとき、XSI 様は勝手にスライダを省略します。

ウインドウをヨコに広げてやれば、スライダは復活します。

でも、ヨコに広げないとスライダが出てこないのも嫌ですよね。デフォルトのウインドウの広さのままスライダも入れたい場合は、ひとつのパラメータが占有する面積を制限してやったり、ラベル（パラメータの表示上の名前）を短くしたり、ラベルを表示オフにしたり、ラベルが表示されるために最低限必要な面積をデフォルトよりも小さくしてあげたり、色んな工夫が必要です。この工夫こそが UI 作りの肝であり、見易いかどうか、使い易いかどうかを決定付けることになります。たぶん。逆にスライダは要らねえ俺は手打ちだけがいいんだｺﾞﾙｧという場合も多いですね。

この辺の制御はいずれまとめて説明することになるでしょう。いずれまとめて説明しないことになるかも知れません。　わかりません。

もういっちょ例を挙げます。

AddGroup と AddRow の順番を入れ替えて、１行の中に複数の Group を入れることも、もちろんできます。

oLayout.AddRow ( );
　　oLayout.AddGroup ( "スキスキダーリン" );
　　　　oLayout.AddItem ( "Icon", "愛根" );
　　　　oLayout.AddItem ( "Size",  "砕図" );
　　oLayout.EndGroup ( );

　　oLayout.AddGroup ( "頭はピッコピコよ" );
　　　　oLayout.AddButton ( "Set",  "切吐" );
　　oLayout.EndGroup ( );
oLayout.EndRow ( );
 
一番外側に、AddRow と EndRow の呪文があります。つまりその範囲内は全て１行に押し込められます。　そしてその範囲内には、２つの AddGroup - EndGroup のセットがあります。

こうなります。

Group が２つ、横並びになりました。



今度は、AddGroup で指定するラベル（Gorup の名前）を "" という風にクォーテーション２連発＝つまり中身の文字列が無い　という状態にしてみます。

oLayout.AddRow ( );
　　oLayout.AddGroup ( "" );
　　　　oLayout.AddItem ( "Icon", "愛根" );
　　　　oLayout.AddItem ( "Size",  "砕図" );
　　oLayout.EndGroup ( );
      
　　oLayout.AddGroup ( "" );
　　　　oLayout.AddButton ( "Set",  "切吐" );
　　oLayout.EndGroup ( );
oLayout.EndRow ( );

こうなります。

ワクのみが出現し、名前の無い Group になりました。



次は、AddGroup のカッコの中で、false というオプションを入れてみます。

oLayout.AddRow ( );
　　oLayout.AddGroup ( "",false );
　　　　oLayout.AddItem ( "Icon", "愛根" );
　　　　oLayout.AddItem ( "Size",  "砕図" );
　　oLayout.EndGroup ( );
      
　　oLayout.AddGroup ( "",false );
　　　　oLayout.AddButton ( "Set",  "切吐" );
　　oLayout.EndGroup ( );
oLayout.EndRow ( );


すると、

このように、ワクも無くなりました。

AddGroup のオプションの１つめは Group の名前ですが、２つめのオプションは　「ワクを描くか描かないか」　です。　何も指定しなければデフォルトの true が適用されて、ワクが描かれます。 false を指定してやると、ワクを描きません。

ただし、AddGroup ( "ぬぬぬぬるん" , false ) のように、「 Group のラベルは指定しているけど、ワクは描かないでね」　という指定はできません。　できませんと言うより、false が無視されます。　ラベルを指定した時点で必ずワクは描かれてしまいます。　ワク無しにしたければ、ラベルも無しにしなければいけないということです。　仕様ですねこれは。



今度は、AddGroup の３つめのオプションを指定してやります。

oLayout.AddRow ( );
　　oLayout.AddGroup ( "どうしてダーリン　あなたを" , true, 70);
　　　　oLayout.AddItem ( "Icon", "愛根" );
　　　　oLayout.AddItem ( "Size",  "砕図" );
　　oLayout.EndGroup ( );
      
　　oLayout.AddGroup ( "信じてたのに", true, 30 );
　　　　oLayout.AddButton ( "Set",  "切吐" );
　　oLayout.EndGroup ( );
oLayout.EndRow ( );

それぞれの Group で 70 と 30 を指定しています。

こうなります。

３つめのオプションは、その Group がウインドウの横幅のうち何％を占めるかという指定です。　この場合、最初の Group は 70% 使え、２つ目の Group は 30% 使えと指定しているので、左側の Group の方がより広く、右側の Gorup は狭くなっているのがわかると思います。

この辺は、AddGroup のヘルプを見れば全部載ってます。



このように、色んなオプションを駆使して望みの UI を作っていくのであります。これこそがスクリプト書きの楽しみです。　メインルーチンなんてどうでもいいです。

それではごきげんよう。

あれっ　また最後まで行けなかったよ？

ごきげんよう。

.