BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. コーディング(html/css/JavaScript)
  5. 物理演算エンジンMatter.jsを触ってみた
by 稲垣 稲垣

物理演算エンジンMatter.jsを触ってみた

物理演算エンジンMatter.jsを触ってみた

こんにちは稲垣です。

昨年末に流行ったどうぶつタワーバトル、遊んだ方も多いのではないのでしょうか?

上から落ちてくるどうぶつ写真に、実際に重みがあるかのような動きがおもしろいですよね。

そこで今回はmatter.jsという物理演算エンジンを触ってみました。

matter.jsとは?

matter.jsは物理演算を簡単に使うことができるようになるJavascriptのライブラリです。

物理演算を自力で行おうとすると、専門知識や時間が必要になりものすごい労力がかかるのですが、これを使うことによってJavascriptを使ったサイトやゲームでより手軽に面白い表現が実装できるようになります。

今まで物理演算のライブラリはBox2Dくらいしか知らなかったのですが、matter.jsは非常に軽量でスマートフォンでも問題なく動作するそうです。

サンプルもたくさん載っておりデモ画面を触るだけでも楽しいのでぜひ覗いてみてください。

matter.jsを使ってみる

公式サイトからダウンロードしたサンプルのソースを見ながら、画面に図形を置いてみたいと思います。

まずはmatter.jsをダウンロードしてファイルに読み込ませておきましょう。

次に最低限必要だと思われる記述を入れます。

入れてるコメントがあやふやなのはきちんと理解する力量がないためです…。

ここに次のように記述して図形を配置してみます。

図形作成時の引数で以下のように初期配置場所とサイズを指定しています。

他にも摩擦やバウンドなど、様々なオプションを設定できるようです。

ここまでの記述で以下のようなものができます。

上から落ちてきた物体がただ下に落ちていくだけなので、ステージ場に留まらせるために床を追加してみます。

isStaticは物体を固定表示させるかどうかの設定で、これを設定しないとせっかく作った床も他の図形と同じように地の底に落ちてしまいます。

床を追加すると下記のように丸と四角がステージ場にとどまります。

見やすいようにgifアニメで書き出したのでカクついてますが、ブラウザで実際のものを見ると滑らかに動いてくれます。

バウンドするオブジェクトに画像を貼り付けてみる

先程のサンプルに手を加えて、マグネッツのロゴがバウンドするアニメを作ってみようと思います。

四角のオブジェクトは削除してmaruに新たなオプションを追加します。

あと数値の比較ができるようにもう一つ円オブジェクトを追加しました。

オブジェクトのカラーは決まっているデフォルトカラーの中から自動で選ばれるようなのですが、自分で設定もできます。

バウンドさせるオプションにはrenderを使うそうなので、左には1、右には2を設定してみました。

バウンドの高さが変わるだけで一定時間後にはどちらも動かなくなると思ってたのですが、右側の円はいつまでもバウンドするどころか、段々床に戻ってくる時間が長くなっていました。

バウンドする力が強いため、元の高さより高い位置まであがり、そこから落下するため落下速度もあがってさらに力強くバウンドするということでしょうか…?

きちんと物理法則に則った動きをしていてなんだかすごくワクワクしました。

ただの色のついた円だと味気がないので、ここに同じ形をしている弊社のロゴ画像を貼り付けてみようと思います。

画像を貼り付けるには、先程のrenderの中にspriteを設定しテクスチャ画像の指定をします。

ロゴ画像がバウンドするようになりました!

もともと設定していた線の色などはテクスチャを設定すると反映されなくなるようです。

作成したオブジェクトと画像のサイズが合わないと上のgifのように地面にめり込んだ状態となるので気をつけてください。(テクスチャのサイズを指定するオプションなどがあるのかもしれませんが理解が足らず…)

マウスで掴んで振り回したい

今までただ出来上がったサンプルを眺めるだけでしたが、物理演算エンジンというとマウスで掴んで他の物体を跳ね飛ばしたりするサンプルをよく見かけます。

私はあれが大好きで、特に意味もなく更新ボタンを押しては跳ね飛ばしてを繰り返してニヤニヤします。

というわけで、今作っているサンプルもマウスで掴めるようにしようと思います。

上記の記述をサンプルに追加しました。

下段部分は、Render.create()の後ろに記述しないと駄目みたいです。

ロゴを掴んでもう一方のロゴにぶつけられるようになりました!

画面にロゴを敷き詰めたい

見出しの通り、マウスで振り回せるロゴを画面いっぱいに敷き詰めてみようと思います。

複数のオブジェクトを作る時はMatter.Compositesというものを使うみたいです。

以下追加したソースです。

実行するとこのようになります。

ロゴとぶつかって崩れるためちょっとわかりにくいのですが、Composites.stackで設定した引数は

(X, Y, 列数, 行数, ?, ?, オブジェクトの設定)

という感じでしょうか?

第5と第6の数値が何を制御しているのかよく分かりませんでした…。

しかしこれで複数図形を置くことには成功したので、あとはオブジェクトのBodies.rectangleの設定を変更すればロゴ画像を敷き詰められると思います!

先程の

の部分を

に変更すると

ロゴを敷き詰めることができました!

床に設定しているオブジェクトが届かない部分から溢れていくのが気になる場合は、床と同じ要領で左右に壁を設置してあげれば良さそうですね。

最後に

以上、いかがでしたでしょうか?

flashでアニメーションを作成した時期から気になっていたものの、手を付けれずにいたのでこの記事を機に触ることができて個人的には大満足しました。

本当に触りの部分しかできませんでしたが、もう少し理解を深め簡単なゲームを作れるようになったらまた何かご紹介したいと思います!

マグネッツとは?
福岡でWEB制作や中小企業様の集客支援などを行っている会社です。
新着情報配信中!
商用利用OK&無料!総合素材サイト|ソザイング
ページの先頭に戻る