跳到主要內容

發表文章

目前顯示的是有「Emscripten」標籤的文章

Escape from Planet Delta by Russell Wallace 文字冒險遊戲

Escape from Planet Delta是以OASYS系統製作的文字冒險遊戲,OASIS是一個用於製作文字冒險遊戲的物件導向的系統。最早Escape是在1980年代中期在Commodore64上以The Quill製作的,在1991年時移植至OASYS系統。Escape發佈於public domain,可以任意複制和散佈source和可執行檔。 OASYS是Object-Oriented Adventure System的縮寫,它的作者是Russell Wallace,在1992年於comp.binaries.ibm.pc發佈的,並且可以在各大FTP站取得。下載的zip包包含一個說明文件檔、二個範例(其中一個是escape)、反組譯器、編譯器及解譯器的C的source、以及MS-DOS的反組譯器、編譯器及解譯器的可執行檔。原始的zip包裡的source缺少include檔不過不難移植到非MS-DOS的平台。 [ Play ] / [ Github ] 1. 編譯程式碼及執行 OASYS製作的遊戲是先以OASYS程式語言撰寫好程式碼後,再以oac編譯器編譯為物件碼,再透過oai解譯器執行。 1.1 OAC 首先你需要使用一個文字編輯器編輯你的遊戲原始碼,一般附屬檔名為s,例如test.s。接著使用oac編譯器把你的遊戲原始碼編譯為物件碼。 請執行以下命令編譯原始碼 oac test.s 或者省略附屬檔名 oac test 編譯成功的話會輸出同檔名的物件檔,不包含附屬檔名。如編譯test.s成功後,產生名為test的物件檔。 編譯過程如果有任何錯誤,則會輸出錯誤訊息。請再根據錯誤訊息,修正程式錯誤,並再重複以上的編譯命令及修正錯誤的流程,直到成功編譯出物件檔。 1.2 OAI 編譯成功的物件檔,可透過oai解譯器執行。 請執行以下命令執行物件檔 oai test 載入並成功啟動遊戲的話,可以看的遊戲輸出的訊息,以及接受文字命令的輸入提示符號。透過文字命令進行遊戲,quit離開。 2. OASYS程式語言 Language 底下介紹基本的OASYS程式語言語法規則,更詳細的說明請參數OASYS說明文件。 2.1 大小寫 Case 雖然底下的範例都是以大寫字母作示範,但OASYS程式語言不區分大小寫英文字母。 2.2 空白字元 Spaces 空白字元包含space、...

Good Game Editor HTML5 porting (resource browser)

斷斷續續製作了一個HTML5版本的Good Game Editor,一方面是作為測試及學習web相關技術,一方面也是利用這個過程持續對good作點改良。雖然目的是想作一個HTML5版的編輯器,但實際上目前只作到resource browser,可以在web browser開啟good package作資源檢視。目前大部份的功能還是原來的C++ code直接以emscripten編譯成javascript,再加上少部份javascript,最後利用w3.css作排版。 < 試試 > 點擊連結會列出網站上good/uploads目錄下的所有good package,可以再點擊package的play來試玩或者是edit開啟編輯器(res browser)。 目前編輯器大致可以檢視所有類型的資源,包含聲音(audio)、貼圖(texture)、精靈(sprite)、地圖(tilemap)、關卡(level)、腳本(script)及粒子腳本(particle)。 如下圖,為點擊herobye.zip這個package的Edit時顯示的第一個畫面。 編輯器畫面主要分為3個部份。左側依據不同類型資源,列出所有資源列表。右側是屬性顯示區,顯示選取的物件屬性資料。中間區域為編輯區,依據選取的不同類型物件作不同顯示。 下圖是選取了聲音(audio)類型的資源,編輯區顯示標準的播放聲音介面。 下圖是選取了貼圖(texture)類型的資源。 如下圖是選取了精靈(sprite)類型的資源,編輯區顯示此精靈每個frame的資訊及在上方播放精靈動畫。而右側屬性區也會顯示此精靈使用的貼圖物件。 下圖是選取的地圖(tilemap)類型的資源,編輯區顯示己編輯的tilemap,右側屬性區也會顯示目前地圖使用的貼圖。 下圖為選取關卡(level)類型的資源,編輯區顯示關卡內容,右側屬性區上方顯示關卡內物件的階層圖。點擊階層圖上的子物件時,右側屬性區下方會再顯示選取子物件的屬性資訊。 下圖為選取腳本(script)類型的資源。 下圖為選取粒子腳本(particle)類型資源。編輯區有二個分頁,左分頁Source同腳本一樣顯示script內容。右分頁Test為粒子執行preview畫面,同時右側屬性區上方也會列出所有可測試的particle script名稱,點擊時立即執行作preview。 ...

867的HTML5移植

[ PLAY ] 這個遊戲是較早期的作品,所以使用的技術是以當時自己較熟悉的 Win32 相關技術製作。遊戲核心部份一開始就己分離出來,但還不是100%跨平台。畫面部份是以Win32 GDI呈現,以及透過Windows視窗機制處理輸入。本次目標是將遊戲移植到 HTML5 ,主要的工作有三個部份。 將遊戲核心Gameplay確實作到跨平台。 將畫圖及輸入部份抽離作到跨平台。 將遊戲移植為HTML5可以在Browser上執行。 第一部份己幾乎完成了,只需再作點小修改就能達成。主要的移植工作在於第二和第三部份,以下是這部份工作的重點記錄。 抽離繪圖層 因為867和Win32 GDI緊密結合,一時無法輕易的將繪圖層抽離出來。萬事起頭難,可以先從最簡單的改良開始,一次一小步逐步重整。首先增加一個Renderer類別,只包含一個很大略的一個render函數。而render函數的實作,是根據當前遊戲狀態透過renderTitle和renderGame二個函數實作遊戲的全部繪圖。 class Renderer { public: void render(const Game &game, CDCHandle& dc) { switch (game.iStage) { case Game::STAGE_TITLE: renderTitle(dc); break; case Game::STAGE_GAME: renderGame(dc, Game::MENU_NONE); break; case Game::STAGE_MENU: renderGame(dc, Game::MENU_GAME); break; case Game::STAGE_DIE: renderGame(dc, Game::MENU_NONE); break; case Game::STAGE_OVER: renderGame(dc, Game::MENU_OVER); break; case Game::STAGE_WIN: renderGame(dc, Game::MENU_NONE); ...

C/C++遊戲程式透過Emscripten編譯為javascript移植成web版

最近一兩周利用空檔時間將過去作過的幾個小遊戲,改版成簡單的對應的web版。原來的程式底層都是使用C/C++實作,透過 Emscripten 將原來的程式build成javascript,然後再結合web應用完成簡單的移植。因為原來的程式一開始在實作時就幾乎是可以跨平台的,所以移植很順利很快。我目前使用的Emscripten是1.35.0版本,因為只是用作移植測試目的,自從安裝後就沒有再更新過。 完成移植的遊戲分別是: 成語四則運算 單人撲克101 Paint by Numbers 2005 精彩數獨詳解 移植的基本原則很簡單: 首先確定原來的C/C++程式可以在Emscripten的command line環境下編譯。 再來定義一些API可以讓html綱頁裡的javascript呼,這個部份更多細節可以參考 官方網站的文件 說明。 C/C++讓javascript呼叫的API定義好後,也編譯成功了。就可以先用printf的方式作簡單的測試,測試方式也很簡單。如下圖的例子,是一個簡單的將兩個數字相加並回傳和數的cAPI cAdd。在mainl裡用一個printf作簡單的測試,然後在cmdline環境下編譯成功後,透過nodejs來執行觀察結果是否正確。 API初步沒有問題了,然後就可以真正撰寫些code來呼叫這些API,主要方式是在javascript裡透過Module.ccall來呼叫我們的API。Module.ccall的第一個參數是API的名稱,第二個參數是API的回傳值類型,第三個參數是API的參數列表類型,第四個參數是參數列表。在我們的例子裡,API名稱叫作cAdd,回傳值是一個數字類型,參數列表是兩個數字類型,輸入1和2。結果用一個alert顯示出來,正確答案是3。 透過以上幾個簡單的原則,很容易就可以把一些原本用C/C++寫成的程式,改版成網頁版。