跳到主要內容

從WIN32到iPhone移植good

good到iPhone的移植的作業雖不能說100%達成目標,但也有點小成果。這篇文章就來把整個過程大致的描述一下,這樣也能對移植過程有個大概的了解。


建立開發環境

要將一個程式從一個平台移植到另一個平台,第一個步驟就是先建立新平台的工作環境。要建立可以開發iPhone程式的環境的過程就不多說了,我只能建議說可能的話還是弄台Mac電腦省的不必要的麻煩。這算是和其它平台比較起來,一個較大的門檻。

有了可以跑Mac的電腦後,再來就是去下載Xcode,接著就是iPhone SDK


玩玩Sample

要了解一個新的平台,對我而言最容易上手的方式就是去玩玩它的範例,而且只挑作移植時需要看的就夠了。我首先要看的當然是怎麼畫圖,其它都不需要了。只要能畫圖我就可以初步知道我作的東西對不對。

我先找到一個非常簡單的範例,它只在畫面上貼二張靜態的2D圖形。透過這個簡單的範例再加上大概研究一下Objective-C的語法,就可以開始作點簡單的測試,玩玩怎麼畫圖。


決定測試移植的程式

在iPhone上的繪圖程式主要還是透過OpenGL ES作畫,所以我很快的決定拿25940p來作移植測試。

主要的原因是25940p已完成過跨平台移植測試(PSP),所以現在要移植到iPhone上,相對也會容易多。程式本身和平台無關的部份完全可以一次移植上去,不必作任何修改。而25940p的繪圖部份原本是使用OpenGL作簡單的幾何圖形表示,所以換成OpenGL ES也不會太難。

...(略)


準備移植

開始移植前,首先確認一下要移植的程式使用了那些模組,這些模組是否有支援目標平台。good使用了三個第三方程式庫,分別是SDLLuazlib。Lua及zlib基本上和任何平台無關,可以直接跨過去。比較有問題的是SDL。

雖然SDL本身有跨了包含了Mac的許多平台,但仔細確認後發現SDL是不支援iPhone的。搜尋一下後,發現有人作了iPhone的移植,但礙於iPhone的保密協議不能開放。這就麻煩了,要解決這個問題有三個方法。第一是自己移植SDL到iPhone上,第二是另外找一個代替品,第三是自己來。

稍微評估了第一個方法,結論是對我太難了,就算我能作也不是一天二天的事情。所以換第二個方案,開始上網找找有沒有替代品。

結果沒能很快找到合適的,最後還是決定用自己以前實作的一個小繪圖程式庫imgp。這是一個很小的工具,只提供基本的記憶體點陣圖的搬移,不過已經滿足good的最小需求。因為可以立刻派上用場,所以就決定用它不再繼續尋找替代方案。

而good使用到smallworld2裡的功能也是順利直接編譯通過,沒有作任何修改。


開始移植

首先在Xcode裡開個新的OpenGL ES for iPhone的新專案,把Lua和zlib加進去編譯看看,結果如預期正確無誤。

接下來寫點簡單的程式測試imgp同時作點相關的修正。因為imgp是對一塊記憶體作搬圖填色的操作,所以只要在最後的時候拿這塊記憶體來動態產生一個貼圖,再用二個三角型畫滿整個畫面就行了。測試結果也順利通過了。

再來就是使用imgp來實作good::gx模組裡的Graphics和Image介面。這二個介面非常的簡單,主要就是實作Graphics的drawImage和fillSolidColor二個函式。透過imgp三二下簡單作個包裝,這樣good就俱備繪圖能力了。

最後就是正式來。把good加到專案,作了點小修改,沒有花很大的功夫就可以在模擬器畫面上看到動起來的鋤草機!畫面上有東西後,再補上輸入的部份就完成了初步的移植。

留言

這個網誌中的熱門文章

單人撲克牌遊戲 - 蒙地卡羅

更多可在網頁玩的 單人撲克牌遊戲 ; 新增一個簡單的單人撲克牌遊戲: 蒙地卡羅 ,簡單介紹一下玩法。 下載 事先排列好5x5張牌。 每次移動一張可以配對的牌,並消除這對牌。在上下、左右及斜向相隣的二張牌,只要擁有同樣數字(不計花色),即可配對。 消除二張配對的牌後,剩餘的牌以往左往上的方式補滿空隙,接著在發新牌補滿後面的空格。 重覆步驟2~3,直到沒有牌可以配對及發完所有牌為止。 結果有二種。一個是勝利,成功的消除掉所有牌。另一個是Gameover沒有牌可以再作配對。

以lex/yacc實作算式計算機

前面我們透過 手工的方式 實作了一個簡易的算式計算機,現在我們要開始使用工具來作同樣的事,比較看看手工和使用工具有什麼不同的差別。首先要介紹的就是lex&yacc。 lex & yacc lex(Lexical Analyzar)及yacc(Yet Another Compiler Compiler)是用來輔助程式設計師製作語法剖析器的程式工具。lex的工作就是幫助我們將輸入的資料文字串流分解成一個個有意義的token,而yacc的工作就是幫我們分析這些token和我們定義的規則作匹配。下圖中所表示的是使用lex及yacc的一般工作流程。 首先看到yacc會讀入一個.y檔案,這裡.y檔案的內容就是我們使用類似(E)BNF語法定義的語法規則,yacc會分析這些語法規則後,幫我們產生可以用來解析這些規則的程式碼,而這個檔案一般名稱預設為y.tab.c,產生的程式碼裡面最重要的一個的函式叫作yyparse。 同yacc類似,lex也會讀入一個.l的檔案,這個檔案裡面定義的是如何從文字流裡解出token的規則,使用的方法是常規表示式(regular expression)。在圖的左側中間我們還可以看到有一個叫作y.tab.h的檔案從yacc產生出來並餵給lex作輸入,這個檔案是yacc根據在讀入的.y檔裡面所定義的token代號所產生出來的一個header,這樣yacc及lex產生出來的程式碼裡面就可以使用共通定義的代碼而不必各寫個的。lex分析過.l檔案後也會產生一個一般預設叫作lex.yy.c的原始碼檔案,裡頭最重要的一個函式叫作yylex。 最後,我們把yacc產生出來的y.tab.c還有lex產生出來的lex.yy.c,以及其它我們自己撰寫的原始碼檔案一起拿來編譯再作連結,最後產生出來的就是一個可以用來解析我們定義的語法的解析器工具。以上是整個lex及yacc的使用流程概觀。 常規表示式 在正式使用lex之前,我們首先來對常規表示法作一個基本的認識。常規表示法是一種用來表示字串樣式(pattern)的中繼語言,就好比前文所介紹的(E)BNF表示式一樣,都是用來描述其它語言的語言,只不過用途不太一樣罷了。 常規表示式使用一些中繼符號(meta-symbol)以及ASCII字元定義字串樣式,以下列出一些常規表示式所使用的符號。 . 表示除了換行字元...

窮人的 AI:自動漫畫分鏡切割

  ( 試試看 ) 在手機上看漫畫時,有一個體驗上的問題: 漫畫原本是「整頁設計」 手機最適合的是「一格一格往下滑」 與其強迫使用者縮放、拖曳、放大,更直覺的做法是: 直接把一頁漫畫自動切成多個分鏡,轉成瀑布流閱讀。 這篇文章分享一個不靠深度學習、完全在前端完成的實作方式: 使用 OpenCV.js 做分鏡偵測 輸出 rect list 再用 全畫面 Canvas 把每個分鏡當成一個「閱讀單位」 整個系統可以拆成三層: 漫畫圖片 ↓ 影像處理(找出 rects) ↓ 排序後的 rect list ↓ 全畫面 Canvas 逐格呈現(瀑布流) Step 1:灰階化 漫畫的資訊 90% 都在線條上,顏色反而是干擾。 cv.cvtColor(src, grayImage, cv.COLOR_RGBA2GRAY); 灰階化的好處: 降低維度 對邊緣偵測更穩定 對黑白漫畫特別有效 Step 2:邊緣偵測,抓出「分鏡的邊」 接下來用最經典、也最夠用的 Canny Edge Detection: cv.Canny(grayImage, edges, 50, 150); 在漫畫中,分鏡外框通常就是最明顯的邊界。 Step 3:形態學操作,把破碎邊框「補起來」 真實漫畫的線條並不完美,常常有斷線、陰影、留白。 所以要做一個很重要的步驟:膨脹(Dilation) const kernel = cv.Mat.ones( 5 , 5 , cv.CV_8U); cv.dilate(edges, dilatedEdges, kernel); 直覺理解就是: 把細線「抹粗一點」, 讓本來斷掉的邊界連成封閉區域。 這一步直接決定後面能不能成功抓到「一整格分鏡」。 Step 4:找輪廓,轉成矩形框(rect) 有了封閉區域之後,就可以找輪廓: cv.findContours( dilatedEdges, contours, hierarchy, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE ); 每一個 contour,代表一個「可能的分鏡區塊」。 接著轉成矩形: const rect = cv.boundingRect(contour); rects.push([rect.x, rect.y, rect.widt...