フリーソフトを使ってアニメ教室・アニメ体験コーナーを作る方法

9VAeきゅうべえアニメ研究所が公開しているフリーソフトを使えば、誰でも、アニメ教室、アニメ制作体験コーナーが作れます。

今までに以下のようなフリーソフトが開発されました、それぞれ、アニメ制作体験コーナー、アニメ教室に適しています。PEAS Motch! はサポート休止中です。１コマアニメーター？が同じように使えます

# 3種類のフリーソフトとダウンロード先

|ソフト名|[9VAeきゅうべえ<br> ![9vae64x0000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/865d65c6-c4c4-d4de-7d25-19b2cb232630.png)](https://9vae.blogspot.com/p/9vae-download.html)|[１コマアニメーター？<br>![icn64clp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/5c505d92-96cd-3c45-98f6-2955e4fd8d0b.png)](https://9vae.blogspot.com/p/9vae.html)|[PEAS motch! one<br>![motch64.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/a29014f3-1dca-6b8d-92e1-ad5bd59acd58.gif)](https://play.google.com/store/apps/details?id=com.peasMotch)|
|:--:|:--:|:--:|:--:|
|用途|　モーショングラフィックス作成|子供向けアニメ制作体験|子供向けアニメ制作体験|
|特長|　個人向けアニメ制作ソフト。いろんなアニメが作れる。[プログラミング教育フリーソフト第４位](https://dnjiro.hatenablog.com/entry/2019/10/29/111656)。　|キッズプラザ大阪に設置。４歳の子供から使える。|キッズプラザ大阪に最初に設置|
|ダウンロード|[Windows/Mac/iOS/Android/Chromebook/RasPi/Ubuntu](https://9vae.blogspot.com/p/9vae-download.html)|[Amazon Fire版](https://www.amazon.co.jp/9VAe%E3%81%8D%E3%82%85%E3%81%86%E3%81%B9%E3%81%88%E3%82%A2%E3%83%8B%E3%83%A1%E7%A0%94%E7%A9%B6%E6%89%80-%EF%BC%91%E3%82%B3%E3%83%9E-%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%BF%E3%83%BC%EF%BC%9F/dp/B0CS6KZ18P/ref=sr_1_3)<br>[アンドロイド版](https://play.google.com/store/apps/details?id=com.qvae.OnePic)<br>[Mac版](https://drive.google.com/file/d/1MWcWPPjAMRY0DbwAIhCwm3i6y6kGapCP/view?usp=sharing)|休止中|

9VAeきゅうべえが汎用のアニメ制作ソフトです。それを[キッズプラザワークショップ](https://www.kidsplaza.or.jp/gallery/2020/000405/)向けに改良したものが、PEAS motch!です。さらにデザインを改良したものが、１コマアニメーター？です。１コマアニメーター？ は、先生がいなくても「[１コマアニメーション](https://9vae.blogspot.com/p/blog-page_15.html)」が作れます。

ここでは、各ソフトをつかったアニメ制作体験の作り方を紹介します。




# １．アニメ制作体験コーナー

| フリーソフト|　PEAS motch! one |１コマアニメーター？|
|:--:|:--:|:--:|
|機材|　(1) Windowsタブレット<br>(2) Windows + ワコムペンタブレット|(1) Windowsタブレット<br>(2) Amazon Fire HD10|
|ダウンロード|休止中|[こちら](https://9vae.blogspot.com/p/9vae.html)|


![onepic.svg.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/4f4fccee-b50c-57ed-090a-aada5e812462.gif)


- PEAS motch! one は、2019年7月にキッズプラザ大阪に設置され、１日１００～２００本の１コマアニメーションが作られました（今は１コマアニメーター？が使われています）
- アニメーションは日付フォルダの中に連番で保存されます。
- ネットワーク接続すれば複数の端末で作成した作品を１台のディスプレイで上映できます。
- ４歳以下の子供から大人まで楽しめます。


# ２．アニメーション教室

| フリーソフト|　9VAeきゅうべえ RapberryPi 版（9va-pi）|
|:--:|:--:|
|機材|　Rapberry Pi|
|ダウンロード|　[こちら](https://drive.google.com/file/d/0B_jLDEPlHKVjd0RPOFVWbWxwZkU/view?usp=sharing)|

- RapberryPi は、多くのプログラミング教室で使われています。9VAeきゅうべえ RapberryPi 版を使えば、同じ機材を使ってアニメーション教室ができます。
- [プログラミング教育フリーソフト第４位](https://dnjiro.hatenablog.com/entry/2019/10/29/111656)に選ばれました。

## 9VAeきゅうべえ(9va-pi)でできること

- 誕生日にプレゼントできる動画を作成
- PowerPointに入れられるアニメーションGIFを作成
- [動くLINEスタンプ用 APNG 作成](http://www.c-r.com/book/detail/1198)
- [Youtube動画作成](https://www.youtube.com/watch?v=ZsZ7vrhRcnc)
- [Scratch用オリジナルコスチューム作成](http://9vae.blogspot.jp/p/blog-page_14.html)
- [SVGアニメーション](http://dnjiro.hatenablog.com/archive/category/%E3%82%A2%E3%83%8B%E3%83%A1%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9)

9VAeで作成したアニメーションは、PEAS motch!や１コマアニメーター？と互換性があり、他のアニメーション制作の素材として使えます。

# ３．バーチャル空間にアニメを配置

1. バーチャル空間 [hubs mozilla](https://support.mozilla.org/ja/kb/get-started-hubs-mozilla) に部屋を用意します。
2. [9VAeきゅうべえ、Peas motch! one / １コマアニメーター？](https://9vae.blogspot.com/) で、アニメを作成します。
2. ネットワーク接続した[保存用パソコンにデータを保存](https://qiita.com/danjiro/items/28bb17ab3e2aaf79e572)します。EVAアニメで保存するよう設定しておきます（[setpath.ini に SaveEva:](https://qiita.com/danjiro/items/ce9dbc6eba5b49462873#setpathini%E8%A8%AD%E5%AE%9A%E9%A0%85%E7%9B%AE)）。
2. 保存用パソコンで、Python プログラムを動かして、[EVAアニメをGIFアニメに変換](https://qiita.com/danjiro/items/0925b9864a5f09e729c6)します(gif-2.py)。背景透過にして作成するのがよいです（後ろが見える）
2. バーチャル空間 [hubs Mozilla](https://support.mozilla.org/ja/kb/get-started-hubs-mozilla) を開きます。
2. 「Place」ボタン＞「Upload」ボタン＞アドレス欄の右端のクリップボタン＞GIFファイルを選んで、「Create Object」ボタン

これでバーチャル空間にアニメが配置されます。（[作成例はこちら](https://hubs.mozilla.com/to2TQqw)）
配置したアニメはピン留めしなければ、部屋から退出したときに消えます。



# ４．PEAS motch! one 設置方法

## ダウンロードモジュールの構成

[こちらからダウンロード](https://drive.google.com/file/d/1sW7kgRuuf9JlaJ3Od122GgOBH0MxEyq5/view?usp=sharing)したZIPファイルは、PEAS motch! one がはいったフォルダをそのまま圧縮したもので、どこにおいてもかまいません。

設置に関連するファイルには次のものがあります。

|ファイル|内容|ファイルのある場所|
|:--:|:--:|:--:|
|peasmtch(.exe)|本体||
|9view-lastday(.exe)|プレーヤー||
|setpath(.ini)|保存先、タイマー設定ファイル|9va_data|
|afa9vaqa(.png)|選択ボタンがないデザイン| 9va_data |
|afa9vaqas(.png)|選択ボタンつきデザイン| 9va_data |
|_bgm40sec(.eva)<br>afa9vaqa(.png)|使い方を説明したアニメーション|保存フォルダに入れる|

### setpath(.ini)設定項目

- setpath(.ini)をダブルクリックすれば、エディタが開きます。
- 環境に応じて中身を修正します。パソコン１台で行う場合は何も設定しなくても使えます。
- 先頭が「#」から始まる行はコメントです。


|キーワード|内容|例|意味|
|:--:|:--|:--|:--|
|直接フルパスを書く|複数の端末のデータを１か所に保存するときに保存先を書きます。複数記述した場合、上から順番に接続テストし、最初に接続されたフォルダを保存フォルダとします。|Q:\\xxxx|Qドライブのxxxxフォルダにデータを保存する|
|PlaySec:秒数|制限時間を変更するときに書き換えます。（0は無制限）|PlaySec:300|時間制限５分|
|PlayNum:再生個数|最新の作品を何個ループ再生するかの設定。（0は全部、未設定は10）|PlayNum:0|全作品をループ再生する|
|SaveEva:|EVA保存を優先（設定しなければ SVGで保存＝プレビューできるがデータ大）|SaveEva:|拡張子をつけなければEVAフォーマットで保存|
|FrameTitle:文字列|左下にクレジットをいれる<br>#YEAR.DATE という文字列は日付|FrameTitle:Made by 9VAe #YEAR.DATE|Made by 9VAe 2022.12.30 のような表示|
|PlayOrder:1|再生の順番|PlayOrder:1|1:割り込み再生しない|
|OutFill:1|外側を塗るかどうか|OutFill:1|1:外側を縁の色で塗る|
|PlaySkip:最後に再生しない個数|０は最後まで再生する。ｍは最後のｍ個を再生しない|PlaySkip:5|最後の５個は再生しない|

### PEAS motch! one の保存の仕組み

- PEAS motch! one の保存は、Uploadボタン（上向き矢印）です。
- Uploadボタンを押せば、setpath(.ini)に記載されたフォルダの中にその日「年-月日」フォルダを作成し、連番（0000.eva 0001.eva ...）で保存します。
- setpath(.ini)に記載がない場合、プログラムが存在するフォルダに「年-月日」フォルダを作成します。
- 保存データは、9VAeきゅうべえや　PEAS motch! と互換性があり、編集することができます。

### PEAS motch! one キー操作

- PEAS motch! one にはファイルメニューがなく、マウスやペンタブレットでは終了できません。キーボードで行います。

|機能|ショートカットキー|
|:--:|:--|
|終了|Esc|
|新規作成/ファイルを閉じる|Ctrl+N|
|ファイルを開く|Ctrl+O|
|プレイ|Alt+6|
|ペンと消しゴム切り替え|Ctrl+I|
|太さ変更|Ctrl+K|
|色変更|Ctrl+L|


### 選択ボタン、複数ページをなくす方法

- PEAS motch! one の、画像ファイル「afa9vaqas(.png)」を削除、もしくは、リネームすれば、選択ボタン、複数ページの処理がなくなり、より簡単な操作になります。


### プレーヤー 9view-lastday の動作

- 9view-lastday は、setpath(.ini)に記載されたフォルダの中にある最も大きな「年-月日」フォルダの作品を再生します。
- setpath(.ini)に記載がない場合、プログラムが存在するフォルダをみます。
- 連番ファイルの最初から再生しますが、最後の番号を再生し終わると、１０個前の番号から再生します。つまり最後の１０個を繰り返して再生します。
- 新しい連番が追加された場合、そのファイルは次に再生されます。
- 指定フォルダに「_bgm40sec(.eva)」というファイルがある場合、４０秒たつごとにそのファイルを再生します。ファイル名の数字を変更すれば再生間隔が変わります。これを使ってアニメの作り方やサンプル作品を表示できます。このファイル拡張子(.eva)は、9VAeきゅうべえで編集できます。
- 再生フォルダについて、今日の日付フォルダが追加されない限り、過去の日付の作品を再生します。今日の日付フォルダが作成された時点で、自動的にそのフォルダの最初の作品から再生をはじめます。


## １台のパソコンでアニメーション制作する場合

- パソコンを、デュアルディスプレイにして外部ディスプレイをプレーヤー画面にするとよいでしょう。
- setpath(.ini)に何も設定しなくてもかまいません。
- setpath(.ini)に何も設定されていない場合、Uploadボタンの上の青い〇にｘがつきます。このｘマークはネットワーク上に保存されないということを意味します。

## 複数台のパソコンでアニメーション制作する場合

- １台のパソコンを再生専用とし、そこに共有フォルダを作成します。
- 各パソコンからその共有フォルダが見えるように設定します。
- 共有フォルダに、例えば「Q:」といったドライブを割り当てます。自動接続するように設定しておきます。
- setpath(.ini)に、「Q:\\xxxx」といったデータを保存するフォルダを記載します。
-  setpath(.ini)に記載されたフォルダが確認できた場合、Uploadボタンの上の青い〇からｘが消えます。ｘが表示されていた場合、共有ドライブが接続されていないことを意味しますので、ケーブルやネットワーク接続を確認してください。ｘが表示されている状態では、プレーヤーの共有フォルダにデータは転送されず、入力したパソコンの中に保存されます。

### 制限時間のネットワーク設定

- 複数台のパソコンを接続している場合、各パソコンの制限時間を同じ時間に再設定するのはめんどうです。
- そこで、日付フォルダができる場所に「_playsec300」というファイルを置けば、300秒、「_playsec0」というファイルを置けば、時間制限なしになる機能をつけました。拡張子はなんでもかまいません。この設定は、ネットワークがつながっている場合、setpath(.ini)の設定より優先します。
- 時間制限を変更した場合、PEAS motch! one を再起動する必要はありません。次回のアニメ制作から反映されます。



### ワコムペンタブレットの設定

- ワコムのペンタブレットを使う場合、ペンのサイドボタンは両方とも「無効」にしておくほうがよいでしょう。
- その他の設定は、[こちら 「wacomペンタブレットの設定」](http://9vae.blogspot.com/p/wacom.html) が参考になります。

- PEASmotchの自動起動とワコムタブレットの問題。ワコムタブレットのドライバの準備ができる前に、PEASmotch! が起動すると、筆圧検知なしのモードで起動するため時間待ちを入れる必要があります。スタートアップのバッチファイルに次に命令をいれるとよいでしょう。

|OS|時間待ち命令|メモ|
|:--:|:--|:--| 
|Windows7以降|timeout 50 > nul|50秒待つ|
|XP/Vista|ping 127.0.0.1 -n 50 > nul|ダミーのping(1秒)を50回|

### Windowsパソコンの設定

#### 定期的に再起動

- タスクスケジューラーをつかう。[参考記事(Beyond)](https://neo-sahara.com/wp/2012/09/12/%E3%82%BF%E3%82%B9%E3%82%AF%E3%82%B9%E3%82%B1%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%A9%E3%81%A7%E8%87%AA%E5%8B%95%E5%86%8D%E8%B5%B7%E5%8B%95/)

#### エッジスワイプの禁止

- gpedit.msc という設定ツールをつかいます（グループポリシーの編集）。[参考記事(DevelopersIO)](https://dev.classmethod.jp/articles/windows-10-disabling-edge-swipe-by-setting-local-group-policy/)

[コンピューターの構成]-[管理用テンプレート]-[Windows コンポーネント]-[画面の端のUI]から「エッジスワイプを許可する」を「無効」に設定します


# ５．ラズベリーパイを使ったアニメーション教室

- ラズベリーパイは、低価格で、Scratch や Python がつかえるため、多くのプログラミング教室で使われています。その機材をそのまま使って、アニメーション教室を実施できます。
- 9VAeきゅうべえラズベリーパイ版（9va-pi）は、商用利用可能なフリーソフトです。
- 9VAeきゅうべえラズベリーパイ版（9va-pi）は、画面デザインや素材をカスタマイズできます。[方法はこちら](https://qiita.com/danjiro/items/c5dc07671ffdbbb8a9a9) 　
- 9VAeきゅうべえは、PEAS match! one よりもボタンが多く、操作が複雑です。そのかわり高度な編集機能が使え、テレビアニメーションのようなものまで作れます。
- 9va-pi は、初心者が使い方を学べる機能が本体に付属しており、最初はそれを使って学習するのがよいでしょう。


## カリキュラム

- 9va-pi は、次の手順で体験していくとよいでしょう。プログラミング教室の中でアニメーション制作体験でやる場合は、ステップ２だけ実施してもよいでしょう。アニメーション神戸の親子アニメ体験教室では、ステップ２と自由制作を行いました。

|ステップ|内容|やり方|
|:--:|:--|:--|
|１|１コマアニメーション|(1)「1.」をクリック<br>(2) 画面に線を描く<br>(3)「1.」をクリック<br>(4) ファイル＞アニメGIF出力|
|２|わらえもん|(1) ヘルプメニュー＞顔であそぼう＞わらえもん<br>(2) 画面をクリックし顔を変形<br>(3) プレイボタンでアニメーション|
|３|Webチュートリアル|[やり方はこちら](https://qiita.com/danjiro/items/ea71567fa8c313f6f3fc)|
|４|SVGイラストからアニメを作る|[やり方はこちら](http://dnjiro.hatenablog.com/archive/category/アニメの作り方)<br>・[猫のしっぽ](http://dnjiro.hatenablog.com/entry/2018/10/23/094005)<br>・[獅子舞](http://dnjiro.hatenablog.com/entry/2019/01/19/012309)<br>・[手書きイラストが写真に変わる](http://dnjiro.hatenablog.com/entry/2017/09/01/122627)|

## 複数の生徒の作品を１つのフォルダにまとめる

- 教室に複数台のラズベリーパイを設置した場合、それらはネットワークで接続されているでしょう。
- そのネットワーク上の共有フォルダにアニメーションを保存するようにすれば、生徒全員の作品をあつめることができ、9Viewでフォルダの中の作品を１本につなげて連続再生することができます。
- [こちら（ラズベリーパイを使ったWiFiローカルサーバーの作り方）](https://qiita.com/danjiro/items/28bb17ab3e2aaf79e572)に、ラズベリーパイを使ったWiFiサーバーの作り方が書かれています。これを使ってもよいでしょう。
- 9va-pi からネットワーク上の共有サーバーに直接保存するには、[こちらの方法（共有フォルダのマウント）](https://qiita.com/danjiro/items/28bb17ab3e2aaf79e572#linux-ubuntuなど-から接続-mount)を使います。
- 共有フォルダがマウントされ、保存先がパスで指定できるようになれば、[こちらの方法（日付フォルダ保存機能）](http://dnjiro.hatenablog.com/entry/2019/08/23/194430)が使えます。


## 9View を利用したアニメーションの共同制作

- 9view は、9va-pi に付属する9VAeきゅうべえ専用の再生ソフトです。
- 共有フォルダの中に、9viewをいれておけば、9viewを起動すれば、そのフォルダの中の　EVAアニメーションと9VAeで保存したSVGアニメーションをファイル名の順番に連続再生します。
- ファイル名の順番に再生するため、ファイル名の先頭に数字をつけておけば、指定した順番に再生することができ、また、ファイル名をリネームするだけで、再生の順番を簡単にかえることができます。
- この仕組みをつかって、１つのアニメーションを複数名にわりあて、アニメーションを共同制作することができます。
- フォルダに入れられるファイルの数はほぼ無制限なので、学校全員で１つのアニメーションを作成するといったことが簡単にできます。ここで注目すべき点は、動画編集処理をいっさい行っていない点です。「9VAeきゅうべえでアニメを保存する。9Viewでファイル名順に再生する。」この処理はキーフレームのベクトル情報を使って行われるため、少ないメモリー、ハードディスクなしでリアルタイムに実行できます。

## 9Vae と 1コマアニメーター？の違い

 1コマアニメーター？は、9VAeと同じ高度なベクトルグラフィックス処理を内蔵していますが、操作を簡単にするために、あえて、つかえなくしています。なにを削ったかまとめました。1コマをものたりなく感じたら、9VAeを使うとよいでしょう。

|項目|9VAeきゅうべえ| 1コマアニメーター？|
|:--:|:--:|:--:|
|線属性|太さがかわる線、矢印、ぶれ、縁取り、影、点線・・|色、線の太さのみ|
|文字|文字枠、背景、縁取り、影、フォント・・|なし|
|画像・音||なし|
|ページ|背景|なし|
|アニメキャスト||なし|
|表示倍率|虫眼鏡ボタン、ピンチ|なし|
|表示エリア変更|長押しで画面スワイプ|しない|
||||
|右利き・左利き|なし|タイトルの左右ドラッグで切り替え|