Unity开发者联盟收藏本站
发帖教程新人必读切换到宽版

 找回密码
 立即注册
Unity开发者联盟»论坛 › 3D Answers 技术讨论 › 插件讨论 Plugs Answers › 不止游戏！如何使用Unity开发跨平台应用 -UIWidgets ...
返回列表 发新帖
查看: 592|回复: 0

不止游戏！如何使用Unity开发跨平台应用 -UIWidgets

[复制链接]
发表于 2021-1-11 10:25 | 显示全部楼层 |阅读模式

官方教程
https://www.zhihu.com/video/1132996435905605632
UIWidgets 是 Unity 的一个插件包，是一个从 Google 的移动 UI 框架 Flutter 演变过来的 UI 框架。UIWidgets是一个可以独立使用的 Unity Package (https://github.com/UnityTech/UIWidgets)。它将Flutter(https://flutter.io/)的App框架与Unity渲染引擎相结合，让您可以在Unity编辑器中使用一套代码构建出可以同时在PC、网页及移动设备上运行的原生应用。此外，您还可以在您的3D游戏或者Unity编辑器插件中用它来构建复杂的UI层，替换UGUI和IMGUI。
相对于原生开发的高开发成本（不同平台都需要不同的一套代码），Flutter、React-Native 等这种跨平台 UI 框架应运而生。
Flutter 自 2018 年 3 月发布以来，社区不断壮大。由于 Flutter 自身设计理念的出色，Unity 中国已经着手将其移植过来。当然了，也因为这两个东西都非常的年轻，因此开发的时候都像开荒一样。
视频教程


跨平台

与任何其他Unity项目一样，UIWidgets应用可以直接部署在各种平台上，包括PC，移动设备和网页等。
运行效率

通过使用最新的Unity渲染SDK，UIWidgets应用可以非常快速地运行并且大多数时间保持大于60fps的速度。


多媒体支持

除了基本的2D UI之外，开发人员还能够将3D模型，音频，粒子系统添加到UIWidgets应用中。
开发者友好

开发者可以使用许多高级工具，如CPU/GPU Profiling和FPS Profiling，直接在Unity Editor中调试UIWidgets应用。
基于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.3 或更高版本。 你可以从https://unity3d.com/get-unity/download下载最新的Unity。
UIWidgets包

访问我们的Github存储库 https://github.com/UnityTech/UIWidgets下载最新的UIWidgets包。
将下载的包文件夹移动到Unity项目的Package文件夹中。
通常，你可以在控制台（或终端）应用程序中输入下面的代码来完成这个操作：
  1. cd <YourProjectPath>/Packages
  2. 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。
    选择 File > New Scene来创建一个新场景。选择 GameObject > UI > Canvas 在场景中创建UI Canvas。右键单击Canvas并选择UI > Panel，将面板（即面板1）添加到UI Canvas中。 然后删除面板中的 Image 组件。
三、创建小部件

UIWidgets应用是用C＃脚本来编写的。 请按照以下步骤创建应用程序并在Unity编辑器中播放。
    创建一个新C＃脚本，命名为“UIWidgetsExample.cs”，并以下代码粘贴到其中。
  1. using System.Collections.Generic;
  2.     using Unity.UIWidgets.animation;
  3.     using Unity.UIWidgets.engine;
  4.     using Unity.UIWidgets.foundation;
  5.     using Unity.UIWidgets.material;
  6.     using Unity.UIWidgets.painting;
  7.     using Unity.UIWidgets.ui;
  8.     using Unity.UIWidgets.widgets;
  9.     using UnityEngine;
  10.     using FontStyle = Unity.UIWidgets.ui.FontStyle;
  12.     namespace UIWidgetsSample {
  13.         public class UIWidgetsExample : UIWidgetsPanel {
  14.             protected override void OnEnable() {
  15.                 // if you want to use your own font or font icons.
  16.                 // FontManager.instance.addFont(Resources.Load<Font>(path: "path to your font"), "font family name");
  18.                 // load custom font with weight & style. The font weight & style corresponds to fontWeight, fontStyle of
  19.                 // a TextStyle object
  20.                 // FontManager.instance.addFont(Resources.Load<Font>(path: "path to your font"), "Roboto", FontWeight.w500,
  21.                 //    FontStyle.italic);
  23.                 // add material icons, familyName must be "Material Icons"
  24.                 // FontManager.instance.addFont(Resources.Load<Font>(path: "path to material icons"), "Material Icons");
  26.                 base.OnEnable();
  27.             }
  29.             protected override Widget createWidget() {
  30.                 return new WidgetsApp(
  31.                     home: new ExampleApp(),
  32.                     pageRouteBuilder: (RouteSettings settings, WidgetBuilder builder) =>
  33.                         new PageRouteBuilder(
  34.                             settings: settings,
  35.                             pageBuilder: (BuildContext context, Animation<float> animation,
  36.                                 Animation<float> secondaryAnimation) => builder(context)
  37.                         )
  38.                 );
  39.             }
  41.             class ExampleApp : StatefulWidget {
  42.                 public ExampleApp(Key key = null) : base(key) {
  43.                 }
  45.                 public override State createState() {
  46.                     return new ExampleState();
  47.                 }
  48.             }
  50.             class ExampleState : State<ExampleApp> {
  51.                 int counter = 0;
  53.                 public override Widget build(BuildContext context) {
  54.                     return new Column(
  55.                         children: new List<Widget> {
  56.                             new Text("Counter: " + this.counter),
  57.                             new GestureDetector(
  58.                                 onTap: () => {
  59.                                     this.setState(() => {
  60.                                         this.counter++;
  61.                                     });
  62.                                 },
  63.                                 child: new Container(
  64.                                     padding: EdgeInsets.symmetric(20, 20),
  65.                                     color: Colors.blue,
  66.                                     child: new Text("Click Me")
  67.                                 )
  68.                             )
  69.                         }
  70.                     );
  71.                 }
  72.             }
  73.         }
  74.     }
复制代码
    保存此脚本，并将其附加到Panel 1中作为其组件。在Unity编辑器中，点击Play按钮来启动应用。
四、构建应用程序

最后，你可以按以下步骤将UIWidgets应用构建成适用于任何特定平台的应用程序包。
    选择File > **Build Settings...**打开Build Settings面板。选择目标平台，点击Build。 之后Unity编辑器将自动组装所有相关资源并生成最终的应用程序包。
五、如何加载图像？

    将你的图像文件，如image1.png，放在Resources文件夹中。你可以在同一文件夹中添加image1@2.png和image1@3.png以支持高清屏幕显示。使用Image.asset（“image1”）加载图像。 注意：因为是在Unity中，所以不需要添加.png后缀。
UIWidgets也支持Gif！
    假设你有一个loading1.gif文件，将其重命名为loading1.gif.bytes并复制到Resources文件夹。你可以在同一文件夹中添加loading1@2.gif.bytes和loading1@3.gif.bytes以支持高清屏幕显示。使用Image.asset（“loading1.gif”）加载gif图像。
六、在安卓上显示状态栏

当一个Unity项目运行在Android设备上时，状态栏是默认隐藏且无法在编辑内进行调整的。 如果您希望在您的UIWidgets App中显示状态栏，您可以使用这个解决方案。我们将尽快推出我们自己的解决方案，并保证届时开发者可以进行无缝切换。
此外，为了让上述插件在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构建模块中的如下参数：
  1. JS_SystemInfo_GetWidth
  2. JS_SystemInfo_GetHeight
  3. JS_SystemInfo_GetCurrentCanvasWidth
  4. JS_SystemInfo_GetCurrentCanvasHeight
  5. $Browser
  6. $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支持渲染文本中包含的表情。表情的图片来自https://www.joypixels.com提供的免费资源。 如果您希望使用自己的表情图片，请更新纹理图Tests/Resources/Emoji.png，以及Runtime/ui/txt/emoji.cs中将Unicode映射到纹理图中具体位置的映射表。 特别地，请记得更新Dictionary变量emojiLookupTable，纹理图的行数rowCount以及纹理图的列数colCount。
调试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)

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表 发新帖
懒得打字嘛，点击右侧快捷回复 【右侧内容，后台自定义】
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Unity开发者联盟 ( 粤ICP备20003399号 )

GMT+8, 2024-11-25 12:07 , Processed in 0.088958 second(s), 26 queries .

Powered by Discuz! X3.5 Licensed

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表