mouseIsOverとmouseIsPressed スプライトはmouseIsOverとmouseIsPressedプロパティを持っていて、mouseActiveプロパティを有効化することで、動作するようになります。 […]
続きを読む月: 2019年4月
8_2:p5.play マウス操作に関するイベントハンドラ
onMouseOverとonMouseOut スプライトは、onMouseOverイベントハンドラプロパティと、それに対応するonMouseOutイベントハンドラプロパティを持っています。 スプライトのコライダー上にマウ […]
続きを読む8_1:p5.play マウス操作に関する関数
p5.play.jsのマウス操作に関する関数には次のものがあります。いずれもページ上のマウスダウンやマウスアップに応答する関数です。 リファレンスメモ p5.play.mouseDown() mouseDown ( bu […]
続きを読む8:p5.play マウス操作に対する応答
p5.play.jsには、p5.jsとは異なる、マウス操作に対する応答の仕組みが設けられています。これは、 マウス操作に関する関数 マウス操作に関するイベントハンドラ マウス操作に関するプロパティ に分けることができます […]
続きを読む7_3:p5.play スプライトの点やピクセルに対する重なりチェック
p5.play.jsの当たり判定はスプライトのコライダーを使って行われますが、このとき任意の点(マウスカーソルの位置)やスプライトの内の不透明なピクセルの点に対して衝突チェックを行うこともできます。 具体的にいうと、下図 […]
続きを読む7_2:p5.play スプライトの跳ね返り
たとえば、ボールを転がして、それが壁に当たって戻って来る、という跳ね返りを想像しただけでも、ボールのスピードや地面との摩擦、ボールが壁に当たるときの角度、ボールの重さなど、物理学的な知識や計算が必要になりそうに思えます。 […]
続きを読む7_1:p5.play スプライトの当たり判定
ゲーム制作に当たり判定(衝突の検出)は付き物です。これは逆から見た場合、当たり判定を学ぶと制作物に途端に”ゲーム感”が生まれる、ということです。p5.play.jsの場合、Spriteオブジェクトのoverlap()やc […]
続きを読む6:p5.play Group オブジェクト
p5.playには、同種のスプライトをまとめて管理するのに便利なGroupオブジェクトがあります。 リファレンスメモ Group p5.playのグループ(Group)は同様の振る舞いを持つスプライトの集まりで、グループ […]
続きを読む5_6:p5.play スプライトのドラッグ
通常のJavaScriptと異なり、p5.jsやp5.play.jsの出来事はどれもキャンバスの中で起こります。したがって、p5.jsやp5.play.jsでは、何かをドラッグするというよりも、何かをドラッグしているよう […]
続きを読む5_5:p5.play スプライトの削除
スプライトはキャンバスから外に出て見えなくなっても、存在しつづけています。外に出て見えなくなったそのスプライトをまた表示しないのであれば、そのスプライトは削除すべきです。削除しないとメモリの無用な消費になります。 スプラ […]
続きを読む5_4:p5.play スプライトの移動
p5.play.jsでは、アニメーションが楽に作成できるようにするため、特にSpriteオブジェクトのプロパティやメソッドに多くの工夫がなされています。たとえばSprite.velocityは、draw()関数が1回呼び […]
続きを読む5_3:p5.play スプライトのアニメーションの変更
スプライトには複数のアニメーションを追加することができ、表示するアニメーションを変更することができます。たとえば、スプライトに鳥の怪物がホバリングしているidleアニメーションと、獲物を襲うattackアニメーションを追 […]
続きを読む5_2:p5.play スプライトの外見
スプライトはデフォルトで、毎回色の変わるプレースホルダ矩形として表示されますが、イメージやアニメーションに置き換えることもできます。以降ではスプライトの外見を表示する方法を順にみていきます。 プレースホルダ矩形 最も基本 […]
続きを読む5_1:p5.play.Sprite オブジェクト
p5.playにはSpriteオブジェクトが定義されています。 Sprite Spriteオブジェクトはp5.playの主要な構成要素で、イメージやアニメーションが保持でき、位置や可視性などのプロパティのセットを持つ。S […]
続きを読む4:p5.play.SpriteSheet オブジェクト
p5.playにはSpriteSheetオブジェクトが定義されています。 SpriteSheet スプライトシートとそのすべてをフレームを表す。Animationオブジェクトか、静的な単一の描画フレームとともに使用する。 […]
続きを読む3_2:p5.play.Animationオブジェクトのメソッドとプロパティ
Animationオブジェクトにはplay()やstop()のほかにもメソッドやプロパティがあり、詳細はp5.playのリファレンスページで読むことができます。以降では、主なメソッドとプロパティを見ていきます。 next […]
続きを読む3_1:p5.play.Animationオブジェクトの再生と停止
Animationオブジェクトの再生(Animationオブジェクトが内部にフレーム番号付きで並べて持つ、読み込んだPNG画像のイメージの連続描画)は、デフォルトで有効になっています。Animationオブジェクトの再生 […]
続きを読む3:p5.play.Animationオブジェクト
p5.play.jsには、次のAnimationオブジェクトが定義されています。 Animation Animationオブジェクトは、連続して表示できる一連のイメージ(p5.Image)を自身の中に含む。すべてのファイ […]
続きを読む2_2:p5.play スプライトシート アニメーションの基本
スプライトシートアニメーションの基本的な手順 アニメーションの表現では、たとえばゲームキャラクターの動きなどに”スプライトシート”がよく使用されます。スプライトシートとは、動かしたいアニメーションの全フレーム(コマ)を1 […]
続きを読む2_1:p5.play アニメーションの基本
基本的な手順 p5.jsのキャンバスに、p5.play.jsを使ってアニメーションを描画する基本的な手順は次の通りです。 アニメーションに使用するPNG画像を用意する。 p5.jsのpreload()関数で、p5.pla […]
続きを読む1_1:スタート p5.play
プロジェクトのひな型 本カテゴリーでは、次のファイル構造を1つのプロジェクトとして使用することにします。 プロジェクトフォルダ(1つのWebアプリに必要なファイルを全部まとめたフォルダ)は次の要領で作成します。 デスクト […]
続きを読む1:p5.playとは?
本カテゴリーでは、p5.playサイトで公開されているサンプルを元に、p5.playを探っていきます。 p5.playトップページより p5.playは、ゲームや遊び用のプログラムを作るためのp5.jsライブラリです。p […]
続きを読む14:ゲーム制作に役立つp5.play速習 Creative Coding p5.js
アリソンパリッシュによる このチュートリアルでは、パオロ・ペデルチーニのp5.playライブラリを紹介します。このチュートリアルはいささか独断的で、p5.playを面白くする機能の多くを取り上げていません。このライブラリ […]
続きを読む