Flutter

[John Talley]

Has anyone started working on a Flutter implementation of StageXL?

[Nils Döhring]

Bernhard, if you're seeing this: Flutter is moving fast towards a web engine – https://medium.com/flutter-io/hummingbird-building-flutter-for-the-web-e687c2a023a8

Interesting read. 

I'm still wondering about the better approach: adding Flutter as rendering engine to StageXL or implementing StageXL's drawing and display list API with Flutter's API. 

[Nils Döhring]

A bit more elaboration:

First let me say that I only looked at this briefly, and am not familiar enough with the inner workings of StageXL and Flutter to provide educated advice – i.e. I don't know if any of this could work. 

1/ "implementing StageXL's drawing and display list API with Flutter's API"

Here, we would refactor StageXL's view classes. To oversimplify: Sprite extends Widget.

umiuni_2d seems to be a project where someone started following that approach.

2/ "Flutter rendering engine for StageXL"

StageXL supports rendering to Canvas2D and WebGL, and as such has an abstraction layer to which we could add Flutter as a 3rd option.

On a high level, to me, #1 looks like the better option, especially with the Flutter team now exploring a web engine (Hummingbird) that solves accessibility, text output, keyboard input. They have more manpower than StageXL will ever have, and leaving all the render engine hassle and innovation to Flutter would enable StageXL to focus more on features.

I hope this makes sense.

Also see below a dump of some links I noted when looking into this some months ago. They might contain other options.

thanks,

Nils

-------------------------

StageXL renderer for Skia

- look at how flutter uses skia: https://groups.google.com/d/msg/flutter-dev/n-Z49qpo1NE/FhMs6aIkBAAJ

- look at stagexl's rendercontext and its implementations: https://github.com/bp74/StageXL/blob/master/lib/src/engine/render_context_canvas.dart

-

Skia Web

Skia renders 2D and animation on Canvas: https://skia.org/user/modules/canvaskit

A WASM port for skia is in progress: https://github.com/Zubnix/skia-wasm-port

The project's github has an interesting discussion about Dart & Flutter: https://github.com/Zubnix/skia-wasm-port/issues/5

Demo: https://zubnix.github.io/skia-wasm-port/

https://github.com/google/skia/blob/master/modules/pathkit/README.md

UmiUni2D 

is an approach from 2015 that aims at rendering to webgl and flutter - https://github.com/kyorohiro/umiuni2d

[Bernhard Pichler]

Hi Nils,

Thanks for taking a look at this. I'm also not sure what the best approach would be. Some thoughts ..

1) If Sprite just extends Widget, is it worth the effort? The StageXL API would be a thin wrapper over the existing Flutter API right?

2) If we get enough low level access (e.g. writing our own shaders) this would be the much better approach.

StageXL was designed to be a render engine for games in the first place. I heared that there was a game demo when they presented Flutter 1.0, what API did they use? I probably should take a look at the video anyway to see what they did with Flutter. It would also be interessting if Flutter has more success than Dart had in the past.

Kind regards,

Bernhard

[Tyler Turner]

I think the library used for that game is SpriteWidget https://www.spritewidget.com/ . It looks to me like it's using Flutter's Canvas class, which seems similar to HTML canvas to me. 

I'm liking what I'm seeing regarding Flutter's momentum. It's been getting a lot of positive attention, and I'm starting to see jobs cropping up with it. Dart faced a lot more resistance. I didn't realize how ambitious Google was with Flutter until this last dev conference when they made it clear that they see this as a universal platform for mobile, desktop and web.

Am I wrong in thinking that the Flutter API is a lot like HTML canvas? If that's the case, then there is definitely a place for StageXL. StageXL makes HTML canvas a lot easier to work with. As far as strategies go, I can't really offer any insight on this discussion except to say that I believe that even if StageXL's performance is a little weaker on the web when going through the Flutter layer, I still think it would be something people could use. Also, could working on top of Flutter on the web make it easier to incorporate with the rest of a Flutter application?

[Tyler Turner]

One other thought: even if StageXL (or a derivative of it) concentrated on just being a cross-platform graphics library, that would be useful. I imagine that cross-platform support for audio and other media technologies could get pretty time-consuming. Even now with StageXL on the web I use my own sound libraries instead, and that hasn't stopped StageXL from being an enormous help to me.

[Nils Döhring]

+1

I also think StageXL-on-Flutter could become a pathway for AIR (app) developers and projects to make the switch. While StageXL and Toolkit for Dart provided such a path for ActionScript (game) devs years ago, it never got much traction because imho it was not marketed well. 

That being said, I still haven't given up on moving complex ActionScript projects over to StageXL/Dart – see below a short writeup of my most recent (Nov 2018) attempts and proof of concept.

After porting roughly 50,000 LOC of framework and library code (e.g. spring-actionscript, Box2D) from ActionScript to Dart and optimizing it over the past 4 years, I've now started to migrate actual projects, say, as proof of concept. I chose the Bitburger Microsite we did for FIFA WM 2010, specifically Game #2.

While it was *relatively* easy to get the logic going, it took quite some time to refactor the Flash Pro -> SWC -> AS3 workflow into one that uses texture atlases and asset code generation. Also, the game is using complex masking, which had to be changed to work in WebGL.

But here we are – enjoy an 8 year old high fidelity Flash game in any browser, on any device.
http://acanvas.sounddesignz.com/bbwm2010/#/game2

File size of minified-gzipped JS (120 KiB) and compressed Atlases is actually just 70% of the original SWF file(s). Pretty happy with the results, and there's lots of room for performance optimization – which I'll probably never do. 

Underlying framework:

https://github.com/acanvas/acanvas-framework

Demo: http://acanvas.sounddesignz.com/acanvas-framework/#/

[Tyler Turner]

It took me a little bit to get my beer pouring technique down, but the game works great!