吉里吉里2/KAG3のアニメーション

2つのアニメーションの種類

KAGにアニメーションをさせるためには2つの種類があります。

一つは「セル画像」を用いるセルを基本としたアニメーションで、この場合、「ベース画像」の上に「セル画像」の各部分を切り取って順次貼り付けるような感じでアニメーションを行います。

もう一つは、KAG 3.05 beta 3 から使用可能になった クリッピングを基本としたアニメーション方法で、この場合はセル画像は必要ありません。

image タグに clipleft, cliptop, clipwidth, clipheight の4つの属性がありますが、(概念的には)これを順次変えてやることで、大きな画像の一部分を順次表示するようなアニメーションを行います。表示する画像を何枚も横に並べ、それを順次表示するような用途に向いています。

負荷はクリッピングを基本としたアニメーション方式のほうが軽いです。デモシーンにおいて、レイヤの全域を書き換えるようなアニメーションを行う場合はクリッピング方式のアニメーションのほうが良いでしょう。

逆に、目パチ、口パクのような用途にはセル方式のアニメーションの方が小回りが利いて使いやすいでしょう。

セル方式のアニメーションの記述の仕方

まず、アニメーションを行わせるためには、「ベース画像」と「セル画像」が必要になります。ベース画像はアニメーションの下地となる画像です。セル画像はアニメーションの「部品」が並べてある画像です。ベース画像の上にアニメーション画像を部分的にコピーして重ねていくという方法を用います。

ベース画像は image タグで読み込まれます (ここで用いるベースとは、KAGの背景レイヤの base とは違う意味です )。セル画像は、アニメーション定義ファイル内の loadcell タグで読み込みます。

アニメーション定義ファイルは、ベース画像とファイルが同じで、拡張子が asd のテキストファイルです。

アニメーション定義ファイルは KAG の文法で記述しますが、タグ体系は KAG のものとは異なります。

アニメーションセグメントを用いない、簡単なアニメーションならば、KAG の System フォルダにある LineBreak や PageBreak が参考になると思います。

アニメーションセグメントを用いたサンプルは現在の所、吉里吉里ソースの中の environ/win32/kag3/scenario/animtest.ks にあります。

セグメント

セグメントは、一組のベース画像、セル画像、asdファイルで、複数のアニメーションを同時進行させるための仕組みです。

セグメントにはレイヤごとに 0 番から始まる番号がついています。

セグメント 0 は特殊なセグメントでデフォルトセグメントと呼ばれ、画像の読み込みとともに実行が自動的に始まるセグメントです。system フォルダにある LineBreak や PageBreak はこのデフォルトセグメントのみを使用しています。簡単なアニメーションならばこれだけで十分だと思います。

口パクや目パチなどを一つの画像で行いたい場合、複数のセグメントを扱わなければなりません。たとえば、目パチはデフォルトセグメントで常時アニメーションさせておき、口パクはシナリオの制御によって開始させたり、停止させたりする、という用途です。

セグメントに対するアニメーションのスタートは KAG の通常のシナリオの animstart で行います。animstart は任意の ( デフォルトセグメント以外の ) セグメントでアニメーションを開始します。

animstart タグの loop 属性が true のとき、このアニメーションはループしていないといけません。自動的にループするわけではないので、ループするように記述しなければなりません。

ループしていなくてもエラーになるわけではありませんが、栞を保存して読み込んだときに正しく画像が再現されない可能性があります。また、栞が読み込まれるときは、loop=true を指定した場合のみにアニメーションが再開されますが、かならず animstart で指定したasdファイルのラベルの最初から実行が始まります。

loop=false の時は、アニメーションはしますが、最終的に s タグで停止しなければなりません。また、[s] タグで停止したときには、ベース画像と同じ状態に戻ってなければなりません。単発のアニメーションを行わせたいときはこれを使います。

animstop はアニメーションを停止させますが、停止を待ちません。実際はアニメーションが停止するためには @home タグを通過する必要があります。

wa は任意のセグメントのアニメーションの終了を待ちます。デフォルトセグメントのアニメーションもまつことができます。animstart で loop=falseを指定したときや、animstop でアニメーションを停止させた時のみ有効です。他の場合で wa を指定した場合は永遠に待つことになってしまいます。

栞に保存される情報は、アニメーションがどのセグメントでどの開始ラベルから始まったかという情報のみで、どのコマ位置まで進んでいるか、は記録されません。

また、ループ中のアニメーションのみが、栞を読み込んだときにアニメーションが再開されます。

クリッピング方式のアニメーションの記述の仕方

クリッピング方式でアニメーションを行う場合は、セル方式で行うときと異なり、コマ画像が横並びになった画像を一枚用意します。

たとえば、320x240 の画面で8枚の画像でアニメーションを行うならば、2560×240 の画像を用意します ( 2560 = 320 * 8 )。

画像を読み込むときは、最初のコマが表示されるように image タグを記述します。

たとえば、

@image storage=anim page=fore layer=0 mode=rect clipleft=0 cliptop=0 clipwidth=320 clipheight=240

となります。

asd ファイルには、横に並んだ各コマ画像が順次表示されるように記述します。セル画像は用いないので、loadcell タグを記述する必要はありません。

たとえば、

@wait time=80
@clip left=320 top=0
@wait time=80
@clip left=640 top=0
@wait time=80
@clip left=960 top=0
@wait time=80
@clip left=1280 top=0
@wait time=80
@clip left=1600 top=0
@wait time=80
@clip left=1920 top=0
@wait time=80
@clip left=2240 top=0
@wait time=80
@s

見てお気づきかとは思いますが、実際は横に並んでいる必要はありません。

縦に並んでいても良いですが、png などで圧縮するときは横並びになっていた方が高い圧縮率を得られます。

クリッピング方式のアニメーションでは、栞には、そのレイヤがどのようにアニメーションを行っていたかの情報が保存されません。次の「栞を保存可能なラベル」を通過するまでには、そのレイヤに別の画像を読み込むなどして、クリッピング方式のアニメーションの情報を無効にしてください。

asdファイル中タグの説明

loadcell

属性

storage (省略可)
読み込むセル画像ファイル名を指定します

説明

このタグはセル方式のアニメーションを行うときのみに使用します。

loadcell タグはアニメーションのセル画像を読み込みます。セル画像を読み込まなければアニメーションができないので、asd ファイルの先頭には必ず記述します。storage 属性が省略された場合は、ベース画像のファイル名に _a を付加した画像が読み込まれます。

asd ファイルの先頭に記述しさえすれば OK で、セグメントの開始ラベルの次に記述する必要はありません。

loop

属性

(なし)

説明

このタグはセル方式のアニメーションを行うときのみに使用します。

loop タグは、データがループを行うことを宣言するためのタグです。

このタグを宣言したからと言って自動的にデータがループするわけではありません。ループするように記述してください。

このタグは、各セグメントでのループの開始を行う場合の、セグメントの入り口のラベルの次あたりに記述してください。最初のデフォルトセグメントの場合は loadcell の次あたりで OK です。

copy

属性

dx
転送先x座標
dy
転送先y座標
sx
転送元x座標
sy
転送元y座標
sw
sh
高さ

説明

このタグはセル方式のアニメーションを行うときのみに使用します。

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

wait

属性

time
待ち時間(ms)

説明

指定時間ウェイトをとります。

通常は、copy タグと wait タグの繰り返しになります。

jump, if/endif, eval, iscript/endscript

KAG のシナリオと同様です。

ただし、複数が並列して実行される物なので、変数を操作する場合は使用する変数が重ならないようにするなど、注意してください。

s

属性

(なし)

説明

通常の KAG と同じように、そこで実行を停止します。

アニメーションがループしない場合は、loop タグを書かずに、このタグで停止させてください。

画像が読み込まれた時点ではアニメーションをしたくないのならば、loadcell タグの直後に s タグを書いて停止させてください。

home

属性

(なし)

説明

このタグはセル方式のアニメーションを行うときのみに使用します。

animstop タグを指定した場合に停止する場所です。これを書かないと animstop では停止できません。animstop タグを使う場合は、ループの途中に必ず一カ所以上記述してください。

clip

属性

left
クリッピングを行う左端位置
top
クリッピングを行う上端位置

このタグはクリッピング方式のアニメーションを行うときのみに使用します。

image タグにおける clipleft と cliptop 属性の値の効果と同じで、クリッピングを行う位置を指定します。

クリッピングの幅と高さは変更できませんので、image タグで指定した幅と高さを変えることはできません。