使用 Rust 開發 WebAssembly 程式 - 2 Game of Life

game of life 來展示 Rust 跟 WebAssembly 的開發真的是個很好的例子, 可以充分展現 javascript 和 wasm 間如何傳遞資料,這篇我認為會是學習開發 Rust/WebAssembly 的精華所在。

...

使用 Rust 開發 WebAssembly 程式 - 1 Hello World

故事是這樣子的,很早之前寫了 Rust/Amethyst 系列文 , 最後把這個系列文拿去投稿了 2020 年的 MOPCON , 在投稿的時候,為了跟以網路為主題的 MOPCON 有所連結,我刻意的在最後一部分加上 rust/webassembly 的介紹, 但其實也沒有介紹得很深入,比較像為了騙被接受所以加進去的內容。
為了贖罪,就來寫幾篇文深入介紹一下 rust 開發 WebAssembly 程式。

先附一張最後的成果圖,沒錯,把之前開發的 Rust Gameboy emulator 移植到 WebAssembly 讓它在瀏覽器裡面執行。 wasm gameboy tetris

...

Rust Gameboy Emulator Sprite/Joypad

故事是這樣子的,距離我上一篇 2020/12/20 發的 rust gameboy emulator 技術文之後, 已經過了兩個月了,中間除了整理積存已久的天能 舊文(還有過年),感覺 blog 已經荒廢了QQ。

其實不是的,中間也花了很多時間在 debug 我的 rust gameboy emulator,只是堪稱進度緩慢,主要的原因在於雖然 emulator 可以運作, 卻缺乏 debug 的機制,即使到目前為止,debug 方式仍不脫用肉眼去掃執行的 log,這樣 debug 的效率極度糟糕而且我還不知道要怎麼改進。
理想上是要弄一個 debug 的介面,可以像 gdb 一樣停在某個記憶體位置,然後印出當下的暫存器內容等等,不過即便我做出來, 當做我參考答案的其他實作也不會有同樣的東西可用,所以後來我放棄實作這個部分。

即便如此,在這兩個月還是完成了不少事情,也在 github 上得到一位 justapig9020 大大 (呃…只是一隻豬9020 大大)的幫助,幫我實作了不少東西,像是加上 clap-rs,放大畫面的選項等等。

...

Rust Gameboy Emulator

故事是這樣子的,之前看了網路上有個人寫了一份手把手教你寫一個 risc-v 模擬器 Writing a RISC-V Emulator in Rust , 雖然後來發現他文件也就一些些,後兩章沒寫不說,中間的手把手也是先伸出手,快握到的時候把手抽回去(欸,總之沒有寫得很詳細,一定要自己去看 code。

於是小弟就想說來仿造一下,但寫 rvemu 超級費工,決定選一個簡單一點的平台來實作,就選了一款經典處理器 z80 / LR35902,會選這個平台是因為:

  1. 簡單好玩,能實作 LR35902,就能玩一些古早的 gameboy 遊戲,效果十足。
  2. 最近看到傳說中的 jserv 大大寫了這個 CPU 的模擬器,你各位十年 J 粉還不快用 rust 寫一個尬廣跟上,證明 rust 是世界上最好的程式語言

總之就是寫了,從 11 月中開始到現在大概一個月,費了千辛萬苦,先寫個簡單的整理文,進度到可以顯示出 Tetris 的遊戲選單,如下所示:
gb_tetris

...

使用 Amethyst Engine 實作小行星遊戲 - 12 更多的狀態

這章我們要一口氣新增兩個新的狀態:StateMenu 跟 StateOver,基本上因為不同的 state 都分到不同的檔案,所以多幾個 state 也沒差。
這章其實沒有太多需要介紹的,只有在 state 轉換上面多費點功夫,這部分可以先畫一個狀態圖讓整體更清楚:
stateflow

...

使用 Amethyst Engine 實作小行星遊戲 - 11 事件

上一篇我們做了兩個 state:遊戲進行和暫停的 state,理論上整個遊戲還需要更多的 state:像是遊戲結束、遊戲選單等等,但在這之前我們要先介紹 amethyst 的 event channel。
先前我們在 state 間切換是透過按下鍵盤的事件,但遊戲進行間可能有些場景的轉換是由遊戲內的事件發動的, 例如我們的太空船被隕石砸到,要從遊戲狀態切到遊戲結束,這時候就要透過 event channel 來發送事件了; 同時,用了 EventChannel 可以讓我們改寫一些之前的程式碼,把不同功用的程式分到不用的 system 裡,不用全塞在一起。

...

使用 Amethyst Engine 實作小行星遊戲 - 10 暫停狀態

因為搬家(詳見上一篇 )的關係好久沒有更新了;現在搬完家終於可以回來繼續寫 amethyst 的文章啦, 現在寫文章插 code 根本是一種享受,跟 blogger 那種鳥編輯器完全不一樣。
到目前為止,我們討論的範圍都不脫 ECS 的範疇,這兩章我們會實作更多有關 state 的部分, 我覺得寫到這邊我比較有感受到 amethyst 整體的架構是怎麼實作的,但也只是個人的感覺就是。

我們這章先來實作一個小小的功能,就是按下 esc 鍵的時候,能讓遊戲暫停下來, 對應 amethyst 的文件是第十章的 controlling system execution

...

使用 Amethyst Engine 實作小行星遊戲 - 9 UI

現在讓我們來建 UI,我覺得建 UI 是目前掌握度比較低的部分,我也在想怎麼做才是對的。
本篇目標是加上一個計分用的文字:

...

使用 Amethyst Engine 實作小行星遊戲 - 8 使用 ncollide2d 實作碰撞

碰撞偵測應該也是許多遊戲內必要的元素之一,比如說我們的打小行星遊戲,就需要偵測雷射砲跟小行星的碰撞,以及小行星和太空船的碰撞。
簡單一點的土砲法,是用 for loop 把小行星跟電射砲的座標收集起來,太近的兩者把 entity 刪掉就行了; 但我們畢竟身為專業的遊戲設計(才怪),用土砲法就太遜了,這裡我們用同樣是 rust 寫的 ncollide2d 套件 來實作碰撞偵測。

...

使用 Amethyst Engine 實作小行星遊戲 - 7 亂數

亂數在遊戲中也是個舉足輕重的腳角,少了亂數的遊戲就像沒加珍珠的奶茶(?,讓玩家食之無味;這章我們會加上亂數,以及產生小行星的 system。

...