ActX : How to use(アニメ作成)

アニメ作成
ActXのアニメーションの仕組み

ここではActXの標準マスコットである、だよもん星人・長森瑞佳さんを使ってActXのアニメーションの仕組みについて解説してみましょう。

xpm-fileの準備

まず、アニメーションの前に用意するものはWindowの肩に乗せたいxpm形式の画像ファイルです。 ActXはxpm(X11 pixmap)形式の画像データにしか対応しておりませんので、別形式の画像データを使用したい場合はxv等のツールを使って変換しておいてください。

ここでxpmファイルは透過色を事前に設定したものを用意するとより一層Windowが引き立ちます。 xpmファイルはvi,mule等のエディタで編集可能なテキストファイルです。これを編集して、マスコットの外側のいらない部分を透明にしてしまいましょう。xpmファイルの中身を見てみますと
/* XPM */
static char *asuka1[] = {
/* width height num_colors chars_per_pixel */
"    5   136       15            1",
/* colors */
". c #000000",
"# c #5252ef",
"a c #63bd21",
"b c None",         ←★
"c c #9c4242",
"d c #bd0000",
"e c #ce7373",
…
/* pixels */
"bbbbbbbbbbbcccbbbbcccccccccbbb<略>",
"bbbbbbbccccgigccccgiiiiiiiiccb<略>",
…
…とこのような感じになっています。ここで★で示した部分(ここでは「b」)のように色指定を「None」となるように変更するとActxではその色を透明として扱うようになります。
実際のxpmファイルの内容を見てみるこれみればxpm-fileの中身ってどんなことやってるのか非常によく分かるでしょ?

まばたきさせてみよう

それではActXの基本(?)アニメーションとなるマスコットのまばたきからアニメーションについての解説を始めてみましょう。

あと、アニメーションの解説にはいる前にひとつ。 ActXのアニメーションはマスコット全体を書き換えるので、たとえ動くのがほんの一部分だったとしても下図にあるようにマスコットの全身像のアニメーションパーツを用意してください。

まばたきをさせるには、まず最低でも目を開いている絵と目を閉じている絵の二枚の絵が必要になります。

mizuka0.xpm mizuka2.xpm

通常状態目を閉じてます

この二枚の絵で、mizuka0.xpmを60×1/10秒間(1/10秒単位)表示して、その後1/10秒だけmizuka2.xpmを表示、その後またmizuka0.xpmを60×1/10秒間...ということをするだけで6秒に一回まばたきするアニメーションの完成です(人間の目ってけっこういい加減ですよね…笑)。
さらにActXではmizuka0.xpmを表示する「60回」という数字を「1～60回のうちからランダムな回数」で表示するというようにフレームの表示時間にランダム性を持たせることができます。これによってランダム間隔でのまばたきをさせることが可能です。
それでは、このまばたきアニメーションがどうなっているか見てみましょう(アニメGIFで再現していますのでランダム間隔にはなっていません)。 …ちょっとまばたきがぎこちないかな? と思った方は間にもう1フレーム、目をつぶる途中の絵を入れてみましょう。

mizuka1.xpm

瞬き途中

この一枚を前の二枚の絵に挟み込む…

Chart : まばたきアニメーション

mizuka0.xpm 1～60回

↓

mizuka1.xpm 1回

↓

mizuka2.xpm 1回

↓

mizuka1.xpm 1回

↓

最初に戻る

ということによってよりスムーズなまばたきのアニメーションを作り出すことができます。最終的なまばたきアニメーションはこんな感じになります。

もうすこし応用を

さて、まばたき以外にもおなじような間隔でいくらでもアニメーションのパターンは考えられます。今度は瑞佳をはにゃっと笑わせてみましょう。用意する絵は笑っている絵とその途中の2パターンです。

mizuka4.xpm mizuka3.xpm

はにゃっその途中

これを、まばたきのときの目をつぶってる時間を長くする…というチャートで回せば考えどおりになるかと思います。

Chart : にっこりアニメーション

mizuka0.xpm 10～60回

↓

mizuka3.xpm 1回

↓

mizuka4.xpm 20～60回

↓

mizuka3.xpm 1回

↓

最初に戻る

さらに複雑なアニメーションへ～ブロックループ～

ここから先はもう少し複雑なアニメーションの話になります。
具体的にはある決まったアニメーションをm回からn回の間ランダムな回数だけ実行したいということをおこなうため『ブロックループ』という概念を導入します。
その例として瑞佳をうるうるさせてみましょう。用意する絵はうるうる(A)、うるうる(B)、うるうるに入る途中の三枚でうるうる(A)⇔うるうる(B)を高速で切り替えることによりうるうるを実現します(ナンノコッチャ…笑)。

mizuka6.xpm mizuka7.xpm mizuka5.xpm

うるうる(A) うるうる(B) 移行途中

ここで一つ注意なのですが、よく見るとこれら三枚の絵とそれ以前のmizuka0.xpm等とは外形(透明で指定した以外の部分の形)が違っています。このため、Shape FlagをONにする必要があります。メモリ節約のためOFFにできるようになっていますが、よく分からない方は常時Shape FlagをONにしてしまってもかまいません。変更の仕方等はこのページの下にある「パラメータ変更メニューの操作」または「設定ファイル」のページをご覧下さい。
話がそれましたが、このうるうるアニメーションのチャートを見てみましょう。

Chart : うるうるアニメーション

mizuka0.xpm 10～60回

↓

mizuka5.xpm 1回

↓

mizuka6.xpm 1回

↓↑ 40～80回繰り返し(ブロックループ)

mizuka7.xpm 1回

↓

mizuka5.xpm 1回

↓

最初に戻る

ここではmizuka6.xpm→mizuka7.xpmというアニメーションを40～80回繰り返すというブロックループを使っています。ブロックループの指定(詳しくは下を参照)はループの最後であるmizuka7.xpmに対しておこなっています。
この場合は直前のフレームに戻るループでしたが、もちろんもっと前のフレームにもどって5～6フレーム、あるいはそれ以上で構成されたアニメーションに対してブロックループを使うこともできます。したがって、「3～5回まばたきする間に一回にっこりさせる」というようなアニメーションパターンも簡単に作ることができます。
なお、ブロックループのなかにブロックループを入れる「入れ子構造」にもVersion0.98 pre9以降で対応しました。

以上、説明しきれてない部分も多いですが、こでだけでけっこう複雑なアニメーションもいけると思いますので設定ファイル等ご自分で実際にいじって試してみてくださいませ。

Mascot Config Windowの操作

Window各部の説明

このWindowで変更されたパラメータはメニューから「Save Parameter」→「Save」を実行しない限りは設定ファイルの方にはセーブされません。ご注意下さい。
また、くわしいリソースの内容に関しては次節の「設定ファイル」を参照してください。

対応リソース 解説

A (なし) マスコットNo.。
表示のみです。

B menu.title マスコットのタイトル。
マスコット変更popupメニュー中のマスコットのタイトル。

C menu.shapeFlag Shape機能のON/OFF
押下された状態(図)のときにON。

D menu.xPosition
menu.yPosition X,Yのオフセット
マスコット表示位置のオフセット。

E (なし) フレームNo.
ボタンになっています。押下するとHにかかれたxpmファイルをマスコットの位置に描画して内容の確認ができます。

F menu.xpmFileY xpmファイル名
変更してもそのファイルが存在しないときはerrorを表示した後で変更をクリアします。

G menu.minFrameY
menu.maxFrameY フレームの最小描画枚数, 最大描画枚数

H menu.nextFrameY ブロックループの最初のフレーム番号
ブロックループの最後になるフレーム以外では使用しないでください。使用しない場合は空欄でかまいません。

I menu.minFloopY ブロックループの最小ループ数
ブロックループの最後になるフレーム以外では使用しないでください。使用しない場合は空欄でかまいません。

J menu.maxFloopY ブロックループの最大ループ数
ブロックループの最後になるフレーム以外では使用しないでください。使用しない場合は空欄でかまいません。

K (menu.numFrame) フレーム追加ボタン
これを押すとxpmファイルを入力するWindowが立ち上がります。任意の位置にフレームを挿入することができます。

L (menu.numFrame) フレーム削除ボタン
これを押すとフレーム削除Windowが立ち上がります。
任意のフレームを削除することができます。

N (なし) clickアニメのパターンNo.
プルダウンメニューからclickアニメのパターン番号を選択すると、対応するスタート/エンドフレーム、ふきだしメッセージ、音声ファイル名がそれぞれ記述され、内容の変更またはパターンの追加ができます。

N menu.startClk?? clickアニメのスタートフレームNo.
プルダウンメニューからフレームを選択します。 --を選択するとそのクリックパターンは消去されます。

O menu.endClk?? clickアニメのラストフレームNo.
プルダウンメニューからフレームを選択します。 --を選択するとそのクリックパターンは消去されます。

P menu.wordClk?? クリック時のふきだしメッセージ。
クリック時にふきだしに表示させるメッセージ文字です。 "%p"で改ページ、"%n"で改行を指定します。その他は自由に記述ができます。

Q menu.sndClk?? クリック時の音声ファイル。
音声ファイル格納ディレクトリ(前節参照)からの相対パスでファイル名を指定します。また、音声再生コマンド(前節参照)が指定されていない場合は、編集できません。

R (なし) 音声テストボタン
フレームQ中の音声ファイルの再生テスト用ボタンです。

S menu.wordMail メイル着信時のふきだしメッセージ。
メイル着信時にふきだしに表示させるメッセージ文字です。 "%n"で改行を指定します("%p"は機能しません)。その他は自由に記述ができます。

T menu.sndMail メイル着信時の音声ファイル。
音声ファイル格納ディレクトリ(前節参照)からの相対パスでファイル名を指定します。また、音声再生コマンド(前節参照)が指定されていない場合は、編集できません。

U (なし) 音声テストボタン
フレームT中の音声ファイルの再生テスト用ボタンです。

V (なし) 変更決定ボタン
パラメータ変更Window中のすべての変更を実行してパラメータ変更Windowを終了します。
ただし、ここで変更されたパラメータはメニューから「Save Parameter」→「Save」を実行しない限りは設定ファイルの方にはセーブされません。

W (なし) 変更キャンセルボタン
パラメータ変更Window中のすべての変更をキャンセルしてパラメータ変更Windowを終了します。

使い方設定ファイル

くるみちまり
Last modified: Sat Oct 20 18:03:50 JST 2001

Chart : まばたきアニメーション
mizuka0.xpm	1～60回
↓
mizuka1.xpm	1回
↓
mizuka2.xpm	1回
↓
mizuka1.xpm	1回
↓
最初に戻る

Chart : にっこりアニメーション
mizuka0.xpm	10～60回
↓
mizuka3.xpm	1回
↓
mizuka4.xpm	20～60回
↓
mizuka3.xpm	1回
↓
最初に戻る

mizuka6.xpm	mizuka7.xpm	mizuka5.xpm

うるうる(A)	うるうる(B)	移行途中

Chart : うるうるアニメーション
mizuka0.xpm	10～60回
↓
mizuka5.xpm	1回
↓
mizuka6.xpm	1回
↓↑	40～80回繰り返し(ブロックループ)
mizuka7.xpm	1回
↓
mizuka5.xpm	1回
↓
最初に戻る

	対応リソース	解説
A	(なし)	マスコットNo.。表示のみです。
B	menu.title	マスコットのタイトル。マスコット変更popupメニュー中のマスコットのタイトル。
C	menu.shapeFlag	Shape機能のON/OFF 押下された状態(図)のときにON。
D	menu.xPosition menu.yPosition	X,Yのオフセットマスコット表示位置のオフセット。
E	(なし)	フレームNo. ボタンになっています。押下するとHにかかれたxpmファイルをマスコットの位置に描画して内容の確認ができます。
F	menu.xpmFileY	xpmファイル名変更してもそのファイルが存在しないときはerrorを表示した後で変更をクリアします。
G	menu.minFrameY menu.maxFrameY	フレームの最小描画枚数, 最大描画枚数
H	menu.nextFrameY	ブロックループの最初のフレーム番号ブロックループの最後になるフレーム以外では使用しないでください。使用しない場合は空欄でかまいません。
I	menu.minFloopY	ブロックループの最小ループ数ブロックループの最後になるフレーム以外では使用しないでください。使用しない場合は空欄でかまいません。
J	menu.maxFloopY	ブロックループの最大ループ数ブロックループの最後になるフレーム以外では使用しないでください。使用しない場合は空欄でかまいません。
K	(menu.numFrame)	フレーム追加ボタンこれを押すとxpmファイルを入力するWindowが立ち上がります。任意の位置にフレームを挿入することができます。
L	(menu.numFrame)	フレーム削除ボタンこれを押すとフレーム削除Windowが立ち上がります。任意のフレームを削除することができます。
N	(なし)	clickアニメのパターンNo. プルダウンメニューからclickアニメのパターン番号を選択すると、対応するスタート/エンドフレーム、ふきだしメッセージ、音声ファイル名がそれぞれ記述され、内容の変更またはパターンの追加ができます。
N	menu.startClk??	clickアニメのスタートフレームNo. プルダウンメニューからフレームを選択します。 --を選択するとそのクリックパターンは消去されます。
O	menu.endClk??	clickアニメのラストフレームNo. プルダウンメニューからフレームを選択します。 --を選択するとそのクリックパターンは消去されます。
P	menu.wordClk??	クリック時のふきだしメッセージ。クリック時にふきだしに表示させるメッセージ文字です。 "%p"で改ページ、"%n"で改行を指定します。その他は自由に記述ができます。
Q	menu.sndClk??	クリック時の音声ファイル。音声ファイル格納ディレクトリ(前節参照)からの相対パスでファイル名を指定します。また、音声再生コマンド(前節参照)が指定されていない場合は、編集できません。
R	(なし)	音声テストボタンフレームQ中の音声ファイルの再生テスト用ボタンです。
S	menu.wordMail	メイル着信時のふきだしメッセージ。メイル着信時にふきだしに表示させるメッセージ文字です。 "%n"で改行を指定します("%p"は機能しません)。その他は自由に記述ができます。
T	menu.sndMail	メイル着信時の音声ファイル。音声ファイル格納ディレクトリ(前節参照)からの相対パスでファイル名を指定します。また、音声再生コマンド(前節参照)が指定されていない場合は、編集できません。
U	(なし)	音声テストボタンフレームT中の音声ファイルの再生テスト用ボタンです。
V	(なし)	変更決定ボタンパラメータ変更Window中のすべての変更を実行してパラメータ変更Windowを終了します。ただし、ここで変更されたパラメータはメニューから「Save Parameter」→「Save」を実行しない限りは設定ファイルの方にはセーブされません。
W	(なし)	変更キャンセルボタンパラメータ変更Window中のすべての変更をキャンセルしてパラメータ変更Windowを終了します。

mizuka0.xpm	mizuka2.xpm

通常状態	目を閉じてます

mizuka4.xpm	mizuka3.xpm

はにゃっ	その途中