
今回は、その実装方法について備忘メモ。
この話では、NGUIを使っています。
NGUIについては、過去の記事を参照ください↓
[Unity] NGUIでSprite画像を使って複数のマークを表示してみた
[Unity] NGUIの画像SpriteでDrawCallに効果が出るか試してみた
[Unity] NGUIで画像切替え表示を試してみた
実装方法としては、手前から、
・ヒント画像
・半透明の黒画像
・ゲーム画面
となっています。
(1)ヒント画像を用意する
ヒント画像だけを集めたAtlasを用意しました↓

アルファチャンネルも設定してます↓

(2)Sprite画像として登録する
[Unity] NGUIで画像切替え表示を試してみた に詳しい手順を記載していますが、
各ヒントをSpite画像として登録しておきます↓

ヒント画像の準備は以上です。
次に、半透明の黒画像を用意します。
(3)半透明の黒画像を用意する
もともと「Fantasy Atlas」を使っているので、半透明用に「3x3」サイズのアルファマスク(不透明度は40%くらい)を追加します↓

あとは、先ほどと同じようにして、独自にSprite画像を「Fantasy Atlas」に追加します。
このときに注意することは、なぜ「1x1」じゃなくて「3x3」にしたのかです。
理由は、「1x1のアルファマスクを使った場合、四方がグラデーションしてしまった為」でした。
なので、スクリーンショットにあるとおり、「3x3」のマスクを用意して、その中央の「1x1」の分だけをSprite画像として採用することにしました↓

(4)半透明の黒画像を画面いっぱいに表示する
これは、「1x1」のSprite画像を画面いっぱいに拡大するだけでOK↓
--------------------------------------------------(5)depthとz座標を設定する
// 半透明の黒画像
var hdbObj : GameObject = GameObject.Find("HalfDarkBG");
hdbObj.transform.localScale = Vector3(Screen.width, Screen.height, 1);
--------------------------------------------------
画像を重ねる前に、各画像のdepthとz座標を設定します。
これをしないと、手前に表示されるべきヒント画像が奥に表示されてしまったりします。
↓半透明の黒画像用

他のNGUIの要素を「z=0」に表示しているので、手前にくるように「z=-1」にしました。
「depth=9」にしているのは、後述のヒント画像のときに説明します。
↓ヒント画像

半透明の黒画像よりも手前に表示したいので「z=-2」にしました。
「depth=10」にしているのは、NGUIではdepthの値が大きいほどに優先して表示されるためです。
これで画像の準備が完了しました。
各ステージのヒント画像の切替えについては、
[Unity] NGUIで画像切替え表示を試してみた
で掲載したSprite画像を切替える方法を使っています。
---------------------------------------------Hierarchyウィンドウの並びを見てみます。
hintObj : GameObject = GameObject.Find("Hint1");
spriteHint : UISprite = hintObj.GetComponent(UISprite);
spriteHint.spriteName = [各Sprite名];
---------------------------------------------

赤い枠で囲まれてあるNGUIの要素は、上記のプログラムで記述されてあるGameObject名と対応しています。
↓もともとのゲーム画面

↓半透明の黒画像を重ねた画面

↓ヒント画像を手前に重ねて完成した画面

無事、ヒント機能を実装できてよかった……。
もうすぐUnity4がリリースされますが、GUIまわりがどのように変わるのかが非常に気になります。
そしてNGUIは対応するのかが一番気がかりです。
対応しなかったら、色々と大幅な作り直しが!
どうかUnity4でもちゃんと動きますように。