- PVSM.RU - https://www.pvsm.ru -

На работе я занимаюсь созданием полезных навыков для Алисы [1], а в свободное время попробовал использовать голосового помощника для игры с друзьями, в домашней обстановке. Я уже описывал свою разработку текстовой игры [2] для одного или двух игроков, а в этот раз делюсь опытом создания видеоигры для целой компании.
Не хотелось портировать существующую игру под Алису, хотелось придумать оригинальную игру, использующую возможность Алисы распознавать речь.
На экране возникает множество изображений в кружках и квадратиках разного цвета. Задача игрока — обнаружить пару объектов на одинаковом фоне и составить словосочетание вида: прилагательное + существительное. Причём прилагательное надо образовать из объекта в кружке, а существительное — из объекта в квадратике. Отсюда и название игры — “Круглый квадрат”.
Игрок, назвавший словосочетание, получает очки. Побеждает тот, кто набрал 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);
Получилась оригинальная видеоигра для компании. Она была опубликована в Алисе [3] 28 ноября 2018 года и стала первой из известных мне видеоигр для этого голосового помощника.
Кстати, ещё до появления Алисы и Google Ассистента люди ощутили фан от голосового управления в играх [4]. Благодаря же повсеместному распространению устройств с микрофонами и динамиками, благодаря развитию речевых технологий, голосовые помощники становятся доступными игровыми контроллерами, предоставляющими новый пользовательский опыт.
Автор: IvanGolubev
Источник [5]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/yandeks/304139
Ссылки в тексте:
[1] полезных навыков для Алисы: https://rb.ru/opinion/podruzhit-s-alisoj/
[2] разработку текстовой игры: https://habr.com/post/414213/
[3] опубликована в Алисе: https://dialogs.yandex.ru/store/skills/fad0696b-videoigra-kruglyj-kvadrat
[4] голосового управления в играх: https://life.ru/t/%D0%B8%D0%B3%D1%80%D1%8B/981550/ighra_s_gholosovym_upravlieniiem_pokorila_aziiu
[5] Источник: https://habr.com/post/435012/?utm_campaign=435012
Нажмите здесь для печати.