ブラウザ版出力の手順(Ver12.2.0)

Last-modified: 2021-05-16 (日) 19:50:43


ブラウザ版(WebGL)の概要

Ver10.6.0において、ブラウザ版の大幅アップデートが提供され、C++版とほとんど同じ機能が使えるようになりました。

  • 動作環境
    • 「WebAssembly」「WebGL 2」をサポートするブラウザ
      なお、SafariはWebGL2に対応していません。
  • C++版との違い
    • テキスト入力が未実装。
    • コマンド「開く」はURLのみ使用可能。
    • LuaスクリプトがPC上での実行を前提としている場合には問題が発生する可能性がある。
    • ページをクリックするまで音楽は再生されない。
    • コマンド「セーブ情報継承」を適用しなければセーブデータを読込まない。
    • 作品開始時にすべてのリソースの読込みが行われるため、ネット速度とリソース量の影響が大きい。
    • 最大FPSが60前後。
    • サーバーで配信する場合には、WebAssemblyを使用するためにレスポンスヘッダーでの設定が必要。
      • 「Cross-Origin-Opener-Policy」は「same-origin」に設定。
      • 「Cross-Origin-Embedder-Policy」は「require-corp」に設定。

ブラウザ版のデータ作成の手順

ブラウザ版はエディターでの出力後に制作者側でリソースの圧縮を行う必要があります。

  • 作品リソースの圧縮には「emsdk」「python 3」「cmder」が必要となります。
    • emsdk
      GitHubのページからダウンロードをして解凍しておきます。
      解凍したフォルダはわかりやすい場所に移動させておきましょう。
    • Python 3
      Pythonの公式配布ページからダウンロードをして解凍しておきます。
      • インストールの途中にある「Add Python (各バージョンの数字) to PATH」にはチェックを入れてください。
      • セットアップ終了時にある「Disable path length limit」は選択しておいてください。
    • cmder
      公式ページからダウンロードをして解凍しておきます。
      解凍したフォルダ内の「Cmder.exe」を起動し、以下のコマンドを順番に実行します。
      • python --version
        Python のバージョンが表示されることを確認してください。
      • cd (emsdkの場所)
        emsdkが収められているフォルダの絶対パスを指定します。
      • emsdk install latest
        emsdkのインストールを行います。
      • emsdk activate latest
        emsdkの起動を行います。
      • emsdk_env.bat
        このバッチファイルの実行でデータ圧縮の準備は完了です。
  • 圧縮自体はcmderで行います。上記の作業は初回のみ必要で、2回め以降の圧縮はここから作業を開始します
    • cmderの起動後、以下のコマンドを実行します。
      完了すると、cmderのフォルダ内にファイル「loader.js」「project.data」が作成されています。それらを出力した作品フォルダへコピペすれば、データの圧縮は完了です。
      • cd (Light.vn作品フォルダ)\Data
        出力した作品フォルダの絶対パスを指定します。
      • py (emsdk設置先)\upstream\emscripten\tools\file_packager.py project.data --js-output=loader.js --preload .
        emsdkが収められているフォルダの絶対パスを指定します。
  • cmderで作品の動作が確認できます。Pythonでも確認ができます(localhost:8000)。
    • cmderの起動後、以下のコマンドを実行します。
      • cd (Light.vn作品フォルダ)
        作品フォルダの絶対パスを指定します。
      • py server.py
        ローカルサーバーが起動します。「Listening on port (ポート番号).」と表示され、このポート番号を次で用います。
    • ブラウザ内でアドレスに「localhost:(ポート番号)」を入力して実行すると作品が開始されます。

配布サイトへのアップロード

配布サイトにはファイル「server.py」とフォルダ「Data」はアップロードしません。
前者はローカルサーバーでの確認用であり、後者はすでに圧縮されてファイル「project.data」となっているため不要です。
したがって、「index.html」「LightApp.js」「LightApp.wasm」「LightApp.worker.js」「loader.js」「MyCore.bc」「project.data」「WebCore.css」「WebCore.js」をアップロードすれば、作業は完了です。