跳到主要內容

Android遊戲5連發的一些記錄

這二個月裡面很密集的連發了5款android小遊戲,雖然這些遊戲主要都是移植或改版的作品,但在作移植或改版的過程還是學到了一些東西,並且最重要的是又對good作了點改良,雖然都是小改進但也是小進步,只要持續的作,這些小改進累積起來也是很可觀的 !這篇文章主要目的是在作這幾個遊戲的過程中,把那些值得記錄的事寫出來。

1,跳跳伯尼熊 UpUp!

某一天終於心血來潮,很想要把什麼遊戲放上google play。這個遊戲是很早之前就完成的,因為也都是用GL成像的,程式也不大所以就挑了它開工。


移植UpUp第一個版本到android手機上很快,大概只花了不到二個小時,因為在那之前我就已經移植過good,直接套用相關的經驗很快就可以在手機上執行UpUp。完成第一步的任務後,接下來就要改版了。原來的設計是單機的,有個單人排行榜,現在要改版成有個多人排行榜。為了作到這件事,有好幾件事需要完成。
  • 首先需要有個排行榜的server,這個功能我用php+mysql作了一個很陽春的server,透過http 和json作溝通。
  • 玩家在排行榜上的名字要怎麼來?原來的版本是在gameover,成績有上排行榜時,讓user輸入,不過因為我只用了英數符圖的字圖,所以最後改成抓google account,然後再一開始用toast顯示。
    AccountManager accountManager = AccountManager.get(this);
    Account[] accounts = accountManager.getAccountsByType("com.google");
    String name = accounts[0].name;
    myName = name.substring(0, name.indexOf("@"));
    Toast.makeText(getBaseContext(), "hello " + myName, Toast.LENGTH_SHORT).show();
  • 再來就是聲音的處理。將相關的資源檔放在res/raw目錄下,再透過MediaPlayer.create(this, idRes);作到播放聲音的功能。
2,報數快手123  (src)

完成UpUp之後,應該也要弄個用good製作的遊戲才行。good在一年多前花了點時間移植後就沒再花時間在上面,現在主要是差在沒有聲音。有了UpUp的經驗之後,就開始研究怎麼移植聲音功能。


聲音在good和UpUp不同的地方是,UpUp的聲音可以把所有聲音檔(ogg)放進rew/raw目錄,然後再用MediaPlayer依id播放。不過good會把所有資源打包成一個good檔,所以需要改以stream的方式來播聲音。經過研究後,android上面似乎沒什麼簡單的方法直接從APK裡面的資源作stream播放,需要使用間接的方式建立一個暫時的檔案,然後播放這個檔案。
      File tempFile = File.createTempFile("goodtmp", ".tmp");
      tempFile.deleteOnExit();
      FileOutputStream out = new FileOutputStream(tempFile);
      out.write(stream);
      out.close();
作到這步,後面就可以拿這個檔案餵給MediaPlay播了,當然中間還需要自己作點資源的管理才行。

因為報數是需要透過google的文字轉語音(TTS)功能發出聲音,所以為了達到這個功能,新增了API Good.FireUserIntEvent用來作為和APP的構通介面。

另外加入了Logo注入功能,讓每個good包在播放前都會先播放一段logo。


製作25940m的過程,主要值得記錄的是將原來的API Good.GetScreenResolution改成Good.GetWindowSize。這個改變是為了提高API名稱的自我說明。


4,鋤草機  (src)

製作鋤草機的時候,每一個關卡的背景原本的版本是純色,現在改成都使用相同的貼圖,所以設定背景貼圖的功能是使用script達到的。使用在關卡的OnCreate事件裡面用script建立背景貼圖物件的時候才發現,沒有API可以用來設定重覆模式,所以才又加上二個新的API: Good.GetRep, Good.SetRep


在製作鋤草機的過程中,同時又對good底層作了一次最佳化,將其中一個std::string的使用改為char[]。

5,小香方塊  (src)

小香方塊是比較單純的改版製作,在製作中發現了縮放物件時的問題,這個問題也是接下來需要引進anchor point的支援來作解決,不過目前先以其它方法簡單的避過。

另外對good作了一些小改良,其中增加了一個新的定義Input.ANY到輸入模組內,用在檢查任何按鍵的輸入。



留言

這個網誌中的熱門文章

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

更多可在網頁玩的 單人撲克牌遊戲 ; 新增一個簡單的單人撲克牌遊戲: 蒙地卡羅 ,簡單介紹一下玩法。 下載 事先排列好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...