iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
Mobile Development

從零開始的8-bit迷宮探險!Swift SpriteKit 遊戲開發實戰系列 第 2

從零開始的8-bit迷宮探險【Level 2】Xcode 開發環境介紹

今日目標

  • 安裝 Xcode
  • 使用模擬器執行遊戲專案
  • 認識 Xcode 的開發環境
  • 使用 Playground

安裝 Xcode

首先,請準備好一台 Mac 電腦

  • 請在 App Store 搜尋 Xcode,並且安裝它
    https://imgur.com/12xk2cA.png

開啟一個新專案

  • 安裝完後,打開 Xcode,點擊 Create a new Xcode project
    https://imgur.com/39dORWj.png

  • Xcode 提供了多種模板可以選擇,因為我們接下來的目標是製作遊戲,所以可以直接選擇遊戲 (Game) 模板,它會幫我們建置好使用 Spritekit 來開發遊戲所需要的一些基本檔案架構。選擇完模板後,點擊 Next
    https://imgur.com/j98bWoB.png

  • 寫上專案的名稱,點擊 Next
    https://imgur.com/b6tcwFD.png

  • 選擇你要儲存專案的位置,點擊 Create,專案就建置完成了,接著可以看到以下畫面:
    https://imgur.com/Wb6o1MO.png

  • 介面的左上方,可以執行專案
    https://imgur.com/zSExstv.png

    1. 執行
    2. 停止
    3. 選擇模擬器
  • 點擊選擇模擬器,可以看到出現更多可選的裝置
    https://imgur.com/goDrbh0.png

  • 我們點擊畫面上的執行按鈕,透過模擬器執行專案,可以看到畫面上出現遊戲模板預設的文字
    https://imgur.com/EmxilxR.png

  • 切換成橫屏的快捷鍵:command + 方向鍵

    • 例如 command + 右鍵:可將模擬器往右旋轉 90 度
      https://imgur.com/OnQJjmf.png

Xcode 的開發環境

我們來看一下 Xcode 的開發環境介面,以下搭配編號來解說:
https://imgur.com/INAnrvP.png

Xcode 的開發介面主要分成四大區塊

  1. 導覽器 (navigator):可以檢視專案內的檔案,例如:
    • .swift:攥寫程式碼的檔案
    • .sks:SpriteKit Scene 場景畫面
    • .storyboard:故事板,協助開發者可用視覺化的介面來開發,可以很清楚地看到元件的層級關係。例如畫面中藍色的箭頭,就是 APP 的最初進入點 (Entry Point)
    • Assets.xcassets:放置圖片的地方
  2. 編輯器 (editor):會依據在導覽器所選擇的檔案類型,呈現不同的編輯畫面,例如:
    • 選擇 .sks:可以看到遊戲場景的視覺畫面
      https://imgur.com/eEJfIzH.png
    • 選擇 .swift:可以看到程式碼畫面
      https://imgur.com/ATup0Hp.png
    • 選擇 .storyboard:可以看到故事板畫面
      https://imgur.com/uri2XeC.png
  3. 除錯區 (debug area):可以看到程式碼印出的訊息,協助除錯
  4. 檢查器 (inspectors):會依據選擇的檔案類型,呈現不同資訊,例如檔案、ID、屬性等等
  5. 點擊可收合/展開導覽器
  6. 點擊可收合/展開除錯區
  7. 點擊可收合/展開檢查器
  8. 點擊可開啟元件庫,會依據所選的檔案類型而不同
    • 在 .storyboard 開啟
      https://imgur.com/8mxQcjq.png

    • 在 .sks 開啟
      https://imgur.com/0b1GnLy.png

  9. 點擊可以多新增一個編輯器,方便同時開啟多個檔案檢視
    https://imgur.com/15Bo5F3.png

Playground

最後,我們來介紹 Playground。Playground 可以讓我們快速編寫程式碼,並且迅速執行及看到結果,對於初學者學習 swift 來說,是一個非常方便的工具。

以下,介紹建立一個 Playground 的方法:

  • 開啟 Xcode,點擊 Get started with a playground
    https://imgur.com/39dORWj.png

  • 選擇 Blank 模板,點擊 Next
    https://imgur.com/0SzP3Zt.png

  • 給予 Playground 一個名稱,並選擇儲存的位置,點擊 Create,就成功創建好 Playground 了。以下是 Playground 的畫面
    https://imgur.com/VpAJCS2.png

  • 執行:可以點擊介面上的三角形來執行程式
    https://imgur.com/srEw3Lu.png

  • 在程式碼中加上 print(str),執行後可以看到下方的區域印出文字,可以幫助我們 debug
    https://imgur.com/wtnEQQd.png


今日小結:
今天我們已經成功在電腦中安裝 Xcode,並且對於開發介面有了基本的了解,接著就可以開始寫 code 囉!/images/emoticon/emoticon42.gif
明天開始會介紹 swift 基礎語法,有了一些基本功之後,才可以比較順利地開發遊戲喔!大家可以搭配 Playground 來做練習。


上一篇
從零開始的8-bit迷宮探險【Level 1】一切都是從紅白機開始的
下一篇
從零開始的8-bit迷宮探險【Level 3】Swift 基礎語法 (一)
系列文
從零開始的8-bit迷宮探險!Swift SpriteKit 遊戲開發實戰30

尚未有邦友留言

立即登入留言