「Canvas内のUIがなぜか表示されない…」
「思った通りの重なり順にならない…」
こんな悩み、Unity UI開発ではよくあります。原因を特定してみると些細なミスが原因だったりするのですが、そこにたどり着くまでに時間が溶けていくこともしばしば……。
そんなときに便利なのが、Frame Debugger（フレームデバッガー）先生です。
このツールを使えば、UIがどういう順序で描画されているのかをフレーム単位で追いかけることができます。
今回は、Frame Debuggerの基本的な使い方と、UI描画の問題を発見するポイントを紹介します。
Frame Debuggerとは？
Frame Debugger は、Unityで1フレーム内に発生したすべての描画コマンドを可視化できるツールです。そのため、実行中（Playモード中）に使う必要があります。
このツールを使うと、画面上のどのUIオブジェクトが、どのタイミングで描かれているかを、リアルタイムで確認できます。
開き方は簡単↓↓↓
Window > Analysis > Frame Debugger を選ぶだけ。
UIの描画順を確認するには？
Frame Debuggerを使って、実際にUIの描画順を見るには以下の手順を踏みます。
1. ゲームを実行（Play）する
まずはゲームをPlayモードで起動しましょう。
Frame Debuggerは実行中の1フレームを対象に動作します。
2. Frame Debuggerを開く
Window > Analysis > Frame Debugger でウィンドウを表示。
開いたら左上の Enable ボタンを押してデバッグを開始します。
画面は一時停止し、その時点のフレームに含まれる描画コマンド一覧が左側に表示されます。
3. 描画コマンドを順に追って確認
左のリストには、たとえば以下のような項目が並びます。
Draw Mesh (Image)
Draw Mesh (Text)
Draw Mesh (Button)
Draw Mesh (Sprite)
...この順番こそが、Unityが実行しているUIの描画順です。
リストを選択すると、右側のGameビューでその描画がどんな見た目になるかを順に確認できます。
つまり、「どのタイミングでこのボタンが描かれたのか」「背景の後にTextが重なっているか」がすべて見えるというわけです。
どんなときに使うと効果的？
Frame Debuggerは以下のようなケースで活躍します。
✅ UIが表示されない
・Hierarchy上には存在している
・Activeにもなっている
・でもなぜか見えない！
そんなとき、描画順の最後の方で別の画像に上書きされていたというパターンがよくあります。Frame Debuggerで該当UIが描かれた後に何が上書きされたかを確認すれば、原因がすぐにわかります。
✅ UIの重なり順が想定と違う
「複数のCanvasを同時に運用」ということをしていると、描画順が意図しないことがよくあります。
Canvasごとの描画は階層順ではなく、Unity内部の描画スケジューリングに依存することもあるからです。
Frame Debuggerで「どのCanvasが先に描画されているか」確認することで、描画順の制御に必要なSorting LayerやOrder in Layerの調整ポイントが見えてきます。
✅ 無駄な再描画・負荷の原因を探したい
UIが動いていないのに、毎フレーム全Canvasが再描画されている場合、無駄な描画負荷の原因になっている可能性があります。
たとえば Canvas の Pixel Perfect や World Space Canvas の設定によって、UIが毎フレーム変化しているように見えてしまうことがあります。
Frame Debuggerを使えば、どのUIがどの頻度で描かれているのかが明確になります。
Sorting Layer・Order in Layerの見直しにも便利
UIの描画順を制御するのに使われる Sorting Layer と Order in Layer。
これらが正しく設定されていないと、「背景より前に出てほしいUIが出てこない…」という悲劇が起きます。
Frame Debuggerを使えば、今どのSorting Layerが描画中か・Orderの順番は合っているかが一目瞭然です。
調整に迷ったら、Frame Debuggerで「順番に描画された結果」を目視確認してみましょう。
まとめ：UI描画の不具合、Frame Debuggerで解決！
UIが表示されない・重なり順がおかしい・Canvasの順番が怪しい…
こうした「見た目」の問題は、Frame Debuggerを使えばフレーム単位で視覚的に確認できます。
- UIがどういう順で描かれているか確認できる
- Sorting LayerやCanvas順のデバッグができる
- 実際のGameビューで“描かれた瞬間”が見える
- 描画負荷の原因になっているUIも特定できる
エディタ上での調整に限界を感じたら、ぜひ一度Frame Debuggerを使ってみてください。
「なるほど、こいつが上書きしてたのか！」という発見があるかもしれませんよ。
