[實戰]用flutter編寫炸彈人小遊戲同時支持web和移動端

用flutter編寫炸彈人小遊戲同時支持web和移動端

flutter_BananaMon是我學習dart/flutter的時候開發的一個練手項目，他不依賴第三方遊戲框架，是一個從零開始的項目，如今已經開源在github。

簡介

google主導的Dart對標微軟主導的TypeScript，可是在web端一直屈居下風，Google可否藉助flutter這款框架鹹魚翻身？整體來說flutter是一個設計用於app開發的跨平臺ui框架，它用dart在android和iOS端實現了對底層圖形庫進行了封裝，並不像react native依賴於平臺的ui框架去實現一個組件，因此flutter更底層、更高效、也帶來了更多可能，跨平臺的遊戲就是其中之一。

框架

爲了探索dart/flutter的能力，在設計這個項目的時候就考慮到了要同時支持web和flutter。這樣項目通過很小的修改就能夠在三端運行，實踐證實這是可行的。它最初是一個基於dart的web項目，能夠直接在瀏覽器中運行，同時還包含一個簡單的關卡編輯器，使用者能夠用圖形界面中編輯本身的關卡，導出導入關卡等。

1. 主循環
2. canvas封裝
3. 資源管理
4. 觸摸控制
5. 音頻
6. 其餘

主循環

和app同樣每一個遊戲都有一個主循環，在flutter上實現主循環的關鍵代碼

SchedulerBinding.instance.scheduleFrameCallback(_tick);
複製代碼

而在web上是經過操做dom實現的，爲保證跨平臺性，須要作一層抽象，把實現隱藏起來

canvas封裝

遊戲須要作大量的canvas操做，在android平臺flutter對skia圖像庫進行了封裝，在web平臺咱們只要操做H5 canvas 就能夠了，一樣爲了保持跨平臺性，對canvas進行了封裝，詳細代碼都在CanvasWrapper類中，爲了偷懶，只封裝了用到的api。

資源管理

2d遊戲使用了一些雪碧圖和音頻資源。這些資源的加載在不一樣平臺上不一樣： flutter：如今ubspec.yaml中聲明 H5：經過fetch在後臺加載,解析成對應資源 在ResourceProvider類中進行了封裝，同時對雪碧圖進行了建模

觸摸控制

經過TapGestureRecognizer和 ImmediateMultiDragGestureRecognizer在fluter中實現了觸摸屏點擊和手勢的監聽，在H5端比較簡單，就像寫js同樣監聽按鍵事件就能夠了

音頻

音頻播放在H5上比較簡單，由於是基於dom的一切都是水到渠成。而在flutter上好像框架並無支持？只能藉助第三方插件，但願之後能完善吧。目前選擇的是audioplayers的開源插件，不得不說，第三方插件多是一個大坑，由於質量很難保證，要同時支持android 和Ios就更難了

其餘

其餘東西都在代碼中，沒法展開詳說

感覺

整體來講dart這門語言有驚喜，也有些地方不那麼讓人愉悅，例如數字類型轉換報錯、沒有匿名類，這讓java程序員很是抓狂

在web端追溯出錯很困難，由於報錯都在循環體中，而這些報錯信息被編譯成js後很難在找到原代碼中究竟是哪裏錯了。

flutter不支持反射，官方團隊態度堅定，他們有他們的理由，然而不少優秀的庫依賴於反射這一特性,若是不支持，是否會阻礙futter生態鏈的發展呢？