アニメーション

背景や立ち絵にアニメーションを設定する

setAnimation:アニメーション名 -target=作用対象; のステートメントを使用します。

例：

; // 中央の立ち絵に下から入ってくるアニメーションを設定し、次の行に移動します
setAnimation:enter-from-bottom -target=fig-center -next;

現在、プリセットされたアニメーションは以下の通りです。

アニメーション効果	アニメーション名	持続時間（ミリ秒）
フェードイン	enter	300
フェードアウト	exit	300
左右に一度揺れる	shake	1000
下側から入る	enter-from-bottom	500
左側から入る	enter-from-left	500
右側から入る	enter-from-right	500
前後に一度移動する	move-front-and-back	1000
ぼかしながら入る	blur	300
オールドフィルムフィルター	oldFilm	0
ドットフィルター	dotFilm	0
反射フィルター	reflectionFilm	0
グリッチフィルター	glitchFilm	0
RGB 分離フィルター	rgbFilm	0
ゴッドレイフィルター	godrayFilm	0
フィルム系フィルターを削除	removeFilm	0
衝撃波入場	shockwaveIn	2000
衝撃波退場	shockwaveOut	2000

これらの名前は game/animation/animationTable.json に由来します。持続時間が 0 のプリセットは、通常、フィルター状態を即時に設定または解除するために使われます。

現在、アニメーションの作用対象は以下の通りです。

target	実際の対象
fig-left	左の立ち絵
fig-center	中央の立ち絵
fig-right	右の立ち絵
bg-main	背景
id	idを持つ特定の立ち絵

カスタムアニメーション

アニメーションを作成する

アニメーションファイルは game/animation にあります。独自のカスタムアニメーションを作成することができます。

アニメーションファイルは JSON で記述されており、リファレンスドキュメント で JSON 構文を参照することができます。

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

例: enter-from-left.json

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

各プロパティの意味は以下の通りです。

プロパティ名	説明
alpha	透明度、範囲は 0-1
scale	スケール
position	位置オフセット
rotation	回転角度、単位はラジアン
blur	ガウスぼかしの半径
brightness	輝度
contrast	コントラスト比
saturation	彩度
gamma	ガンマ
colorRed	赤の量, 範囲は 0-255
colorGreen	緑の量, 範囲は 0-255
colorBlue	青の量, 範囲は 0-255
duration	このタイムスライスの持続時間、単位はミリ秒 (ms)
oldFilm	オールドフィルム効果、0 はオフ、1 はオン
dotFilm	ドット状のフィルム効果、0 はオフ、1 はオン
reflectionFilm	反射フィルム効果、0 はオフ、1 はオン
glitchFilm	故障フィルム効果、0 はオフ、1 はオン
rgbFilm	RGB フィルム効果、0 はオフ、1 はオン
godrayFilm	光輝効果、0 はオフ、1 はオン

次に、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
  }
]

変換を使用する

持続時間が 0 ミリ秒で、タイムスライスが 1 つしかないアニメーションは、変換です。

例：

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

登場・退場のエフェクトを設定する

WebGAL のデフォルトのフェードイン・フェードアウトの登場・退場エフェクトを上書きして、独自のエフェクトに置き換えることもできます。例えば、以下のようにします。

setTransition: -target=fig-center -enter=enter-from-bottom -exit=exit;

注意：立ち絵や背景が設定されている場合にのみ、登場・退場エフェクトを設定することができます。登場・退場エフェクトを設定するコードは、立ち絵や背景の設定コードの 後 に記述します。また、登場・退場エフェクトを設定するステートメントは、立ち絵や背景を設定するステートメントの 直後 に連続して実行する必要があります。そうしないと、正しく適用されません。

ヒント

なぜそうする必要があるのでしょうか？

立ち絵や背景を設定すると、立ち絵や背景にデフォルトの登場・退場アニメーションが設定されます。立ち絵や背景を設定した後、立ち絵や背景はすぐにステージに表示されるのではなく、登場・退場エフェクトの設定を待ちます。

立ち絵や背景を設定した後、すぐに登場・退場エフェクトを設定するステートメントを実行すると、デフォルトの登場・退場アニメーションを上書きして、登場・退場エフェクトをカスタマイズすることができます。設定しない場合は、登場・退場時にデフォルトのアニメーションが実行されます。

立ち絵や背景を設定した後、すぐに登場・退場エフェクトを設定せずに、画像がすでに登場してから登場アニメーションを上書きしても意味がありません。しかし、この時点で画像がまだ登場していない場合は、設定した登場アニメーションに意味があります。立ち絵や背景が登場する際に正しく適用されます。

画像立ち絵の口パク同期

WebGAL は差分画像を使って、画像立ち絵の口パク同期アニメーションを実現できます。

差分画像を準備する

キャラクターには次の差分立ち絵を用意してください。

• デフォルト画像（通常は口を閉じた状態）
• 口開き差分
• 半開き口差分
• 口閉じ差分（デフォルト画像と同じでも構いません）
• 任意: 目開き差分、目閉じ差分

最小例

1. 差分を登録して立ち絵を登場させる

changeFigure:1/normal.png -id=charA -mouthOpen=1/mouth_open.png -mouthHalfOpen=1/mouth_half.png -mouthClose=1/normal.png;

2. 音声を再生して口パクを駆動する

; id で自由立ち絵を駆動する
キャラA:こんにちは、世界！ -vocal=charA_hello.wav -figureId=charA;

エンジンは音声のリアルタイム音量に応じて、mouthOpen、mouthHalfOpen、mouthClose の 3 つの差分を切り替え、口パクを模擬します。

位置立ち絵の例

; 中央立ち絵を登場させ、差分を登録する
changeFigure:1/normal.png -mouthOpen=1/mouth_open.png -mouthHalfOpen=1/mouth_half.png -mouthClose=1/normal.png;

; 中央立ち絵の口パクを駆動する
キャラA:こんにちは、世界！ -vocal=charA_hello.wav -center;

制限

• vocal を使用する場合、エンジンは音声音量に応じて口パクを駆動します。vocal がなくても figureId、left、right、center のいずれかを指定した場合は、模擬音量で対象立ち絵の口差分を駆動します。
• この機能は画像立ち絵にのみ適用されます。Live2D 立ち絵には独立した口パクパラメータ体系があり、この差分方式は使用しません。
• まばたき差分（eyesOpen、eyesClose）は任意です。登録後、エンジンはランダムまばたきアニメーションを自動的に発火します。