DominicHamon.com

Life is like a grapefruit

Getting started with DartBox2d part 2

This is an update to this post as dartbox2d has undergone some drastic changes since that was written over a year ago.

Getting the code

The first of the main differences is that dartbox2d is now a package hosted on pub. Getting the code is a matter of having a pubspec.yaml file in the root of your project that looks something like:

name: dartbox2d-tutorial
version: 0.0.1
author: Dominic Hamon <dominic@google.com>
homepage: http://dmadev.com
dependencies:
    box2d: ">=0.1.1"
    browser: any"

The dependencies section is the important bit. This lets pub know that this application depends on any version of box2d with a version number greater than 0.1.1. That version uses the vector_math package instead of a hand-rolled math library and runs against the latest (as of this writing) dart sdk r19447. It also depends on browser which we’ll need to pull in the script to allow the code to run both as dart and javascript.

Then, just call $DART_SDK/bin/pub install and the box2d package will be installed. If any errors about conflicting dependencies are printed, please let me know.

The HTML page

<html>
  <body>
    <script type="application/dart" src="tutorial.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

The Dart code

At the top of the dart file, you would now import the libraries you need:

library dartbox2d_tutorial;
import 'dart:html';
import 'package:box2d/box2d.dart';

Note that the box2d package actually contains two libraries; box2d.dart for use with the VM and box2d_browser.dart for use in the browser. The only difference is that the latter enables debug drawing functions using dart:html. If you’re planning on running through DartEditor, you probably want box2d_browser.

The rest of the tutorial works almost as is, though the new math library means that initializeWorld should look like:

void initializeWorld() {
    // Create a world with gravity and allow it to sleep.
    world = new World(new vec2(0, -10), true, new DefaultWorldPool());

    // Create the ground.
    PolygonShape sd = new PolygonShape();
    sd.setAsBox(50.0, 0.4);

    BodyDef bd = new BodyDef();
    bd.position.setCoords(0.0, 0.0);
    Body ground = world.createBody(bd);
    ground.createFixtureFromShape(sd);

    // Create a bouncing ball.
    final bouncingBall = new CircleShape();
    bouncingBall.radius = BALL_RADIUS;

    final ballFixtureDef = new FixtureDef();
    ballFixtureDef.restitution = 0.7;
    ballFixtureDef.density = 0.05;
    ballFixtureDef.shape = bouncingBall;

    final ballBodyDef = new BodyDef();
    ballBodyDef.linearVelocity = new vec2(-2, -20);
    ballBodyDef.position = new vec2(15, 15);
    ballBodyDef.type = BodyType.DYNAMIC;
    ballBodyDef.bullet = true;

    final ballBody = world.createBody(ballBodyDef);
    ballBody.createFixture(ballFixtureDef);
}

And the switch to dart:html leaves initializeCanvas looking like:

CanvasElement canvas;
CanvasRenderingContext2D ctx;
ViewportTransform viewport;
DebugDraw debugDraw

void initializeCanvas() {
    // Create a canvas and get the 2d context.
    canvas = new CanvasElement(width:CANVAS_WIDTH, height:CANVAS_HEIGHT);
    document.body.append(canvas);
    ctx = canvas.getContext("2d");

    // Create the viewport transform with the center at extents.
    final extents = new Vector(CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2);
    viewport = new CanvasViewportTransform(extents, extents);
    viewport.scale = VIEWPORT_SCALE;

    // Create our canvas drawing tool to give to the world.
    debugDraw = new CanvasDraw(viewport, ctx);

    // Have the world draw itself for debugging purposes.
    world.debugDraw = debugDraw;
}

and run as:

void run() {
    window.animationFrame.then((time) => step());
}

void step() {
    world.step(1/60, 10, 10);
    ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
    world.drawDebugData();
    run();
}

Also, though the frog and dartc compilers have been replaced by dart2js so this is compiled to javascript using:

$ $DART_SDK/bin/dart2js tutorial.dart -otutorial.dart.js

There are a host of examples in the demos folder of the DartBox2d source here.

Posted on 2013/03/06 by dominic in web | Tagged box2d, dart, dartbox2d, physics | 4 Comments

4 thoughts on “Getting started with DartBox2d part 2”

Robbie says:

2013/03/21 at 18:44

Hi Dominic,

I can’t seem to get the ‘pub install’ to work. I tried both using the interface in the editor and typing it in manually in the file. Here’s the error that I get:

— Mar 21, 2013 8:38:22 PM Running pub install … —
Pub install failed, [1] Resolving dependencies…
Incompatible version constraints on ‘args’:
– ‘bot’ depends on version >=0.4.2
– ‘box2d’ depends on version >=0.4.1 <0.4.2

I'm not very experienced with the Dart Editor, so there's probably a way around this, but I can't figure it out. Just though I'd give you a heads up.

Reply
- dominic says:
  
  2013/03/21 at 20:52
  
  Hi Robbie
  
  Don’t worry, it’s quite a common situation. It seems that one of the dependencies in box2d (probably unittest) has updated its dependency to bot 0.4.2 and I forgot to pin it so that wouldn’t happen.
  
  I’ll open a bug for myself so I don’t forget. In the mean time, you should be able to either change the ‘pubspec.yaml’ in packages/box2d so it refers to args ">=0.4.2 <0.4.3" or you can change the dependency line for box2d to be:
  
  box2d: git: http://dartbox2d.googlecode.com/git
  
  That should work.
  
  Reply
Todd Anderson says:

2013/04/02 at 18:47

It seems the dependencies have incremented again, to “=0.4.2 =0.4.2 =0.9.5 <0.9.6"

Using the "git" option for Source did not work, I think because I could not access the pubspec.yaml until I had a local copy.

The line bd.position.setCoords(0.0, 0.0); is giving a method doesn't exist error, so I changed it to bd.position.setComponents(0.0, 0.0);

CanvasViewportTransform seems to be defined only in box2d_browser.dart, so for running in the Dart Editor I changed the import line to:

import 'package:box2d/box2d_browser.dart';

The last thing I needed to do to get this to run was remember the constructor! If anyone gets an error calling step() on the world object, this seems to be the reason. Seems like the error message could be more informative… although I guess this is a pretty big mistake!

Final suggestion: I think it would be quite helpful to link to a file with the complete code, to avoid some confusion about what goes where.

Thank you for the tutorial!

Reply
- dominic says:
  
  2013/04/22 at 14:05
  
  I have the dependencies much more open now so it should be easier to manage.
  
  You’re right, if you want to run in the browser you need to use box2d_browser. I should note that in the original post, thanks!
  
  There are some similar examples at http://github.com/google/dartbox2d/tree/master/example/demos that should be instructive.
  
  Reply

DominicHamon.com

Life is like a grapefruit

Getting started with DartBox2d part 2

Getting the code

The HTML page

The Dart code

4 thoughts on “Getting started with DartBox2d part 2”

Leave a Reply Cancel reply

Recent Posts

Archives

Search