sprite-kit Create a small SKView with other controls using Interface Builder


An SKView does not need to fill the whole screen and can share space with other UI controls. You can even have more than one SKView displayed at once if you wish.

To create a smaller SKView amongst other controls with Interface Builder, first create a normal ViewController, then drag and drop a new view onto the view controller:

Drag and Drop a new view

It can be helpful to set the colour of this view to something other than white (here black is used) so that it can be seen more clearly in Interface Builder (this colour will not be shown on the final app). Add other controls (a UIView, two buttons and a label are shown here as examples) and use constraints as normal to lay them out on the display:

Change colour, add controls, add constraints

Then select the view you want to be an SKView and change its class to SKView:

Change class to SKView

Then, using the assistant editor, control-drag from this SKView to your code and create an Outlet:

Create an Outlet

Use this outlet to present your SKScene.

In Swift:


Result (based on the Hello World example):

enter image description here