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.
Permalink
Failed to load latest commit information.
Runner-dart
assets
.gitignore
README.md
Runner.fla
optim.sh

README.md

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