Saturday, January 14, 2012

Getting Started with DartBox2D

‹prev | My Chain | next›

I have played about with the internals of Dart enough that I feel safe in moving onto some of the browser / DOM integration features. But first a quick diversion to take a look at DartBox2D port of Box2D, a two dimensional physics engine.

First up, I clone the repository:
➜  repos  git clone https://code.google.com/p/dartbox2d/
Cloning into dartbox2d...
remote: Counting objects: 583, done.
remote: Finding sources: 100% (583/583), done.
remote: Total 583 (delta 390)
Receiving objects: 100% (583/583), 377.38 KiB | 139 KiB/s, done.
Resolving deltas: 100% (390/390), done.
Then take a look at the demo page. When I click on the first link and check the console output, I see that the Dart detection is not doing a good job of detecting the Dart in my Dartium:


Looking through the code, I see:
        if(getQueryVariable('native') && document.implementation.hasFeature('dart')) {
          // Browser has the goods, so kick it in to dart gear.
          console.log('Dart supported.');
          script.setAttribute('type', 'application/dart');
          script.setAttribute('src', 'demos/' + demo + '.dart');
        } else {
          // If browser doesn't support dart, redirect to js version.
          console.log('JS fallback.');
          script.setAttribute('src', 'js/demos/' + demo + '.dart.js');
        }
        document.body.appendChild(script);
Ah, so I need to manually specify a native=1 query parameter to get native detection to work. With that, DartBox2d admits that I do have Dart:


And, more importantly, I get nice demos like a bouncing ball in the "Ball Cage":


And "Circle Stress":


Since I know next to nothing about physics engines, I plan to familiarize myself like I always do: by shamelessly copying. Of the demos that are included, the simplest might be the blob test (at least the game board), so I start there.

I create myself an HTML document to hold my test:
<!DOCTYPE html>
<html>
  <head>
    <title>Simple DartBox2D</title>
    <script>{}</script>
    <script type="application/dart" src="simple.dart"></script>
  </head>
  <body>
    <h1>Simple DartBox2D</h1>
  </body>
</html>
And, in the simple.dart file, I copy the skeleton of the board from the blob test:
#import('dart:dom');
#import('lib/box2d.dart');

class Simple2d {
  /** The default canvas width and height. */
  static final int CANVAS_WIDTH = 900;
  static final int CANVAS_HEIGHT = 600;

  /** Scale of the viewport. */
  static final num _VIEWPORT_SCALE = 10;

  /** The gravity vector's y value. */
  static final num GRAVITY = -10;


  // other setup

  Simple2d() {
    // Setup the World.
    final gravity = new Vector(0, GRAVITY);
    bool doSleep = true;
    world = new World(gravity, doSleep, new DefaultWorldPool());
  }

  /** Entrypoint. */
  static void main() {
    final simple2d = new Simple2d();
    simple2d.initialize();
    simple2d.initializeAnimation();
    simple2d.runAnimation();
  }

  void initialize() { /* ... */ }
  void initializeAnimation() { /* ... */ }
  void runAnimation() { /* ... /* }
  void step(num timestamp) { /* ... */ }
}

void main() {
  Simple2d.main();
}
All in all, there is quite a bit of setup required just to draw the board. But it works.


That is just the gameboard and there is much that I cargo-coded without understanding. Tomorrow I will try to actually add something on that board besides lines and, maybe, gain a deeper understanding of everything that is involved.

Day #265

No comments:

Post a Comment