HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う

第29回 Box2Dで落としたボールを床に弾ませる

この記事を読むのに必要な時間:およそ 9 分

かたちを定める

剛体の大きさやかたちはフィクスチャというオブジェクトで決める。例によって,その定義から始めなければならない。b2FixtureDefオブジェクトをつくり,そのb2FixtureDef.shapeプロパティにBox2Dのシェイプ(b2Shapeおよびそのサブクラスの)オブジェクトで大きさとかたちを与える。正円はb2CircleShape()コンストラクタの引数に半径を渡せばよい。矩形はb2PolygonShapeオブジェクトに,b2PolygonShape.SetAsBox()メソッドで幅と高さを定める。なお,幅と高さは原点(中心)から端までの長さなので,矩形の大きさの半分とする。

フィクスチャを定義する関数(defineFixture())は新たに定めた。ボールと床をつくる関数(createDynamicBall()とcreateStaticFloor())から,それぞれシェイプオブジェクトを引数に渡して呼び出す。そして,剛体のb2Bodyオブジェクトにフィクスチャオブジェクトを与えるのが,b2Body.CreateFixture()メソッドだ。b2FixtureDefオブジェクトを引数とする。そこで,剛体をつくる関数(createBody())の引数にb2FixtureDefオブジェクト(fixtureDef)が加えられ,それをメソッドに渡して呼び出すことにした。

function createDynamicBall(nX, nY, radius) {

  var circleShape = new Box2D.Collision.Shapes.b2CircleShape(radius * SCALE);
  var fixtureDef = defineFixture(circleShape);
  // createBody(world, bodyDef);
  createBody(world, bodyDef, fixtureDef);

}
function createStaticFloor(nX, nY, nWidth, nHeight, color) {

  var boxShape = new Box2D.Collision.Shapes.b2PolygonShape();
  var fixtureDef = defineFixture(boxShape);
  boxShape.SetAsBox(nWidth / 2 * SCALE, nHeight / 2 * SCALE);
  // createBody(world, bodyDef);
  createBody(world, bodyDef, fixtureDef);

}

function defineFixture(myShape) {
  var fixtureDef = new Box2D.Dynamics.b2FixtureDef();
  fixtureDef.shape = myShape;
  return fixtureDef;
}
// function createBody(world, bodyDef) {
function createBody(world, bodyDef, fixtureDef) {

  body.CreateFixture(fixtureDef);
}

黒子のBox2Dに,ふたつの剛体の大きさとかたちを教えた。これで,互いのぶつかり合いがわかるはずだ。アニメーションを見ると,ボールは床に落ちても弾みもせず,体操の完璧な着地のごとく,床に吸いつくように止まる図3⁠。そろそろ物理エンジンの性格がわかってきたろう。ボールが弾む材質だと教えていないからだ。

図3 落下したボールが床に吸いつくように着地する

図3 落下したボールが床に吸いつくように着地する

材質を定める

物理演算エンジンは教えたことしかやらない。しかし,教えさえすれば,仕事は完璧にこなす。あと,もう少しの辛抱だ。材質はフィクスチャの定義に定める。b2FixtureDefオブジェクトには,つぎの表1のように3つのプロパティが備わっている※1⁠。それらを,以下の新たな関数(setFixture())によりb2FixtureDefオブジェクトに与えた。

※1
密度は大きさあたりの重さだ。たとえば,大きな氷山は重い。しかし,体積あたりで比べれば海水よりわずかに軽いので浮いている。なお,Box2Dは2次元の物理演算を行うので,大きさの単位はm2だ。ふたつの剛体がぶつかったとき,摩擦は滑りにくさ,弾性は弾みやすさを決める。両方の値を大きくとればスーパーボール(ゴムボール)のようになり,ともに小さくするとビー玉のような動きになる。
表1 フィクスチャを定義するb2FixtureDefオブジェクトに定めるプロパティと値

b2FixtureDefプロパティ意味
density密度重さ(kg)/大きさ(m2
friction摩擦0から1の間の数値
restitution弾性0から1の間の数値
function createDynamicBall(nX, nY, radius) {

  setFixture(fixtureDef, 1, 0.1, 0.8);

}

function setFixture(fixtureDef, density, friction, restitution) {
  fixtureDef.density = density;
  fixtureDef.friction = friction;
  fixtureDef.restitution = restitution;
}

これでようやく,動的なボールの剛体を静的な床の剛体の上に自由落下させて,弾ませる物理演算シミュレーションができた。アニメーションを確かめると,ボールが床の上で軽やかにバウンドする図4⁠。弾性は大きめにしたので,弾みがいい。摩擦はボールの数をもう少し増やさないと,違いがわかりにくいだろう。

図4 落下したボールが床の上で弾む

図4 落下したボールが床の上で弾む

今回はここまでとしよう。JavaScript全体はコード2にまとめた。また,jsdo.itにもサンプルコードを掲げてある。次回は,たくさんのボールを,位置や大きさを変えながらつぎつぎと落とす。もっとも,ここまでできてしまうと,Box2Dについて新たに学ぶべき知識はさほどない。そこで,スクリプトの改善も少し加えるつもりだ。

コード2 自由落下させたボールを静的な床の上で弾ませる

var SCALE = 1 / 30;
var stage;
var world;
var gravityVertical = 15;
var velocityIterations = 8;
var positionIterations = 3;
var stageWidth;
var stageHeight;
var ballImage;
var imageRadius;
var standardRadius = 20;
var floor = new createjs.Rectangle();
function initialize() {
  var canvasElement = document.getElementById("myCanvas");
  var gravity = new Box2D.Common.Math.b2Vec2(0, gravityVertical);
  stage = new createjs.Stage(canvasElement);
  stageWidth = canvasElement.width;
  stageHeight = canvasElement.height;
  floor.width = stageWidth * 0.8;
  floor.x = (stageWidth - floor.width) / 2;
  initializeBox2D(gravity, stageWidth, stageHeight);
  createjs.Ticker.timingMode = createjs.Ticker.RAF;
  preloadImage("images/Pen.png");
}
function initializeBox2D(gravity, stageWidth, stageHeight) {
  world = new Box2D.Dynamics.b2World(gravity, true);
  var floorShape = createStaticFloor(stageWidth / 2, stageHeight - standardRadius, floor.width, standardRadius, "#CCCCCC");
  stage.addChild(floorShape);
}
function tick(eventObject) {
  var delta = eventObject.delta;
  update(delta);
  stage.update();
}
function addBall() {
  var ball = createDynamicBall(stageWidth / 2, -imageRadius, imageRadius);
  stage.addChild(ball);
}
function createDynamicBall(nX, nY, radius) {
  var dynamicBody = Box2D.Dynamics.b2Body.b2_dynamicBody;
  var bodyDef = defineBody(nX, nY, dynamicBody);
  var ball = createVisualBall(radius, bodyDef);
  var circleShape = new Box2D.Collision.Shapes.b2CircleShape(radius * SCALE);
  var fixtureDef = defineFixture(circleShape);
  setFixture(fixtureDef, 1, 0.1, 0.8);
  createBody(world, bodyDef, fixtureDef);
  return ball;
}
function createStaticFloor(nX, nY, nWidth, nHeight, color) {
  var staticBody = Box2D.Dynamics.b2Body.b2_staticBody;
  var bodyDef = defineBody(nX, nY, staticBody);
  var floorShape = createVisualFloor(nWidth, nHeight, color, bodyDef);
  var boxShape = new Box2D.Collision.Shapes.b2PolygonShape();
  var fixtureDef = defineFixture(boxShape);
  boxShape.SetAsBox(nWidth / 2 * SCALE, nHeight / 2 * SCALE);
  createBody(world, bodyDef, fixtureDef);
  return floorShape;
}
function defineBody(nX , nY, bodyType) {
  var bodyDef = new Box2D.Dynamics.b2BodyDef();
  bodyDef.position.Set(nX * SCALE, nY * SCALE);
  bodyDef.type = bodyType;
  return bodyDef;
}
function defineFixture(myShape) {
  var fixtureDef = new Box2D.Dynamics.b2FixtureDef();
  fixtureDef.shape = myShape;
  return fixtureDef;
}
function setFixture(fixtureDef, density, friction, restitution) {
  fixtureDef.density = density;
  fixtureDef.friction = friction;
  fixtureDef.restitution = restitution;
}
function createBody(world, bodyDef, fixtureDef) {
  var body = world.CreateBody(bodyDef);
  body.CreateFixture(fixtureDef);
}
function update(delta) {
  world.Step(delta / 1000, velocityIterations, positionIterations);
  var body = world.GetBodyList();
  while (body) {
    var myObject = body.GetUserData();
    if (myObject) {
      var position = body.GetPosition();
      myObject.x = position.x / SCALE;
      myObject.y = position.y / SCALE;
      myObject.rotation = body.GetAngle()/createjs.Matrix2D.DEG_TO_RAD;
    }
    body = body.GetNext();
  }
}
function createVisualBall(radius, bodyDef) {
  var ball = new createjs.Bitmap(ballImage);
  ball.regX = ballImage.width / 2;
  ball.regY = ballImage.height / 2;
  ball.scaleX = ball.scaleY = radius / imageRadius;
  bodyDef.userData = ball;
  return ball;
}
function createVisualFloor(nWidth, nHeight, color, bodyDef) {
  var floorShape = new createjs.Shape();
  floorShape.regX = nWidth / 2;
  floorShape.regY = nHeight / 2;
  floorShape.graphics
  .beginFill(color)
  .drawRect(0, 0, nWidth, nHeight);
  bodyDef.userData = floorShape;
  return floorShape;
}
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();
}

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書