for windows, please replace ```libEGL.dll, libEGL.dll.meta, libGLESv2.dll and libGLESv2.dll``` in Editor from ones in ```com.unity.uiwidgets/Runtime/Plugins/x86_64``
## Getting Start
1. Create a new C# Script named "UIWidgetsExample.cs" and paste the following codes into it.
```csharp
using System.Collections.Generic;
using Unity.UIWidgets.animation;
using uiwidgets;
using Unity.UIWidgets.cupertino;
using Unity.UIWidgets.foundation;
using Unity.UIWidgets.material;
using Unity.UIWidgets.painting;
using UnityEngine;
using FontStyle = Unity.UIWidgets.ui.FontStyle;
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 override void OnEnable() {
namespace UIWidgetsSample
{
public class CountDemo : UIWidgetsPanel
{
protected void OnEnable()
{
// FontManager.instance.addFont(Resources.Load<Font>(path: "path to your font"), "font family name");
// load custom font with weight & style. The font weight & style corresponds to fontWeight, fontStyle of
// a TextStyle object
// FontManager.instance.addFont(Resources.Load<Font>(path: "path to your font"), "Roboto", FontWeight.w500,
// FontStyle.italic);
// add material icons, familyName must be "Material Icons"
// FontManager.instance.addFont(Resources.Load<Font>(path: "path to material icons"), "Material Icons");
// AddFont("Material Icons", new List<string> {"MaterialIcons-Regular.ttf"}, new List<int> {0});
public override Widget build(BuildContext context)
{
return new CupertinoApp(
home: new CounterApp()
);
}
}
public override State createState() {
return new ExampleState();
}
internal class CounterApp : StatefulWidget
{
public override State createState()
{
return new CountDemoState();
}
class ExampleState : State<ExampleApp> {
int counter = 0;
internal class CountDemoState : State<CounterApp>
{
private int count = 0;
public override Widget build(BuildContext context) {
return new Column(
children: new List<Widget> {
new Text("Counter: " + this.counter),
new GestureDetector(
onTap: () => {
this.setState(()
=> {
this.counter++;
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++;
padding: EdgeInsets.symmetric(20, 20),
color: Colors.blue,
child: new Text("Click Me")
color: Color.fromARGB(255,0 , 255, 0),
width: 100,
height: 40
)
),
);
}
)
);
}
}
}
all relevant resources and generate the final App package.
#### How to load images?
1. Put your images files in Resources folder. e.g. image1.png.
2. You can add image1@2.png and image1@3.png in the same folder to support HD screens.
3. Use Image.asset("image1") to load the image. Note: as in Unity, ".png" is not needed.
1. Put your images files in StreamingAssets folder. e.g. image1.png.
2. Use Image.file("image1.png") to load the image.
1. Suppose you have loading1.gif. Rename it to loading1.gif.bytes and copy it to Resources folder.
2. You can add loading1@2.gif.bytes and loading1@3.gif.bytes in the same folder to support HD screens.
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`,
it means the code is not running in the window scope. In this case, you can enclose your code
with window scope as below:
```csharp
using(WindowProvider.of(your gameObject with UIWidgetsPanel).getScope()) {
// code dealing with UIWidgets,
// e.g. setState(() => {....})
}
```
This is needed if the code is in methods
not invoked by UIWidgets. For example, if the code is in `completed` callback of `UnityWebRequest`,
you need to enclose them with window scope.
Please see [HttpRequestSample](./Samples/UIWidgetSample/HttpRequestSample.cs) for detail.
For callback/event handler methods from UIWidgets (e.g `Widget.build, State.initState...`), you don't need do
it yourself, since the framework ensure it's in window scope.
1. Suppose you have loading1.gif. and copy it to StreamingAssets folder.
2. Use Image.asset("loading1.gif") to load the gif images.
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, this
[solution](https://github.com/Over17/UnityShowAndroidStatusBar) seems to be
compatible to UIWidgets, therefore can be used as a good option before we release our
full support solution on this issue.
Besides,
please set "Render Outside Safe Area" to true in the "Player Settings" to make this plugin working properly on Android P or later.
#### Automatically Adjust Frame Rate
To build an App that is able to adjust the frame rate automatically, please open Project Settings, and in the Quality tab, set the "V Sync Count" option of the target platform to "Don't Sync".
The default logic is to reduce the frame rate when the screen is static, and change it back to 60 whenever the screen changes.
If you would like to disable this behavior, please set `Window.onFrameRateSpeedUp` and `Window.onFrameRateCoolDown` to null function, i.e., () => {}.
Note that in Unity 2019.3 and above, UIWidgets will use OnDemandRenderAPI to implement this feature, which will greatly save the battery.
#### WebGL Canvas Device Pixel Ratio Plugin
The width and height of the Canvas in browser may differ from the number of pixels the Canvas occupies on the screen.
Therefore, the image may blur in the builded WebGL program.
The Plugin `Plugins/platform/webgl/UIWidgetsCanvasDevicePixelRatio_20xx.x.jslib` (2018.3 and 2019.1 for now) solves this issue.
Please select the plugin of the Unity version corresponding to your project, and disable other versions of this plugin, as follows: select this plugin in the **Project** panel, and uncheck **WebGL** under **Select platforms for plugin** in the **Inspector** panel.
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
JS_SystemInfo_GetCurrentCanvasHeight
$Browser
$JSEvents
```
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.
To learn about the original script in detail, please refer to `SystemInfo.js` and `UnityNativeJS/UnityNative.js` in `PlaybackEngines/WebGLSupport/BuildTools/lib` in your Unity Editor installation.
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 disable```Start in fullscreen``` and ```record outside safe area```, make sure ```showStatusBar``` is ```true``` under ```UIWidgetsAndroidConfiguration```
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.
#### Update Emoji
UIWidgets supports rendering emoji in (editable) texts.
The default emoji resource version is [iOS 13.2](https://emojipedia.org/apple/ios-13.2).
We also prepared the resources of [Google Emoji](https://emojipedia.org/google).
To switch to Google version of emoji, please follow the following steps:
1. Copy `Runtime/Resources/backup~/EmojiGoogle.png` to `Runtime/Resources/images` folder.
2. In the **Project** panel, find and select `EmojiGoogle` asset, and in the **Inspector** panel, change **Max Size** to 4096, disable **Generate Mipmaps**, and enable **Alpha Is Transparency**.
3. In the `OnEnable()` function in your class overriding `UIWidgetsPanel`, add the following code
If you would like to use your own images for emoji, please follow the following steps:
1. Create the sprite sheet (take `EmojiGoogle.png` as an example), and put in a `Resources` folder in your project, (for example `Resources/myImages/MyEmoji.png`).
2. In the `OnEnable()` function, add the following code (replace example values with actual value). Note that the order of emoji codes should be consistent with the sprite sheet.
```csharp
EmojiUtils.configuration = new EmojiResourceConfiguration(
With the provided packaged stateful widget `UnityObjectDetector` and its `onRelease` callback function, you can easily drag some objects (for example GameObject from Hierarchy, files from Project Window, etc) into the area, get the UnityEngine.Object[] references and make further modification.
Please put images under StreamingAssets folder, and loading it by ```Image.file```.
#### Define UIWidgets_DEBUG
It's recommended to define the **UIWidgets_DEBUG** script symbol in editor, this will turn on
debug assertion in UIWidgets, which will help to find potential bugs earlier. To do this:
please go to **Player Settings -> Other Settings -> Configuration -> Scripting Define Symbols**,
and add **UIWidgets_DEBUG**.
The symbol is for debug purpose, please remove it from your release build.
How to switch debug/release mode in editor/runtime?
In Unity editor, you can switch debug/release mode by “UIWidgets->EnableDebug”.
#### UIWidgets Inspector
The UIWidgets Inspector tool is for visualizing and exploring the widget trees. You can find it
via *Window/Analysis/UIWidgets* inspector in Editor menu.
**Note**
* **UIWidgets_DEBUG** needs to be define for inspector to work properly.
* Inspector currently only works in Editor Play Mode, inspect standalone built application is not supported for now.
If you want to change different mode in runtime, please modify the file “com.unity.uiwidgets/com.unity.uiwidgets/Runtime/foundation/debug.cs” by making “static bool debugEnableAtRuntimeInternal” to true or false. Note that the value is set to false by default.
## Learn
* UIWidgetsSamples (https://github.com/UIWidgets/UIWidgetsSamples). These samples are developed by the dev team in order to illustrates all the features of
UIWidgets. First clone this Repo to the **Assets** folder of your local UIWidgets project. Then
* UIWidgetsSamples (https://github.com/Unity-Technologies/com.unity.uiwidgets). These samples are developed by the dev team in order to illustrates all the features of
UIWidgets.
you can find all the sample scenes under the **Scene** folder.
You can also try UIWidgets-based Editor windows by clicking the new **UIWidgetsTests** tab on the main menu
siyao
4 年前