<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
UnityのuGUIやUI Toolkitを使っていて、「もっとシンプルにコードでGUIを組みたい」と思ったため、RimGuiという自分の理想に合ったGUIライブラリをゼロから開発して公開しました。
<iframe id="zenn-embedded__9d29f1d449d5a" src="https://embed.zenn.studio/card#zenn-embedded__9d29f1d449d5a" data-content="https%3A%2F%2Fgridrand.com%2Frimgui%2Fwebgl%2Fcore" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://gridrand.com/rimgui/webgl/core" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://gridrand.com/rimgui/webgl/core</a>
<iframe id="zenn-embedded__360cd821f7419" src="https://embed.zenn.studio/card#zenn-embedded__360cd821f7419" data-content="https%3A%2F%2Fassetstore.unity.com%2Fpackages%2Ftools%2Fgui%2Frimgui-316805" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://assetstore.unity.com/packages/tools/gui/rimgui-316805" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://assetstore.unity.com/packages/tools/gui/rimgui-316805</a>
<img src="https://storage.googleapis.com/zenn-user-upload/2b3ea34034c7-20250702.png" alt="main" loading="lazy" class="md-img">
<h1 id="%E8%87%AA%E5%88%86%E3%81%AE%E7%90%86%E6%83%B3%E3%81%AEgui" data-line="9" class="code-line">
<a class="header-anchor-link" href="#%E8%87%AA%E5%88%86%E3%81%AE%E7%90%86%E6%83%B3%E3%81%AEgui" aria-hidden="true"></a> 自分の理想のGUI</h1>
<ul data-line="10" class="code-line">
<li data-line="10" class="code-line">コードでGUIを組みやすい</li>
<li data-line="11" class="code-line">簡単にGUIを作成できる</li>
<li data-line="12" class="code-line">実用性重視
<ul data-line="13" class="code-line">
<li data-line="13" class="code-line">派手さは必要ない</li>
</ul>
</li>
<li data-line="14" class="code-line">デバッグや開発時だけでなく、本番のゲームでも使える</li>
<li data-line="15" class="code-line">高速</li>
<li data-line="16" class="code-line">Unityへの依存が少ない
<ul data-line="17" class="code-line">
<li data-line="17" class="code-line">拡張、カスタムしやすくするため</li>
<li data-line="18" class="code-line">実装の中身が見通しやすく、理解しやすくなる</li>
<li data-line="19" class="code-line">パフォーマンスチューニングをしやすくなる</li>
</ul>
</li>
</ul>
<h1 id="%E6%97%A2%E5%AD%98%E3%81%AEgui" data-line="21" class="code-line">
<a class="header-anchor-link" href="#%E6%97%A2%E5%AD%98%E3%81%AEgui" aria-hidden="true"></a> 既存のGUI</h1>
uGUI
<ul data-line="23" class="code-line">
<li data-line="23" class="code-line">安定している</li>
<li data-line="24" class="code-line">コードだけで完結するUI構築は困難</li>
<li data-line="25" class="code-line">大量のUIだと重い</li>
<li data-line="26" class="code-line">動的な更新があると重い</li>
</ul>
UI Toolkit(ほとんど使ったことがないので的はずれかも)
<ul data-line="29" class="code-line">
<li data-line="29" class="code-line">スタイリングしやすい</li>
<li data-line="30" class="code-line">ボイラープレートが多い</li>
<li data-line="31" class="code-line">スクリプトからの制御がしづらそう</li>
<li data-line="32" class="code-line">個人的にHTMLやCSSを知らないため、あまりメリットを感じない。</li>
</ul>
Unity IMGUI
<ul data-line="35" class="code-line">
<li data-line="35" class="code-line">コードだけでUIを作成できる</li>
<li data-line="36" class="code-line">runtimeで使うにはパフォーマンスが厳しい</li>
<li data-line="37" class="code-line">複数解像度への対応が難しい</li>
</ul>
<h1 id="%E9%96%8B%E7%99%BA%E3%81%97%E3%81%9Fgui%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA" data-line="39" class="code-line">
<a class="header-anchor-link" href="#%E9%96%8B%E7%99%BA%E3%81%97%E3%81%9Fgui%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA" aria-hidden="true"></a> 開発したGUIライブラリ</h1>
Immediate-Mode GUIとなっており、シンプルで直感的に使えるように開発しました。 
ライブラリ名はImmediate-ModeからImを取り、Rを付けてRimGuiと名付けました。
Built-In,URP,HDRPに対応しており、PCやMobile,WebGLでも動作します。
<h1 id="%E4%BD%BF%E3%81%84%E6%96%B9" data-line="45" class="code-line">
<a class="header-anchor-link" href="#%E4%BD%BF%E3%81%84%E6%96%B9" aria-hidden="true"></a> 使い方</h1>
以下のように、メソッドを呼ぶだけでGUIを構築できます。
<div class="code-block-container"><pre class="language-csharp"><code class="language-csharp code-line" data-line="48">Gui.Heading("ChangeAlpha");

using (ImageColors.Begin(new Color(1f, 1f, 1f, alpha)))
 Gui.Image(Sprite);

Gui.Slider(ref alpha, 0f, 1f);
Gui.Text(alpha.ToString("F2"));

if (Gui.NextHeight(100f).BeginScroll())
{
 for (int i = 0; i &lt; 11; i++)
 {
 if (Gui.Button($"Set {i / 10f}"))
 alpha = i / 10f;
 }
 Gui.EndScroll();
}
</code></pre></div><img src="https://storage.googleapis.com/zenn-user-upload/e02719141489-20250702.png" alt="sample-ui" loading="lazy" class="md-img">
<ul data-line="70" class="code-line">
<li data-line="70" class="code-line">
<code>Heading()</code>：見出しを表示</li>
<li data-line="71" class="code-line">
<code>Image()</code>：Imageの表示</li>
<li data-line="72" class="code-line">
<code>Slider()</code>：Sliderの表示</li>
<li data-line="73" class="code-line">
<code>BeginScroll()</code>：Scrollの開始</li>
<li data-line="74" class="code-line">
<code>Button()</code>：ボタンを表示し、クリックされたら<code>true</code>を返す
<ul data-line="75" class="code-line">
<li data-line="75" class="code-line">Dear ImGuiなどの多くのImmediate-Mode GUIと同じ</li>
</ul>
</li>
</ul>
他にも多くのWidgetや機能が存在します。
<ul data-line="78" class="code-line">
<li data-line="78" class="code-line">Box</li>
<li data-line="79" class="code-line">Button</li>
<li data-line="80" class="code-line">ToggleButton</li>
<li data-line="81" class="code-line">RadioButton</li>
<li data-line="82" class="code-line">CheckBox</li>
<li data-line="83" class="code-line">ColorPreview</li>
<li data-line="84" class="code-line">Custom</li>
<li data-line="85" class="code-line">Foldout</li>
<li data-line="86" class="code-line">Frame</li>
<li data-line="87" class="code-line">InputText</li>
<li data-line="88" class="code-line">Scroll</li>
<li data-line="89" class="code-line">Separator</li>
<li data-line="90" class="code-line">Slider</li>
<li data-line="91" class="code-line">Sprite</li>
<li data-line="92" class="code-line">Text</li>
<li data-line="93" class="code-line">Texture</li>
<li data-line="94" class="code-line">Window</li>
<li data-line="95" class="code-line">Heading</li>
<li data-line="96" class="code-line">Spacing</li>
<li data-line="97" class="code-line">InteractiveItem</li>
<li data-line="98" class="code-line">Drag and Drop 
などなど</li>
</ul>
詳しくは下のリンク先を参考にしてください。 
<iframe id="zenn-embedded__435bf7d0fd177" src="https://embed.zenn.studio/card#zenn-embedded__435bf7d0fd177" data-content="https%3A%2F%2Fgridrand.com%2Frimgui%2Fdocs%2Fcore%2Fintroduction" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://gridrand.com/rimgui/docs/core/introduction" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://gridrand.com/rimgui/docs/core/introduction</a>
<h1 id="%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%A2%E3%83%88%E3%83%A9%E3%82%B9%E3%81%AE%E7%94%9F%E6%88%90" data-line="104" class="code-line">
<a class="header-anchor-link" href="#%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%A2%E3%83%88%E3%83%A9%E3%82%B9%E3%81%AE%E7%94%9F%E6%88%90" aria-hidden="true"></a> フォントアトラスの生成</h1>
TextMeshProを使わず、独自にフォントアトラスの生成およびレンダリングを行っています。 
フォントのラスタライズには、<code>stb_truetype</code>のC#移植版を使用しています。
<img src="https://storage.googleapis.com/zenn-user-upload/5ee6eeb1f8ed-20250502.png" alt="atlas-font-editor" loading="lazy" class="md-img">
Unityには <a href="https://docs.unity3d.com/ja/2022.3/ScriptReference/TextCore.LowLevel.FontEngine.html" target="_blank" rel="nofollow noopener noreferrer">FontEngine</a> というクラスが存在しますが、重要なメソッドが<code>internal</code>となっており、使用するとクラッシュすることが多くありました。 
また、ラスタライズ時の座標も不明瞭だったため採用を見送りました。
とはいえ内部では<code>JobSystem</code>を活用しており、基盤にはおそらく<code>FreeType</code>が使われていることから、高いパフォーマンスが期待できます。 
そのため、クラッシュの原因や座標の仕様が明確になれば、採用も十分検討に値すると考えています。
<h1 id="%E6%8F%8F%E7%94%BB" data-line="116" class="code-line">
<a class="header-anchor-link" href="#%E6%8F%8F%E7%94%BB" aria-hidden="true"></a> 描画</h1>
SetPass callsを抑えるために、Shader、Materialを1つにしています。
Unityではさまざまな手法でレンダリングが可能ですが、RimGuiでは<code>CommandBuffer</code>を使用しています。これは、特定の領域をフレームバッファから切り離して描画する必要があるためです。
また、<code>CommandBuffer.DrawMesh()</code>を用いた描画では、たとえ同じMaterialを使っていても、Statisticsビューでは<code>SetPass calls</code>が増加しているように見えますが、実際にはGPUへのステート変更は行われていないため、問題はありません。
<blockquote data-line="123" class="code-line">
Opening up RenderDoc capture shows that, if the material is unchanged between DrawMesh calls, all that is being fired off to the GPU are calls to set vertex/index buffers and then a draw call…it looks like the profiler is wrong. I don’t think that Unity is sending state changes to the GPU unless it has to. 
<a href="https://discussions.unity.com/t/is-there-a-way-to-batch-meshes-that-are-drawn-with-commandbuffer-drawmesh/626427/22" target="_blank" rel="nofollow noopener noreferrer">Is there a way to batch meshes that are drawn with CommandBuffer.DrawMesh? - Unity Forum</a>
</blockquote>
<h2 id="text" data-line="127" class="code-line">
<a class="header-anchor-link" href="#text" aria-hidden="true"></a> Text</h2>
SDFかBitmapかで迷いましたが、SDFでTextを描画しています。
SDFのメリット
<ul data-line="131" class="code-line">
<li data-line="131" class="code-line">高DPIだと綺麗
<ul data-line="132" class="code-line">
<li data-line="132" class="code-line">モバイルだと特に顕著</li>
</ul>
</li>
<li data-line="133" class="code-line">Fontのサイズがいくつでも1つのアトラスで対応可能</li>
<li data-line="134" class="code-line">今後、影などのエフェクトを描画できるように改修できる</li>
</ul>
Bitmapのメリット
<ul data-line="137" class="code-line">
<li data-line="137" class="code-line">ラスタライズが速い
<ul data-line="138" class="code-line">
<li data-line="138" class="code-line">ダイナミックにテクスチャアトラスに書き込む場合に重要</li>
</ul>
</li>
<li data-line="139" class="code-line">Shaderがシンプル</li>
</ul>
<h1 id="%E8%AC%9D%E8%BE%9E" data-line="141" class="code-line">
<a class="header-anchor-link" href="#%E8%AC%9D%E8%BE%9E" aria-hidden="true"></a> 謝辞</h1>
以下のライブラリは、本実装にあたって非常に参考になり、多くのインスピレーションを頂きました。 
この場を借りて、心より感謝申し上げます。
<ul data-line="144" class="code-line">
<li data-line="144" class="code-line"><a href="https://github.com/ocornut/imgui" target="_blank" rel="nofollow noopener noreferrer">Dear ImGui</a></li>
<li data-line="145" class="code-line"><a href="https://github.com/emilk/egui" target="_blank" rel="nofollow noopener noreferrer">egui</a></li>
<li data-line="146" class="code-line"><a href="https://github.com/Akeit0/ZimGui-Unity" target="_blank" rel="nofollow noopener noreferrer">ZimGui</a></li>
</ul>
<h1 id="%E6%9C%80%E5%BE%8C%E3%81%AB" data-line="148" class="code-line">
<a class="header-anchor-link" href="#%E6%9C%80%E5%BE%8C%E3%81%AB" aria-hidden="true"></a> 最後に</h1>
結果として開発に2年以上かかってしまいましたが、最初はこんなにも時間をかけるつもりはありませんでした。 
使いやすくするためにある程度できてから大部分を改修したため、ここまで時間が掛かってしまいましたが、使いやすいGUIライブラリになったと思います。 
ただ、まだ足りない機能があるため、今後も開発を続けていきます。
ご意見やご要望などありましたら、ご連絡いただけると嬉しいです。

2年かけてUnityでuGUIやUI Toolkitの代わりに使うGUIライブラリを開発して公開した

akeit0

tatarou

ご存知か分かりませんが、２年前に近いプロジェクトをつくっていたので、使いやすくすること及び完成が大変なのはとても分かります...! 
(自分は途中でやめちゃったので) 
<iframe id="zenn-embedded__d337c37171a2f" src="https://embed.zenn.studio/card#zenn-embedded__d337c37171a2f" data-content="https%3A%2F%2Fzenn.dev%2Faakei%2Farticles%2F0ee44116709f93" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://zenn.dev/aakei/articles/0ee44116709f93" style="display:none" target="_blank">https://zenn.dev/aakei/articles/0ee44116709f93</a> 
買うかは正直分かりませんが、応援します！

ありがとうございます！ 
ZimGuiのコードは参考にさせていただきました。 
そちらのページも何回も読んでいました。 
かなり前なので曖昧ですが、私のライブラリのWindowの右下の三角形はZimGuiの名残りだと思います！

Discussion