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

hglfNg發表於2018-12-24

[實戰]用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類中進行了封裝,同時對雪碧圖進行了建模

觸控控制

通過TapGestureRecognizerImmediateMultiDragGestureRecognizer在fluter中實現了觸控式螢幕點選和手勢的監聽,在H5端比較簡單,就像寫js一樣監聽按鍵事件就可以了

音訊

音訊播放在H5上比較簡單,因為是基於dom的一切都是水到渠成。而在flutter上好像框架並沒有支援?只能藉助第三方外掛,希望以後能完善吧。目前選擇的是audioplayers的開源外掛,不得不說,第三方外掛可能是一個大坑,因為質量很難保證,要同時支援android 和Ios就更難了

其他

其他東西都在程式碼中,無法展開詳說

感受

總體來說dart這門語言有驚喜,也有些地方不那麼讓人愉悅,例如數字型別轉換報錯、沒有匿名類,這讓java程式設計師非常抓狂

在web端追溯出錯很困難,因為報錯都在迴圈體中,而這些報錯資訊被編譯成js後很難在找到原始碼中到底是哪裡錯了。

flutter不支援反射,官方團隊態度堅決,他們有他們的理由,然而很多優秀的庫依賴於反射這一特性,如果不支援,是否會阻礙futter生態鏈的發展呢?

相關文章