この方に記事を用意していただきました！

はじめに

KLab には、これまでに制作してきた膨大なアニメーションアセットが存在します。しかしながらそれらは整理されておらず、ゲームプロトタイプの開発などで活用する際には手間がかかる状態でした。この問題に対して AnimationBridge という社内アプリを開発し、膨大なアセットの管理と活用の効率化を目指しました。

AnimationBridge について

AnimationBridge は、アセットを直感的に検索・確認し、使用したいアセットを他ソフト（ゲームエンジン等）にワンクリックで自動インポートできるデスクトップアプリです。

主な機能

ライブラリ読み込み

ファイルサーバー上に存在する「ライブラリ」を読み込み、アセット一覧に反映します。複数のライブラリを登録できます。

アセットの絞り込み

タグやキーワード（ファイル名）でアセットを絞り込めます。直感的な操作で複数のライブラリにまたがった検索を高速に行うことができます。

他ソフトへのアセット転送

アセットを他のソフト（ゲームエンジンなど）にワンクリックで自動インポートできます。使用したいアセットを見つけたらすぐに使い始められるようにしています。

通信はソケットを介して行っており、ゲームエンジン等の受け入れソフト側ではインポートサーバーとなるプラグインを用意しています。現状は次のソフトへのインポートに対応しています。

• Unity
• Unreal Engine
• Maya

採用技術

下記の理由から、Electron 製のアプリとして開発しました。

• マルチプラットフォーム対応していること
• Web 技術を使用したモダンな UI 開発が行えること
• 自身が Furigana Studio という Electron 製アプリの開発経験があり、短期間で開発に取りかかれたこと

また、JavaScript フレームワークには React よりもオーバーヘッドの少ない SolidJS を採用しました。

膨大なアセット数を扱うための工夫

膨大な数のアセットを取り扱う際に問題になるのがアプリのパフォーマンス面です。効率化のためのアプリがストレスフルな動作をしていては逆効果になってしまいます。

AnimationBridge では取り扱うアセット数が多くなっても快適に動作するように、次のような工夫を行っています。

• 検索に必要な最小限の情報をメモリ内に展開しておき、横断的な検索を瞬時に行えるようにする
• アセットのサムネイルは画面内に入ったアイテムだけ読み込む
  • 先読みのためのマージンも設定したかったため、実装には IntersectionObserver を使用しています。

今後の展望

AnimationBridge は名前のとおり主にアニメーションアセット用のアプリですが、同様の問題を抱えた他の種類のアセットにも適用していけると考えています。現状では試験的にサウンドアセットにも対応し始めました。

まとめ

この記事では、膨大なアセットの管理と活用の効率化を目指して開発された社内アプリ「AnimationBridge」について紹介しました。このツールによって、アセットの横断的な検索を素早く行い、使用したいアセットをワンクリックでゲームエンジン等にインポートしてすぐに使い始められるようになりました。テクニカルアーティストグループでは、今後もゲーム開発プロセスの効率化に取り組んでいきます。