Merge pull request #371 from UnityTech/fix_emoji

Update emoji resources to apple.

Author: zhuxingwei

Documentation~/com.unity.uiwidgets.md

@@ -228,8 +228,10 @@ Status bar is always hidden by default when an Unity project is running on an An
 #### 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.
+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.
@@ -258,12 +260,34 @@ Unity, by default, resizes the width and height of an imported image to the near
 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`.
+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, and disable **Generate Mipmaps**.
+3. In the `OnEnable()` function in your class overriding `UIWidgetsPanel`, add the following code
+
+```csharp
+EmojiUtils.configuration = EmojiUtils.googleEmojiConfiguration;
+```
+
+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(
+  spriteSheetAssetName: "myImage/MyEmoji",
+  emojiCodes: new List<int> {
+    0x1f004, 0x1f0cf, 0x1f170, ...
+  },
+  spriteSheetNumberOfRows: 36,
+  spriteSheetNumberOfColumns: 37,
+);
+```
 
 #### Interact with GameObject Drag&Drops
 
@@ -273,8 +297,6 @@ in the texture `rowCount`, and number of columns `colCount`.
 
 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
 
@@ -288,20 +310,27 @@ 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
+You can find many UIWidgets sample projects on Github, which cover different aspects and provide you
+learning materials in various levels:
+* 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
+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
 and open one of the dropdown samples.
+* awesome-UIWidgets by Liangxie (https://github.com/liangxiegame/awesome-uiwidgets). This Repo contains 
+lots of UIWidget demo apps and third-party applications. 
+* ConnectApp (https://github.com/UnityTech/ConnectAppCN). This is an online, open-source UIWidget-based App developed 
+by the dev team. If you are making your own App with UIWidgets, this project will provides you with 
+many best practice cases.
+
 
 #### Wiki
 The develop team is still working on the UIWidgets Wiki. However, since UIWidgets is mainly derived from Flutter,

Documentation~/index-zh.md

@@ -194,8 +194,10 @@ UIWidgets也支持Gif！
 
 #### 七、自动调节帧率
 如果要使得构建出的应用能够自动调节帧率，请打开Project Settings，将构建目标平台对应的Quality选项卡中的V Sync Count设置为Don't Sync。
-默认的逻辑是在界面静止时将帧率降低为25，在界面变动时将帧率提高至60。
-如果您需要修改帧率升高或降低时的行为，请将`Window.onFrameRateSpeedUp`和/或`Window.onFrameRateCoolDown`设置为您自己的函数。
+默认的逻辑是在界面静止时将帧率降低，在界面变动时再将帧率提高至60。
+如果您不想开启该功能，请将`Window.onFrameRateSpeedUp`和/或`Window.onFrameRateCoolDown`设置为空函数，()=> {}即可。
+
+在Unity 2019.3版本及以上，UIWidgets将使用OnDemandRenderAPI来实现帧率调节，它将在不影响UI响应速度的情况下大幅降低耗电和发热问题。
 
 #### 八、WebGL Canvas分辨率调整插件
 因为浏览器中Canvas的宽高和其在显示器上的像素数可能不一致，所以构建出的WebGL程序中画面可能会模糊。
@@ -223,9 +225,34 @@ $JSEvents
 在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`。
+UIWidgets支持渲染文本中包含的表情。
+默认的表情资源为[iOS 13.2](https://emojipedia.org/apple/ios-13.2)。
+我们也准备了[Google Emoji](https://emojipedia.org/google)的表情资源。
+如果您希望切换到Google版本的表情，请按如下步骤操作：
+
+1. 拷贝`Runtime/Resources/backup~/EmojiGoogle.png`到`Runtime/Resources/images`目录。
+2. 在**Project**面板中，找到`EmojiGoogle`资源，在**Inspector**面板中，将**Max Size**更改为4096，并取消**Generate Mipmaps**选项前的对勾。
+3. 在您的代码中继承`UIWidgetsPanel`的类的`OnEnable()`函数中，添加如下代码
+
+```csharp
+EmojiUtils.configuration = EmojiUtils.googleEmojiConfiguration;
+```
+
+如果您希望使用自己的表情图片，请按如下步骤操作：
+
+1. 参照`EmojiGoogle.png`，创建您自己的Emoji表单，并放到工程目录下的某个`Resources`目录中，例如`Resources/myImages/MyEmoji.png`）。
+2. 在`OnEnable()`函数中，添加如下代码（记得将示例的值改为真实的值）。注意Emoji的编码的顺序要和Emoji表单一致。
+
+```csharp
+EmojiUtils.configuration = new EmojiResourceConfiguration(
+  spriteSheetAssetName: "myImage/MyEmoji",
+  emojiCodes: new List<int> {
+    0x1f004, 0x1f0cf, 0x1f170, ...
+  },
+  spriteSheetNumberOfRows: 36,
+  spriteSheetNumberOfColumns: 37,
+);
+```
 
 #### 十一、与GameObject进行拖拽交互
 
@@ -235,8 +262,6 @@ UIWidgets支持渲染文本中包含的表情。表情的图片来自[Google Emo
 
 我们提供了一个包装好的`UnityObjectDetector`组件以及`onRelease`回调函数，借此您可以实现简单地将物体（例如Hierarchy内的场景物体、Project窗口下的文件等）拖拽至区域内，来获得`UnityEngine.Object[] `类型的引用并进行操作。
 
-你可以在“UIWidgetsTests -> Drag&Drop”下找到简单的实例样例。
-
 
 ## 调试UIWidgets应用程序
 
@@ -256,15 +281,22 @@ UIWidgets Inspector工具用于可视化和浏览窗口小部件树。 你可以
 
 ## 学习
 
-#### 示例
-
-你可以在**Samples**文件夹的UIWidgets包中找到一些精心挑选的UIWidgets应用示例，并通过这些示例来开始你的学习。请随意尝试并进行修改以查看结果。
+#### 教程
 
-你也可以在支持**UIWidgets**的编辑器中，点击主菜单上的UIWidgets，并在下拉窗口中选择一个示例。
+包括开发组在内的广大开发者为UIWidgets提供了许多可供学习的样例和教程，你可以根据你的需求进行学习：
+- UIWidgets官方示例。目前所有官方使用的示例项目均维护在一个独立的Github仓库（ https://github.com/UIWidgets/UIWidgetsSamples ）中。你可以
+将它clone到你项目本地的Assets目录下使用。
+具体的，你可以在Sample项目的**Scene**子文件夹中浏览所有示例UI场景。
+此外，你还可以点击主菜单上的新增的UIWidgetsTests选项卡，并在下拉菜单中选择一个EditorWindow UI示例来运行。
+- UIWidgets凉鞋系列教程。你可以在凉鞋老师整理的Github仓库（ https://github.com/liangxiegame/awesome-uiwidgets ）中学习UIWidgets的基本用法
+以及许多有趣的小Demo。
+- ConnectApp开源项目。这是一个完整的线上、开源、完全基于UIWidgets的第一方App项目。其中包含了大量产品级的UIWidgets工程实践细节，
+如果你想深入了解UIWidgets并且使用它构建线上项目，请访问项目Github仓库了解更多（ https://github.com/UnityTech/ConnectAppCN ）。
 
 #### Wiki
 
-目前开发团队仍在改进UIWidgets Wiki。 由于UIWidgets主要来源于Flutter，你也可以参考Flutter Wiki中与UIWidgets API对应部分的详细描述。同时，你可以加入我们的讨论组( https://connect.unity.com/g/uiwidgets )。
+目前开发团队仍在改进UIWidgets Wiki。 由于UIWidgets主要来源于Flutter，你也可以参考Flutter Wiki中与UIWidgets API对应部分的详细描述。
+同时，你可以加入我们的讨论组( https://connect.unity.com/g/uiwidgets )。
 
 #### 常问问题解答
 
@@ -280,4 +312,4 @@ UIWidgets Inspector工具用于可视化和浏览窗口小部件树。 你可以
 | 有推荐的适用于UIWidgets的IDE吗？ | Rider, VSCode(Open .sln) |
 
 ## 如何贡献
-请查看[CONTRIBUTING](CONTRIBUTING)
+请查看[CONTRIBUTING.md](CONTRIBUTING.md)

Documentation~/index.md

@@ -228,8 +228,10 @@ Status bar is always hidden by default when an Unity project is running on an An
 #### 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.
+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.
@@ -258,12 +260,34 @@ Unity, by default, resizes the width and height of an imported image to the near
 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`.
+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, and disable **Generate Mipmaps**.
+3. In the `OnEnable()` function in your class overriding `UIWidgetsPanel`, add the following code
+
+```csharp
+EmojiUtils.configuration = EmojiUtils.googleEmojiConfiguration;
+```
+
+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(
+  spriteSheetAssetName: "myImage/MyEmoji",
+  emojiCodes: new List<int> {
+    0x1f004, 0x1f0cf, 0x1f170, ...
+  },
+  spriteSheetNumberOfRows: 36,
+  spriteSheetNumberOfColumns: 37,
+);
+```
 
 #### Interact with GameObject Drag&Drops
 
@@ -273,8 +297,6 @@ in the texture `rowCount`, and number of columns `colCount`.
 
 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
 
@@ -288,20 +310,27 @@ 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
+You can find many UIWidgets sample projects on Github, which cover different aspects and provide you
+learning materials in various levels:
+* 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
+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
 and open one of the dropdown samples.
+* awesome-UIWidgets by Liangxie (https://github.com/liangxiegame/awesome-uiwidgets). This Repo contains 
+lots of UIWidget demo apps and third-party applications. 
+* ConnectApp (https://github.com/UnityTech/ConnectAppCN). This is an online, open-source UIWidget-based App developed 
+by the dev team. If you are making your own App with UIWidgets, this project will provides you with 
+many best practice cases.
+
 
 #### Wiki
 The develop team is still working on the UIWidgets Wiki. However, since UIWidgets is mainly derived from Flutter,