Blog

物理エンジン「Matter.js」でCanvasアニメーションの質感をアップさせる

2016.12.06Cat:Canvas html5 デザイナー
nino-eye

スマートフォンやタブレット端末の普及により、
Webページでは、使用感の向上のためにアニメーションの必要性が増しています。

しかも、使用感向上のためには、時間を埋めるためのアニメーションではなく、
普段現実で体験する動きの再現することで、ストレスを感じさせないことが重要になってきます。

そこで自然な動きを再現する物理エンジンが必要となる場合が出てきます。

Matter.jsを使うと、Canvasに簡単に物理エンジンを導入することができます。
Matter.jsは数あるJavaScriptの物理エンジンAPIの中では軽量で、
スマホなどでも軽快に動作するというメリットがあります。

以前もご紹介したことがありますが、2016年時点で、推奨される使用方法が以前と変わっていたので、
改めて導入の基本を調べてみました。

↓簡単なDEMO
DEMO

↓おまけのDEMO
DEMO

以前もご紹介したことがありますが、
若干APIの仕様が変わっていましたので、改めてご紹介いたします。

導入方法

手順

  1. Matter.jsをダウンロードして、HTMLに読み込む
  2. Canvasを設置する要素を準備
  3. Matter.jsの基本設定
  4. 要素を作成してMatter.jsのWorldに追加
  5. 物理エンジン・描画を開始

1. Matter.jsをダウンロードして、HTMLに読み込む

公式サイトの「Clone or Download」というボタンから、Download ZIPを選択してファイルをダウンロードします。

ダウンロードしたファイルの「build」というフォルダに「matter.min.js」が入っているので、
こちらをサイトに設置して、以下のようにHTMLで読み込みます。

2. Canvasを設置する要素を準備

Matter.jsでは、指定した要素にCanvasを追加することで物理エンジンを実装しますので、Canvasを設置する要素を予め準備しておきます 。
body直下に直接設置する場合は、準備する必要はありません。

3. Matter.jsの基本設定

いよいよ、Matter.jsのAPIを使っていきます。

まず、Matter.jsの基本的なAPIを呼び出します。

以前はEngineとRenderはEngineにまとめられていましたが、今は別々に分けて使うことが推奨されています。

次にEngineとRenderを生成します。

Renderの生成での設定は、以前はEngineの設定で行われていましたが、
将来的に、Engine内ではこの設定が廃止されるようなので、今後はこのように設定する必要があります。

Render.create()のオプションは以下のサイトでご紹介いただいていました。

Matter.js に入門してみる – Matter.Engine クラス

要素をマウスやタッチで操作できるようにしたい場合は、以下のコードを記述します。

デフォルトではマウス操作の様子が線として描画されるため、表示したくないときはconstraint.render.strokeStyleを透明色にします。

4. 要素を作成してMatter.jsのWorldに追加

Matter.jsでは、BodiesというAPIで基本的な図形の要素を生成することができます。

optionsは以下のサイトでご紹介いただいていました。

Matter.js に入門してみる – Matter.Body クラス

生成した要素はWorld.add()でWorldに追加する必要があります。

まとめて追加したい場合は、以下のように配列で追加することも可能です。

重力を操作したい場合は、以下のように指定することで重力を変更できます。

5. 物理エンジン・描画を開始

最後にEngine.run()とRender.run()を実行すれば、描画が開始されます。

matter-js 0.11.0 Physics Engine API Docs

詳細な使用方法は上記の公式Documentで確認できますが、
あまり親切とはいえない構成なので、

初めは以下のwikiを参考にすることをオススメいたします。

Home · liabru/matter-js Wiki · GitHub

おまけ

DEMO

スマホやタブレットの場合、
傾きのセンサーと重力の方向を合わせることで、
傾きに応じた自然な動きを実装することもできます。

参考サイト

Matter.js に入門してみる – Matter.Engine クラス

Matter.js に入門してみる – Matter.Body クラス

matter-js 0.11.0 Physics Engine API Docs

Home · liabru/matter-js Wiki · GitHub

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ