In this tutorial, we will focus entirely on creating an Options or Preferences screen, using a Single View Application (or UIView based project) or Sprite Kit based project. We'll create UISwitches, UIButtons, UISliders, UISegmentedControls (and groups of buttons that act like segmented controls), and finally, a UIPickerView. Picker views can be made up of single or multiple columns of "spin-able" data (for example, Apple's Clock app has a Timer function made up of a double column UIPickerView).
In our hypothetical project we will create a 3-column picker view which populates itself using data from a Property List file. This data is split into a column for the level name ("Ocean, Bad Lands, etc"), a column for the mode of game play ("Kill X" number of enemies, "Collect X" number of coins, or "Beat the Clock") and third column for a number parameter to tweak the difficulty of each game mode (for example, you could add more time to the "Beat the Clock" mode or add more enemies to kill). We will make the wheels interconnected as well. So if you spin the first wheel to set the level, it will change the other two wheels to default to the settings defined in the Property List for the level. If you spin the middle wheel to change the game mode, it will automatically change the third wheel to use a different range of numbers (one mode of play might be best with a small range like 1-15, but another might work better in increments of ten, like 60-300).
All of our data is stored in a singleton AppData class, which serves as a go-between to use (or test) our preference variables with any other class. You'll see how to test any changes made in the OptionScreen class with the main game / app class.
The source projects are saved in increments throughout the tutorial series, and uploaded in the Supplemental Materials tab at notable breakpoints. You'll get both UIView and Sprite Kit based projects. The images to use are included as well.
In this video, we'll create a singleton class to store values which we will pass back and forth between the main app's class (or game engine) and the options screen.
In this tutorial we will create the OptionScreen class to be used with either a UIView class called MainGame or with a Sprite Kit based class. We'll test the classes with simple NSLog statements, in both projects.
In this video we will create a UIButton to launch the OptionScreen from either a UIView project or Sprite Kit project. We will look at positioning and sizing the button differently based on the device. And we will also format the title of the button using a UIFont.
In this vide we will finally show something in our Options Screen. To have a bit of fun, we will make the screen open overtop the main app (or game class) at about 95% of the device's height and width, leaving a border around the Option Screen to the class below. Then we will test using the touchesBegan method to see if the user touches outside of that border, if so we return to whatever class opened the Options Screen.
This optional lesson teaches how to use a repeating NSTimer or SKAction (in the Sprite Kit project) to fade in a tinted background behind the Options Class. We'll do this using a UIView with the backgroundColor set to black, and changing the alpha value over time.
In this tutorial, we will add two UISwitches to the Options Screen. These are simple toggles (off or on) which could be used to mute sound FX or set another preference between two settings. We will save the values of these switches in the AppData singleton so whenever the Option Screen is opened it initializes using the last settings saved.
In this video, we will set up a UISlider, this could be used to fine tune a setting in the game (for example, "slide to adjust the rate of acceleration in a plane game"). The minimum and maximum range can be any number (1 to 10, or 50 to 10,000), whatever works best for your needs. Again we will save the value of the slider to the AppData class so when the Options Screen is opened next, the slider is set back to the same value.
In this video, we will go over creating a UISegmentedControl. This style won't exactly "gel" with our project's look, but we will create a similar button group in the next video.
In this video, we will create a group of UIButtons to select a hypothetical weapon to use. Turning one button on, will turn off the other buttons, similar to a UISegmentedControl group. As usual we will save this data to the AppData class.
The projects at the end of this Session have been uploaded to the Supplemental Materials tab.
In this tutorial, we will create a basic single column UIPickerView.
In this tutorial, we will create a Property List to store data for our three wheel UIPickerView.
In this tutorial, we will switch the UIPickerView to use three component wheels, then populate it with data from Property List.
This tutorial will finish off the first version of our UIPickerView by setting default values when spinning the Level wheel (the first wheel). So whatever settings are specified in the property list file, will get spun to automatically when changing the first wheel. In this version, wheel 1 (the Level Names) and wheel 2 (the Level's type of Game Play) are locked together (the next version will change this).
In this version we will polish off the UIPickerView and make it so the middle wheel only has three values (each mode of play is only listed once), and this wheel can also be set independent of the first wheel. In the previous version these two wheels would always spin to the same row.
In this video we will complete the polished version of the UIPickerView and test for any changes to the picker in the main class.
In this video we add a Return to Game button (in case it wasn't obvious that tapping outside the frame of the OptionScreen would go back to the game).
In this video, we will save our variables to the standard NSUserDefaults, and use them to retain those same preferences even if the app is closed and restarted.
In this tutorial, we will quickly look at NSNotifications as an alternate means of alerting classes to a preference change (and passing NSObjects between classes via the notification).
The finished project has been uploaded to the Supplemental Materials tab.
Justin Dike is the founder of CartoonSmart one of the internet's first video training websites. He is a long-time illustrator and animator, focusing mostly on Adobe Flash, and experienced programmer with Swift, Sprite Kit, Actionscript 3, Objective C and Cocos2d. For CartoonSmart he has recorded hundreds of hours of video tutorials and recently published his first full length book titled iOS Programming with Xcode and Cocos2d available in the iBookstore. Justin has also developed many iOS games, including a side scrolling game engine.