Basic Keyboard Input
*Нажмите на окно с приложением для фокусировки, потом на клавиатуре стрелка влево, стрелка вправо и пробел для вращения куба. Нажмите и отпустите клавишу 'a' для смены цвета.
Ввод с клавиатуры в PlayCanvas предоставляется объектом 'pc.Keyboard'. Объект клавиатуры предоставляет простой интерфейс для основных операций, таких как: клавиша нажата однократно или клавиша удерживается. Этот объект также исключает различные кросс-браузерные проблемы по обработке кодов клавиш.
Посмотрите на сцену обработки ввода с клавиатуры в уроке. Здесь полный код урока:
var KeyboardHandler = pc.createScript('keyboardHandler');
KeyboardHandler.attributes.add('redMaterial', {
type: 'asset',
assetType: 'material'
});
KeyboardHandler.attributes.add('whiteMaterial', {
type: 'asset',
assetType: 'material'
});
// initialize code called once per entity
KeyboardHandler.prototype.initialize = function() {
// Use on() to listen for events on the keyboard device.
// Arguments are:
// 1) The event name to listen for
// 2) The callback function to call when the event fires
// 3) (optional) The value to use for 'this' in the callback function
this.app.keyboard.on(pc.EVENT_KEYDOWN, this.onKeyDown, this);
this.app.keyboard.on(pc.EVENT_KEYUP, this.onKeyUp, this);
};
// update code called every frame
KeyboardHandler.prototype.update = function(dt) {
/*
* Notice in the demo that pressing and holding the arrow keys doesn't
* make the block spin. wasPressed() is used to detect a
* keypress that occurred since the last frame and will only be
* called once even if the key is held down.
*/
var angle = 0;
if (this.app.keyboard.wasPressed(pc.KEY_LEFT)) {
angle = -5;
} else if (this.app.keyboard.wasPressed(pc.KEY_RIGHT)) {
angle = 5;
}
/*
* Notice that pressing and holding the space bar makes the block
* continuously spin. isPressed() is used to detected if a
* key is down right now. So it will be true every frame as long as
* the key is still pressed.
*/
if (this.app.keyboard.isPressed(pc.KEY_SPACE)) {
angle = 1;
}
// Update the spinning cube
this.entity.rotateLocal(0, angle, 0);
};
/*
* Event handler called when key is pressed
*/
KeyboardHandler.prototype.onKeyDown = function (event) {
// Check event.key to detect which key has been pressed
if (event.key === pc.KEY_A && this.redMaterial) {
this.entity.render.meshInstances[0].material = this.redMaterial.resource;
}
// When the space bar is pressed this scrolls the window.
// Calling preventDefault() on the original browser event stops this.
event.event.preventDefault();
};
/*
* Event handler called when key is released
*/
KeyboardHandler.prototype.onKeyUp = function (event) {
// Check event.key to detect which key has been pressed
if (event.key === pc.KEY_A && this.whiteMaterial) {
this.entity.render.meshInstances[0].material = this.whiteMaterial.resource;
}
};
Есть два пути обнаружения ввода с клавиатуры. Первый делается в методе обновления ваших скриптов. Используйте isPressed()
иwasPressed()
и проверяйте нажата ли клавиша сейчас, или была нажата. Второй использует события отвечающие нажата или отпущена кнопка, как только это происходит.
isPressed
против wasPressed
В демо выше Вы можете видеть разницу в поведении между isPressed()
и wasPressed()
.
Когда вы нажимаете и удерживаете левую или правую стрелку мыши, куб вращается на 5° один раз. Всё потому, что wasPressed()
возвращает истину для кадра сразу после того, как клавиша была нажата.
Если Вы нажимаете и удерживаете пробел, можете увидеть, что куб вращается непрерывно на 1° каждый кадр. Потому как isPressed()
возвращает истину для каждого кадра, в котором нажата кнопка.
isPressed(клавиша)
isPressed(клавиша)
проверяет если клавиша в данный момент нажата и возвращает истину, если это так. Истина возвращается для каждого кадра, пока нажата кнопка.
wasPressed(клавиша)
wasPressed(клавиша)
смотрит, если клавиша была нажата с момента последнего кадра. wasPressed()
возвратит истину однажды для единичного нажатия на клавишу.
События
Второй метод обращения с нажатиями клавиш - это прослушивание событий. Два события клавиатуры поддерживаются на устройстве клавиатура:
pc.EVENT_KEYDOWN
pc.EVENT_KEYUP
DOM события клавиатуры реализованы по-разному в разных браузерах, поэтому движок PlayCanvas обеспечивает события объектом pc.Keyboard
, таким образом Вы можете использовать один код везде. Когда события с клавиатуры запущены, обработчик событий передаёт объект pc.KeyboardEvent
, который содержит информацию о коде клавиши: нажата ли она, либо отпущена.
Обратите внимание, третьим аргументом в on() мы передаём this
- сам экземпляр, выполняющий скрипт. Третий аргумент в on() использует this
для события обратного вызова, так что мы должны передать его здесь. В противном случае он будет применяться неправильному объекту.
Коды клавиш
Идентификация того, какая клавиша нажата выполняется использованием кодов клавиш. Это числовые значения, которые соответствуют клавишам на клавиатуре. Например, pc.KEY_A это кнопка A
, pc.KEY_LEFT - это стрелка влево.
Обратите внимание, что Вы всегда должны использовать перечисления pc.KEY_*
вместо использования числовых значений. Настоящее значение этих констант может измениться в будущем.
Попробуйте
Проверьте полноэкранный режим здесь или в начале страницы. Сравните нажатия и удержания стрелок на клавиатуре с нажатием и удержанием клавиши пробел.