月: 2019年4月

onMouseOverとonMouseOut スプライトは、onMouseOverイベントハンドラプロパティと、それに対応するonMouseOutイベントハンドラプロパティを持っています。 スプライトのコライダー上にマウ […]

p5.play.jsのマウス操作に関する関数には次のものがあります。いずれもページ上のマウスダウンやマウスアップに応答する関数です。 リファレンスメモ p5.play.mouseDown() mouseDown ( bu […]

p5.play.jsには、p5.jsとは異なる、マウス操作に対する応答の仕組みが設けられています。これは、 マウス操作に関する関数 マウス操作に関するイベントハンドラ マウス操作に関するプロパティ に分けることができます […]

p5.play.jsの当たり判定はスプライトのコライダーを使って行われますが、このとき任意の点(マウスカーソルの位置)やスプライトの内の不透明なピクセルの点に対して衝突チェックを行うこともできます。 具体的にいうと、下図 […]

たとえば、ボールを転がして、それが壁に当たって戻って来る、という跳ね返りを想像しただけでも、ボールのスピードや地面との摩擦、ボールが壁に当たるときの角度、ボールの重さなど、物理学的な知識や計算が必要になりそうに思えます。 […]

ゲーム制作に当たり判定(衝突の検出)は付き物です。これは逆から見た場合、当たり判定を学ぶと制作物に途端に”ゲーム感”が生まれる、ということです。p5.play.jsの場合、Spriteオブジェクトのoverlap()やc […]

p5.playには、同種のスプライトをまとめて管理するのに便利なGroupオブジェクトがあります。 リファレンスメモ Group p5.playのグループ(Group)は同様の振る舞いを持つスプライトの集まりで、グループ […]

通常のJavaScriptと異なり、p5.jsやp5.play.jsの出来事はどれもキャンバスの中で起こります。したがって、p5.jsやp5.play.jsでは、何かをドラッグするというよりも、何かをドラッグしているよう […]

スプライトはキャンバスから外に出て見えなくなっても、存在しつづけています。外に出て見えなくなったそのスプライトをまた表示しないのであれば、そのスプライトは削除すべきです。削除しないとメモリの無用な消費になります。 スプラ […]

p5.play.jsでは、アニメーションが楽に作成できるようにするため、特にSpriteオブジェクトのプロパティやメソッドに多くの工夫がなされています。たとえばSprite.velocityは、draw()関数が1回呼び […]

スプライトには複数のアニメーションを追加することができ、表示するアニメーションを変更することができます。たとえば、スプライトに鳥の怪物がホバリングしているidleアニメーションと、獲物を襲うattackアニメーションを追 […]

スプライトはデフォルトで、毎回色の変わるプレースホルダ矩形として表示されますが、イメージやアニメーションに置き換えることもできます。以降ではスプライトの外見を表示する方法を順にみていきます。 プレースホルダ矩形 最も基本 […]

p5.playにはSpriteオブジェクトが定義されています。 Sprite Spriteオブジェクトはp5.playの主要な構成要素で、イメージやアニメーションが保持でき、位置や可視性などのプロパティのセットを持つ。S […]

p5.playにはSpriteSheetオブジェクトが定義されています。 SpriteSheet スプライトシートとそのすべてをフレームを表す。Animationオブジェクトか、静的な単一の描画フレームとともに使用する。 […]

Animationオブジェクトにはplay()やstop()のほかにもメソッドやプロパティがあり、詳細はp5.playのリファレンスページで読むことができます。以降では、主なメソッドとプロパティを見ていきます。 next […]

Animationオブジェクトの再生(Animationオブジェクトが内部にフレーム番号付きで並べて持つ、読み込んだPNG画像のイメージの連続描画)は、デフォルトで有効になっています。Animationオブジェクトの再生 […]

p5.play.jsには、次のAnimationオブジェクトが定義されています。 Animation Animationオブジェクトは、連続して表示できる一連のイメージ(p5.Image)を自身の中に含む。すべてのファイ […]

スプライトシートアニメーションの基本的な手順 アニメーションの表現では、たとえばゲームキャラクターの動きなどに”スプライトシート”がよく使用されます。スプライトシートとは、動かしたいアニメーションの全フレーム(コマ)を１ […]

基本的な手順 p5.jsのキャンバスに、p5.play.jsを使ってアニメーションを描画する基本的な手順は次の通りです。 アニメーションに使用するPNG画像を用意する。 p5.jsのpreload()関数で、p5.pla […]

プロジェクトのひな型 本カテゴリーでは、次のファイル構造を１つのプロジェクトとして使用することにします。 プロジェクトフォルダ(１つのWebアプリに必要なファイルを全部まとめたフォルダ)は次の要領で作成します。 デスクト […]

本カテゴリーでは、p5.playサイトで公開されているサンプルを元に、p5.playを探っていきます。 p5.playトップページより p5.playは、ゲームや遊び用のプログラムを作るためのp5.jsライブラリです。p […]