9VAeきゅうべえは、SVGイラストから動画素材を簡単に作成できるフリーソフトです。9VAeきゅうべえバージョン 0.6.13 から、２Ｄアニメーションエンジンとして外部プログラムから利用できるようになりました。その仕組みを説明します。
9VAeとLeapMotionを組み合わせた例 (@NT京都2020)
できること
例えばセンサーで取得した数値を画面に表示する場合に、画面のデザイン、文字属性の指定、アニメーションの表示といった飾りの部分が、9VAeを使えば簡単になります。再生エンジンとアニメーションエディタが無償で使えます。
| 説明 | できること |
|---|---|
| １．差替えリスト | アニメの中の文字をセンサーの数値に変える。数値によってアニメを切り替える |
| ２．CSV命令リスト | プログラムによってアニメーションを操作する。プログラムで画面に動く絵を描く |
9VAeの特長 (ダウンロードはこちら)
- グラフィックエディタが強力で、SVGイラストを読み込んで修正し、絵を描かずにアニメ素材を自作できる。
- 動画のデータサイズが非常に小さい。ラズベリーパイのSDカードに収まる。
- Windows / Mac / RaspberryPi / Ubuntu / iPhone / iPad / Android / FireOS で動作する。データが共通。
- 作成した動画が、アニメGIF、MP4、APNGに変換できる
- フリーソフト、商業利用可能、広告なし、ロゴなし
ここでは、9VAeを外部プログラムから利用する２つの方法を解説します。
１．差替えリスト
もともと9VAeのチュートリアルを多国語化するために開発された機能です。アニメーションの中の文字を各国語ごとに用意したテキストで差替えます。このリストを外部プログラムで変更すればいろんな使い方ができます。
差替えリストの機能
上の図はパソコン版9VAeに同梱されたサンプル例「example > 01simple > chocho.eva」です。これを9VAeで開くと、最初のページに「#Background」とありますが（上図）、再生すると「背景」と表示されます。これは、１ページの「差替えリスト localize_ja.txt」（上図）に
localize_ja.txt
"#Background"="背景";
"#< Time curve"="動きグラフ";
と記述されており、"#Background"が"背景"に差替えられるためです。ちなみにフランス語では以下の差替えが行われます。（OSの言語コード（ja fr ...）に応じた差替えリストが呼ばれます。）
localize_fr.txt
"#Background"="Arrière plan";
"#< Time curve"="Courbe de Mouvement";
差替えリストの入れ方
- 差替えルールを書いたテキストを9VAeアニメと同じフォルダに作成。
- 9VAeの「ツールメニュー＞差替えリスト」を実行。作成したファイルを指定すれば、ページにはいります。
- 「差替えリスト localize_ja.txt」を選択し、選択枠中心の「＋」をクリックし、メニューから「開く」をクリックすれば中を修正することができます。
差替えリストを使った数値表示、アニメ効果の追加
- 下のような差替えリストを作成すれば、センサーの数値をアニメの中の「#data1」「#data2」という文字に差替えて表示できます。文字の色、サイズ、配置は、9VAeで自由に設定できます。アニメキャストの差替えもできます。下の例では「anime」というアニメキャストを「温度下げすぎ」というアニメキャストに切り替えて表示します。（アニメキャストの作り方は、この記事の獅子の頭の作り方をご覧ください）
- アニメキャストは部品のアニメ素材で、9VAeで簡単に自作できます。何種類か用意しておいて切り替えます。
"#data1"="16.0";
"#data2"="15.9";
":anime"="温度下げすぎ";
差替えリストの書き方
- 日本語を使う場合、文字コードは、UTF8（BOM付き）で作成します。
- 左側の検索キーは、半角英数とし、先頭の１文字は # か : にします。「#」が文字の差替え、「:」がアニメキャストの差替えです。
- 文字列が複数行の場合、左側の検索キーは先頭の１行だけ書きます。右側の文字列は、改行位置に半角の
\nをいれます。
| 書式 | 意味 |
|---|---|
| "#key"="文字列\n文字列"; | １行目が#keyの文字列を右側の文字列で置き換える |
| ":key"="別のアニメキャスト名"; | keyという名前のアニメキャストを別のアニメキャストに置き換える |
差替えリストを読み込むタイミング
- 差替えリストは、差替えリストがはいったページを再生したときだけ読み込まれます。最初のページに差替えリストがあり、そのあと差替えリストがなければ、差替えリストを変更してもアニメの文字はかわりません。
- センサーの値を毎秒更新するためには、差替えリストを毎秒読む必要があります。ひとつの方法は、数値を表示するページに、差替えリストと「ツールメニュー＞往復」をいっしょに入れることです。ページの時間を0.5秒にすれば、往復１秒ごとに差替えリストが読み込まれ、センサー値が更新されます。
- 新しい差替えリストが読み込まれるとそれまでのリストは破棄されます。差替えリストは最後に読み込んだひとつのみ有効になります。
定義すみの文字
- 以下の文字列は、差替えリストがなくても、つねに数値に書き換えられます。
| 定義すみの文字 | 意味 | 表示例 |
|---|---|---|
| #TIME | 現在時刻(時分秒) | 12:34:56 |
| #DATE | 今日の日付 | 09/10 |
| #YEAR | 今日の年号 | 2020 |
| #TIMER | タイマー(時分秒) | 00:00:00 |
実行例が下にあります。「#TIME」が時刻に変換されて表示されます。色の変化やぼかしなどの効果がそのまま反映されている点に注目してください。
２．CSV命令リスト
Ver.0.6.13から搭載された機能で、差替えリストと次の違いがあります。差替えリストはきまった構成の文字やアニメを差替えますが、命令リストはアニメーションを制御したり、アニメキャストの追加を行います。
| 項目 | 内容 | 途中経過の再現 |
|---|---|---|
| 差替えリスト | 文字やアニメキャストを差替える。差替えリストがはいったページが再生されたときだけ更新される。その後すべての文字、アニメキャストが差替え対象になる。 | 差替えリストを変更しなければ途中経過を再現できない。 |
| CSV命令リスト | 制御命令やオーバーレイへの描き込み命令がある。命令リストはつねに更新チェックされ、命令が追加されたらその都度実行される。 | CSVがログになる。CSVがあればプログラムがなくても途中経過を再現できる。動画出力に便利 |
命令リストの例
パソコン版9VAeの「example > 01simple > girl.eva」の例です。左から長方形が流れていき、周囲にいろんな色の女の子の顔が並ぶ効果が、最初のページの「差替えリスト girl.csv」に次のように書かれています。先頭の４文字がCSV命令で、あとで説明します。
girl.csv
slow, # スロー再生
wait,200, # 2秒待つ
fast, # 早送り再生(元のスピードに戻る)
fast, # 早送り再生
wait,100
#play, # 再生・停止切替え（停止）
#wait,100
#play, # 再生・停止切替え（再生）
slow, # スロー再生(元のスピードに戻る)
setM,1,2,15,"face", # マウスカーソルを "face"に設定 2倍サイズ; 15 度回転
setA,"stick", # アニメキャストを stick に設定
drwA,30,150,0.1, # アニメキャストを(30 150)の位置に、0.1倍サイズ
wait,10
linW,2,1, # 線の太さを２倍、後ろの 1は太さ変更の意味
drwA,60,150,0.2
wait,10
linW,3,1
drwA,90,150,0.3
wait,10
linW,4,1
drwA,120,150,0.4
wait,10
linW,5,1
drwA,150,150,0.5
wait,10
drwA,180,150,0.6,15, # 0.6倍のアニメキャストを、15度回転させる
wait,10
drwA,210,150,0.7,30
wait,10
drwA,240,150,0.8,45
wait,10
drwA,270,150,0.9,60
wait,10
drwA,300,150,1.0,75
wait,10
drwA,200,150,1,90,85,0, # (250 150)から長さ85,角度0 の位置に90度回転
wait,10
drwA,200,150,1,90,85,30
wait,10
drwA,200,150,1,90,85,60
wait,10
drwA,200,150,1,90,85,90
wait,10
linC,1,0,0,1, # 線の色を赤(R1 G0 B0) に設定、最後の１は色修正100%
drwA,200,150,1,90,85,120
wait,10
linC,1,0.5,0,1
drwA,200,150,1,90,85,150
wait,10
linC,1,1,0,1
drwA,200,150,1,90,85,180
wait,10
linC,0.5,1,0,1
drwA,200,150,1,90,85,210
wait,10
linC,0,1,0,1
drwA,200,150,1,90,85,240
wait,10
linC,0,1,0.5,1
drwA,200,150,1,90,85,270
wait,10
linC,0,1,1,1
drwA,200,150,1,90,85,300
wait,10
linC,0,0.5,1,1
drwA,200,150,1,90,85,330
wait,10
linC,0,0,1,1
drwA,200,150,1,90,85,0
wait,10
linC,0.5,0,1,1
drwA,200,150,1,90,85,30
wait,10
linC,1,0,1,1
drwA,200,150,1,90,85,60
wait,10
linC,1,0,0.5,1
drwA,200,150,1,90,85,90
setM,0, # マウスカーソルを Off にする
linC,0, # 線の色修正を解除（オリジナルの色にする）
setA,"face", # アニメキャストを「face」に変更
wait,10
filC,1,0,0,1, # 塗り色を赤(R1 G0 B0) に設定、最後の１は色修正100%
drwA,200,150,0.5,90,120,15
wait,10
filC,1,0.5,0,1
drwA,200,150,0.5,90,120,45
wait,10
filC,1,1,0,1
drwA,200,150,0.5,90,120,75
wait,10
filC,0.5,1,0,1
drwA,200,150,0.5,90,120,105
wait,10
filC,0,1,0,1
drwA,200,150,0.5,90,120,135
wait,10
filC,0,1,0.5,1
drwA,200,150,0.5,90,120,165
wait,10
filC,0,1,1,1
drwA,200,150,0.5,90,120,195
wait,10
filC,0,0.5,1,1
drwA,200,150,0.5,90,120,225
wait,10
filC,0,0,1,1
drwA,200,150,0.5,90,120,255
wait,10
filC,0.5,0,1,1
drwA,200,150,0.5,90,120,285
wait,10
filC,1,0,1,1
drwA,200,150,0.5,90,120,315
wait,10
filC,1,0,0.5,1
drwA,200,150,0.5,90,120,345
wait,200
#loop, # このファイルをもう一度最初から繰り返す
exit, # コマンドリストの読み込みを終了する
#clrA, # 図形をすべて削除する
- 最初に、再生の早送り、スロー再生命令があります。
- そのあと、アニメキャストを追加する命令が並んでいます。位置、傾き、塗り色、線の色を変更し、CSV命令専用に追加されたオーバーレイ画面に描いています。
- アニメキャストは「stick」「face」の２つを切り替えて描いています。最初の stick は位置を変えながら、徐々に消えて消滅します。faceは「往復」を使った終了しないアニメキャストで、オーバーレイ画面上に残ります。
次に、各CSV命令を説明します。
CSV命令の仕様
- 行頭には英数字４文字の命令がはいります。
- 先頭に＃があるなど解釈できない命令から始まる行は無視されます。
- 命令の後は数値、もしくは"文字"が「,」区切りではいります。スペースやタブをいれてはいけません。
- 文字は「””」で囲みます。文字コードは、UTF8（BOM付）で作成してください。
- 命令リストは追記で作成してください。9VAeは毎時、新しく追加された行だけ順番に読み込みます。
CSV命令の使い方
- マウスカーソルをセットする命令は、setM だけです。一度セットするとずっと覚えています。消去は、setM,0 です
- 画面にアニメキャストを描く命令が、setA,drwA,movA,addA,clrAです。何を描くかは、setA で指定し、一度セットするとずっと覚えています。
- 画面に描いたアニメキャストは、アニメキャストが終了するまでその位置に残ります。位置を変更する命令が、movA(絶対値),AddA(相対値)です。
- 画面に描いたアニメキャストを消す命令が、clrAです。
- 作成したCSV命令リストを読み込んで、アニメーション再生したい場合は、各命令のうしろに、waitをいれてください。waitがないと全部一度に処理し、アニメーションになりません。
CSV命令(制御系)
| コマンド | パラメータ | 意味 |
|---|---|---|
| slow | スロー再生 | |
| fast | 早送り再生 | |
| play | 停止と再生を切り替える | |
| wait | tt | 命令を読み込むのをtt/100秒間停止する |
| loop | CSV命令リストを最初から読み直す | |
| exit | CSV命令リストを読み込むのをやめる |
- tt:1/100秒の時間 （１秒は100）
CSV命令(マウスカーソル)
| コマンド | パラメータ | 意味 |
|---|---|---|
| setM | 1,"name" | "name"というアニメキャストをカーソルに設定 |
| setM | 1,zz,"name" | "name"というアニメキャスト（倍率zz）をカーソルに設定 |
| setM | 1,zz,uu,"name" | "name"というアニメキャスト（倍率zz,角度uu）をカーソルに設定 |
| setM | 0 | マウスカーソルの設定をやめる |
- zz:倍率 （同じサイズは1、２倍は２、小数指定可）
- uu:角度（１周360、マイナス、小数指定可 ）
- setM でマウスカーソルが表示されない場合、マウスカーソルを使う前にダミーの drwA を１つ入れてください。（このバグは Ver0.6.13d(200222)で修正されました）
CSV命令(アニメキャスト描き込み)
| コマンド | パラメータ | 意味 |
|---|---|---|
| clrA | オーバーレイを全部消去する | |
| setA | "name" | "name"というアニメキャストをペンに設定 |
| drwA | xx,yy | (xx,yy)に（倍率1 角度０）で描く |
| drwA | xx,yy,zz | (xx,yy)に（倍率zz 角度０）で描く |
| drwA | xx,yy,zz,uu | (xx,yy)に（倍率zz 角度uu）で描く |
| drwA | xx,yy,zz,uu,dd,ee | 回転中心(xx,yy)から半径dd角度eeの位置に（倍率zz 角度rr）で描く |
| drwA | xx,yy,zz,uu,dd,ee,hh | 回転中心(xx,yy)から半径dd角度eeの位置に（倍率zz 角度rr 横倍率hh）で描く |
| drwA | xx,yy,zz,uu,dd,ee,hh,vv | 回転中心(xx,yy)から半径dd角度eeの位置に（倍率zz 角度rr 横倍率hh 縦倍率vv）で描く |
- xx,yy:座標 （左上(0,0)、右下はアニメのページサイズ、小数指定可）
- zz:倍率 （同じサイズは1、２倍は２、小数指定可）
- uu,ee:角度（１周360、マイナス、小数指定可 ）
- dd:半径（小数指定可）
- hh:横倍率 （同じサイズは1、-1は横反転、小数指定可）
- vv:縦倍率 （同じサイズは1、-1は縦反転、小数指定可）
CSV命令(色、太さ修正)
| コマンド | パラメータ | 意味 |
|---|---|---|
| linW | zz,1 | 線の太さをzz倍に修正 |
| linW | 0 | 線の太さ修正をやめる |
| linC | rr,gg,bb,aa | 線の色(rr,gg,bb)をaaの割合で混ぜる |
| LinC | rrr,ggg,bbb,aaa | 線の色(rrr,ggg,bbb)をaaa/255の割合で混ぜる |
| linC または LinC | 0 | 線の色修正をやめる |
| filC | rr,gg,bb,aa | 塗り色１に色(rr,gg,bb)をaaの割合で混ぜる |
| FilC | rrr,ggg,bbb,aaa | 塗り色１に色(rrr,ggg,bbb)をaaa/255の割合で混ぜる |
| filC または FilC | 0 | 塗り色１の修正をやめる |
- zz:倍率 （同じサイズは1、２倍は２、小数指定可）
- rr,gg,bb:色（数値は０から１の範囲 ）
- rrr,ggg,bbb:色（数値は０から255の範囲 ）
- aa:不透明度（０は無色、１は完全不透明）
aaa:不透明度（０は無色、255は完全不透明）
LinC, FilC は、Ver.0.6.14(200311)で追加
CSV命令(アニメキャストの移動,削除)
- 「drwA」で描いたアニメキャストの位置やサイズ、角度などを変更します
- 「movA」は絶対値指定です。「addA」は各パラメータに数値を加えます。
- 「clrA」で削除します。
- "name" で指定すると、その名前のアニメキャスト全部が同時に修正されます。
- "name#数字"で個別に指定できます。#数字は１から始まります。"name#1" は一番下にある"name"です。＃数字は命令実行時の画面上の順番であり「clrA」などで数がかわると対応する数字も変わります。
| コマンド | パラメータ | 意味 |
|---|---|---|
| clrA | "name" または"name#数字" | "name"を削除（Ver.0.6.13(200304)で追加） |
| movA | xx,yy,"name" または"name#数字" | "name"を(xx,yy)（倍率１ 角度０）に移動 |
| movA | xx,yy,zz,"name" または"name#数字" | "name"を(xx,yy)（倍率zz 角度０）に移動 |
| movA | xx,yy,zz,uu,"name" または"name#数字" | "name"を(xx,yy) （倍率zz 角度uu）に移動 |
| movA | xx,yy,zz,uu,dd,ee,"name" または"name#数字" | "name"を回転中心(xx,yy)から半径dd角度eeの位置に（倍率zz 角度rr）で移動 |
| movA | xx,yy,zz,uu,dd,ee,hh,"name" または"name#数字" | "name"を回転中心(xx,yy)から半径dd角度eeの位置に（倍率zz 角度rr 横倍率hh）で移動 |
| movA | xx,yy,zz,uu,dd,ee,hh,vv,"name" または"name#数字" | "name"を回転中心(xx,yy)から半径dd角度eeの位置に（倍率zz 角度rr 横倍率hh 縦倍率vv）で移動 |
| addA | xx,yy,"name" または"name#数字" | "name"をX方向にxx,Y方向にyy移動 |
| addA | xx,yy,zz,"name" または"name#数字" | "name"をX方向にxx,Y方向にyy移動、倍率をzz倍修正 |
| addA | xx,yy,zz,uu,"name" または"name#数字" | "name"をX方向にxx,Y方向にyy移動、倍率をzz倍、角度uu修正 |
| addA | xx,yy,zz,uu,dd,ee,"name" または"name#数字" | "name"の回転中心をX方向にxx,Y方向にyy移動、倍率をzz倍、角度uu、半径をdd、角度ee修正 |
| addA | xx,yy,zz,uu,dd,ee,hh,"name" または"name#数字" | "name"の回転中心をX方向にxx,Y方向にyy移動、倍率をzz倍、角度uu、半径をdd、角度ee修正、横倍率をhh倍加える |
| addA | xx,yy,zz,uu,dd,ee,hh,vv,"name" または"name#数字" | "name"の回転中心をX方向にxx,Y方向にyy移動、倍率をzz倍、角度uu、半径をdd、角度ee修正、横倍率hh倍, 縦倍率vv倍加える |
- xx,yy:座標 （左上(0,0)、右下はアニメのページサイズ、小数指定可）
- zz:倍率 （同じサイズは1、２倍は２、小数指定可）
- uu,ee:角度（１周360、マイナス、小数指定可 ）
- dd:半径（小数指定可）
- hh:横倍率 （同じサイズは1、-1は横反転、小数指定可）
vv:縦倍率 （同じサイズは1、-1は縦反転、小数指定可）
"name" で指定すると、setA,"name" で描いたものがすべて対象になります。「movA」で指定すると全部同じ位置、同じサイズ、同じ角度に重なります。
「addA」を使えば元の位置、サイズに追加されるため、まとめて一命令で移動させることができます。
"name#1", "name#2" のように指定すると、 画面上にあるアニメキャストが下から順番に指定されます。画面上の数が変わると番号も変わることに注意してください。
CSV命令(口パク、ポーズ制御)
- 「drwA」で描いたアニメキャストにローマ字せりふ、ポーズ制御文字列を設定します。
- アニメキャストに「あいうえお」の口の形、各ポーズとそれに対応したラベルが設定されている必要があります。
| コマンド | パラメータ | 意味 |
|---|---|---|
| spkA | "秒:ローマ字ABC" | ローマ字を追加 |
| spkA | "秒:１文字ラベル" | ポーズ文字列を追加 |
| spkA | "name" または"name#数字","秒:ローマ字ABC" | "name"にローマ字を追加 |
| spkA | "name" または"name#数字","秒:１文字ラベル" | "name"にポーズ文字列を追加 |
- "秒:ローマ字789": 「2.5:...kuti paku site mitaA.」のように記述。「.」は閉じる、「ABC」の形は自由。アニメキャストの中に口の形が「.aiueoABC」の順番に並んでいること。口パクキャラクタの作り方はこちら
"秒:１文字ラベル": 「2.5:...ABABCDE....」のように記述。「.」は閉じる、それ以外はラベル。アニメキャストの中に先頭は「.」の形、それ以外のページにラベルがついていること。
spkA は、Ver.0.7(200402)で追加されました。各ページに対応したローマ字コードは「.aiueo789」でしたが、「.aiueoABC」に変更されました。
CSV命令のアニメキャストについて
- 「setA」「drwA」で描くアニメキャストは、CSV命令用オーバーレイに書き込まれます。アニメーションのページと独立しており、アニメーションが切り替わっても、新しいCSV命令リストを読み込むまで残ります。
- 新しいCSV命令リストを読み込むとオーバーレイは初期化されます。
- 「drwA」で追加したアニメキャストはその時点から再生を開始し再生終了するまで残ります。アニメキャストが１秒なら、１秒後に消滅します。画面上に残るようにするには「ツールメニュー＞往復」や「繰り返し」を入れます。
- ペンとして使われる「setA」のアニメキャストは、先頭ページから名前を検索し最初にみつかったものが使われます。そのためペン用アニメキャストは先頭ページの画面外に配置しておくとよいでしょう。配置したサイズが基準の大きさになります。
CSV命令の使い方
- CSV命令を使えば、プログラムでアニメキャストをオーバーレイ画面上に自由に配置できます。
- センサーの値によって、人の顔を変えたり、じゃんけんをしたり、ジャンプしたり、いろんなアニメ効果をつけることができるでしょう。
- CSV命令リストは追記で作成するので、ログが残り（drwA,movA,addAの後ろに、waitを入れておけば）アニメーションが再現できます。あとからアニメGIFや動画を作成できます。
- CSV命令リストは、エクセルで作成できるため、座標や倍率をエクセル関数で生成することができます。
座標価をプログラムで生成できるならアニメーション描画までプログラムで作れるわけですが、アニメーション素材は9VAeで作るほうがプログラムするよりはるかに簡単です。またアニメGIFや動画出力まで簡単になります。いろんな応用が考えられるでしょう。NT京都2020でのLeapMotion作品を見る
CSV命令リストの入れ方
- 差替えリストと同じく「ツールメニュー＞差替えリスト」で挿入します。Windows版では、ファイルの種類をCSVにすれば入力できます。
- 差替えリストとCSV命令リストは同時に存在できますが、同じページに２つ入れることができません。両方使いたい場合は別のページ（先にCSV命令、そのあと差替えリストを２ページなど）に入れてください。
３．9VAeを使ったデモの作り方
次のような手順になるでしょう
- 自分のプログラム開発環境（Win/Mac/Linux）に、9VAeきゅうべえをインストールする
- 9VAeのサンプル「example ＞01simple ＞ girl.eva や chocho.eva」を再生し、効果を確認する。
- テキストエディタで、差替えリスト、CSV命令リストを変更し、アニメーションが変化することを確認する。
- 自分のプログラムに、差替えリスト、CSV命令リストへのファイル書き込みを追加する。
- 9VAeでデモ用のアニメーションを作成。（こちらが参考になります）
9view の使い方
- 9VAeアニメの再生はプレーヤー 9View を使うとよいでしょう。9View は単体で動作するプログラムで、ファイル名を変更すると、画面最大化で起動することができます。
- 9View ラズベリーパイ版は、大阪の Imedio という施設で、３年間設置された実績があります。Windows版9viewは、キッズプラザ大阪で「ひとコマアニメーション」の上映に使われています。
| プログラム名 | 動作 | 補足 |
|---|---|---|
| 9view | 通常のWindowで起動 | 再生状態がタイトルに表示される |
| 9view-full | 最大画面タイトルつきで起動 | 再生状態がタイトルに表示される |
| 9view-notitle | 最大画面タイトルメニューなしで起動 | 終了はESCキー |
スマホ版について
- 9VAeスマホ版にも差替えリスト、CSV命令リストの再生機能が搭載されています。
- ただ、スマホの場合、外部プログラムから、9VAeフォルダの差替えリスト、CSV命令リストに書き込むことが難しいという問題があり、どうするか悩んでいるところです。
9VAeきゅうべえに関する問い合わせ
- 9VAeについて、Yahoo知恵袋で質問すればほぼ答えが得られます。
- 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。