iOS Sprite Kit教程之編寫程序以及Xcode的介紹

時間 2019-11-06

標籤 ios sprite kit 教程編寫程序以及 xcode 介紹欄目 iOS 简体版

原文原文鏈接

iOS Sprite Kit教程之編寫程序以及Xcode的介紹

Xcode界面介紹

一個Xcode項目由不少的文件組成，例如代碼文件、資源文件等。Xcode會幫助開發者對這些文件進行管理。因此，Xcode的界面也比較複雜，如圖1.40所示。html

圖1.40 Xcode的界面ios

在圖1.40中能夠看到Xcode的界面大體能夠分爲4大部分。swift

q 編號爲1的部分是導航窗口。xcode
q 編號爲2的部分是代碼編輯區域。app
q 編號爲3的部分是工具窗口。框架
q 編號爲4的部分是顯示程序調試信息的窗口。編輯器

本小節將對幾個重要的區域進行講解。ide

1.導航窗口工具

導航窗口的做用是顯示整個項目的樹狀結構。開發者能夠根據本身的喜愛對其進行大小調整，以及顯示和隱藏（View|Navigators|Show/HideNavigator來實現顯示和隱藏，或經過使用Hide or show the Navigator按鈕來實現顯示和隱藏）。導航窗口能夠顯示8類不一樣的信息，因此又有了8個導航器。這8個導航器分別爲：項目導航器、符號導航器、搜索導航器、問題導航器、測試導航器、調試導航器、斷點導航器和日誌導航器。能夠經過導航窗口頂部的8個圖標來進行導航之間的切換。測試

2.工具窗口

工具窗口能夠對項目的一些設置信息進行編輯，開發者也是能夠進行隨時顯示和隱藏的（View|Utilities|Show/HideUtilities來實現顯示和隱藏，或經過使用Hide or show the Utilities按鈕來實現顯示和隱藏）。工具窗口能夠分爲上下兩個部分。上半部分顯示的內容取決於開發者在編輯器上正在編輯的文件類型，其中文件類型有3種以下：

q 當編輯器編輯的是代碼文件時，工具窗口上半部分顯示的內容爲：文件查看器和快速幫助中的一個的內容。要想實現兩個內容的切換，能夠經過使用此窗口上半部分在頂部顯示的圖標來進行切換。
q 當編輯器編輯的是界面文件時，工具窗口上半部分顯示的內容爲：文件查看器、快速幫助、標識查看器、屬性查看器、尺寸查看器和鏈接查看器中的一個的內容。要想實現6個內容的切換，能夠經過使用此窗口上半部分在頂部顯示的圖標來進行切換。
q 當編輯器編輯的是場景文件是時，工具窗口的上半部分顯示的內容爲：文件查看器、快速幫助、以及節點查看器中的一個內容。

下半個工具窗口顯示的內容是文件模板庫、代碼片段庫、對象庫和媒體庫的其中一個內容。要想實現這4個內容的切換，能夠經過使用此窗口下半部分在頂部顯示的圖標來進行切換。

3.編輯窗口

編輯窗口能夠用來編寫代碼或編輯場景。在頂端，有左右箭頭和整個項目的層次顯示。

4.目標窗口

目標窗口中包含了項目的程序和配置，這些配置指定了如何構建程序代碼，如圖1.41所示。在目標窗口的頂部，能夠選擇General、Capabilities、Info、Build Settings、Build Phases、Build Rules中的內容。

圖1.41 目標窗口

Xcode中運行程序

瞭解了Xcode的界面構成後，咱們來看Xcode是如何進行程序運行的。運行程序只須要單擊運行按鈕，如圖1.42所示，程序會自動進行運行了。在運行程序前首先對程序進行編譯。若是程序正確，會出現一個Build Succeeded字符串，如圖1.43所示。若是程序出現錯誤，那麼就會出現一個Build Failed字符串，如圖1.44所示。

圖1.42 運行程序

圖1.43 程序正確圖1.44 程序錯誤

在程序編譯後，會自動對程序進行鏈接、運行，運行效果如圖1.45~1.47所示。

圖1.45 運行效果圖1.46 運行效果圖1.47 運行效果

注意：圖1.45是應用程序的一個啓動界面是系統自帶的，開發者真正要使用到的界面是1.46所示的界面。啓動界面也是能夠刪除的，若是開發者不想在程序運行時有啓動界面，能夠打開Info.plist文件，在此文件中找到Launch screen interface file base name，將其value後面的內容刪除，如圖1.48所示。

圖1.48 設置啓動界面

iOS模擬器介紹

圖1.45或者1.46所看到的相似於手機的模型就是iOS模擬器。iOS模擬器是在沒有iPhone或iPad設備時，對程序進行檢測的設備。iOS模擬器能夠模仿真實的iPhone或iPad等設備的各類功能。本小節將講解一些有關模擬器的操做。

1.模擬器與真機的區別

iOS模擬器能夠模仿真實的iPhone或iPad等設備的功能各類功能，如表1-4所示。

表1-4 iOS模擬器

iOS模擬器只能實現表1-4中的這些功能，其它的功能是實現不了的，如打電話、發送SMS信息、獲取位置數據、照照相、麥克風等。

2.退出程序

若是想要將圖1.47所示的應用程序退出（爲用戶完成某種特定功能所設計的程序被稱爲應用程序），該怎麼辦呢？這時就須要選擇菜單欄中的Hardware|Home命令，退出應用程序後的效果，如圖1.49所示。

圖1.49 退出應用程序圖1.50 添加圖像1

3.設置應用程序的圖標

在圖1.49中能夠看到顯示在iOS模擬器上的應用程序的圖標爲網狀白色圖像，它是iOS模擬器上的應用程序的默認圖標。通常開發者不會使用此圖標的，而是使用本身定製的圖標。如下就是修改默認圖標爲自定義圖標的具體操做步驟。

（1）右擊Supporting Files文件夾，彈出快捷菜單，如圖1.50所示。

（2）選擇Add Files to "Hello World"…命令，彈出選擇文件對話框，如圖1.51所示。

圖1.51 添加圖像2 圖1.52 設置圖標

（3）選擇須要添加的圖像，單擊Add按鈕，實現圖像的添加。添加後的圖像就會顯示在Supporting Files文件夾中。

（4）單擊打開Supporting Files文件夾中的Info.plist文件，在其中添加一項Icon files，在其下拉菜單的Value中輸入添加到Supporting Files文件夾中的圖片，如圖1.52所示。

此時運行程序，會看到如圖1.53所示的效果。

圖1.53 運行效果圖1.54 設置語言圖1.55 設置語言

4.設置語言

通常狀況下iOS模擬器默認使用的English（英語）。對於英文很差的開發者來講，英文就像天書，怎麼看也看不懂。這時，就須要將iOS模擬器的語言進行設置。要設置語言，須要切換到模擬器的主界面，向左拖動，找到Settings應用程序。找到後既能夠對iOS模擬器的語言進行設置了，如下將iOS模擬器的語言變爲中文，具體操做步驟以下：

（1）切換到主界面，找到Settings應用程序，如圖1.54所示。

（2）選擇Settings應用程序圖標，進入Settings界面中，如圖1.55所示。

（3）選擇General選項，進入General界面，如圖1.56所示。

（4）選擇Language&Region選項，進入Language&Region界面中，如圖1.57所示。

圖1.56 設置語言圖1.57 設置語言

（5）選擇iPhone Language選項，進入iPhone Language界面，如圖1.58所示。

（6）選擇「簡體中文」選項，輕拍Done按鈕，彈出動做表單，如圖1.59所示。

圖1.58 設置語言圖1.59 設置語言

（7）選擇Change to Chinese，Simplified選項，進入正在設置語言的界面，如圖1.60所示。當語言設置好後，iOS模擬器將會退出到主界面，此時主界面的應用程序的標題名就變爲了中文，如圖1.61所示。

圖1.60 設置語言圖1.61 設置語言

5.旋轉

真機能夠進行旋轉，模擬器一樣也能夠進行旋轉。要實現iOS模擬器的旋轉只須要同時按住「Command+方向鍵」就能夠了。如下是使用「Command+->」實現的iOS模擬器實現的向右旋轉，如圖1.62所示。

圖1.62 旋轉模擬器

若是想要讓模擬器在一運行程序就進行旋轉，即設備水平向左放置或者水平向右放置該怎麼實現呢？這裏有兩種辦法：第一種是在建立項目的General中進行設置；第二種是使用代碼進行設置。

1.General中的設置

在建立的項目中，打開目標窗口（單擊項目名稱，能夠打開），找到General選項。單擊該選項，在General面板中找到Device Orientation選項。Device Orientation後面有4個單選框，開發者能夠經過對這四個單選框的選擇實現模擬器的旋轉，如圖1.63所示。

圖1.63 設置模擬器的旋轉圖1.64 運行效果

圖1.63是將Hello World應用程序中的模擬器進行了水平放置。此時運行程序，會看到如圖1.64所示的效果。

2.使用代碼

代碼來實現設備方向的改變，首先須要使用到supportedInterfaceOrientations()方法來實現設備方向的設置，其語法形式以下：

func supportedInterfaceOrientations() -> Int

其中，設備的方向包括7個，如表1-5所示。

表1-5 旋轉方法

設置好設備的方向後，須要使用到shouldAutorotate()方法來讓設備進行改變，其語法形式以下：

func shouldAutorotate() -> Bool

如下將使用代碼，讓Hello World應用程序中的模擬器進行水平放置。打開GameViewController.swift文件，在此文件中編寫代碼，代碼以下：

override func shouldAutorotate() -> Bool {
return true
}
override func supportedInterfaceOrientations() -> Int {
return Int(UIInterfaceOrientationMask.Landscape.rawValue) //讓設備水平放置
}

此時運行程序，能夠看到橫屏顯示的模擬器。

6.刪除應用程序

若是在iOS模擬器中出現了不少的應用程序，就能夠將再也不使用的應用程序進行刪除。這樣一來能夠爲設備節省內存空間，也可使用戶或者開發者便於管理本身的應用程序。如下主要實現Hello World應用程序的刪除。

（1）長按要刪除的Hello World應用程序，直到全部的應用程序都開始抖動，並在每個應用程序的左上角出現一個「x」，它是一個刪除標記，如圖1.65所示。

（2）單擊Hello World程序左上角出現的刪除標記，會彈出一個刪除「Hello World」對話框，選擇其中的「刪除」按鈕，如圖1.66所示。這時Hello World應用程序就在iOS模擬器上刪除了。

圖1.65 刪除應用程序1 圖1.66 刪除應用程序2

場景編輯器

在圖1.46和圖1.47中所看到的模擬器中顯示的內容都爲場景，對於場景的設計有專門的場景編輯器。本小節將講解場景編輯器的組成、以及如何設計。

1.場景編輯器的組成

單擊項目中的GameScene.sks就能夠打開場景編輯器。場景編輯器分爲了4部分，如圖1.67所示。

圖1.67 場景編輯器構成

其中，這四部分的說明以下：

q 編號爲1的部分爲導航窗口。
q 編號爲2的部分爲場景：在能夠在其中放置一些節點，
q 編號爲3的部分爲工具窗格的檢查器：用於編輯當前選擇的對象的屬性。
q 編號爲4的部分爲工具窗格的庫：若是選擇的是Objects，裏邊存放了節點以及其它。

2.設置場景

如下將在場景中顯示一個標籤，具體的操做步驟以下：

（1）單擊工具窗口的庫，在其中找到Show the Object Library。在Show the Object Library中找到Label標籤對象將其拖動到場景中，如圖1.68所示。

圖1.68 設計場景

此時運行程序，會看到如圖1.69所示的效果。

圖1.69 運行效果

若是想要讓新添加的標籤對象有一個獨特的風格。須要使用Show the SKNode inspector面板，如圖1.70所示。

圖1.70 設置標籤

在圖1.70中，咱們將標籤的Text設置爲了Sprite Kit，將標籤的Color設置爲了黑色。此時運行程序，會看到如圖1.71因此的效果。

圖1.71 運行效果

Xcode編寫代碼

代碼就是用來實現某一特定的功能而用計算機語言編寫的命令序列的集合。如今就來經過代碼實現標籤的顯示。具體的操做步驟以下：

（1）打開Hello World項目的GameScene.swift文件，將不使用的代碼刪除，此時剩餘代碼以下：

import SpriteKit
class GameScene: SKScene {
override func didMoveToView(view: SKView) {
}
}

（2）在GameScene.swift文件中編寫代碼。此代碼實現的功能是在場景中顯示一個標籤內容爲"Never betray Hello World"的標籤對象。代碼以下：

import SpriteKit
class GameScene: SKScene {
override func didMoveToView(view: SKView) {
let label = SKLabelNode(fontNamed:"Chalkduster") //實例化對象
label.text = "Never betray Hello World" //設置顯示的內容
label.fontSize = 65 //設置文本大小
label.fontColor=SKColor.blueColor() //設置顏色
label.position = CGPoint(x:CGRectGetMidX(self.frame), y:CGRectGetMidY(self.frame))
self.addChild(label)
}
}