プログラミング教育フリーソフト第４位になったアニメ作成ソフト9VAeきゅうべえは Ver.0.6.13 から２Dアニメーションエンジンとして使えるようになりました。
次の動画は、Processingと LeapMotion と 9VAe で作ったアニメの女の子とじゃんけんをするデモです。
この記事では、ラズベリーパイを使って、LeapMotion なしでできるデモを作成します。製作時間は３０から４５分くらい。ラズベリーパイがあれば実行できます。（Windows版、Mac版9VAeでも可能です）
Processing とは
- Scratch を作った MITメディアラボ由来のテキストプログラミング環境です。短いコードでアニメーションや対話型アプリがつくれるので初心者のプログラミング学習にむいています。（参考：Processing 誕生の由来）。
１．Processing環境設定
Processing ダウンロード
- Download - Processing for Pi からProcessingつきラズパイ用OSをダウンロード (Download Image ボタン)
- 書き込みソフト Etcher をダウンロードして実行
- SDカードメモリ（８GBか 16GB ）をパソコンにセット
- Etcher の左側の「Select Image」ボタンをクリック。ダウンロードしたZIPファイルを選択（解凍する必要はありません）
- Etcher の真ん中でSDカードが選ばれていることを確認し、「Flash!」をクリック。
これでSDカードに、ProcessingつきラズパイOSが書き込まれます。
Raspberry Pi に SDカードを入れて電源ケーブルをつなぐ
もし起動しなかったら、次のことを試すとよいでしょう。ラズパイ初心者はこちらもご覧ください
- SDカードを、パソコンにセット
- boot フォルダの中の config.txt を開く。
- 中ほどにあるframebufferサイズ、以下の２行の行頭の＃を削除
framebuffer_width=1280 framebuffer_height=720
最後の１行の行頭に＃をつけてコメントアウト
#start_x=1
私はこうすると起動できました。
Processing を実行してみる
ラズパイが起動したら、Processingを動かしてみましょう。（参考： A first Processing sketch）
- 画面左上の Raspi ボタン＞Programming > Processing
これで、Processing エディタ画面が起動します - 次のプログラム６行を入力
入力エラーがあると下にエラーメッセージが出ます。
void setup(){ size(300,300); } void draw(){ background( frameCount % 255); }
- Processingのプレイボタン（右向き△）をクリック。300x300 のサイズのウィンドウの背景の色が黒から白に変化すれば成功です。frameCount % 255は フレーム数を２５５で割ったあまりで、これで背景の色が変わります
Processing の書き方は以下に説明があります。
２．9VAeラズベリーパイ版導入
9va-pi ダウンロード
Ver.0.6.15 以上を使うことをお勧めします。
- ラズベリーパイのブラウザで「こちら 9va-piダウンロード」 をクリック。開いた画面の右上のダウンロードボタン（上図１）をクリック
- ブラウザの左下にダウンロード状態が表示されます。ダウンロードが完了したら右側の「＾」（上図２）をクリック。メニューから「Show in folder（フォルダを開く）」をクリック。/home/pi/Downloads が開きます。
- ダウンロードした「9vapXXX.zip」を右ボタンでクリック。メニューから「Extract here （ここでファイルを展開）」をクリック。「9va」フォルダができます。
- 「9va」フォルダをダブルクリック
- 「9va-pi」をダブルクリック。「Execute（実行）」をクリック。9VAeが起動します。
- 次回から「画面左上の Raspi ボタン＞Graphics（グラフィックス） > 9va-pi」で実行できます。
サンプルアニメ「girl.eva」を実行
9VAeのサンプルアニメを実行してみましょう。
- 「Helpメニュー＞Japanese」で日本語表示になります。
- 「ファイルメニュー＞開く」
- 「Downloads > 9va > example > 01simple」と順番にフォルダを開き「girl.eva」を選んで「開く」をクリック
- プレイボタン（下図A）をクリック。女の子の顔が周りに出て消えれば成功です。
女の子の顔がまわりにでてくる処理は、命令リスト「girl.csv」の中に書かれています。
命令リスト「girl.csv 」を開いてみる
命令リストの中を見てみましょう。
ここに書かれている4文字の記号がCSV命令です。一部を説明しておきましょう。
| CSV命令 | 引数 | 意味 |
|---|---|---|
| setA | "名前" | 配置するアニメキャストを設定する |
| drwA | x,y | (x,y)を中心にアニメを配置する |
| drwA | x,y,z,u,d,e,h | (x,y)を中心に(倍率z, 角度u, 半径d, 回転e, 水平倍率h)でアニメを配置する |
| filC | r,g,b,alpha | 塗色を設定（0-1の範囲） |
| wait | tt | tt/100秒時間待ち |
| clrA | 配置したアニメを全部消す | |
| exit | CSV命令の読み込みを終了する |
”face” が女の子の顔のアニメーションです。9VAeではアニメキャストと呼んでいます。これを、drwAという命令で画面に配置しています。
命令リスト「girl.csv 」を修正してみる
- とりあえず、以下のように最後から２番目の行「exit」の前に「#」を入れてコメントアウトしてみましょう。
#loop, #exit, #clrA
「Fileメニュー＞Save（保存）」で保存した後、9VAeプレイボタン（上図Ａ）をクリックしてみてください。「exit」をコメントアウトしたため、次のCSV命令待ちの状態（女の子の顔が残った状態）になるはずです。
Processing でテキストファイル書き込み
girl.csv の後ろに Processing で命令行を追加していけば、アニメーションをコントロールできます。テストとして、CSV命令の最後に図形を全部消去する「clrA」を Processingで追加してみましょう。
テキストファイルに追加書き込みするには、java の機能を使います。（参考： ファイルに文字を追加書き込みするには-自己啓発。人生について考える）
以下のプログラムで、girl.csv に「clrA」という命令が追加されます。
import java.io.FileWriter; String file = "/home/pi/Downloads/9va/example/01simple/girl.csv"; void setup(){ size(100,100); textWrite( file, "\n" ); textWrite( file, "clrA\n" ); } void draw(){ } void textWrite( String fileName, String msg ){ try { FileWriter fw = new FileWriter( fileName, true ); fw.write(msg); fw.close(); } catch (Exception ex) { //例外 ex.printStackTrace(); } }
9VAeはアニメ girl を再生した状態にしておいてください。Processingから上のプログラムを実行し、まわりの女の子の顔が消えると成功です。9VAeから「girl.csv」を開いて（上図Ｂをクリックして開く）最後に「clrA」が追記されていることを確認してください。
３．サンプルプログラム
ここで、LeapMotionがなくてもできるように次のようなプログラムをつくってみましょう。
- キーボードで「１」を押すと指が１の形になる
- 「２」を押すと指がピースの形になる
9VAe側で「指が１の形になる」「指がピースの形になる」アニメーションを作成します。9VAeを使えばきれいに動くベクトルアニメーションが作れます。
指の形は freeSVGイラストサイト からダウンロードしましょう。
一本指を freeSVG からダウンロード
- こちら Finger Pointing-1574437693 を開く。
- 「DOWNLOAD SVG」 を右ボタンでクリック。メニューから「Save link as」をクリック。Downloadフォルダに保存
２本指を freeSVG からダウンロード
- こちら Peace victory hand gesture vector image を開く。
- 「DOWNLOAD SVG」 を右ボタンでクリック。メニューから「Save link as」をクリック。Downloadフォルダに保存
１本指を9VAeに読み込む
- 「9VAe」ボタン（上図Ｃ）をクリック。メニューから「9VAアニメを入れる」をクリック。ダウンロードした１本指「 Finger_Pointing.svg」を選択
- 左下「ー」ボタン（上図Ｄ）を何回かクリックし画面を小さくし、選択枠の角のハンドル（上図Ｆ）をドラッグして小さくする。
- 選択枠の枠線をドラッグして位置を移動
- 右手の横に移動させたら、虫眼鏡ボタン（上図Ｅ）をクリックして全体を表示
- 選択枠中心の「＋」（上図Ｇ）をクリック。メニューから「アニメ（Finger_Pointing.svg）を修正」をクリック。アニメキャストの中身が開きます。
アニメキャストの中身をアニメにする
- 選択枠の角のハンドル（上図Ｈ）をクリック。メニューから「回転」をクリック。指を縦にする
- 線の太さパレット（上図Ｉ）をクリック。一番細い線にする
- ページの右端の「＋」（上図Ｊ）をクリック。メニューから「続きのページを作る」
これで２ページできます。１ページの指を小さくし、前のページの時間を0.5秒にしましょう。
- １ページ（上図Ｋ）をクリックして１ページに移動
- 指の角ハンドル（上図Ｌ）をドラッグして小さくする。ハンドルが押せない場合、左下の「ー」ボタンでサイズを小さくしてください。
- １ページの時間（上図Ｍ）をクリック。メニューから「0.1秒短くする」を5回クリックして0.5秒にする
- プレイボタン（上図Ｐ）で動作を見てみましょう。１本指が出てくるアニメーションが見えたら成功です
- 画面の上の太字「Finger_Pointing.svg」（上図Ｎ）をっクリック。メニューから「名前の変更」をクリック。簡単な名前「one」にしましょう。
- 左側の太字「girl」（上図Ｏ）をクリック。メニューから「このアニメにもどる」をクリック
Processing のプログラム
Processing のプログラムを考えましょう。
- 「１」を押すと指が１本指になる
- 「２」を押すと指が２本指になる
次のようなプログラムになります。
void keyPressed() { if (key == '1') { // 1が押された textWrite( file, "setA,\"one\"\n" ); textWrite( file, "drwA,183,170.5\n" ); textWrite( file, "wait,10\n" ); } if (key == '2') { // 2が押された textWrite( file, "setA,\"two\"\n" ); textWrite( file, "drwA,180,160\n" ); textWrite( file, "wait,10\n" ); } }
- \" は、""の中に「"」を入れる書き方です。\n は改行です。
- 上の textWrite の中の「drwA」はアニメキャストを9VAeの画面に書く命令です。
- その後ろの（183,170.5）はアニメキャストの左上の位置の指定です。これは、下図のようにアニメキャストを移動させ、再び選択したときに下図Ｒの位置に表示される数字から中心の座標（98+170/2, 129+83/2）を記入します。
- wait,10 は0.1秒待つ命令です。 wait はなくてもよいのですが、待ち時間を入れると、あとから、アニメーションが再現できるので便利です。
- setA の後ろの「one」は１本指のアニメキャストです。２本指「two」はあとから追加しましょう。
- アニメキャストの表示位置を確認するために選択枠（上図Ｑ）をドラッグして表示するとよい位置に移動させます。
- 選択するときに下に選択枠の左上の座標とサイズが下に表示されます。
- 数値を確認したら、枠線（上図Ｑ）をドラッグし、画面の外（下図Ｓ）に移動させ見えなくします。
アニメーションを無限ループにする（重要）
CSV命令で配置したアニメが動くには、9VAeアニメーションが動いている必要があります。そのために、往復命令を無限ループにします。
- 往復ボタン（上図Ｔ）を選択
- 選択枠の中央の「＋」をクリック。メニューから「－1回」を何回かクリックし、回数０（無限ループ）にする
テスト実行
- 上の keyPressed() 関数をプログラムに追加する
- 9VAeきゅうべえのプレイボタンをクリック。girl.csv に書かれた命令が実行され、最後に入力待ちになる。
- Processingのプレイボタンをクリック
- キーボードの「１」を押す。１本指がでてくれば成功です。
２本指のアニメキャスト "two"の読み込み
- １本指を参考に、２本指を作ってみてください。
- アニメキャストの中身をひらいて、名前を"two"にしましょう。（下図）
- 2本指には線がついていないので、線属性で線ありにしましょう。（下図Ｕ）
- ２本指には色がついていませんが、CSV命令で色をつけられます。
- ２本指は左手なので、CSV命令で左右反転させて配置します。
指と手の間にすきまがありますが、修正できます。
- 指を選んで中心の「＋」（上図Ｖ）をクリック。メニューから「グループ解除」をできなくなるまで何回もクリックします。
- 中心の「＋」（上図Ｖ）をクリック。メニューから「いっしょに塗る」をクリック。もう一度「＋」をクリックし「グループ解除」をクリック。これで指の図形がバラバラになります。
- 重ね順ボタン（上図Ｘ）で手の平を一番下にさげ、点選択ボタン（上図Ｗ）で形を変形し、不要な点を削除ボタン（上図Ｙ）で削除し形を整えましょう。
４．完成したプログラム
最終的に次のようになりました。 drwAの後ろの数値は、調整してください。
import java.io.FileWriter; String file = "/home/pi/Downloads/9va/example/01simple/girl.csv"; void setup(){ size(100,100); textWrite( file, "\n" ); textWrite( file, "clrA\n" ); textWrite( file, "filC,0.99,0.81,0.71,1\n" ); //肌色 } void draw(){ } void keyPressed() { if (key == '1') { // 1が押された textWrite( file, "setA,\"one\"\n" ); textWrite( file, "drwA,183,170.5\n" ); textWrite( file, "wait,10\n" ); } if (key == '2') { // 2が押された textWrite( file, "setA,\"two\"\n" ); textWrite( file, "drwA,180,160,1,0,0,0,-1\n" );//水平反転 textWrite( file, "wait,10\n" ); } } void textWrite( String fileName, String msg ){ try { FileWriter fw = new FileWriter( fileName, true ); fw.write(msg); fw.close(); } catch (Exception ex) { //例外 ex.printStackTrace(); } }
- girl.csv に追記されたデータを一度全部削除して実行してみるとよいでしょう。指の形を整えて、次のようになりました。
- このGIFアニメーションも、9VAeで作成しました。
- CSV命令リストの中から、１本指、２本指を書く部分だけを残して他を削除しましました。
- wait の時間を２秒に設定し、「ファイルメニュー＞アニメGIF出力」で４秒間のアニメGIFを作成しました。
５．デモサンプルダウンロード
今回作成した9VAアニメーションとPythonのプログラムを以下からダウンロードできます。
- こちら（py-girl.zip - Googleドライブ） から右上のダウンロードボタン
補足
新しい9VAeアニメに CSV命令をつけるには
今回は、サンプルの girl.eva を改造しましたが、新しいアニメに CSV命令を入れるには次のようにします。
CSVファイルは最初のページに入れておくのがよいです。また、CSV命令で書き込まれたアニメが動くには、9VAeアニメが動いている必要があります。そのため、「9VAeツールメニュー」から「往復」「繰り返し」「一時停止」のような命令をいれて、アニメーションが終わらないようにしてください。
9VAe きゅうべえを使う利点
Processing を 9VAeと組み合わせる利点は、9VAeのグラフィックスエディタの機能がフルにつかえる点です。今回の例では、１本指と２本指のSVGフリーデータを、9VAeで修正して使っています。
実際、ゲームプログラムでは、プログラミングとリソース作成を組み合わせて行います。9VAeがベクトルグラフィックスのリソースエディタになります。
LeapMotion をつけるには
- 「Leap Motion で遊ぼう - こくぶん研究室」 にProcessing と LeapMotion をつなぐ方法が解説されています。じゃんけんの形を認識したら、9VAeの女の子にじゃんけんさせるようにすれば、じゃんけんのデモが作れます。
9VAeきゅうべえに関する問い合わせ
- 9VAeについて、Yahoo知恵袋で質問すれば答えが得られます。
- 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。
