HTML5 : LimeJS 雜記

LimeJS 是一個利用 Google Closure Library 所開發的 HTML5 game framework，使用它來寫 HTML5 的遊戲，不但可以省去不少時間，日後轉換至其它開發工具也較容易。把一些東西胡亂的記下，陸續增加，有空再整理。


關於安裝

LimeJS 會用到 Git 、Python 及 Java 三個工具，因此，它們先安裝好，再加上一個文字編輯器(個人編好 Notepad++)，這樣，基本的開完環境就準備好了。

• Git
  安裝記得選「Run Git from the Windows Command Prompt」的選項，其它的都用預設值即可。安裝完得將 Git 的 bin 目錄路徑加入系統的 PATH 變數中。
• Python
  安裝完要修改 Windows 環境變數中的 「PATH」，把 Python 的路徑加進去，方便後面的使用。
• JAVA : Java Runtime Environment version 1.7 以上

安裝 LimeJS

• 到官網 http://www.limejs.com 下載「ZIP package」。
• 解壓縮 .zip 檔案。
• 切換到 LimeJS 的目錄中
• 執行「python bin\lime.py init」做初始化。
• 執行「python bin\lime.py update」進行更新。

關於使用

新增專案

• 切換到 LimeJS 的目錄中
• python bin\lime.py create 專案名稱

新增別人或是別的磁碟空間的現存專案

• 將專案整個資料夾先複製至 LimeJS 的目錄中。
• 修改專案清單檔案「bin」目錄中的「projects」檔案，在裡增加專案的目錄名稱。
• 執行更新的指令：「bin/lime.py update」

新增了自己的 Class 後，記得要更新一下！

• 切換到 LimeJS 的目錄中
• 執行「 python bin\lime.py update」

會出現類似下面的訊息：

Updating Closure deps file
E:\limejs\closure\closure/bin/build/depswriter.py --root_with_prefix="E:\limejs\closure/ ../../" --root_with_prefix="E:\limejs\phonetic_quiz/ ../../../phonetic_quiz/" --root_with_prefix="E:\limejs\lime/ ../../../lime/" --root_with_prefix="E:\limejs\box2d/ ../../../box2d/" --output_file="E:\limejs\closure\closure/goog/deps.js"

主要的動作是更新資料到 deps.js 裡。

編譯

• 切換到 LimeJS 的目錄中
• 執行「python bin\lime.py build  xxxx -o xxxx/compiled/xxxx.js」

如果想讓程式碼更精簡，編譯時再加上 -a 的參數。


一些可挖寶的資料夾

• 範例：
  LimeJS 目錄中的「lime」→「demos」
• 程式庫：
  LimeJS 目錄中的「lime」→「src」
  LimeJS 目錄中的「closure」→「closure」→「goog」
• 樣本檔：
  執行 bin/lime.py create 後產生檔案是套用「樣版檔」的，它們是放在
  LimeJS 目錄中的「lime」→「templates」→「default」

關於 .js 檔案的編碼

遇過幾次出現找不到 xxx.js 的錯誤訊息，除錯除半天，最後才發現是因為要讓中文不會變成亂碼，必須把檔案儲存成 UTF-8 的編碼。不過，我在 Notepad++ 的「編碼」選了「轉換至 UTF-8 碼格式」而不是「轉換至 UTF-8 碼格式 (檔首無 BOM) 」，前者其實也是 Windows Notepad 會儲存的格式，它會在檔案的最前面加上所謂的 BOM ，這樣，因為多了字，可能會造成程式的解析有問題而中斷。

所以，要記得選「轉換至 UTF-8 碼格式 (檔首無 BOM) 」。


關於程式

• 關掉左上角的 FPS 訊息
  「director.setDisplayFPS(false);」