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

標籤：

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

一個Xcode項目由很多的檔案組成，例如代碼檔案、資源檔等。Xcode會協助開發人員對這些檔案進行管理。所以，Xcode的介面也比較複雜，1.40所示。

 

 

圖1.40  Xcode的介面

在圖1.40中可以看到Xcode的介面大致可以分為4大部分。

 

• q  編號為1的部分是導航視窗。
• q  編號為2的部分是代碼編輯地區。
• q  編號為3的部分是工具視窗。
• q  編號為4的部分是顯示程式調試資訊的視窗。

 

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

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)
•     }
• }

 

此時運行程式，會看到1.72所示的效果。

 

 

圖1.72  運行效果

本文選自：iOS遊戲架構Sprite Kit基礎教程——Swift版大學霸內部資料，轉載請註明出處，尊重技術尊重IT人！

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