На работе я занимаюсь созданием полезных навыков для Алисы, а в свободное время попробовал использовать голосового помощника для игры с друзьями, в домашней обстановке. Я уже описывал свою разработку текстовой игры для одного или двух игроков, а в этот раз делюсь опытом создания видеоигры для целой компании.
Правила игры
Не хотелось портировать существующую игру под Алису, хотелось придумать оригинальную игру, использующую возможность Алисы распознавать речь.
На экране возникает множество изображений в кружках и квадратиках разного цвета. Задача игрока — обнаружить пару объектов на одинаковом фоне и составить словосочетание вида: прилагательное + существительное. Причём прилагательное надо образовать из объекта в кружке, а существительное — из объекта в квадратике. Отсюда и название игры — “Круглый квадрат”.
Игрок, назвавший словосочетание, получает очки. Побеждает тот, кто набрал 10 очков или наибольшее количество очков за время раунда (2 минуты). Игровой процесс показан в коротком видео.
С правилами определились — переходим к технике.
Контроллеры
Для отображения игрового поля я использую большой телевизор, на котором открываю сайт игры. Если телевизор не имеет подключения к Интернету, можно вывести на него изображение с компьютера или поиграть на мониторе.
Визуальная часть игры написана на JavaScript. Все объекты: игровое поле и HUD — создаются методами Canvas 2D API для отрисовки прямоугольников, текста и изображений. Раз в 50 мс экран обновляется. Весь код сконцентрирован в единственном HTML-файле, в том числе перекодированные в формат Base64 картинки.
Теперь нужно реализовать интерфейс, принимающий фразы игроков. К счастью, задача распознавания речи решена голосовыми помощниками. Яндекс предоставляет такую услугу бесплатно для пользователей и разработчиков голосовых приложений (навыков) Алисы.
Добавляем навык игры в голосового помощника. Теперь каждый игрок может активировать голосовое приложение на собственном телефоне или в умной колонке и отправлять реплики на сайт через микрофон.
 |
 |
|---|
Бекенд
Осталось связать реплику пользователя с конкретной партией игры. Для этого нам потребуется сервер: для каждой партии генерируется номер, HTML-страница регистрирует его на сервере и отображает пользователю. Пользователь называет этот номер голосовому помощнику, а тот через веб-хук сервера регистрирует в соответствующей партии нового игрока. Последующие реплики пользователя передаются в его игру через WebSocket.
Клиентский код создания веб-сокета и переподключения при отсоединении выглядит так:
function start(websocketServerLocation){
ws = new WebSocket(websocketServerLocation);
ws.onopen = function(){
gameN = game.id;
};
ws.onclose = function(){
gameN = "--";
start(HOST);
};
wsSend({"gameId": game.id});
}
start(HOST);
При подключении к серверу клиент отправляет ему номер игры. Ниже показан серверный код, устанавливающий соединение и инициирующий управление игры с принятым номером:
const wss = new SocketServer({ server });
wss.on('connection', (ws) => {
ws.on('close', () => {
remConn(ws.gameId);
});
ws.on('message', msg => {
const data = JSON.parse(msg);
if (data.gameId) {
ws.gameId = data.gameId.toString();
addGame(ws);
}
});
});
При это один и тот же сервер может отдавать страницы браузером и отвечать на веб-хуки Алисы:
var server = express().use(bodyParser.json()).use('*', (req, res) => {
if (req.body && req.body.request) {
//Здесь подготовка ответа toAnswer на веб-хук
res.json({
version: req.body.version,
session: req.body.session,
response: toAnswer,
});
} else {
//отправка веб-страницы с игрой
res.sendFile(INDEX);
}
}).listen(PORT);
Заключение
Получилась оригинальная видеоигра для компании. Она была опубликована в Алисе 28 ноября 2018 года и стала первой из известных мне видеоигр для этого голосового помощника.
Кстати, ещё до появления Алисы и Google Ассистента люди ощутили фан от голосового управления в играх. Благодаря же повсеместному распространению устройств с микрофонами и динамиками, благодаря развитию речевых технологий, голосовые помощники становятся доступными игровыми контроллерами, предоставляющими новый пользовательский опыт.
