Create a tool to draw members for Beyond Lunch

Thank you for your hard work.
This is Matsuyama from the System Development Department.

This may seem a bit sudden, but our company has a program called "Beyond Lunch."
Once a month, members are randomly assigned to a group and go to lunch together, allowing them to enjoy interacting with members they don't usually have much time to interact with.
The company even subsidizes the cost of lunch, so it's a pretty great program.

This grouping seems to be done manually by members of the Organizational Culture Committee every month, so
I thought I'd try creating an app to review the basics of Unity.

Requirements

① Randomly group employees using a button.
② Each group is displayed as a single element in a scrolling list.
③ Employee names are managed using a Scriptable Object.
④ Randomly group employees.
⑤ Runs (builds) in WebGL (browser).
* Created with Unity 2019.4.11f1 (LTS).

It looks something like this.
It only has a few basic functions, but let's put them together step by step.

① Screen (UI) creation

Enter the heading and version in Text.
Add a lottery button, and the overall layout is OK.
Set the canvas size appropriately. (Due to my smartphone habits, I ended up setting it to 1920x1080 and had to adjust it later.)

It looks something like this.
I found a free image that looked similar to the background and pasted it here.

② Scroll List

Everyone loves the scrolling list.
I always get stuck on it (tears)

First, create a Prefab for each group's elements.
Each group has one leader and four to five members, so it should look something like this.

When deciding on a member, you will register their name, so you will need to create some code to update the text.
The functionality is limited to setting members and switching the display.

public class GroupBoard : MonoBehaviour { [SerializeField] private GameObject objBoard; [SerializeField] private List<GameObject> objList = new List<GameObject> (); [SerializeField] private List<Text> txtName = new List<Text> (); private List<string> memberNames = new List<string> (); ///<summary> /// Startup processing ///</summary> void Start() { Initialize(); } ///<summary> /// Initialization ///</summary> public void Initialize() { memberNames.Clear(); hide(); } ///<summary> /// Hidden (inactive) ///</summary> private void hide() { // Hide all plates foreach (GameObject obj in objList) { obj.SetActive(false); } // Hide the underlay objBoard.SetActive(false); } ///<summary> /// Display (active) ///</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>/// Member Registration ///</summary> ///<param name="name"> Member Name</param> public void SetMember(string name) { memberNames.Add(name); } }

As for the essential scroll list,

everything you need can be created by going to
UI > Scroll View in the menu All that's left is to configure it bit by bit.
・Adjust the size of the Scroll View
・Horizontal scrolling is not necessary, so delete it
・Change the Viewport Mask to Rect Mask 2D
・Adjust the Content Height
・Add a Layout Element to the group's Prefab
*Since there are only a few elements this time, we won't consider reusing elements.

This basically completes the UI configuration

Note) For scrolling lists, this article is easy to understand (thanks)
ScrollView Reference

③ Scriptable Object

Prepare a list of leaders and a list of employees.
Use Scriptable Objects to make them easy to manage and expand.

First, we'll provide a base definition

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

Beyond Member will be added to the Asset > Create menu, so run this.
Data will be generated, so register employee names here.
Place the data in Resources to make it easier to read.

*Since we will be uploading it to GitHub, we will register it with a dummy name for now.

Note) For Scriptable Objects, this is easy to understand (thanks)
ScriptableObject Reference

④ Randomly divide into groups

This is not a Unity function, but C# code.
I will roughly explain the following two points.

Loading data from a Scriptable Object

You can simply load it with Resources.Load()

private BeyondMember beyond; beyond = Resources.Load<BeyondMember> ("Beyond Member");

After that, you can use it as it is in list format

Random Selection

The leaders are fixed, so we set them in order. (Number of leaders = number of groups)
We randomly select and assign members to each group.
This is how it works.

///<summary> /// Member random draw ///</summary> private void lotteryMember() { int gno = Random.Range(0, groupNum - 1); // Starting group number List<string> members = new List<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); }

*If you simply assign a List, it will be passed by reference, so you need to duplicate it using the constructor

⑤ Build with WebGL

Switch Platform to WebGL and Build.
Several files such as Index.html will be output, so place these on the server and you're done.
But there are some strange things.

Fonts are not displayed

Japanese characters that were displayed in the Editor are not displayed when the browser is run.
After a little research, it seems that the "Arial" text component is not displayed because it does not contain Japanese characters.
Note: I will use this as a reference to resolve this issue (thanks).
Japanese fonts are not displayed in WebGL
. Download a separate font and switch the font to use.

The screen layout is broken

The resolution is strangely low, and the scrolling list overlaps the headings and buttons.
I looked into this and found that the default resolution is 960x600.
Note: The site explains the tricky points with WebGL, including fonts (thanks)
WebGL Notes:
Adjusting index.html for each build is a pain, so this time I'll just fine-tune the layout at 960x600.

summary

For now, I've managed to get it to a state where it can be randomly grouped, so it's complete.
since I last used Unity's basic functions, uGUI and ScriptableObject,
but with simple tools, it's easy to create things. This
was my first time using WebGL support, and there were some subtle pitfalls hidden, such as fonts...

We have implemented the minimum functionality required for a Beyond Lunch tool, so we would like to add the following features in the future when we have time

- Allows you to select the year and month, and displays groupings by month.
- Maintains group members by month.
- When randomly determining members, does not overlap with the same members as the previous month.

If it can handle this much, it will be a very useful tool, right?
Well, that's all for today.

I've uploaded the sample project to GitHub again this time.
I hope it will be helpful for you.
Unity Sample

lastly

I am a member of the system development service site "SEKARAKU Lab."
Beyond offers a one-stop service for everything from server design and construction to operation, so if you have any problems with server-side development, please feel free to contact us.
SEKARAKU Lab: [https://sekarakulab.beyondjapan.com/](https://sekarakulab.beyondjapan.com/)