Visklusa: UIデザインを表現するファイル形式

Visklusa UIデザインを表現するファイル形式

このスライドについて • 株式会社バーチャルキャストの社内勉強会で用いる資 料です • 著者: NumAniCloud (ナムアニクラウド) • ゲーム開発に興味があります • 今回紹介するVisklusaは開発途中、かつ完成形が見えて いない状態のもので、このスライドではアイデアと問 題点を共有します Twitterアイコン

Visklusaってなに？

Visklusa • ファイル形式である • UIデザインを表現するために使われる • 任意のUIデザインツールからVisklusaファイルを書きだすことを想定する • 任意のゲームエンジンでVisklusaファイルを読み込むことを想定する • ロジバンの単語 visk(見た目) + lusa(疎) から命名 • visualをlooseにってこと

Visklusa UIデザインツールで作ったデザインをゲームエンジンで読み込むための中間 形式といえる Adobe XD Unity Visklusa Figma Godot etc

Visklusaの歴史

ありし日のゲーム開発 Altseedというゲームエンジンを使って、RPG「逃亡性痛み症候群」を開発し た

ありし日のゲーム開発 Altseedの機能のひとつ： Photoshopで作成したUIレイアウトをゲームアプリ に読み込むことができる

ありし日のゲーム開発 ある日、Altseedのメンテナンスが実質的に停止。 Altseed2を使い始めたが、そちらにはUIデザインを読み込む機能が無かった

ありし日のゲーム開発 ゲームエンジンを乗り換えるときに UIデザインの制作フローが 変わってしまって辛い 🤔

ありし日のゲーム開発 • Altseed2も結局メンテナンスが微妙 • この頃には仕事でUnityを使っていたが、C#サポートは完璧とはいえな かった → 特定のゲームエンジンを長く使うという選択肢を疑うようになった 🤔

疎結合を目指す UIデザインツールの選択肢は複数ある Figma Adobe XD Sketch

疎結合を目指す ゲームエンジンの選択肢は複数ある • Unity • Godot • ... C#に限定しなければ、それこそ無数にある

疎結合を目指す 当時のメモ： 「デザインツールを描画エンジンに対して非依存にできないだろうか？」 つまり、特定の技術を長く使うという選択肢を疑った考え方をする： • UIデザインツールを乗り換えても、ゲームエンジンから今までと同様に読 み込みたい • ゲームエンジンを乗り換えても、UIデザインツールから今までと同様に書 きだしたい

疎結合を目指す n個のデザインツール、m個のゲームエンジンがある場合、全ての組み合わ せでデザインを読み込むためにはn×m個の変換ツールが必要。増え方が掛け 算なので網羅するのが大変 Adobe XD Unity Figma Godot Altseed2

疎結合を目指す n個のデザインツール、m個のゲームエンジンに対して中間形式が1つある場 合、全ての組み合わせでデザインを読み込むためにはn+m個の変換ツールで 十分。増え方が足し算なので組み合わせが増えても負担が少ない Adobe XD Unity 中間形式 Figma Godot Altseed2

疎結合を目指す 同時期、ある開発者が「AkyuiUnity」の開発を開始。Adobe XDファイルを Unityのprefabに変換することができる AkyuiUnityの開発が進む中、Author ”きゅぶんず” さんと話し合う機会があっ た 彼も同様に、Adobe XDでデザインしたUIをUnityへ取り込むため、中間形式 Akyuiの仕様と実装を作っていた

疎結合を目指す UIデザイン用の中間形式が 欲しいというのは 自然な感覚なのかもな 🤔 Visklusaの開発が始まった

できあがったもの

Visklusa JsonZip レイアウト情報をjsonで記述し、アセットファイル群と まとめてzipアーカイブしたものを Visklusa JsonZip と呼ぶ。 これの読み書きができるライブラリを作った 仕様は後で紹介します

FigmaVisk • FigmaのREST APIを叩いて、レイアウト情報とアセットをダウンロードして Visklusa JsonZipファイルとしてアーカイブしてくれるアプリ • UIデザインツール→Visklusa な変換ツールの一例 • Figmaの全機能に対応しているわけではない • FigmaのREST APIが返すjsonはランタイム時に読み込むのに効率的な構造と はいえないので、Visklusaに変換すると読み込みやすい

ViskVectorRenderer Figmaから得られる図形情報はsvg形式なので、Altseed2で描画するためには ラスタライズする必要があった。ViskVectorRendererが上手いことやってく れる ViskVectorRendererは Visklusa→Visklusa な変換ツールの一例

ViskAltseed Visklusa JsonZipをAltseed2で描画するためのローダー Visklusa→ゲームエンジン な変換ツールの一例

Visklusa 仕様

Visklusa JsonZip Visklusa JsonZip形式は、レイアウト情報をjsonで記述したファイルとアセッ ト群をzipでアーカイブしたファイルを指す zipファイルの内容は以下の通り • layout.json • assets.json • 任意のアセットを必要なだけ

Visklusa JsonZip Visklusa JsonZip形式では、レイアウトをjsonで表現する layout.json は以下の要素からなる • ルート • Assertionの配列 • Elementの配列 • Element • ID • Capability

Visklusa JsonZip Visklusa JsonZip形式では、レイアウトをjsonで表現する 以下の要素からなる • ルート • Assertionの配列 • Elementの配列 • Element • ID • Capability UI要素。 再帰構造は受け付けない

Visklusa JsonZip Visklusa JsonZip形式では、レイアウトをjsonで表現する 以下の要素からなる • ルート • Assertionの配列 • Elementの配列 • Element • ID • Capability Elementを区別するための数値

Visklusa JsonZip Visklusa JsonZip形式では、レイアウトをjsonで表現する 以下の要素からなる • ルート • Assertionの配列 • Elementの配列 • Element • ID • Capability Elementを特徴づける自由な値。 CapabilityIdごとに区別される。 1つのElementがいくつでも持てる

Capability Elementはあらゆる情報をCapabilityとして含む 座標とサイズ 四角形を描画する 角丸四角形の設定 Z軸の値 Figma上でのIDとか 親子関係の情報とか イージングなどで使う追加の座標情報

Capability Capabilityは可能な限り一意なIDを持つ Capability ID

Visklusa JsonZip Visklusa JsonZip形式では、レイアウトをjsonで表現する 以下の要素からなる • ルート • Assertionの配列 • Elementの配列 • Element • ID • Capability ファイル内に出現する CapabilityId をす べて並べる

アサーション 輪郭線のある図形を簡単には描画できないゲームエンジンが存在する 輪郭線のある図形を描画するようなCapabilityを扱え ない場合がある →ラスタライズする必要があるかも

アサーション 時には、Visklusaファイルの中身を変換して新しいVisklusaファイルを作る必 要がある（ラスタライザに限らず） Visklusa ラスタライザ Visklusa

アサーション アサーションは、レイアウトファイルがどのようなコンポーネントを含ん でいるかを、ファイル全体を読まなくても分かるようにするための仕様 このファイルには先ほどの FigmaVisk.Paintは含まれない

アサーション ラスタライザなどの中間的な変換ソフトウェアが、入力として受け付ける Capabilityと出力として扱うCapabilityをアサーションで表現できるのが目標 ラスタライザ 受け付けるのは • BoundingBox • Zoffset • Image • Text • FigmaId • AltPosition • FamilyShip • Paint それ以外は無視 出力が持つのは • BoundingBox • Zoffset • Image • Text • FigmaId • AltPosition • FamilyShip

アサーション • 出力されるVisklusaがどのようなCapabilityを扱うのか宣言できる • 入力されるVisklusaがどのようなCapabilityを持っていなければならないの かを宣言できる • これを満たさない入力をエラーとして弾くこともできる ラスタライザ 受け付けるのは • BoundingBox • Zoffset • Image • Text • FigmaId • AltPosition • FamilyShip • Paint それ以外は無視 出力が持つのは • BoundingBox • Zoffset • Image • Text • FigmaId • AltPosition • FamilyShip

今後の課題

Visklusaの抱える課題 • Figma→Visklusa を作れた • Visklusa→Altseed2 を作れた でもAltseed2はもう使わないつもりなので、ゲームエンジンGodot向けのローダー を作ろうとしているところ。 それに、仕様をきちんとまとめたドキュメントもない まだまだ先は長い

Visklusaの抱える課題 ある日友人にVisklusaを紹介してみた ゲームエンジンやデザインツールを 乗り換えるときの クッションの役目を担うんだよ 😎 😎

Visklusaの抱える課題 ある日友人にVisklusaを紹介してみた ゲームエンジンやデザインツールを 乗り換えるときの クッションの役目を担うんだよ 😎 「クッションのクッション」が 必要かもね。 ! 😎

Visklusaの抱える課題 「クッションのクッション」が意味するところは分からなかったが…… 技術はいつでも負債になりうることを思い起こした Visklusaは便利というより むしろ邪魔なのかな？ 🤔

中間形式であることの問題(1) 追加の技術を導入することは常に、新しい知識を収集しなければならない ことを意味する Visklusaを導入したい派 Visklusaツールのようなものを自力で作るのは大変 VS Visklusaの仕様を覚えるのは大変 Visklusaを導入したくない派

中間形式であることの問題(2) 中間形式として導入した際、Visklusa自体から乗り換えるイベントが一番早 いのであれば、習得するのは損しかない Visklusaを導入したい派 ゲームエンジンやデザインツールの 選択肢をたくさん持ちたい VS ゲームエンジンやデザインツールは 定番のものを使い続けたい Visklusaを導入したくない派

中間形式であることの問題(3) スタンダードは流行らなければスタンダードとして振舞えない Visklusaを導入したい派 Visklusaツールが豊富に存在する VS Visklusaツールが十分に存在しない Visklusaを導入したくない派

中間形式であることの問題(4) 中間形式を介さず、デザインツールのフォーマットからゲームエンジンの フォーマットへ直接変換するほうが簡単なこともある Adobe XD Unity Figma Godot Altseed2 2×3個の変換ツールがあれば、この図における全てのデザインツールから全てのゲームエン ジンへの橋渡しができる。増え方が掛け算なので網羅するのが大変

中間形式であることの問題(4) 中間形式を介さず、デザインツールのフォーマットからゲームエンジンの フォーマットへ直接変換するほうが簡単なこともある Adobe XD Unity でも、掛け算になってもいいのでは？ n×m のn, mはそう簡単には増えないのでは？ Figma Godot Altseed2 2×3個の変換ツールがあれば、この図における全てのデザインツールから全てのゲームエン ジンへの橋渡しができる。増え方が掛け算なので網羅するのが大変

中間形式であることの問題(5) デザイナーとの分担をしないのであれば、ゲームエンジン自身が提供して いるデザインツールを使うのが早い Unity (uGUI) Godot

Visklusaの仕様自体の問題 VisklusaのCapabilityは誰でも自由に定義できるため拡張性が高いが、それゆ えに互換性の問題を起こす Capability ツールA Visklsua by ツールA ToolA.Scroll Visklusa Capability ツールB Visklsua by ツールB ToolB.Scroll

Visklusaの仕様自体の問題 VisklusaのCapabilityは誰でも自由に定義できるため拡張性が高いが、それゆ えに互換性の問題を起こす Capability ツールA Visklsua by ツールA ToolA.Scroll Visklusa Capability ツールB Visklsua by ツールB ToolB.Scroll この2つのCapabilityが表したいものが同じだとしても、 この次に通る変換ツールはどちらか一方しか 対応しない可能性がある (IDが異なるので)

まとめ

Visklusaの開発動機 • 特定のゲームエンジンを長く使うという考え方を疑っている • ゲームエンジンを乗り換えたときに、今まで通りのやり方でUIデザインを したかった

出来上がったもの • Visklusa JsonZipの仕様と実装 • Figma→Visklusa • Visklusaのベクタグラフィクスをラスタライズするツール • Visklusa→Altseed2 • 雑だけどドキュメント

課題点 • 新しい技術を提供することは、ユーザーに新しい学習を要求する • 特定のツールを長く使うのであれば、中間形式を使う旨味がない • 中間形式は流行らなければ役目を全うできない • 中間形式が必要なほどデザインツールとゲームエンジンの組み合わせが爆 発しているのか分からない • デザイナーとの分担をしないのであれば、ゲームエンジンが直接提供する デザインツールを使う方がよい場合がる • Capabilityに自由な値を指定できることが問題になりうる

Visklusaと自分の今 • 最近まで開発していたが、今は凍結状態 • Visklusaの現状の仕様は扱いやすいとは言い難い • 自分の状況ではデザイナーとの分業がないので旨味が少ない • 自分ひとりが使うようなデザインツールとゲームエンジンの組み合わせの数はそれ ほど多くならない • 特定の技術を長く使うという選択を疑問に思っているので、Visklusaが仮 に流行ったとしてもVisklusaの代替を探し始めることはあり得る • こういった技術を発明すること自体は好きなので、役に立たないとしても 同様の技術をこれから研究することはあるだろう

備考

先行研究 • AkyuiUnity を使えば、Adobe XDファイルをUnityのprefabとしてインポート できる • Figma Converter for Unity (Asset Store) を使えば、FigmaでデザインしたUIを Unityに取り込めそう • C#でFigmaを解釈するライブラリとして FigmaSharp がおすすめ • Microsoft社員がメンテナンスしてるらしい • 「特定の技術を長く使うという考え方を疑う」立場は、Martin Fowlerが提 案した犠牲的アーキテクチャに由来する

先行研究(URL) URL AkyuiUnity https://github.com/kyubuns/AkyuiUnity Figma Converter for Unity https://assetstore.unity.com/packages/tools/utilities/figmaconverter-for-unity-198134?locale=ja-JP FigmaSharp https://github.com/microsoft/FigmaSharp 犠牲的アーキテクチャ https://martinfowler.com/bliki/SacrificialArchitecture.html

• https://github.com/kyubuns/AkyuiUnity
• https://assetstore.unity.com/packages/tools/utilities/figma-
• https://github.com/microsoft/FigmaSharp
• https://martinfowler.com/bliki/SacrificialArchitecture.html