從零開始寫一個武俠冒險遊戲-0-開發框架Codea簡介

概述

本遊戲全程使用一款執行於 iPad 上的開發工具類 APP--Codea 來開發, Codea 是一款 輕量級 + 全功能的開發工具, 它既是一個:

• 執行時庫-Runtime

也是一個:

• 框架-Frameworks

還是一個:

• 整合開發環境-IDE

更是一個:

• 除錯伺服器-debugSever, 可通過瀏覽器來雲端除錯程式碼.

它還是 Lua 語言的一種擴充套件, 本質上它就是一個執行於 iPad 上可以動態載入執行 Lua 程式碼的應用程式.

它實現了一個非常易於使用的程式設計框架(類似於 Processing 和 OpenFrameWorks):

• setup() 函式, 負責初始化工作, 程式啟動時執行一次;
• draw() 函式, 負責螢幕繪製, 1秒鐘重新整理 60 次;
• touched(touch) 函式, 負責處理螢幕觸控;
• keyboard(key) 函式, 負責處理鍵盤操作;
• collide(contact) 函式, 負責處理物理模擬中的碰撞檢測;
• orientationchanged(newOrientation) 函式, 負責檢測螢幕位置(是否翻轉)

用它提供的功能豐富的函式你可以在 iPad 上編寫各種程式, 它提供了:

• 基本繪圖函式, 實現一些基本的繪圖函式
• 高階繪圖函式, 支援 OpenGL ES 2.0/3.0, 直接編寫 shader 程式碼, 即時檢視執行結果;
• Lua 語言的大多數函式, 如 table相關, string 相關, os 相關, 以及 math 相關的一些函式, 還包括協程 coroutine;
• Lua 的一些庫, 如 socket, lpeg, json
• 觸控函式, 負責處理螢幕觸控事件;
• 除錯函式, 負責處理程式除錯工作;
• 物理模擬函式, 封裝 box2D 提供了相關的物理模擬函式;
• 動畫函式, 一個專門的動畫類, 可以利用它來實現各種動畫效果;
• 聲音函式, 負責處理播放聲音以及生成各種音效;
• 顯示函式, 負責處理顯示模式設定以及視訊錄製等等
• 向量函式, 提供了二維, 三維, 四維向量以及相關的各種操作;
• 感測器函式, 負責處理 GPS 定位感測器和 加速度 感測器;
• 網路函式, 提供了封裝後的 http.request() 函式
• 儲存函式, 提供了各種存取函式, 用於存取遊戲資料到 iPad 上.

它提供了一個 IDE, 可以編輯/除錯/執行程式碼, 非常適合觸屏操作. 也非常適合那些希望能隨時隨地拿起平板就能程式設計的開發者, 據本軟體開發者 Simen 自述, 最初就是因為他想在平板電腦上隨時執行一些程式碼片段, 於是萌生了這個想法, 結果一步步搞出這麼一個超級方便很受歡迎的 iPad 開發工具來.

它可以把你編寫的程式碼匯出為一個 XCode 專案, 然後編譯成一個真正的 APP 釋出到 APP Store, 當然了, 需要你擁有一個開發者賬號.

我用過很多 iPad 上的程式設計工具, 最喜歡的一款是 Codea , 而且為了更好地發揮它的作用, 專門去認真學了 Lua.

接下來我們會對 Codea 做一個介紹, 讓讀者對我們後續即將使用的開發工具有一個初步瞭解.

介面

啟動進入

啟動 Codea 後進入主介面, 如下:

示例

Codea 自帶了一些示例程式, 如下:

左側選單欄

點開左側選單欄, 出現 4 個選項

內建函式手冊

在 Codea 中內建了全部的函式說明, 非常方便在程式設計時隨手查閱

shader實驗室

左側選單欄的第二項是一個 shader 實驗室, 你可以在裡面除錯自己的 shader 程式碼

自帶素材庫

左側選單欄第三項是 Codea 自帶的素材庫, 有一些可以免費使用的圖片素材和音樂音效素材, 還有一些 shader模板, 使用者也可以自行新增素材到素材庫

編輯介面

編輯介面自帶聯想輸入, 非常方便直接在 Codea 上輸入程式碼

程式框架說明

Codea 的執行機制是這樣的:

• setup() 只在程式啟動時執行一次
• draw() 在程式執行完 setup() 後反覆迴圈執行, 每秒執行 60 次
• touched() 跟 draw() 類似, 也是反覆迴圈執行

簡單說, 就是類似於這樣的一個程式結構:

setup()

while true do
    ...
    draw()
    touched(touch)
    ...
end

如果讀者有過使用 Processing 或 OpenFrameWorks 的經驗, 就比較熟悉這種框架了, 這種框架的優點就是結構簡單易懂, 流程非常清晰, 容易上手, 而且功能也不弱, 反而 Cocos2d-x 的那種又是場景, 又是導演的框架比較麻煩.

如果你願意, 也很容易在它的基礎上自己搞一個 MVC 架構出來, 如果你想實現更復雜的流程控制, 可以通過 Lua 的 coroutine 自行擴充套件, 也可以參考本教程提供的用 coroutine 實現的 Threads 類.

主要函式說明

Codea 的函式大多數都支援可變引數, 根據輸入實參的個數決定對應哪些形參, 好像在物件導向中叫多型. 下面在每種函式中選擇兩個常用的函式

基本繪圖函式

• background( )

  • 語法
  • background( gray )
  • background( gray, alpha )
  • background( red, green, blue )
  • background( red, green, blue, alpha )
  • background( color )

• rect( )

  • 語法
  • rect( x, y, width, height )

• sprite( name, x, y )

  • 語法
  • sprite( name, x, y )
  • sprite( name, x, y, width )
  • sprite( name, x, y, width, height )
  • sprite( image, x, y )
  • sprite( image, x, y, width )
  • sprite( image, x, y, width, height )

高階繪圖函式

提供 shader 和 mesh

支援 OpenGL ES 2.0/3.0

Lua 語言

Lua中的 表, 時間,字串和數學運算 以及一部分 os 函式

觸控函式

負責處理螢幕觸控事件;

除錯函式

負責處理程式除錯工作;

物理模擬函式

封裝 box2D 提供了相關的物理模擬函式;

動畫函式

一個專門的動畫類, 可以利用它來實現各種動畫效果;

聲音函式

負責處理播放聲音以及生成各種音效;

顯示函式

負責處理顯示模式設定以及視訊錄製等等

向量函式

提供了二維, 三維, 四維向量以及相關的各種操作;

感測器函式

負責處理 GPS 定位感測器和 加速度 感測器;

網路函式

提供了封裝後的 http.request() 函式

儲存函式

提供了各種存取函式, 用於存取遊戲資料到 iPad 上.

其他在 iPad 上執行的開發工具

除了 Codea, 還有很多可以執行在 iPad 上的程式設計工具, 比如 Processing, TechBASIC 等等, 它們各有所長.

蘋果在最近的 WWDC 上宣佈 iOS 10 會提供一款名為 Swift Playground 的免費開發工具, 看來隨著平板電腦效能的提升, 用平板編寫程式碼已經是趨勢所向.

如何使用本教程中的原始碼

你有兩種方式來執行本教程的示例, 一種是下載原始碼, 直接在 iPad 上通過 Codea 來執行, 另一種是下載對應的 XCode 專案檔案包, 然後在 XCode 中把它編譯為一個 ipa 應用, 在把它載入到模擬器上執行.

直接在 iPad 上用 Codea 載入程式碼

如果你有 iPad, 並且購買了 Codea, 那麼你可以開啟 Codea, 新建一個專案, 把例程程式碼拷貝進去, 同時要把例程中用到的影像資源下載拷貝到 Codea 的素材庫目錄下, 一般是 Documents, 然後就可以執行了.

這種方法最簡單, 也最方便, 唯一的不便之處是需要預先手動下載儲存好圖片素材(不過後續我會寫幾個自動下載儲存圖片的函式來提供更方便的使用)

通過 XCode 的 iOS 模擬器來執行

如果你沒有 iPad, 或者雖然有 iPad, 但是暫時還不準備花 15 美元購買一份 Codea, 那麼你還可以通過模擬器來執行.

這就需要你有一臺安裝了 XCode 的 Mac 電腦, 或者你有一個安裝了 XCode 的 OSX 虛擬機器, 你只要把每章對應的 XCode 專案檔案包下載回去, 然後在 XCode 中開啟它, 編譯執行, 就可以在模擬器中看到執行結果了.

而且你也可以在 XCode 中修改程式碼, 重新編譯檢視效果.

XCode專案資料夾結構

專案資料夾結構如下:

Air:Write-A-Adventure-Game-From-Zero admin$ tree
.
MyAdventureGame
├── Assets
│   ├── ...
├── Libs 
│   ├── ...
├── MyAdventureGame
│   ├──...
├── MyAdventureGame.codea
│   ├──...
├── MyAdventureGame.xcodeproj
│   ├──...
└── libversion

其中我們編寫的 Lua 指令碼放在 MyAdventureGame.codea 目錄下, 以 main.lua 命名, 如下:

Air:Write-A-Adventure-Game-From-Zero admin$ tree ./MyAdventureGame/MyAdventureGame.codea
./MyAdventureGame/MyAdventureGame.codea
├── Info.plist
├── Main.lua
├── Sprites.lua
└── Status.lua

0 directories, 4 files
Air:Write-A-Adventure-Game-From-Zero admin$ 

參考資源

官網函式手冊
官方wiki
官網論壇
中文函式手冊

所有章節連結

Github專案地址

Github專案地址, 原始碼放在 src/ 目錄下, 圖片素材放在 assets/ 目錄下, XCode專案檔案放在 MyAdventureGame 目錄下, 整個專案檔案結構如下:

Air:Write-A-Adventure-Game-From-Zero admin$ tree
.
├── MyAdventureGame
│   ├── Assets
│   │   ├── ...
│   ├── Libs 
│   │   ├── ...
│   ├── MyAdventureGame
│   │   ├──...
│   ├── MyAdventureGame.codea
│   │   ├──...
│   ├── MyAdventureGame.xcodeproj
│   │   ├──...
│   └── libversion
├── README.md
├── Vim 列編輯功能詳細講解.md
├── assets
│   ├── ...
│   └── runner.png
├── src
│   ├── c01.lua
│   ├── c02.lua
│   ├── c03.lua
│   ├── c04.lua
│   ├── c05.lua
│   ├── c06-01.lua
│   ├── c06-02.lua
│   ├── c06-03.lua
│   └── c06.lua
├── 從零開始寫一個武俠冒險遊戲-0-開發框架Codea簡介.md
├── 從零開始寫一個武俠冒險遊戲-1-狀態原型.md
├── 從零開始寫一個武俠冒險遊戲-2-幀動畫.md
├── 從零開始寫一個武俠冒險遊戲-3-地圖生成.md
├── 從零開始寫一個武俠冒險遊戲-4-第一次整合.md
├── 從零開始寫一個武俠冒險遊戲-5-使用協程.md
├── 從零開始寫一個武俠冒險遊戲-6-用GPU提升效能(1).md
├── 從零開始寫一個武俠冒險遊戲-6-用GPU提升效能(2).md
└── 從零開始寫一個武俠冒險遊戲-6-用GPU提升效能(3).md

2 directories, 26 files
Air:Write-A-Adventure-Game-From-Zero admin$