ブラウザ版の出力方法

Last-modified: 2023-06-22 (木) 08:13:08


ブラウザ版（WebGL）の概要

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

      ※要動作検証。

      Safariの設定

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

      ページクリック

    • 「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つのデータが完全なるブラウザ用データとなります。

      ブラウザ用データver13以降


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

  • ブラウザ化の手順を細かく追っていきます。「チュートリアルLight.vnブラウザ化」動画のテキスト版になります。
    ブラウザ化の概念・PC操作に慣れている方は「簡易版?」をご覧下さい。

  • 公式の説明書・Light.vn 配布の流れ、公開前後のアドバイス ＞ Web版
  • 「チュートリアルLight.vnブラウザ化」動画版

    loading...


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

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

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

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

    3種の神器

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

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

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

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

    魔法人形


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

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

    browser(beta)

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

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


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

  • emsdk
    GitHubのページ から「emsdk-master.zip」をダウンロードして解凍しておきます。
    ※現在（2022年以降？～）「emsdk-master.zip」ではなく「emsdk-main.zip」がアップされています。
    「emsdk-main.zip」では内容ファイルが足りないためにブラウザ化が出来ませんので注意してください。
    「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
    ▲インストーラ起動直後の画面下「Add Python (各バージョンの数字) to PATH」にはチェックを入れてください。

    Disable path length limit

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


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

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

    ダウンロード画面

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

    cmder

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


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

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

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

    Cmder.exe


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

    cpython --version


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

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

    cd (emsdkの場所)


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

    emsdk install latest


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

    emsdk install latest


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

    emsdk_env.bat


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」としています。

    cd (Light.vn作品フォルダ)\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 .」としています。

    py


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

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

    「loader.js」「project.data」


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

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

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

      cd (Light.vn作品フォルダ)


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

    上記コマンド「py server.py」で動作しない場合は「python -m http.server 8000」と打ち込んでみてください。
    pythonのバージョンによって違いがあるようです。

    py server.py

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

    localtest

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

    Config file does not exist

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

    copy「loader.js」「project.data」


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

    「Data」フォルダの絶対パス

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

    py server.py


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

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

    browser_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つのファイルがブラウザ化データのすべてとなります。

    browser_data




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

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


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

  2. 「emsdk」をダウンロードする。
    GitHubのページ から「emsdk-master.zip」をダウンロードして解凍しておきます。
    「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」または「python -m http.server 8000」
      「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つのファイルがブラウザ化データのすべてとなります。


ブラウザでのログ（コンソール）の見方

アップロードしたゲームにてエラーがでてしまった場合、原因をつきとめるためにエラーログを確認することも大切です。
有識者の方々に質問する場合でも、ブラウザログを見てもらうことで原因究明をスムーズに行うことができます。

ブラウザログは開発者用機能である「コンソール」に表示されます。
ブラウザ設定メニューから開くことができますので、各ブラウザでの開き方を覚えておきましょう。

Chromeの場合

1. 右上「≡」マークの設定メニューから「その他のツール」＞「デベロッパーツール」を開きます。
キーボード「F12」でショートカットできます。

chrome_console1

2. デフォルトで「Console」タブが開くと思いますが、違った場合は「Console」タブを選択しましょう。
コンソールにて表示されているログがブラウザログになり、エラーなどは赤く表示されます。

chrome_console2

3. ログはゲームスタートと同時に流れます。
エラー部分を分かりやすくしたい場合は、エラーがおきる直前のログをクリアすることにより、それまでのログを消去することができます。
ログ表示部分（どこでも）を右クリックするとメニューが表示されるので「Clear console」を選択しましょう。

chrome_console3

4. 現在地までのログが消去されたあと、ゲーム進行で再びログが流れます。
ログを見てもらう場合は、コピペしてテキストにしたり、エラーログ部分のスクリーンショットを撮るなどして確認してもらいましょう。

chrome_console4

chrome_logo

Firefoxの場合

1. 右上「≡」マークの設定メニューから「その他のツール」＞「ブラウザコンソール」を開きます。
キーボード「F12」でショートカットできます。（F12の場合、ウェブ開発ツールの方でコンソールが開きます）

Firefox_console1
Firefox_console2

2. 別ウインドウでログが表示されます。
デフォルトではブラウザーコンソールモードが「親プロセスのみ」になっています。
エラーなどは確認できますが、細かくログを流したい場合は「マルチプロセス」ボタンを選択しましょう。

Firefox_console3

3. ログはゲームスタートと同時に流れます。
エラー部分を分かりやすくしたい場合は、エラーがおきる直前のログをクリアすることにより、それまでのログを消去することができます。
左側にある「ゴミ箱」ボタンを押すことによりログは消去されます。

Firefox_console4

4. 現在地までのログが消去されたあと、ゲーム進行で再びログが流れます。
ログを見てもらう場合は、コピペしてテキストにしたり、エラーログ部分のスクリーンショットを撮るなどして確認してもらいましょう。

Firefox_logo

Edgeの場合

1. 右上「・・・」マークの設定メニューから「その他のツール」＞「開発者ツール」を開きます。
キーボード「F12」でショートカットできます。

Edge_console1
Edge_console2

2. デフォルトで「コンソール」タブが開くと思いますが、違った場合は「コンソール」タブを選択しましょう。
コンソールにて表示されているログがブラウザログになり、エラーなどは赤く表示されます。

Edge_console3

3. ログはゲームスタートと同時に流れます。
エラー部分を分かりやすくしたい場合は、エラーがおきる直前のログをクリアすることにより、それまでのログを消去することができます。
ログ表示部分（どこでも）を右クリックするとメニューが表示されるので「コンソールのクリア」を選択しましょう。

Edge_console4

4. 現在地までのログが消去されたあと、ゲーム進行で再びログが流れます。
ログを見てもらう場合は、コピペしてテキストにしたり、エラーログ部分のスクリーンショットを撮るなどして確認してもらいましょう。

Edge_console5

Edge_logo


Light.vnエディターとブラウザ版出力のバージョン違いについて

Light.vnではバグ修正などが入った場合、アプリ出力とブラウザ出力にてバージョンの違いが起こることがあります。
アプリ版で修正されているはずの不具合がブラウザ版で起きた場合、エディターバージョンとブラウザ出力バージョンを確認し、エディターバージョンと一致させる必要があります。

ブラウザ出力バージョンは各ブラウザの「コンソール」ログにて確認できます。（コンソールの見方は上記参照のこと）
「log created（記録開始日時）」と「file path（ログファイルパス）」の後に「Core Version（エンジンバージョン）」で表示されます。

Light.vnは正式版を使用し、バージョン違いを起こさないようにすることを推奨しています。
ただし、どうしてもブラウザ版でバグ修正版を使用したい場合は、必要ファイルをディスコードにて申請していただく形になっています。

log_version