Web / HTML5

Ren'Py поддерживает запуск игр в веб-браузере. Это достигается с помощью версии Ren'Py, скомпилированной в WebAssembly, что позволяет выполнять в браузере как можно большую часть Ren'Py. На этой странице будут объяснены некоторые ограничения запуска в браузере, даны советы по разработке игры для хорошей работы в вебе и описано, как собрать вашу игру для веба.

Ограничения

Как и все игры, работающие в веб-браузере, игры на Ren'Py имеют ряд ограничений. Некоторые из них налагаются песочницей браузера, в то время как другие были выбраны, чтобы уменьшить объём данных, который необходимо загрузить перед запуском игры.

Некоторые ограничения:

• Воспроизведение видео осуществляется с помощью встроенного в браузер проигрывателя. Это ограничивает форматы, которые могут быть воспроизведены, теми, которые поддерживаются веб-браузером, и поддерживается только renpy.movie_cutscene().

• Воспроизведение аудио может использовать аудиоформат браузера, что быстро, или может использовать встроенную систему воспроизведения аудио Ren'Py, которая медленнее, но поддерживает больше форматов. См. раздел ниже.

• Веб-порт не поддерживает многопоточность, поэтому функции вроде renpy.invoke_in_thread() и Python-модуль threading не поддерживаются. Это также может ограничивать производительность некоторых игр — на десктопных и мобильных платформах Ren'Py может предзагружать изображения в фоновом режиме, но на веб-порте это невозможно, и поэтому загрузка изображений может вызывать падение частоты кадров.

• Сетевые функции не поддерживаются. Это может показаться удивительным, но песочница браузера не позволяет Ren'Py делать произвольные сетевые запросы. Это означает, что сокеты и библиотека requests будут возвращать ошибки при запуске в веб-браузере.

• Live2D не поддерживается.

Кроме того, есть некоторые ограничения, которые могут быть вызваны тем, где вы размещаете свою игру. Некоторые хостинг-провайдеры ограничивают размер игры и количество файлов, которые могут быть включены в проект. Например, itch.io документирует эти ограничения. Браузеры накладывают другие ограничения — файлы размером более 50 МБ не будут кэшироваться, что означает, что большие файлы будут загружаться каждый раз при запуске вашей игры.

Поддерживаемые браузеры

Мы стараемся поддерживать работу Ren'Py в последних версиях вечнозелёных браузеров, таких как Chrome, Edge, Firefox и Safari, а также в мобильных версиях этих браузеров на iOS и Android. Ren'Py может работать и в других браузерах, но это зависит от поддержки браузером WebAssembly и других функций, необходимых Ren'Py.

Ren'Py требует множество современных веб-функций и поэтому не будет работать, если эти функции заблокированы или отключены.

Хотя мы стараемся поддерживать работу Ren'Py, Ren'Py может использовать возможности браузера на пределе, и поэтому возможно, что изменения в браузерах сделают их неспособными запускать игры. Мы работаем с разработчиками браузеров, чтобы обеспечить их работоспособность, но возможно, что изменение в браузере потребует обновления вашей игры.

Сборка игры

Игры Ren'Py можно упаковать для веба, используя раздел "Web (Beta)" в лаунчере. В нём есть четыре основные опции.

Собрать веб-приложение (Build Web Application)

Эта опция упаковывает вашу игру для веба. Будет создан файл web.zip, содержащий всю вашу игру, и папка, содержащая каждый из отдельных файлов, составляющих вашу игру. (Запуск игры непосредственно из этой папки не поддерживается, так как игра должна быть размещена на веб-сервере.)

Собрать и открыть в браузере (Build and Open in Browser)

Эта опция упаковывает вашу игру для веба, а затем открывает её в локальном веб-браузере для тестирования. На вашем компьютере будет запущен веб-сервер, который будет отдавать игру, а затем откроется браузер, обращающийся к этому веб-серверу.

Это обычный способ тестирования вашей игры.

Открыть в браузере (Open in Browser)

Эта опция открывает локальный веб-браузер, который обращается к веб-серверу на вашем компьютере, без полного процесса сборки.

Открыть папку сборки (Open build Directory)

Эта опция открывает папку, содержащую файлы, созданные в процессе сборки.

Сгенерированные папки

Допустим, ваш проект находится в папке renpy/projects/main/yourproject. Тогда вы найдёте новую папку renpy/projects/main/yourproject-1.0-dists. Эта папка содержит подпапку yourproject-1.0-web, и её заархивированную версию, файл yourproject-1.0-web.zip.

Загрузка игры

После того как вы собрали игру, вам нужно будет загрузить её на общедоступный веб-сервер. Для игровых хостингов, таких как itch.io, вам нужно будет загрузить файл web.zip, который содержит все файлы. Для других вариантов хостинга вам нужно будет загрузить каждый файл из сгенерированного каталога web.

Если вы размещаете игру самостоятельно, убедитесь, что ваш веб-сервер отдаёт файлы .wasm с MIME-типом application/wasm. Это ускорит загрузку игры и предотвратит появление предупреждения.

Некоторые веб-хосты могут отклонять файл game.zip. В таком случае переименуйте его в game.data и отредактируйте index.html, изменив game.zip на game.data.

Предзагрузочное изображение (Presplash)

Веб-платформа по умолчанию использует стандартное предзагрузочное изображение. Чтобы его переопределить, вы можете предоставить изображение с именем web-presplash в формате .jpg, .png или .webp, и оно заменит стандартное.

Формат .webp позволяет использовать анимированное предзагрузочное изображение, если это необходимо.

Иконка

Иконку веб-страницы можно настроить, поместив файл изображения с именем web-icon.png в базовый каталог вашего проекта. Это изображение должно иметь минимальное разрешение 512x512, а его ширина и высота должны быть равны. Если пользовательское изображение не предоставлено, используется стандартная иконка Ren'Py.

Прогрессивная загрузка

Ren'Py поддерживает функцию прогрессивной загрузки, которая настраивается путем редактирования файла с именем progressive_download.txt в базовом каталоге вашего проекта. Если этого файла не существует, он будет создан при первой сборке вашей игры для веба. Содержимое этого файла по умолчанию таково:

# RenPyWeb progressive download rules - first match applies"
# '+' = progressive download, '-' = keep in game.data (default)
# See https://www.renpy.org/doc/html/build.html#classifying-and-ignoring-files for matching
#
# +/- тип путь
- image game/gui/**
+ image game/**
+ music game/audio/**
+ voice game/voice/**

Этот файл определяет, какие файлы загружаются до начала игры, а какие — по мере необходимости. Строки, начинающиеся с #, являются комментариями. Строки, начинающиеся с -, соответствуют файлам, которые должны быть загружены при запуске игры — обычно это файлы, используемые на начальном экране. Строки, начинающиеся с +, соответствуют файлам, которые должны загружаться по мере необходимости.

Второй столбец определяет тип файла и то, как Ren'Py обрабатывает эти файлы. Типы бывают следующими:

image

Файлы изображений заменяются пикселизированной версией изображения, а затем заменяются полным изображением, когда оно загружается. Во многих случаях Ren'Py может предсказать и загрузить изображение до того, как оно понадобится, поэтому пикселизированное изображение будет видно только тогда, когда эта загрузка не может завершиться вовремя.

Если полное изображение так и не загружается, вероятно, на веб-сервере находятся неверные данные.

music

Музыкальные файлы заменяются тишиной и начинают воспроизводиться после завершения загрузки.

voice

Голосовые файлы заменяются тишиной и начинают воспроизводиться после завершения загрузки.

Наконец, последний столбец — это путь для сопоставления.

Аудио и видео

Из-за ограничений в браузере, предназначенных для предотвращения воспроизведения аудио в рекламе, звуковые и музыкальные файлы не будут воспроизводиться, пока пользователь хотя бы раз не кликнет внутри игры.

В Ren'Py есть два способа воспроизведения аудиофайлов. Первый — использовать систему webaudio внутри браузера, а второй — использовать собственную систему воспроизведения аудио. Система webaudio быстрее, но в Safari формат OGG не поддерживается.

Переменная config.webaudio_required_types контролирует, какая аудиосистема используется, проверяя браузер на поддерживаемые им типы. Если ваша игра использует только mp3, это можно изменить с помощью:

define config.webaudio_required_types = [ "audio/mpeg" ]

Воспроизведение видео также поддерживается. Его контролируют две переменные:

config.web_video_base

Это URL, который добавляется к имени файла видео, чтобы получить полный URL для воспроизведения видео. Он может включать в себя каталоги, так что "https://share.renpy.org/movies-for-mygame/" также будет допустимым значением.

Это полезно, если вы хотите разместить видео на другом сервере, отличном от сервера с остальной частью вашей игры.

config.web_video_prompt

В Mobile Safari на iOS по умолчанию игроку потребуется нажать, чтобы воспроизвести видео со звуком. Эта переменная задаёт сообщение, которое используется для того, чтобы предложить игрокам нажать.

Есть ещё одна функция, связанная с Safari. Поскольку Safari не поддерживает современные форматы, такие как webm, поддержка веб-видео имеет запасной вариант (fallback). Если первая попытка не удалась, будет предпринята попытка загрузить URL с расширением, заменённым на .mp4. В Safari произойдет следующее: будет предпринята попытка загрузить https://share.renpy.org/oa4_launch.webm, она не удастся как неподдерживаемая, а затем, если он существует, будет предпринята попытка загрузить https://share.renpy.org/oa4_launch.mp4.

Javascript

Ren'Py может выполнять Javascript с помощью трёх функций в модуле emscripten. Этот модуль доступен как renpy.emscripten при запуске на веб-платформе. При запуске не на веб-платформе renpy.emscripten имеет значение False.

renpy.emscripten.run_script(script)

Выполняет указанный Javascript-скрипт. Эта функция не возвращает результат.

renpy.emscripten.run_script_int(script)

Выполняет указанный Javascript-скрипт и возвращает его результат в виде целого числа.

renpy.emscripten.run_script_string(script)

Выполняет указанный Javascript-скрипт и возвращает его результат в виде строки.

Вы можете добавлять функции Javascript в свою игру, редактируя файл web/index.html и включая скрипты, которые будет вызывать Ren'Py. Обратите внимание, что этот файл может быть заменён при обновлении Ren'Py.

Javascript также может вызывать Ren'Py с помощью функций window.renpy_exc, window.renpy_get и window.renpy_set. Для ознакомления с документацией по этим функциям, пожалуйста, прочитайте web/renpy-pre.js.

Меню-гамбургер

Меню-гамбургер — это меню, которое появляется в верхнем левом углу игры. У него есть три опции:

Импорт сохранений (Import saves)

Позволяет пользователю загружать файлы сохранений Ren'Py и персистентные данные в веб-браузер.

Экспорт сохранений (Export saves)

Позволяет пользователю скачать zip-файл со своими сохранениями и персистентными данными. Этот файл можно загрузить в другой веб-браузер, сохранить для резервного копирования или даже распаковать и загрузить в десктопную версию игры.

Лог Ren'Py (Ren'Py log)

Скачивает лог Ren'Py, который содержит отладочную информацию.