🐦

[phina.js]Physicalクラスでオブジェクトを動かす

2022/07/10に公開

はじめに

phina.jsにはPhysicalという物理運動に似せた動きをオブジェクトに簡単に適用できるクラスが用意されています。今回は、このPhysicalについて簡単に説明したいと思います。

Physicalクラスは、Accessoryというクラスを継承しています。
使用する際には、Shapeなどのオブジェクトにアタッチ（取り付け）する必要があります。

以下は、CircleShapeにアタッチする例です。

var circle = CircleShape().addChildTo(this);
var physical = Physical().attachTo(circle);

もしくは、以下のようにオブジェクトのプロパティとして明示的にphysicalを設定すると、バックグラウンドでアタッチされます。

var circle = CircleShape().addChildTo(this);
circle.physical.gravity.set(0, 0.5);

上記の場合、オブジェクト変数名.physicalでプロパティにアクセスできるようになります。特段の理由がない限りは、手軽なこちらのアタッチ方法をお薦めします。

Physicalクラスのメンバは、以下のとおりとなっています。

xとyそれぞれ個別、velocity.set(x, y)による一括指定、force(x, y)メソッドによる指定ができます。addForce(x, y)で加速させることもできます。

physical.velocity.x = 4;
physical.velocity.set(4, 8);
physical.force(0, 4);
physical.addForce(0.5, 0);

xとyそれぞれ個別、gravity.set(x, y)による一括指定ができます。

physical.gravity.y = 4;
physical.gravity.set(4, 8);

デフォルト値は1.0です。0に近づくほど摩擦が強くなりますので、設定の際は注意してください。xとy方向、双方に適用されます。

physical.friction = 0.98;

最後にPhysialクラスを使ったサンプルを紹介します。
本来の正確な物理運動ではありませんが、それらしい動きになっているのがお分かりになるかと思います。