Web ページ上で「ボールがビリヤードのように跳ね回るアニメーション」を簡単に実装できる JavaScript ライブラリを作りました。
作ったものの、どこにも紹介せずに放置していたのでちょっと記憶がアレですが…。
概要
単純な Canvas アニメーションです。
ライブラリを読み込んだら new して終わり。 API は停止／再開くらいです。
使用例
詳しくは GitHub かデモの HTML を覗いてみてください。
- デフォルト
自動生成された canvas 要素がdocument.bodyに追加されます。
<script src="./billiards.min.js"></script>
<script>
new Billiards({});
</script>
- 既存の canvas 要素を指定する
<canvas class="canvas"></canvas>
<script>
new Billiards({
'canvas': document.querySelector('.canvas')
});
</script>
- 親要素を指定して canvas 要素を自動生成する
<div class="canvas-container"></div>
<script>
new Billiards({
'parent': document.querySelector('.canvas-container')
});
</script>
- Canvas のサイズと背景色を指定する
new Billiards({
'width': '640',
'height': '480',
'fillStyle': 'rgba(0, 0, 0, 0.25)'
});
- Canvas を自動的にウィンドウサイズに合わせる
new Billiards({
'fitToWindow': true
});
自動的に親要素のサイズに合わせる fitToParentW と fitToParentH もあります。
- スプライトの詳細設定
詳しくは こちら。 RGBA 値・半径・速度は[ 最小値, 最大値 ]の範囲でランダムに決定されます。
なお、半径rはピクセル指定ではなく、 Canvas のサイズに対する割合を指定します。
new Billiards({
'number': 8,
'r': [ 0.1, 0.2 ],
'color': {
'r': [ 192, 255 ],
'g': [ 128, 255 ],
'b': [ 0, 255 ],
'a': [ 1.0, 1.0 ]
},
'composite': 'lighter',
'velocity': [ 1.0, 2.0 ]
});
- 跳ね返らせない
new Billiards({
'rebound': false
});
- 衝突させない（すり抜ける）
new Billiards({
'collide': false
});
- アニメーションループの手動設定
既存のrequestAnimationFrameに組み込みたい時に。
const billiards = new Billiards({
'autoPlay': false
});
const update = () => {
requestAnimationFrame(() => {
billiards.update();
update();
});
};
- 手動レンダリング
画像を描画したい時に。billiardsがインスタンス、billiards._が設定、spriteが現在のスプライトです。
new Billiards({
'render': (billiards, sprite) => {
billiards.context.fillStyle = sprite.color;
billiards._.composite && (billiards.context.globalCompositeOperation = billiards._.composite);
billiards.context.beginPath();
billiards.context.arc(sprite.x, sprite.y, sprite.r, 0, Math.PI * 2);
billiards.context.closePath();
billiards.context.fill();
}
});
ところで
なんで私ドキュメントとかエセ英語で書いたんでしょうね。