phina.jsDay 11

【phina.js】Physicalクラスを使ってみよう

More than 3 years have passed since last update.

本記事はphina.js Advent Calendar 2015の11日目の記事です。

@daishi_hmrさん 前 ← → 後 @minimoさん


はじめに

phina.jsにはPhysicalという物理運動に似せた動きをオブジェクトに簡単に適用できるクラスが用意されています。今回は、この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クラスのメンバ

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


velocity


  • velocity.x ・・・ x方向の速さ

  • velocity.y ・・・ y方向の速さ

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

physical.velocity.x = 4;

physical.velocity.set(4, 8);
physical.force(0, 4);


gravity


  • gravity.x ・・・ x方向の重力

  • gravity.y ・・・ y方向の重力

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

physical.gravity.y = 4;

physical.gravity.set(4, 8);


friction


  • friction ・・・ 摩擦度

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

physical.friction = 0.98;


まとめ

最後にPhysialクラスを使ったサンプルを紹介します。

本来の正確な物理運動ではありませんが、それらしい動きになっているのがお分かりになるかと思います。

image

サンプルコード(runstant)