キーボード入力を一度バッファし、特定のフレーム処理時に正規化して解決します。 また、各キーの押下状態を記録し、任意のタイミングで確認したり、直近の入力履歴を確認します。
ゲームのように特定のメッセージループ内で入力を正規化して処理したい場合に活用できます。
(npm を利用する場合)
npm install --save @mizu-mizu/abstract-inputsimport { InputManager } from '@mizu-mizu/abstract-inputs'
const FPS = 1000 / 60
const inputManager = new InputManager()
document.addEventListener('DOMContentLoaded', () => {
inputManager.mount(document.body)
let frameCount = 0
setInterval(() => {
const keyState = inputManager.consume(frameCount++)
console.log(keyState)
}, FPS)
window.addEventListener('blur', () => {
inputManager.addResetInputs()
})
})InputManager を利用する上で大事なことは、 mount() で要素に紐づけることと、
一定終期で consume() を呼び出し続けることです。
これにより、InputManager インスタンスは入力イベントの監視を開始し、consume() 呼び出しのタイミングで
整理します。
指定した要素にキーボードリスナを登録し、キーボード入力の受付を開始します。
const inputManager = new InputManager()
inputManager.mount(document.getElementById('targetEl'))#mount() で監視を開始済みの対象要素に登録されたキーボードリスナを削除し、
キー入力受付を終了します。
inputManager.unmount(document.getElementById('targetEl'))呼び出し毎に、前回呼び出し（初回の場合は mount()）以降に蓄積された入力をその呼び出し時点の
フレーム内入力として整理します。
常にこのメソッドを一定間隔で呼び出すようにしてください。
const inputManager = new InputManager()
inputManager.mount(document.getElementById('targetEl'))
setInterval(() => {
const keyState = inputManager.consume(frameCount++)
}, 1)キー入力を指定フレーム番号で解決される入力として予約します。
キーを押し下げた入力を type: 'down' とし、キーを離す入力を type: 'up' として予約する必要があります。
const inputManager = new InputManager()
inputManager.reserve(1000, [{
type: 'down',
code: 'KeyA',
}])
inputManager.reserve(1001, [{
type: 'up',
code: 'KeyA',
}])指定されたフォーマットのコマンド文字列をトークン列に展開/トークン列からコマンドデータを作成します。
いずれの関数も、async iterable なオブジェクトを返します。
parseTokens() は、引数に配列と async iterable なオブジェクトのいずれも受け取ることができます。
import { tokenize, parseTokens } from '@mizu-mizu/abstract-inputs'
const text = '1000:dKeyA 1001:uKeyA'
for await (const { frameCount, inputEvents } of parseTokens(tokenize(value))) {
inputManager.reserve(frameCount, inputEvents)
}この関数は、tokenize() の同期版です。コマンド文字列を引数に受け取り、トークンオブジェクトの配列を返します。
第二引数を省略した場合、与えられた入力は line:0, column:0 から始まるものとして処理されますが、 第二引数の指定によりこの値を変更することが出来ます。
import { tokenizeSync } from '@mizu-mizu/abstract-inputs'
const text = '1000:dKeyA'
console.log(tokenizeSync(text, { lineNoFrom: 2, columnNoFrom: 3 }))
// -> [
// { lineNo: 2, column: 3, text: '1000' },
// { lineNo: 2, column: 7, text: ':' },
// { lineNo: 2, column: 8, text: 'dKeyA' }
// ]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent