5 ms·

StageXL 1.0: Fast 2D rendering engine for HTML5 inspired by Flash

58 points by kasperl 10y ago

kyriakos 10y ago
Looks interesting. I looked at dart in the past briefly. Is still under active development?
- bp74 10y ago
  Yes it is. Google uses it internally with Angular Dart (a version of Angular made especially for Dart). And the Flutter project looks very interesting to built native mobile apps with Dart (instead of Java for example).
- kasperl 10y ago
  Very active development; see https://www.youtube.com/playlist?list=PLOU2XLYxmsILKY-A1kq4eHMcku3GMAyp2 https://www.youtube.com/playlist?list=PLOU2XLYxmsILKY-A1kq4e... for a few recent presentations about the progress. (disclaimer: I work on the Dart team at Google)
- thebosz 10y ago
  To add to Kasper's reply, Dart is more active than it ever has before. Part of that is just because of how versatile it is; it's not just a web programming language. It has multiple uses from mobile to web, back to front end. In fact, there's even a new OS where it's a first class citizen. Watch some of the videos from the recent Dart summit and be amazed!
markdog12 10y ago
Happy StageXL user here. Great library and API. Chose it because I was porting an AS3 codebase and it was the perfect solution.
- bp74 10y ago
  Awesome, thanks for the feedback!
marknadal 10y ago
Does DragonBones render out to StageXL for HTML5 games? My team is trying to create explainer-animation-games ( our first one is up here: http://gun.js.org/explainers/basketball/basketball.html http://gun.js.org/explainers/basketball/basketball.html ) and I have been looking at your guys work for a while wondering how you get such gorgeous fluid animations. Any tips on where to start?
- bp74 10y ago
  Yes absolutely! We started with a port of the AS3 runtime for DragonBones but were not happy with the code quality and the performance. Therefore we started the StageXL runtime for DrageonBones from scratch. The downside is that the new runtime does not support one or two of the features of the official runtimes. But animations like the one you showed in your example are completely covered. If you need something that is missing, just talk to us here: https://github.com/bp74/StageXL_DragonBones https://github.com/bp74/StageXL_DragonBones Edit: Animation run at 60fps and look smooth because those animations are using bones and key frames. The runtime interpolates the motion of those bones between the keyframes.
gavanwoolery 10y ago
I don't have any basis for equivalent comparison, but it feels fast. Hitting around ~20000 sprites in their bunnymark test before it drops below 60 FPS. Also, for whatever bad rap it got, I still miss Flash. :)
- bp74 10y ago
  Indeed it is fast :) And yes, many AS3 developers are missing the capabilities of Flash. Therefore we built StageXL on top of Dart to have a similar developer experience.
  - patresi 10y ago
    uBlock Origin on Chrome is blocking loading this file http://www.stagexl.org/assets/js/dart.js http://www.stagexl.org/assets/js/dart.js, it says that's included in the EasyPrivacy filter
    - bp74 10y ago
      wow that is strange, thanks for telling me. The file should load without a problem!
thebosz 10y ago
Congrats to the team! I've been using this library for around 6 months and it's been a joy to use. I came from using GameMaker Studio, so porting my game wasn't straightforward, but that's the fault of GameMaker and not StageXL. Part of the reason I chose StageXL was because of Dart. I've never been a more productive, happier programmer than when I'm using Dart. I'm using Cordova to wrap my game and distribute on the app stores and it's been a breeze to write a game that works well on both Android and iPhone. I'm super excited to start using v1!
_nalply 10y ago
I skimmed the article and tried to find out whether StageXL needs a plugin but it was not conclusive for me. Does StageXL need a plugin?
- markdog12 10y ago
  No, it doesn't. But there are some that add functionality. They're listed in the article.
  - bp74 10y ago
    To be clear, those added functionality is not a plugin in the sense of that you need to install it. They are just libraries that are compiled to JavaScript. In the end you just need a browser that supports HTML5.
kasperl 10y ago
There's a short interview with the author of StageXL, Bernhard Pichler, here: http://news.dartlang.org/2016/12/stagexl-10-chat-with-bernhard-pichler.html http://news.dartlang.org/2016/12/stagexl-10-chat-with-bernha....
blockforest 10y ago
Chiming in to shamelessly plug a demo app built around StageXL: http://rockdot.sounddesignz.com/template/ http://rockdot.sounddesignz.com/template/ Feats: Responsive Layout, Canvas2D fallback for slow mobile devices, Material Design Components, Google+ and Facebook integration, Physics engine (experimental port of Box2d), Wrapper for BabylonJS, StageXL Runtime Examples: BitmapFont, DragonBones, GAF, Spine, Particle, Flump Bonus, port of FlexBook: http://rockdot.sounddesignz.com/stagexl-commons/experimental_book.html http://rockdot.sounddesignz.com/stagexl-commons/experimental... (no touch support, yet) It's at v0.6, so be kind.
- bp74 10y ago
  The FlexBook demo is awesome!

58 points by kasperl 10y ago

kyriakos 10y ago

Looks interesting. I looked at dart in the past briefly. Is still under active development?

bp74 10y ago
Yes it is. Google uses it internally with Angular Dart (a version of Angular made especially for Dart). And the Flutter project looks very interesting to built native mobile apps with Dart (instead of Java for example).
kasperl 10y ago
Very active development; see https://www.youtube.com/playlist?list=PLOU2XLYxmsILKY-A1kq4eHMcku3GMAyp2 https://www.youtube.com/playlist?list=PLOU2XLYxmsILKY-A1kq4e... for a few recent presentations about the progress. (disclaimer: I work on the Dart team at Google)
thebosz 10y ago
To add to Kasper's reply, Dart is more active than it ever has before. Part of that is just because of how versatile it is; it's not just a web programming language. It has multiple uses from mobile to web, back to front end. In fact, there's even a new OS where it's a first class citizen. Watch some of the videos from the recent Dart summit and be amazed!

markdog12 10y ago

Happy StageXL user here. Great library and API. Chose it because I was porting an AS3 codebase and it was the perfect solution.

bp74 10y ago
Awesome, thanks for the feedback!

marknadal 10y ago

Does DragonBones render out to StageXL for HTML5 games? My team is trying to create explainer-animation-games ( our first one is up here: http://gun.js.org/explainers/basketball/basketball.html http://gun.js.org/explainers/basketball/basketball.html ) and I have been looking at your guys work for a while wondering how you get such gorgeous fluid animations. Any tips on where to start?

bp74 10y ago
Yes absolutely! We started with a port of the AS3 runtime for DragonBones but were not happy with the code quality and the performance. Therefore we started the StageXL runtime for DrageonBones from scratch. The downside is that the new runtime does not support one or two of the features of the official runtimes. But animations like the one you showed in your example are completely covered. If you need something that is missing, just talk to us here: https://github.com/bp74/StageXL_DragonBones https://github.com/bp74/StageXL_DragonBones Edit: Animation run at 60fps and look smooth because those animations are using bones and key frames. The runtime interpolates the motion of those bones between the keyframes.

gavanwoolery 10y ago

I don't have any basis for equivalent comparison, but it feels fast. Hitting around ~20000 sprites in their bunnymark test before it drops below 60 FPS. Also, for whatever bad rap it got, I still miss Flash. :)

bp74 10y ago
Indeed it is fast :) And yes, many AS3 developers are missing the capabilities of Flash. Therefore we built StageXL on top of Dart to have a similar developer experience.
- patresi 10y ago
  uBlock Origin on Chrome is blocking loading this file http://www.stagexl.org/assets/js/dart.js http://www.stagexl.org/assets/js/dart.js, it says that's included in the EasyPrivacy filter
  - bp74 10y ago
    wow that is strange, thanks for telling me. The file should load without a problem!

thebosz 10y ago

Congrats to the team! I've been using this library for around 6 months and it's been a joy to use. I came from using GameMaker Studio, so porting my game wasn't straightforward, but that's the fault of GameMaker and not StageXL. Part of the reason I chose StageXL was because of Dart. I've never been a more productive, happier programmer than when I'm using Dart. I'm using Cordova to wrap my game and distribute on the app stores and it's been a breeze to write a game that works well on both Android and iPhone. I'm super excited to start using v1!

_nalply 10y ago

I skimmed the article and tried to find out whether StageXL needs a plugin but it was not conclusive for me. Does StageXL need a plugin?

markdog12 10y ago
No, it doesn't. But there are some that add functionality. They're listed in the article.
- bp74 10y ago
  To be clear, those added functionality is not a plugin in the sense of that you need to install it. They are just libraries that are compiled to JavaScript. In the end you just need a browser that supports HTML5.

kasperl 10y ago

There's a short interview with the author of StageXL, Bernhard Pichler, here: http://news.dartlang.org/2016/12/stagexl-10-chat-with-bernhard-pichler.html http://news.dartlang.org/2016/12/stagexl-10-chat-with-bernha....

blockforest 10y ago

Chiming in to shamelessly plug a demo app built around StageXL: http://rockdot.sounddesignz.com/template/ http://rockdot.sounddesignz.com/template/ Feats: Responsive Layout, Canvas2D fallback for slow mobile devices, Material Design Components, Google+ and Facebook integration, Physics engine (experimental port of Box2d), Wrapper for BabylonJS, StageXL Runtime Examples: BitmapFont, DragonBones, GAF, Spine, Particle, Flump Bonus, port of FlexBook: http://rockdot.sounddesignz.com/stagexl-commons/experimental_book.html http://rockdot.sounddesignz.com/stagexl-commons/experimental... (no touch support, yet) It's at v0.6, so be kind.

bp74 10y ago
The FlexBook demo is awesome!