バーチャル3Dクリエイターの神部まゆみです(*^-^*)
今日はUnityでuGUI？とかいう機能を使って、画面にテキストを表示するよ。
あのギャルゲーみたいな、下に半透明のウィンドウが出たりしてテキストが表示されるやつ。
今えっちな動画を作ってるんだけど(///)、音声素材が乏しいから動画の冒頭部分とかで使っていきたいと思って。
モンハンみたいに、ちょっとだけ喋ってテキスト表示…とかやればそれっぽく見えそうだし。
ちなみにまだやり方知らないから、調べつつ探り探り書くよ(￣▽￣;)
まぁかえってその方が躓きやすいポイントが分かると思うから、同じところを調べてる人は参考にしてね。
理想はこんな感じで表示したい！GIMPで理想形を作る
理想のイメージとしてはこんな感じで…(笑)
これはunityの画面をスクショで撮って、GIMPでレイヤー重ねて編集して作ったやつね。
果たして揉むだけでいいんですかねぇ…( *´艸｀)
ちなみにGIMPのテキスト機能も初めて使った(笑)。
用途としては動画撮りたいだけなんだけど、キー入力を受け付けて次のテキストも表示できたらいいな。
ウィンドウやフォントはunityでいい感じに調整できるのかわからないけど、ある程度の見栄えにできればいいかな。
uGUIとやらを使えばできるみたい
検索したらuは小文字で使ってる人が多いみたい？なんか命名規則みたいなのがあるのかな。
uGUIっていうのはUnity Graphical User Interfaceの略？こちらの頭のいい先輩のページに書いてあった。
この先輩のページを参考にしてやっていくよ。
uGUIを使うには、Canvasとやらを追加する必要があるみたい
私は日本語化してるから表示が変わってるけど、ヒエラルキーで右クリック → UI → キャンバスグループ を選択すればいいみたい。
……あれ、キャンバス作成はできたみたいだけど無いなぁと思って探したら、サイズがすごく大きいみたい。
↓の赤い線を引いた横の白いラインのやつ。でかすぎ(笑)。
先輩のページによると、この四角は解像度と連動していて、見るデバイスによってサイズが変わってくるみたい？
移動させようと思ってもできないみたい。
でも「Target Display」とかいうメニューがあるから、ここに表示させるようにしておけば、ゲーム画面で表示してくれるってことかな？
とりあえず細かい部分は無視して、画像を表示させてみる
ヒエラルキーメニューで、作成したキャンバスの上で右クリック → UI → 画像 をクリック。
そうしたらCanvasの子に「image」とかいうのが作成されて、なんか画像っぽいのが出現！
先輩によると、uGUIはキャンバスの子になっていないと表示されないみたい。
Imageにスプライト画像を指定すれば、画像を表示できるみたい
Imageのインスペクターを見てみると、 ソース画像「なし(スプライト)」 とか書いてあるから、ここで画像を指定すれば表示できると思う。
スプライトってなんだ？と思ったけど、画像をスプライトにすることで、多分ゲーム画面で動かしたり物理挙動させたりできるようになる感じかな？
unityのプロジェクトウィンドウに画像を入れて、画像のインスペクターでテクスチャタイプを「スプライト(2DとUI)」に変えれば、スプライトにできるみたい。
Imageのソース画像でスプライトにした画像を指定したら、キャンバスに表示できた！
Rect Transformの幅と高さを変えてサイズを変える
Imageオブジェクトのインスペクターの、Rect Transformの幅と高さを変えれば、サイズを変えられるみたい。
幅1600高さ900にしたら大きくなった！
あれ、でも文字おかしい？
これミラー反転されてる？
あ、そうじゃない、私が反対側から見てるのか！Imageを180度回転させるか、反対側から見ればいいかな。
とりあえずは反対側から見ることにした。
裏が真っ黒だったら嫌だなぁと思ったけど、裏からも見れるみたい。
というかどっちが裏側？建物のアセットの向きに合わせてやってたけど、まぁ180度変えればいいだけだからそこまで不具合は出ないかな？
この時点でゲーム実行してみたら、ちゃんとDisplay1の画面に反映された！
ちょっとでかすぎくんだけど(￣▽￣;)
サイズを半分くらいにすれば分かりやすいかな。
画像編集ソフトで合成しただけっぽく見えるけど、ちゃんとunityの機能で表示させてるんだからね！か、勘違いしないでよね(///)。
白いキャンバス内に配置すれば、ゲーム画面に合成してくれるっぽい
この白いキャンバスに配置した画像とかテキストを、ゲーム画面に合成して表示してくれるみたい。
画像をちょっと上に移動(Y軸を増加)させれば…
ゲーム画面でもちょっと上に表示される感じ。
え、じゃあZ軸をいじって手前にもってきたらアップになったり、後ろにもっていけば小さくなったりするのかな？
あんまり変わらないっぽい？二次元(平面)だから意味ないかな。大きさ変えたいならサイズをいじったほうがいいね。
とりあえずこれでウィンドウは表示できそうかな？上手く透過できるかはわからないけど…。
シンプルなやつなら図形で表示してもいいかも。
今度はテキストを表示してみる
じゃあ今度はテキストを表示させてみるよ。
ヒエラルキーのキャンバスの上で右クリック → UI → テキスト でOK。
そうしたらテキストが表示された！
インスペクターをいじれば表示テキストを変えたり、サイズを変えたりできるみたい。
この状態でゲーム画面を実行すると、ちゃんと文字が表示された！
ここまでで、「ウィンドウの画像の上にテキストを表示する」まではできるかな？
理想のイメージ画像のウィンドウ部分のレイヤーだけ抽出した画像がこれ↓
透過PNGだけど、ちゃんと透明度も反映されるのかな？
シェーダーとか透過設定する部分がなかったけど…。
お、いけた！ちゃんと透過されてるみたい。
これで実行すれば…いけた！
でもテキストがウィンドウの下に表示されちゃってるみたい(￣▽￣;)
テキストは白なんだけど、ウィンドウのピンクが入っちゃってるね。
テキストをウィンドウの上に表示するにはどうしたら？
これもしかしたら、上でやったZ軸をいじって画面手前に表示するやつをやればいいとか？
ちょっとやってみよう。
んーだめっぽい。ちょっとテキストを浮かしたけど、後ろにウィンドウが映る部分はピンクになっちゃう。
テキストにマテリアルを設定するとか？ ※ダメだった
じゃない？マテリアルにはシェーダーも設定しないといけないから、そこでTransparentとか使わなければいけるのでは…。
やってみたけどダメだった。
というかテクスチャが設定されてるマテリアル？じゃないとまともに動作しなかった。
テクスチャが設定されてあるやつもピンクっぽくなったからダメっぽい。
Textオブジェクトをwindowオブジェクトの子にしたらいけた！
子のほうが手前に表示される扱いになるとか？理由はわからないけどできた。
これでゲーム画面で見てみると…いい感じ。
ただ、ちょっとGIMPでの表示とウィンドウの濃さが違う気がするけど。
GIMPだと乗算でウィンドウのレイヤーを重ねたんだっけな？unityだとそういうのないのかな？
まぁ元の画像の色を濃くすればいいだけだし、とりあえずそういう細かい部分は後でいっか。
とりあえず今回はここまで。次回はボタンを配置して、押したら次のテキストを表示…あたりまでやりたい
ボタンはキャンバス上に配置すればいけるみたいだけど、クリック検知すればいいかな。
それよりも、押した後にテキストを書き換える…っていう基本的な部分すら、今の私はやり方がわからないからね(￣▽￣;)
多分 Canvas1.Text=(“aaa”); みたいな感じで簡単にできるんだろうけどね。
調べればすぐ出てきそうだから、まぁやってみるよ。
参考にした頭のいい先輩のページ
とても参考になりました。
ありがとうございます(*^-^*)
