# ブラウザウディタ導入の手順

## はじめに 
自分のゲームを動かしてみたい方向けに導入の手順を用意しました  

## 概要
最低限必要な手順は3つです
1. BasicData 内に BrowserWoditor.dat ファイル(配布zipに同梱のものをコピー/詳細後述) を含める
2. ↑が含まれた Data.wolf を用意して public 内に配置
3. ご自身の管理する httpサーバ や ゲーム配信サイト 上で public フォルダ内を公開 

サーバー機能が無い状態のPC上で index.html だけ開いても機能しません！(ご注意)  

## ローカル簡易サーバー系の導入
動作確認のために毎回サーバーへアップロードするのは面倒かと思います  
その場合は、ネットワークに接続しないお手元のPC上でサーバ機能を実行するツールがいくつか存在します  
(基本的にWebサイト等の開発者向けのもの)  

今回詳しくは紹介しませんが開発環境では VSCode + 拡張機能の Live Server を使っています  
VSCode と 拡張機能を入れて、index.htmlを開いた状態でサーバ機能をONにすると動きます  
また、ウディタ補助ツールの Wodistant に簡易サーバ機能が付いているのでこちらも便利です  
(これらはあくまでもPC上でのテスト環境ですので本番公開は別途本格的なサーバーが必要です)  

## https化されていないhttpサイトでMIDIが鳴らない
一応注意として、localhost 以外のローカル環境や  
https化されていないhttpサイトでは、基本的にMidiのBGMが鳴りません(ブラウザの仕様)  

## サーバにアップロードする前に
settings.js を確認して、projectIdとprojectNameを御自身のプロジェクト名で書き替えてください  

```
const WoditorGameSettings = {
    projectId: "SampleGame",
    projectName: "ウルファールのサンプルゲーム",
    noSystemTouch: false,
    requestFullScreen: false,         
    lockOrientation: "landscape-primary",
}
```

projectId はブラウザ上に保存されるデータの格納先の名前に使われています   

projectId は英数字推奨(一応日本語でもいけます)
projectName は日本語で大丈夫です(こちらは読み込み時にページタイトルに適用されます)  

noSystemTouch はブラウザウディタ標準のタッチ入力が不要な場合 true にしてください
(マウス操作を有効にしてブラウザウディタが用意したスワイプ移動などを無効化します)

requestFullScreen は true のとき、ゲーム開始時に全画面化を試みます
lockOrientation は ↑ の全画面化が実行されたときにロックを試みる方向です(Androidでのみ有効)

ゲームサイズの指定(旧gameWidth)等はゲーム内容から自動設定されるため不要になりました  
また html のスタイルも「ゲーム起動時」に自動的に調整されるようになったので設定不要です
「起動前」の見た目(デフォルトで4:3)が気になる場合は index.html を編集してください

<canvas id="canvas" width="640px" height="480px"
↓
<canvas id="canvas" width="848px" height="480px"
(848x480の場合)


さいごに、ページ下部で説明書(.html)としてリンクされている中身はreadme.htmlです  
こちらもサンプルゲームのものになっているので、適切なものに書き替えてください  

## フォントの変更について
指定したフォントが見つからない場合  
DefaultFont.ttfの名前で一番上のフォルダにあるファイルが参照されます  

メインのフォントが一つだけで済むなら  
このDefaultFont.ttfを単純に別ファイルで差し替えれば反映されます  

複数のカスタムフォントを使用する場合は  
FontList.iniの中身を参考にフォントファイル名を指定してください  

(この辺り将来的にツール化される可能性がありますが今回間に合わず)

```
    DefaultFont.ttf=UmePlus Gothic_Uniq
    DefaultSubFont.ttf=Oxygen Mono
    CustomFont.ttf=Font no namae (=の右側はインストール時に表示される正式名)
    (最後に改行)
```

## ページのキャッシュが起こす問題
配信データを更新してもページのキャッシュが優先されて更新データが読み込まれない場合があります  
特に何度もアップロードしてテストしていると頻繁に起こり得ます  
基本的にテスト中はシークレットタブで開くなど、キャッシュが残らないように対策した方が良いです  

※ ver0.1.15で ファイル更新をチェックして新しいor更新されたファイルのみDLする機能を付けました 

## BrowserWoditor.dat について
BasicData内に BrowserWoditor.datを置いて Data/BasicData/BrowserWoditor.dat という形でアクセスできるようにしてください  
現在は Dataごと暗号化されている状態にのみ対応しています  

基本的には、配布zipに含まれる BasicDataに入れる必要があるファイル/BrowserWoditor.dat を BasicData内にコピー  
(バージョンごとに異なる情報が含まれる場合があるので、動作させるバージョンに同梱のものをご利用下さい)  

## 既存の環境との差異について
ブラウザウディタは PLiCy さんの互換エンジンとの互換性はなく
オリジナルのウディタの挙動に全て準拠しています
PLiCy さん向けに調整されたゲームは逆に誤作動する可能性が高いのでご注意下さい
(ウディタのシステム文字列 SysS19番[ｻｰﾄﾞﾊﾟｰﾃｨ実行識別ID]で実行環境の判定が可能です)

## Data.wolf 以外の形式の 個別暗号化ファイルについて
Data/BasicData.dataなどが個別に暗号化されている場合、InitialDownloadList.ini に
ゲームに必要なすべてのファイル一覧を記述する必要があります
これらはゲーム開始時に自動的にダウンロードされます
(ゲーム中の動的なダウンロードは未実装です。しばらくお待ち下さい)

```
DefaultSoundFont.sf2
Data/BasicData.wolf
Data/BGM.wolf
Data/...
...
(最後に改行)
```

このリストアップ操作を自動的に行う batファイル を 「今門 楽々(こんとろーら) 様」に作成していただきました
同梱されているList.batを、個別暗号化ファイルを含む 「Dataフォルダ と同じフォルダ」に置いて実行すると
適格な InitialDownloadList.ini が自動生成されるようになっています

注意:暗号化すると 文字列操作の「ファイル一覧」では暗号化ファイル内の一覧が取れなくなります

## 公開！
ここまで理解して頂けたら、あとは Data.wolf を public 内に配置して  
public フォルダ内のすべてのファイルをサーバー上にアップロードすればokです  
現在対応している WOLF RPG エディターのバージョンは ver3.36 で、
ver3.36で動くこれ以前のデータ、または以降のGameの仕様が同じ本体verまではそのまま使えます  

必要な各ファイルについて軽く説明します  

- .htaccess => Apache系サーバにアップロードする際のヘッダ設定例です。Apache系サーバを使わない場合は必要ありません
- Data.wolf => ゲームファイルです。本家の WOLF RPG エディター で生成したものをそのまま利用します
- DefaultFont.ttf => デフォルトとして採用しているフォント(MPlus 1p)です
- DefaultSubFont.ttf => デフォルトとして採用しているサブフォント(Oxygen Mono)です
- DefaultSoundFont.sf2 => デフォルトとして採用しているmidi演奏用の音源(パブリックドメインから流用)です
- FontLilst.ini => フォント名がWindowsのように関連付けられないので手動で指定します
- Game.ini => 通常のゲーム起動設定です
- index.html => トップページであり、ブラウザウディタの読み込みを含みます。分かる人は編集可能です
- initialDownLoadList.ini => ゲーム起動時にDLするファイルのリストです
- settings.js => 上述の設定ファイルです。適切に書き換える必要があります
- woditor.js => 動作に必要なので変更しないで下さい
- woditor.wasm => ブラウザウディタの本体です。変更しないで下さい
- libフォルダ以下 => 必要な補佐的javascriptファイルが入っています。基本的に変更しないで下さい
- LICENSE.zip => LICENSEフォルダ以下をzip化したものです。基本的にDL出来る状態を省略しないで下さい
- readme.html => 説明書(.html)と表示されているリンクの中身です。書き換える必要があると思います

FFFTPなどの転送ソフトを理容する場合、基本的にバイナリファイルとしてアップロードして下さい
テキストファイルとしてアップロードされると一部のファイルが機能しなくなる場合があります
(readme.html はテキストファイルの方が良いかもしれません)

## 部分暗号化ファイル/非暗号化ファイルのアップロード
InitialDownloadList.ini に BasicData.wolf 等すべてのファイルを記述する必要があります

## セーブデータの扱い
セーブデータはブラウザのメモリ上に作成され、ブラウザのIndexedDBという領域にバックアップされます
なので、初期セーブデータをゲームに含めたい場合は、InitialDownloadList.iniに追加してください

```
    DefaultSoundFont.sf2
    Data.wolf
    Save/SaveData01.sav など
    (最後に改行)
```

## 最後にご注意
現在、ブラウザウディタはプロトタイプ段階にあり、完成品ではありません  
同フォルダの「未実装や非対応や既知の不具合(未実装or非対応or既知の不具合.txt)」や  
「本格的な機能の紹介.txt」も必要に応じてご覧下さい  
後者にはコモンイベントを利用して特定のサイト以外で起動できなくする方法などが書かれています  

以上です

- ブラウザウディタのプロジェクトサイト(Ci-en活動報告)
https://ci-en.net/creator/12702