Group

Groups are a handy little mechanism to treat a collection of scene nodes as a single entity for the purposes of arranging things on the screen.

For example, if you have a character with replaceable / swappable head wear - perhaps an exciting collection of hats - then what you'd like to do is place the character and the current hat relative to one another, and then move them both together, as one.

It should be noted that although groups are not visible entities, they are not zero cost in terms of rendering performance. Use groups, by all means, but make sure every group you add has value and pack as much stuff into it as possible to amortize the cost of use.

Example Links

• View example code

• Live demo

How to use a group

In this example we arrange three circle relative to each other, and then move the group the middle of the screen.

  def present(context: Context[Unit], model: Unit): Outcome[SceneUpdateFragment] =
    val viewportCenter =
      context.frame.viewport.giveDimensions(context.frame.globalMagnification).center

    val radius = 50

    Outcome(
      SceneUpdateFragment(
        Group(
          Shape
            .Circle(
              Circle(Point.zero, radius),
              Fill.Color(RGBA.Red.withAlpha(0.75)),
              Stroke(2, RGBA.White)
            )
            .moveTo(Point(0, -25)),
          Shape
            .Circle(
              Circle(Point.zero, radius),
              Fill.Color(RGBA.Green.withAlpha(0.75)),
              Stroke(2, RGBA.White)
            )
            .moveTo(Point(25, 25)),
          Shape
            .Circle(
              Circle(Point.zero, radius),
              Fill.Color(RGBA.Blue.withAlpha(0.75)),
              Stroke(2, RGBA.White)
            )
            .moveTo(Point(-25, 25))
        ).moveTo(viewportCenter)
          .withRef(25, 25)
      )
    )