Canvatorium Lab 045

In this lab I created a reusable 2D UI card that I can use throughout Canvatorium.

The main focus here was creating a function that can return the card components. I started a new file called lab-uikit and added canLabCardSimple. This function returns couple of values that can be used by the lab.

1. The plane can be use to position, show or hide, and animate the card.
2. The advanced texture contains the 2D UI. I can use this to add new controls or edit the card.

export const canLabCardSimple = (width: number, height: number, scene: Scene) => {
  const plane = MeshBuilder.CreatePlane("lab-card-rect-mesh", { width: width, height: height }, scene);

  const advancedTexture = AdvancedDynamicTexture.CreateForMesh(plane, 1024 * (width / 10), 1024 * (height / 10));
  advancedTexture.name = "lab-card-rect-texture";

  const rect = new Rectangle("rect");
  rect.cornerRadius = 48;
  rect.background = labColors.slate2;
  rect.alpha = 0.9;
  rect.color = labColors.slate8;
  rect.thickness = 2;
  rect.zIndex = -10;
  advancedTexture.addControl(rect);

  return {
    plane,
    advancedTexture
  };
};

I created four examples of using the new card.

I plan to expand on each of these examples in future labs.

Video demos: