Yuncong Zhang
5 年前
当前提交
53e2118d
共有 7 个文件被更改,包括 976 次插入 和 169 次删除
-
37Documentation~/CONTRIBUTING.md
-
2Documentation~/TableOfContents.md
-
327Documentation~/com.unity.uiwidgets.md
-
283Documentation~/index-zh.md
-
327Documentation~/index.md
-
169Documentation~/your-package-name.md
|
|||
This repository exists for the sole purpose of publishing to package manager. Please contribute to https://github.com/UnityTech/UIWidgets instead. |
|||
|
|||
# Contributing |
|||
|
|||
## If you are interested in contributing, here are some ground rules: |
|||
|
|||
### Code Style (using JetBrains Rider) |
|||
1. **Import the Customized Code Cleanup Settings**: Open Preferences -> Manage Layers, |
|||
Choose 'Solution "\<YourProjectName\>" personal' and Click "Add Layer" ("+") -> "Open Settings File...". |
|||
and Open the file "UIWidgetCleanupPlugin.DotSettings" under \<YourProjectPath\>/Packages/com.unity.uiwidgets/" |
|||
|
|||
2. **Cleanup Code style using the Customized Code Cleanup Settings**: Open Code -> Code Cleanup, |
|||
Pick a Cleanup scope as you want and Choose "UIWidgets" as the "Code cleanup profile", then click "OK" |
|||
|
|||
3. **Refine Code Style Rules**: Edit the ".editorconfig" file under \<YourProjectPath\>/Packages/com.unity.uiwidgets/". Visit |
|||
https://www.jetbrains.com/help/rider/EditorConfig_Index.html for the detailed. |
|||
|
|||
### Generate Code. |
|||
|
|||
Code files ending with ".gen.cs" are auto generated. Follow these steps to generate them: |
|||
|
|||
1. **Go to scripts Folder and Run npm install**: |
|||
``` |
|||
cd <YourProjectPath>/Packages/com.unity.uiwidgets/scripts~ |
|||
npm install |
|||
``` |
|||
|
|||
2. **Run the codegen Command**: |
|||
``` |
|||
node uiwidgets-cli.js codegen . generate mixin code |
|||
``` |
|||
|
|||
|
|||
## All contributions are subject to the [Unity Contribution Agreement(UCA)](https://unity3d.com/legal/licenses/Unity_Contribution_Agreement) |
|||
By making a pull request, you are confirming agreement to the terms and conditions of the UCA, including that your Contributions are your original creation and that you have complete right and authority to make your Contributions. |
|||
|
|||
## Once you have a change ready following these ground rules. Simply make a pull request |
|
|||
* [UIWidgets Documentation](index) |
|||
* [UIWidgets中文文档](index-zh) |
|
|||
# UIWidgets |
|||
|
|||
|
|||
## 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](https://github.com/flutter/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. |
|||
|
|||
#### 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, mobile devices and web page 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 |
|||
|
|||
<div style="text-align: center"><table><tr> |
|||
<td style="text-align: center"> |
|||
<img src="https://connect-prd-cdn.unity.com/20190323/p/images/2a27606f-a2cc-4c9f-9e34-bb39ae64d06c_uiwidgets1.gif" width="200"/> |
|||
</td> |
|||
<td style="text-align: center"> |
|||
<img src="https://connect-prd-cdn.unity.com/20190323/p/images/097a7c53-19b3-4e0a-ad27-8ec02506905d_uiwidgets2.gif" width="200" /> |
|||
</td> |
|||
<td style="text-align: center"> |
|||
<img src="https://connect-prd-cdn.unity.com/20190323/p/images/1f03c1d0-758c-4dde-b3a9-2f5f7216b7d9_uiwidgets3.gif" width="200"/> |
|||
</td> |
|||
<td style="text-align: center"> |
|||
<img src="https://connect-prd-cdn.unity.com/20190323/p/images/a8884fbd-9e7c-4bd7-af46-0947e01d01fd_uiwidgets4.gif" width="200"/> |
|||
</td> |
|||
</tr></table></div> |
|||
|
|||
### Projects using UIWidgets |
|||
|
|||
#### Unity Connect App |
|||
The Unity Connect App is created using UIWidgets and available for both Android (https://connect.unity.com/connectApp/download) |
|||
and iOS (Searching for "Unity Connect" in App Store). This project is open-sourced @https://github.com/UnityTech/ConnectAppCN. |
|||
|
|||
#### Unity Chinese Doc |
|||
The official website of Unity Chinese Documentation (https://connect.unity.com/doc) is powered by UIWidgets and |
|||
open-sourced @https://github.com/UnityTech/DocCN. |
|||
|
|||
## Requirements |
|||
|
|||
#### Unity |
|||
|
|||
Install **Unity 2018.4.10f1 (LTS)** or **Unity 2019.1.14f1** and above. You can download the latest Unity on https://unity3d.com/get-unity/download. |
|||
|
|||
#### UIWidgets Package |
|||
Visit our Github repository https://github.com/UnityTech/UIWidgets |
|||
to download the latest UIWidgets package. |
|||
|
|||
Move the downloaded package folder into the **Package** folder of your Unity project. |
|||
|
|||
Generally, you can make it using a console (or terminal) application by just a few commands as below: |
|||
|
|||
```none |
|||
cd <YourProjectPath>/Packages |
|||
git clone https://github.com/UnityTech/UIWidgets.git com.unity.uiwidgets |
|||
``` |
|||
|
|||
## 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. |
|||
|
|||
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. |
|||
|
|||
#### 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. |
|||
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 |
|||
**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. |
|||
|
|||
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 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() { |
|||
// if you want to use your own font or font icons. |
|||
// 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"); |
|||
|
|||
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 : StatefulWidget { |
|||
public ExampleApp(Key key = null) : base(key) { |
|||
} |
|||
|
|||
public override State createState() { |
|||
return new ExampleState(); |
|||
} |
|||
} |
|||
|
|||
class ExampleState : State<ExampleApp> { |
|||
int counter = 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++; |
|||
}); |
|||
}, |
|||
child: new Container( |
|||
padding: EdgeInsets.symmetric(20, 20), |
|||
color: Colors.blue, |
|||
child: new Text("Click Me") |
|||
) |
|||
) |
|||
} |
|||
); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
|
|||
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. |
|||
|
|||
#### iv. Build App |
|||
Finally, the UIWidgets App can be built to packages for any specific platform by the following steps. |
|||
1. Open the Build Settings Panel by "File -> Build Settings..." |
|||
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? |
|||
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. |
|||
|
|||
UIWidgets supports Gif as well! |
|||
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. |
|||
|
|||
#### 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, 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 set the frame rate to 25 when the screen is static, and change the frame rate to 60 whenever the screen changes. |
|||
If you would like to modify the behavior of speeding up or cooling down the frame rate, please set `Window.onFrameRateSpeedUp` and/or `Window.onFrameRateCoolDown` to your own functions. |
|||
|
|||
#### 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. |
|||
|
|||
#### Image Import Setting |
|||
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 emoji images comes from the free |
|||
resources provided by [Google Emoji](https://emojipedia.org/google). If you would |
|||
like to use your own images for emoji, please update the texture image `Tests/Resources/Emoji.png`, |
|||
and the unicode-index table in `Runtime/ui/txt/emoji.cs` which maps unicodes to specific locations |
|||
in the texture. Specifically, remember to update the Dictionary `emojiLookupTable`, number of rows |
|||
in the texture `rowCount`, and number of columns `colCount`. |
|||
|
|||
#### Interact with GameObject Drag&Drops |
|||
|
|||
<p align="center"> |
|||
<img src="https://connect-prd-cdn.unity.com/20190718/p/images/e3c9cf9b-c732-4eb2-9afd-fe7de894f342_Custom_Inspector_Showcase_320px.gif" width="300"/> |
|||
</p> |
|||
|
|||
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 refer to "UIWidgetsTests -> Drag&Drop" for simple examples. |
|||
|
|||
|
|||
## Debug UIWidgets Application |
|||
|
|||
#### 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. |
|||
|
|||
#### 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. |
|||
|
|||
## Learn |
|||
|
|||
#### Samples |
|||
You can find many UIWidgets App samples in the UIWidgets package in the **Samples** folder. |
|||
Feel free to try them out and make modifications to see the results. |
|||
To get started, the UIWidgetsTheatre scene provides you |
|||
a list of carefully selected samples to start with. |
|||
|
|||
You can also try UIWidgets-based Editor windows by clicking **UIWidgetsTest** on the main menu |
|||
and open one of the dropdown samples. |
|||
|
|||
#### Wiki |
|||
The develop team is still working on the UIWidgets Wiki. However, since UIWidgets is mainly derived from Flutter, |
|||
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) |
|||
|
|||
#### FAQ |
|||
|
|||
| Question | Answer | |
|||
| :-----------------------------------------------| ---------------------: | |
|||
| Can I create standalone App using UIWidgets? | **Yes** | |
|||
| 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** | |
|||
| 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)** | |
|||
|
|||
## How to Contribute |
|||
|
|||
Check [CONTRIBUTING](CONTRIBUTING) |
|
|||
# UIWidgets |
|||
|
|||
|
|||
## 介绍 |
|||
|
|||
UIWidgets是Unity编辑器的一个插件包,可帮助开发人员通过Unity引擎来创建、调试和部署高效的跨平台应用。 |
|||
|
|||
UIWidgets主要来自[Flutter](https://github.com/flutter/flutter)。但UIWidgets通过使用强大的Unity引擎为开发人员提供了许多新功能,显著地改进他们开发的应用性能和工作流程。 |
|||
|
|||
#### 效率 |
|||
通过使用最新的Unity渲染SDK,UIWidgets应用可以非常快速地运行并且大多数时间保持大于60fps的速度。 |
|||
|
|||
#### 跨平台 |
|||
与任何其他Unity项目一样,UIWidgets应用可以直接部署在各种平台上,包括PC,移动设备和网页等。 |
|||
|
|||
#### 多媒体支持 |
|||
除了基本的2D UI之外,开发人员还能够将3D模型,音频,粒子系统添加到UIWidgets应用中。 |
|||
|
|||
#### 开发者友好 |
|||
开发者可以使用许多高级工具,如CPU/GPU Profiling和FPS Profiling,直接在Unity Editor中调试UIWidgets应用。 |
|||
|
|||
## 示例 |
|||
|
|||
<div style="text-align: center"><table><tr> |
|||
<td style="text-align: center"> |
|||
<img src="https://connect-prd-cdn.unity.com/20190323/p/images/2a27606f-a2cc-4c9f-9e34-bb39ae64d06c_uiwidgets1.gif" width="200"/> |
|||
</td> |
|||
<td style="text-align: center"> |
|||
<img src="https://connect-prd-cdn.unity.com/20190323/p/images/097a7c53-19b3-4e0a-ad27-8ec02506905d_uiwidgets2.gif" width="200" /> |
|||
</td> |
|||
<td style="text-align: center"> |
|||
<img src="https://connect-prd-cdn.unity.com/20190323/p/images/1f03c1d0-758c-4dde-b3a9-2f5f7216b7d9_uiwidgets3.gif" width="200"/> |
|||
</td> |
|||
<td style="text-align: center"> |
|||
<img src="https://connect-prd-cdn.unity.com/20190323/p/images/a8884fbd-9e7c-4bd7-af46-0947e01d01fd_uiwidgets4.gif" width="200"/> |
|||
</td> |
|||
</tr></table></div> |
|||
|
|||
### 基于UIWidgets的项目 |
|||
|
|||
#### Unity Connect App |
|||
Unity Connect App是使用UIWidgets开发的一个移动App产品,您随时可以在Android (https://connect.unity.com/connectApp/download) |
|||
以及iOS (Searching for "Unity Connect" in App Store)端下载到它最新的版本. 本项目的所有代码均开源@https://github.com/UnityTech/ConnectAppCN. |
|||
|
|||
#### Unity中文官方文档 |
|||
Unity的线上中文官方文档由UIWidgets开发,您可以点击以下网址 https://connect.unity.com/doc 来访问它的全部内容。该项目目前已开源,所有代码可以在 |
|||
https://github.com/UnityTech/DocCN 查看。 |
|||
|
|||
## 使用要求 |
|||
|
|||
#### Unity |
|||
|
|||
安装 **Unity 2018.4.10f1(LTS)** 或 **Unity 2019.1.14f1** 及其更高版本。 你可以从[https://unity3d.com/get-unity/download](https://unity3d.com/get-unity/download)下载最新的Unity。 |
|||
|
|||
#### UIWidgets包 |
|||
|
|||
访问我们的Github存储库 [https://github.com/UnityTech/UIWidgets](https://github.com/UnityTech/UIWidgets)下载最新的UIWidgets包。 |
|||
|
|||
将下载的包文件夹移动到Unity项目的Package文件夹中。 |
|||
|
|||
通常,你可以在控制台(或终端)应用程序中输入下面的代码来完成这个操作: |
|||
|
|||
```none |
|||
cd <YourProjectPath>/Packages |
|||
git clone https://github.com/UnityTech/UIWidgets.git com.unity.uiwidgets |
|||
``` |
|||
|
|||
## 入门指南 |
|||
|
|||
#### 一、 概观 |
|||
在本教程中,我们将创建一个非常简单的UIWidgets应用。 该应用只包含文本标签和按钮。 文本标签将计算按钮上的点击次数。 |
|||
|
|||
首先,请打开或创建Unity项目并使用Unity编辑器打开它。 |
|||
|
|||
然后打开Project Settings,转到Player部分并**将“UIWidgets_DEBUG”添加到Scripting Define Symbols字段中。** |
|||
|
|||
这样就启动了UIWidgets的调试模式。 在之后发布版本的时候清空这个字段。 |
|||
|
|||
#### 二、 场景构建 |
|||
|
|||
UIWidgets应用通常构建在Unity UI Canvas上。 请按照以下步骤在Unity中创建一个 |
|||
UI Canvas。 |
|||
1. 选择 File > New Scene来创建一个新场景。 |
|||
2. 选择 GameObject > UI > Canvas 在场景中创建UI Canvas。 |
|||
3. 右键单击Canvas并选择UI > Panel,将面板(即面板1)添加到UI Canvas中。 然后删除面板中的 **Image** 组件。 |
|||
|
|||
#### 三、创建小部件 |
|||
|
|||
UIWidgets应用是用**C#脚本**来编写的。 请按照以下步骤创建应用程序并在Unity编辑器中播放。 |
|||
1. 创建一个新C#脚本,命名为“UIWidgetsExample.cs”,并将以下代码粘贴到其中。 |
|||
|
|||
```csharp |
|||
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() { |
|||
// if you want to use your own font or font icons. |
|||
// 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"); |
|||
|
|||
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 : StatefulWidget { |
|||
public ExampleApp(Key key = null) : base(key) { |
|||
} |
|||
|
|||
public override State createState() { |
|||
return new ExampleState(); |
|||
} |
|||
} |
|||
|
|||
class ExampleState : State<ExampleApp> { |
|||
int counter = 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++; |
|||
}); |
|||
}, |
|||
child: new Container( |
|||
padding: EdgeInsets.symmetric(20, 20), |
|||
color: Colors.blue, |
|||
child: new Text("Click Me") |
|||
) |
|||
) |
|||
} |
|||
); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
|
|||
2. 保存此脚本,并将其附加到Panel 1中作为其组件。 |
|||
3. 在Unity编辑器中,点击Play按钮来启动应用。 |
|||
|
|||
#### 四、构建应用程序 |
|||
|
|||
最后,你可以按以下步骤将UIWidgets应用构建成适用于任何特定平台的应用程序包。 |
|||
1. 选择**File** > **Build Settings...**打开Build Settings面板。 |
|||
2. 选择目标平台,点击Build。 之后Unity编辑器将自动组装所有相关资源并生成最终的应用程序包。 |
|||
|
|||
#### 五、如何加载图像? |
|||
1. 将你的图像文件,如image1.png,放在Resources文件夹中。 |
|||
2. 你可以在同一文件夹中添加image1@2.png和image1@3.png以支持高清屏幕显示。 |
|||
3. 使用Image.asset(“image1”)加载图像。 注意:因为是在Unity中,所以不需要添加.png后缀。 |
|||
|
|||
|
|||
UIWidgets也支持Gif! |
|||
1. 假设你有一个loading1.gif文件,将其重命名为loading1.gif.bytes并复制到Resources文件夹。 |
|||
2. 你可以在同一文件夹中添加loading1@2.gif.bytes和loading1@3.gif.bytes以支持高清屏幕显示。 |
|||
3. 使用Image.asset(“loading1.gif”)加载gif图像。 |
|||
|
|||
#### 六、在安卓上显示状态栏 |
|||
当一个Unity项目运行在Android设备上时,状态栏是默认隐藏且无法在编辑内进行调整的。 |
|||
如果您希望在您的UIWidgets App中显示状态栏,您可以使用这个[解决方案](https://github.com/Over17/UnityShowAndroidStatusBar)。我们将尽快推出我们自己的解决方案,并保证届时开发者可以进行无缝切换。 |
|||
|
|||
此外,为了让上述插件在Android P及以上Android系统中正常工作,请勾选上"Player Settings"中的"Render Outside Safe Area"选项。 |
|||
|
|||
#### 七、自动调节帧率 |
|||
如果要使得构建出的应用能够自动调节帧率,请打开Project Settings,将构建目标平台对应的Quality选项卡中的V Sync Count设置为Don't Sync。 |
|||
默认的逻辑是在界面静止时将帧率降低为25,在界面变动时将帧率提高至60。 |
|||
如果您需要修改帧率升高或降低时的行为,请将`Window.onFrameRateSpeedUp`和/或`Window.onFrameRateCoolDown`设置为您自己的函数。 |
|||
|
|||
#### 八、WebGL Canvas分辨率调整插件 |
|||
因为浏览器中Canvas的宽高和其在显示器上的像素数可能不一致,所以构建出的WebGL程序中画面可能会模糊。 |
|||
插件`Plugins/platform/webgl/UIWidgetsCanvasDevicePixelRatio_20xx.x.jslib`(目前有2018.3和2019.1)解决了这个问题。 |
|||
请根据您的项目的Unity版本选择对应的插件,并禁用此插件的其他版本。方法如下:在Project面板中选中该插件,在Inspector面板中的Select platforms for plugin中,去掉WebGL后面的对勾。 |
|||
如果您因为任何原因需要完全禁止此插件的功能,请按上述方法禁用此插件的所有版本。 |
|||
|
|||
此插件覆盖了Unity WebGL构建模块中的如下参数: |
|||
```none |
|||
JS_SystemInfo_GetWidth |
|||
JS_SystemInfo_GetHeight |
|||
JS_SystemInfo_GetCurrentCanvasWidth |
|||
JS_SystemInfo_GetCurrentCanvasHeight |
|||
$Browser |
|||
$JSEvents |
|||
``` |
|||
如果您需要实现自己的WebGL插件,并且您的插件覆盖了这些参数中的至少一种,您需要采用上文中提到的方法禁用`UIWidgetsCanvasDevicePixelRatio`插件,以防止可能的冲突。 |
|||
如果您仍然需要此插件所提供的功能,您可以手动将此插件对Unity WebGL构建模块的修改应用到您的插件中。 |
|||
`UIWidgetsCanvasDevicePixelRatio`插件中所有的修改之处都以`////////// Modification Start ////////////`和`////////// Modification End ////////////`标识。 |
|||
在被标识的代码中,所有乘/除以`devicePixelRatio`都来自于我们的修改。 |
|||
若您需要详细了解此插件所修改的脚本,请参考您的Unity Editor安装目录下的`PlaybackEngines/WebGLSupport/BuildTools/lib`文件夹中的`SystemInfo.js`和`UnityNativeJS/UnityNative.js`。 |
|||
|
|||
#### 九、图片导入设置 |
|||
默认情况下,Unity会将导入图片的宽和高放缩为最近的等于2的幂的整数。 |
|||
在UIWidgets中使用图片时,记得将这一特性关闭,以免图片被意外放缩,方法如下:在Project面板中选中图片,在"Inspector"面板中将"Non Power of 2"(在"Advanced"中)设置为"None"。 |
|||
|
|||
#### 十、更新表情(Emoji) |
|||
UIWidgets支持渲染文本中包含的表情。表情的图片来自[Google Emoji](https://emojipedia.org/google)提供的免费资源。 |
|||
如果您希望使用自己的表情图片,请更新纹理图`Tests/Resources/Emoji.png`,以及`Runtime/ui/txt/emoji.cs`中将Unicode映射到纹理图中具体位置的映射表。 |
|||
特别地,请记得更新Dictionary变量`emojiLookupTable`,纹理图的行数`rowCount`以及纹理图的列数`colCount`。 |
|||
|
|||
#### 十一、与GameObject进行拖拽交互 |
|||
|
|||
<p align="center"> |
|||
<img src="https://connect-prd-cdn.unity.com/20190718/p/images/e3c9cf9b-c732-4eb2-9afd-fe7de894f342_Custom_Inspector_Showcase_320px.gif" width="300"/> |
|||
</p> |
|||
|
|||
我们提供了一个包装好的`UnityObjectDetector`组件以及`onRelease`回调函数,借此您可以实现简单地将物体(例如Hierarchy内的场景物体、Project窗口下的文件等)拖拽至区域内,来获得`UnityEngine.Object[] `类型的引用并进行操作。 |
|||
|
|||
你可以在“UIWidgetsTests -> Drag&Drop”下找到简单的实例样例。 |
|||
|
|||
|
|||
## 调试UIWidgets应用程序 |
|||
|
|||
#### 定义UIWidgets_DEBUG |
|||
我们建议在Unity编辑器中定义 UIWidgets_DEBUG 脚本符号,这将打开UIWidgets中的调试断言(debug assertion),有助于更早发现潜在的Bug。 |
|||
因此选择 **Player Settings** > **Other Settings** > **Configuration** > **Scripting Define Symbols** ,并添加 UIWidgets_DEBUG。 |
|||
该符号仅供调试使用,请在发布版本中删除它。 |
|||
|
|||
#### UIWidgets Inspector |
|||
|
|||
UIWidgets Inspector工具用于可视化和浏览窗口小部件树。 你可以在Unity编辑器的**Window** > **Analysis** > **UIWidget Inspector** 中的找到它。 |
|||
|
|||
注意 |
|||
- 需要定义 UIWidgets_DEBUG 使inspector正常工作。 |
|||
- Inspector目前仅适用于编辑器的播放模式,目前不支持独立版本的应用程序。 |
|||
|
|||
|
|||
## 学习 |
|||
|
|||
#### 示例 |
|||
|
|||
你可以在**Samples**文件夹的UIWidgets包中找到一些精心挑选的UIWidgets应用示例,并通过这些示例来开始你的学习。请随意尝试并进行修改以查看结果。 |
|||
|
|||
你也可以在支持**UIWidgets**的编辑器中,点击主菜单上的UIWidgets,并在下拉窗口中选择一个示例。 |
|||
|
|||
#### Wiki |
|||
|
|||
目前开发团队仍在改进UIWidgets Wiki。 由于UIWidgets主要来源于Flutter,你也可以参考Flutter Wiki中与UIWidgets API对应部分的详细描述。同时,你可以加入我们的讨论组( https://connect.unity.com/g/uiwidgets )。 |
|||
|
|||
#### 常问问题解答 |
|||
|
|||
| 问题 | 回答 | |
|||
| :-----------------------------------------------| ---------------------: | |
|||
| 我可以使用UIWidgets创建独立应用吗? | 可以 | |
|||
| 我可以使用UIWidgets构建游戏UI吗? | 可以 | |
|||
| 我可以使用UIWidgets开发Unity编辑器插件吗? | 可以 | |
|||
| UIWidgets是UGUI / NGUI的扩展吗? | 不是 | |
|||
| UIWidgets只是Flutter的副本吗? | 不是 | |
|||
| 我可以通过简单的拖放操作来创建带有UIWidgets的UI吗? | 不可以 | |
|||
| 我是否需要付费使用UIWidgets? | 不需要 | |
|||
| 有推荐的适用于UIWidgets的IDE吗? | Rider, VSCode(Open .sln) | |
|||
|
|||
## 如何贡献 |
|||
请查看[CONTRIBUTING](CONTRIBUTING) |
|
|||
# UIWidgets |
|||
|
|||
|
|||
## 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](https://github.com/flutter/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. |
|||
|
|||
#### 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, mobile devices and web page 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 |
|||
|
|||
<div style="text-align: center"><table><tr> |
|||
<td style="text-align: center"> |
|||
<img src="https://connect-prd-cdn.unity.com/20190323/p/images/2a27606f-a2cc-4c9f-9e34-bb39ae64d06c_uiwidgets1.gif" width="200"/> |
|||
</td> |
|||
<td style="text-align: center"> |
|||
<img src="https://connect-prd-cdn.unity.com/20190323/p/images/097a7c53-19b3-4e0a-ad27-8ec02506905d_uiwidgets2.gif" width="200" /> |
|||
</td> |
|||
<td style="text-align: center"> |
|||
<img src="https://connect-prd-cdn.unity.com/20190323/p/images/1f03c1d0-758c-4dde-b3a9-2f5f7216b7d9_uiwidgets3.gif" width="200"/> |
|||
</td> |
|||
<td style="text-align: center"> |
|||
<img src="https://connect-prd-cdn.unity.com/20190323/p/images/a8884fbd-9e7c-4bd7-af46-0947e01d01fd_uiwidgets4.gif" width="200"/> |
|||
</td> |
|||
</tr></table></div> |
|||
|
|||
### Projects using UIWidgets |
|||
|
|||
#### Unity Connect App |
|||
The Unity Connect App is created using UIWidgets and available for both Android (https://connect.unity.com/connectApp/download) |
|||
and iOS (Searching for "Unity Connect" in App Store). This project is open-sourced @https://github.com/UnityTech/ConnectAppCN. |
|||
|
|||
#### Unity Chinese Doc |
|||
The official website of Unity Chinese Documentation (https://connect.unity.com/doc) is powered by UIWidgets and |
|||
open-sourced @https://github.com/UnityTech/DocCN. |
|||
|
|||
## Requirements |
|||
|
|||
#### Unity |
|||
|
|||
Install **Unity 2018.4.10f1 (LTS)** or **Unity 2019.1.14f1** and above. You can download the latest Unity on https://unity3d.com/get-unity/download. |
|||
|
|||
#### UIWidgets Package |
|||
Visit our Github repository https://github.com/UnityTech/UIWidgets |
|||
to download the latest UIWidgets package. |
|||
|
|||
Move the downloaded package folder into the **Package** folder of your Unity project. |
|||
|
|||
Generally, you can make it using a console (or terminal) application by just a few commands as below: |
|||
|
|||
```none |
|||
cd <YourProjectPath>/Packages |
|||
git clone https://github.com/UnityTech/UIWidgets.git com.unity.uiwidgets |
|||
``` |
|||
|
|||
## 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. |
|||
|
|||
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. |
|||
|
|||
#### 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. |
|||
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 |
|||
**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. |
|||
|
|||
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 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() { |
|||
// if you want to use your own font or font icons. |
|||
// 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"); |
|||
|
|||
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 : StatefulWidget { |
|||
public ExampleApp(Key key = null) : base(key) { |
|||
} |
|||
|
|||
public override State createState() { |
|||
return new ExampleState(); |
|||
} |
|||
} |
|||
|
|||
class ExampleState : State<ExampleApp> { |
|||
int counter = 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++; |
|||
}); |
|||
}, |
|||
child: new Container( |
|||
padding: EdgeInsets.symmetric(20, 20), |
|||
color: Colors.blue, |
|||
child: new Text("Click Me") |
|||
) |
|||
) |
|||
} |
|||
); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
``` |
|||
|
|||
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. |
|||
|
|||
#### iv. Build App |
|||
Finally, the UIWidgets App can be built to packages for any specific platform by the following steps. |
|||
1. Open the Build Settings Panel by "File -> Build Settings..." |
|||
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? |
|||
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. |
|||
|
|||
UIWidgets supports Gif as well! |
|||
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. |
|||
|
|||
#### 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, 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 set the frame rate to 25 when the screen is static, and change the frame rate to 60 whenever the screen changes. |
|||
If you would like to modify the behavior of speeding up or cooling down the frame rate, please set `Window.onFrameRateSpeedUp` and/or `Window.onFrameRateCoolDown` to your own functions. |
|||
|
|||
#### 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. |
|||
|
|||
#### Image Import Setting |
|||
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 emoji images comes from the free |
|||
resources provided by [Google Emoji](https://emojipedia.org/google). If you would |
|||
like to use your own images for emoji, please update the texture image `Tests/Resources/Emoji.png`, |
|||
and the unicode-index table in `Runtime/ui/txt/emoji.cs` which maps unicodes to specific locations |
|||
in the texture. Specifically, remember to update the Dictionary `emojiLookupTable`, number of rows |
|||
in the texture `rowCount`, and number of columns `colCount`. |
|||
|
|||
#### Interact with GameObject Drag&Drops |
|||
|
|||
<p align="center"> |
|||
<img src="https://connect-prd-cdn.unity.com/20190718/p/images/e3c9cf9b-c732-4eb2-9afd-fe7de894f342_Custom_Inspector_Showcase_320px.gif" width="300"/> |
|||
</p> |
|||
|
|||
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 refer to "UIWidgetsTests -> Drag&Drop" for simple examples. |
|||
|
|||
|
|||
## Debug UIWidgets Application |
|||
|
|||
#### 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. |
|||
|
|||
#### 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. |
|||
|
|||
## Learn |
|||
|
|||
#### Samples |
|||
You can find many UIWidgets App samples in the UIWidgets package in the **Samples** folder. |
|||
Feel free to try them out and make modifications to see the results. |
|||
To get started, the UIWidgetsTheatre scene provides you |
|||
a list of carefully selected samples to start with. |
|||
|
|||
You can also try UIWidgets-based Editor windows by clicking **UIWidgetsTest** on the main menu |
|||
and open one of the dropdown samples. |
|||
|
|||
#### Wiki |
|||
The develop team is still working on the UIWidgets Wiki. However, since UIWidgets is mainly derived from Flutter, |
|||
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) |
|||
|
|||
#### FAQ |
|||
|
|||
| Question | Answer | |
|||
| :-----------------------------------------------| ---------------------: | |
|||
| Can I create standalone App using UIWidgets? | **Yes** | |
|||
| 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** | |
|||
| 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)** | |
|||
|
|||
## How to Contribute |
|||
|
|||
Check [CONTRIBUTING](CONTRIBUTING) |
|
|||
>>> |
|||
**_Package Documentation Template_** |
|||
|
|||
Use this template to create preliminary, high-level documentation meant to introduce users to the feature and the sample files included in this package. When writing your documentation, do the following: |
|||
|
|||
1. Follow instructions in blockquotes. |
|||
|
|||
2. Replace angle brackets with the appropriate text. For example, replace "<package name>" with the official name of the package. |
|||
|
|||
3. Delete sections that do not apply to your package. For example, a package containing only sample files does not have a "Using <package_name>" section, so this section can be removed. |
|||
|
|||
4. After documentation is completed, make sure you delete all instructions and examples in blockquotes including this preamble and its title: |
|||
|
|||
``` |
|||
>>> |
|||
Delete all of the text between pairs of blockquote markdown. |
|||
>>> |
|||
``` |
|||
>>> |
|||
|
|||
# About <package name> |
|||
|
|||
>>> |
|||
Name the heading of the first topic after the **displayName** of the package as it appears in the package manifest. Check with your Product Manager to ensure that the package is named correctly. |
|||
|
|||
This first topic includes a brief, high-level explanation of the package and, if applicable, provides links to Unity Manual topics. |
|||
|
|||
There are two types of packages: |
|||
|
|||
- Packages that include features that augment the Unity Editor or Runtime. |
|||
- Packages that include sample files. |
|||
|
|||
Choose one of the following introductory paragraphs that best fits the package: |
|||
>>> |
|||
|
|||
Use the <package name> package to <list of the main uses for the package>. For example, use <package name> to create/generate/extend/capture <mention major use case, or a good example of what the package can be used for>. The <package name> package also includes <other relevant features or uses>. |
|||
|
|||
> *or* |
|||
|
|||
The <package name> package includes examples of <name of asset type, model, prefabs, and/or other GameObjects in the package>. For more information, see <xref to topic in the Unity Manual>. |
|||
|
|||
>>> |
|||
**_Examples:_** |
|||
|
|||
Here are some examples for reference only. Do not include these in the final documentation file: |
|||
|
|||
*Use the Unity Recorder package to capture and save in-game data. For example, use Unity Recorder to record an mp4 file during a game session. The Unity Recorder package also includes an interface for setting-up and triggering recording sessions.* |
|||
|
|||
*The Timeline Examples package includes examples of Timeline assets, Timeline Instances, animation, GameObjects, and scripts that illustrate how to use Unity's Timeline. For more information, see [ Unity's Timeline](https://docs.unity3d.com/Manual/TimelineSection.html) in the [Unity Manual](https://docs.unity3d.com). For licensing and usage, see Package Licensing.* |
|||
>>> |
|||
|
|||
# Installing <package name> |
|||
>>> |
|||
Begin this section with a cross-reference to the official Unity Manual topic on how to install packages. If the package requires special installation instructions, include these steps in this section. |
|||
>>> |
|||
|
|||
To install this package, follow the instructions in the [Package Manager documentation](https://docs.unity3d.com/Packages/com.unity.package-manager-ui@latest/index.html). |
|||
|
|||
>>> |
|||
For some packages, there may be additional steps to complete the setup. You can add those here. |
|||
>>> |
|||
|
|||
In addition, you need to install the following resources: |
|||
|
|||
- <name of resource>: To install, open *Window > <name of menu item>*. The resource appears <at this location>. |
|||
- <name of sample>: To install, open *Window > <name of menu item>*. The new sample folder appears <at this location>. |
|||
|
|||
|
|||
<a name="UsingPackageName"></a> |
|||
# Using <package name> |
|||
>>> |
|||
The contents of this section depends on the type of package. |
|||
|
|||
For packages that augment the Unity Editor with additional features, this section should include workflow and/or reference documentation: |
|||
|
|||
* At a minimum, this section should include reference documentation that describes the windows, editors, and properties that the package adds to Unity. This reference documentation should include screen grabs (see how to add screens below), a list of settings, an explanation of what each setting does, and the default values of each setting. |
|||
* Ideally, this section should also include a workflow: a list of steps that the user can easily follow that demonstrates how to use the feature. This list of steps should include screen grabs (see how to add screens below) to better describe how to use the feature. |
|||
|
|||
For packages that include sample files, this section may include detailed information on how the user can use these sample files in their projects and scenes. However, workflow diagrams or illustrations could be included if deemed appropriate. |
|||
|
|||
## How to add images |
|||
|
|||
*(This section is for reference. Do not include in the final documentation file)* |
|||
|
|||
If the [Using <package name>](#UsingPackageName) section includes screen grabs or diagrams, a link to the image must be added to this MD file, before or after the paragraph with the instruction or description that references the image. In addition, a caption should be added to the image link that includes the name of the screen or diagram. All images must be PNG files with underscores for spaces. No animated GIFs. |
|||
|
|||
An example is included below: |
|||
|
|||
![A cinematic in the Timeline Editor window.](images/example.png) |
|||
|
|||
Notice that the example screen shot is included in the images folder. All screen grabs and/or diagrams must be added and referenced from the images folder. |
|||
|
|||
For more on the Unity documentation standards for creating and adding screen grabs, see this confluence page: https://confluence.hq.unity3d.com/pages/viewpage.action?pageId=13500715 |
|||
>>> |
|||
|
|||
|
|||
|
|||
# Technical details |
|||
## Requirements |
|||
>>> |
|||
This subtopic includes a bullet list with the compatible versions of Unity. This subtopic may also include additional requirements or recommendations for 3rd party software or hardware. An example includes a dependency on other packages. If you need to include references to non-Unity products, make sure you refer to these products correctly and that all references include the proper trademarks (tm or r) |
|||
>>> |
|||
|
|||
This version of <package name> is compatible with the following versions of the Unity Editor: |
|||
|
|||
* 2018.1 and later (recommended) |
|||
|
|||
To use this package, you must have the following 3rd party products: |
|||
|
|||
* <product name and version with trademark or registered trademark.> |
|||
* <product name and version with trademark or registered trademark.> |
|||
* <product name and version with trademark or registered trademark.> |
|||
|
|||
## Known limitations |
|||
>>> |
|||
This section lists the known limitations with this version of the package. If there are no known limitations, or if the limitations are trivial, exclude this section. An example is provided. |
|||
>>> |
|||
|
|||
<package name> version <package version> includes the following known limitations: |
|||
|
|||
* <brief one-line description of first limitation.> |
|||
* <brief one-line description of second limitation.> |
|||
* <and so on> |
|||
|
|||
>>> |
|||
*Example (For reference. Do not include in the final documentation file):* |
|||
|
|||
The Unity Recorder version 1.0 has the following limitations:* |
|||
|
|||
* The Unity Recorder does not support sound. |
|||
* The Recorder window and Recorder properties are not available in standalone players. |
|||
* MP4 encoding is only available on Windows. |
|||
>>> |
|||
|
|||
## Package contents |
|||
>>> |
|||
This section includes the location of important files you want the user to know about. For example, if this is a sample package containing textures, models, and materials separated by sample group, you may want to provide the folder location of each group. |
|||
>>> |
|||
|
|||
The following table indicates the <describe the breakdown you used here>: |
|||
|
|||
|Location|Description| |
|||
|---|---| |
|||
|`<folder>`|Contains <describe what the folder contains>.| |
|||
|`<file>`|Contains <describe what the file represents or implements>.| |
|||
|
|||
>>> |
|||
*Example (For reference. Do not include in the final documentation file):* |
|||
|
|||
The following table indicates the root folder of each type of sample in this package. Each sample's root folder contains its own Materials, Models, or Textures folders: |
|||
|
|||
|Folder Location|Description| |
|||
|---|---| |
|||
|`WoodenCrate_Orange`|Root folder containing the assets for the orange crates.| |
|||
|`WoodenCrate_Mahogany`|Root folder containing the assets for the mahogany crates.| |
|||
|`WoodenCrate_Shared`|Root folder containing any material assets shared by all crates.| |
|||
>>> |
|||
|
|||
## Document revision history |
|||
>>> |
|||
This section includes the revision history of the document. The revision history tracks when a document is created, edited, and updated. If you create or update a document, you must add a new row describing the revision. The Documentation Team also uses this table to track when a document is edited and its editing level. An example is provided: |
|||
|
|||
|Date|Reason| |
|||
|---|---| |
|||
|Sept 12, 2017|Unedited. Published to package.| |
|||
|Sept 10, 2017|Document updated for package version 1.1.<br>New features: <li>audio support for capturing MP4s.<li>Instructions on saving Recorder prefabs| |
|||
|Sept 5, 2017|Limited edit by Documentation Team. Published to package.| |
|||
|Aug 25, 2017|Document created. Matches package version 1.0.| |
|||
>>> |
撰写
预览
正在加载...
取消
保存
Reference in new issue