NoesisGUI和Unity的第一步

unity.jpg

本教程介绍了在Unity中使用NoesisGUI的基础知识。您将学习如何开始编辑NoesisGUI软件包中包含的示例，以及如何从头开始创建新应用程序。NoesisGUI与Uni​​ty紧密集成，XAMLs作为直接使用Unity导入的资产（如Textures，Fonts和AudioClips）的本机资源出现。强烈建议您阅读本教程的其余部分，以熟悉XAML和Noesis体系结构的基本概念。

spacer.png

安装

更新说明

尽管并非绝对必要，但我们建议在安装新版本的NoesisGUI之前，关闭Unity并删除“ / Assets / NoesisGUI / Plugins”和“ / Assets / NoesisGUI / Samples”文件夹。

要做的第一件事是将下载的 NoesisGUI-XXXunity软件包安装到Unity项目中。您可以通过单击Unity菜单选项来执行此操作

资产 -> 导入包 -> 自定义包...

并选择您从我们的网页下载的NoesisGUI-XXXunitypackage文件。一种更快的选择是将unitypackage拖到项目窗口中。

Unity3DTutorialImg1.png

默认情况下会安装样本和文档。记住取消勾选那些您不需要的项目。我们的示例也可以在GitHub上获得，并且可以在我们的网站上在线阅读文档。

Unity3DTutorialImg101.png

安装完成后，将出现一个欢迎窗口，为您提供有关新安装的NoesisGUI版本的信息。请花些时间阅读发行说明，以了解新功能。

注意

由于Unity中本机插件的限制，您可能会收到警告，要求重新启动Unity。

Unity3DTutorialImg1_.png

例子

在已安装的软件包中，我们提供了一些工作示例。您可以在“ / Assets / NoesisGUI / Samples ”文件夹中找到每个场景文件（.unity）。我们还为每个样本提供Microsoft Blend项目。它们位于“ / Assets ”文件夹之外。还提供了一个包含所有样本的解决方案“ Samples-blend.sln ”。

可以在GitHub存储库中找到更多示例。

Unity3DTutorialImg2_.png

配置NoesisGUI

单击Unity菜单选项Tools- > NoesisGUI- > Settings将打开一个检查器窗口，其中显示NoesisGUI的全局选项。此窗口也可在NoesisGUI类别下的“ 项目设置”中使用。如果您想了解有关特定选项的更多详细信息，只需将鼠标悬停在该选项上即可获得有用的工具提示说明。

Unity3DTutorialImg2.png

Blend

提供了Visual Studio扩展，以创建与WPF和Unity兼容的Blend项目。用于Visual Studio的Microsoft Blend（以前称为Microsoft Expression Blend）是用于设计基于XAML的界面的交互式WYSIWYG前端。此工作流程将允许在设计用户界面时进行快速迭代。在Blend中执行的更改将立即显示在Unity Editor中。

注意

为了开始使用Blend，我们建议您阅读Blend Native教程

Visual Studio Marketplace中提供了Unity的项目模板。要在Visual Studio中安装此模板，请执行以下操作：

• 启动Visual Studio，然后从菜单栏中单击扩展 -> 管理扩展。
• 在Extension Manager中，展开Online节点并搜索Noesis。下载NoesisGUI项目模板扩展，然后重新启动Visual Studio。

Unity3DTutorialImg13.png

要从项目模板创建应用程序，只需使用Visual Studio起始页中的Unity App（NoesisGUI）模板创建一个新的C＃解决方案。

Unity3DTutorialImg15.png

注意

需要修改具有代码后置功能的用户控件，以便在Blend和Unity中正确编译。必须使用预处理程序宏指令#define和#if来区分与WPF不100％兼容的Noesis代码。我们所有的示例都以这种方式使用预处理程序指令。

资产

XAML资产

当您将XAML文件拖放到Unity Asset文件夹中时，它将自动创建NoesisXaml资产。如果资产已经存在，它将对其进行更新。由于Unity当前不支持导入自定义文件扩展名，因此您的项目中最终将拥有两个文件.xaml和.asset。.xaml文件是您在外部编辑的文件，如果Unity可以理解资源，则是.asset文件。如果您不需要编辑.xaml，则可以将其从项目中删除，因为运行时不需要它。尽管这不是严格需要的，因为.xaml文件未包含在Unity生成的最终版本中。

注意

我们建议将Blend项目（.csproj）放在/ Assets文件夹旁边，然后直接在其中编辑.xaml文件。每次进行更改时，Unity都会更新相应的资源。

NoesisXaml资源提供有用的缩略图和预览，您可以使用它们来区分项目中的原始.xaml。

Unity3DTutorialImg20.png

导入过程将自动将依赖项注入到已使用的资源中，例如资源字典，纹理，AudioClips，字体和UserControls。要获取给定XAML的依赖项列表，您只需单击它以打开将显示该信息的编辑器。

Unity3DTutorialImg21_.png

万一您需要向XAML添加额外的依赖关系，例如ViewModel中的代码使用的资源，我们为此提供了一个扩展属性Xaml.Dependencies。

<UserControl
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:noesis="clr-namespace:NoesisGUIExtensions"
  x:Class="Localization.MainWindow"
  FontFamily="./#Oxygen, ./#FontopoNIHONGO"
  Foreground="#FF488EB5">

  <noesis:Xaml.Dependencies>
    <noesis:Dependency Source="Language-en.xaml"/>
    <noesis:Dependency Source="Language-fr.xaml"/>
    <noesis:Dependency Source="Language-jp.xaml"/>
  </noesis:Xaml.Dependencies>

</UserControl>

纹理资产

XAML内部使用的图像会生成对相应Unity 素材资源的依赖。Unity导入的资产由Noesis直接使用。这意味着将考虑“导入设置”下使用的所有设置。如果您的图像具有Alpha，请确保将Alpha Source设置为Input Texture Alpha，然后取消选中Alpha is Transparency。另外，请确保在纹理上添加标签“ Noesis”，以将其自动转换为Noesis所需的预乘alpha格式。

注意

在我们的论坛上找到有关预乘alpha的更多信息。

Unity3DTutorialImg22.png

AudioClip资产

NoesisGUI使用Behaviors架构本地支持AudioClips 。PlaySoundAction中使用的剪辑会自动添加为XAML依赖项。

字体资产

与XAML相似，每次将.ttf，.otf或.ttc文件拖放到项目中时，该文件都会导入到相应的.asset文件中，该文件存储有关字体的所需信息，以便在运行时进行渲染。为字体显示了一个编辑器窗口，该字体显示诸如Family，Weight，Style和Stretch等属性以及渲染预览。

Unity3DTutorialImg220.png

游戏手柄

NoesisGUI可以理解以下Unity Input Manager轴和按钮。

<colgroup style="box-sizing: inherit;"><col width="31%" style="box-sizing: inherit;"><col width="19%" style="box-sizing: inherit;"><col width="50%" style="box-sizing: inherit;"></colgroup>

使用给定的轴名称，您可以配置任何游戏手柄或操纵杆以与NoesisGUI一起使用。有关每个Noesis映射的含义的更多信息可以在C ++ Integration Tutorial中找到。我们所有的示例都带有与Xbox控制器兼容的输入系统配置。

Unity3DTutorialImg21.png

渲染图

负责渲染XAML 的MonoBehaviour是NoesisView。您需要将该组件附加到GameObject。如果附加到Camera对象，则用户界面将呈现为相机顶部的一层。

通过将XAML资产拖放到“ 场景视图”中，可以轻松地设置向摄像机渲染的用户界面。您还可以将XAML拖放到“ 层次结构窗口”中。

Unity3DTutorialImg4.png

要显示用户界面并与之交互，您必须进入播放模式。请注意，在“播放”模式下，NoesisView预览窗口将显示有助于优化界面的性能统计信息。

image.png

注意

默认情况下，相机后期处理效果会影响GUI。如果您不希望这种情况发生。您需要创建一个新的相机来渲染NoesisGUI。此摄像机必须具有更大的“ 深度”值，并且必须将“ 清除标志”设置为“不清除”。您还必须确保将“ 剔除蒙版”设置为“ 无”，以避免在此相机中渲染3D元素。

统一错误

使用Camera Stacking（将多个摄像机渲染到同一渲染目标）时，请确保渲染UI的摄像机的“ Culling Mask”属性设置为“ Nothing”。这样可以避免在最新版本的Unity中出现错误。

有时，您不希望将用户界面直接呈现到屏幕或相机上。NoesisGUI支持将XAML渲染为可以稍后映射到对象的纹理。只要将NoesisView附加到不是摄影机的任何GameObject上，就会激活“ 渲染纹理”模式。在此模式下，新属性“ 目标纹理”可用。只需在Unity中创建“ 渲染纹理”资源并将其分配给该属性即可。

Unity3DTutorialImg61.png

注意

为了进行屏蔽，NoesisGUI需要模板缓冲区。可以通过选择24位深度缓冲区在Unity中激活它。

此纹理还必须由分配给“ 网格渲染器 ”（Mesh Renderer）的一种材料（在此示例中为“ 平面”）使用。

Unity3DTutorialImg62.png

注意

默认情况下，在“渲染纹理”模式下，禁用“连续渲染”属性以仅在发生更改时进行渲染。

Unity3DTutorialImg63.png

如果你想与纹理渲染的GUI交互，您的游戏对象必须有一个MeshCollider组件，因此纹理坐标可以做的命中测试投影时得到。

命中测试

在某些情况下，有必要检查鼠标是否在UI上或是否在UI的任何元素上被单击。这可以通过VisualTreeHelper类提供的HitTest方法来完成。

这是一个接收到Collider鼠标事件的示例，我们想知道是否应该丢弃它，因为之前可能已经单击过任何UI元素：

using UnityEngine;
using Noesis;

public class HitTestSample : MonoBehaviour
{
    Visual _root;

    void Start()
    {
        var gui = GetComponent<NoesisView>();
        _root = (Visual)gui.Content;
    }

    void OnMouseDown()
    {
        UnityEngine.Vector3 mousePos = Input.mousePosition;
        Point point = new Point(mousePos.x, Screen.height - mousePos.y);
        HitTestResult hit = VisualTreeHelper.HitTest(this._root, point);
        if (hit.VisualHit == null)
        {
            // No UI element was hit

            // ...your code here
        }
    }
}

独立播放器

iOS

目前，不支持Bitcode。必须在项目设置中将其禁用。

Unity3DTutorialImg102.png

安卓系统

Android的构建过程非常简单，只需考虑一些设置。遵循的步骤是：

1. 选择文件->构建设置 ...

Unity3DTutorialImg11.png

2. 选择要部署的场景
3. 选择平台Android
4. 调整所需的播放器设置（分辨率，图标，启动画面...）。确保最低API级别至少为Android 2.3.3'Gingerbread'。NoesisGUI与以前的Android版本不兼容。
5. 点击构建按钮
6. 选择要保存.apk文件的位置
7. 将.apk安装到您的Android设备中并运行

您还可以生成一个Eclipse项目来扩展您的应用程序。在这种情况下，步骤如下：

1. 选择文件->构建设置...
2. 选择要部署的场景
3. 选择平台Android
4. 调整所需的播放器设置（分辨率，图标，启动画面...）。确保最低API级别至少为Android 2.3.3'Gingerbread'。NoesisGUI与以前的Android版本不兼容。
5. 点击导出按钮
6. 选择要存储Eclipse项目的位置
7. 优化部署的数据
8. 使用Eclipse构建项目以生成.apk文件
9. 将.apk安装到您的Android设备中并运行

注意

如果您的应用程序需要使用.OBB扩展文件，则您可能应该选中选项Split Application Binary。然后，可以方便地设置“播放器设置”选项“向<tt class="docutils literal" style="box-sizing: inherit; background-color: rgb(242, 242, 242); font-family: Consolas, "Deja Vu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 0.95em; letter-spacing: 0.01em; border-bottom: 1px solid rgb(221, 221, 221); color: rgb(51, 51, 51); border-radius: 3px; padding: 0px 4px;">外部</tt>写入访问权限<tt class="docutils literal" style="box-sizing: inherit; background-color: rgb(242, 242, 242); font-family: Consolas, "Deja Vu Sans Mono", "Bitstream Vera Sans Mono", monospace; font-size: 0.95em; letter-spacing: 0.01em; border-bottom: 1px solid rgb(221, 221, 221); color: rgb(51, 51, 51); border-radius: 3px; padding: 0px 4px;">（SDCard）”</tt>。我们发现几个客户端在安装后就无法运行该应用程序，因为Unity无法访问扩展文件，并且找不到XAML资源。

Unity3DTutorialImg12.png

超人

仅支持适用于Windows 10的通用Windows平台。

1. 确保将SDK设置为“通用10”。

Unity3DTutorialImg200.png

2. 按下“构建”按钮。
3. 打开生成的Visual Studio项目。
4. 为所需的平台ARM，x86或x86_64构建解决方案。
5. 部署和执行。

WebGL

报告选项“开发构建”会产生问题。尽可能避免使用此方法，并确保将“启用例外”设置设置为“仅明确抛出例外”。还报告了其他选项会导致问题。

Unity3DTutorialImg201.png

注意

我们建议始终使用Unity for WebGL的最新稳定版本，因为不同版本的Emscripten不兼容。例如，Unity 2019.2使用Emscripten 1.38.11