ユーザーインターフェースを作ってみよう

ユーザーインターフェースを作ってみよう

table:render mode

Screen Space - Overlay カメラを無視して常に最前面に表示される。エフェクトを適用できない。

Screen Space - Camera 指定カメラの最前面に表示される。複数カメラを使うことでエフェクトを適用できる。

World Space CanvasをWorld座標に配置する。

解像度設定

World Space : Rect TransformコンポーネントのWidthとHeightで制御する

装飾可能なTextオブジェクト

初使用時に「Import TMP Essentials」をする必要がある

Importする画面の下にある「Import TMP Examples & Extras」を押下すると、サンプルなどがインポートされる

ttfファイルは、そのままではTMPで使用できないので、Font Asset Creatorでコンバートする必要がある

画像ファイルに書き出すようで、Atrals解像度や書き出す文字セットの選択をする必要がある

Character Set -> Cusom Characters を選択すると、コンバートする文字を直指定出来る

日本語を取り出したいならUnicodeRangeを選んで、CKJ領域を指定すれば良さそう

「 TextMeshPro 常用漢字」でググると良いのだそう

Textが描画領域オーバーで表示されない対策

TMP : Wrapping -> Disabledを選択する

Text : Horizontal / Vertical Overflow で Overflow を選択する

中間を意味する「Between」から来てるのだそう

Inport後、DOTweenUtilityPanelでSetup DOTweenをする必要がある

code:dotween sample.cs

using DG.Tweening;

public class GameOverTextAnimator : MonoBehaviour

{

void Start()

{

// ・上から現れ、画面中央まで移動

// ・移動完了時に振動する

var transformCache = transform;

var defaultPosition = transformCache.localPosition; // 終点とするため初期座標を保存

transformCache.localPosition = new Vector3(0, 300f); // いったん上の方へ移動

transformCache.DOLocalMove(defaultPosition, 1f) // 移動アニメ開始

.SetEase(Ease.Linear)

.OnComplete(()=>{

Debug.Log("GAME OVER!!");

transformCache.DOShakePosition(1.5f, 100); // シェイクアニメ

}); // アニメーション以外の処理を行わないなら、DOTween.Sequence()の方がスマート

DOVirtual.DelayedCall(10, ()=>{ // DOTweenには、Coroutineを使わずに任意の秒数を待てるメソッドがある

SceneManager.LoadScene("TitleScene"); // 10秒待ってからタイトルシーンに遷移

});

}

}

公式ドキュメント

ハマりポイント

別のTweenerと衝突して動きがおかしくなる

ループさせたい

コルーチンでTweenを待ちたい

アニメを繰り返すとオブジェクトの位置や大きさが少しずつずれる

デフォルトの座標や大きさを保持しておいて、アニメーション実行前にセットし直す

usingエイリアスディレクティブ

using Random = UnityEngine.Random;

名前空間に別名を付ける事が出来る

インベントリシステム周りのクラス図

https://gyazo.com/298dcab47995c4d1362388ba5ecf6afe

ライフゲージ

code:convert world2canvas.cs

// 対象Mobの場所にゲージを移動。World座標やLocal座標を変換するときはRectTransformUtilityを使う

var screenPoint = _camera.WorldToScreenPoint(_status.transform.position);

Vector2 localPoint;

// 今回はCanvasのRenderModeがScreenSpace-Overlayなので第3引数にnullを指定している。

// ScreenSpace-Cameraの場合は、対象のカメラを渡す必要がある

RectTransformUtility.ScreenPointToLocalPointInRectangle(_parentRectTransform, screenPoint, null, out localPoint);

transform.localPosition = localPoint + new Vector2(0, 80); // ゲージがキャラに重なるので、少し上にずらす

ライフゲージのコンテナを作り、MobStatusが自身のライフサイクルに合わせてコンテナへAdd / Removeする作り

https://gyazo.com/d7cb0472625761ee5cd928588302026d