Streaming is available in most browsers,
and in the Developer app.
-
Customize spatial Persona templates in SharePlay
Learn how to use custom spatial Persona templates in your visionOS SharePlay experience to fine-tune the placement of Personas relative to your app. We'll show you how to adopt custom spatial Persona templates in a sample app with SharePlay, move participants between seats, and test your changes in Simulator. We'll also share best practices for designing custom spatial templates that will make your experience shine.
Chapters
- 0:00 - Introduction
- 1:01 - SharePlay on visionOS
- 4:50 - Build "Guess Together"
- 23:41 - Play Guess Together
- 25:13 - Design for Spatial Personas
Resources
Related Videos
WWDC23
WWDC22
WWDC21
-
DownloadArray
-
-
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)) )
-
-
Looking for something specific? Enter a topic above and jump straight to the good stuff.
An error occurred when submitting your query. Please check your Internet connection and try again.