从零开始的8-bit迷宫探险【Level 2】Xcode 开发环境介绍

今日目标

• 安装 Xcode
• 使用模拟器执行游戏专案
• 认识 Xcode 的开发环境
• 使用 Playground

安装 Xcode

首先，请准备好一台 Mac 电脑

• 请在 App Store 搜寻 Xcode，并且安装它
  

开启一个新专案

• 安装完後，打开 Xcode，点击 Create a new Xcode project
  

• Xcode 提供了多种模板可以选择，因为我们接下来的目标是制作游戏，所以可以直接选择游戏 (Game) 模板，它会帮我们建置好使用 Spritekit 来开发游戏所需要的一些基本档案架构。选择完模板後，点击 Next
  

• 写上专案的名称，点击 Next
  

• 选择你要储存专案的位置，点击 Create，专案就建置完成了，接着可以看到以下画面：
  

• 介面的左上方，可以执行专案
  

  1. 执行
  2. 停止
  3. 选择模拟器

• 点击选择模拟器，可以看到出现更多可选的装置
  

• 我们点击画面上的执行按钮，透过模拟器执行专案，可以看到画面上出现游戏模板预设的文字
  

• 切换成横屏的快捷键：command + 方向键

  • 例如 command + 右键：可将模拟器往右旋转 90 度
    

Xcode 的开发环境

我们来看一下 Xcode 的开发环境介面，以下搭配编号来解说：

Xcode 的开发介面主要分成四大区块

1. 导览器 (navigator)：可以检视专案内的档案，例如：
   • .swift：攥写程序码的档案
   • .sks：SpriteKit Scene 场景画面
   • .storyboard：故事板，协助开发者可用视觉化的介面来开发，可以很清楚地看到元件的层级关系。例如画面中蓝色的箭头，就是 APP 的最初进入点 (Entry Point)
   • Assets.xcassets：放置图片的地方
2. 编辑器 (editor)：会依据在导览器所选择的档案类型，呈现不同的编辑画面，例如：
   • 选择 .sks：可以看到游戏场景的视觉画面
     
   • 选择 .swift：可以看到程序码画面
     
   • 选择 .storyboard：可以看到故事板画面
     
3. 除错区 (debug area)：可以看到程序码印出的讯息，协助除错
4. 检查器 (inspectors)：会依据选择的档案类型，呈现不同资讯，例如档案、ID、属性等等
5. 点击可收合/展开导览器
6. 点击可收合/展开除错区
7. 点击可收合/展开检查器
8. 点击可开启元件库，会依据所选的档案类型而不同

   • 在 .storyboard 开启
     

   • 在 .sks 开启
     

9. 点击可以多新增一个编辑器，方便同时开启多个档案检视
   

Playground

最後，我们来介绍 Playground。Playground 可以让我们快速编写程序码，并且迅速执行及看到结果，对於初学者学习 swift 来说，是一个非常方便的工具。

以下，介绍建立一个 Playground 的方法：

• 开启 Xcode，点击 Get started with a playground
  

• 选择 Blank 模板，点击 Next
  

• 给予 Playground 一个名称，并选择储存的位置，点击 Create，就成功创建好 Playground 了。以下是 Playground 的画面
  

• 执行：可以点击介面上的三角形来执行程序
  

• 在程序码中加上 print(str)，执行後可以看到下方的区域印出文字，可以帮助我们 debug
  

今日小结：
今天我们已经成功在电脑中安装 Xcode，并且对於开发介面有了基本的了解，接着就可以开始写 code 罗！
明天开始会介绍 swift 基础语法，有了一些基本功之後，才可以比较顺利地开发游戏喔！大家可以搭配 Playground 来做练习。