MeltingDots Supporters

HUDを作ろう


2014/05/24

Suppot Center Workshop


HUDコントロールの高機能フェイスラストを作ります。まずフェイスライトを作って位置決めをしたあと、HUDを作って光を調節します。HUDは光の色・輝度・範囲・減衰が設定でき、3つまでその設定を記憶させることができます。




1. HUD について

  1. HUD というのは、Head Up Display の略で、ユーザーのPC画面に貼りついて、情報を表示したり操作のインターフェイスとして使われます。Second Life では、AOの設定や乗り物などの操作盤、あるいは書籍などに利用されています。

  2. HUDはオブジェクトとして作って、髪や靴などと同様にアバタに装着しますが、HUD専用の装着位置が決まっています。画面の四隅と中央上下、そして中央にふたつです。同じ位置に重ねて装着することもできます。
    HUD はどこに装着しても動作します。複数のHUDを使うときは、装着位置がかぶっても、表示が重ならないようにしましょう。

  3. HUD はオブジェクトですが、見えるのはひとつの面だけです。右クリックで移動・回転できます。編集可能であれば拡大縮小もできます。
    HUDが画面からはみだしてしまったときには、キットの中の HUD CENTER を装着して右クリックし、マウスホイールを手前に転がすと、画面の外側が見えてきますので、はみ出しているHUDオブジェクトをつまんで枠線の中に移動させましょう。移動させたあと、マウスホイールを反対側に転がしてフレームサイズを元に戻しておくのを忘れないように。



2. 光 について

  1. Second Life は Open GL の仕様上、光源は8個までしか表示されませんでした。太陽と月でひとつずつ使っていますので、残りは6つしかありません。ローカルライトは、光の強い順に6つ表示されるようになっています。

  2. この 8光源下では、地面からの照り返しなど、環境光がないので顔が暗くなります。また、SL アバタメッシュの仕様上、鼻の下に醜い影ができてしまいます。特に女性アバタを美しく見せるため、影を消すと共に顔を明るく照らすのがフェイスライトです。

  3. ライティングは難しいです。1灯では影ができてしまうので、たくさんほしいところですが、ほかの光源への影響を考えると3灯が限度のような気がします。本ワークショップでは、さらに工作・調整の便を考慮して2灯で作ります。

  4. 「ミー」−「環境設定」から「グラフィック」タブを開き、Advanced 画面で Local Lights にチェックが入っていない場合、フェイスライト等の効果は反映されません。グラフィックが「低」設定のかたは、自分で光の状態が確認できないので、ご注意ください。

  5. Advanced Lighting Model にチェックが入っているかたは、さらに多くの光源が反映されますが、Advanced でないまわりの人のことも考慮しましょう

  6. ときどき、顔が真っ白のかたを見かけますが、たぶん低スペックで自分のフェイスライトの効果が見えていないのだと思われます。低スペックのかたは、フェイスライトを装着するのはやめましょう。

  7. フェイスライトの効果は、WindLight の設定によっても変わってきます。

  8. 光源には、色、明るさ、光の届く範囲、減衰の程度を設定できます。

  9. [CTRL] + [ALT] + Q を押して開発メニューを表示させます。「メタデータのレンダー」−「光」を選択すると、光がどこまで届いているか、ワイヤーフレームで表示されます。大きな箱が装着されているかたは、迷惑なのでなるべく小さくしましょう。



3. 制作キット

  • キットに入っているものを確認しましょう。

    •Face Light(フェイスライト用スクリプトです)
    •Face Light HUD(HUD用スクリプトです)
    •Face Light Texture(HUD 用テクスチャです。5面分をひとつにまとめてあります)
    •Instructions(HUD の仕様です)
    •HUD CENTER(はみだした HUD の位置移動用です)



4. フェイスライトを作る

  1. 画面上の「制作」から、「制作」を選択すると、制作のダイアログが開きます。
    ダイアログの上部、右からふたつめのアイコンが「新規作成」です。このアイコンをクリックしてから床をクリックすると、50cm 角の立方体が出現します。


  2. キューブを右クリックして「編集」ダイアログを開き、サイズを X=0.05, Y=0.05, Z=0.05 に書換えて、「球体」に変更します。


  3. 球を選択した状態で SHIFT キーを押しながら、赤い矢印を横にドラッグします。40cm 程度はなれたところでマウスボタンを離します。コピーが作成されました。


  4. 片方を選択したあと、SHIFT キーを押しながら他方をクリックすると、両方が選択状態になります。この状態で「リンク」を押します。


  5. 材質タブを開いて「テクスチャ」をクリックします。テクスチャの選択画面が現れるので、「ブランク」を押します。木のテクスチャがなくなって、白くなります。


  6. 一般タブで、名前をつけましょう。


  7. 右クリックから「取る」を選択すると、インベントリの中に入ります。




5. フェイスライト位置の仮調整

  1. 作ったフェイスライトは、インベントリの最新タブのいちばん上にあります。右クリックして、「装着先」を指定します。Mouse, Nose, Chin のどれかにしておきましょう。


  2. 顔の近くにボールが2個現れます。右クリックで編集モードにして、顔の前、両側にくるよう移動/回転します。


  3. どちらかのボールを編集モードにします。キットの中の Face Light というスクリプトを「中身」タブにドラッグします。どちらのボールに入れてもいいです。


  4. 次の制作の邪魔になるので、いったん取り外しておきましょう。




6. HUD の制作

  1. 新たにキューブを出して、サイズを X=0.8, Y=0.2, Z=0.5 にします。


  2. 手前に別のキューブを出して、サイズを X=0.2, Y=0.2, Z=0.5 として、形状を「シリンダー」にします。


  3. シリンダーのコピーを3つ作って、直方体の手前に隙間なく並べます。位置の座標を直接書換えると、正確に位置が合せられます。


  4. SHIFT キーを押しながら、順番にクリックして、5つの部品をリンクします。クリックする順番は、右下から左下、最後に直方体です。間違えるとスクリプトの動作がおかしくなるので、ご注意ください。


  5. キットの中のFL HUD Texture を、それぞれのパーツの上面にドラッグします。


  6. 直方体のテクスチャをあわせます。「面を選択」をクリックしてから、直方体の上面をクリックします。材質タブの、垂直スケール=0.5, 垂直オフセット=0.25 にします。FaceLight という文字だけが貼られます。


  7. シリンダーのテクスチャをあわせます。「面を選択」になっていることを確認してから、左端シリンダーの上面をクリックし、水平スケール=0.25, 垂直スケール=0.5, 水平オフセット=0.625 に垂直オフセット=0.75 にします。× になります。


  8. 左から2番めのシリンダー上面をクリックし、水平スケール=0.25, 垂直スケール=0.5, 水平オフセット=0.875 に垂直オフセット=0.75 にします。１ になります。


  9. 次のシリンダー上面をクリックし、水平スケール=0.25, 垂直スケール=0.5, 水平オフセット=0.125 に垂直オフセット=0.75 にします。２ になります。


  10. 右端りシリンダー上面をクリックし、水平スケール=0.25, 垂直スケール=0.5, 水平オフセット=0.375 に垂直オフセット=0.75 にします。３ になります。


  11. 「面を選択」を解除して、一般タブを開け、名前をつけます。


  12. 右クリックから「取る」を選択して、インベントリに取ります。



7. HUD の位置あわせ

  1. インベントリ中のHUDを右クリックして、「HUD装着先」から、装着先を選びます。すでに装着している AO やレーダーなどとぶつからないような場所を選ぶとよいですが、同じ場所に重ねて装着することもできます。


  2. 画面に変なものが現れます。何も見えないときは、キットの中の HUD CENTER を装着して、中央の赤い四角を右クリックしてマウスホイールで縮小してみると端から現われます。


  3. 編集モードにして、文字が読めるような位置に回転します。


  4. 大きすぎるので、「引き伸ばす」をクリックすると現れる四角いハンドルをドラッグして小さくし、邪魔にならない位置まで移動します。


    このくらいのサイズがいいでしょう。


  5. 上部の直方体がルートプリムになっています。ここに、キットの中から Face Light HUD というスクリプトをドラッグします。




8. 光の調整

  1. Face Light と Face Light HUD の両方を装着します。

  2. HUDの上半分 FaceLightと書かれているところをクリックするとメニューが出ます。

  3. トップメニューの「非表示」をクリックすると、フェイスライトが見えなくなります。

  4. 光の調整は、「世界」−「太陽」を「真夜中」にするとわかりやすいです。

  5. HUDの使い方は Instructions に書かれています。色・輝度・範囲・減衰が変更できます。気にいったところで、トップメニューの「１に保存」をクリックすると、その設定が「１」に記憶され、「１」ボタンをクリックすると呼び出せます。「２」と「３」も同様です。とりあえず１, ２, ３ には標準的な同じ値をセットしてあります。

  6. 位置あわせをやり直したいときは、「表示」クリックで見えるようになります。

  7. メニューは30秒放置すると無効になるので、そのときはまた HUD をクリックしてメニューを出してください。

  8. 照らしたときに鼻の脇にかげができないよう、また顔が明るく見える位置にライトを移動します。あんまり下からだと怖くなります。上下に動かしたり左右の間隔を変えたりして、最適の位置をさがしてください。

  9. 大気シェーダーやWindLightの設定によって効果が変わりますので、違う設定を記憶できるようにしています。

  10. 光の強さは見たとおりですが、光の範囲にも注意してください。[CTRL] + [ALT] + Q を押して開発メニューを表示させます。 「メタデータのレンダー」−「光」を選択すると、光がどこまで届いているか、ワイヤーフレームで表示されます。顔を照らしつつ箱が最小になるようにしましょう。光の範囲は 10ｍまで設定できますが、広すぎるのは迷惑です。「メタデータのレンダー」−「光」をもういちど選択すると、ワイヤーフレームは消えます。




HUD スクリプトの仕様

  • HUD は4つの部分に分かれています。
    FaceLight という文字をクリックすると、メニューが開きます。
    トップメニューのボタンをクリックすると、サブメニューが開きます。

  • 色 :
    設定できるのは、次の9色です。

    赤, 橙, 黄, 緑, 青, 藍, 紫, 桃, 白

    日常使う場合は白にしておきましょう。

  • 輝度 :
    10% 単位で設定できます。0% で光なし。100% で最大です。

  • 範囲 :
    10cm単位で設定できます。
    光源から顔まで届けばよいです。10ｍまで設定できますが、長すぎるのは迷惑です。
    50cm程度で十分だと思います。

  • 減衰 :
    0.0 〜 2.0 の範囲で 0.1単位で設定できます。
    距離による光の減衰の程度をコントロールします。

  • 保存 :
    現在の設定を保存します。１と２と３の３つ記憶できます。

  • 表示/非表示:
    フェイスラスト自身を表示するか隠すかを設定します。
    ライトの位置を変更するときに表示させましょう。

  • HUD の下は X, 1, 2, 3 という4つの文字が並んでいます。

    X : 　フェイスライトを消します。
    1 : 　1 に登録された設定で照らします。
    2 : 　2 に登録された設定で照らします。
    3 : 　3 に登録された設定で照らします。

    登録された設定値は消去できませんが、新たに設定を記録すると上書きされます。


*

このスクリプトはフルパーミッションで配布しています。
改変・譲渡は可能ですが、有償での転売、有料商品への組込みは禁止します。




今回使ったキットは、MeltingDots のサンドボックスに置いておきます。

http://slurl.com/secondlife/MeltingDots/5/3/21