PhySprite.enchant.jsに多角形とジョイントを追加しました。

PhySprite.enchant.jsに機能を追加しました。

PhySprite.enchant.jsのダウンロード
ダウンロード
リファレンス

今までのPhySprite.enchant.jsには円形と四角形しか物理オブジェクトをサポートしていませんでした。

今回は多角形を追加し、さらにオブジェクトにImageを設定しなくても形がわかるDebugDraw機能をつけました。

これで多角形の物体のように画像が用意しずらいオブジェクトでもわかりやすくなりました。


・多角形
ではまず、多角形の説明からします。

多角形のオブジェクトを生成するには以下の関数を用いる

   
enchant.PhyPolygonSprite(width, height, vertexs, type, density, friction, restitution, awake)

多角形の物理シミュレーション用Sprite

引数は以下の通り

Parameters:

{Number} width Optional

Spriteの横幅.

{Number} height Optional

Spriteの高さ.

{b2Vec2[]} vertexs

多角形の頂点配列

{Boolean} type Optional

静的,動的,キネマティック

{Number} density Optional

Spriteの密度.

{Number} friction Optional

Spriteの摩擦.

{Number} restitution Optional

Spriteの反発.

{Boolean} awake Optional

Spriteが初めから物理演算を行うか.

ここで新しく追加されたvertexsですが、これは多角形の頂点配列です。

どういうものかというと、例えば四角形の場合のvertexsは

   
var width = 20;
var height = 50;
var vertexs = new Array(
    new b2Vec2(-width / 2, -height / 2),
    new b2Vec2(width / 2, -height / 2),
    new b2Vec2(width / 2, height / 2),
    new b2Vec2(-width / 2, height / 2));
var phyPolygonSprite = new PhyPolygonSprite(width, height, vertexs, DYNAMIC_SPRITE, 1.0, 0.1, 0.2, true);
game.rootScene.addChild(phyPolygonSprite); // シーンに追加

このように四角形を作る
vertexsはSpriteの中心座標を(0,0)として時計回り・または反時計回りに宣言していく。

では次に五角形を生成してみます。
次は簡略化のためfor文を使います。

 
var vertexCount = 5;
var radius = 20;
var vertexs = new Array();
for (var i = 0; i < vertexCount; i++) {
vertexs[i] = new b2Vec2(radius * Math.cos(2 * Math.PI / vertexCount * i), radius * Math.sin(2 * Math.PI / vertexCount * i));
}
var phyPolygonSprite = new PhyPolygonSprite(radius * 2, radius * 2, vertexs, DYNAMIC_SPRITE, 1.0, 0.1, 0.2, true);
game.rootScene.addChild(phyPolygonSprite); // シーンに追加

これで五角形を作ることができました。
vertexCountを変更することで三角形でも七角形でも百角形でも可能です。


ここで注意することは、頂点と頂点と間に交点ができてしまうとうまく当たり判定がおかしくなるので気をつけて下さい。



・ジョイント
では次はジョイントの説明

ジョイントは複数のタイプがあります。

enchant.PhyDistanceJoint(sprite1, sprite2)

距離ジョイント

enchant.PhyRevoluteJoint(axis, sprite)

物体と物体のモーター付きジョイント

enchant.PhyPrismaticJoint(sprite1, sprite2, anchor1, anchor2, ratio)

スライドジョイント

 

enchant.PhyPulleyJoint(sprite1, sprite2, anchor1, anchor2, ratio)

滑車ジョイント

1つ1つ説明していきます。

enchant.PhyDistanceJoint(sprite1, sprite2)

距離ジョイント

Parameters:

{enchant.PhySprite} sprite1 Optional

繋げるスプライト1

{enchant.PhySprite} sprite2 Optional

繋げるスプライト2

 これは最も単純なジョイントです。

 引数の2つのスプライトをジョイントで繋げます。

例

   
//軸
var axis = new PhyCircleSprite(8, STATIC_SPRITE);
axis.position = { x: 160, y: 160 };
game.rootScene.addChild(axis); // シーンに追加
//ボール生成
var ball = new PhyCircleSprite(8, DYNAMIC_SPRITE);
ball.position = { x: 100, y: 250 };
game.rootScene.addChild(ball); // シーンに追加
//距離ジョイント
var joint = new PhyDistanceJoint(axis, ball);

ここでは簡略化のため、物理オブジェクトのパラメータを書いていません。

この場合、 density=1.0,friction=0.5,restitution=0.3,awake=trueがデフォルトの値となります。

未定義でもいいってのはここで初めて説明したのかな？

で、この例ではaxisという静止オブジェクトにballがぶら下がっています。


では次

 

enchant.PhyRevoluteJoint(axis, sprite)

物体と物体のモーター付きジョイント

Parameters:

{enchant.PhySprite} axis Optional

軸となるスプライト

{enchant.PhySprite} sprite Optional

繋げるスプライト

これは軸(axis)にモーターを設けることができるジョイントです。

例

   
//軸
var axis = new PhyCircleSprite(8, STATIC_SPRITE);
axis.position = { x: 160, y: 160 };
game.rootScene.addChild(axis); // シーンに追加
//ボール生成
var ball = new PhyCircleSprite(8, DYNAMIC_SPRITE);
ball.position = { x: 100, y: 250 };
game.rootScene.addChild(ball); // シーンに追加
//距離ジョイント
var joint = new PhyRevoluteJoint(axis, ball);
joint.enableMotor = true;
joint.maxMotorTorque = 100;
joint.motorSpeed = 90;

PhyDistanceJointとの違いはenableMotorでモーターを有効化しなければいけないことと
maxMotorTorqueでモーターのトルクを設定します。
 トルクとは
そしてmotorSpeedでモーターの速度を設定することで、axisに接続されたballが動き出します。

モーター機能を有効にしていないとPhyDistanceJointと変わりません。

enchant.PhyPrismaticJoint(sprite1, axis)

スライドジョイント

Parameters:

{enchant.PhySprite} sprite1 Optional

繋げるスプライト1

{b2Vec} axis Optional

軸

スライドオブジェクトは文字どおりスプライトをスライドさせます。

例

var box = new PhyBoxSprite(16, 8, DYNAMIC_SPRITE, 1.0, 0.5, 0.2, true);
box.position = { x: game.width * 2 / 3, y: game.height / 2 };
var prismaticAxis = new b2Vec2(1.0, 0);   //x軸にスライドを設定(右が正の値)
//スライドジョイント
var prismaticJoint = new PhyPrismaticJoint(box, prismaticAxis);
//スライドオブジェクトにモーター機能を持たせる場合
//prismaticJoint.enableMotor = true;      //モータの有効化
//prismaticJoint.maxMotorForce = 100.0;   //モータの最大力を設定
//prismaticJoint.motorSpeed = 50;         //モータの速度を設定

引数のaxisはスライドさせる軸です。

右方向を正としてx軸にスライドさせる場合はaxis = new b2Vec2(1.0, 0);とします。

また、このジョイントにはモーター機能が備わっており、 モータを有効化し最大力を設定することでモータ機能を使うことができます。

enchant.PhyPulleyJoint(sprite1, sprite2, anchor1, anchor2, ratio)

滑車ジョイント

Parameters:

{enchant.PhySprite} sprite1 Optional

繋げるスプライト1

{enchant.PhySprite} sprite2 Optional

繋げるスプライト2

{b2Vec2} anchor1 Optional

アンカー1の位置

{b2Vec2} anchor2 Optional

アンカー2の位置

{Number} ratio Optional

左右のバランス

滑車オブジェクトはアンカーを2つ設定し、スプライトを吊り下げることができます。

例

var ball1 = new PhyCircleSprite(8, DYNAMIC_SPRITE);
ball1.position = { x: 80, y: 160 };
var ball2 = new PhyCircleSprite(8, DYNAMIC_SPRITE);
ball2.position = { x: 240, y: 160 };
//滑車ジョイント
var pulleyJoint = new PhyPulleyJoint(ball1, ball2, new b2Vec2(80, 100), new b2Vec2(240, 100), 1);

以上で簡単な説明を終わります。

正直、文字で読むよりプログラムを読んだほうがわかりやすいような気がするので、サンプルプログラムをダウンロードして読んでみてください。（説明書くのがめんどくさいわけじゃないんだからね）

 多角形,ジョイントサンプル - PhySprite.enchant.js

サンプルダウンロード