前回の記事:「JavaScript用物理エンジン、Matter.jsをとりあえず動かす」
↑の続きです。前回よりちょっとカスタマイズして図形を描画してみました。
キャンパスのサイズとかカスタマイズしたい
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>さんぷる</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<!-- canvasはmatter.jsの前に書くこと -->
<canvas id="world"></canvas>
<!-- matter.jsはダウンロードしなくてもこのリンクでOK -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.10.0/matter.min.js"></script>
<script src="main.js"></script>
<button id="add" class="normal">ボタン</button>
</body>
</html>
main.js
// 使用モジュール
var Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Bodies = Matter.Bodies;
// エンジン生成
var engine = Engine.create(),
world = engine.world;
// canvasのサイズ
var winWidth = 800;
var winHeight = 450;
// レンダリング対象のキャンバス
var canvas = document.getElementById('world');
// レンダリング設定
var render = Render.create({
canvas: canvas,
engine: engine,
options: {
width: winWidth,
height: winHeight,
background: '#FFF',
wireframes: false,
showAngleIndicator: false
}
});
// 地面
var ground = Bodies.rectangle(winWidth/2, winHeight, winWidth, 10, { isStatic: true });
var wallL = Bodies.rectangle(0, winHeight/2, 10, winHeight, { isStatic: true });
var wallR = Bodies.rectangle(winWidth, winHeight/2, 10, winHeight, { isStatic: true });
World.add(engine.world, [ground, wallL, wallR]);
// エンジンの実行
Engine.run(engine);
// 描画実行
Render.run(render);
// ボタンを押したときに箱を増やす
$(document).on('click', '#add',function() {
var pos = Math.random();
var hoge = Bodies.rectangle((winWidth*pos) ,0, 30, 30);
World.add(engine.world, [hoge]);
});
上記の２つのファイルを作って適当なブラウザで開けば、ボタンを押したときにcanvasにカラフルな四角が降ってくるというだけの簡単なサンプル。壁と床はcanvasサイズに合わせて変わるので、winWidthとwinHeightだけ変更すればお好きなサイズで表示できます。
必要なファイルはこの２つだけというシンプルさ。本当はcssもちゃんと書いていて、Githubにあげようと思ったのですがパスワード忘れたので諦めました。時間があったらやります。
箱の色はエンジンの方で設定してるらしい。カスタマイズはできないのかな？後々試します。
注意点
renderの書き方がちょっと曲者で、公式のドキュメントにまともなサンプルが載ってない。さらに、公式で説明しているやり方はbody直下にcanvasを生成する方法だけで、上記のサンプルのようにあらかじめ作成したcanvasに割り当てるという方法を見つけるのに苦労した。
ポイントは、
- renderにcanvasの指定をすること
- HTML側でmatter.jsの読み込む前にcanvasを設置すること
の２つ。
このやり方を理解するのにずいぶん時間がかかってしまった。