QuickTiGame2dのBox2Dの機能ちょっと使ってみた
やっと意図通りに動作するクローラー出来たー。後はこいつをさくらVPSで動作させるように設定しないといけないけど、キリがよいから今日はここまでにしよ
— hiroshi oyamada (@h5y1m141) April 2, 2012
と、ここ最近、Rubyでクローラー開発してたので、Titaniumいじるのは、サブ的な感じだったのですが前から気になっていたQuickTiGame2dのBox2Dの機能ちょっと使ってみました。
QuickTiGame2dのBox2Dの機能を使うのに参考にした情報
Box2D自体、たしかC++の物理演算ライブラリだったように記憶してますが、他の言語で利用できるように移植されているようで、特にFlashのActionScript向けのやつとか、JavaScript向けの情報とかを読みつつ、後は以前達人出版会でポチったはじめる! Box2DJSを参考に概念についてまずは基礎的な所をおさえました。
ボールが単に落下するだけのサンプル
自分の探し方が悪いのかもしれませんが、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つとるのかよくわからずに、適当に数値をいじっていたのですが、x方向、y方向に対しての重力がかかるかどうかを設定するために2つ引数必要みたいですね。(ここ理解甘いので間違ってるかも。。。)
2)と3)はそれぞれ密度、反発係数というのを、gihyoのFlash/ActionScriptのサンプルソースの記事を読んで理解しました。
restitutionの値を大きくすると、当然ボールの跳ね返りがすごくなる(ためしに2.8とかにしたら上下にガンガン激しくぶつかりました)
4) のtypeの値は「dynamic」「static」のいづれかを設定するみたいです。最初これが理解できなかったのですが、staticを設定することで重力の影響を受けず、x,y,zに設定した所に「固定」されるようです。
反対にdynamicを設定すると重力の影響を受けるので、例えば今回のようなボールのようなオブジェクトにはこのdynamicを設定する必要があるみたいです
5) setAngle。マイナスの値を入力することで、画面下に配置した地面が右肩下がりに配置されます
実際の動作画面
iPhoneシミュレーター上でキャプチャーとりましたが、こんな感じで動作します