2020年12月29日 星期二

繪文字刮刮樂 Emoji Scratch

使用html5+javascript+emoji,做了一個給小孩玩的刮刮樂小遊戲,讓他們學習簡單的英文單字。如果在chrome上使用,還可以利用tts英文發音唸出單字,讓小孩也能練習英文聽力及發音。

  / Android / Github

底下是開發這個遊戲的一些技術重點紀錄。

1,刮刮樂的部分是使用html5的canvas製作。原理是使用兩個canvas,一個作底圖圖層(c0),一個做為可被刮除的前景遮罩圖層(c1),c1預設不可見為一記憶體圖層。把c0的原始圖型內容事先存起來作為後續更新使用,並在c0上安裝onmousedown,onmouseup及onmousemove,滑鼠滑動時以在c1上畫粗直線的方式模擬出刮除效果,然後再以新的c1前景遮罩結合事先儲存的c0底圖重新合併更新畫面,這樣就能作出刮刮樂的效果。

c1上的刮除效果是利用將2d context的globalCompositeOperation設為'destination-out'模式,並且strokeStyle設為'rgba(0,0,0,1)',以這樣子的設定在c1上畫線時,得到的是一個擦除的效果,這樣就作到刮刮樂刮除的效果。

c0.onmousemove = function(e) {
  if (mouse_down) {
    ctx1.strokeStyle = 'rgba(0,0,0,1)';
    ctx1.globalCompositeOperation = 'destination-out';
    ctx1.lineWidth = 18;
    ctx1.lineCap = 'round';
    ctx1.beginPath();
    ctx1.moveTo(last_x, last_y);
    ctx1.lineTo(x, y);
    ctx1.stroke();
    last_x = x;
    last_y = y;
    updateCanvas();
  }
}

更新畫面的方法是以getImageData從c1抓取整張前景遮罩,對每一個pixel檢查如果alpha值是0表示這個點己刮除,則這個點取c0的同一位置的顏色值,否則表示這個點還未刮除需要取c1的前景遮罩顏色。所有pixel都處理完成後,再把整個新的合併事先儲存的c0的背景底圖內容的imagedata透過putImageData畫到c0上更新。

function updateCanvas() {
  var imgData = ctx1.getImageData(0, 0, width, height);
  var imgDataNew = ctx1.getImageData(0, 0, width, height);
  for (var i = 0; i < width*height*4; i+=4) {
    var a = imgData.data[i+3];
    if (0 == a) {
      imgDataNew.data[i] = imgDataSrc.data[i];
      imgDataNew.data[i+1] = imgDataSrc.data[i+1];
      imgDataNew.data[i+2] = imgDataSrc.data[i+2];
      imgDataNew.data[i+3] = imgDataSrc.data[i+3];
    }
  }
  ctx.putImageData(imgDataNew, 0, 0);
}

2,如果是使用chrome browser來執行這個遊戲,則能夠利用chrome的文字轉語音(TTS)功能唸出英文單字。這裡是透過window.speechSynthesis及SpeechSynthesisUtterance來完成這個功能,如下程式片段所示。

function trySpeak(s) {
if (window.speechSynthesis) {
  var msg = new SpeechSynthesisUtterance(s);
  if (msg) {
    msg.lang = "en-US";
    window.speechSynthesis.speak(msg);
  }
}




2020年7月12日 星期日

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

最近一兩周利用空檔時間將過去作過的幾個小遊戲,改版成簡單的對應的web版。原來的程式底層都是使用C/C++實作,透過Emscripten將原來的程式build成javascript,然後再結合web應用完成簡單的移植。因為原來的程式一開始在實作時就幾乎是可以跨平台的,所以移植很順利很快。我目前使用的Emscripten是1.35.0版本,因為只是用作移植測試目的,自從安裝後就沒有再更新過。

完成移植的遊戲分別是:
移植的基本原則很簡單:
  1. 首先確定原來的C/C++程式可以在Emscripten的command line環境下編譯。
  2. 再來定義一些API可以讓html綱頁裡的javascript呼,這個部份更多細節可以參考官方網站的文件說明。
  3. C/C++讓javascript呼叫的API定義好後,也編譯成功了。就可以先用printf的方式作簡單的測試,測試方式也很簡單。如下圖的例子,是一個簡單的將兩個數字相加並回傳和數的cAPI cAdd。在mainl裡用一個printf作簡單的測試,然後在cmdline環境下編譯成功後,透過nodejs來執行觀察結果是否正確。
  4. API初步沒有問題了,然後就可以真正撰寫些code來呼叫這些API,主要方式是在javascript裡透過Module.ccall來呼叫我們的API。Module.ccall的第一個參數是API的名稱,第二個參數是API的回傳值類型,第三個參數是API的參數列表類型,第四個參數是參數列表。在我們的例子裡,API名稱叫作cAdd,回傳值是一個數字類型,參數列表是兩個數字類型,輸入1和2。結果用一個alert顯示出來,正確答案是3。
透過以上幾個簡單的原則,很容易就可以把一些原本用C/C++寫成的程式,改版成網頁版。

2018年5月9日 星期三

Good Game Editor 1.6.4

  • 改良關卡編輯器(LevelEditor)中Dummy物件圖示。
  • 地圖物件(Map)或精靈物件(Sprite)只有在實際出現在畫面中時才載入貼圖。
  • 關卡編輯器(LevelEditor)點擊物件階層樹上的物件時畫面立即捲動至該物件。
  • 關卡編輯器(LevelEditor)中物件顯示不可見狀態圖示若父物件為不可見狀態。
  • Util新增Good.GetScreenPos計算物件銀幕絕對座標。
  • 修正取得色塊物件大小尺寸的錯誤。
  • 一個DrawCall最多支援一次畫1024個物件。
  • 新增Graphics.GenCanvasGraphics.KillCanvas支援建立及刪除虛擬畫布。
  • 新增Resource.UpdateTex支援以虛擬畫面更新貼圖資料。
  • Graphics.FillRectGraphics.DrawImageGraphics.DrawText支援繪至虛擬畫布。

[ 下載 ]

2017年10月11日 星期三

2017年6月26日 星期一

Good Emscripten Porting

最近試了一下Emscripten將good編譯成web版本,也就是透過Emscripten使用LLVM技術將C/C++編譯成javascript,這樣就可以在browser上執行了。


一開始先不管圖形顯式的話,移植都還算很順利,可以在下方看到接上trace log之後表示功能移植完成。接下來使用OpenGL版本的繪圖模組來作成像移植,不過這部份不是很順利,只有色塊可以正常顯示,圖形就都無法正常顯示出來。可能是我的OpenGL版本的繪圖模組太老舊了,Emscripten沒辨法100%相容支援,最後沒辨法只好將OpenGL版本的繪圖模組換成SDL版本的繪圖模組,因為SDL是Emscripten預設內建支援的成像引擎,結果圖形就能正常顯示了,只不過缺點是SDL版本的繪圖模組功能很陽春,很多像是縮放旋轉等功能沒實作,因為是使用SDL1。

不過還有個問題,預設參數編譯出來的js檔有10M,太大了。但如果加上-O2之類的最佳化編譯選項後,結果會造成無法執行(或者是載入太久?)。如果改成使用wasm編譯參數就可以配會-O1以上最佳化參數,編譯出來的檔案再加上使用Closure Compiler去除空白字元等,大小就會小於5M。



底下是測試連結。

Test

這個測試連結同時也以php簡單的實作了上傳及表列good檔案,以及執行選取的good檔案。


2017年6月18日 星期日

Good Game Editor 1.6.2

* 修正播放器(In Editor Player)顯示貼圖資訊的問題。
* 修正關卡編輯器物件樹點擊關卡物件程式當掉的問題。
* 新增Good.GenObjEx支援從外部資源包(External Good Package)生成物件。


2017年4月30日 星期日

戰鬥象棋

這是個休閒放置類型的即時象棋戰鬥小遊戲。(Android下載) (src)



* 共有六種不同兵種可以訓練
* 戰鬥型態有近戰型及遠距型
* 兵種有攻擊型及輔助型
* 每一兵種有二種技能
* 無限關卡可以挑戰
------------------------------------------------

底下是演化圖...

    

    

    

    

    

  


===========================

底下是戰略模式玩法的新版本,目前功能己完成測試調整中,更完善後就會發佈。

- 新增戰略地圖,共24個城市
- 共10個玩家,其中9個AI
- 目標為佔領所有城市


 








2017年4月21日 星期五

Good Game Editor 1.6.1

* 新增可以Undo關卡的寛高。
* 修正關卡編輯器(LevelEditor)顯示格點的效能問題。
* 新增可以指定關卡的位置屬性。
* 新增在狀態列上顯示關卡編輯器(LevelEditor)目前寛高及左上角位置資訊。
* 修正關卡編輯器(LevelEditor)中點擊貼圖物件右下角範圍選取小工具無效的問題。
* 修正當物件數量太大時造成當機的問題。
* 修正動作編輯器(Sprite Editor)Undo時當機的問題。
* 修正Good.IsAnimPlaying不能正確工作的問題。
* 修正Good.GenObj生成關卡資源內的子物件時沒有設定指定script的問題。
* 播放器FPS資訊新增顯示目前物件數量及最大物件數量資訊。
* 播放器只在畫面內容有變更時才重繪畫面。

<Download>

Related Posts Plugin for WordPress, Blogger...