Programming of the IOS Sprite Kit tutorial and introduction to Xcode

IOS Sprite Kit Tutorial Programming and Xcode Introduction Xcode interface Introduction

A Xcode project consists of a number of files, such as code files, resource files, and so on. Xcode helps developers manage these files. Therefore, Xcode's interface is also more complex, as shown in 1.40.

Figure 1.40 Xcode's interface

In Figure 1.40, you can see that the Xcode interface can be roughly divided into 4 parts.

• The part with Q number 1 is the navigation window.
• The part of Q number 2 is the code editing area.
• The part with Q number 3 is the tool window.
• The part of Q number 4 is the window that displays the debugging information for the program.

Several important areas will be explained in this section.

1. Navigation window

The purpose of the navigation window is to display the entire project's tree structure. Developers can resize them to their liking, as well as display and hide them (view| navigators| Show/hidenavigator to show and hide, or show and hide by using the hide or show the Navigator button). The navigation window can display 8 different types of information, so there are 8 navigators. These 8 navigators are: Project Navigator, Symbol Navigator, search Navigator, Problem Navigator, Test Navigator, Debug Navigator, Breakpoint Navigator, and log navigator. You can toggle between navigation by 8 icons at the top of the navigation window.

2. Tool window

The tool window allows you to edit some of the setup information for the project, which can be displayed and hidden by the developer at any time (view| utilities| Show/hideutilities to show and hide, or show and hide by using the hide or show the utilities button). Tool windows can be divided into two sections. The upper part of the display depends on the type of file that the developer is editing on the editor, with 3 types of files as follows:

• Q When the editor is editing a code file, the top half of the tool window displays the contents of one of the file viewers and quick help. To switch between two things, you can toggle them by using the icon that appears at the top of the upper part of the window.
• Q When the editor is editing an interface file, the upper part of the tool window displays the contents of the file Viewer, quick Help, Identity viewer, property Viewer, Dimension Viewer, and one of the connection viewers. To switch between 6 content, you can toggle it by using the icon that appears at the top of the upper part of the window.
• Q When the editor is editing a scene file, the top half of the tool window displays the contents of the file Viewer, quick Help, and a content in the node viewer.

The next half of the tool window shows one of the contents of the File Template Library, code Snippets Library, object library, and Media Library. To switch between the 4 content, you can toggle it by using the icon that appears at the top of the bottom half of the window.

3. edit window

The edit window can be used to write code or edit scenes. At the top, there are left and right arrows and the entire project hierarchy is displayed.

4. Target window

The target window contains the program and configuration for the project, which specifies how to build the program code, as shown in 1.41. At the top of the target window, you can select the contents of general, capabilities, Info, build Settings, build phases, build rules.

Figure 1.41 Target window

Running programs in Xcode

After understanding the interface structure of Xcode, let's look at how Xcode runs the program. To run the program, just click the Run button, 1.42, and the program will run automatically. Compile the program first before running the program. If the program is correct, a build succeeded string appears, as shown in 1.43. If there is an error in the program, a build failed string is displayed, as shown in 1.44.

Figure 1.42 Running the program

Figure 1.43 Program correct figure 1.44 program error

After the program is compiled, the program is automatically connected, run, and run as shown in the 1.45~1.47 effect.

Figure 1.45 Run effect figure 1.46 Run effect figure 1.47 run effect

Note: Figure 1.45 shows that one of the application's start-up interfaces is the system itself, and the interface that the developer really wants to use is the 1.46 interface. The start screen can also be deleted, if the developer does not want to run the program when the launch interface, you can open the Info.plist file, found in this File Launch screen interface file base name, the content after its value is deleted, as shown in 1.48 ，

Figure 1.48 Setting up the Start screen

Introduction to iOS Simulator

The phone-like model seen in Figure 1.45 or 1.46 is the iOS emulator. The iOS simulator is a device that detects a program when no iphone or ipad device is in place. The iOS simulator can mimic the various features of a real iphone or ipad device. This section explains some of the operations of the simulator.

1. The difference between a simulator and a real machine

The iOS simulator can mimic the functionality of a real iphone or ipad device, as shown in table 1-4.

Table 1-4 iOS simulator

The iOS simulator only implements these features in table 1-4, and other features are not possible, such as making calls, sending SMS messages, acquiring location data, photographing, microphones, etc.

2. Exit the program

What if you want to exit the application shown in Figure 1.47 (a program designed to perform a specific function for a user is called an application)? Then you need to select hardware| in the menu bar Home command, after exiting the application, the effect is shown in 1.49.

Figure 1.49 exiting the application Figure 1.50 Adding an image 1

3. Set the application's icon

In Figure 1.49, you can see the icon for the application displayed on the iOS emulator as a mesh white image, which is the default icon for the app on the iOS emulator. The general developer does not use this icon, but instead uses its own custom icon. Here's how to change the default icon to a custom icon.

(1 Right-click on the supporting Files folder and Pop-up the shortcut menu, shown in 1.50.

(2 Select Add Files to the "Hello world" ... command, the pop-Up selection file dialog box, 1.51 shows.

Figure 1.51 Adding an image 2 Figure 1.52 Setup icon

(3 Select the image you want to add, and click the Add button to add the image. The added image is displayed in the supporting Files folder.

(4 Click to open the Info.plist file in the supporting files folder, where you add an icon files, and in the value of its drop-down menu, enter the picture that you added to the supporting Files folder. As shown in 1.52.

When you run the program, you see the effect shown in 1.53.

Figure 1.53 running effect Figure 1.54 setting language figure 1.55 setting language

4. Setting the language

In general, the iOS simulator is used by default in English. For the English poor developers, English is like the heavenly book, how to see also do not understand. At this point, you need to set the language of the iOS emulator. To set the language, you need to switch to the emulator's main interface and drag to the left to find the settings application. After you have found the language of the iOS simulator can be set up, the following will be the language of the iOS simulator to Chinese, the specific steps are as follows:

(1 switch to the main interface to find the settings application, shown in 1.54.

(2 Select the Settings application icon to enter the settings interface, as shown in 1.55.

(3 Select the General option to enter the general interface, as shown in 1.56.

(4 Select the language&region option to enter the Language&region interface, as shown in 1.57.

Figure 1.56 Setting language figure 1.57 setting language

(5 Select iphone language option to enter the iphone language interface, as shown in 1.58.

(6 Select the "Simplified Chinese" option and tap the Done button to eject the action form, as shown in 1.59.

Figure 1.58 setting language figure 1.59 setting language

(7 Select the change to chinese,simplified option and go to the interface where the language is being set, as shown in 1.60. When the language is set up, the iOS emulator will exit to the main interface, where the title of the main interface's application is changed to Chinese, as shown in 1.61.

Figure 1.60 Setting language Figure 1.61 setting language

5. Rotate

The real machine can be rotated, and the simulator can also be rotated. To achieve the rotation of the iOS simulator, just press and hold the command+ arrow key at the same time. The following is the right rotation of the iOS emulator implementation using "Command+->", as shown in 1.62.

Figure 1.62 Rotary Simulator

What if you want the simulator to rotate on a running program, where the device is placed horizontally to the left or horizontally to the right? There are two ways to do this: the first is to set up in the general of the project creation, and the second is to use code to set it up.

Settings in 1.General

In the project you created, open the target window (click the project name to open) and find the General option. Click this option to locate the device Orientation option in the General panel. Device orientation is followed by 4 radio boxes, and developers can rotate the simulator by selecting the four radio boxes, as shown in 1.63.

Figure 1.63 Setting the emulator's rotation figure 1.64 running effect

Figure 1.63 is a horizontal placement of the simulator in the Hello World application. When you run the program, you see the effect shown in 1.64.

2. Using the Code

Code to implement device orientation changes, first need to use the Supportedinterfaceorientations () method to implement device orientation settings, the syntax is as follows:

• Func supportedinterfaceorientations () Int

Where the direction of the device consists of 7, as shown in table 1-5.

Table 1-5 Rotation method

After setting the orientation of the device, you need to use the Shouldautorotate () method to make the device change, in the following grammatical form:

• Func shouldautorotate (), Bool

The following code will be used to place the simulator in the Hello World application horizontally. Open the Gameviewcontroller.swift file and write the code in this file with the following code:

• Override Func Shouldautorotate (), Bool {
• return True
• }
• Override Func Supportedinterfaceorientations (), Int {
• return Int (UIInterfaceOrientationMask.Landscape.rawValue) //Let the device be placed horizontally
• }

At this point, you run the program and you can see the simulator displayed on the horizontal screen.

6. Deleting an application

If you have a lot of applications in the iOS emulator, you can delete applications that you no longer use. This saves memory space for the device, and makes it easier for users or developers to manage their own applications. The following main implementations of the Hello World application are removed.

(1 Long Press the Hello World application that you want to delete until all applications start to jitter and an "X" appears in the upper-left corner of each application, which is a delete tag, as shown in 1.65.

(2 Click the delete tag that appears in the upper-left corner of the Hello World program, and a delete "Hello World" dialog box will pop up, selecting the "Delete" button, which is shown in 1.66. The Hello World application was then deleted on the iOS emulator.

Figure 1.65 Deleting an application 1 figure 1.66 Deleting an application 2

Scene Editor

The content shown in the simulator seen in figures 1.46 and 1.47 is a scene, with a dedicated scene editor for the design of the scene. This section explains the composition of the scene editor and how to design it.

1. Composition of the scene editor

You can open the scene editor by clicking Gamescene.sks in the project. The scene editor is divided into 4 parts, as shown in 1.67.

Figure 1.67 Scene editor composition

Of these, the four parts are described as follows:

• The part with Q number 1 is the navigation window.
• The part of Q number 2 is the scene: in which some nodes can be placed,
• The section Q of 3 is the Inspector for the tool pane: Used to edit the properties of the currently selected object.
• The part of the Q number 4 is the Library of the tool pane: If you choose objects, the nodes and others are stored inside.

2. Setting up the scene

The following will display a label in the scene, as follows:

(1 Click the Library in the tool window where you find show the Object library. In show the object library, locate the label tag object and drag it into the scene, as shown in 1.68.

Figure 1.68 Design Scenario

When you run the program, you see the effect shown in 1.69.

Figure 1.69 Running effect

If you want to have a unique style for the newly added label object. Need to use show the Sknode Inspector panel, shown in 1.70.

Figure 1.70 Setting the label

In Figure 1.70, we set the text of the label to the sprite Kit, setting the color of the label to Black. Running the program at this point, you will see the effect of 1.71.

Figure 1.71 Running effect

Xcode writing code

Code is a collection of command sequences that are written in a computer language to implement a particular function. Now it's time to implement the display of the tag through the code. The following steps are described:

(1 Open the Gamescene.swift file for the Hello World project and delete the unused code, with the remaining code as follows:

• Import SpriteKit
• Class Gamescene:skscene {
• Override func Didmovetoview (View:skview) {
• }
• }

(2 ) to write code in the Gamescene.swift file. The function of this code is to display a label object with the label content "Never betray Hello World" in the scene. The code is as follows:

• Import SpriteKit
• Class Gamescene:skscene {
• Override func Didmovetoview (View:skview) {
• Let label = Sklabelnode (fontnamed: "Chalkduster") //instantiation of the object
•         Label.text = "Never betray Hello World"                                                                 //Set what is displayed
•         label.fontsize = 65                                                                                                         //Set Text size
• Label.fontcolor=skcolor.bluecolor () //Set Facial Color
• Label.position = Cgpoint (X:cgrectgetmidx (Self.frame), Y:cgrectgetmidy (Self.frame))
• Self.addchild (label)
• }
• }

When you run the program, you see the effect shown in 1.72.

Figure 1.72 Running effect

This article is selected from:iOS Game Frame Sprite Kit Basic Tutorial--swift version of the University PA Internal information, reproduced please indicate the source, respect the technology respect the IT person!

Programming of the IOS Sprite Kit tutorial and introduction to Xcode