今回から3回ほどにわたって，
Box2dWebを使う
「Box2D」
まずは，
図1 Box2dWebのサイト
ダウンロードしたZip圧縮ファイル
図2 ダウンロードして展開したBox2dWebのライブラリJSファィル
そして，
<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>
<script src="lib/Box2dWeb-2.1.a.3.min.js"></script>
また，
<body onLoad="initialize()">
<canvas id="myCanvas" width="400" height="300"></canvas>
</body>
- ※1
- Box2Dを使った有名なアプリケーションとしては，
少し古いが 「Crayon Physics Deluxe」 が挙げられる。日本語の記事では， 「クレヨン画が物理演算で動く 『Crayon Physics』 」 がかいつまんで紹介している。
ボールの画像をBitmapオブジェクトに読み込む
物理演算エンジンを初めて使うとき，
先に，
図3 ボールのPNGファイルはアルファを抜いてフォルダに納めておく
Box2Dでボールをひとつ落とすスクリプトは，
画像ファイルのURLを引数に受取った関数
画像のオブジェクトをステージに置く関数
処理の行数はさほどないのに関数が多いのは，
図4 人形役のボールがデフォルトの左上角に置かれた
var stage;
var ballImage;
var imageRadius;
function initialize() {
var canvasElement = document.getElementById("myCanvas");
stage = new createjs.Stage(canvasElement);
createjs.Ticker.timingMode = createjs.Ticker.RAF;
preloadImage("images/Pen.png");
}
function tick(eventObject) {
stage.update();
}
function addBall() {
var ball = createVisualBall(imageRadius);
stage.addChild(ball);
}
function createVisualBall(radius) {
var ball = new createjs.Bitmap(ballImage);
ball.regX = ballImage.width / 2;
ball.regY = ballImage.height / 2;
ball.scaleX = ball.scaleY = radius / imageRadius;
return ball;
}
function preloadImage(file) {
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", loadFinished);
loader.loadFile(file);
}
function loadFinished(eventObject) {
ballImage = eventObject.result;
imageRadius = ballImage.width / 2;
createjs.Ticker.addEventListener("tick", tick);
addBall();
}
