入力デバイス

p5play で利用可能な入力デバイスは次のとおりです:

  • kb / keyboard …キーボード
  • mouse …マウス
  • contros / controllers …ゲームコントローラー
  • touches …タッチスクリーン

これらの入力デバイスはすべて、入力状態を取得する、シンプルな pressespressingreleased 関数を実装しています。

また、入力デバイスは全ての入力状態を、プロパティとして保持しています。例えば kb.space は、ユーザーがスペースキーを押し続けているフレーム数を保持します。ユーザーがその入力をやめると、プロパティはリセットされます。

p5play は、論理和を使用して、異なる入力デバイスから同じアクションを簡単にトリガーできます。

このコードサンプルでは、スペースキーを押すか、マウスをクリックすると、スプライトが緑色になります。

キーボード

kb は、 'enter' 、 'backspace' 、 'control' を含む、キーボードのほぼすべてのキーを検知します。

アルファベットキーの指定は、大文字と小文字を区別しません。ユーザーがシフトキーを押しているかどうかを確認するには、 kb.pressing('shift') を使用してください。

WASD キーはプレイヤーキャラクターの移動によく使われるため、 WASD キーとカーソルキーの押下が同じ意味であることを検出する、 'up' 、 'down' 、 'left' 、 'right' という方向名も指定することができます。

カーソルキーを個別に検知できるよう、 'arrowUp' 、 'arrowDown' 、 'arrowLeft' 、 'arrowRight' も指定することができます。

二人同時プレイのゲームでは、ふたりめのプレイヤーは移動に IJKL キーを使用することが一般的です。これらのキーは 'up2' 、 'down2' 、 'left2' 、 'right2' を指定して参照できます。

QWERTY 以外のキーボードを使用していますか?

マウス

デフォルトのマウス入力は 'left' (左)ボタンで、トラックパッドでの一本指でのクリックです。また、マウスの 'right' (右)ボタン(トラックパッドでの二本指クリック)やマウスの 'center' (中央)ボタンも使用できます。

mouse.xmouse.y は、カメラの位置に基づいた、ワールド内でのマウスカーソルの座標です。

mouse.canvasPos は、ワールドにかかわらず、キャンバスに対する絶対座標を表します。

mouse.visible は、マウスカーソルが表示されるかどうかを決定するブール値です。

mouse.cursor には カーソルスタイル の値を設定できます。デフォルトは 'default' で、他には 'grab' 、 'move' 、 'pointer' 、 'wait' などがあります。

スプライトマウス

コライダーを持つスプライトは、スプライト上でのマウス入力を検知するための、独自のマウスオブジェクトを持っています。 sprite.mouse オブジェクトは、 mouse 入力オブジェクトとほとんど同じですが、追加機能があります。

hovershovering は、ユーザーがマウスカーソルをスプライトに重ねたことを検知します。

dragging は、ユーザーがマウスボタンを押下しながらマウスを移動している間、検知し続けます。

mouse.x はキャンバスに対するマウスの x 座標であり、 sprite.mouse.x はスプライトに対するマウスの x 座標です。

ゲームコントローラー

contros (別名 controllers )配列は、 Web ブラウザが認識している各ゲームコントローラーを、オブジェクト形式の要素として格納しています。それぞれのゲームコントローラーオブジェクトは、以下のボタンの入力状態を取得します:

abxy (それぞれ、 XBox コントローラーでのボタン名です。別のコントローラーの場合、適宜読み替えてください)、l(左ショルダー/バンパー)、r(右ショルダー/バンパー)、lt(左トリガー)、rt(右トリガー)、updownleftright (それぞれ、十字ボタンの方向)、lsb(左スティック押し込み)、rsb(右スティック押し込み)、startselect

leftStickrightStick は、コントローラーの各アナログスティックの倒れ方を、 x と y のプロパティを持つオブジェクトとして表します。これらの値は、それぞれの成分方向に倒れる深さを -1 ~ 1 の範囲で示しており、 0 は、その方向には倒れていないことを意味します。

一部のコントローラーには、押し込みの深さを検知するアナログトリガーがあり、その深さは leftTriggerrightTrigger によって、 0 ~ 1 の数値として示されます。

通常の JavaScript 配列と同様、接続された特定のコントローラーには、添字でアクセスできます。例えば、 contros[0]contros[1] は、 1 番目と 2 番目のコントローラーです。ただし、入力状態を取得する前に、この配列にゲームコントローラーが存在するかどうか、忘れずに確認してください。

便利なショートカットアクセサとして、 contro を用意しています。これは contros[0] の入力を取得することができ、かつ、ゲームコントローラーが接続されていなくても例外をスローすることがありません。

お試しあれ! ゲームコントローラーを接続し、そのいずれかのボタンを押すと、p5play によって検知されます。

➡️ ゲームコントローラーの全ての入力デモ

タッチ

タッチスクリーンを操作するたびに、 touch (タッチ)オブジェクトが生成され、 touches 配列に追加されてゆきます。

各タッチオブジェクトには、タップやドラッグの状態を検出する、独自の関数があります。

touch.xtouch.y は、カメラの位置に基づいた、ワールド内でのタッチの座標です。

touch.canvasPos は、ワールドにかかわらず、キャンバスに対する絶対座標を表します。

touch.id は、タッチを識別する、一意の番号です。

touch.duration は、タッチが発生していたフレーム数です。

各タッチが終了した後のフレームでは、そのタッチオブジェクトは touches 配列から削除されます。 touches[0] は、 mouse と同じ意味になります。

このタッチのデモでは、スクリーンをタップするとボックスが生成され、ドラッグで放り投げられます!

前へ 次へ