为 Beyond Lunch 创建一个招募成员的工具

今天工作完成得很好。
我是系统开发部的松山。

这或许有点突然，但我们公司有个叫做“午餐之外”的制度。
每个月，员工会被随机分成小组，一起外出吃午饭，让我们有机会和平时不怎么接触的同事交流。
公司还会补贴午餐费用，所以非常划算。

由于组织文化委员会成员似乎每个月都在“手动”完成这项小组作业，所以
我决定在复习 Unity 基础知识的同时尝试创建一个应用程序。

要求

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

或许像这样？
这只是几个非常基本的功能，但我们一步一步地把它们组合起来。

① 屏幕（用户界面）创建

标题和版本号可以用文本输入。
添加一个抽奖按钮，基本结构就没问题了。
请适当设置画布大小。（注：由于我的手机使用习惯，我一开始设置成了 1920x1080，后来不得不改正。）

大概就是这样。
我找到了一张合适的免费背景图，然后把它粘贴了上去。

② 滚动列表

大家都喜欢滚动列表。
我总是卡在这里（哭泣）。

首先，为每个小组创建预制件。
每个小组由一名组长和 4-5 名成员组成，所以看起来应该像这样。

由于成员姓名是在确定成员时注册的，我会编写一小段代码，以便更新文本字段。
功能可能仅限于成员设置和显示切换。

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); } }

至于关键的滚动列表，
“用户界面 > 滚动视图”菜单
所有需要的元素都可以在
之后，您只需调整以下设置：
- 调整滚动视图的大小
- 移除水平滚动，因为不需要
- 将视口遮罩更改为“2D 矩形遮罩”
- 调整内容高度
- 向组的预制件添加布局元素
*由于这次元素较少，我们不考虑元素重用。

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

注：这篇文章对滚动列表的解释非常透彻（谢谢！）。
ScrollView 参考

③ 可脚本化对象

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

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

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

“超越成员”选项将添加到“资产”>“创建”菜单中；执行此选项。系统
将生成数据，您需要在此处注册员工姓名。
请将数据放置在“资源”文件夹中，以便于加载。

*由于我们将把数据上传到 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 问题，包括字体问题（谢谢！））
WebGL 注意事项
：每次构建都调整 index.html 很麻烦，所以目前我先将布局微调到 960x600 以解决这个问题。

概括

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

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

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

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

这次我又在 GitHub 上上传了一个示例项目。
希望它能有所帮助。Unity
示例

最后

我已推出“SEKARAKU Lab”，这是我所属系统开发公司的服务网站。Beyond
提供从服务器设计、构建到运维的一站式服务，如果您在服务器端开发方面遇到任何问题，欢迎随时联系我们。SEKARAKU
Lab：[https://sekarakulab.beyondjapan.com/](https://sekarakulab.beyondjapan.com/)