Bomber mini game written with Flutter supports both Web and mobile

Flutter_BananaMon is a training project I developed when I learned Dart/Flutter. It does not rely on third-party game frameworks. It is a project started from scratch and is now open source on Github.

Introduction to the

The Google-led Dart is a rival to Microsoft’s TypeScript, but has been playing second fiddle on the Web. Can Google turn the flutter framework around? Flutter is a cross-platform UI framework designed for app development. Dart encapsulates the underlying graphics library on both Android and iOS. Unlike React Native, which relies on the platform’S UI framework to implement a component, flutter is a cross-platform UI framework designed for app development. So Flutter is lower, more efficient, and offers more possibilities. Cross-platform games are one of them.

The framework

To explore dart/ FLUTTER capabilities, this project was designed with both Web and FLUTTER support in mind. In this way, the project can run in three terminals with very little modification, which has been proved to be feasible in practice. It was originally a Dart-based Web project that ran directly in a browser and included a simple level editor that users could use in a graphical interface to edit their own levels, export and import levels, and more.

  1. The main loop
  2. Canvas encapsulation
  3. Resource management
  4. Touch control
  5. audio
  6. other

The main loop

Just like apps, every game has a main loop. The key code for the main loop is implemented on Flutter

SchedulerBinding.instance.scheduleFrameCallback(_tick);
Copy the code

On the Web, this is done by manipulating the DOM, and to ensure cross-platform performance, a layer of abstraction is required to hide the implementation

Canvas encapsulation

The game needs to do a lot of canvas operations. The Skia image library has been encapsulated in Flutter on android platform, and we only need to operate H5 Canvas on Web platform. In order to keep cross-platform, canvas has been encapsulated. The detailed code is in the CanvasWrapper class, and for the sake of laziness, only the API used is wrapped.

Resource management

The 2D game uses some Sprite art and audio resources. Yaml now declares H5 to be loaded in the background via fetch, which resolves that the corresponding resource is encapsulated in the ResourceProvider class. Meanwhile, the Sprite diagram is modeled

Touch control

Through TapGestureRecognizer and ImmediateMultiDragGestureRecognizer in fluter for touch screen click and gestures to monitor, on H5 is simpler, like write js to monitor key events

audio

Audio playback is easier on the H5 because it’s DOM-based and everything comes naturally. And on the flutter it seems that the frame is not supported? Only with third-party plugins, hopefully it will be improved. The current choice is audioPlayers’ open source plugin, and I have to say that third-party plugins can be a big hole, as quality is hard to guarantee, and supporting both Android and Ios is even harder

other

Everything else is in the code, so I can’t go into detail

feeling

Dart has some nice things to say about the language as a whole, but it also has some bad things to say about it, such as numeric type conversion errors and the lack of anonymous classes, which drives Java programmers crazy

Tracing errors on the Web side is difficult because they are in the body of the loop, and when compiled into JS it is difficult to find what went wrong in the original code.

The official team is adamant that Flutter does not support reflection, and they have their reasons. However, many excellent libraries rely on reflection. If flutter does not support reflection, will it hinder the development of the Futter ecosystem?