Layout Groups

4/1/2024

Layout Groups for Dice

I created two layout groups for Guilds of Greybrook, both helped the team with their large amount of dynamic dice data. The team originally asked for a tool that would allow them to create dice prefabs from all of their data, to assist this process I developed two layout groups. I made a D6 Layout Group that manages the position and orientation of its children to match the layout of faces on a standard D6 die. This was paired with a Pip Layout Group on each face that would layout pips as sprite renderers on a 3D object.

The two layout groups worked in tandem to render the data of a die and its faces, taking in Scriptable Objects and using a custom project settings page to get the relevant prefabs and sprites. Later in the development of Guilds of Greybrook, the tool was transitioned from an editor time tool, to a runtime utility. I worked with the team to ensure the system worked in the new context.

Arc Layout Group

Developed for XR application interfaces, the Arc Layout Group organizes its children along an arc. The parameters of the arc can be modified from an inspector. By animating the arc length or offset values, developers can ease the shape in or out of view for the users.

public static Vector2 PointOnArc(Vector2 center, float radius, float arcLength, float rawInput)
{
  // Early exit for condition(s) that don't require calculation
  if (radius == 0)
      return Vector2.zero;
  if (arcLength == 0)
      return Vector2.zero;

  bool invert = radius < 0;
  radius = Mathf.Max(Mathf.Abs(radius), .000001f);
  arcLength = Mathf.Max(arcLength, 0);
  rawInput = Mathf.Clamp01(rawInput);

  float arcDegs = (arcLength / radius) * (180f / Mathf.PI);
  float arcHalfDegs = arcDegs / 2f;
  float degsAtRawInput = rawInput * arcDegs - arcHalfDegs;
  float arcRads = Mathf.Deg2Rad * (degsAtRawInput + 90f);

  float x = radius * Mathf.Cos(arcRads);
  float y = radius * Mathf.Sin(arcRads) - radius;

  return center + new Vector2(x, (invert ? -1 : 1) * y);
}