Add 2D Shape to SceneKit

Question

I want to display a 3D model in SceneKit, but also want to place some 2D shapes to the model (e.g. a circle that can be tapped an triggers an interaction).

What is the best way to achieve this?

How it should look like:

Unsuccessful approach: used a regular SCNNode with small hight, but this does not behave as a 2D graphic (perspective changes)

Edit:

• now I added the circle as a sprite kit node to the overlay view

  sceneView.overlaySKScene = SKScene.init(size: sceneView.frame.size)
  sceneView.overlaySKScene?.addChild(circle)
  

• I also tried to get the screen-coordinates of the corresponding node, where I want to show the SpriteKit circle in front of:

  func renderer(_ renderer: SCNSceneRenderer, updateAtTime time: TimeInterval) {
  
      let screenPoint = sceneView.projectPoint(interactionNode!.position)
  
      print(screenPoint)
  
      circle.position = CGPoint.init(x: CGFloat(screenPoint.x), y: CGFloat(screenPoint.y))
  

  }

However, sceneView.projectPoint gives me very weird results, even if the node is displayed in the middle of the screen, there are off-screen ranges returned...

Answer 1

You want to use overlaySKScene, which will allow you to place (performant) 2D Spritekit content "on top of" your Scenekit scene. Here's how I do it in my app:

First define Spritekit content that you want in your HUD:

class HUD: SKScene {
var shields: SKShapeNode(imageNamed: "shieldGrid")
var crosshairs = SKSpriteNode(imageNamed: "xenonHUD")
public var computerStatus = SKLabelNode()
public var enemyIndicator = SKLabelNode()

func shipHud.flashAlert( alert: String) {
   computerStatus.text = alert
}

Then, in your main view controller (where you instantiate your SceneView), make this class your scene's overview, and control it from there:

class MyGameViewController: UIViewController, SCNPhysicsContactDelegate, SCNSceneRendererDelegate {
var scnView: SCNView! 
// setup HUD
    shipHud = HUD(size: self.view.bounds.size)
    scnView.overlaySKScene = shipHud
    shipHud.flashAlert("Oh My God!")

}

Mixed SceneKit and Spritekit Content using overlaySKScene