ETIENU NOTE

matter.jsとは

matter.jsはJavaScriptで作られた物理エンジンライブラリです。

発端と目的

クラウドワークスを見ていると「物理エンジンを使用したメインビジュアルの演出を作ってほしい」といった案件がありました。

参考サイトを見ると、人の絵が四つ、物が降ってきて人に衝突すると跳ねる。跳ねた物も別の物に衝突すると跳ねる・・といった演出がなされていました。(うろ覚え)

物理エンジンを調べてみるとmatter.jsがそれっぽい。

という事で、どういうものか調べた結果沼にはまった記事です。

目的は「サイトのメインビジュアルとして使えるのか？」

matter.jsは何ができる

検索すると日本語の情報も出てきます。

〇や□、シンプルな物体が跳ねまわり、画像でキャラクタを表示しているものもあり、

積み上がったブロックが崩れ去る派手なものもあります。

「簡単に物理シミュレートができます！」「物体が！1000個！衝突します！」

物理エンジン万歳！！

ちがう、そうじゃない

物理エンジンを使うと、どんなサイトが作れるのか？

円判定のフラッピーじゃなくて、人物の複雑な形状とか動かせるのか？

webページの一部として機能するのか？そういう普通の事が知りたい。

でなければ、three.jsやbabylon.jsやunityあたり覚えたほうがまだ意味があります。

本来のmatter.jsの用途については知らないものとする。

試行錯誤した結果できたもの

カフェサイトでメニューを模したアイテムが降ってきて、アイテムをクリックすると人物が商品を紹介。バナーをクリックするとサイトに飛ぶ。

というイメージ。

背景がある

黒単色では困ります。今MS-DOSの時代ではないので。

降ってくる物体をつかんで、種類を判別できる

ゲームオブジェクトように扱えます。

降ってきたものは、一定時間後に消える

個体の管理が可能です。

人物の複雑な判定に対応

労力はかかりますが、角や丸しかできないという事はありません。

掴んで離した際にセリフが出る

ドラッグイベントの管理ができます。商品紹介やゲーム的進行などに使えます。

右上バナーをクリックするとリンクの発生

ページ内アンカーや別ページへ移動できます。

セリフが出る際にキャラの表情( 口 )が変わる

対話的な演出が可能

これにより作品系のメインビジュアルや、ちょっとしたコンテンツを作れそうであると分ります。

サンプルコード

以下のリンクから

githubでコードを見る

zipで素材ごとダウンロード

ファイル構造

• index.html　: ページ
• index.css　　: ページCSS
• [js]▾
  • matter.min.js　　// matter.js本体。リンク先からダウンロードするかコピペして下さい。
  • mymatter.js　　 // 自分のmatterコード
• [img]▾
  • item01-03.png　// 物体
  • logo.png　　　　// リンクが付くロゴ
  • background.jpg　// CSS背景
  • yoyo.png　　　　// キャラクタ
  • yoyo2.png　　　// キャラクタ表情差分

コード解説

長文化した事でmatter.jsの処理が激重(※修正済み)になったので、解説は別ページに分けました。