ブラウザ版の出力方法

Last-modified: 2022-07-18 (月) 23:22:02


ブラウザ版(WebGL)の概要

  • ver10.6.0において、ブラウザ版の大幅アップデートが提供され、C++版とほとんど同じ機能が使えるようになりました。
  • 動作環境
    • 「WebAssembly」「WebGL 2」をサポートするブラウザ「Chrome」「Firefox」など。
    • iOS12~14.8の場合は、Safariの設定 「advanced」>「experimental features」>「webgl2.0」にチェックを入れることで「Safari」での動作が可能になります。
      iOS15以上の場合は最初からチェックが入ってるようです。

      要動作検証



  • C++版との違い
    • ページをクリックするまで音楽は再生されない。
      この流れを自然に回避するために、ロゴ画面や注意書き画面で1回クリックさせてからタイトル画面にジャンプするようにするとスムーズかつエレガントなムーブにすることができます。



    • 「SaveData」フォルダは作成されません。
    • コマンド「セーブ情報継承」を適用しなければセーブデータを読込みません。
      一番最初に読み込むスクリプト(スタートスクリプト)の一番上に「セーブ情報継承 0 60」と記述しておきましょう。
      「60」はデフォルトのセーブ総数の数値です。

      ※「セーブ情報継承」コマンドはver10.8.0以降の実装となっています。



    • ブラウザでは指定素材の英語表記ファイル名の大文字小文字の違いを認識します。



      Light.vnエディターでは素材指定の際「大文字小文字」を区別しません。「大文字小文字」が混ざり合っていても正常に動作します。
      しかしブラウザの場合は「大文字小文字」の違いを認識しますので、絵が表示できなかったりBGMが鳴らなかったりといったことになります。
      ▲Light.vnエディターの左メニューボタンにて素材を指定すると、パス・素材名がきっちりと指定されますのでご活用ください。

    • コマンド「開く」はURLのみ使用可能。
    • テキスト入力が未実装。
    • LuaスクリプトがPC上での実行を前提としている場合には問題が発生する可能性がある。
    • 作品開始時にすべてのリソースの読込みが行われるため、ネット速度とリソース量の影響が大きい。
    • 最大FPSが60前後。
    • サーバーで配信する場合には、WebAssemblyを使用するためにレスポンスヘッダーでの設定が必要。
      • 「Cross-Origin-Opener-Policy」は「same-origin」に設定。
      • 「Cross-Origin-Embedder-Policy」は「require-corp」に設定。


データ作成の捉え方

  • エディターからの配布後、ユーザー側で最終的にリソースを圧縮する手順を踏む必要があります。(改善対策模索中)
    • ブラウザ用データ(作品配布形式:browser)を出力し、「Data」フォルダの中に入っている全ゲームデータを専用ソフトを使用して2つの圧縮データに変換します。
      出来上がった2つの圧縮データとindex.html含む7つの付属データ、合計9つのデータが完全なるブラウザ用データとなります。
      その「圧縮」の手順が少し厄介ということになりますので、詳しく解説していきます。



    • ver13 以降では「LightApp.worker.js」が出力されなくなっているようです。
      よって出来上がった2つの圧縮データとindex.html含む6つの付属データ、合計8つのデータが完全なるブラウザ用データとなります。


詳細版 ------------------------------------------------------- 初心者用


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

  1. Light.vn作品配布「browser」にてゲームデータを出力しておきます。

  2. 必要な3つのプログラムを準備します。
    • emsdk」 ----------- なんやかんやしてデータ圧縮をしてくれるプログラム。ダウンロードしておくだけ。
    • python 3」 -------- きっとプログラム言語の1つ。インストールしておくだけ。
    • cmder」 ----------- 専用コマンドを使って「python 3」「emsdk」を実行するプログラマー気分を味わえるソフト。格好良くコマンドを打ち込む(コピペする)だけ。

  3. 「python 3」をPCにインストール後「cmder」を使用し「emsdk」を起動させて「Data」フォルダの中身を圧縮データにします。



    ※ソフトをそろえる初回以降は準備が出来ているため、大幅に作業工程を省くことが出来るようになります。

  4. ローカルテストで動作を確認後、テストに必要だったファイルをポイッとして終了となります。

  • 今回は、ゲームデータを「Dドライブ」>「OPERATIONS」>「maho_ningyou_v4.00」フォルダ
    3つのプログラムを「Dドライブ」>「Lightvn_contents」フォルダ内に収納しているとして取り扱っていきます。
    各フォルダの場所を把握し、正確に絶対パス指定することが重要になってきますのでご注意ください。

    ※パス(path)とは、パソコン内のファイル・フォルダなどの場所を示す表記法です。その1つである「絶対パス」は目的ファイルまでの道筋を全て記述する方法のことです。


1. 作品配布「browser(beta)」形式で出力する。

  • 作品配布「browser(beta)」にてゲームデータを出力しましょう。



    合計10ファイルのデータが出力されます。
    後ほどこのデータフォルダを絶対パス指定するので、わかりやすい場所に移動しておきましょう。
    ▲例では「mahoo_ningyou_ver4.00」フォルダのこと。

    ver13 以降では「LightApp.worker.js」が出力されなくなっているようです。
    よって合計9ファイルのデータが出力されます。


2.「emsdk」をダウンロードする。

  • emsdk
    GitHubのページ から「emsdk-master.zip」をダウンロードして解凍しておきます。



    後ほどこのデータフォルダも絶対パス指定するので、解凍したフォルダはわかりやすい場所に移動させておきましょう。



    ▲例ではDドライブの「Lightvn_contents」フォルダに解凍データ「emsdk-master」フォルダを移動させています。


3.「Python 3」をインストールする。

  • Python 3
    Pythonの公式配布ページ から「python-3.9.2-amd64.exe」(2021年3月時点でのバージョン)をダウンロードします。



    python-3.9.2-amd64.exe」を起動し「Python 3」をPCにインストールしましょう。


    ▲インストーラ起動直後の画面下「Add Python (各バージョンの数字) to PATH」にはチェックを入れてください。



    ▲セットアップ終了直後の画面にある「Disable path length limit」は選択してください。
    「Disable path length limit」はクリックすると表示が消えます。
    「Python 3」のインストールはこれで完了となります。


4.「cmder」をダウンロードする。

  • cmder
    公式ページ から「cmder.zip」をダウンロードして解凍しておきます。



    解凍した「cmder」フォルダは任意の場所に移動させておきましょう。



    ▲例ではDドライブの「Lightvn_contents」フォルダに解凍データ「cmder」フォルダを移動させています。


5.「cmder」を使ってコマンドを実行していく。

  • 「cmder」フォルダ内の「Cmder.exe」を起動し、決められたコマンドを順番に実行していきます。
    実行「コマンド」はコピペ可能ですので、フォルダ指定の絶対パスと合わせてあらかじめ作っておくと楽チンです。

    ▼緑色の「D:\Lightvn_contents\cmder」部分は現在のフォルダの絶対パスを表示しています。
    Dドライブの「Lightvn_contents」フォルダ内の「cmder」フォルダ、ということを表しています。


  • コマンド「python --version
    ますは「Python」のバージョンを確認してみます。
    「python --version」と打ち込み(コピペ)、エンターキーを押しましょう。
    バージョンが表示されれば「Python」のインストール、「cmder」でのコマンド実行操作、ともに成功です。


  • コマンド「cd (emsdkの場所)
    emsdkが収められているフォルダの絶対パスを指定します。(cdは指定フォルダパスを変えるコマンド)

    ▼例では「cd」だけしか打ち込まずにミスをしています。何回もコマンド実行はできますので慌てずに!
    Dドライブの「Lightvn_contents」フォルダ内に「emsdk-master」フォルダを入れているので、実行コマンドは「cd D:\Lightvn_contents\emsdk-master」としています。
    緑色で表示されている現在のフォルダの絶対パスが「D:\Lightvn_contents\emsdk-master」に変わったことが分かります。


  • コマンド「emsdk install latest
    コマンドを使って、ダウンロードしていた「emsdk」のインストールを行います。


  • コマンド「emsdk activate latest
    コマンドを使って、インストールした「emsdk」を起動させます。


  • コマンド「emsdk_env.bat
    コマンドを使って、バッチファイルの実行をします。これでデータ圧縮の準備は完了です。
    ここまでの作業が初回のみの準備となります。2回目以降は必要ありません。


6. 2回目以降共通の「cmder」のコマンドを実行していく。

  • Data」フォルダの中に入っている全ゲームデータの圧縮自体は「cmder」で行います。2回目以降はここから作業を開始できます。


  • コマンド「cd (Light.vn作品フォルダ)\Data
    Light.vn作品配布「browser」にて出力した作品フォルダ内の「Data」フォルダの絶対パスを指定します。
    出力した作品フォルダにはゲームデータが入っている「Data」フォルダがあります。その中のゲームデータ全てを圧縮するための準備ですので、ここのフォルダ指定は絶対に間違えないようにしましょう。

    ▼例ではDドライブの「OPERATIONS」フォルダに入っている「maho_ningyou_v4.00」フォルダを絶対パス指定しています。「maho_ningyou_v4.00」フォルダ内に「Data」フォルダが存在しています。
    「cd D:\OPERATIONS\maho_ningyou_v4.00\Data」としています。


  • コマンド「py (emsdk設置先)\upstream\emscripten\tools\file_packager.py project.data --js-output=loader.js --preload .
    pyコマンドにより「emsdk」を起動し、「Data」フォルダ内のゲームデータ全ての圧縮を開始します。

    ▼例ではDドライブの「Lightvn_contents」フォルダ内に「emsdk-master」フォルダを入れているので、実行コマンドは「py D:\Lightvn_contents\emsdk-master\upstream\emscripten\tools\file_packager.py project.data --js-output=loader.js --preload .」としています。


  • 完了すると「Data」フォルダ内に「loader.js」「project.data」の2つのファイルが作成されています。この2つのファイルが圧縮データとなります。
    それらを、出力した作品フォルダへコピペすれば、ブラウザ化の作業は完了です。

    ▼例では「maho_ningyou_v4.00」フォルダ内の「Data」フォルダに「loader.js」「project.data」の2つのファイルが作成されました。
    その2つのファイルを「maho_ningyou_v4.00」フォルダ内にコピーして完了です。


7. ローカルテストでゲーム動作を確認する。

  • 「cmder」を使ってローカルテストを行ってみます。
    ローカルテストは「loader.js」「project.data」の2つのファイルを作品フォルダへコピペしていることを前提としています。
    • コマンド「cd (Light.vn作品フォルダ)
      作品フォルダの絶対パスを指定します。

      ▼例ではDドライブの「OPERATIONS」フォルダに入っている「maho_ningyou_v4.00」フォルダを絶対パス指定しています。
      「cd D:\OPERATIONS\maho_ningyou_v4.00」としています。今回は「Data」フォルダの指定ではないので注意してください。


  • コマンド「py server.py
    コマンド(「maho_ningyou_v4.00」フォルダ内の「server.py」ファイルを指定しています)を実行するとローカルサーバーが起動します。セキュリティーが働いたらアクセスを許可してください。
    「Listening on port (ポート番号).」と「Press Ctrl+C to stop」が表示されます。



    localhost:(ポート番号)」をブラウザのアドレス部分に記述することでテストが開始されます。
    ▲例ではポート番号が「8000」となっているので、ブラウザを立ち上げてアドレス部分に「localhost:8000」と打ち込みます。
    ▼成功するとファイルが読み込まれゲームが開始されます。



    ここでよく起こるエラーとして「Config file does not exist, exiting application. (read directory:/)」があります。
    「Configフォルダーが存在しない」というエラーで、ひらたく言うと圧縮データである「loader.js」「project.data」が存在しないか圧縮に失敗しているかであると予想されます。



    cmderで作成した「loader.js」「project.data」をコピーし忘れてないか確認してみましょう。




    もしくはフォルダ指定コマンド「cd ~」での「Data」フォルダの絶対パス指定ミスにより、ゲームファイル圧縮が正しく行われなかった可能性もあります。
    コマンド「cd (Light.vn作品フォルダ)\Data」でしっかりと「Data」フォルダを指定し、圧縮コマンド「py ~」を行ってみてください。



    テストをやめるときはcmder上で「Ctrl+C」キーを押しましょう。先にブラウザの方を閉じてしまうと「Ctrl+C」キーが効かなくなりますが、その時はそのままcmderを終了させて大丈夫です。


8. 配布サイトへのアップロードファイル

  • アップロードファイルには「server.py」と「Data」フォルダは必要ありません。
    「server.py」はローカルテストに必要なサーバーファイルであり、「Data」フォルダは圧縮されてすでに「project.data」ファイルになっています。



    index.html」「LightApp.js」「LightApp.wasm」「LightApp.worker.js」「loader.js」「MyCore.bc」「project.data」「WebCore.css」「WebCore.js」の9つのファイルがブラウザ化データのすべてとなります。
    「server.py」「Data」「Version.txt」の3つは削除しておきましょう。
    サーバーにアップする場合は、この9つのファイルをアップロードしてください。
    配布サイトなどに送る場合は、この9つの入ったフォルダをzipなどの圧縮ファイルにして送りましょう。

    ver13 以降では「LightApp.worker.js」が出力されなくなっているようです。
    よって「index.html」「LightApp.js」「LightApp.wasm」「loader.js」「MyCore.bc」「project.data」「WebCore.css」「WebCore.js」の8つのファイルがブラウザ化データのすべてとなります。




簡易版 ------------------------------------------------------- 大人用

  • ブラウザ化の手順だけを追っていきます。


  1. 作品配布「browser(beta)」形式で出力しておく。

  2. 「emsdk」をダウンロードする。
    GitHubのページ から「emsdk-master.zip」をダウンロードして解凍しておきます。

  3. 「Python 3」をインストールする。
    Pythonの公式配布ページ から「python-3.9.2-amd64.exe」(2021年3月時点でのバージョン)をダウンロードし、PCにインストールしましょう。
    • インストーラ起動直後の画面下「Add Python (各バージョンの数字) to PATH」にはチェックを入れてください。
    • セットアップ終了直後の画面にある「Disable path length limit」は選択してください。

  4. 「cmder」をダウンロードする。
    公式ページ から「cmder.zip」をダウンロードして解凍しておきます。

  5. 「cmder」を使ってコマンドを実行していく。
    • コマンド「python --version
      ますは「Python」のバージョンを確認してみます。

    • コマンド「cd (emsdkの場所)
      emsdkが収められているフォルダの絶対パスを指定します。(cdは指定フォルダパスを変えるコマンド)

    • コマンド「emsdk install latest
      コマンドを使って、ダウンロードしていた「emsdk」のインストールを行います。

    • コマンド「emsdk activate latest
      コマンドを使って、インストールした「emsdk」を起動させます。

    • コマンド「emsdk_env.bat
      コマンドを使って、バッチファイルの実行をします。これでデータ圧縮の準備は完了です。
      ここまでの作業が初回のみの準備となります。2回目以降は必要ありません。

  6. 2回目以降共通の「cmder」のコマンドを実行していく。
    圧縮自体は「cmder」で行います。2回目以降はここから作業を開始できます。

    • コマンド「cd (Light.vn作品フォルダ)\Data
      Light.vn作品配布「browser」にて出力した作品フォルダ内の「Data」フォルダの絶対パスを指定します。

    • コマンド「py (emsdk設置先)\upstream\emscripten\tools\file_packager.py project.data --js-output=loader.js --preload .
      pyコマンドにより「emsdk」を起動し、「Data」フォルダ内のゲームデータ全ての圧縮を開始します。

    • 完了すると「Data」フォルダ内に「loader.js」「project.data」の2つのファイルが作成されています。この2つのファイルが圧縮データとなります。
      それらを出力した作品フォルダへコピペすれば、ブラウザ化の作業は完了です。

  7. ローカルテストでゲーム動作を確認する。

    • コマンド「cd (Light.vn作品フォルダ)
      作品フォルダの絶対パスを指定します。

    • コマンド「py server.py
      「Listening on port (ポート番号).」と「Press Ctrl+C to stop」が表示されます。
      localhost:(ポート番号)」をブラウザのアドレス部分に記述することでテストが開始されます。ブラウザを立ち上げて「localhost:8000」と打ち込みます。

  8. 配布サイトへのアップロードファイル
    アップロードファイルには「server.py」と「Data」フォルダは必要ありません。
    index.html」「LightApp.js」「LightApp.wasm」「LightApp.worker.js」「loader.js」「MyCore.bc」「project.data」「WebCore.css」「WebCore.js」の9つのファイルがブラウザ化データのすべてとなります。
    「server.py」「Data」「Version.txt」の3つは削除しておきましょう。
    サーバーにアップする場合は、この9つのファイルをアップロードしてください。
    配布サイトなどに送る場合は、この9つの入ったフォルダをzipなどの圧縮ファイルにして送りましょう。

    ver13 以降では「LightApp.worker.js」が出力されなくなっているようです。
    よって「index.html」「LightApp.js」「LightApp.wasm」「loader.js」「MyCore.bc」「project.data」「WebCore.css」「WebCore.js」の8つのファイルがブラウザ化データのすべてとなります。