Flutter「を」Unity「へ」導入する

本連載は、iOS/Android向けのアプリでUIの表現力を高めることを目標に、Unity製アプリにFlutterを導入した例を、具体的な実装方法を交えながら紹介する記事です。

なぜUnityとFlutterを使う？

まずは、一般的にはUnity、Flutter単体で問題なくアプリケーション開発ができるのになぜ連携させる必要があるのかを説明したいと思います。そのためにまずUnity、Flutterそれぞれの特徴を見てみます。

Unity

Unityは、ゲーム開発者にとって非常に人気の高いゲームエンジンです。

非常に大きなコミュニティがあり、数多くのチュートリアル、ドキュメント、フォーラム、アセットストアが利用可能であり、日本語の情報も豊富にあります。

Unityの強み

高度な2Dおよび3Dグラフィックスを実現するための豊富な機能を提供しています。リアルなシミュレーション、リッチな視覚効果、そして高品質のアニメーションを作成することができます。
iOS、Android、PC、コンソールなど、さまざまなプラットフォームに対応しています。1つのコードベースで複数のプラットフォームに展開することができます。
物理エンジン、アニメーション、レンダリング、音声処理など、ゲーム開発に必要なさまざまな機能が提供されています。

Unityの不得意なこと

Unityはゲームエンジンとして開発されており、UIの表現力がやや限定されています。とくにモバイルアプリのUIにおいては、他のツールキットに比べて不得手と感じる場合があります。

Flutter

Flutterは、Googleが開発したオープンソースのUIツールキットであり、モバイル、Web、デスクトップ向けのアプリケーションを作成するためのフレームワークです。

Flutterの強み

美しいUIを簡単に構築することができます。ウィジェットを使用した柔軟なUI設計と、豊富なアニメーション効果などが提供されています。
iOS、Android、Web、PCなどに対応し、1つのコードベースで複数のプラットフォームに展開できます。
ホットリロード機能により、リアルタイムでUIの変更をプレビューすることができ、開発者は効率的にアプリを開発することができます。

Flutterの不得意なこと

主にUI開発に焦点を当てており、3Dグラフィックスのサポートは限定的です。そのため、本格的な3Dゲームを開発する場合には、他のツールやエンジンを検討する必要があります。

組み合わせることによって得られるメリット

それぞれの公式サイトのトップ画像を見てもらうとわかりやすいとは思いますが簡単にまとめると

Unity：2D/3Dなどリアルタイム描画に強いが、UI表現が心もとない
Flutter：リッチなUI表現を作ることができるが、2D/3Dのなどのリアルタイム描画はまだ発展途上

つまり、UnityとFlutterを組み合わせて使用することでそれぞれの強みを活かし、弱みを補い合うことができユーザにより魅力的な体験を提供することができるのではないかと考えたわけです。

Unity単体でもコストをかければリッチなUI表現が可能だとは思いますが、コストをかけてようやくiOS/Androidのツールキットと同じことができるという状況なのでそれならば簡単にリッチなUIを作れたほうが開発的にもユーザー的にも嬉しいというのが大きな理由となります。

UnityとFlutterの連携手段

では、実際にUnityとFlutterを具体的にどう連携させるのかを考えてみましょう。

Flutter＋Unity as a Library

まずはFlutterアプリにUnityを組み込む方法です。

Unityには Unity as a Library という既存のモバイルアプリケーションにUnityをLibraryとして挿入できる機能があります。

Flutter側にも flutter_unity_widget というまさにUnity as a Libraryと連携するためのpackageが存在します。

どちらも数は少ないですが実際の連携方法を紹介する日本語の記事がいくつか存在し手順通りに実装すれば連携できます。

Unity＋Flutter Add-to-app

続いて、UnityにFlutterを組み込む方法です。

Flutterには Add-to-appという機能が存在し、FlutterをModuleとして開発し既存のモバイルアプリケーションに組み込むことができます。

Unity側にはUnityで作られたモバイルアプリケーションに対して別のLibraryの組み込みを正式にサポートするような機能はありませんが、基本的にはiOS/Android上でUnityEngineが動いているだけなのでiOS/Android側のビルド時にプロジェクトを変更すれば問題なく組み込むことができます。

2024年4月現在、Flutter Add-to-appを使用し既存のモバイルアプリに組み込む方法を紹介する日本語記事は、少ないですがいくつか存在します。一方で、Unityに組み込むという記事は筆者はまだ見たことがありません……。

基本的には公式サイトで紹介されている連携方法を自分で解釈し実装を進めるしかなさそうです。

どちらを主体として開発を進めるか

いろいろと調べて見ましたが、基本的には、iOS/AndroidともにUnityEngineとFlutterEngineが存在するのでネイティブを介して通信をすることになり、双方ともにできることは大きくは変わらなさそうな印象でした。

そこで、今回は Flutter「を」Unity「へ」導入 することに決めました。

この方式を採用した決め手としてはいくつかあります

これまでUnityでアプリ開発を行っており、アプリ開発で本格的にFlutterを使用するのが初めて。
ビルド環境の構築やリリースまでの流れなどがUnityが主体になっていたほうがこれまでのノウハウが使える。
アプリケーション全体を管理する機能や便利機能などがC#で作られておりUnityを主体にしたほうがこれまでの資産が使用できる。

技術的なところが大きな理由ではありますが、私たちは現在Unityで開発しているアプリが多いのですが、ゲームアプリであってもiOS/Androidネイティブに近い操作性を求められることが多くなっており、UnityだけではなくFlutterという選択肢を増やしたいということも理由としては大きいです。

Unity as a Libraryという機能があることもあり、UnityとFlutterを連携させる方法としては、どちらかといえばFlutterにUnityを入れる方法のほうが一般的かなと思うのですが、自分たちも含め現在Unityでアプリを開発している方たちに対してFlutterという選択肢もあるのではないか？という提案の気持ちも込めて今回はこの方式で挑戦してみました。

この連載のゴール

こちらは実際にUnityからFlutterを呼び出しているサンプルとなります

この連載を通してどう実装するのかを具体的なコードを交えつつ紹介するのと、UnityとFlutterで並行して開発を進めるうえでのノウハウの紹介を行っていきたいと思います。