Blog

「Matter.js」を使ってCanvasの物理演算をやってみました

2014.11.05Cat:Canvas javascript デザイナー

Canvasなどでのアニメーションでは、物理演算を行うことができれば、

より面白い演出が可能となり、表現の幅も広がるので是非やってみたいものではありますが、

物理演算を自力で行おうとすると、それなりの専門知識と時間・労力が必要となります。

 

ただ、この物理演算をより簡単に行うことができるようになるJavaScriptのAPIがいくつか提供されています。

「Box2DWeb」というAPIが、Flashの時代から重宝され、JavaScript版も公開されており、

使い方が説明されたサイトも多くあるのですが、

若干ファイルが重い(ver.2.1.a.3のminify版で225KB)という問題もあります。

 

そこで他にもないかと探していたところ、

Matter.js」という物理演算APIが軽量(ver.0.8.0のminify版で54KB)で使いやすそうでしたので、

実際にこのAPIを使ってCanvasの物理演算を行ってみました。

 

↓作ってみたもの

DEMO

 

 方法

1.「Matter.js」のプロジェクトサイトからAPIをダウンロードします。

Matter.js

「Minified Version」というリンクをクリックして、ダウンロードします。

 

2.HTMLを準備する

ダウンロードしたファイルを読み込み、

Canvasを設置する場所を用意します。

今回は「canvas-container」というIDの<div>を用意しました。

また、canvasの背景はAPIの設定でもできるのですが、多少自由が効かない部分がありましたので、

CSSで「!important」をつけて設定しました。

 

3.「Matter.js」のAPIの設定をする

API設定の大きな流れとしては、

  1. Matter APIの主要なモジュール(メソッド)を初期化
  2. 物理演算を行う空間の準備
  3. 演算する物体の設置
  4. 物理演算の実行

となります。

 

円、長方形などの基本的な図形はあらかじめ用意されていますし、

パスで図形を作ることもできます。

それぞれの物体に画像をテクスチャとして貼付け、スプライトを設定することもできます。

また、マウスの操作も、

この3行だけで実装できるので、とても簡単です。

 

また、物理演算は多くの演算処理を必要とするため、

複雑なものになってくると処理が遅くなってしまう可能性が高くなりますが、

「Matter.js」ではレンダリングの方法として、通常のCanvasだけでなく、WebGLを指定することもできるため、

対応している端末ではCPUではなくGPUで演算処理を行うWebGLの特性を利用して、

演算処理を速くして、動作を軽くすることもできます。

 

参考にさせていただいたサイト

Matter.js でゴゴゴとドドドを物理演算してみるテスト – CX’s Hatena Blog

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ