2012年11月2日 星期五

HTML5 : LimeJS 雜記

2012年11月2日 星期五
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);」




沒有留言:

張貼留言

 
雄::gsyan © 2009. Design by Pocket