Dart Runner demo sources
Dart JavaScript Shell
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


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.

See Runner.fla.

Optimization hints

  • 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

To run the project in navigators not featuring the Dart VM you will cross-compile your project to (unminified) JavaScript:

  • Open web/index.dart
  • Press Cmd/Ctrl + G to generate the JavaScript and script-map files,
  • Press Cmd/Ctrl + R to start the local server,
  • Copy and paste the URL from Chromium into other browsers.

Deploy build

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