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);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