RealityKit & Reality Composer Pro

Start with the QHoops app in the Starter folder. This is Vision Pro project like before, minus the boilerplate scene. Once again, you’ll use the Show Immersion toggle to load and reset the scene.

Open Content.swift and add the mountain.2 systemImage to the toggle:

Toggle("Show ImmersiveSpace", systemImage: "mountain.2", isOn: $showImmersiveSpace)

From the Project Navigator on the left, use the disclosure indicator to expand the Packages. Then, expand the RealityKitContent and select the Package.realitycomposerpro. Expand Sources, RealityKitContent and RealityKitContent.rkassets, and you’ll see that the Scene.usda and Immersive.usda are contained within.

Select the Package.realitycomposerpro and click the Open in Reality Composer Pro button. This launches and switches to Reality Composer Pro.

In the Project Browser, at the bottom of the window, select the Scene.usda file and delete it. Choose Move to Trash at the prompt.

That leaves only the Immersive.usda scene in the package file. Select the two spheres and grid material and delete those as well.

Click the + icon at the top right to open the Content Library. Or, choose Show Content Library from the View menu. Drag out a sphere onto the Viewport. This adds the sphere to the immersive scene and to the Project Browser. With the sphere selected, set the properties in the Inspector on the right. Set the x position to -100, y to 10 and z to -150.

From the Resources folder, drag the Quiddich-hoop.usdz file into the viewport. The hoop is a torus shape, which isn’t available in the library. The model’s scale is enormous. In the Inspector, set the scale x, y and z values to 0.1. Still with it selected, set the rotation y value to 90. Set the x, y and z positions to 0, 245 and -500 respectively.

Open the content library and drag out a cylinder. Set the cylinder’s x, y, z scale to 0.215, 10, 0.215 respectively. To do this you may need to click the link icon on the left of the scale text boxes. With this link selected, the x, y and z scale will all change together. With it unselected the values can be changed independently.

Then move the cylinder underneath the Quiddich hoop in the scene hierarchy. This makes the cylinder a child of the Quiddich hoop.

The cylinder be the pole to hold up the hoop. Set the x, y and z positions to 0, -1450, 0 respectively. This position is relative to it’s parent, the hoop entity. The hoop also contains a defaultMaterial. Set the cylinder material binding to the same Materials/defaultMaterial from the Quiddich hoop. This will make the cylinder match the hoop.

The sphere represents the quaffle, and a player will toss the quaffle through the hoop to score. Check your work. Press Command-S to save the scene, then head back to Xcode. Take a look at the Immersive.usda file, and you’ll see the sphere and the hoop.

Normally the quaffle is covered in red leather. Head back to Reality Composer Pro and open the Content Library. Search for “leather”. Click the arrow on the Red PU Leather material. After it downloads, drag it over the Project Browser at the bottom. Drag the Red PU Leather to the Hierarchy Panel, which will add it to the Immersive scene. Select the sphere, and in the Inspector set the Material Binding to Root/RedPULeather.

If you previously configured your Vision Pro device for development, you may see the option to Send to Device in the top right corner of Reality Composer Pro. Select the device to send a preview to it with the downward discloser indicator. The scene will appear “life size” on the Vision Pro. Set yourself up in an environment like The Moon or White Sands to enjoy your work.

Switch back to Xcode. Build and run to load the Immersive view in the Simulator.

You can also run the app on the Vision Pro. Remember to set the developer team and Bundle ID to match your own values.

Set the environment to Museum again. The hoop is 2.45 meters high, or 8 feet off the ground, and the Museum environment has the most free space to view for this app.

Back in Xcode, open ImmersiveView.swift and add the occluded floor to the RealityView content as you did in lesson 1 in this series:

let floor = ModelEntity(mesh: .generatePlane(width: 100, depth: 100), materials: [OcclusionMaterial()])
floor.generateCollisionShapes(recursive: false)
floor.components[PhysicsBodyComponent.self] = .init(
  massProperties: .default,
  mode: .static
)
content.add(floor)

Build and run to see the work so far.

Back in Reality Composer Pro, select the sphere and add some components in the Inspector. Click the Add Component button. Scroll down to Collision and double-click to add it. Change the Collision shape to sphere to make it more realistic.

Click Add Component again and scroll to Physics Body. Double-click to add it, and the default Affected By Gravity will be applied.

Repeat the steps and add Physics Motion, which you’ll use to toss the ball.

While you’re there, add Grounding Shadow component and check the Casts shadow box.

Save the file, then build and run in Xcode. Nothing different happens, but the components are raring to go.

As you did in Lesson 1, go back to Reality Composer Pro, select the sphere and add the Input Target component. This will make it possible to interact with the sphere entity.

Back in Xcode, add a computed variable to add a DragGesture, underneath the body computed variable:

var dragGesture: some Gesture {
  DragGesture()
    .targetedToAnyEntity()
    .onChanged { value in
      value.entity.position = value.convert(value.location3D, from: .local, to: value.entity.parent!)
      value.entity.components[PhysicsBodyComponent.self]?.mode = .kinematic
    }
}

Add a gesture modifier to the RealityView and add the dragGesture as a property:

.gesture(dragGesture)

Build and run. The stage is set for your game. In the next lesson, you’ll take a look at shooting the ball through the hoop to score a goal.