iOS - Adding a 2D image to a scenekit game

Question

Hello i can't for the life of me work out how to add a 2D image in the scene using scenekit is it even possible? What I'm trying to accomplish is have a 3D flying plane over a 2D background image but the background image can't cover the whole screen. Thanks to anyone that can help

Answer 1

Others have said plenty good suggestions above.

Let me summarize each solution with different scenarios:

• Using scnScene.background: Easiest, but fullscreen and static. You cannot display in a smaller area of the scene, nor can you customize the transformations.

• Using scnScene.overlaySKScene to display a 2D SKScene and adding image sprite. This is probably what fits your scenario. If you want static but with configurable transformations, this is a good choice. Notably overlaySKScene is recommended by Apple to create HUD in your 3D scene.

  However, if you want the 2D content to track the 3D movement, you need to do some coordinate conversion from 3D space to 2D space every frame. Bad news is the job is done by CPU, which will add performance drag. (Believe me, this frustrate me too!)

• Using SCNNode with SCNPlane geometry and set the diffuse.content with the image; add SCNBillBoardConstraint to the node to ensure it's always facing the camera.

  Most flexible. However if your camera is not orthographic, the picture is going to zoom as the fov of camera changes, which doesn't look 2D but rather a hanging 3D billboard.

Answer 2

SceneKit and SpriteKit play very nicely together.

Implement the background 2D image as a SceneKit node with SCNPlane geometry, using your image as the plane's material. If you want to get fancier, use a full, live SpriteKit scene as the SCNPlane's material. Place that node at the far end of your camera's frustum, with your 3D aircraft in front of it.

You might also consider providing a cube map (skybox) as your scene's background. See SCNScene.background.

Answer 3

You can use the background property on SCNScene to set a background image.

scnScene.background.contents = UIImage(named: "myImage")

Contents

You can set a value for this property using any of the following types:

A color (NSColor/UIColor or CGColorRef), specifying a constant color across the material’s surface

An image (NSImage/UIImage or CGImageRef), specifying a texture to be mapped across the material’s surface

An NSString or NSURL object specifying the location of an image file

An array of six images (NSArray), specifying the faces of a cube map

A Core Animation layer (CALayer)

A texture (SKTexture, MDLTexture, MTLTexture, or GLKTextureInfo)

A Sprite Kit scene (SKScene)