# WebGALゲーム開発ガイドライン

# WebGALでゲーム開発を行う方法

# その1：WebGALエディターを使用(推奨)

WebGALエディターは、WebGALでゲームを作成、公開する最良の方法です。

WebGAL Editorをダウンロードした後、zipを解凍し、WebGAL_Terreアプリケーションを起動します。WebGAL Terreはブラウザを自動的に開きます。開かない場合は、ブラウザからhttp://localhost:3001/ (opens new window)にアクセスしてください。

ヒント

エディターを開くには、最新のブラウザ (Chrome / Firefox / Edge) を使用してください。その他のブラウザはサポート対象外です。

ダウンロードリンク：

GitHub (opens new window)

グラフィカルエディタの詳しい使用方法は下記の動画で解説しています

# その2：スクリプトを作成してローカルで開発し、リアルタイムでデバッグ

静的Webページとして構築された WebGALディストリビューションと、それに付随するデバッグ環境をダウンロードします。

ダウンロードリンク：

GitHub (opens new window)

ダウンロードして解凍した後、対応するバージョンのWebGALサーバーを直接実行して、ビジュアルノベルのデバッグを開始できます。ウイルス対策ソフトウェアのブロックやファイアウォールのブロックが発生した場合は、プログラムの実行を許可してください。

開発には VSCodeを使用し、構文の強調表示にはプラグインを使用することをお勧めします。

構文強調表示プラグイン (opens new window)

構文強調表示プラグインのソースコード (opens new window)

# その3：ソースコードからデバッグを開始（上級者向け）

git clone https://github.com/MakinoharaShoko/WebGAL.git

yarnを使用してインストールする

npm install yarn -g
yarn

WebGAL パッケージに入れる

cd packages/webgal

WebGAL は、vite をパッケージ化およびデバッグツールとして使用します。webgal パッケージを入力した後、次のスクリプトを実行して開発サーバーを起動できます。

yarn dev

ビルドファイルを生成する場合は、

yarn build

# ビジュアルノベルゲームを展開または公開するにはどうすればよいですか?

インターネットに展開できるソースコードではなく、リリースバージョンまたは WebGALグラフィカルエディタでエクスポートされた Web ページである必要があることに注意してください。

ウェブページ：

WebGAL Editorを使用する場合：

エディターの右上隅にある「Web ページとしてエクスポート」を選択します。 Web ページの展開は、通常のWebサイトの展開と何ら変わりません。クラウドサーバー (Tencent Cloud、Alibaba Cloud) およびその他のデプロイメントを購入することも、GitHub Pagesを使用することもできます。

WebGALのディストリビューション使用する場合：

/WebGAL下のファイル (フォルダーではなく、/WebGAL フォルダー内のファイル) を、デプロイするクラウドサーバーの指定したディレクトリにコピーするか、GitHub Pages にデプロイできます。

ソースコードを扱う開発者：

ソースからデバッグしている場合は、「yarn build」を使用して静的 Web ページ (/dist フォルダー内) を作成し、このフォルダーの内容を GitHub Pages またはクラウドサーバーにデプロイできます。

Windows：

エディターの右上隅にある [実行可能ファイルとしてエクスポート] を選択すると、実行可能ファイルを Windows上で直接実行できます。

Android：

ゲームを Andoird プラットフォームにパッケージ化する

# ゲームスクリプトのチュートリアル

これで、WebGAL エディターが起動するか、デバッグサーバーが実行されるはずです。独自のスクリプトの作成に進みましょう。

解凍したフォルダーの下に WebGALフォルダーがあり、WebGALフォルダーの下にゲームフォルダーがあり、そこにゲームリソースが保存されていることがわかります。(グラフィカルエディタを使用している場合は、左側のツールバーで対応するリソースフォルダを直接開くことができます)

すべてのゲームスクリプト、画像、立ち絵の描画はゲームフォルダーに配置する必要があります。ディレクトリに対応するリソースは次のように説明されます。

文件夹	存放的资源
animation	アニメーション記述ファイル
background	背景画像、タイトルページの背景
figure	立ち絵
scene	ユーザスクリプト
bgm	BGM
vocal	ボイス、SEなど
video	ビデオ
tex	特殊効果用

# ゲーム情報をカスタマイズする

/game フォルダーの下には config.txt ファイルがあり、このファイルにゲームの関連情報を入力できます。

Game_name:WebGAL;//ゲーム名
Game_key:0f33fdGr;//識別コードの文字列です。他人と重複しにくい文字列をできるだけランダムに入力してください。長さは 6 ～ 10 文字が望ましいです。そうしないとバグが発生する可能性があります。
Title_img:Title2.png;//タイトルの画像名、画像は/backgroundフォルダに配置してください。
Title_bgm:夏影.mp3;//タイトルのBGM、音楽ファイルは/bgmフォルダに配置してください。

# 注釈

WebGAL のスクリプトは各行のセミコロンより前の内容のみを解析するため、セミコロン以降の内容はコメントとみなされます。

WebGAL:こんにちわ; (セミコロン以降はコメントとみなされます)
;セミコロンを直接入力して、1行のコメントを書くこともできます。

# `-next` パラメータ

ステートメントの後にパラメータを追加する -nextと、このステートメントの実行直後に次のステートメントにジャンプできます。これは、複数のステップを同時に実行する場合に便利です。

例：

changeBg:testBG03.jpg -next; 次のステートメントをすぐに実行します

# `none`キーワード

立ち絵やBGM、背景などのリソースを呼び出さないようにします。

# ユーザースクリプトを記述するための構文

最初のスクリプトであるstart.txtがまず初めに実行されます。スクリプトで章を飛ばしたり、分岐オプションを設定したりする方法は後ほど紹介します。

スクリプトの記述方法は非常にシンプルです

# 基本的なキャラクターの会話

まず、メモ帳やVS Code、テキストエディターを使用して、ゲームリソースディレクトリの下のシーンフォルダーにある start.txt を開き、最初のダイアログの作成を開始できます。

キャラクターの会話を書く方法は非常に簡単で、次のように入力するだけです。

各ダイアログのコロンとセミコロンは、半角文字である必要があることに注意してください。

人物:会話;

例：

雪ノ下雪乃:この湯呑を使ってください;
由比ヶ浜:あ、ありがとうございます。;
小町:雪乃さん、ありがとうございます！;
一色:ありがとう、先輩。;

ダイアログ/スクリプトの各行の後に、終了点としてセミコロンを使用します。 (セミコロンを書かなくても機能する場合もありますが、作者はバグを防ぐためにセミコロンを追加することを推奨しています)。

# 継続的な対話

複数のダイアログでキャラクター名が変わらない場合は、連続ダイアログを使用できますが、キャラクター名を省略して、必要なときに使用できます。

雪ノ下雪乃: 早かったわね;
結構待ったの？;//この時点では、セリフのキャラクター名は「雪ノ下雪乃」のままです。
比企谷八幡:今着いたところ;

# ナレーション

キャラクター名なしでナレーションダイアログを作成する場合は、コロンを空白のままにします (ただし、コロンは省略しないでください)。

:ここにナレーションがあります。;

# ダイアログを表示しながら音声を同時に再生する

ビジュアルノベルの最も魅力的な部分は、多くの場合、優れた吹き替えにあります。パラメータに音声ファイル名を追加できます。構文例は次のとおりです。

比企谷八幡:今着いたところ -V3.ogg;//ボイスは/vocalフォルダに配置してください。

連続的な対話では、音声は同じ方法で導入されます。

雪之下雪乃:早かったわね -V1.ogg;
結構待ったの？ -V2.ogg;

# 黒い画面のテキスト

多くのゲームでは、冒頭を紹介したり、キャラクターの心理的活動を表現したりするために、黒い画面にテキストが表示されます。introコマンドを使用してモノローグを演じることができます。

intro:思い出には適切な台本は必要ありません。| とにかく一度言ってしまうと、| それはすべて冗談になりました。;

モノローグの区切りは区切り文字 (|) で区切られており、各 | は改行を表します。実際のパフォーマンスでは、上記のテキストは次のようになります。

思い出には適切な台本は必要ありません。
とにかく一度言ってしまうと、
それはすべて冗談になりました。

# 背景/キャラクターの立ち絵を変更する

WebGALが背景画像と立ち絵を読み取れるようにするには、背景画像をにbackgroundフォルダに配置し、立ち絵をfigureフォルダーに配置する必要があります。

次に、簡単なステートメントを使用して、現在表示されている背景画像と立ち絵を変更します。

changeBg:testBG03.jpg;//背景を変更する
changeFigure:testFigure02.png;//立ち絵を変更する
changeBg:none;//背景を表示しない
changeFigure:none;//立ち絵を表示しない

背景画像や立ち絵を変更した後、再度マウスをクリックして次のダイアログを表示する必要がある場合がありますが、背景画像や立ち絵を変更した直後に次の文の内容を実行したい場合は、-nextを使用してください:

changeBg:testBG03.jpg -next;
changeFigure:testFigure02.png -next;
一色:ありがとう、先輩！;

これを行うと、プログラムは背景画像/立ち絵を置き換えた直後に次のステートメントを実行します。

# 立ち絵をさまざまな位置に配置する

3つの異なる位置に立ち絵を配置できます。立ち絵の配置する位置をパラメータで追加するだけです。

changeFigure:testFigure03.png -left;
changeFigure:testFigure04.png;
changeFigure:testFigure03.png -right;

3つの異なる位置にある立ち絵の描画は互いに独立しているため、立ち絵の描画をクリアする必要がある場合は、個別にクリアする必要があります。

changeFigure:none -left;
changeFigure:none;
changeFigure:none -right;

立ち絵を変更した直後に次のステートメントを実行したい場合、操作方法は以前と同じで、パラメータを追加します -next :

changeFigure:testFigure03.png -left -next;
changeFigure:testFigure04.png -next;
changeFigure:testFigure03.png -right -next;

# ID付きの立ち絵

ID付きで立ち絵の描画をより正確に制御したい場合は、立ち絵の描画の初期位置を指定できます。

changeFigure:testFigure03.png -left -id=test1; // 初期位置が右側にある立ち絵
changeFigure:none -id=test1; // IDを指定して、立ち絵を表示しない

注意：ID を指定して立ち絵の位置をリセットする場合は、まず表示しないようにしてから再度表示してください。

# 小さなアバターを配置する

多くのゲームでは、テキストボックスの左下隅に小さなアバターを配置できます。このエンジンで使用される構文は次のとおりです。

miniAvatar:minipic_test.png;//左下隅に minipic_test.png を表示する
miniAvatar:none;//このアバターを表示しない

# ジャンプシーンと分岐選択

ビジュアルノベルではチャプター、シーンのジャンプ、分岐選択が欠かせないため、WebGALでもシーンのジャンプや分岐選択にサポートしています。

シーンを複数のtxtファイルに分割し、簡単なステートメントを使用して現在実行中のシーンを切り替えることができます。

Chapter-1.txtとChapter-2.txtという2つの章のスクリプトを作成した場合、Chapter-1.txtの実行が終了した後、Chapter-2.txtに対応するシーンにジャンプしたい場合は、次のコマンドを使用してください。

# シーンジャンプ

changeScene:Chapter-2.txt;

(Chapter-1.txt)
......
......
changeScene:Chapter-2.txt;
次に実行するのは、Chapter-2.txt の内容です。
......
......
(Chapter-2.txt)

このコマンドを実行すると、ゲームシーンが切り替わり、新しいシーンスクリプトに従って次の展開が実行されます。

# シーンコール

呼び出されたシーンを実行した後、前のシーン (つまり、親シーン) に戻る必要がある場合は callScene を使用します。

callScene:Chapter-2.txt;

(Chapter-1.txt)
......
......
callScene:Chapter-2.txt;
次に実行するのは、Chapter-2.txt の内容です。
......
......
(Chapter-2.txt)
......
(Chapter-2.txt終了)
親シーンに戻り、親シーンのステートメントの実行を続けます。
......

# 分岐

スクリプトに分岐オプションがあり、別のオプションを選択して別の章に入りたい場合は、次のステートメントを使用してください。

choose:彼女を止める:Chapter-2.txt|家に帰る:Chapter-3.txt;

選択肢を選択後、選択肢のテキストと入力したいスクリプト名を一致させるだけで分岐選択機能を実現できます。

# ゲームを終了してタイトルに戻る

ゲームを終了してカットシーンの後にタイトルに戻りたい場合は、次を使用します。

end;

# バックグラウンドミュージック（BGM）の紹介

BGM を導入する方法は非常に簡単です。BGM を /bgm ディレクトリに配置し、必要なときに再生するだけです。

bgm:夏影.mp3;

# 効果音を使う

playEffect:xxx.mp3;

短い効果音を鳴らすことができます

** FXループ

効果音に ID を与えると、効果音ループが自動的に有効になり、同じ ID を使用して停止します。

playEffect:xxx.mp3 -id=xxx;
playEffect:none -id=xxx;効果音の停止

# ビデオを再生する

動画ファイルは、/videoディレクトリに配置し、必要なときに再生できます。

playVideo:OP.mp4

# BGMやCGをアンロックして鑑賞可能

以下のステートメントを実行することで、BGMやCGの鑑賞をタイミングよく開放することができます。

unlockCg:xgmain.jpeg -name=スターライトカフェと死の蝶 -series=1; // CGのロックを解除して名前を付けます
unlockBgm:s_Title.mp3 -name=Smiling-Swinging!!; // BGM のロックを解除し、名前を付けます

seriesパラメータはオプションであり、どのシリーズに属しているかを表します。

# テキストボックスを閉じる

一部の特殊効果では、テキストボックスを一時的に閉じたい場合があるため、次のコマンドを使用できます。

setTextbox:hide;

setTextbox ディレクティブの値が hide の場合、テキストボックスは閉じられ、ユーザーはいかなる方法でも開くことができません。テキストボックスを再表示する場合は、このコマンドを再度呼び出して、hide以外の値を入力します。

setTextbox:on; // 非表示以外の任意の値を指定できます。

# アニメーション効果を使用する

# 背景または立ち絵描画をアニメーション化する

次のように指定できます。setAnimation:アニメーション名 -target=作用目アクション対象标;

示例：

setAnimation:enter-from-bottom -target=fig-center -next;//中央の立ち絵の描画をアニメーション化して下から入力し、次の文に進みます。

現在、事前に作成されたアニメーションは次のとおりです。

アニメーション効果	アニメーション名	継続時間 (ミリ秒)
フェードイン	enter	300
フェードアウト	exit	300
左右に振る	shake	1000
下から入る	enter-from-bottom	500
左から入る	enter-from-right	500
右から入る	enter-from-right	500
1回前後に動かす	move-front-and-back	1000

現在、アニメーションのターゲットは次のとおりです。

target	実際の目標
fig-left	左の立ち絵
fig-center	真ん中の立ち絵
fig-right	右の立ち絵
bg-main	背景
	ID 付きの立ち絵

# カスタムアニメーション

アニメーションファイルが利用可能で、独自のカスタムアニメーションを作成できます。

アニメーションファイルは JSON を使用して記述されます。

各アニメーションファイルは、JSON 配列で記述されたアニメーションシーケンスを表します。以下は、左側から入ってくるアニメーションを示す例です。

enter-from-left.json

[
  {
    "alpha": 0,
    "scale": {
      "x": 1,
      "y": 1
    },
    "pivot": {
      "x": 0.5,
      "y": 0.5
    },
    "position": {
      "x": -50,
      "y": 0
    },
    "rotation": 0,
    "blur": 5,
    "duration": 0
  },
  {
    "alpha": 1,
    "scale": {
      "x": 1,
      "y": 1
    },
    "pivot": {
      "x": 0.5,
      "y": 0.5
    },
    "position": {
      "x": 0,
      "y": 0
    },
    "rotation": 0,
    "blur": 0,
    "duration": 500
  }
]

各属性の解釈は次のとおりです

属性名	内容
alpha	透明度、範囲 0 ～ 1
scale	ズーム
pivot	アンカーポイント
position	位置オフセット
rotation	回転角度
blur	ガススぼかし
duration	継続時間 (ミリ秒 (ms) 単位)

animationTableにカスタムアニメーションのファイル名を追加する必要があります

対象ファイル：animationTable.json：

["enter-from-left","enter-from-bottom","enter-from-right"]

上記、追加後、スクリプトを呼び出すことができます。：

setAnimation:enter-from-left -target=fig-left -next;

# 一部の属性を省略する

アニメーションが一部のプロパティのみを操作する必要がある場合は、アニメーションに関与しない他のプロパティを空のままにし、デフォルトのままにすることができます。

例：enter.json

[
  {
    "alpha": 0,
    "duration": 0
  },
  {
    "alpha": 1,
    "duration": 300
  }
]

# 特殊効果を追加する

特殊効果システムは PixiJS によって実装されています。

# Pixiの初期化

pixiInit

pixiInit;

注意

1. 特殊効果を使用する場合は、まずこのコマンドを実行して Pixi を初期化する必要があります。

2. 適用されているエフェクトをキャンセルしたい場合は、この構文を使用してエフェクトをクリアできます。。

# 特殊効果を追加する

pixiPerform

pixiPerform:rain;//雨のエフェクトを追加する

※特殊効果が有効になった後、初期化されていない場合、特殊効果は継続して実行されます。

# プレハブエフェクトのリスト

效果	指令
雨	pixiPerform:rain;
雪	pixiPerform:snow;

# 重ね合わせたエフェクト

2 つ以上のエフェクトを重ね合わせたい場合は、pixiInitコマンドを使用せずに異なるエフェクトを重ね合わせることができます。

pixiPerform:rain;
pixiPerform:snow;

# 特殊効果のクリア

pixiInitで初期化すると、適用されたエフェクトがすべて削除されます。

# 高度なチュートリアル

# ステートメントジャンプと分岐ジャンプを同一シーン内で実現(txtファイル)

分岐作成したいが、そのための新しい txtファイルを作成するのが面倒な場合は、次の方法を試して、同じファイル内に分岐ステートメントとジャンプステートメントを実装できます。

注意：分岐が非常に長い場合は、この方法の使用はお勧めしません。txtの行数が長すぎてはいけないためです。長すぎないと、読み込みや応答の遅さなどのパフォーマンスの問題が発生する可能性があります。

# まず、ラベルの使用方法を理解する必要があります

......
jumpLabel:label_1;
//次の行は無視されます。
......
......
......
//次に、ラベルを作成する必要があります。
label:label_1;
その後、ここでプログラムの実行が続行されます。;
......
......

つまり、jumpLabel は gotoステートメントに似ており、スクリプトをシーン (txtファイル) 内の任意の位置に即座にジャンプさせることができ、この位置にはラベルを使用してスクリプトを作成する必要があります

JumpLabel を任意のゲートと比較すると、この任意のゲートの終点がラベルが配置されている場所になります

# 上記の基盤で、chooseを使用して分岐のあるラベルの位置にジャンプすることができます

WebGAL:ラベルへのブランチジャンプをテストしてみましょう!;
choose:テスト1:label_1|テスト2:label_2;
label:label_1;
これは分岐1になっているはずです。;
jumpLabel:end;
label:label_2;
これは分岐2になっているはずです。
jumpLabel:end;
label:end;

各分岐の最後では、jumpLabelを使用して目的の場所にジャンプする必要があることに注意してください。プログラムは直線的に実行されるため、分岐の最後でジャンプしない場合、プログラムは実行を続けます。次に例を示します。

WebGAL:ラベルへのブランチジャンプをテストしてみましょう!;
choose:テスト1:label_1|テスト2:label_2;
label:label_1;
これは分岐1になっているはずです。;
label:label_2;
これは分岐2になっているはずです。

このプレイブックでは、分岐2を選択すると、すべて問題ないようです。しかし、分岐1を選択すると、分岐1が実行された後、分岐2が再度実行されることに驚くでしょう。これは、プログラムが次の行を順番に実行し続け、分岐の終了後にどこにジャンプするかを指定していないためです。

# 変数を使用する

注意：ラベルの使用方法とラベル内のシーンにジャンプする方法を理解する前に、変数システムを安易に使用しないでください。混乱する可能性があります。

変数を設定します。

setVar:a=1; // 数値の設定が可能
setVar:a=true // ブール値の設定が可能
setVar:a=人物名 // 文字列の設定が可能

以前に他の変数を定義している場合は、変数を設定するときにそれを使用することもできます。

setVar:a=1;
setVar:b=a+1;

# 条件付き実行

ステートメントの後に -when=(condition) のパラメータ、条件に応じて現在のステートメントを実行するかどうかを判断できます。

例如：

setVar:a=1;
changeScene:2.txt -when=a>1; //a>1 の場合、シーン2にジャンプします
changeScene:3.txt;//a<=1の場合、上記のステートメントは実行されず、この文が実行されます。
changeScene:3.txt -when=a==1;//aが1の場合にのみジャンプします。等価演算子は == であることに注意してください。

注:=代入記号なので条件判定には使用できません、==等価演算子です。

どのステートメントにも -when パラメータとを組み合わせることで jumpLabel callScene changeScene などの条件判定によるプロセス制御を実現できます。

# 会話文にパラメーターを追加する

特定のステージで特定のダイアログが実行されるときに、表情を切り替えるなどのパフォーマンス効果を追加したい場合があります。

-concat この文の会話は前の会話の後につながっていることを意味します

-notend これは、この文の会話はまだ終わっておらず、後で演技や会話がつながる可能性があることを意味します。

以下に例を示します。これは、会話の進行中に垂直方向の描画を切り替えるデモです。

WebGAL:ステートメントの補間パフォーマンスをテストします。 すぐに立ち絵に切り替えます.. -notend;
changeFigure:k1.png -next;
立ち絵を切り替えました。すぐに表情を切り替えます... -notend -concat;
changeFigure:k2.png -next;
表情を切り替えました。 -concat;

# トラブルシューティング

# ファイルが正常に認識されないのはなぜですか

ファイル名には、特殊な記号、スペース、その他の認識しにくいファイル名を使用しないでください。できるだけわかりやすい英語の名前を使用してください。ファイル拡張子はすべて小文字にする必要があります。

# 音声ファイルが適切に再生されないのはなぜですか

Appleブラウザでは、ogg ファイルの再生をサポートしていないため、mp3 に変換するなど、ファイル形式を変換する必要があります。

# エクスポートされた Web ページを開けない理由

ブラウザのセキュリティポリシーにより、ファイルからローカル Web ページを開くことはできません。Web サイトを展開する場合と同様に、http サーバーを使用して WebGAL を展開する必要があります。一般的なものは、Nginx、Apache http サーバー、VS Code Live Server プラグイン、Python http サーバーです。

# WebGALゲーム開発ガイドライン

# WebGALでゲーム開発を行う方法

# その1：WebGALエディターを使用(推奨)

# その2：スクリプトを作成してローカルで開発し、リアルタイムでデバッグ

# その3：ソース コードからデバッグを開始（上級者向け）

# ビジュアルノベルゲームを展開または公開するにはどうすればよいですか?

# ゲームスクリプトのチュートリアル

# ゲーム情報をカスタマイズする

# 注釈

# -next パラメータ

# noneキーワード

# ユーザースクリプトを記述するための構文

# 基本的なキャラクターの会話

# 継続的な対話

# ナレーション

# ダイアログを表示しながら音声を同時に再生する

# 黒い画面のテキスト

# 背景/キャラクターの立ち絵を変更する

# 立ち絵をさまざまな位置に配置する

# ID付きの立ち絵

# 小さなアバターを配置する

# ジャンプシーンと分岐選択

# シーンジャンプ

# シーンコール

# 分岐

# ゲームを終了してタイトルに戻る

# バックグラウンドミュージック（BGM）の紹介

# 効果音を使う

# ビデオを再生する

# BGMやCGをアンロックして鑑賞可能

# テキストボックスを閉じる

# アニメーション効果を使用する

# 背景または立ち絵描画をアニメーション化する

# カスタムアニメーション

# 一部の属性を省略する

# 特殊効果を追加する

# Pixiの初期化

# 特殊効果を追加する

# プレハブエフェクトのリスト

# 重ね合わせたエフェクト

# 特殊効果のクリア

# 高度なチュートリアル

# ステートメントジャンプと分岐ジャンプを同一シーン内で実現(txtファイル)

# まず、ラベルの使用方法を理解する必要があります

# 上記の基盤で、chooseを使用して分岐のあるラベルの位置にジャンプすることができます

# 変数を使用する

# 条件付き実行

# 会話文にパラメーターを追加する

# トラブルシューティング

# ファイルが正常に認識されないのはなぜですか

# 音声ファイルが適切に再生されないのはなぜですか

# エクスポートされた Web ページを開けない理由

# その3：ソースコードからデバッグを開始（上級者向け）

# `-next` パラメータ

# `none`キーワード