iOS Development for Apps & Games

This video provides an overview of the entire course.

There are 3 core fundamentals that must be understood fully to develop a SpriteKit game. These are SKView, SKScene, and SKSpriteNode. All these classes work together in every game project. The relationship between them must be understood correctly to use a SpriteKit framework.

• Understand what an SKView is and how to use it

• Understand what an SKScene is and all its responsibilities

• Understand what an SKSpriteNode is and how to use it

To develop our game, we need to create a new Xcode project. Xcode gives us an option to use a game template, but we are not going to use it. We are going to use a simple template that will not have any pre-written code. This way, we can better understand what is going on under the hood by writing out all the codes for SKView, SKScene, and SKSpriteNode.

• Create a new Xcode project and cast UIView to SKView

• Create a new SKScene subclass and call the didMove function

• Present the scene using SKView

Nodes are game elements that we can see, touch, or animate, such as images, labels, buttons, and so on. Sprite nodes are the building blocks of our game and we are going to add a cat image to our app, scale it, and position it correctly.

• Add a cat image to assets and create a new SKSpriteNode object

• Use the addChild function to add it to the scene

• Learn to use the setScale function and anchorPoint property

In a UIKit framework, the origin of the coordinates is at the top left of the rect. The x coordinate value increases towards the left and the y coordinate value increases as we move downwards. However, on SpriteKit framework, the origin of the coordinates is at the bottom left, which means the y coordinate value increases as we move up.

• Understand the coordinate and anchor point in the SpriteKit framework

• Create a new SKScene subclass to add a child node

• Change the anchor point and position of the node

SKSpriteNodes are placed on top of one another as they are added to the scene. To properly manage the hierarchy of the nodes, we can use the value of the z-axis to change which node is higher (closer to the user) than other nodes. The value of z-position will determine how the nodes are rendered. The lower the value, the lower the node position in the hierarchy. A node with a larger z-position value will be on top of another node with a smaller value.

• Add a background image and create a new SKSpriteNode

• Add the node to the scene using the addChild function

• Use z-position to place the background above or below the cat

To dynamically change the x and y values of a sprite node, we should be able to detect the touch location on the game scene. We can use the touchMoved function to get the coordinate of the location that was touched on a scene and then move the sprite to the touch location.

• Override touchesMoved function and obtain the touch object

• Get the coordinate of the location that was touched

• Change the sprite x-axis to the new touch location x-axis

There are different types of actions that we can run on a sprite. In this example, we’ll be running an action that moves an object in the vertical direction. We’ll place the object at the top center of the scene and then run an action to move the sprite downwards.

• Add a new spite to the top center of the scene

• Create a new SKAction to move sprite to new y position

• Run the SKAction on the sprite node

Sometimes we want to run multiple actions one after the other. For example, we may want to delete a sprite node as soon as it has reached the final location. We can create multiple actions and then run the sequence of actions that should take place in order.

• Create new delete action to delete sprite from parent

• Create action sequence to run multiple actions in order

• Create setScale action and add to array of actions

Currently our sprites are added every time we click on the scene. We need to improve on this implementation by showing a new sprite at a specified time interval. This can be easily achieved with the use of a timer function that creates a new sprite every second. The time will be scheduled to run when the didMove function is called.

• Create a new timer variable

• Schedule the timer to run inside the didMove function

• Run the app to see new sprite created every second

When new balls are created, they all have the same x position, which means all the balls drop from the same location. We need to randomize the position from which the ball drops so that all new balls drop from different positions. We use a random number generator to achieve this behavior and then set the horizontal position of the ball to be a random position within a range.

• Use ARC4 algorithm to generate random number for x-axis

• Set the x position of the sprite to the random value

• Run the app to see the ball drop from different position

Every game requires a start scene, which is the initial screen that leads to gameplay scene. We are going to create a simple start screen with two simple images. We’ll then modify our code to start from the new scene.

• Create a new SKScene subclass

• Add two SKSpriteNodes (start button and a cat)

• Modify the view controller class to start from the new scene

Anchor points can be tricky to understand. This lesson is dedicated to explaining the nine important values that can be set for the anchor points. The anchor point x coordinate value increases as you move right, and the y coordinate increases as you move up the screen. It’s easy to modify the anchor point of any sprite node and move it to a different location.

• Understand anchor points and what are some possible values

• Illustrate how to use anchor point to position a node

• Demonstrate the use of anchor point and positioning in Xcode

The SKTexture class gives our game better performance improvements and is also used to create a simple animation. We’ll create an array of SKTexture and use SKAction to create a repeatable animation.

• Create an array of SKTexture objects

• Create an SKAction to animate the texture with a set timeframe

• Repeat the animation indefinitely using the repeatForever function

Sometimes, we want to detect when a sprite node has been clicked; this is useful when we want to perform certain action when a node is clicked. We can also use this to make a sprite act like a button. We’ll use a touchesBegan function to detect a touch on a sprite and transition to the gameplay screen.

• Detect the touch location using the touchesBegan function

• Find the object that intersects with our touch location

• Transition to the game screen using a transition effect

To inform the user that the game is over, we’ll transition to the game over scene when the user has completed the game. We’ll use a SKLabelNode to display simple text on this scene. SKLabelNode is useful in showing simple texts and is like UILabel class, but with some properties unique to SpriteKit.

• Create a new scene to be presented when the game is over

• Add SKLabelNode to display simple text

• Add the touchesBegan function to transition to the game scene

We need an event to take place to end the game and transition to the game over scene. The temporary solution will be to present the game over scene once 10 seconds have lapsed in the game. We’ll use an integer variable to track how many times the timer function has been called, and when the value reaches 10 we’ll transition to the game over scene.

• Create an integer variable to track elapsed time

• Show the game over scene when the tracker reaches 10

• Add a smooth transition effect when presenting the game over scene

To simulate real world behaviors such as friction, gravity, elasticity, collision and so on, we need to add physics body as property to our sprite nodes. We’ll use the SKPhysicsBody class to add this property to our sprite node.

• Understand what SKPhysicsBody is

• Add physics body to the ball and show physics in game

• Add physics body to the cat

Whenever physics body property is set on a sprite node, the gravity begins to act on the sprite node. However, we can disable this property by setting the gravity effect property. Also, sometimes we may not want our sprite to be affected by any external force, this is when we set the dynamic property.

• Demonstrate the gravity effect on a sprite node

• Disable the gravity effect on a sprite node

• Disable the dynamic effect on a sprite node

Once the physics body is added to a sprite node, the sprites will start to collide with one another. Collision is enabled by default between physics body, but we are not notified of their contact. We’ll also learn how to use categories to determine which group of bodies can collide with another group or sprites.

• Explain the difference between collision and contact

• Learn how to use categories to group physic bodies

• Learn about the 3 types of bit mask properties

By default, we are not notified whenever there’s a contact between physics bodies. We need to set another property (the contact test bit mask) and use a delegate function to detect contact between two physics bodies. This function (didBegin) is found in SKPhysicsContactDelegate protocol

• Conform to the SKPhysicsContactDelegate protocol

• Set the contact test bit mask for the ball

• Implement the didBegin delegate function to receive contact notifications

Once we implement the delegate function, we need to be able to figure out which two of the bodies in the game have made contact with each other. Also, we need to identify the bodies in contact by name, so we are able to check if we have the correct node. Once we have the correct node we can then remove it from the game.

• Use the name property to assign a name to the ball

• Use the SKPhysicsContact bodyA/bodyB object to identify the ball/cat

• Remove the ball by calling removeFromPatent function

Part of playing a fun game is to be able to compare scores to previous attempts. In this video we’ll learn how to add score label to our game to track the user scores when the cat catches the ball. The score will be increased whenever there’s a contact between the cat and the ball.

• Create an SKLabelNode to track the game scores

• Set the label properties and add scores variable

• Increase the game scores whenever the ball touches the cat

Game sounds improves user experience during the game. In this lesson we will add sound to the game whenever the cat makes a contact with the ball. We are going to introduce the AVFoundation framework which contains the AVAudioPlayer class for playing audio file.

• Create AVAudioPlayer object and the URL object for the sound file

• Set up the audio player object and prepare the audio to play

• Play the sound upon contact between the cat and the ball

Another way to improve user’s experience in any game is to add background music to the game. Just like we did in the previous lesson, here we are going to do the same step as playing the audio, but because we want the music to continue we’ll loop the audio player continuously, and also play the sound immediately when the game starts.

• Create a new audio player object for playing game music

• Set up the audio player object, set continuous loop

• Play the sound immediately when game starts

Not all users will like the music in the game, some users may need the option to mute the sound. We’ll give this option to the user to stop game background music. We’ll add two new sprite nodes to manage muting and unmuting the sound, using the z-position to manage the visibility of these nodes.

• Add two new nodes for playing and stopping game music

• Set the position for the nodes and set the z-positions

• Use the touches began function to hide and unhide the play and stop nodes

Previously we set the game to end after 10 seconds has lapsed. The correct logic should be that whenever the cat fails to catch a ball, we show the game over screen. In order to know if the ball has reached the bottom of the screen we can check the y-axis position of the ball and see if its less than 0. There’s a function we can use to check if this condition is met.

• Implement the update function; called for every frame of the game

• Check the y-position of the ball to see if it’s less than 0

• Present the game over scene when this condition is met

Currently there’s no way to motivate the game player to beat the previous game score. In this section we’ll use the UserDefaults class to persist the game score so that we can show the last score to the user on the start scene.

• Use UserDefaults class to persist the scores variable

• Create a SKLabelNode on the start scene

• Retrieve saved score from UserDefaults, show it on the label

In order to make the game more fun we are going to add a new ball that the cat must avoid in order to continue playing the game. We’ll use a random ARC4 function to generate two random numbers and then show either a normal ball or danger ball based on the number generated, this makes the game more fun and difficult, requiring player’s attention.

• Add a new asset to the Assets Catalogue folder

• Use ARC4 function to generate a random number

• Create new ball based on the random number

Blink effect is common in games, this effect is shown whenever something bad happens to the main character of the game. We want to blink our cat whenever it touches the danger ball, just to warn the user that something bad has happened to the cat. Blink effect is quite easy to create using sequence of SKAction that are repeated.

• Create sequence of actions to fade and unfade cat’s alpha

• Repeat the action sequence 10 times

• Run the blink effect whenever a cat touches the ball

By adding a danger ball, we need to improve game play. We’ll add 3 lives to the cat so that the cat is able to touch the danger balls maximum of 3 times before the game is over. Whenever the cat touches the danger ball we’ll reduce the live count by 1 and also show the remaining lives on the game screen

• Create a new lives variable to track cat’s lives

• Reduce the live counts when cat touches the danger ball

• Create a label node to show remaining lives

We need to prevent the live count from going below 0. We are going to modify the update function to end the game whenever the live count has dropped to 0. Also, we need to remove the danger ball when it reaches the bottom of the screen so that it doesn’t affect our cat in any way

• Modify update function to end game when lives is 0

• Remove danger ball once it exit the bottom screen

• Test the game to ensure there are no more bugs

There are many ways to create graphics, but one of the easiest way to create a new app icon or launch screen is to use canva.com. This website can be used for a simple graphics design.

• Create a new account or login to canva.com

• Create a simple game button example

• Create a new app icon using the cat.

Before we can upload the app to iTunes connect, we have to add a launch screen to the app. Every Xcode project has a built-in launch screen storyboard, which we will use to add the launch screen to the app. We will use a simple function to delay app launch so that we can see the launch screen for longer.

• Select the launch screen storyboard

• Add a UIImageView and set layout constraint

• Use the sleep function to prolong the launch screen

IOS platform requires icons of different sizes for different parts of the app. Generating these icons require us to use an image editing software to do this, but there are many tools that we can use to generate these icons with a click of a button. We also need to create a large icon of size 1024 x 1024 pixel that will be required on iTunes connect. Finally we’ll add these icons to our project.

• Search the App Store for Asset Catalog Creator

• Use the Asset Catalogue Creator app to generate icons assets

• Add the assets to the project and build the app

iTunes connect is the website where we manage all the information that the users see on the app store. This information includes the app screenshots, the app icon, the app category, pricing and so on. In order to create a new app on iTunes connect, we first need to set up app ID on Apple developer’s account, and then use this app ID to create a new app.

• Add Apple developers program account login credentials to Xcode

• Create a new App ID on Apple developer’s website

• Create app on iTunes connect using the new app ID

The last step is to upload the app to iTunes connect from Xcode. We need to use a generic IOS device to create an archive. The archive will be uploaded to iTunes connect as a build which we can submit for review. Before we can submit the app for review we need to provide other important information that are required, and we also need to upload app’s screenshots.

• Check important app settings before creating an archive to upload

• Generate an archive using a generic IOS device on Xcode

• Upload the archive and provide required information on iTunes connect

This video provides an overview of the entire course.

Before we begin let us describe the changes and improvements that have been made to the latest Xcode version.

• Understand productivity improvements

• Understand quality-of-life improvements

• Understand performance improvements

Xcode can be downloaded from the App Store app on the Mac, however sometimes the latest version may not be immediately available to all users. Latest and beta version can be downloaded from the Apple Developer website.

• Search the App Store app to find and download Xcode

• Find latest and beta Xcode versions from Apple developer website

• Download and install Xcode version 10 on your computer

In the previous Xcode versions we had the object library fully visible at the bottom of the attribute inspector. Object Library has now been shifted to a new location and represented by a single button. When this button is clicked, a window with all the objects is presented. This window also behaves like a spotlight search and objects can be easily added to a storyboard scene using keyboard strokes. It’s also possible to use a keyboard shortcut to launch the Object Library quickly.

• Launch the Object Library by clicking on a button

• Search the object that you want to add to a storyboard scene

• Use the enter key to add the selected object

Sometimes in our code we wish to make the same changes in multiple places. One way would be to duplicate our efforts multiple times, which is not efficient. The multi-cursor, as the name suggests, allow the use of multiple cursors in one code file, meaning your keyboard strokes will be written to many locations all at once, it’s a really great feature.

• Identify different places in your code you want to edit

• Enable the multi-cursor function in your code file

• Type to have your keyboard strokes register in multiple places

Another great feature of Xcode 10 is the ability to select your codes in vertical column mode and then use the multi-cursor function to edit the code. The combination of these two features increase the productivity of users beyond what can be done in the previous versions of Xcode.

• Enable vertical column selection by holding the Option key

• Select the part of the code that you want to edit

• Use the multi-cursor function to edit multiple lines at once

One of my favorite feature in Xcode is the ability to bookmark a chunk of code for later use. By doing this you will type less code because whenever you need to bring up the saved code, you can simply use a shortcut to bring that the saved code, this saves lots of typing and increases productivity. Even though this feature is always in Xcode, it was cumbersome to manage. Xcode 10 has improved how we add code to the Snippets library and how we access the library

• Select a chunk of code to add to the code snippets library

• Right click on the selected code to add it to the library

• Use a button or keyboard shortcut to access snippets library

Sometimes in our code, especially in a large project, we need to know the different places where our function has been called and in which file the function was called. Find function Callers is really handy in this case. By selecting a function, there’s a new context menu called Callers, which will show all the places where the function was called. If one of the results is selected, then we are taken directly to the place in our project where the function was used.

• Hold down the Command key on the keyboard

• Enable the context menu by clicking on the function name

• Select the Callers menu to see the results

In this video we’ll be looking at a neat addition to Xcode 10 that allows the code to overscroll thereby creating a large empty space at the bottom of the source code. This is useful because it prevents writing codes close to the bottom of the editor. Usually developers create empty spaces at the bottom of the code file and having the automatic white space means less effort from the developer having to create a manual white space.

• Understand lack of overscroll in Xcode 9

• Understand the benefit of having overscroll in Xcode 10

• Enable or disable or change the size of the overscroll

Code folding made a return in Xcode 10, previously we had a way to enable or disable this feature in the Xcode preferences, but the feature was removed in Xcode 9. It’s now back and better. Code folding allows codes to be folded away when the code is not required to be seen. Sometimes in the source code, some codes are always not required to be seen. These codes can be hidden away by using the code folding feature.

• Understand the lack of code folding in Xcode 9

• Enable code folding feature in Xcode 10

• Show how to fold and unfold code using the ribbon

Boilerplate codes are added to most template files when they are created. One of the popular boilerplate codes is the memory warning method that is added inside a custom view controller class. This has always been the case but in the latest version of Xcode, this boilerplate code is no more added, and the custom view controller class is now cleaner. Even though this seems like minor, it’s now one less headache for developers to manually delete unneeded boilerplate codes.

• Understand what boilerplate code is

• Create new class in Xcode 9 to show boilerplate code

• Create new class in Xcode10 to show less boilerplate code

There’s a new dark mode available in Xcode 10 if you are running the latest MacOS Mojave. The dark mode has a nice dark unique look that is good to use especially during the dark hours of the night. This feature requires the user to also be running the latest MacOS Mojave before it can be enabled. Dark themes were available in older version of Xcodes but some of the UI elements are still rendered in light colors, the new dark mode takes that to the next level.

• Enable dark mode on the MacOS Mojave from Preferences

• Demonstrate how dark mode does not affect Xcode 9

• Show Xcode 10 dark mode and old dark themes

When creating IBOutlets and IBActions in Xcode 9, you have to explicitly declare which one you want to create regardless where you drag to from the Interface Builder. It’s easy to create an IBOutlet instead of an IBAction if you forget to select the correct option. However, we have a new change in Xcode 10 that makes it incredibly easy to create an IBAction based on the insertion point so it’s now almost impossible to create an outlet in a wrong location.

• Highlight the problem with Xcode 9 version

• Create a new IBOutlet by dragging to the top of function

• Create an IBAction by dragging to the bottom of function

Bitbucket is a popular version control platform and we are going to learn how to integrate Xcode with Bitbucket. We are going to learn how to connect an existing Xcode project to a new repository and also learn how to clone an existing repository into a new Xcode project. Because of the collaboration between Apple and Bitbucket, there’s now a new button to directly clone Xcode project from an existing repository on Bitbucket.

• Create a new repository on Bitbucket

• Connect a new Xcode project to existing repository

• Clone an existing repository to a new Xcode project

GitLab was not supported in the previous version of Xcode, so this is a welcome addition to Xcode 10 because GitLab is also a very popular version control platform. In this video we will learn how to connect a new Xcode project to an existing GitLab repository and how to clone an existing repository into a new Xcode project.

• Create a new repository on GitLab website

• Connect a new Xcode to an existing repository on GitLab

• Clone an existing repository to a new Xcode project

Xcode 10 added a new feature that let you quickly see where the changes have been made in your source code since the last commit. This is very helpful because in the previous Xcode there are no visual indicators while writing the code. The source control change bar also uses different colors to indicate status, for example it will show as red if there’s a likely merge conflict when working as a team.

• Discuss what the source control change bar is

• Discuss the various color status of the bar

• Learn how to discard codes using the change bar

Generating SSH key is a very cumbersome process, but Xcode 10 has made this step incredibly easy. In order to generate SSH key pair on most version control platform, the user must follow a laborious step that can get confusing. This leads to many users not bothering to generate SSH keys and instead use HTTPS alternative, even though SSH is more secure.

• Discuss how to generate SSH keys on GitLab

• Use Xcode 10 to generate new SSH keys

• Confirm on GitLab that new SSH keys were generated

Selecting multiple objects from the object library is not very straight-forward. When you select an object from the library then the window is dismissed. You must click the button to bring up the library once again to select another object. There’s a way to keep the window open so that you can select multiple objects from the library all at once.

• Hold down the Option key on the keyboard

• Click the Object Library button while holding

• Drag multiple objects to the storyboard from the library

Whenever you open the Object Library to select an object, if you search for an object and press the Enter key, the object will be added to a location on the Scene. However, if you want to add the object to a location, first click on the location you want to add the object, and then search for the object to add, press the Enter key and the object will be added to the clicked location.

• Click on the location where you want to place new object

• Bring up the library and search for object’s name

• Press the Enter key to add the object to the location

Xcode allows a group of objects to be embedded in a larger object, so that managing multiple objects becomes easier. There has always been a way to do this from Xcode menu. However, Xcode 10 added a new embed button that gives a quick access for doing this task. This button can be found on the canvas near the Auto-layout button and it can be used for multiple functions.

• Use Xcode 9 embed button to stack two items

• Use Xcode 10 to group multiple object in a view

• Embed a view controller in a navigation controller

One of the painful points when using previous versions of Xcode is the inability to see what a custom font looks like until after you have selected the font. This means the user must continuously select multiple custom fonts before deciding on the one that satisfies the user. This can be a long tedious process, trying to find the correct font, without any preview. Xcode 10 has improved this feature by giving the user a preview of the font before it’s selected.

• Demonstrate Xcode 9 custom font selection

• Demonstrate Xcode 10 custom font selection

• Use the preview to decide which font to select

There was a general inconvenience in Xcode 9 where if you create a named color asset and you later changed the color of the asset, it was impossible to see the new changes to the color on the storyboard for all the object that used the named color, until the user restarts Xcode. Xcode 10 has improved this issue and it’s now possible to immediately see changes to the named color assets.

• Demonstrate the named color issue on Xcode 9

• Demonstrate how Xcode 10 fixed the issue

• Change the color of the asset, storyboard should refresh

Since the launch of MacOS Mojave, it is now possible to create MacOS apps that support dark mode. Creating apps that support the dark modes mean that some of the UI objects must use a different color when dark mode is enabled. Therefore, creating light and dark color variants is important, and it is very easy to set up in Xcode 10 for MacOS applications.

• Create a new color set in the Assets catalogue

• Set the color for dark and light mode

• Switch to dark mode to see the color variant

Just as the way we can create variants for custom colors, we can also create variants for images as well. This enable apps that support the dark mode to be able to use different images when they are in the light or the dark mode of the app. This can only be done on MacOS projects and not on iOS projects because iOS app does not support dark mode.

• Create a new image set in the Assets catalogue

• Add both dark and light versions of the images

• Switch to dark mode to see the correct image

When developing a MacOS app, one way to switch to the dark mode version of the app is to run the app and then use the System Preferences of the operating system, under General preference, to select the Dark mode from there. This is too many steps to check the dark mode of the app. Luckily there’s a preview button on Xcode 10 that makes it easy to get a quick preview of the dark mode.

• Run the MacOS project in order to see the light mode

• Use the System Preferences to see the dark mode

• Use the preview button in Xcode 10 to preview the modes

In the previous versions of Xcode, the media library was accessible in the same location as object library so it was straightforward to locate. However the media library location is no longer a straightforward to access and in this video we are going to discuss the way to access the media library.

• Demonstrate how to locate the media library on Xcode 9

• Bring up the media library in Xcode 10

• Change the media library to grid layout

Now that we have learnt how to locate the media library in Xcode 10, we are going to look at how to quickly launch the media library with a keyboard shortcut. The media library can be used in code by using a shortcut to launch it and then dragging one of the media or custom colors directly to the source code. This makes writing code a lot faster than in previous versions of Xcode.

• Launch the media library with a shortcut

• Drag image from the media library to source code

• Drag a custom color from media library to source code

Sometimes we may decide to rename a particular constant or variable in the project. One way is to use a search function to find all the locations where the variable has been used and then manually change the name one at a time. This is not ideal. There’s a function in Xcode that allows us to rename a variable and the changes will be propagated throughout the project.

• Right click on variable to locate the rename menu

• Provide a new name for the variable or constant

• Check to make sure the new name is applied in all files

When writing code we should always have small manageable blocks of codes and avoid having duplicated codes. One way to meet these criteria is to use as many methods as possible in your code. In a very long code, we can extract part of the code as standalone method. Xcode provides an easy way to achieve this.

• Select a block of code that you want to extract

• Right click on the selected code to extract the code

• Give a name to the newly created function

Using code snippets provides a convenient way to reuse code. However, when we save codes into code snippets, some of the hard-coded variables are also saved. If you were to reuse the code snippet in the future and forget to change the values of the variables in the snippet then you could ship a faulty code. Using tokens as a placeholder allows you to add snippets without the possibility of having variables embedded in the snippets.

• Select a block of code to add to code snippets library

• Add tokens to replace all the variables in the code

• Reuse the snippet and provide new values for the snippets

When setting up layout constraints, the “Add New Layout Constraints” button on the canvas allows for quicker constraints setup. However, there are times when the constraints we want to set up is not straightforward and this is why Xcode provide another means of creating a layout constraint between two views. You can drag between them inside of the scene or you can drag between views in the document outline.

• Control-drag between a button and the main view

• Select the desired constraint from the pop up menu

• Use the document outline to create constraints between views

Xcode storyboard is an XML file behind the scene. It gets larger and takes more time to build or load as more scenes and more layout constraints are added to the storyboard. This can slow down the performance of the project. There’s a very neat solution however, which is to keep storyboard as small as possible. If you have a storyboard with lots of scene, you may want to refactor it into smaller units and this will improve the performance of the project in general.

• Select the scene(s) to refactor to a new storyboard

• Use the Editor menu to refactor selected scenes into new storyboard

• Use the storyboard reference object to link two storyboards