Unityでふきだしセリフ的なのを実装してみた

こんにちは🍎

まず初めに…🐄
エディタ上で編集できる用ようにpublicでAnimationCurveを設定した際に未設定時がnullにならないらしく、nullじゃない未設定時の時にMotion_Move等のMotion系の処理が不具合起こしてたっぽいので修正しました。

設定されていない状態を確認するには

if(_curve != null && _curve.length >= 2)

みたいに設定した要素数まで見ないとダメっぽいのでうっかりしてました。
これしないと致命的に動かないわけじゃないので、今回のファイルから上記の修正してますがこういうのはちゃんと気を付けないとですね🐡

--以下から本題--

前回セリフウィンドウを作ってみたので、勉強がてらついでに似たような感じのキャラの頭にふきだしが出るセリフ表示の機能を作ってみました。（以降「ふきだし」と記述します。

ふきだしのウィンドウ表示とテキストの表示は前回とほぼ同じことやってますが、今回はそれにプラスして常にキャラの頭上に表示しないといけないので自動でキャラの座標に追尾するようにしています。

今回使用してるScript一覧です。（※一部省略）
BaseSystem/UI_SerifBalloon.cs　（ふきだし管理用）
BaseSystem/UI/UI_TargetTracking　（３DオブジェクトにUIを追尾させる処理）

普通に考えたらCanvas内のUI.Imageなどの２D的な表示が３D空間上のオブジェクトの座標にくっついて移動するなんてことはありませんが、CameraのWorldToScreenPointを使用すると３D側のワールド空間の座標を２D側のスクリーン空間の座標に変換出来るので、ふきだしがオブジェクトにくっついて移動してるように見せることができます。

RectTransform _rectTransform = GetComponent<RectTransform>();
_rectTransform.position = Camera.main.WorldToScreenPoint(ターゲットのVector3座標);

スクリプトリファレンス Camera.WorldToScreenPoint

上記の処理で一応ふきだしが追尾しますが、喜ぶのもつかの間、当然２Dの表示なので奥行に合わせて拡縮したりしないので若干違和感ありますよね…🐄

そこで座標の処理と一緒にふきだしのUIのスケールもカメラとの距離に応じて変化させてやると自然な感じになります。

//カメラからターゲットまでの距離
float _distance = Vector3.Distance(カメラのVector3座標, ターゲットのVector3座標);

//ふきだしのスケール
float _scale = カメラが０地点から離れてる距離 / _distance;

ただ…、現状なんか「カメラが０地点から離れてる距離」の部分に正確な値を入れると大きすぎたり小さすぎたりしてたので個々の部分だけ結構あいまいでやってます…🐄（吸いません）
自分の環境でカメラが０地点から約Z-5くらい離れてるけど、３くらいに設定したらしっくり来たのでなんかいい塩梅でお願いします…🐄

あとこれだけだと結構大きくなりすぎたり小さくなりすぎたりするので、求めたスケールの数値は下記のような感じでリミットを設けてあげるとより良くなります。

if(_scale > 1)
{
	_scale = 1;
}
else if(_scale < 0.1f)
{
	_scale = 0.1f;
}

今回のような機能は「ふきだし」に限らず、ゲーム的な２DのUIとか（毒状態アイコンとか）を３D空間のオブジェクトにあわせて表示するのにも使えるので覚えておいても損はないかなと思います。

実際に動かした際にはこんな感じになります。

実際動作するアセットフォルダも置いておきますので、アセットフォルダを空プロジェクトに入れれば確認できます。（Script/Main.csに使用例があります）