Posted at

[Matter.js]Renderで生成されるcanvasにidをつけたい

More than 1 year has passed since last update.

前回の記事:「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]);
});

上記の2つのファイルを作って適当なブラウザで開けば、ボタンを押したときにcanvasにカラフルな四角が降ってくるというだけの簡単なサンプル。壁と床はcanvasサイズに合わせて変わるので、winWidthとwinHeightだけ変更すればお好きなサイズで表示できます。

必要なファイルはこの2つだけというシンプルさ。本当はcssもちゃんと書いていて、Githubにあげようと思ったのですがパスワード忘れたので諦めました。時間があったらやります。

箱の色はエンジンの方で設定してるらしい。カスタマイズはできないのかな?後々試します。


注意点

renderの書き方がちょっと曲者で、公式のドキュメントにまともなサンプルが載ってない。さらに、公式で説明しているやり方はbody直下にcanvasを生成する方法だけで、上記のサンプルのようにあらかじめ作成したcanvasに割り当てるという方法を見つけるのに苦労した。

ポイントは、


  • renderにcanvasの指定をすること

  • HTML側でmatter.jsの読み込む前にcanvasを設置すること

の2つ。

このやり方を理解するのにずいぶん時間がかかってしまった。


参考