In this tutorial, we will create a very simple UIWidgets App as the kick-starter. The app contains
In this tutorial, we will create a very simple UIWidgets App as the kick-starter. The app contains
First of all, please open or create a Unity Project and open it with Unity Editor.
First of all, please open or create a Unity Project and open it with Unity Editor.
And then open Project Settings, go to Player section and **add "UIWidgets_DEBUG" to the Scripting Define Symbols field.**
This enables the debug mode of UIWidgets for your development. Remove this for your release build afterwards.
UI Canvas in Unity.
1. Create a new Scene by "File -> New Scene";
1. Create a UI Canvas in the scene by "GameObject -> UI -> Canvas";
1. Add a Panel (i.e., **Panel 1**) to the UI Canvas by right click on the Canvas and select "UI -> Panel". Then remove the
1. 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
1. Create a new C# Script named "UIWidgetsExample.cs" and paste the following codes into it.
```none
```csharp
using System.Collections.Generic;
using Unity.UIWidgets.animation;
using Unity.UIWidgets.engine;
using Unity.UIWidgets.widgets;
using UnityEngine;
using FontStyle = Unity.UIWidgets.ui.FontStyle;
// if you want to use your own font or font icons.
// if you want to use your own font or font icons.
// load custom font with weight & style. The font weight & style corresponds to fontWeight, fontStyle of
// load custom font with weight & style. The font weight & style corresponds to fontWeight, fontStyle of
// FontManager.instance.addFont(Resources.Load<Font>(path: "path to your font"), "Roboto", FontWeight.w500,
// FontManager.instance.addFont(Resources.Load<Font>(path: "path to your font"), "Roboto", FontWeight.w500,
protected override Widget createWidget() {
return new WidgetsApp(
home: new ExampleApp(),
)
);
}
public override Widget build(BuildContext context) {
return new Column(
children: new List<Widget> {
}
}
```
1. Save this script and attach it to **Panel 1** as its component.
1. Press the "Play" Button to start the App in Unity Editor.
1. Choose a target platform and click "Build". Then the Unity Editor will automatically assemble
1. 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?
3. Use Image.asset("loading1.gif") to load the gif images.
#### Using Window Scope
If you see the error ```AssertionError: Window.instance is null``` or null pointer error of ```Window.instance```,
If you see the error `AssertionError: Window.instance is null` or null pointer error of `Window.instance`,
```
```csharp
// code dealing with UIWidgets,
// code dealing with UIWidgets,
not invoked by UIWidgets. For example, if the code is in ```completed``` callback of ```UnityWebRequest```,
you need to enclose them with window scope.
not invoked by UIWidgets. For example, if the code is in `completed` callback of `UnityWebRequest`,
you need to enclose them with window scope.
For callback/event handler methods from UIWidgets (e.g ```Widget.build, State.initState...```), you don't need do
For callback/event handler methods from UIWidgets (e.g `Widget.build, State.initState...`), you don't need do
[solution](https://github.com/Over17/UnityShowAndroidStatusBar) seems to be
[solution](https://github.com/Over17/UnityShowAndroidStatusBar) seems to be
full support solution on this issue.
full support solution on this issue.
#### Automatically Adjust Frame Rate
If you need to disable this plugin for any reason, please disable all the versions of this plugin as described above.
This plugin overrides the following parameters in the Unity WebGL building module:
```
```none
JS_SystemInfo_GetWidth
JS_SystemInfo_GetHeight
JS_SystemInfo_GetCurrentCanvasWidth
```
If you would like to implement your own WebGL plugin, and your plugin overrides at least one of the above parameters, you need to disable the `UIWidgetsCanvasDevicePixelRatio` plugin in the above mentioned way to avoid possible conflicts.
If you would like to implement your own WebGL plugin, and your plugin overrides at least one of the above parameters, you need to disable the `UIWidgetsCanvasDevicePixelRatio` plugin in the above mentioned way to avoid possible conflicts.
If you still need the function provided by this plugin, you can mannually apply the modification to Unity WebGL building module introduced in this plugin.
All the modifications introduced in `UIWidgetsCanvasDevicePixelRatio` are marked by `////////// Modifcation Start ////////////` and `////////// Modifcation End ////////////`.
In the marked codes, all the multiplications and divisions with `devicePixelRatio` are introduced by our modification.
Unity, by default, resizes the width and height of an imported image to the nearest integer that is a power of 2.
In UIWidgets, you should almost always disable this by selecting the image in the "Project" panel, then in the "Inspector" panel set the "Non Power of 2" option (in "Advanced") to "None", to prevent your image from being resized unexpectedly.
It's recommended to define the **UIWidgets_DEBUG** script symbol in editor, this will turn on
It's recommended to define the **UIWidgets_DEBUG** script symbol in editor, this will turn on
please go to **Player Settings -> Other Settings -> Configuration -> Scripting Define Symbols**,
and add **UIWidgets_DEBUG**.
please go to **Player Settings -> Other Settings -> Configuration -> Scripting Define Symbols**,
and add **UIWidgets_DEBUG**.
via *Window/Analysis/UIWidgets* inspector in Editor menu.
via *Window/Analysis/UIWidgets* inspector in Editor menu.
* **UIWidgets_DEBUG** needs to be define for inspector to work properly.
* **UIWidgets_DEBUG** needs to be define for inspector to work properly.
You can find many UIWidgets App samples in the UIWidgets package in the **Samples** folder.
You can find many UIWidgets App samples in the UIWidgets package in the **Samples** folder.
You can also try UIWidgets-based Editor windows by clicking **UIWidgetsTest** on the main menu
You can also try UIWidgets-based Editor windows by clicking **UIWidgetsTest** on the main menu
you can refer to Flutter Wiki to access detailed descriptions of UIWidgets APIs
you can refer to Flutter Wiki to access detailed descriptions of UIWidgets APIs
from those of their Flutter counterparts.
Meanwhile, you can join the discussion channel at (https://connect.unity.com/g/uiwidgets)
| Can I use UIWidgets to build game UIs? | **Yes** |
| Can I develop Unity Editor plugins using UIWidgets? | **Yes** |
| Is UIWidgets a extension of UGUI/NGUI? | **No** |
| Is UIWidgets just a copy of Flutter? | **No** |
| Is UIWidgets just a copy of Flutter? | **No** |
| Can I create UI with UIWidgets by simply drag&drop? | **No** |
| Do I have to pay for using UIWidgets? | **No** |
| Any IDE recommendation for UIWidgets? | **Rider, VSCode(Open .sln)** |
GitHub
5 年前