:warning: The main repository of UIWidgets is migrated to https://github.com/UIWidgets/com.unity.uiwidgets and developed at the new place. Although you can still report issues here, please try visit the new site to obtain the latest UIWidgets. Thanks!

UIWidgets 2.0 (preview)

中文

:rocket: Join us :rocket:

The team is now providing several open positions for full-time software engineer based in Shanghai, Unity China :cn:.

If you are skilled in Unity or flutter and interested in UIWidgets, please join our QQ Group: UIWidgets (Group ID: 234207153), WeChat Group: UIWidgets 二群 or contact me directly (QQ: 541252510) for the oppotunity to Come and Build UIWidgets with us in Unity China!

Introduction

UIWidgets is a plugin package for Unity Editor which helps developers to create, debug and deploy efficient, cross-platform Apps using the Unity Engine.

UIWidgets is mainly derived from Flutter. However, taking advantage of the powerful Unity Engine, it offers developers many new features to improve their Apps as well as the develop workflow significantly.

UIWidgets 2.0 is developed for Unity China version deliberately and aims to optimize the overall performance of the package. Specifically, a performance gain around 10% is observed on mobile devices like iPhone 6 after upgrading to UIWidgets 2.0.

If you still want to use the original UIWidgets 1.0, please download the archived packages from Releases or switch your working branch to uiwidgets_1.0.

Efficiency

Using the latest Unity rendering SDKs, a UIWidgets App can run very fast and keep >60fps in most times.

Cross-Platform

A UIWidgets App can be deployed on all kinds of platforms including PCs and mobile devices directly, like any other Unity projects.

Multimedia Support

Except for basic 2D UIs, developers are also able to include 3D Models, audios, particle-systems to their UIWidgets Apps.

Developer-Friendly

A UIWidgets App can be debug in the Unity Editor directly with many advanced tools like CPU/GPU Profiling, FPS Profiling.

Example

Projects using UIWidgets

Unity Connect App

The Unity Connect App is created using UIWidgets 2.0 and available for both Android (https://unity.cn/connectApp/download) and iOS (Searching for "Unity Connect" in App Store). This project is open-sourced @https://github.com/UIWidgets/ConnectAppCN2.

Unity Chinese Doc

The official website of Unity Chinese Documentation (https://connect.unity.com/doc) is powered by UIWidgets 1.0 and open-sourced @https://github.com/UnityTech/DocCN.

Requirements

Unity

:warning: UIWidgets 2.0 are only compatible with Unity China version

Specifically, the compatible Unity versions for each UIWidgets release are listed below. You can download the latest Unity on https://unity.cn/releases.

| UIWidgets version | Unity 2019 LTS | Unity 2020 LTS | | -----------------------------------------------| ------------------------- | ------------------------- | | 1.5.4 and below | 2019.4.10f1 and above | N\A | | 2.0.1 | 2019.4.26f1c1 | N\A | | 2.0.3 | 2019.4.26f1c1 ~ 2019.4.29f1c1 | N\A | | 2.0.4 and above | 2019.4.26f1c1 ~ 2019.4.29f1c1 | 2020.3.24f1c2 and above |

UIWidgets Package (video tutorial)

Visit our Github repository https://github.com/Unity-Technologies/com.unity.uiwidgets to download the latest UIWidgets package.

Move the downloaded package folder into the root folder of your Unity project.

Generally, you can make it using a console (or terminal) application by just a few commands as below:

 cd <YourProjectPath>
 git clone https://github.com/Unity-Technologies/com.unity.uiwidgets.git com.unity.uiwidgets

Note that there are many native libraries we built for UIWidget 2.0 to boost its performance, which are large files and hosted by Git Large File Storage. You need to install this service first and then use it to fetch these libraries.

Finally, in PackageManger of unity, select add local file. select package.json under /com.unity.uiwidgets

Runtime Environment

:warning: Though UIWidgets 1.0 is compatible to all platforms, currently UIWidgets 2.0 only supports MacOS(Intel64, Metal/OpenGLCore), iOS(Metal/OpenGLes), Android(OpenGLes) and Windows(Direct3D11). More devices will be supported in the future.

Getting Start

i. Overview

In this tutorial, we will create a very simple UIWidgets App as the kick-starter. The app contains only a text label and a button. The text label will count the times of clicks upon the button.

First of all, please open or create a Unity Project and open it with Unity Editor.

ii. Scene Build

A UIWidgets App is usually built upon a Unity UI Canvas. Please follow the steps to create a UI Canvas in Unity.

Create a new Scene by "File -> New Scene";
Create a UI Canvas in the scene by "GameObject -> UI -> Canvas";
Add a Panel (i.e., Panel 1) to the UI Canvas by right click on the Canvas and select "UI -> Panel". Then remove the Image Component from the Panel.

iii. Create Widget

A UIWidgets App is written in C# Scripts. Please follow the steps to create an App and play it in Unity Editor.

Create a new C# Script named "UIWidgetsExample.cs" and paste the following codes into it.

 using System.Collections.Generic;
 using uiwidgets;
 using Unity.UIWidgets.cupertino;
 using Unity.UIWidgets.engine;
 using Unity.UIWidgets.ui;
 using Unity.UIWidgets.widgets;
 using Text = Unity.UIWidgets.widgets.Text;
 using ui_ = Unity.UIWidgets.widgets.ui_;
 using TextStyle = Unity.UIWidgets.painting.TextStyle;

 namespace UIWidgetsSample
 {
     public class UIWidgetsExample : UIWidgetsPanel
     {
         protected void OnEnable()
         {
             // if you want to use your own font or font icons.
                 // AddFont("Material Icons", new List<string> {"MaterialIcons-Regular.ttf"}, new List<int> {0});
             base.OnEnable();
         }

         protected override void main()
         {
             ui_.runApp(new MyApp());
         }

         class MyApp : StatelessWidget
         {
             public override Widget build(BuildContext context)
             {
                 return new CupertinoApp(
                     home: new CounterApp()
                 );
             }
         }
     }

     internal class CounterApp : StatefulWidget
     {
         public override State createState()
         {
             return new CountDemoState();
         }
     }

     internal class CountDemoState : State<CounterApp>
     {
         private int count = 0;

         public override Widget build(BuildContext context)
         {
             return new Container(
                 color: Color.fromARGB(255, 255, 0, 0),
                 child: new Column(children: new List<Widget>()
                     {
                         new Text($"count: {count}", style: new TextStyle(color: Color.fromARGB(255, 0 ,0 ,255))),
                         new CupertinoButton(
                             onPressed: () =>
                             {
                                 setState(() =>
                                 {
                                     count++;
                                 });
                             },
                             child: new Container(
                                 color: Color.fromARGB(255,0 , 255, 0),
                                 width: 100,
                                 height: 40
                             )
                         ),
                     }
                 )
             );
         }
     }
 }

Save this script and attach it to Panel 1 as its component.
Press the "Play" Button to start the App in Unity Editor.

iv. Build App

Finally, the UIWidgets App can be built to packages for any specific platform by the following steps.

Open the Build Settings Panel by "File -> Build Settings..."
Choose a target platform and click "Build". Then the Unity Editor will automatically assemble all relevant resources and generate the final App package.

How to load images?

Put your images files in StreamingAssets folder. e.g. image1.png.
Use Image.file("image1.png") to load the image.

UIWidgets supports Gif as well!

Put your gif files in StreamingAssets folder. e.g. loading1.gif.
Use Image.file("loading1.gif") to load the gif images.

Show Status Bar on Android

Status bar is always hidden by default when an Unity project is running on an Android device. If you want to show the status bar in your App, you can disableStart in fullscreen and record outside safe area, make sure showStatusBar is true

Com.unity.uiwidgets

Install / Use

README