5 ms·

StageXL: fast and universal 2D rendering engine for HTML5 and Dart

47 points by wx196 11y ago

mkesper 11y ago
StageXL started as an easy migration path for Adobe Flash developers and their products to HTML5. Therefore StageXL provides the same display list API you may have used in Flash for many years. Furthermore the Dart programming language is easy to use for everyone who is familiar with ActionScript.
- talmand 11y ago
  CreateJS is the same concept but with Javascript.
  - bp74 11y ago
    Yes, CreateJS was one of the first libraries providing a Flash display list in HTML5. But CreateJS uses the Canvas2D api and a very limited WebGL implementation. StageXL provides much more features with full WebGL support.
    - talmand 11y ago
      You are indeed correct, but I fail to see what WebGL support has to do with pointing out another library that uses the Flash display list concept. I wasn't saying one was better than the other.
- JoeSloth 11y ago
  Seems similar to Pixi js. I like that Pixi uses WebGL though, with a canvas fallback. It also uses a Flash-esque API
  - bp74 11y ago
    StageXL does also use WebGL with a fallback to Canvas. Fortunately, most browsers supports WebGL nowadays.
    - jbrantly 11y ago
      Is there a feature comparison with Pixi somewhere? Why would one pick StageXL over Pixi, for example?
      - bp74 11y ago
        Unfortunately no, but i'm not aware of any major feature that is not supported in comparision to Pixi.js. If you find something missing in StageXL i'm happy to receive a feature request :)
      - bp74 11y ago
        Sorry i missed your second question. I would choose StageXL over PixiJS because auf the Dart language. I also use TypeScript for other project but i prefer Dart. The Dart-to-JavaScript compiler does an awesome job. It not only transpiles Dart code to JavaScript (like the TypeScript compiler does for TypeScript) but it's a real compiler with great optimization and minification. The optimizations include inlining, dead code removal, hoisting, etc. The resulting JavaScript code is not pretty to look at, but pretty damned fast at runtime.
        jbrantly 11y ago
        Thank you for both of your replies
fuck_dang 11y ago
This is pretty cool! Being able to use Dart easily and comfortable will go a long way I think. Especially with new things like the Flutter toolkit for mobile apps, it'll be nice to have something like StageXL for porting those games to browser or from the browser to apps, etc. Dart gives me the feeling that it'll be easy to port my code to another platform later. Nice and simple, but plenty fast enough and with good lang features. I'm on a Chromebook, and none of the performance demos seem to work... nothing renders or happens at all
bshimmin 11y ago
It does pretty well on the always-entertaining bunny benchmark! http://www.stagexl.org/samples/bunny_bench/ http://www.stagexl.org/samples/bunny_bench/ (You'll want to click and hold because clicking to try and get the FPS below 60 soon gets tedious.) I always found the Display List in Flash to be a pleasant thing to work with.
- bp74 11y ago
  There is also an updated version of this benchmark: http://www.stagexl.org/example/benchmark/bunny_mark/ http://www.stagexl.org/example/benchmark/bunny_mark/
- jbrantly 11y ago
  That benchmark is amazing. I remember wanting to prototype an HTML5 tower defense game a number of years back but couldn't overcome the performance issues as more and more sprites were added. I may need to revisit...
bp74 11y ago
You can try more examples here: http://www.stagexl.org/samples/ http://www.stagexl.org/samples/ And you can look at some source code examples here: https://github.com/bp74/StageXL_Samples https://github.com/bp74/StageXL_Samples And StageXL also supports runtimes for Spine, Dragenbones, Flump, ...: https://github.com/bp74/StageXL_Spine https://github.com/bp74/StageXL_Spine https://github.com/bp74/StageXL_DragonBones https://github.com/bp74/StageXL_DragonBones https://github.com/bp74/StageXL_Flump https://github.com/bp74/StageXL_Flump https://github.com/bp74/StageXL_BitmapFont https://github.com/bp74/StageXL_BitmapFont
markdog12 11y ago
Using this to port games from Flash. Would highly recommend.
leeoniya 11y ago
would be fun to port Portal 2D: http://portal.wecreatestuff.com/ http://portal.wecreatestuff.com/
sounddesignz 11y ago
Sneak Peek on a StageXL framework I am working on: http://rockdot.sounddesignz.com/template/ http://rockdot.sounddesignz.com/template/ Screen Management + Responsive Layouts + Material Design UI library + Spring Application Context (IoC/DI) + MVC/Commands + Physics + Google API + Facebook API + whatnot. To kind of prove that the Dart2JS compiler is amazing: What you see comes in 230KiB gzipped. Also make sure to check out the button to the upper right. If it does magic, you're on WebGL. Github: https://github.com/blockforest/rockdot-generator https://github.com/blockforest/rockdot-generator

47 points by wx196 11y ago

StageXL started as an easy migration path for Adobe Flash developers and their products to HTML5. Therefore StageXL provides the same display list API you may have used in Flash for many years. Furthermore the Dart programming language is easy to use for everyone who is familiar with ActionScript.

talmand 11y ago
CreateJS is the same concept but with Javascript.
- bp74 11y ago
  Yes, CreateJS was one of the first libraries providing a Flash display list in HTML5. But CreateJS uses the Canvas2D api and a very limited WebGL implementation. StageXL provides much more features with full WebGL support.
  - talmand 11y ago
    You are indeed correct, but I fail to see what WebGL support has to do with pointing out another library that uses the Flash display list concept. I wasn't saying one was better than the other.
JoeSloth 11y ago
Seems similar to Pixi js. I like that Pixi uses WebGL though, with a canvas fallback. It also uses a Flash-esque API
- bp74 11y ago
  StageXL does also use WebGL with a fallback to Canvas. Fortunately, most browsers supports WebGL nowadays.
  - jbrantly 11y ago
    Is there a feature comparison with Pixi somewhere? Why would one pick StageXL over Pixi, for example?
    - bp74 11y ago
      Unfortunately no, but i'm not aware of any major feature that is not supported in comparision to Pixi.js. If you find something missing in StageXL i'm happy to receive a feature request :)
    - bp74 11y ago
      Sorry i missed your second question. I would choose StageXL over PixiJS because auf the Dart language. I also use TypeScript for other project but i prefer Dart. The Dart-to-JavaScript compiler does an awesome job. It not only transpiles Dart code to JavaScript (like the TypeScript compiler does for TypeScript) but it's a real compiler with great optimization and minification. The optimizations include inlining, dead code removal, hoisting, etc. The resulting JavaScript code is not pretty to look at, but pretty damned fast at runtime.
      - jbrantly 11y ago
        Thank you for both of your replies

fuck_dang 11y ago

This is pretty cool! Being able to use Dart easily and comfortable will go a long way I think. Especially with new things like the Flutter toolkit for mobile apps, it'll be nice to have something like StageXL for porting those games to browser or from the browser to apps, etc. Dart gives me the feeling that it'll be easy to port my code to another platform later. Nice and simple, but plenty fast enough and with good lang features. I'm on a Chromebook, and none of the performance demos seem to work... nothing renders or happens at all

bshimmin 11y ago

It does pretty well on the always-entertaining bunny benchmark! http://www.stagexl.org/samples/bunny_bench/ http://www.stagexl.org/samples/bunny_bench/ (You'll want to click and hold because clicking to try and get the FPS below 60 soon gets tedious.) I always found the Display List in Flash to be a pleasant thing to work with.

bp74 11y ago
There is also an updated version of this benchmark: http://www.stagexl.org/example/benchmark/bunny_mark/ http://www.stagexl.org/example/benchmark/bunny_mark/
jbrantly 11y ago
That benchmark is amazing. I remember wanting to prototype an HTML5 tower defense game a number of years back but couldn't overcome the performance issues as more and more sprites were added. I may need to revisit...

bp74 11y ago

You can try more examples here: http://www.stagexl.org/samples/ http://www.stagexl.org/samples/ And you can look at some source code examples here: https://github.com/bp74/StageXL_Samples https://github.com/bp74/StageXL_Samples And StageXL also supports runtimes for Spine, Dragenbones, Flump, ...: https://github.com/bp74/StageXL_Spine https://github.com/bp74/StageXL_Spine https://github.com/bp74/StageXL_DragonBones https://github.com/bp74/StageXL_DragonBones https://github.com/bp74/StageXL_Flump https://github.com/bp74/StageXL_Flump https://github.com/bp74/StageXL_BitmapFont https://github.com/bp74/StageXL_BitmapFont

markdog12 11y ago

Using this to port games from Flash. Would highly recommend.

leeoniya 11y ago

would be fun to port Portal 2D: http://portal.wecreatestuff.com/ http://portal.wecreatestuff.com/

sounddesignz 11y ago

Sneak Peek on a StageXL framework I am working on: http://rockdot.sounddesignz.com/template/ http://rockdot.sounddesignz.com/template/ Screen Management + Responsive Layouts + Material Design UI library + Spring Application Context (IoC/DI) + MVC/Commands + Physics + Google API + Facebook API + whatnot. To kind of prove that the Dart2JS compiler is amazing: What you see comes in 230KiB gzipped. Also make sure to check out the button to the upper right. If it does magic, you're on WebGL. Github: https://github.com/blockforest/rockdot-generator https://github.com/blockforest/rockdot-generator