JavaScriptで物理演算エンジンを使ったプログラムを解説〜図形の作成〜【matter.js】

2020年5月19日プログラムJavaScript,プログラムサンプル

【サンプルコード】JavaScriptで物理演算エンジンのmatter.js〜図形の作成〜
【サンプルコード】JavaScriptで物理演算エンジンのmatter.js〜図形の作成〜

JavaScriptで物理演算エンジンを簡単に実装出来るMatter.jsの紹介です。今回はMatter.jsを使って四角形や円などの図形を追加するデモプログラミングのサンプルコードを解説します。

JavaScriptのMatter.jsでプログラミングするにあたって、以下の記事を参考にしました。

Matter.js
【勉強】JavaScriptで物理演算エンジンのMatter.js〜円を生成〜【プログラミング初心者の入門講座】#StudyWithMe
【勉強】JavaScriptで物理演算エンジンのMatter.js〜四角形を生成〜【プログラミング初心者の入門講座】#StudyWithMe

【サンプルコード】JavaScriptで物理演算エンジンのMatter.jsのサンプルコード

JavaScriptのMatter.jsは、物理演算エンジンを使ったプログラミングを簡単に実装することが出来ます。ここではMatter.jsを使った簡単なサンプルコードを紹介します。

<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Matter.js Circle Sample</title>
</head>
<body>
    <div id="demo-canvas"></div>
    <script src="jquery-1.10.2.min.js"></script>
    <script src="matter.js"></script>
    <script>
        // Matter Module
        var Engine = Matter.Engine,
            World  = Matter.World,
            Bodies = Matter.Bodies;

        // Canvas Window Width Height
        var width  = window.innerWidth - 50;
        var height = window.innerHeight - 50;

        var demoCanvas = document.getElementById('demo-canvas');

        // Matter Engine
        var engine = Engine.create(demoCanvas, {
            render: {
                options: {
                    wireframes: true,
                    showVelocity: true,
                    width: width,
                    height: height,
                    background: 'rgba(0, 0, 0, 0)'
                }
            },
        });

        // Make Bottom Wall(Rectangle)
        var wallBottom = Bodies.rectangle(
            0,
            height,
            (width * 2) + 10,
            10,
            {
                isStatic: true
            }
        );

        // Make Rectabgle
        var rectangle = Bodies.rectangle(
            Math.floor( Math.random () * width),
            50,
            150,
            150,
            {
                isStatic   : false,
                density    : 1.5,
                friction   : 0.7,
                restitution: 0.5,
                chamfer: {
                    radius: [
                        1, 1, 1, 1
                    ]
                },
            }
        );

        // Make Circle
        var circle = Bodies.circle(
            Math.floor( Math.random () * width),
            50,
            100,
            {
                isStatic   : false,
                density    : 1.5,
                friction   : 0.7,
                restitution: 0.5,
                chamfer: {
                    radius: [
                        1, 1, 1, 1
                    ]
                },
            }
        );

        // World Objects
        World.add(
            engine.world,
            [
                wallBottom, rectangle, circle
            ]
        );

        // Matter Run
        Engine.run(engine);

    </script>

</html>

【サンプルコード】JavaScriptで物理演算エンジンのMatter.jsのサンプルコードを解説

JavaScriptのMatter.jsを使ったサンプルコードの解説をします。

HTML部分

HTML部分を解説します。

Matter.jsで描画するタグを用意

Matter.jsで描画するタグを用意します。

<div id="demo-canvas"></div>

JQueryを読み込む

JQueryを読み込みます。

<script src="jquery-1.10.2.min.js"></script>

Matter.jsを読み込む

Matter.jsを読み込みます。

<script src="matter.js"></script>

Matter.jsは「https://brm.io/matter-js/」か「https://github.com/liabru/matter-js」から取得します。

JavaScript部分

次にJavaScript部分の解説をします。

Matter Module を作成

Matter.jsの処理で利用するモジュールを用意します。

var Engine = Matter.Engine,
    World  = Matter.World,
    Bodies = Matter.Bodies;
  • Matter.Engine
  • Matter.World
  • Matter.Bodies

Canvas Window幅

ウィンドウの表示幅を取得します。

var width  = window.innerWidth - 50;
var height = window.innerHeight - 50;

描画Elementを取得

描画するElementのIDの"demo-canvas"を指定して取得します。

var demoCanvas = document.getElementById('demo-canvas');

Matterエンジンを作成

Matterエンジンを作成します。

var engine = Engine.create(demoCanvas, {
    render: {
        options: {
            wireframes: true,
            showVelocity: true,
            width: width,
            height: height,
            background: 'rgba(0, 0, 0, 0)'
        }
    },
});
  • Engine.create
    • render
      • options
        • wireframes：ワイヤーフレームモード
        • showVelocity：動力ベクトル
        • width：横幅
        • height：縦幅
        • background：背景色

ドキュメント：matter.js – Engine

地面を作成

Bodies.rectangle()で地面を作成します。

var wallBottom = Bodies.rectangle(
    0,
    height,
    (width * 2) + 10,
    10,
    {
        isStatic: true
    }
);
  • Bodies.rectangle
    • 第1引数：X
    • 第2引数：Y
    • 第3引数：横幅
    • 第4引数：縦幅
    • 第5引数：オプション
      • isStatic：(固定表示:true)

ドキュメント：matter.js – Bodies rectangle

四角形を作成

Bodies.rectangle()で四角形を作成します。

var rectangle = Bodies.rectangle(
    Math.floor( Math.random () * width),
    50,
    150,
    150,
    {
        isStatic   : false,
        density    : 1.5,
        friction   : 0.7,
        restitution: 0.5,
        chamfer: {
            radius: [
                1, 1, 1, 1
            ]
        },
    }
);
  • Bodies.rectangle
    • 第1引数：X
    • 第2引数：Y
    • 第3引数：横幅
    • 第4引数：縦幅
    • 第5引数：オプション
      • isStatic：(固定表示:true)
      • density：質量
      • friction：摩擦
      • restitution：跳ね返り
      • chamfer：
        • redius：

円を作成

Bodies.circle()で円を作成します。

var circle = Bodies.circle(
    Math.floor( Math.random () * width),
    50,
    100,
    {
        isStatic   : false,
        density    : 1.5,
        friction   : 0.7,
        restitution: 0.5,
        chamfer: {
            radius: [
                1, 1, 1, 1
            ]
        },
    }
);
  • Bodies.circle：
    • 第1引数：X
    • 第2引数：Y
    • 第3引数：redius(半径)
    • 第4引数：オプション
      • isStatic：(固定表示:true)
      • density：質量
      • friction：摩擦
      • restitution：跳ね返り
      • chamfer：
        • redius：

ドキュメント：matter.js – Bodies circle

地面や四角形、円を世界へ投入

先ほど作成した地面や四角形、円などの図形を物理演算エンジンの世界へ追加します。

World.add(
    engine.world,
    [
        wallBottom, rectangle, circle
    ]
);
  • World.add：
    • 第1引数：world
    • 第2引数：オブジェクト

ドキュメント：matter.js – World add

Matterエンジン起動

Matterエンジンを起動します。

Engine.run(engine);

ドキュメント：matter.js – Engine.run

おわり

JavaScriptのMatter.jsを使うと物理演算エンジンを簡単に利用して、実装することが出来ます。今回は図形の作成だけ紹介しましたが、イベント処理なども簡単に定義することが出来ます。今後紹介できれば解説記事を投稿します！

＼プログラミングスクール受講メリット／

・メンターにすぐ聞けるので分からないところでつまづかない
・受講生同士で学び合いモチベーション維持しやすい
・就学後に就職支援や進路サポートを受けることが出来る

＼現役エンジニアによるサポート就職支援／
[ TechAcademy ]
の特徴・料金を確認
ユート
ユート

1985年生まれ1児の父親です。Web系エンジニアを10年以上しています。
→プロフィール
→Amazon欲しいものリスト

2020年5月19日プログラムJavaScript,プログラムサンプル

Posted by ユート