QuickTiGame2dのBox2Dの機能ちょっと使ってみた

やっと意図通りに動作するクローラー出来たー。後はこいつをさくらVPSで動作させるように設定しないといけないけど、キリがよいから今日はここまでにしよ

— hiroshi oyamada (@h5y1m141) April 2, 2012

と、ここ最近、Rubyでクローラー開発してたので、Titaniumいじるのは、サブ的な感じだったのですが前から気になっていたQuickTiGame2dのBox2Dの機能ちょっと使ってみました。

QuickTiGame2dのBox2Dの機能を使うのに参考にした情報

Box2D自体、たしかC++の物理演算ライブラリだったように記憶してますが、他の言語で利用できるように移植されているようで、特にFlashのActionScript向けのやつとか、JavaScript向けの情報とかを読みつつ、後は以前達人出版会でポチったはじめる！ Box2DJSを参考に概念についてまずは基礎的な所をおさえました。

TitaniumMobileで利用できるモジュールがあるようで、それを使った
こちらのブログもあわせて参考にしました

ボールが単に落下するだけのサンプル

自分の探し方が悪いのかもしれませんが、QuickTiGame2dのBox2DについてのAPIReference見つからなかったので、QuickTiGame2dのサンプルアプリのQuickTiBallのソースコードをまず読みました。

その上で、ひとまずボールが上から下に落ちるサンプルをこんな感じで作ってみました。

var win = Ti.UI.createWindow();
var quicktigame2d = require("com.googlecode.quicktigame2d");
var gameBoard = quicktigame2d.createGameView();
var scene = quicktigame2d.createScene();
var world = quicktigame2d.createBox2dWorld({surface: gameBoard});

gameBoard.pushScene(scene);
gameBoard.fps = 30;
world.setGravity(0.0, 25.0); // (1)

var baseSprite = quicktigame2d.createSprite({
  image:'graphics/ground.png',
  x : 0,
  y : 940,
  z : 1
});

var ball1 = quicktigame2d.createSprite({
  width : 50,
  height : 50,
  image:'graphics/ball.png',
  x : 50,
  y : 10,
  z : 1
});

var underWall = world.addBody(baseSprite, {
  density : 12.0,     // (2)
  friction : 0.8,     
  restitution : 0.8,  // (3)
  type : "static"      // (4)
}); 

underWall.setAngle(-0.02);   // (5)

var yellowBall = world.addBody(ball1, {
  radius : 30,
  density : 1.0,
  friction : 0.9,
  restitution : 0.2,
  type : "dynamic"
});

var leftWall = world.addBody(quicktigame2d.createSprite({
  alpha : 0.0,
  width : 2,
  height : 920,
  x :  4,
  y : 40,
  z : 1
}), {
  density : 10.0,
  friction : 0.3,
  restitution : 0.4,
  type : "static"
});

var rightWall = world.addBody(quicktigame2d.createSprite({
  alpha : 0.0,
  width : 2,
  height : 920,
  x :  470,
  y : 40,
  z : 1
}), {
  density : 10.0,
  friction : 0.3,
  restitution : 0.4,
  type : "static"
});

var topWall = world.addBody(quicktigame2d.createSprite({
  alpha : 0.0,
  width : 480,
  height : 1,
  x : 5,
  y : 5,
  z : 1
}), {
  density : 10.0,
  friction : 0.3,
  restitution : 0.4,
  type : "static"
});
gameBoard.addEventListener('onload', function(e) {
  gameBoard.start();
  world.start();
});
win.add(gameBoard);
win.open();

作っていて最初はまった所

いくつかわからないながら作ったので、上記ソース内で数字ふった所を以下順番にまとめておきます

1)のsetGravityですが、なんで引数２つとるのかよくわからずに、適当に数値をいじっていたのですが、ｘ方向、ｙ方向に対しての重力がかかるかどうかを設定するために２つ引数必要みたいですね。（ここ理解甘いので間違ってるかも。。。）

2)と3)はそれぞれ密度、反発係数というのを、gihyoのFlash/ActionScriptのサンプルソースの記事を読んで理解しました。

restitutionの値を大きくすると、当然ボールの跳ね返りがすごくなる（ためしに2.8とかにしたら上下にガンガン激しくぶつかりました）

4) のtypeの値は「dynamic」「static」のいづれかを設定するみたいです。最初これが理解できなかったのですが、staticを設定することで重力の影響を受けず、x,y,zに設定した所に「固定」されるようです。

反対にdynamicを設定すると重力の影響を受けるので、例えば今回のようなボールのようなオブジェクトにはこのdynamicを設定する必要があるみたいです

5) setAngle。マイナスの値を入力することで、画面下に配置した地面が右肩下がりに配置されます

実際の動作画面

iPhoneシミュレーター上でキャプチャーとりましたが、こんな感じで動作します

今後にむけて

本当はこんな感じのブロック崩し作ってみようかと思ったけど、スライドバーの配置＆移動方法とかどうやればいいのかわからずに、挫折・・もうちょっと調べてみて気が向いたら頑張って作ってみるかも