この記事は KLab Engineer Advent Calendar 2021 の21日目の記事です。

共通基盤グループ所属の ono-yuki です。
この度 SketchConverter という社内で開発したツールを公開しました。

どのようなツールか

UI デザインツール Sketch のファイルを読み込んで uGUI コンポーネントがアタッチされた GameObject として出力できるツールです。
画面左が Sketch の画面です。
画面右は Unity 上で Sketch のレイアウトデータを読み込んで出力した図です。

開発までの経緯

デザイナー職の方からすると Sketch ファイルで UI レイアウト組みをしたあとに同じようなレイアウト作成を Unity 上で行う必要があり手間だという悩みがありました。
そのデザイナー職から「Sketch ファイルを GameObject に変換するツールが欲しい」と相談ベースで話をいただいたので、開発期間や工数・費用対効果・仕様などを固めて上長に提出したところ開発を承認してもらえました。

公開までの経緯

開発を終え成果物を見直してみると SketchConverter を利用する予定のプロジェクト固有の実装はあまり含まれていませんでした。
プロジェクトごとにカスタマイズを追加する想定で開発していて、変換において重要な処理はほとんど変更や拡張できるようにしていたのが効いたと思います。
加えて、実際にプロジェクトで半年以上使ってもらってフィードバックもある程度取り込めたことや、秘匿性も特にないツールなので社内だけに留める理由も無かったことから、そのまま OSS にしてしまおうと考え実現に至りました。

OSS 化に至るまでの承認フローが明確には存在しなかったので会社から OK が出るまで少し試行錯誤してしまったのですが、それを受けて CTO の塙が申請の手順や条件などをまとめた OSS 化に関するガイドラインを用意してくれたので、今後 KLab ではより OSS 化がやりやすくなったと思います。

カスタマイズについて

各レイヤーごとにどういうコンポーネントをアタッチするか、どういう階層構造を生成するかなどは変更や追加が出来るようになっています。

以下の動画は Sketch ファイルの内容を Unity に出力している様子です。
ウィンドウのドラッグやボタンやトグルの押下など UI が反応していると思いますが、これは変換時に適切な UI コンポーネントをアタッチしているからです。

Sketch の場合 UI のパーツはまずシンボルとして管理していると思いますし、シンボル名に / を入れることでグループ化する Sketch の機能を利用している方も多いと思います。
これを例とした場合に、シンボルをボタンとして管理しているか判断して変換時にボタンのコンポーネントをつけるという拡張例はこんな感じになります。それほどコードも多くないかと思います。

public class ButtonDecorator : Decorator
{
    // ボタンコンポーネントをつけるか判断する
    public override bool ShouldDecorate(IDecoratorEntry entry) => entry.Adapter.SymbolLayer?.Name.StartsWith("components/button/") ?? false;

    // ボタンコンポーネントをつける
    public override void Decorate(IDecoratorEntry entry) => entry.GameObject.AddComponent<Button>();
}

Sketch が公式に管理しているスキーマ情報から C# のコードを生成してそれを利用しているので入力補完なども効きます。
補完から Sketch 側の情報を色々探してみても面白いかもしれません。
（ツールを開発した私もどういう情報を読めるのか全てを把握していないです。）

変換できる Sketch ファイルについて

標準の実装ではどのような Sketch ファイルも変換できる仕様にはなっていません。
カスタマイズを行わない場合はこんな Sketch ファイルの構成を求められます。

• Unity 向けに Export するために Sketch でテクスチャをシンボルで管理している
• Sketch で Export するテクスチャ名とシンボル名が同じになっている

Sketch が Unity のような 9-slice をサポートしていないので Unity 側でも持つ想定の UI テクスチャであればほぼシンボルにしてその中のアンカー設定で再現する必要があることや、ライブラリ機能などを利用して複数の .sketch から構成されている場合に変換したい .sketch には Export に関する情報が含まれてないことなどから、このような標準仕様となりました。

具体的な例となる .sketch ファイルを SketchConverter.Examples ディレクトリ配下に用意しているので参考になると思います。

とはいえ、上記の条件に限らず Sketch 側の構成を固めてそれに合わせたカスタマイズをすることも出来ますし、 Export 設定は場合によりますが必要な画像自体は .sketch 内部に全て含まれているのでローダー部分の拡張を加えてより多くの場合に対応するようなこともできます。

未実装部分について

私たちのプロジェクトではあまり困らなかったことから優先順位的に一部の実装はしていません。
例えばシェイプ周りはノータッチです。 Rectangle を画像指定が空の Image コンポーネントとして出力するくらいしかしていません。

とりあえず拡張性だけ意識してあとは YAGNI の精神で作られました！

ちょっとした技術的な話など

以前 CA.unity #2 という勉強会で SketchConverter を作成するために必要になった知識や経験を簡単にですが発表させていただきました。
スライドや動画は Unity 公式の学習プラットフォーム Unity Learning Materials 、話した内容の書き起こし記事は ログミーTech さんで公開されています。

こちらにもスライドを貼っておきます。

終わりに

デザイナー職と技術職が手を取り合ってより効率的な開発ができるといいですよね。
今回のツールが何かの足がかりになれば幸いです。