Web / HTML5 link
Ren'Py は Web ブラウザ上でのゲーム実行をサポートしています。これは、WebAssembly 向けにコンパイルされたバージョンの Ren'Py によって実行されており、可能な限り Ren'Py をブラウザ上で動作させられるようにします。このページでは、ブラウザでの動作の制限を説明して、あなたのゲームがうまく動作するように設計する手助けをするとともに、Web用にゲームをビルドする方法を説明します。
制限 link
ウェブブラウザ内で動作するすべてのゲームと同様に、Ren'Pyのゲームにもさまざまな制限があります。その中には、ブラウザのサンドボックスによって課されるものもあれば、ゲームを実行できるようにするまでにダウンロードする必要があるデータの量を減らすために選ばれているものもあります。
いくつかの制限とは次の物です :
ビデオはブラウザの組み込みの動画再生方法を使用して再生します。これは再生可能なフォーマットをブラウザでサポートされたものに制限し、
renpy.movie_cutscene()のみサポートされます。音声再生は高速なブラウザの音声フォーマットまたは低速だがより多くのフォーマットをサポートする Ren'Py 組み込みの音声を使用します。後の章を参照してください。
Web 版はマルチスレッドをサポートしていないため、
renpy.invoke_in_thread()のような関数や Python のthreadingモジュールはサポートされません。デスクトップやモバイルの Ren'Py では、画像をバックグラウンドでプリロード出来ますが、 Web 版では出来ないため、画像のロードがフレームレートの不具合を引き起こす可能性があります(訳注: v8.2.3 現在画像表示時に表示が乱れる場合が多いため、後述の progressive-downloading.txt の設定を推奨します)ネットワークはサポートされていません。これは意外かもしれませんが、ブラウザのサンドボックスは Ren'Py の任意のネットワーク要求を禁止します。つまり、ソケットとリクエストライブラリは、Webブラウザ上で実行するとエラーを返します。
Live2D はサポートされていません。
ゲームをホストする場所によってはさらに制限される可能性もあります。ホスティングプロバイダによっては、ゲームのサイズやプロジェクトの一部として含められるファイル数を制限しているところがあります。例えば、 itch.io はこれらの制限を記載しています。ブラウザは他にも制限を課しており、サイズが 50MB を超えるファイルはキャッシュされないので、ゲームが実行されるたびに大きなファイルがダウンロードされることになります。
対応ブラウザー link
私たちは、Chrome、Edge、Firefox、Safari などの常用ブラウザと、iOS や Android でのこれらのブラウザのモバイル版の最新版で Ren'Py が動作するように心がけています。他のブラウザでも Ren'Py が動作するかもしれませんが、それはそのブラウザが WebAssembly や Ren'Py が必要とするその他の機能をサポートしているかどうかによります。
Ren'Py は多くの最新のウェブ機能を必要としており、これらの機能がブロックされていたり、無効になっていると動作しません。
Ren'Py の動作を維持するように努めていますが、 Ren'Py はブラウザの能力の限界に挑戦しているため、ブラウザの変更によってゲームを実行できなくなる可能性があります。私たちはブラウザのベンダーと協力してブラウザが動作し続けるように努力していますが、ブラウザの変更によってゲームの更新が必要になる可能性もあります。
ゲームのパッケージング link
Ren'Pyのゲームは、ランチャーの「Web(Beta)」セクションを使用して、web用にパッケージ化できます。このセクションには、主に4つのオプションがあります。
- Web アプリケーションのビルドをする
これは、ウェブ用にあなたのゲームをパッケージングします。ゲーム全体を含む web.zip ファイルと、ゲームを構成する個々のファイルを含むフォルダを作成します(実際にはこのフォルダからのゲーム実行はサポートされておらず、ゲームはウェブサーバによってホストされる必要があります)。
- ビルドしてブラウザで開く
これは、ウェブ用にあなたのゲームをパッケージングし、テストのためにローカルウェブブラウザで起動します。ゲームを提供する web サーバーをコンピュータ上で実行し、その web サーバーにアクセスするブラウザを開きます。
これはあなたのゲームをテストする通常の方法となります。
- ブラウザで開く
ビルド処理はせず、コンピュータ上の web サーバーにアクセスする web ブラウザを開きます。
- ビルドしたディレクトリーを開く
ビルド処理で生成されたファイルを含むフォルダーを開きます。
生成されたフォルダー link
例えば、あなたのプロジェクトがrenpy/projects/main/yourprojectフォルダーにあるとします。すると、新しいrenpy/projects/main/yourproject-1.0-distsフォルダが見つかるでしょう。このフォルダには、yourproject-1.0-webサブフォルダと、このサブフォルダのzipファイルであるyourproject-1.0-web.zipファイルがあります。
ゲームのアップロード link
一旦ゲームをビルドしたら、公開サーバーにアップロードしなければいけません。 itch.io のようなゲームのホスティングサーバーに、ファイルのすべてを含んでいる web.zip ファイルをアップロードする必要があります。他のホスティングサーバーでは生成された web ディレクトリ内のすべてのファイルをアップロードする必要があります。
自身でゲームをホスティングしているなら、 web サーバーが application/wasm MIME タイプを使用して .wasm ファイルを提供するか確認してください。そうするとゲームのロードを高速化でき、警告の発生を防げます。
プレスプラッシュ link
Web プラットフォームはそのままでもデフォルトのプレスプラッシュ画像を使用します。上書きするには web-presplash, .jpg または .png, .webp を名前に持つ画像を用意してください。デフォルトのものを置き換えます。
必要ならアニメーションするプレスプラッシュ画像を .webp 形式で使用できます。
アイコン link
ウェブページのアイコンは、 web-icon.png という名前で画像ファイルをプロジェクトのベースディレクトリーに置いてカスタマイズできます。この画像の解像度は512x512以上で、幅と高さは等しくなければなりません。カスタム画像が指定されないとデフォルトの Ren'Py アイコンが使用されます。
プログレッシブダウンロード 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/**
このファイルはどのファイルがゲーム開始前にダウンロードされ、どのファイルが要求時にダウンロードされるかを決定します。 #で始まる行はコメントです。 - で始まる行はゲームが始まるときにダウンロードされ、通常は開始画面で使用されるファイルに使用されます(訳注 v8.2.3 現在 本編中使用する画像であっても開始時にダウンロードすることを推奨します)。 + で始まる行は必要な時にダウンロードされるファイルです。
2 列目はファイルのタイプと Ren'Py がこれらのタイプをどう扱うかを決定します。タイプは次となります :
- image
画像ファイルは、その画像にピクセレーションを適用したバージョンに置き換えられ、その画像の読み込み後に完全な画像に置き換えられます。多くの場合、Ren'Py は画像を予測して完全な画像が必要になる前に読み込めるので、ピクセレーションを適用された画像はこの読み込みが間に合わなかった場合にのみ表示されることになります。
完全な画像がまったく読み込まれないなら、間違ったデータがwebサーバーにある可能性があります。
- music
音声ファイルは無音ファイルに置き換えられ、読み込み完了後に再生されます。
- voice
ボイスファイルは無音ファイルに置き換えられ、読み込み完了後に再生されます。
最後に、最後の列はマッチするパスとなります。
オーディオとビデオ link
広告の音声再生停止を意図したブラウザの制限のため、ゲーム内をユーザーが少なくとも一回はクリックするまでは効果音と音楽のファイルは再生されません。
Ren'Py では音声ファイルを再生するのに2つの方法があります。1つめはブラウザの web 音声システムの使用であり、2つ目は自前の再生システムの使用です。web音声システムはより高速ですが、 Safari では OGG 形式はサポートされません。
config.webaudio_required_types 変数はブラウザがサポートするタイプを調べてどの音声システムが使用されるかを制御します。ゲームで mp3 のみ使用するなら、次のように変更します
define config.webaudio_required_types = [ "audio/mpeg" ]
ビデオの再生もサポートされます。2つの変数でこれを制御します。 :
config.web_video_baseこれはウェブブラウザ上でムービーを再生するとき、ムービーファイル名に追加して再生するムービーの完全な URL になる URLです。ディレクトリを含められるので "https://share.renpy.org/movies-for-mygame/" ともできます。
これはあなたのゲームの残りと異なるサーバーで動画をホストしたいならば便利です。
config.web_video_promptiOS 上のモバイルの Safari では、デフォルトでは音声付きのムービーを再生するにはクリックが必要です。この変数はプレイヤーにクリックを促すのに使用されるメッセージを与えます。
Safari に関連する機能がまだ 1 つあります。 Safari は webm のような近代的なフォーマットをサポートしないので、 webvideo のサポートは古くなります。このため最初に読み込みに失敗すると URL の拡張子付を .mp4 に置き換えて試します。つまり Safari では https://share.renpy.org/oa4_launch.webm が未サポートなので読み込みに失敗し、 https://share.renpy.org/oa4_launch.mp4 があればそれを試します。
Javascript link
emscripten の 3 つの関数を使用して Ren'Py は Javascript を実行できます。このモジュールは web ブラウザ内で実行されているときのみあり、テストは renpy.emscripten を使用してできます。使用前にはモジュールのインポートが必要です。
- emscripten.run_script(script) link
指定の Javascript のスクリプトを実行します。これは結果を返しません。
- emscripten.run_script_int(script) link
指定の Javascript スクリプトを実行し、整数として結果を返します。
- emscripten.run_script_string(script) link
指定の Javascript スクリプトを実行し、文字列として結果を返します。
web/index.html ファイルを編集して Ren'Py が呼び出せるスクリプトを記述してゲームに javascript の関数を追加できます。このファイルは Ren'py の更新時に置き換えられるので注意してください。
Javascript は window.renpy_exc や window.renpy_get, window.renpy_set 関数を使用して Ren'Py でも実行できます。これらの関数のドキュメントは web/renpy-pre.js を参照してください。
バイトコードキャッシュ link
Ren'Py 8.1 ではダウンロード前に python を バイトコードにコンパイルする必要があるため、読み込みには時間がかかります。これを避けるには、次のようにしてバイトコードのキャッシュを所得します。 :
ブラウザでゲームを開き、プレスプラッシュの表示中に F12 を押して javascript コンソールを開きます。
javascript コンソールで
downloadBytecode()を入力してください。ブラウザにbytecode-311.rpybをダウンロードさせます。これをゲームの
game/cacheディレクトリに設置して再ビルドしてください。