UnityでFlutterライクにUIを書けるUIWidgetsを試す

はじめに

「UIWidgets」はUnityでFlutterライクにGUIが書ける公式パッケージです。
UnityTech/UIWidgets: UIWidget is a Unity Package which helps developers to create, debug and deploy efficient, cross-platform Apps.
以前から気になっていたので、試しにサンプルアプリを作ってみました。

インストール方法

Unityで新規プロジェクトを作成し、次のようにパッケージをダウンロードします。

cd <プロジェクト>/Packages
git clone https://github.com/UnityTech/UIWidgets.git com.unity.uiwidgets

ダウンロード後、
ProjectSettings>Player>OtherSettings>ScriptingDefineSymbolsへ「UIWidgets_DEBUG」を追加します。
(区切り文字は;なので、他にもシンボルが定義されている場合は、次のように追加します)

これで、UIWidgetsを使用可能になりました。

使用方法

新しくシーンを作成し、右クリック>UI>CanvasでCanvasをシーンに追加します。
次に、Canvasを選択し、右クリック>UI>PanelでPanelをCanvasに追加します。
その後、PanelからImageを削除しておきます。
あとは、次のようなスクリプトを作成し、 PanelにAddComponentします。

UIWidgetsExample.cs

using System.Collections.Generic;
using Unity.UIWidgets.animation;
using Unity.UIWidgets.engine;
using Unity.UIWidgets.foundation;
using Unity.UIWidgets.material;
using Unity.UIWidgets.painting;
using Unity.UIWidgets.ui;
using Unity.UIWidgets.widgets;
using UnityEngine;
using FontStyle = Unity.UIWidgets.ui.FontStyle;

namespace UIWidgetsSample
{
    // サンプルなカウンターアプリ
    public class UIWidgetsExample : UIWidgetsPanel
    {
        protected override void OnEnable()
        {
            // 独自のフォントや、フォントアイコンを使用したい場合
            // FontManager.instance.addFont(Resources.Load<Font>(path: "path to your font"), "font family name");

            // カスタムフォントを、Weights・Style付きでロード.
            // FontManager.instance.addFont(Resources.Load<Font>(path: "path to your font"), "Roboto", FontWeight.w500,
            //    FontStyle.italic);

            // マテリアルアイコンを追加。FamilyNameは必ず"Material Icons"
//            FontManager.instance.addFont(Resources.Load<Font>(path: "path to material icons"), "Material Icons");

            base.OnEnable();
        }

        protected override Widget createWidget()
        {
            return new WidgetsApp(
                home: new ExampleApp(),
                pageRouteBuilder: (RouteSettings settings, WidgetBuilder builder) => new PageRouteBuilder(
                    settings: settings,
                    pageBuilder: (BuildContext context, Animation<float> animation,
                        Animation<float> secondaryAnimation) => builder(context)
                )
            );
        }

        class ExampleApp : StatelessWidget
        {
            public override Widget build(BuildContext context)
            {
                return new MaterialApp(
                    home: new Counter()
                );
            }
        }

        class Counter : StatefulWidget
        {
            public Counter(Key key = null) : base(key)
            {
            }

            public override State createState()
            {
                return new CounterState();
            }
        }

        class CounterState : State<Counter>
        {
            private int counter = 0;

            public override Widget build(BuildContext context)
            {
                return new Scaffold(
                    appBar: new AppBar(
                        title: new Text("Example App")),
                    floatingActionButton: new FloatingActionButton(
                        child: new Icon(Icons.add, color: Colors.white),
                        onPressed: () => { this.setState(() => { this.counter++; }); }),
                    body: new Center(
                        child: new SizedBox(
                            height: 150,
                            child: new FittedBox(
                                child: new Text("Counter: " + this.counter)
                            )
                        )
                    )
                );
            }
        }
    }
}

ほぼほぼFlutterライクに書けました🎯

実行結果

次のように、カウンターアプリが表示されました。

Unityで神アプリを作ってた➕https://t.co/7BZSsfR611 pic.twitter.com/4ptGKbKNyz

— うぇるち🐶 (@welchi_) August 8, 2020

参考

UnityTech/UIWidgets: UIWidget is a Unity Package which helps developers to create, debug and deploy efficient, cross-platform Apps.
Unity - Manual: Platform dependent compilation