アニメーション表示画像の設定方法

uLilithでアニメーション表示される画像アイテムを作成する場合、
uLilithに添付・プリインストールされているSampleAnimationFaceプラグインを使用します。


[Preference]フィールドでの設定

アニメーション表示画像アイテムを作成するフェイスの
[Preference]フィールドで、プラグインを使用する設定が必要になります。
[Preference]フィールド内に以下の3行を記述してください。
NeedPluginCount = 1
NeedPlugin1 = SampleAnimationFace.gpi
NeedPluginAutoEnable1 = True
SampleAnimationFaceプラグイン以外の他のプラグインも同時に使用する場合、
   NeedPluginCountの数を増やした上で、
   NeedPluginNeedPluginAutoEnableの末尾の連番を変えてください。


アイテムのキー設定例

アニメーションアイテムのフィールドは以下のように設定します。
[AnimationImage01]
Category = PluginFrameBuffer
SubCategory = Animation
PosX = 20
PosY = 20
Width = 20
Height = 20
AnimationImageFile = animationimage_01.png
AnimationFrameWidth = 20
AnimationFrameHeight = 20
AnimationTotalCount = 15
AnimationInterval = 1000
AnimationLoopCount = 0


アニメーションアイテムの基本設定

CategoryPluginFrameBufferを指定します。
SubCategoryキーをAnimationと指定してください。
SubCategoryは必須キーです)
PosXPosYキー(かTopLeftAnchorキー)で表示位置を指定し、
WidthHeightでアイテムの表示サイズを設定するのは他のアイテムと同様です。
なお、アイテムのフィールド名は自由です。(ひとつのフェイスに複数配置することも可能です)


アニメーションに使用可能な画像の種類

アニメーションに使用可能な画像は、
  • 表示するコマを全て並べた1枚の画像ファイル
    (uLilithで使用可能な画像形式。
      透明度情報つきのPNGなど、通常の画像アイテムと同じものが使えます。)
  • ファイルの中に複数の画像を埋め込んだ画像ファイル
    (アニメーションGIFかマルチページTIFF)
のどちらかになります。


アニメーション画像の設定

アニメーションに使用する画像には、以下の設定が必要になります。
  • アニメーションで使用する画像ファイル名
    AnimationImageFileキー)
  • アニメーションで表示するコマの画像サイズ・コマの数
    AnimationFrameWidthAnimationFrameHeightAnimationTotalCountキー)
  • アニメーションの間隔(かコマの表示順・表示間隔)
    AnimationIntervalキー(かUseCustomSequenceCustomSequenceキー))
  • アニメーションのループ回数
    AnimationLoopCountキー)

使用する画像ファイルの種類によって、必須キーが異なります。

(1)表示するコマを全て並べた1枚の画像
全ての設定に関するキーが必須になります。
(2)マルチページTIFF
ファイルに埋め込まれた画像がそのままコマになるので
コマのサイズ・コマの数は設定する必要はありません。
その他の設定は必須になります。
(3)アニメーションGIF
コマとなる複数の画像もアニメーションの動作設定も
全てファイル内に埋め込まれているので
画像ファイル名以外は未設定でも問題ありません。
アニメーションの間隔・ループ回数がキー未設定の場合、
アニメーションGIFに埋め込まれた設定でアニメーション表示されます。
キーを記述した場合は、設定を上書きし(GIFに埋め込まれた設定を無視して)
フィールドに記述したキーの設定でアニメーション表示されます。


アニメーションのコマ画像の設定

AnimationImageFileキーには1ファイルしか指定できないので、
表示するコマを全て並べた1枚の画像を使用する場合、
AnimationFrameWidthキー(コマの幅)と
AnimationFrameHeightキー(コマの高さ)、
AnimationTotalCountキー(コマの総数)で
コマ画像のサイズ・作成するコマの数の設定をし、
AnimationImageFileキーに指定した画像から指定のサイズで画像を切り出してコマを作成します。

コマ画像は左上から右下方向に向けて切り出されます。
AnimationImageFileキーに指定した画像から、
AnimationFrameWidthAnimationFrameHeightキーで指定したコマの大きさに合わせて
横1列に並べた画像であれば、左から右に切り出し、
縦1列に並べた画像であれば、上から下に切り出していきます。
2列以上並べた画像の場合、画像の左上部分から
まず「コマ画像の幅・高さの分ずつ」右方向に切り出していき、(改行するような感じで)
右端までいったら左端に戻り、コマの高さの分下に移動してまた左端から右方向へ切り出していきます。
この『左上端から右方向に進んで、右端まで行ったら改行して、また左端から右方向へ』
という動きを繰り返して1枚の画像からコマを切り出します。
このコマが作成された順番が『実際にコマの表示される順番』になります。
(なお、コマには後述の「カスタムシーケンス」で使用される『コマの番号』が
  コマが作成された順番でつきます。)

例えばこのような画像(画像サイズ:100×60 px)で、
AnimationFrameWidth = 20
AnimationFrameHeight = 20
AnimationTotalCount = 15
を指定し
20×20 pxのコマを15個作成する設定にすると、
上のような順番でコマが切り出され、コマが作成されます。


同じ画像でコマのサイズを変えた場合も
コマの作成される順番・方向は変わりません。
AnimationFrameWidth = 30
AnimationFrameHeight = 30
AnimationTotalCount = 6
を指定し
30×30 pxのコマを6個作成する設定にした場合
このようにコマが作成されます。

なお、AnimationTotalCountキー(コマの総数)で設定した数以上はコマを作りません。
画像の大きさが余っていても余分に切り出したりはしません。
逆に、AnimationFrameWidthAnimationFrameHeightで設定したサイズのコマが
画像の大きさが足りずにAnimationTotalCountの数の分作成できない場合はエラーとなり
アニメーションは表示されません。


アニメーションの間隔の設定

アニメーションの間隔は、AnimationIntervalキーで設定します。
(ミリ秒単位。1000.1秒・10001秒です。)
AnimationIntervalキーの場合は単純に、
コマを作成した順番で(GIF・TIFFならファイルに埋め込まれている画像の順番で)
全てのコマをキーで設定した一定の間隔でコマを表示するだけです。

AnimationIntervalキーの代わりに
UseCustomSequenceCustomSequenceキーを設定すると、
コマの表示順やコマ個別の表示時間を自由に設定できる「カスタムシーケンス」で
アニメーション表示が可能になります。


カスタムシーケンスを使用したアニメーションの表示

カスタムシーケンスを使用する場合、まずUseCustomSequenceキーをTrueに設定してください。
次に、CustomSequenceキーでシーケンスの内容を指定します。
CustomSequence = 0:100, 4:200, 3:100, 1:50, 2,50

〔コマ番号〕: 〔表示時間〕, 〔コマ番号〕: 〔表示時間〕, 〔コマ番号〕: 〔表示時間〕, …
のように、表示されるコマと表示時間、表示順をまとめて指定します。
コマ番号は、アニメーションGIF・マルチページTIFFならファイル内の画像の順番で、
コマを全て並べた1枚の画像から作成したコマなら左上から(コマを作成した)順番に
0から始まる番号がつけられているので、その番号で指定します。
1を指定すると2番目の画像になってしまうので気をつけてください。
表示時間はミリ秒単位です。(1000.1秒・10001秒)
コマ番号・表示時間ともに、半角ハイフンで区切った2つの値を入れることで
その範囲内でランダムな値を使用することもできます。


☆カスタムシーケンス記述例
CustomSequence = 0:100, 4:200, 3:100, 1:50, 2,50
0番目のコマを100ミリ秒」→「4番目のコマを200ミリ秒」→「3番目のコマを100ミリ秒」
→「1番目のコマを50ミリ秒」→「2番目のコマを50ミリ秒」の順で表示

CustomSequence = 0-9:300-600
0番目~9番目のコマのどれか1つを300ミリ秒~600ミリ秒の間のランダムな時間」で表示

ランダム範囲はコマ番号・表示時間どちらか一方のみで使用することも可能です。
もちろん、通常のコマ表示と組み合わせることもできます。
CustomSequence = 2-5:700, 1:900, 0,400, 7:200-500
2番目~5番目のコマのどれかを700ミリ秒」
→「1番目のコマを900ミリ秒」→「0番目のコマを400ミリ秒」
→「7番目のコマを200ミリ秒~500ミリ秒の間のランダムな時間」の順で表示


アニメーションのループ回数の指定

アニメーションのループ回数はAnimationLoopCountキーで指定します。
0を設定、またはキーを省略したときは無限ループします。
1を設定した場合は、1周だけアニメーションが表示された後、
最後のコマが表示されつづけます。
2以上を設定した場合は、
設定した数値分(回数分)繰り返しアニメーションが表示されます。
コマの順番通りで表示する通常のアニメーション表示も
カスタムシーケンスによる表示も、どちらもこのキーのループ回数だけ表示がループします。


アニメーションの再表示の設定

ResetOnRedrawキーで指定します。この設定は省略してもかまいません。
アイテムの表示タイミングをTypeViewTypeActiveTypeキーで指定しているときなど、
キーの設定に応じてアイテムが非表示になるとアニメーションがいったん停止されます。
その後状態が変化して表示状態に戻ったとき、
非表示になった時点で停止したアニメーションを巻き戻して最初から表示するか、
あるいは停止したところから再開するかを設定します。

ResetOnRedrawキーがTrueの場合、
アニメーションを巻き戻して最初から表示します。
Falseの場合・キーを省略した場合は
アイテムが非表示になって停止したコマから再開します。


その他の設定可能なキーについて

他のアイテムと同じく、Priorityキーで表示優先度を調整することも可能です。
TypeViewTypeActiveTypeキーでアイテムの表示タイミングを設定できます。
Enableキーも設定可能なので、
アニメーションアイテムを操作ボタンとして作ることも可能です。
NormalAlphaPushedAlphaMouseOverAlphaというキーを利用して
通常・クリック・マウスオーバー時の透明度を指定することもできます。
また、Typeキーの指定で「スライダアイテム」や
「リサイズ用のドラッグアイテム」として作成することも可能です。
(スペクトラムアナライザは作成できません。)
これを利用し、つまみ画像がアニメーションするスライダを作成できます。
スライダアイテムを作成する場合は、
FrameBufferWidthキー・FrameBufferHeightキーで
つまみ画像として表示する画像サイズを指定してください。


ini記入例サンプル

最後に、アニメーションアイテムを配置したサンプルフェイスを添付しておきます。
animation_test.zip

上の画像のように、(※サンプル画像なので上の画像の表示自体は動きません)
左側にはコマの順番通りに一定間隔で表示されるアニメーションアイテムを、
右側はカスタムシーケンスで表示順を指定したものを配置しています。
なお、左側のアニメーションアイテムは
ActiveType = ActiveOnlyResetOnRedraw = Trueを指定し
アクティブ時のみ表示・再表示されたときのアニメーションは巻き戻して表示する設定にしています。
最終更新:2012年12月25日 19:41