1. クラウドソーシングTOP
  2. みんなのお仕事相談所
  3. iPhoneアプリでよく見かける物理エンジンについて
みんなのお仕事相談所

「みんなのお仕事相談所」では、ユーザーさまのご依頼の相場や製作期間、
契約書やお金に関する悩みを気軽に相談できるQ&Aコミュニティです。
違反案件についてはよくある質問の「【共通】違反のお仕事とは」をご覧ください。
また、違反報告についてはよくある質問の「【共通】違反報告とは」をご確認ください。

発注者からの相談
その他の相談(発注者)

iPhoneアプリでよく見かける物理エンジンについて

解決済
回答数
4
閲覧回数
3387

iPhoneのアプリ(有名な所ではAngry Birdsなど)でよく見かける、
平面(2D)の物理エンジンを用いた企画を思いついたのですが
わからないことがあるため、教えて頂ければ助かります。

私はプログラムの経験はありませんが、Appleが提供する開発ツールの中に
あのような物理エンジンを比較的簡単に実装できるツールがあることは資料で知りました。

質問は、一般的に2Dの絵の当たり判定はどのように持っているのかということです。
例えばAngry Birdsでの不定形な形の岩などの当たり判定です。

自分では次のどれかかと考えているのですが、実際にやるとしたら方法はどれになるのでしょうか。
1.絵をそのまま判定に使っている
  →例えばグラフィックデータのアルファ(抜き)部分を使って判定しているなど
2.絵と判定を別に持っている
  →グラフィックにあわせた判定を、別途ベジェ曲線のような式で作って持っている
3.絵自体が計算式で描かれ、判定にも使われている
  →イラストレータで作成するようなベジェ曲線で絵を作成し、表示も判定も行っている

このお仕事相談所でこのような技術的な質問をして良いのか疑問ですが
相談できる人間が周りにいないためご容赦ください。
もし問題があるようでしたら取り下げます。
教えて頂けると助かります。

2013年09月09日 01:05

ベストアンサーに選ばれた回答

下田純也さんからの回答

JavaScriptで3Dですがサンプルを作ってみました。
と言っても地面を立方体から球体に改造しただけですが。
http://physics.mydns.jp/

衝突判定で色を変えてます。
衝突判定のコードは下記のとおりです。
----------
object.physics().addEventListener('collision', function(){
var colliColors = [0x0000ff, 0x00ffff, 0x00ff00, 0xff00ff, 0x8ffff00, 0xff0000];
if( ++nCollisions < colliColors.length ){
var color = colliColors[nCollisions];
object.get(0).material.color.setHex( color );
}
})
----------
collisionというイベントを補足して色を変えてます。
跳ね返りは摩擦係数などを指定するだけでエンジン任せです。
2Dも大体同じはずです。答えは「エンジンに任せる」です。

3Dの場合ゴツゴツした岩などは
モデラーで岩を作って読み込ませることになるでしょうね。
2Dのゴツゴツはイメージファイルから判定できると思います。
そういうエンジンを選ぶべきです。

2013年09月09日 22:43
相談者からのお礼コメント

先ほどコメントを返させて頂きましたが
その後に「ベストアンサー」ボタンを押したら再びコメント入力に
なるのですね…

「2Dの物体の形状作成」についての疑問が解消されましたので
ベストアンサーとさせて頂きますね。
改めてありがとうございました。

2013年09月09日 23:25

すべての回答

qsoftさんからの回答

はじめまして。qsoftと申します。

スマホゲームアプリの当たり判定についてですが、
基本的な判定方法は何パターンかあります。

1、一方のの絵の中心と他の絵の中心が重なったら当たり
2、一方の絵の中心と他の絵の一部が重なったら当たり
3、一方の絵の中に他の絵がすっぽり入ってしまったら当たり

などの判定方法があります。

ご参考ください。


2013年09月09日 12:33
qsoftさんからの回答

補足です。

4、一方の絵の一部と他の絵の一部が触れた段階で当たり

というのもありました。

2013年09月09日 12:34
相談者コメント

qsoftさんご回答ありがとうございます。

少々こちらの質問の意図が伝わりにくかったかもしれません。
「当たり判定」と書いてしまったためのこちらの落ち度です、すみません。

当たったかどうかの判定は座標や絵の重なりでできるのは理解します。
上の質問は、跳ね返りなどの物理的な動作のためには当たった部分の形状というか
法線の向きなどが関わってくると思うのですが、そのあたりを知りたくての質問でした。

例えば■の真上から●が落ちてきた場合、垂直に跳ね返ると思いますが
▲の上に落ちた場合は、微妙な位置の違いで右に跳ねたり左に跳ねたりすると思いますし
落ちてくる物体が★のような形状だとまた動作も変わってくると思うのです。

それを物理エンジンで実現する際、物体の形状が重要になってくると思うのですが
仮にAngry Birdsのようなものを作ろうとした場合、ゴツゴツした岩などの物体は
どのように作成するのが一般的・現実的か、という疑問でした。

説明がヘタで申しわけありません、引き続きお願い致します。

2013年09月09日 16:59
下田純也さんからの回答

JavaScriptで3Dですがサンプルを作ってみました。
と言っても地面を立方体から球体に改造しただけですが。
http://physics.mydns.jp/

衝突判定で色を変えてます。
衝突判定のコードは下記のとおりです。
----------
object.physics().addEventListener('collision', function(){
var colliColors = [0x0000ff, 0x00ffff, 0x00ff00, 0xff00ff, 0x8ffff00, 0xff0000];
if( ++nCollisions < colliColors.length ){
var color = colliColors[nCollisions];
object.get(0).material.color.setHex( color );
}
})
----------
collisionというイベントを補足して色を変えてます。
跳ね返りは摩擦係数などを指定するだけでエンジン任せです。
2Dも大体同じはずです。答えは「エンジンに任せる」です。

3Dの場合ゴツゴツした岩などは
モデラーで岩を作って読み込ませることになるでしょうね。
2Dのゴツゴツはイメージファイルから判定できると思います。
そういうエンジンを選ぶべきです。

2013年09月09日 22:43
qsoftさんからの回答

Pecialさん

そういう話しでしたら、Box2Dを使ってみたら十分表現できると思います。

2013年09月09日 23:00
相談者コメント

Jun'yaさんご回答ありがとうございます。
わざわざサンプルまで作って頂いて恐縮です。

リンク先は見れなかったのですが(WebKitというものは落として入れてみたのですが)
イメージファイルから判定できるものなのですね。
それならイメージした絵を作れば良いだけなのでデザイナー作業としては楽ですね。

コードは正直さっぱりわからないのですが(すみません…)
もしこの企画が形になることがありましたらプログラマの方に参考にして頂こうかと思います。

2013年09月09日 23:16
相談者コメント

qsoftさんありがとうございます。

Box2Dですね。
ググってみたところ、いろんなサンプルを見る事ができました。
2Dも3Dもあり、面白そうですね。
自分が考えていたよりもずっといろんなことができそうです。

現在考えている企画を考える上でも参考になりました。
もしプログラマさんに作業をお願いする時が来たらご回答を役立たせて頂きますね。
ありがとうございました。

2013年09月09日 23:20
不安や疑問に真摯に向き合い改善につとめます クラウドワークス安心安全宣言