创建了一个为 Beyond Ranch 吸引成员的工具

感谢您的辛勤工作。
我是系统开发室的松山。

这或许有点突然，但我们公司有个叫“午餐之外”的项目。
每个月，员工会被随机分配到不同的小组，一起吃午餐，这样他们就有机会和平时不太有机会接触的同事交流。
公司还会补贴午餐费用，所以这真是一个很棒的项目。

这种分组似乎是由组织文化委员会的成员每月手动完成的，所以
我决定尝试创建一个应用程序来复习 Unity 的基础知识。

要求

① 使用按钮随机分组员工。②
每个分组以滚动列表中的单个元素显示。③
员工姓名使用可脚本化对象进行管理。④
随机分组员工。⑤
在 WebGL（浏览器中）运行（构建）。
* 使用 Unity 2019.4.11f1 (LTS) 创建。

它看起来大概是这样的。
它只有几个基本功能，但我们一步一步地把它们组合起来。

① 屏幕（用户界面）创建

在文本框中输入标题和版本号。
添加一个抽奖按钮，整体布局就没问题了。
适当设置画布大小。（由于我使用智能手机的习惯，我一开始把它设置成了 1920x1080，后来不得不调整。）

大概是这样的。
我找到一张和背景图很像的免费图片，然后把它贴在这里了。

② 滚动列表

大家都喜欢滚动列表。
我总是被它迷住（泪目）。

首先，为每个小组的各个元素创建一个预制件。
每个小组有一名组长和四到五名成员，所以它看起来应该像这样。

在确定成员时，您需要注册他们的姓名，因此需要编写一些代码来更新文本。
此功能仅限于设置成员和切换显示。

public class GroupBoard : MonoBehaviour { [SerializeField] private GameObject objBoard; [SerializeField] private List<GameObject> objList = new List<GameObject> (); [SerializeField] 私有列表<Text>txtName = new List<Text> (); 私有列表<string>memberNames = new List<string> (); ///<summary> /// 启动处理 ///</summary> void Start() { Initialize(); } ///<summary> /// 初始化 ///</summary> public void Initialize() { memberNames.Clear(); hide(); } ///<summary> /// 已隐藏（不活跃）///</summary> private void hide() { // 隐藏所有游戏板 foreach (GameObject obj in objList) { obj.SetActive(false); } // 隐藏底层游戏板 objBoard.SetActive(false); } ///<summary> /// 显示屏（已激活）///</summary> public void Show() { int mid = 0; objBoard.SetActive(true); for(int i=0; i <memberNames.Count; i++) { objList[mid].SetActive(true); txtName[mid].text = memberNames[mid]; mid++; } } /// <summary>/// 会员注册 ///</summary> ///<param name="name">成员姓名</param>public void SetMember(string name) { memberNames.Add(name); } }

至于基本的滚动列表，

您可以通过
菜单中的“UI > 滚动视图”剩下的就是逐步配置：
・调整滚动视图的大小
・水平滚动不是必需的，因此将其删除
・将视口遮罩更改为“2D 矩形遮罩”
・调整内容高度
・向组的预制件添加布局元素
*由于这次元素数量较少，我们不考虑元素复用。

至此，用户界面配置基本完成。

注）关于滚动列表，这篇文章很容易理解（谢谢）
ScrollView 参考

③ 可脚本化对象

准备一份领导名单和一份员工名单。
使用可脚本化对象，以便于管理和扩展。

首先，我们将提供一个基本定义。

[CreateAssetMenu] public class BeyondMember : ScriptableObject { public List<string> leaderList = 新的列表<string>public List()<string> memberList = 新的列表<string>(); }

Beyond Member 将被添加到“资产”>“创建”菜单中，请运行此命令。系统
将生成数据，请在此处注册员工姓名。
将数据放置在“资源”文件夹中，以便于阅读。

*由于我们将把它上传到 GitHub，所以目前我们将使用一个虚拟名称进行注册。

注）对于可脚本化对象，这很容易理解（谢谢）
可脚本化对象参考

④ 随机分成若干组

这不是 Unity 函数，而是 C# 代码。
我将简要解释以下两点。

从可脚本对象加载数据

你可以直接使用 Resources.Load() 加载它。

private BeyondMember beyond; beyond = Resources.Load<BeyondMember> （超越会员）

之后，您可以直接以列表格式使用它。

随机选择

组长是固定的，所以我们按顺序排列。（组长数量 = 组数）
我们随机选择成员并分配到各个组。
这就是具体操作方法。

///<summary> /// 会员随机抽奖 ///</summary> private void lotteryMember() { int gno = Random.Range(0, groupNum - 1); // 起始组号列表<string>成员 = 新列表<string>(beyond.membeList); do { int num = members.Count; int mid = Random.Range(0, num); boardList[gno].SetMember(members[mid]); members.RemoveAt(mid); gno++; if (gno >= groupNum) gno = 0; } while (members.Count > 0); }

*如果只是简单地赋值一个 List，它将按引用传递，因此需要使用构造函数复制它。

⑤ 使用 WebGL 构建

切换到 WebGL 平台并构建。
会输出几个文件，例如 Index.html，将它们放到服务器上就完成了。
但是，这里存在一些奇怪的问题。

字体未显示

编辑器中显示的日文字符在浏览器中无法显示。
经过一番研究，似乎是因为“Arial”文本组件不包含日文字符，所以无法显示。
注：我将以此为参考来解决此问题（谢谢）。WebGL
不支持显示日文字体
。请下载单独的字体并切换到该字体。

屏幕布局错误

分辨率异常低，滚动列表会遮挡标题和按钮。
我调查了一下，发现默认分辨率是 960x600。
注：该网站解释了 WebGL 的一些难点，包括字体（谢谢）
注意事项：
每次构建都调整 index.html 很麻烦，所以这次我直接在 960x600 分辨率下微调布局。

概括

目前，我已经实现了随机分组的功能，所以算是完成了。
我已经有一段时间没用过 Unity 的基本函数 uGUI 和 ScriptableObject 了，
不过有了这些简单的工具，创建东西还是很容易的。这
是我第一次使用 WebGL 支持，其中隐藏着一些不易察觉的陷阱，比如字体……

我们已经实现了 Beyond Lunch 工具所需的最低功能，因此我们希望在未来有时间的时候添加以下功能。

- 允许您选择年份和月份，并按月显示分组。-
按月维护组成员。-
随机确定成员时，不会与上个月的成员重复。

如果它能处理这么多数据，那它就会是一个非常有用的工具，对吧？
好了，今天就到这里。

这次我又把示例项目上传到 GitHub 了。
希望对您有所帮助。Unity
示例

最后

我开设了我所属的系统开发服务网站“SEKARAKU Lab”。
Beyond是从服务器设计搭建到运营的一站式服务，所以如果您在服务器端开发方面遇到任何问题，请随时联系我们。
SEKARAKU 实验室： [https://sekarakulab.beyondjapan.com/](https://sekarakulab.beyondjapan.com/)