Web / HTML5 link

Ren’Py支持在Web浏览器上运行游戏。该功能是在某个版本Ren’Py已完全编译为 WebAssembly，实现了浏览器端运行大多数Ren’Py的大部分要求。本页面解释了在浏览器上运行的一些限制，帮助创作者在设计阶段就避免踩坑；同时也解释了打包Web端程序的方法。

限制 link

与其他运行在Web浏览器上的游戏类似，Ren’Py游戏也有一些限制。其中一些是浏览器内部的沙盒机制导致，另一些则是出于游戏运行需要下载数据的考量。

具体限制包括：

使用浏览器内建视频播放器播放视频文件。 renpy.movie_cutscene() 可以支持的视频格式，不一定也可以在Web浏览器里播放。
使用浏览器支持的音频格式播放音频文件更快。使用Ren’Py内的音频播放器慢一些，但是能用的格式更多。详见后续章节。
Web端不支持多线程，因此 renpy.invoke_in_thread() 函数和Python模块 threading 不能使用。某些游戏的性能表现也会下降，在电脑和手机上运行Ren’Py可以在后台预加载，但Web端不行。因此Web端加载图像时可能会掉帧。
网络功能也不支持。虽然听起来很让人震惊，但浏览器的沙盒环境不允许Ren’Py发起网络请求。这表示使用socket端口和requests库在Web浏览器上都会报错。

除此之外，还有一些限制是由服务器主机造成的。有些主机对单个项目的游戏大小和文件总数量有限制。例如 itch.io 就有这样的限制。浏览器则有其他限制：超过50MB大小的文件不会被cache缓存，因此较大的文件每次运行游戏都要重新下载。

支持的浏览器 link

我们尽力让Ren’Py能运行在一些主流网页浏览器的近期版本上，比如Chrome、Edge、Firefox和Safari，以及这些浏览器的iOS和安卓版本。 Ren’Py也可能在其他浏览器上运行，但主要取决于那些浏览器对WebAssembly的支持，已经其他的Ren’Py功能要求。

Ren’Py不会使用Web端近期的一些花里胡哨的功能特性，所以不在乎那些功能是否被禁用。

While we try to keep Ren’Py running, Ren’Py can push the edge of what a browser is capable of, and so it’s possible that changes to the browsers will render them incapable of running games. (译者注：上一句是吹牛逼内容。)

我们会更随各种浏览器更新，尽可能确保浏览器能正常运行Ren’Py，但依然存在每次浏览器的某次变更后可能要求游戏更新。

游戏打包 link

在启动器使用Web(Beta)选项就能生成Web平台的包了。其中有4个主要选项。

构建网页应用

选择该项会生成一个Web平台的包(package)。最终结果是一个包含整个游戏的 web.zip 文件，以及一个包含游戏中各资源文件的文件夹。 (实际上不能在文件夹中运行游戏，需要一个Web服务器的host服务。)

构建应用并在浏览器中打开

选择该项会生成一个Web平台的包(package)，并使用本地Web浏览器打开并测试。你的电脑上会自动运行一个Web服务以装载游戏，然后使用浏览器接入该Web服务。

这是测试游戏的常用方式。

在浏览器中打开

选择该项，不经过完整的构建流程，直接尝试用你电脑的本地Web浏览器接入Web服务i

打开构建目录

选择该项，会打开构建后包含生成文件的目录。

上传游戏 link

正确构建游戏后，你需要找个公共Web服务器并上传。像 itch.io 之类的平台，你需要上传 web.zip 文件，该文件包含所有游戏所有资源。其他平台可能需要上传web文件夹里的所有内容。

如果你为自己的游戏搭建了主机，需要确保自己的Web服务中的 .wasm 文件使用 application/wasm MIME 类型。这样设置可以更快加载游戏，并且防止运行时的警告(warning)信息。

presplash link

Web平台原生使用默认的preslash图片。若要更换，需要提供一个名为 web-preslash 的图片，图片后缀可以是 .jpg、.png 或 .webp。该图片会替换默认的preslash并显示。

.webp 格式文件，可以是多帧动画。

Icon link

If no custom image is given, the default Ren’Py icon is used. 在项目根目录中放入名为 web-icon.png 的图片文件，就更改了Web版本的页面图标。该图标文件必须宽高相等，并且分辨率不小于512×512像素。

流程化下载 link

Ren’Py支持流程化下载功能特性，可以在项目底层目录中的 progressive_download.txt 文件中。如果文件不存在，则在首次打包web平台的包是将创建该文件。文件的默认内容如下：

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

该文件的内容决定了，那些文件要在游戏开始前下载，那些文件根据游戏进度下载。 # 符号开头的那些是注释。以减号“-”开头的行，表示要在游戏开始前下载，通常是一些开场界面就会用到的资源文件。以加号“+”开头的行，表示会根据实际需要下载。

文件的第二列表示文件类型，以及Ren’Py的处理方式。具体类型包括：

image

图片文件会生成一个低像素的版本，并在加载时用于代替完整的图片。在很多情况下，Ren’Py可以预加载图片并在需要显示完整图像时直接加载。所以低像素图片只会在短时间内没法加载完整图片时出现。

如果完整图片始终无法加载，那可能是Web服务器上有错误数据。

music

只有整个音乐文件加载完成后才开始播放。

voice

只有整个语音文件加载完成后才开始播放。

最后一列表示文件所在目录。

音频与视频 link

由于浏览器总是会阻止广告播放声音，音效和音乐文件只有在用户至少点击一点游戏后才开始播放。

Ren’Py有两种方式播放音频文件。第一种是使用浏览器内置的webaudio系统，第二种是使用自身的音频播放系统。 webaudio系统速度更快，但在Safari浏览器上，ogg格式的音频无法播放。

配置项 config.webaudio_required_types 决定使用哪种音频系统。如果游戏中只使用mp3文件，可以这样配置：

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

播放视频时，有两个相关控制配置项：

config.web_video_base

该项是一个URL链接，与影片文件名相连后得到完整的视频播放链接地址。可以包括子目录，比如 “https://share.renpy.org/movies-for-mygame/” 。

如果需要把视频文件与游戏本体放在不同服务器上的话，该配置项就派上用场了。

config.web_video_prompt

iOS系统手机版Safari上运行时，用户需要点击后才能播放带音频的影片。该配置项是提示用户点击的消息。

还有一个与Safari有关的功能特性。Safari不支持一些流行的视频格式，比如webm。首次尝试播放视频失败后，会把视频文件后缀改为 .mp4 并再次尝试播放。在Safari上的具体情况就是，https://share.renpy.org/oa4_launch.webm 会尝试播放并由于不支持而失败，然后认为 https://share.renpy.org/oa4_launch.mp4 文件必定存在并尝试播放。

Javascript link

Ren’Py可以通过 emscripten 模块中的3个函数运行Javascript。 emscripten模块仅在Web浏览器端才会被使用。可以使用 renpy.emscripten 的值测试，根据结果决定在使用前是否还需要引入emscripten模块。

emscripten.run_script(script) link: 运行指定的Javascript脚本。不会有返回值。

emscripten.run_script_int(script) link: 运行指定的Javascript脚本，将运行结果作为一个整型数值返回。

emscripten.run_script_string(script) link: 运行指定的Javascript脚本，将运行结果作为一个字符串返回。

编辑 web/index.html 文件可以将Javascript函数添加到游戏中，并在Ren’Py中调用。注意，该文件会在Ren’Py更新后被自动替换。

也可以在Ren’Py中使用 window.renpy_exc、window.renpy_get 和 window.renpy_set 函数调用Javascript。关于这些函数的说明，可以在 web/renpy-pre.js 中找到。

字节码缓存 link

在Ren’Py 8.1版本中，加载时间可能比想象得更长，因为Ren’Py需要把Python代码编译为字节码(bytecode)然后再下载。为了避免加载时间过长的问题，可以使用字节码缓存：

在浏览器中打开游戏。当加载preslash界面时，按下键盘的F12键，打开javascript控制台。
在javascript控制台，输入 downloadBytecode()。然后浏览器会下载 bytecode-311.rpyb。
将下载的 bytecode-311.rpyb 文件放在 game/cache 目录中，然后重新构建游戏。