Customize spatial Persona templates in SharePlay

12:32 - Initial team selection template

// Team selection template – custom spatial template

import GroupActivities

struct TeamSelectionTemplate: SpatialTemplate {
    let elements: [any SpatialTemplateElement] = [
        .seat(position: .app.offsetBy(x: 0, z: 4)),
        
        .seat(position: .app.offsetBy(x: 1, z: 4)),
        .seat(position: .app.offsetBy(x: -1, z: 4)),
        
        .seat(position: .app.offsetBy(x: 2, z: 4)),
        .seat(position: .app.offsetBy(x: -2, z: 4)),
    ]
}

13:31 - Completed team selection template with seat roles

import GroupActivities

/// The custom spatial template used to arrange Spatial Personas
/// during Guess Together's team-selection stage.
///
/// The team selection template contains three sets of seats:
///
/// 1. Five audience seats that participants are initially placed in.
/// 2. Three Blue Team seats that participants are moved to
///    when they join team Blue.
/// 3. Three Red Team seats.
///
/// ```
///                ┌────────────────────┐
///                │   Guess Together   │
///                │     app window     │
///                └────────────────────┘
///
///
///              %                       $
///                %                   $
///   Blue Team      %               $      Red Team
///                    *  *  *  *  *
///
///                       Audience
/// ```
struct TeamSelectionTemplate: SpatialTemplate {
    enum Role: String, SpatialTemplateRole {
        case blueTeam
        case redTeam
    }
    
    let elements: [any SpatialTemplateElement] = [
        // Blue team:
        .seat(position: .app.offsetBy(x: -2.5, z: 3.5), role: Role.blueTeam),
        .seat(position: .app.offsetBy(x: -3.0, z: 3.0), role: Role.blueTeam),
        .seat(position: .app.offsetBy(x: -3.5, z: 2.5), role: Role.blueTeam),
        
        // Starting positions:
        .seat(position: .app.offsetBy(x: 0, z: 4)),
        .seat(position: .app.offsetBy(x: 1, z: 4)),
        .seat(position: .app.offsetBy(x: -1, z: 4)),
        .seat(position: .app.offsetBy(x: 2, z: 4)),
        .seat(position: .app.offsetBy(x: -2, z: 4)),
        
        // Red team:
        .seat(position: .app.offsetBy(x: 2.5, z: 3.5), role: Role.redTeam),
        .seat(position: .app.offsetBy(x: 3.0, z: 3.0), role: Role.redTeam),
        .seat(position: .app.offsetBy(x: 3.5, z: 2.5), role: Role.redTeam)
    ]
}

14:59 - Configuring a custom spatial template

systemCoordinator.configuration.spatialTemplatePreference = .custom(TeamSelectionTemplate())

15:39 - Assigning the local participant a spatial template role

systemCoordinator.assignRole(TeamSelectionTemplate.Role.blueTeam)

16:00 - Resigning the local participant from a spatial template role

systemCoordinator.resignRole()

17:00 - Spatial template roles

// Associating a role with a seat

.seat(position: .app.offsetBy(x: -2.5, z: 3.5), role: TeamSelectionTemplate.Role.blueTeam)

// Assigning the local participant a role

systemCoordinator.assignRole(TeamSelectionTemplate.Role.blueTeam)

// Resigning the local participant from their current role

systemCoordinator.resignRole()

18:42 - Game template with seat direction

import GroupActivities

/// The custom spatial template used to arrange spatial Personas
/// during Guess Together's game stage.
///
/// The team selection template contains three sets of seats:
///
/// 1. An seat to the left of the app window for the active player.
/// 2. Two seats to the right of the app window for the active player's
///    teammates.
/// 3. Five seats in front of the app window for the inactive team-members
///    and any audience members.
///
/// ```
///                  ┌────────────────────┐
///                  │   Guess Together   │
///                  │     app window     │
///                  └────────────────────┘
///
///
/// Active Player  %                       $  Active Team
///                                        $
///
///                      *  *  *  *  *
///
///                         Audience
///
/// ```
struct GameTemplate: SpatialTemplate {
    enum Role: String, SpatialTemplateRole {
        case player
        case activeTeam
    }
    
    var elements: [any SpatialTemplateElement] {
        let activeTeamCenterPosition = SpatialTemplateElementPosition.app.offsetBy(x: 2, z: 3)

        let playerSeat = SpatialTemplateSeatElement(
            position: .app.offsetBy(x: -2, z: 3),
            direction: .lookingAt(activeTeamCenterPosition),
            role: Role.player
        )
        
        let activeTeamSeats: [any SpatialTemplateElement] = [
            .seat(
                position: activeTeamCenterPosition.offsetBy(x: 0, z: -0.5),
                direction: .lookingAt(playerSeat),
                role: Role.activeTeam
            ),
            .seat(
                position: activeTeamCenterPosition.offsetBy(x: 0, z: 0.5),
                direction: .lookingAt(playerSeat),
                role: Role.activeTeam
            )
        ]
        
        let audienceSeats: [any SpatialTemplateElement] = [
            .seat(position: .app.offsetBy(x: 0, z: 5)),
            .seat(position: .app.offsetBy(x: 1, z: 5)),
            .seat(position: .app.offsetBy(x: -1, z: 5)),
            .seat(position: .app.offsetBy(x: 2, z: 5)),
            .seat(position: .app.offsetBy(x: -2, z: 5))
        ]
        
        return audienceSeats + [playerSeat] + activeTeamSeats
    }
}

21:41 - Configure group immersive space

// Configure group immersive space

for await session in GuessingActivity.sessions() {
    guard let systemCoordinator = await session.systemCoordinator else { continue }

    systemCoordinator.configuration.supportsGroupImmersiveSpace = true
}

30:35 - SimpleLine Template

// SimpleLine.swift

struct SimpleLine: SpatialTemplate {

    let elements: [any SpatialTemplateElement] = [
        .seat(position: .app.offsetBy(x:  0, z: 2)),
        .seat(position: .app.offsetBy(x:  1, z: 2)),
        .seat(position: .app.offsetBy(x: -1, z: 2)),
        .seat(position: .app.offsetBy(x:  2, z: 2)),
        .seat(position: .app.offsetBy(x: -2, z: 2))
    ]

}

31:35 - lookingAt Method

// Look at a given position or seat
.seat(
    position: teamSeatPosition,
    direction: .lookingAt(activePlayerSeat)
)

31:46 - alignedWith Method

// Look at a given position or seat
.seat(
    position: teamSeatPosition,
    direction: .lookingAt(activePlayerSeat)
)

// Align with a given app axis
.seat(
    position: teamSeatPosition,
    direction: .alignedWith(appAxis: .z)
)

32:02 - rotatedBy Method

// Look at a given position or seat
.seat(
    position: teamSeatPosition,
    direction: .lookingAt(activePlayerSeat)
)

// Align with a given app axis
.seat(
    position: teamSeatPosition,
    direction: .alignedWith(appAxis: .z)
)

// Rotate by a given angle
.seat(
    position: teamSeatPosition,
    direction: .lookingAt(.app).rotatedBy(.degrees(30))
)