アニメーションについて

アニメーションの作り方

基本的な動き

novelsphere.js 2.3 以降では、アニメーション機能が使用できるようになりました。novelsphere.js のアニメーションは、吉里吉里2/KAG3 との互換性に配慮して設計されています。アニメーションは以下のような挙動で動きます。

novelsphere.js は複雑なアニメーションの制御が可能ですが、やや複雑であるため管理や記述には注意が必要です。

asd ファイルについて

asd ファイルは、指定した画像がどのようにアニメーションするかを記述するファイルです。

そのイメージレイヤーがアニメーションするかどうかは、関連する asd ファイルが存在するか否かで判断されます。そのため、シナリオ上ではそのイメージレイヤーがアニメーションするかどうかが判断できない場合があります。

アニメーションの2種類の方式について

アニメーションには2つの方式があります。クリッピング方式とセル方式です。この2つは、大きく「ベースの画像が存在するか」「複数のアニメーションを1つのイメージレイヤーで制御するか」で分類できます。

  複数のアニメーションを制御する 複数のアニメーションを制御しない
ベースの画像が存在する セル方式 セル方式
ベースの画像が存在しない セル方式 クリッピング方式

表を確認すると分かるように、セル方式の方が複雑な制御が可能です。ただし、セル方式はクリッピング方式に比べ処理が重く、記述も複雑です。

クリッピング方式

クリッピング方式は、1枚の大きな画像を切り取り（クリッピング）し、それを表示していくことでアニメーションさせる方式です。レイヤー全体を書き換えるようなアニメーションを得意としています。セル方式に比べ簡単な記述で済み動作も軽いですが、複雑な処理を苦手としています。

セル方式

セル方式は、ベース画像を用意し、別の画像を切り取った上でベース画像に置く形でアニメーションさせる方式です。レイヤー全体のうち一部分だけアニメーションさせたり、複数のアニメーションを1枚のレイヤーで動かしたりすることを得意としています。

クリッピング方式アニメーションの動かし方

用意する画像

必要な画像は、アニメーションのコマを繋げた大きな画像1枚になります。

コマの繋げ方は自由ですが、連続するコマを横に配置した横長の形が推奨されます。例えば、幅 50px 高さ 70px の6コマのアニメーションを作成する場合、幅 300px 高さ 70px の画像になります。

用意するasdファイル

asd ファイルは、ファイル名がアニメーションさせる画像と同じで、拡張子が「.asd」のファイルになります。例えば、「hoge.png」という画像をアニメーションさせる場合、「hoge.asd」というファイルを用意する必要があります。

幅 50px 高さ 70px の6コマのアニメーションを作成する場合の記述例としては以下のようなものになります。

*start
@wait time=80
@clip left=50 top=0
@wait time=80
@clip left=100 top=0
@wait time=80
@clip left=150 top=0
@wait time=80
@clip left=200 top=0
@wait time=80
@clip left=250 top=0
@wait time=80
@clip left=300 top=0
@jump target="*start"

用意する[image]タグ

シナリオ本編で[image]タグを実行した時点でアニメーションは開始されます。ただし、最初のコマが表示されるように、clip 属性で切り取りすることを忘れないでください。

[image storage=hoge page=fore layer=0 clipleft=0 cliptop=0 clipwidth=320 clipheight=240]

ここで指定された clipwidth 属性とclipheight 属性が、asd ファイルの[clip]タグで切り取られる幅と高さになります。

クリッピング方式のアニメーションはセーブしロードされると、そのときにアニメーションが停止しているしていないに関わらず、asd ファイルの頭から動作を開始します。そのため、クリッピング方式のアニメーションはループ構造をとることが推奨されます。

セル方式アニメーションの動かし方

用意する画像

セル方式は、アニメーションするパーツが描かれたアニメーション画像と、それを配置するベース画像の計2枚が必要になります。たとえばキャラクターがいてその目や口を動かしたい場合、目や口のアニメーション素材はアニメーション画像に、キャラクターの全身はベース画像に収めます。

アニメーション画像の指定は、asd ファイルの[loadcell]タグで可能ですが、デフォルトではベース画像に「_a」を末尾に追加した画像が読み込まれます。例えば、ベース画像が「hoge.png」であるならアニメーション画像は「hoge_a.png」になります。特に理由がない限り、デフォルトの命名規則に従うべきでしょう。

用意する asd ファイル

asd ファイルは、ファイル名がアニメーションさせる画像と同じで、拡張子が「.asd」のファイルになります。例えば、「hoge.png」という画像をアニメーションさせる場合、「hoge.asd」というファイルを用意する必要があります。

幅 100px 高さ 100px のベース画像の中心に、幅 50px 高さ 70px の6コマのアニメーションを配置する場合の記述例としては以下のようなものになります。

@loadcell
@loop
*start
@copy dx=25 dy=15 sx=0 sy=0 sw=50 sh=70
@wait time=80
@copy dx=25 dy=15 sx=50 sy=0 sw=50 sh=70
@wait time=80
@copy dx=25 dy=15 sx=100 sy=0 sw=50 sh=70
@wait time=80
@copy dx=25 dy=15 sx=150 sy=0 sw=50 sh=70
@wait time=80
@copy dx=25 dy=15 sx=200 sy=0 sw=50 sh=70
@wait time=80
@copy dx=25 dy=15 sx=250 sy=0 sw=50 sh=70
@wait time=80
@jump target="*start"

用意する[image]タグ

クリッピング方式と違い、ベース画像を配置するだけなので、clip 属性は必要ありません。

[image storage=hoge page=fore layer=0]

シナリオ本編で[image]タグを実行した時点で、デフォルトアニメーションが開始されます。デフォルトアニメーションのセグメント番号は0です。セグメント番号0は特殊なセグメントで、デフォルトセグメントと呼ばれます。

デフォルトセグメントはセーブしロードされると、そのときにアニメーションが停止しているしていないに関わらず、asd ファイルの頭からアニメーションの動作を開始します。そのため、デフォルトセグメントはループ構造をとるか、アニメーションさせないことが推奨されます。

デフォルトアニメーション以外のアニメーションを制御したい場合は、[animstart]タグおよび[animstop]タグを使用します。

[animstart]タグ、[animstop]タグ、[wa]タグについて

セル方式アニメーションのレイヤーで複数のアニメーションを制御したい場合、[animstart]タグと[animstop]タグを用います。セル方式アニメーションのアニメーションの停止を待つ場合は[wa]タグを使用します。

asd ファイル内で使用できるタグ

asd ファイルは通常のシナリオファイルと同様の文法で記述されますが、一部のタグが使用できません。また、asd ファイル内においてのみ使用できる特殊なタグが存在します。

クリッピング方式・セル方式両方で利用できるタグ

通常のシナリオファイル内で使用できるタグのうち、以下のタグはクリッピング方式・セル方式両方で利用できます。これらのタグの挙動についてはタグリファレンスのページをご確認ください。

また、ラベルの記述も可能です。ラベルを配置してジャンプさせることでアニメーションのループを作成します。

wait, jump, if, elsif, else, endif, ignore, endignore, eval, o2_iscript, o2_endscript, macro, endmacro, erasemacro, s

クリッピング方式のみで利用できるタグ

clip
属性 必須 値 説明
left yes ピクセル数 切り取りを行う左端位置をピクセル数で指定します。
top yes "fore" / "back" ("fore") 切り取りを行う上端位置をピクセル数で指定します。

[image]タグにおける clipleft 属性および cliptop の効果と同じで、切り取りを行う位置を指定します。切り取りする幅と高さは、[image]タグで読み込んだ際の幅と高さと一致し、変更することはできません。

クリッピング方式によるアニメーションは、基本的に[clip]タグと[wait]タグによってアニメーションさせていきます。

セル方式のみで利用できるタグ

loadcell
属性 必須 値 説明
storage no 画像ファイル名 読み込むセル画像ファイル名を指定します。
top yes "fore" / "back" ("fore") 切り取りを行う上端位置をピクセル数で指定します。

アニメーションのセル画像を読み込みます。storage 属性が省略された場合は、ベース画像のファイル名に "_a" を付加した画像が読み込まれます。

このタグは特殊なタグで、asd ファイルの先頭に必ず記述する必要があります。セル画像を読み込まなければアニメーションができないからです。セグメントの開始ラベルの次に記述する必要はありません。むしろ、セグメントごとに別のセル画像を読み込むことは推奨しません。
copy
属性 必須 値 説明
dx yes ピクセル数 貼り付け先の左端位置をピクセル数で指定します。
dy yes ピクセル数 貼り付け先の上端位置をピクセル数で指定します。
sx yes ピクセル数 切り取り元の左端位置をピクセル数で指定します。
sy yes ピクセル数 切り取り元の上端位置をピクセル数で指定します。
sw yes ピクセル数 切り取る幅を0以上の整数で指定します。
sh yes ピクセル数 切り取る高さを0以上の整数で指定します。

セル画像からベース画像にコピーを行います。

クリッピング方式の[clip]タグに近い働きをしますが、幅と高さが固定でレイヤー全域がアニメーションしていくクリッピング方式とは異なり、「ベース画像のどこに貼り付けるか」と「幅と高さの指定」の情報が必要となります。

loop

そのセグメントがループするか否かを宣言します。

セグメントの開始直後にこのタグを設置することが望まれます。最初に実行されるデフォルトセグメント（セグメント番号としては0）の場合は[loadcell]タグの直後、その他のセグメントの場合は開始指定するラベルの直後に置かれるべきです。また、[loop]タグを設置する場合は、ループするようにタグを記述することが強く望まれます。

このタグは「そのセグメントがアニメーションし続けているべきか」をセーブやロードなど他の処理に伝えるために存在しており、自動でループさせる機能はもっていません。デフォルトセグメントを除き、loop 宣言がされていないセグメントはロード時にアニメーションを開始しません。

また、[animstop]タグで停止が指示されておらず、かつ loop 宣言がされているセグメントが指定された[wa]タグは無視されます。

home

[animstop]タグによって停止させたい場所に設置します。

[animstop]タグが実行され、セグメントの停止が指示された際、[home]タグに到達するまでアニメーションは実行され続けます。したがって[home]タグが存在しないセグメントに対して[animstop]タグを実行したとしても、停止することはありません（もちろん、[s]タグがあればアニメーションは停止します）。