Unity で XAML が使える NoesisGUI を試してみた

最近ちょっと Unity での UI の実装関連を見直してました。結構前から存在は知っていてたのですが軽く試すだけで終わっていたアセット NoesisGUI を試してみました。

目的

ベクターでデザインされた UI コンテンツをラスタライズせずに Unity に持ってくること。

使用したアプリ

Unity 2017.4 LTS + noesisGUI 2.1
- 人によっては Asset Store にある Ver.1.2 でも問題無いかもしれないけど、Ver.1.2 では .NET 4.6 が使用できないので却下（クラス名の競合が起きてビルドできなくなります）。
Microsoft Blend for Visual Studio 2017
- XAML 編集に使用
Affinity Designer 1.6.5
- ベクター UI コンテンツ作成
- Illustrator 持っているならそれでも（Adobe CC の場合レンタルだから借りているが正しいか…）
Microsoft Expression Design 4
- XAML 変換

NoesisGUI

Windows, macOS, Linux, Android, iOS など多数のプラットフォームに対応している XAML ベースの UI フレームワークです。基本有料ですが、売り上げが無かったり少ない場合は無料で使えます。 Unity とかと同じライセンス形態ですね。

UI コンテンツ作成

（Affinity Designer はマジ助かります。しばらく Illustrator の CC 使っていたのですが、やはり使わない期間が多く、はっきり言って無駄なコストでした。調べてみたらかなり似たような操作感で使えるソフトがあるとのことで速攻乗り換えました。お値段は 6,000円ですが結構セールするので 20％とか 30％引きで買えたりします。一か月 6,000円じゃないですよ？ちゃんと買い切りです。所有できますｗ。Microsoft Store 経由でも購入できますので個人でも多数の PC 持っていると管理が楽です。あと、試用もできますので使ってみるもの一興です。）

描画が終わったら EPS で出力します。Affinity Designer は .ai 形式は入力できるけど出力はできないのですよね、PSD ファイルの様に入力も出力もできれば最高でしたが…（次項の Expression Design が対応しているベクター入力ファイルは .ai か .eps しかないので。)

XAML 変換

Microsoft Expression Design 4 を使用します。昔からロゴやアイコンなどラスタライズせずに変換するために使っていた手法です。

かつては Microsoft に買収されたどっかの企業が作っていた Expression シリーズです。開発終了となり無償提供されているものを使用します。うろ覚えですが初代からなんかずっと持ってはいましたね。MSDN のおまけでついてきたのかな？現在完全に生まれ変わった Blend も元はこの Expression シリーズでしたがホント昔は使えなかった（使う気になれなかった）…
まぁ XAML を長くやっている人はデザイン画面を使用せずに XAML だけで十分無駄なく配置できるので（というか昔は PC が遅くてデザイン画面（XAML Parse が非常に低速）など時間の無駄遣いでしかなかったし、なにより不安定だった… 今は楽にストーリーボードが編集できる！いい時代になったものだ）

読み込んだらやることは XAML へのエクスポートだけなので何も考えずエクスポートします。

出力時のオプションはいろいろあるので注意です。あと純粋な WPF 向けだと NoesisGUI が未対応な GeometrySegment を使用してしまうので Silverlight4 向けを選びます。

Blend で XAML 編集

用意してある Unity + NoesisGUI 環境に適当に Blend 用のソリューションフォルダーを作成します。今後 MVVM を使用していくなら作成しておいた方が楽です。（詳しくはここを読むといろいろ書いてあります。英語ですが Google 翻訳を使えば意味は拾えるかと。）

対象の Unity Asset 内の XAML関連ファイルは Blend ソリューションに [リンクとして追加] しておきます。

今回は簡易的に NoesisGUI のサンプル内の Hello World の XAML に追加します。

XAML の配置にある程度 XAML の知識が必要です。今回は楽をするため ViewBox 内に出力された Canvas を取り込み元のサイズを考慮しない配置をしています。

アニメーション付加とか

既存のストーリーボード Intro に追加した Canvas の Opacity を 0% -> 100%に変化させるキーを追加しています。それなりに知識は必要ですが、全体でイメージできるので Unity で UI アニメーション作りより圧倒的に楽ですね。

結果

(クリックで GIF アニメーション）

いい感じですね。何といっても View（XAML部分）と Unity が完全に切り離せるのは大きいですね。冒頭でもちらっと書きましたがこの NoesisGUI は別に Unity 専用というわけでは無いのですよ（ホームページを見る限りどちらかというとUnity は少数派？な扱いな感じがします）例えば初めは Unity で作っていたが、やっぱり Unreal Engine に乗り換えるといった場合でも View だけはすぐにでも流用可能になる感じですね。

今まで業務用アプリばかり WPF で作っていたので、あまり奇をてらったアニメーションだったり、うるさいアニメーションってできなかったのですがゲームでは全然アリですね。これは楽しいですね。

次は MVVM あたりの連携を試してみようかと。

目的