Dart Runner demo sources
Dart Runner is a game demonstrating the use of:
- Using Adobe Flash Professional to design game assets,
- Toolkit for Dart to generate a Dart project
- Leveraging StageXL as a Flash-like API rendering in the HTML5 Canvas.
Play now: http://toolkitfordart.github.io/demo/
Flash Pro for the design
The game assets have been designed in Flash Professional CC (https://creative.adobe.com/products/flash) and feature:
- An animated intro screen,
- The player character animations,
- The HUD,
- Level blocks and hit boxes.
- Complex elements/filters (coulds, backgrounds, bonus, HUD shadow) have been flatten as images (right-click > Convert to Bitmap),
- The HUD has "Cache as Bitmap" enabled to flatten the static part at runtime (symbol instance Properties),
- The character parts (head, arm, etc.) are all vectors and have "Cache as Bitmap" enabled (on the first occurence of the element) to be cached at runtime,
- White fade transition is achieved using a large white shape - not by fading the whole scene,
- The level backgrounds are retina capables, thanks to StageXL automatically handling 'image@1x' to 'image@2x' substitution.
Publish using Toolkit for Dart
Toolkit for Dart (http://toolkitfordart.github.io) is a Flash Professional extension which will publish a FLA document into a Dart project leveraging the StageXL Dart library.
- Install the toolkit and launch Flash Pro,
- Open the Runner.fla,
- Open the Toolkit for Dart panel (Window > Extensions > Toolkit for Dart),
- Click Publish in the panel to update the Dart project.
Run in Dart Editor
- Install and launch Dart Editor (http://www.dartlang.org/tools/),
- Drag and drop Runner-dart/ folder from Finder/Explorer in Dart Editor's Files panel,
- Select pubspec.yaml in Dart Editor and right-click > Pub Update to download/update StageXL library,
- Open web/index.dart
- Press Cmd/Ctrl + R to run the project in Chromium which includes Dart VM
Test in other browsers
- Open web/index.dart
- Press Cmd/Ctrl + R to start the local server,
- Copy and paste the URL from Chromium into other browsers.
To generate a ready-to-deploy optimized project:
- Run optim.sh to optimize the images (it will copy some pre-optimize images and run 'pngquant' on the others),
- Select in Dart Editor: Tools > Pub Deploy
- /deploy is ready to upload on a webserver