本稿では、「Game Programming」サイトの「Game Examples」ページで公開されている「Jumper」ゲームサンプルを見ていきます。 「Jumper」はプラットフォームゲームと呼ばれるジャンルに属する […]
続きを読むカテゴリー: p5.play を探る
9_4：p5.play 「Angry Birds」もどきの「Angry Bernie」ゲームサンプル
本稿では、「Game Programming」サイトの「Game Examples」ページで公開されている「Angry Bernie」ゲームサンプルを見ていきます。 「Game Examples」ページによると、「Ang […]
続きを読む9_3：p5.play 「ブロック崩し」 ゲームサンプル
「ブロック崩し」(Breakout)は「ゲームカタログ@Wiki」によると、次のように説明されています。 特徴・評価点 ゲームとしては「パドル（つまみ型）コントローラーでパドルを操作し、ボールを跳ね返して画面上部にあるブ […]
続きを読む9_2：p5.play 「アステロイド」 ゲームサンプル
「アステロイド」(Asteroids)は「ゲームカタログ@Wiki」によると、次のように説明されています。 基本ルール ゲームシステムは、「自機を操作し、画面内に浮遊する複数の隕石（敵）をショットにてすべて破壊すればステ […]
続きを読む9_1：p5.play 「ポン」 ゲームサンプル
「ポン」(Pong)は「ゲームカタログ@Wiki」によると、次のように説明されています。 システム 対戦プレイ専用 互いにダイヤル状のツマミ(パドル)を使って縦長のバー(自機)を操作し、ドット(ボール)を弾きあってプレイ […]
続きを読む9：p5.play ゲームサンプル
本稿では、p5.playのサンプルページや「Game Programming」サイトの「Game Examples」ページで公開されているp5.js、p5.play.jsを使ったゲームサンプルを見ていきます。
続きを読む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 スプライトシート アニメーションの基本
スプライトシートアニメーションの基本的な手順 アニメーションの表現では、たとえばゲームキャラクターの動きなどに”スプライトシート”がよく使用されます。スプライトシートとは、動かしたいアニメーションの全フレーム(コマ)を１ […]
続きを読む2_1：p5.play アニメーションの基本
基本的な手順 p5.jsのキャンバスに、p5.play.jsを使ってアニメーションを描画する基本的な手順は次の通りです。 アニメーションに使用するPNG画像を用意する。 p5.jsのpreload()関数で、p5.pla […]
続きを読む1_1：スタート p5.play
プロジェクトのひな型 本カテゴリーでは、次のファイル構造を１つのプロジェクトとして使用することにします。 プロジェクトフォルダ(１つのWebアプリに必要なファイルを全部まとめたフォルダ)は次の要領で作成します。 デスクト […]
続きを読む1：p5.playとは？
本カテゴリーでは、p5.playサイトで公開されているサンプルを元に、p5.playを探っていきます。 p5.playトップページより p5.playは、ゲームや遊び用のプログラムを作るためのp5.jsライブラリです。p […]
続きを読む