今回の記事では、p5.js と組み合わせて使うライブラリの 1つp5playをとりあげます。
これまで、X でポストしていたような試作をするのに使っていたのですが、p5play に関する記事を書いていなかったことに気がつき、まずは 1つ記事を書いてみようと思います。
● #p5play from:youtoy - 検索 / X
https://twitter.com/search?q=%23p5play%20from%3Ayoutoy&src=typed_query&f=live
p5play とは？
p5play は、公式ページに出てくるメッセージを見ると、「p5.js を描画に使った、JavaScript のゲームエンジンで、物理演算エンジンなども利用可能なパワフルなエンジン」と説明されています。
個人的にはゲームエンジンとして利用する以外に、その一部の機能を試作に使ってみても便利だと思いました。
例えば、以下のようなものを試しに作ったことがあります。
p5.js の描画に物理演算エンジンを使うという話では、過去に Matter.js や ｐ5−matter を使ったことがあったのですが（そして、Qiita に記事を書いたりもしました）、p5play を使うと、上記 2つのライブラリを使った時に比べてシンプルに物理演算エンジンを扱えたように感じました。
ライセンスまわりの話
また、以下の公式の説明で書かれているとおり、特定の条件で利用する場合は無料で利用可能です。例えば、商用でソース非公開の場合はライセンスが必要、という記載があったりします。
公式サンプル
とりあえず作例を見てみたい、という場合は、公式サンプルを見てみるのをオススメします。
以下は、OpenProcessing上で公開されているサンプルです。
●Quinton Ashley - OpenProcessing
https://openprocessing.org/user/350295
気になる機能をいくつか紹介してみる
それでは、p5play に関して、自分が使ったことがあるもの・ないものという部分は関係なく、活用できると面白そうな機能をいくつかピックアップしてみます。
物理演算エンジン
まずは、冒頭でも軽く触れていた物理演算エンジン関連です。
基本の部分
公式ドキュメントでいうと、例えば以下のページです。
これらのページを開くと、動作例とそれを実装しているコードを見ることができます。
●p5play : Sprite ＞ Sprite physics
https://p5play.org/learn/sprite.html?page=1
●p5play : Sprite ＞ Create Sprites faster
https://p5play.org/learn/sprite.html?page=4
物理演算エンジンが使われた公式作例をいくつかピックアップしてみる
また、公式サンプルだと、挙動が分かりやすいもの、例えば以下を触ってみるのが良いかもしれません。
●Hourglass | p5play - OpenProcessing
https://openprocessing.org/sketch/1866664
●Tumbler | p5play - OpenProcessing
https://openprocessing.org/sketch/1722018
●Fountain | p5play - OpenProcessing
https://openprocessing.org/sketch/1722665
物理演算エンジンをさらに
物理演算エンジンをさらにとりあげてみます。
以下は、自分が冒頭に掲載していた事例でも使った、床のようなものを作るのに便利な仕組みです。
以下のページを見ていくと、３パターンの指定方法が紹介されています。
●p5play : Sprite ＞ Chain Colliders
https://p5play.org/learn/sprite.html?page=11
以下は、接触していない物体間で影響を及ぼす仕組み・上り坂をのぼるなど回転する力を扱う仕組みが出てきているものです。
●p5play : Sprite ＞ Advanced Movement
https://p5play.org/learn/sprite.html?page=10
衝突を扱う
以下は、衝突判定などを扱うものです。
接触したかどうかの判定以外に、接触した時間（フレーム数）を取得したりもできます。
●p5play : Sprite ＞ Collisions
https://p5play.org/learn/sprite.html?page=5
連続した動きを扱う
以下は、連続した動きを扱えるものです。
async/await を使って書かれた事例も掲載されています。
●p5play : Sprite ＞ Movement Sequencing
https://p5play.org/learn/sprite.html?page=15
消滅するまでの時間を扱う
以下は、パーティクルシステムを実装する時にもよく使われている、消滅するまでの時間を扱う仕組みです。
ユーザーの入力
以下はユーザーの入力を扱う仕組みです。
p5.js でも入力を扱う仕組みはありますが、ゲームに必要そうな判定をより簡単に扱えたりできそうなものです。
●p5play : Input ＞ Input Devices
https://p5play.org/learn/input.html
物理演算エンジンの計算・描画のアップデートを自分でコントロール
物理演算エンジンの計算・描画のアップデートを、ライブラリにおまかせにするのではなく、自分でコントロールする場合に使う機能です。
●p5play : World ＞ Controlling Time・world.step
https://p5play.org/learn/world.html?page=1
視点を扱う
画面外も含めて描画されたオブジェクトなどを、特定の部分を切り取って見るような、視点を扱う機能です。
●p5play : Camera ＞ Camera Movement
https://p5play.org/learn/camera.html?page=0
オブジェクト同士のジョイント
以下は、オブジェクト同士のジョイントを扱うものです。
ジョイントのパターンが複数あります。
●p5play : Joints
https://p5play.org/learn/joints.html?page=0
https://p5play.org/learn/joints.html?page=1
https://p5play.org/learn/joints.html?page=2
https://p5play.org/learn/joints.html?page=3
https://p5play.org/learn/joints.html?page=4
p5play の作例を X で見てみる
p5play の作例は X でも探して見ることができます。
#p5play のハッシュタグで検索すれば OK です。
●#p5play - 検索 / X
https://twitter.com/hashtag/p5play?src=hashtag_click&f=live
例えば、以下のように作品が動作している様子などを見ることができます。