← ブログへ

バトルポップアップ数字:引き継ぎ受け入れとエンジン実装

ポップアップのボケ、欠字、描画順、同屏カクつきの不合格基準。TMPとビットマップ数字の選び方、プールとCanvas順序、Unity UGUIの6ステップ、デザイン数字アートの渡し方。

公開日
  • game-ui-design
  • game-dev-ai
  • ui-to-engine
  • bitmap-font
  • unity
  • godot
  • cocos
  • vberai
  • 2026
バトルポップアップ数字:引き継ぎ受け入れとエンジン実装

1秒に十回ヒットすると、ポップアップの問題は「字を大きく」では直りません:Editorではシャープ、実機でボケ;クリティカル色は合うが 「K」「万」やマイナスが欠ける;HUDボタンの上に重なり タップを奪う;Instantiate 連発で GCカクつき。ポップアップは高頻度・短命UI—静的HUDとは別に受け入れます。

以下は Unity UGUI / TextMeshPro(RectTransform、Canvas、sortingOrder)中心。Godot:Label + Theme / ビットマップ;Cocos:Label + ビットマップフォント + プール—基準と手順は同型。静的HUDは エンジン+MCP。出荷前項目3(アート字/ダメージ数字のボケ)は Release実機で再テスト。

不合格基準(1つでも該当): 可読性低下(ボケ、クリップ、glyph欠落);ポップアップなしbaselineより明らかにフレーム低下(機種記録);必須タップを遮り raycastTarget がオン;Crit/Heal/Missの見た目が表と不一致;表記ゆれ(1.2K と 1200 混在)。

Editorではシャープ、実機でボケる对比


まず選ぶ:TMPかビットマップ数字か

用途向き典型ミス
数字+記号のみビットマップ / カスタムメッシュ文字セット漏れ;Filterでボケ
多言語フレーズTMP + 文字列表数字と混ぜると幅が揺れる
強い縁取り・グラデビットマップ or フレーム列状態不足→色で誤魔化
プロトタイプデフォルトSDF参照解像度なし→実機ボケ

実機ボケ:Canvas Scaler基準、TMP padding/atlas、ビットマップ Filter(Point多め)—それでもダメなら文字セット/SDF品質。ビットマップ文字セット、出荷前項目3。

ビットマップ数字とTMP/SDFの对比


Unity:実装と受け入れ(6ステップ)

1. 専用Canvasまたは描画順

  • 専用Canvas(Screen Space - Camera=戦闘カメラ)またはHUD子レイヤー。
  • sortingOrder:ワールドUIより上、モーダルより下;raycastTarget = false。
  • ワールド表示:World Canvasは1つ—数字ごとにCanvasを作らない。

Canvas描画順とraycast OFF

2. オブジェクトプール

  • 同屏ピーク以上に予熱(16〜32から)。
  • 返却時に位置・alpha・scale・アニメ・文字列をリセット。
  • ヒットごとの Instantiate/Destroy 禁止。

3. データと演出を分離

  • 戦闘は DamagePopupEvent(値、タイプ、座標/アタッチ、Crit)。
  • 演出:色、接頭、略記(K/M/B/万)、カーブ。
  • 表で タイプ→スタイルPrefab(Normal/Crit/Heal/Miss/Block)。

4. モーション

  • 上昇+フェード+軽いscale;0.4〜0.8s;同一位置は横ずらし/キュー。
  • 同フレーム多段:統合表示 or 1〜2フレームずらし。
  • カメラ距離でサイズ変えるなら ワールドscale規則を1つ—UI Canvasと二重計算しない。

複数ポップアップの状態とずらし

5. 文字セットと書式

  • ビットマップ:0-9 . , + - % x K M B 万 億 と 略記ルール一致。
  • TMP:フィールド分割/sprite—1文字列でフォント切替しない。
  • 多言語オーバーフロー:全文をラスタポップアップにしない。

6. 実機スモーク

  • Dev/Release:雑魚30s、多段ボス、低メモリ端末。
  • ポップアップあり/なしでフレーム比較;Crit/Heal/Miss各1スクショ。
  • 合格は Prefab+プール設定に固定—テストSceneだけ不可。

デザイン引き継ぎ(数字と状態)

交付物用途
状態別 数字アート or TMPスタイル表駆動Prefab/Material
目標解像度での 縁/影 見本実機シャープネス
Crit/combo 色+アイコンコードの仮 Color.red 禁止
文字セット範囲ビットマップ or 文字列表

デザインハンドオフ:ラスタ化するなら 言語ごとかを明記;既定は ビットマップ数字+TMPラベル。


修正ルーティング

症状原因対応担当
実機ボケScaler/SDF/Filter基準解像度;Point;SDF paddingエンジニアリング
欠字charset拡張再エクスポート;TMPエンジニアリング+デザイン
ボタン妨害順序/raycastorder調整;raycast offエンジニアリング
カクつき未プールプール;同フレーム統合エンジニアリング
Crit見た目不一致ハードコード色タイプ→Prefabエンジニアリング+デザイン
HUDと分裂二系統フォントTheme/ソース統一デザイン+エンジニアリング

よくある質問

World Space必須?
固定2Dは Screen Space - Camera も可。方針を1つ決め文書化。

UIパーティクル?
演出用可;数字本体はLabel/TMP/mesh(ロケール・プールのため)。

ダメージロジックと同居?
ロジックはイベントのみ;ShowDamageNumbers で演出ON/OFF。

大数表記?
企画で formatterを1つ;UIスクリプトにコピペしない。

こちらの記事もおすすめです