matter.jsで遊んでみた - ITの隊長のブログ

最近のJavascriptの勢いってすごいですよね。

好みの言語ではないですが、Javascriptでgitを作ろうだとか、Javascriptをサーバサイドで動作させようとか、用途や使用者がどんどん増えているように感じます。

最近PHPを極めようと勉強していますが、Webを触っているとJavascriptの力を借りないと実現が難しい処理が数々ありました。

PHPの勉強しているのに、何故かJavascriptも覚えないといけない。。。Webはツライ。

で、よく見るサイト「GIGAZINE」でjsのライブラリが紹介されていたので、ちょっと遊んでみました。

<a href="http://gigazine.net/news/20150122-matter-js/">2次元物理計算エンジンをブラウザで実現する「Matter.js」</a>
2次元物理計算エンジンをブラウザで実現する「Matter.js」 - GIGAZINE

ダウンロード

githubからダウンロードしました。gitが使えなくてもZipで落とせるので、あきらめずに是非是非。

<a href="https://github.com/liabru/matter-js">liabru/matter-js</a>
liabru/matter-js · GitHub

デモで遊んでみる。

ダウンロードすると、ありがたいことにデモ画面があります。

色々なパラメータが用意されているので、変化を楽しみながら物理演算を体験できます。

と、ここまではGIGAZINEさんの二番煎じなんで、次に行きましょう。

物理演算するオブジェクトはなんでも良いのか？

四角とか丸とか色々図形が扱えるのはわかりましたが、自分で拾ってきた画像は使えるかどうか試してみたくなりました。

ふと触ったデモで思いつきました。「sprites」ってデモです。

これを実行してみると・・・、たくさんのボールが降ってきます。

実はこのボールのイメージは、このデモファイルに入っている画像データなんですね。

っつーことは、任意の画像で物理演算することはできるってことだね！

探してみたら「~/demo/img/ball.png」って場所にありました。

ただ、GoogleDeveloperToolとかで確認しても、ボールの画像データをソースで確認することが出来ませんでした。

どうやら、スクリプトを読み込んだ時にオブジェクトを作成してそれを物理演算できるようになっているっぽい。

ボールの画像データを読み込む箇所を変更することができれば、好きな画像に変更することができそう。。。

ソースから追って見ることにしました。

ソースを確認してみる

先に構成の説明を。確認したファイルは下記になります。

matter-js/
	- demo/
		- index.html
		- img/
			- ball.png
		- js/
			- Demo.js

デモのhtmlソースを確認すると、プルダウンで各デモを選択すると、デモが起動するようになっています。

<div class="controls-container">
    <select id="demo-select">
        <option value="mixed">Mixed Shapes</option>
        <option value="mixedSolid">Solid Rendering</option>
        <option value="newtonsCradle">Newton's Cradle</option>
        <option value="wreckingBall">Wrecking Ball</option>
        <option value="slingshot">Slingshot Game</option>
        <option value="rounded">Rounded Corners (Chamfering)</option>
        <option value="views">Views</option>
        <option value="timescale">Time Scaling</option>
        <!-- 下のspritesがボールの画像を物理演算してくれるデモです -->
        <option value="sprites">Sprites</option>
        <option value="pyramid">Pyramid</option>

プルダウンの前後にはフォームやAjaxとかの記述はなかったので、jsのonclickみたいな処理で動作させていると推測。

っつーわけで、次はjsディレクトリにある、Demo.jsを確認しました。

ただ、全部をみると1500行のソースが圧倒するので（さすがに全部は見きれない）、先ほどのhtmlソースに記述されいた「sprites」のvalueでソースコードを検索します。

すると、

Demo.sprites = function() {
    var _world = _engine.world,
        offset = 10,
        options = {
            isStatic: true,
            render: {
                visible: false
            }
        };

    Demo.reset();
    _world.bodies = [];

    // these static walls will not be rendered in this sprites example, see options
    World.add(_world, [
        Bodies.rectangle(400, -offset, 800.5 + 2 * offset, 50.5, options),
        Bodies.rectangle(400, 600 + offset, 800.5 + 2 * offset, 50.5, options),
        Bodies.rectangle(800 + offset, 300, 50.5, 600.5 + 2 * offset, options),
        Bodies.rectangle(-offset, 300, 50.5, 600.5 + 2 * offset, options)
    ]);

    var stack = Composites.stack(20, 20, 15, 4, 0, 0, function(x, y, column, row) {
        if (Common.random() > 0.35) {
            return Bodies.rectangle(x, y, 64, 64, {
                render: {
                    strokeStyle: '#ffffff',
                    sprite: {
                        texture: './img/box.png'
                    }
                }
            });
        } else {
            return Bodies.circle(x, y, 46, {
                density: 0.0005,
                frictionAir: 0.06,
                restitution: 0.3,
                friction: 0.01,
                render: {
                    sprite: {
                        texture: './img/ball.png'
                    }
                }
            });
        }
    });

    World.add(_world, stack);

    var renderOptions = _engine.render.options;
    renderOptions.background = './img/wall-bg.jpg';
    renderOptions.showAngleIndicator = false;
    renderOptions.wireframes = false;
};

見つけました！「sprites」のデモコードです。ここから読み出しているのでしょう。

んで、画像を読み込んでいる場所を特定しました。

return Bodies.circle(x, y, 46, {
    density: 0.0005,
    frictionAir: 0.06,
    restitution: 0.3,
    friction: 0.01,
    render: {
        sprite: {
            texture: './img/ball.png'
        }
    }
});

ここですね。相対パスで画像を読み込んでいるっぽいです。

じゃあ、ここを変更すれば良いのね。拾ってきたurlリンクを持ってきました。（某企業さんスミマセン。）

    render: {
        sprite: {
            texture: 'http://cdn.liginc.co.jp/wp-content/uploads/2014/12/eyecatch1-185x123.jpg'
        }
    }

よっしゃ！　これで実行してみます。

画像を変更して遊んでみた

ぽちっとね！

ドサッ！

f:id:aipacommander:20150126185300g:plain

おおっ！（°ω°；

やったね！予想通り動いたよヾ(*´∀｀*)ﾉｷｬｯｷｬ

ひゃっほぉおおおおおおおおおい！！！！　(´∀｀*)

f:id:aipacommander:20150126185433g:plain

まとめ

(*´Д`)ﾊｧﾊｧ　堪能したわ。

これ、ちょっと気に入りました。今後作成予定のサイトに使ってみたいと思います（´ω｀）

IEで動くのかな？　（多分動かないと思うけど）

おわり。