ARKit: How to add button to ARView in storyboard?

Question

I am brand new to ARKit (and a novice in swift) but I am trying to create a basic AR app. I am following this tutorial in which a simple scene is created essentially doing everything in reality composer apart from the addition of a simple start scene button which is added to the ARView in the storyboard - you can see that specific moment in the tutorial here. When I attempt to do the same however, the button element replaces the ARView entirely, rather than it being added as a child of the ARView as happens in this tutorial.

You can see below a grab of what is going on. Here is the storyboard before I add the button.

I then search for a button element, drag onto ARView, at which point it replaces it, rather than adding as child. See below the result.

My xcode version is 11.2.

Any advice is much appreciated, and if any more info is needed, please ask. Thank you.

Answer 1

You must nest both the ARView and Button under a UIView. First, add a UIView as a direct child to the ViewController. Then, add an ARView under the UIView that you created before. Then, you can also add a UIButton under that same UIView.

Edit: After Viewing the tutorial video linked in your question, the "ARView" the tutorial has as the child of the ViewController is not an actual ARView but a UIView renamed to "ARView", to clarify.

Answer 2

Joey's correct. For some reason Apple's AR Template does not include a UIView, and you end with what Nick describes. Here is the step by step process so you can get use Interface Builder with RealityKit:

• Create a New Project
• Select Augmented Reality App
• Enter Product Name. Select RealityKit for Content Technology, and Storyboard for User Interface.
• Select Main.storyboard.
• Press '+' and add a UIVIew over the ARVIew
• Now press '+' again to drag a RealityKit AR View
• Connect the new ARView to the arView outlet in the View Controller.
• Now you can add UI elements as well without the AR View being replaced.

Answer 3

Manually (in main.storyboard)

• delete current ARView
• add UIView
• add new ARView
• activate layout constraints
• add buttons

Programmatically

The easiest way to add buttons to RealityKit's ARView is to add them programmatically. Using this approach, you do not need to delete the current ARView. If you want to programmatically activate NSLayoutConstraints, read this post.

Here's a code.

import RealityKit
import UIKit

class ViewController: UIViewController {
    
    @IBOutlet var arView: ARView!
    
    override func viewDidLoad() {
        super.viewDidLoad()           
        let boxAnchor = try! Experience.loadBox()
        arView.scene.anchors.append(boxAnchor)
        
        let rect1 = CGRect(x: 50, y: 50, width: 100, height: 50)
        let rect2 = CGRect(x: 120, y: 50, width: 100, height: 50)
        
        // PLAY BUTTON
        let playButton = UIButton(frame: rect1)
        playButton.setTitle("Play", for: .normal)
        playButton.addTarget(self, action: #selector(play), for: .touchUpInside)
        
        // STOP BUTTON
        let stopButton = UIButton(frame: rect2)
        stopButton.setTitle("Stop", for: .normal)
        stopButton.addTarget(self, action: #selector(stop), for: .touchUpInside)

        self.view.addSubview(playButton)
        self.view.addSubview(stopButton)
        
        self.loadAudio()
    }       
    @objc func play(sender: UIButton!) {
        self.audioController?.play()
    }
    @objc func stop(sender: UIButton!) {
        self.audioController?.pause()
    }
}