Как добавить русский язык в игру: надписи, шрифты и ИИ-напарник
Чтобы в игре появились русские надписи, нужны две вещи: текст в кодировке UTF-8 и шрифт, в котором есть кириллица. Если с первым почти всегда всё в порядке, то со вторым ребёнок иногда сталкивается неожиданно: игра запускается без ошибок, а на экране вместо «Счёт: 5» пусто или набор квадратиков. Ниже — почему так бывает и что с этим делать, даже если ребёнок пока не умеет писать код сам.
Почему русские буквы в игре пропадают?
Причин две, и они совсем разные.
Кодировка. Когда игра работает в браузере, файл index.html должен сообщить браузеру, в какой кодировке написан текст. Для этого в начале страницы стоит строка <meta charset="utf-8">. Без неё русские буквы могут превратиться в «кракозябры». ИИ-напарник обычно добавляет эту строку сам, но если на экране странные знаки, проверить её стоит первой.
Шрифт. У каждого шрифта свой набор символов. Если нужной буквы в нём нет, игра её просто не нарисует. Самый наглядный пример — движок Pyxel для ретро-игр на Python: его встроенный шрифт умеет только латиницу и цифры. Команда pyxel.text(4, 4, "СЧЁТ", 7) не выдаст ошибку, а на экране будет пусто. Именно поэтому в таких играх привычно видеть SCORE, LIFE и GAME OVER.
Как с этим справиться: три рабочих способа
| Способ | Подходит для | Что важно знать |
|---|---|---|
| Игра в браузере (JavaScript + Phaser) | Игры, которые открываются по ссылке | Системные шрифты вроде Arial уже содержат кириллицу, русский текст работает сразу |
| Надписи латиницей | Ретро-игры на Pyxel | Проще всего: SCORE, GAME OVER понятны любому игроку |
| Свой шрифт | Когда нужен именно русский текст в Pyxel | Это задача посложнее, лучше брать её после первой готовой игры |
Для первой игры мы советуем не усложнять: на Pyxel оставить английские слова на экране, а русский использовать там, где он работает без хитростей. Например, название окна игры можно написать по-русски: его рисует не движок, а система. Ещё одна идея для ретро-игры — нарисовать слово «Победа!» картинкой в графическом редакторе, как рисуют героя.
Как сделать русский текст в игре на Phaser?
Phaser — библиотека для игр, которые запускаются прямо в браузере. Текст в ней выводится одной строкой кода, и русские буквы работают так же, как английские:
this.add.text(16, 16, 'Счёт: 0', {
fontFamily: 'Arial, sans-serif',
fontSize: '24px',
color: '#ffffff',
});
Если хочется чего-то красивее стандартного Arial, подключите шрифт с поддержкой кириллицы, например Nunito с Google Fonts. Выбирая шрифт, смотрите, чтобы в его описании были русские буквы: у многих декоративных шрифтов их нет, и вы получите ту же пустоту, что и в Pyxel. Проверка простая: напишите в игре длинную фразу со всеми русскими буквами, включая «ё», «ъ», «ы», и убедитесь, что ни одной не потерялось.
Как попросить об этом ИИ-напарника?
В вайбкодинге ребёнок не пишет код сам, а объясняет задачу словами. Для русского текста подойдёт такой запрос:
Сделай все надписи в игре на русском: счёт, жизни, «Игра окончена» и подсказку «R — заново». Выведи тексты в отдельный объект в начале файла, чтобы я мог поменять их в одном месте. Используй шрифт, в котором есть русские буквы. Когда закончишь, запусти игру и скажи, что я должен увидеть.
Что здесь работает:
- Конкретный список надписей. ИИ не угадывает, где нужен текст, а делает ровно то, что названо.
- Все тексты в одном месте. Потом ребёнок сам исправит опечатку или придумает смешную надпись, не разбираясь во всём коде. Если когда-нибудь захочется сделать вторую версию игры на английском, достаточно будет заменить этот список.
- Просьба проверить. Напарник запускает игру и описывает результат, а ребёнок сравнивает с тем, что видит сам.
Если надписи всё равно не появились, не стоит переписывать код вручную. Скажите напарнику, что именно видите: «вместо «Счёт» пусто» или «вместо русских букв квадраты». Он умеет объяснять ошибки и подскажет, нужно ли менять шрифт.
Где это пригодится на нашей платформе
В треке «Игры и мультиплеер» на платформе VibecodingKids участник сначала делает ретро-игру на Pyxel, а затем игру в браузере на Phaser. Ограничение Pyxel с русскими буквами разбирается прямо в задании, а в браузерной игре русские подписи ставятся без обходных путей. Подробнее о том, как вообще подойти к первой игре, — в статье «Как ребёнку сделать свою игру».
Частые вопросы
Нужно ли ребёнку знать английский, чтобы делать игры? Нет. Задачу можно описать по-русски, а ИИ-напарник понимает русский. Английские слова на экране в ретро-играх вроде SCORE ребёнок быстро запоминает как игровые обозначения.
Почему в игре вместо русских букв квадраты? Скорее всего, выбранный шрифт не содержит кириллицы. Замените его на другой, например на Arial, или попросите напарника подобрать шрифт с русскими буквами.
Какой компьютер нужен? Подойдёт Windows или macOS. Для 2D-игр мощное устройство не требуется.
С чего начать бесплатно
Если хочется сначала попробовать подход без вложений, начните с бесплатного трека «Мультики: первый шаг»: 4 задания, и в конце у ребёнка мультфильм, где главный герой — его аватар. Доступ по заявке, приглашение приходит в течение дня. Заодно можно прочитать, как ИИ помогает делать мультфильмы.
