Scratch、Viscuit の次は 「9VAeきゅうべえ=第3のプログラミング学習環境」

  • 7
    いいね
  • 0
    コメント

9view.gif
9VAeを使ったワークショップ

9VAe(きゅうべえ)とは

9VAe(きゅうべえ)は、2015年「みんなのラズパイコンテスト」で優良賞、2016年 広島国際アニメーションフェスティバルのワークショップで採用されたフリーのアニメーション作成ソフトです。ラズベリーパイ版(9va-pi)、Windows版、Mac版、Ubuntu版があります。Flash と同じようなソフトでプログラムを作るようにアニメを作成していきます。

ダウンロードはリンク先の Untitled.png をクリック。 ベクターからダウンロード
9va-win (Windows版) 9va-win (ベクター)
9va-mac (Macintosh版) 9va-mac (ベクター)
9va-pi (ラズベリーパイ版) 9va-pi (ベクター)
9va-pi (Ubuntu/ Linux X86 32bit版)
くわしいインストール方法はこちら
キッズプラザ版(Windows 子供用)はこちら

9VAeきゅうべえは、第3のプログラミング学習環境

子供にプログラミングを教える場合、次の2つのソフトがよく知られています。

いずれも、難しい専門用語を覚えなくてもプログラムが始められるように工夫されたプログラミング環境です。9VAeきゅうべえは、スクラッチやビスケットとは全く違う方向から開発された第3のプログラミング学習環境です。

スクラッチとビスケットの特長

  • スクラッチ(Scratch)は、MITメディアラボで開発されたプログラミング環境です。プログラムにでてくる専門用語を知らない子供たちでも、下図のような色と形で分類されたブロックを配置するだけでプログラムすることができます。世界中で使われています。
    scratchprg.png

  • ビスケット(Viscuit)は、日本で開発されたプログラム言語です。スクラッチとの違いは「スクラッチのここがきらい」に書かれています。あらかじめ用意されたたくさんのブロックを前提にすることなく、下図のようなめがねを使い、左側の絵が右側の絵に変わるという単純なルールだけで複雑なプログラムが作れるようにしています。
    viscuit.png

  • スクラッチ(Scratch )とビスケット(Viscuit)はかなり違ったアプローチですが、いずれも自由にプログラムを作ることができ、複雑なゲームやアニメーションを実現できます。

スクラッチやビスケットの難しいところ

  • どちらも小さな動作(ブロックやめがね)を組み合わせてプログラムを作ります。小さな記述で思った以上の複雑な動作をする点が最初の驚きです。これはプログラミングの重要なポイントですが、次の段階では、ある課題を解決するために、どうプログラムすればいいか考える必要があります。
  • スクラッチやビスケットでは達成したい結果からプログラムを考えるのが難しいのです。これはどんなプログラムでも難しいことで、課題を小さなプログラムに分解する能力をつけることがプログラム学習の目的なのかもしれません。
  • また、スクラッチやビスケットでアニメーションが作れます。しかし作れるアニメーションはスプライトという小さな図形を動かすだけです。これではTVでみられる普通のアニメが作れません。TVアニメではネコが笑ったり、しっぽをふったり、いろんな動作をします。これらをスクラッチやビスケットではプログラムするのが難しいのです。
    おどろくくま.gif

  • アニメが作れる環境でありながら、思いついたアニメを簡単には作れません。上のようなアニメを作りたいと思った子供がいて、それは全部のコマを描かないとできないと答えるのは残念です。プログラムでは好きなアニメが作れないと思い込んでしまうかもしれません。

9VAeきゅうべえの考え方

  • スクラッチは、ネコが10歩進んで右に30°向きを変えるといったボトムアップで動きを作っていきます。9VAeきゅうべえは、結果を絵で描き、そこに細かい動きをプログラムしていくという逆の考え方をします。
    びっくり.gif
    びっくり2.gif

  • 9VAeきゅうべえは結果の絵からスタートするため、どんな思いつきでも作り始められます。手間をかければどんどん期待したアニメに近づきます。

  • 9VAeきゅうべえはアニメーション自体がプログラムです。アニメキャストと呼ぶ「動く部品」を自分で作成し、それを組み立てていきます。

  • スクラッチのブロックが、9VAeでは動く部品(アニメキャスト)になります。動く部品を自分で作れる点はビスケットに似ています。各部品に、あとからどんどん複雑な動きをつけていく作り方はスクラッチと似ています。下の例は、上にあげたびっくりするクマに炎のアニメーションを組み合わせ、角度を変化させた例です。
    火をふくくま.gif

9VAeきゅうべえのプログラミング要素

動きをつける方法が、すべて図形によるプログラミングであるという点が、9VAeきゅうべえの特長です。画面上に以下のような図形を配置して動きを作っていきます。

項目
形の変化、時間の指定 びっくり.png
ループ ループ.png
ジャンプ、ボタン分岐 分岐b.png
動きをグラフで制御 動きグラフ.png
動きを矢印で制御 動きパス.png
さわると見える、クリックすると見える さわると見える.png
アニメの階層化 アニメの中にアニメを階層的に入れられる
時計表示 「#TIME」と書けば時刻を表示

スクラッチ、ビスケット、9VAeきゅうべえの比較

スクラッチ ビスケット 9VAeきゅうべえ
変数 ない ない
ループ 自分で作る
ボタン分岐 自分で作る
スプライトの中にスプライトを入れる × ×
形の補間 × ×

スクラッチと9VAeきゅうべえの連携

  • 実は9VAeきゅうべえはスクラッチのスプライト作成ツールとして最適です。作り方はこちら(9VAeアニメ研究所)
  • スクラッチでネコの表情を変えたり、しっぽを振ったりするには、コスチュームと呼ばれる画像を何枚も作成する必要があります。このコスチューム作成に 9VAeきゅうべえが使えます。
  • 9VAeきゅうべえでは何枚も絵を描かなくてもアニメが作れます。時間の調整や出力サイズの変更が簡単で、完成したアニメを連番PNG出力すれば、必要な枚数のコスチュームがすぐ作れます。ロケットの炎を動かしたり、自分のキャラクタを自由自在に動かせます。下図のように9VAeきゅうべえのヘルプメニューにはいっている「わらえもん」をスクラッチのネコの代わりに使うことも簡単にできます。
    コスチューム.png
  1. 「コスチューム」をクリック
  2. 「ファイルから新しいコスチュームをアップロード」をクリック
  3. 9VAeきゅうべえ>ファイル>「連番/APNG作成」をクリック。作成した連番PNGを全部選択してアップロード

  • スクラッチやビスケットはスプライトを動かすアニメーションしか作れないため、自分で考えたアニメーションを作るのが困難です。そのため、紙芝居のような単純な切り替えであきらめる場合が多いでしょう。その場合は、9VAeきゅうべえを試してみてください。
  • 9VAeきゅうべえは、自分が描いた絵を直接動かしてプログラムするため、簡単に自由な動きを作成できます。
  • 9VAeきゅうべえを体験した後、スクラッチのコスチュームを作ってみましょう。9VAeきゅうべえとスクラッチを組み合わせれば、プログラミングの楽しさが大きく広がるでしょう。

キッズプラザ大阪で、9VAeきゅうべえワークショップを3か月実施

2016年12月10日から2017年3月5日まで、キッズプラザ大阪で9VAeきゅうべえのワークショップを実施しました。このワークショップが画期的なのは、9VAeきゅうべえ開発者がワークショップの横に開発環境を持ち込み、子供たちの活動を見ながら9VAeきゅうべえを改良したという点です。

キッズプラザ大阪コンピュータ工房はそのようなことが可能な稀有な施設です。子供向けの教育アプリやプログラム学習ロボットを開発している人はキッズプラザ大阪コンピュータ工房に紹介してみてはどうでしょうか。

初日の様子。初回の参加者は1名でしたが、2、3、4回目はほぼ満員。5回目は外人も参加し、英語版が活躍しました。

まず、最初の一人目で、名前を入力するソフトキーボードの問題点が発覚しました。これはすぐ横で修正し、1人しか参加していなかったため、ワークショップを続けながらアプリの入れ替えを行いました。時間に合わせてデータの保存先を自動設定するなどいくつかの機能を搭載しましたが、小さな問題点が次々見つかり、3日くらいで収束しました。

キッズプラザは、操作に不慣れないろんな初心者が次々訪れ、大勢で一気に操作するため問題点があればすぐにわかる厳しい環境です。ワークショップで子供たちを教えるのはキッズプラザのスタッフさんなので、指導者側からの要望も聞くことができます。補助スタッフさんも交代で担当するためいろんな意見を聞くことができます。ここで得られた改善点はフリーソフト9VAeきゅうべえにも取り入れていきます。

ワークショップの様子ですが、開始から5分ぐらい、図形の変化がうまくいったときに笑いが起こり、それがアニメになっていることがわかって大歓声になりました。子供向けのワークショップですが端末が空いている場合は大人も体験できます。アニメ制作が子供からお年寄りまで楽しめるものであることが再確認できました。

キッズプラザは常設館で、リピーターも多いので、3か月間にわたって、制作されるアニメがどのように変化していくか、単発のイベントでは得られない貴重な知見が得られるでしょう。この活動で、キッズプラザ大阪が子供アニメの聖地になることを願っています。

9VAeきゅうべえを使ったプログラミング学習ワークショップ

手順

キッズプラザ大阪で行っている以下の手順がよいでしょう

手順 項目 操作
1 図形を変形する方法の練習 1. ヘルプ>かおであそぼう(練習用)>わらえもん
2. 図形を何回かクリック
3. 制御点を移動し顔が変形できることを示す
4. 顔を自由に変形させ、図形を変形する操作を習得
2 再生 プレイボタンでアニメが動くことを見せる
3 自分で描く 左上ツールパレットの鉛筆ボタンで自分で描く
4 色を変える 左上ツールパレットの選択ボタン、右上のカラーパレットで色が変えられることを示す
5 自分の作品を作る ページの右側の「丸プラス」ボタンで「続きのページをつくる」これで基本操作が習得できたので、自由に自分の作品を作ってみる

実施するときのポイント

ポイント
1 間違えて描いた図形を消したい場合、画面左下にある「もどる」ボタンを何回かクリックする方法をまず教えましょう。
2 「動きを作る」ということをつねに意識させる。例えばいらない図形を消したいときに、削除ボタンよりも、図形を選んで画面外に移動のほうを教える。これで画面の外に移動して消えるが作れる(前のページがある場合)。小さくなって消えるとか、透明になって消える(カラーパレットの上に透明度)とかいろんな消え方があることに気づかせてください。
3 Scratch も同じと思いますが、みんなの作品をお互いに見せあうことはとても重要です。メニューバー>表示>「大きいサイズで再生」でループ再生しますので、お互いの作品を見て、どう作ったのか、どんな意図でとか話し合うとよいでしょう。

9VAe におけるプログラミング学習

ポイント
1 「背景ページ」「画面スクロール」「往復ボタン」あたりから教える
2 アニメキャストの習得を目標にしましょう。アニメキャストが使いこなせるようになれば、 「神速卓球」(2005 Masashi 中学生) 「道場」(2007 棒線 高校生) のようなアニメが作成できます。
3 興味がでてきたら「ボタン」「ラベル」を教える。ボタンをクリックうして進むゲームを作ることができます。
4 スクラッチのコスチュームを作成してみる。(以下、手順例)
1.9VAe>ヘルプ>かおであそぼう(練習用)>わらえもん
2.わらえもんの顔を変形してモンスターを作成
3.プレイボタンで変身アニメを見る
4.1ページの番号をクリック>「ページを切り取る」2ページのモンスターだけ残る
5.全体を選択し、モンスターの顔を縮小。胴体と手足を描く
6.ページの右の「丸+」をクリック「続きのページ」を作成
7.手足を動かしてアニメ作成
8.ファイル>「連番/APNG作成」>デスクトップなどを指定
9.出力レートを「2または3」コマ/秒に設定
10.「出力開始」ボタン、「ひとつのAPNGにまとめますか」には「いいえ」
これで、モンスターの動きが連番PNG出力されます。
11.スクラッチを開く
12.「コスチューム」をクリック
13.「ファイルから新しいコスチュームをアップロード」をクリック>作成したPNGを全部選んで「OK」
これでスクラッチにモンスターがはいります。
あとはスクラッチプログラムを作って動かすだけ。

9VAe の自習方法

ポイント
1 ヘルプ>わらえもんでアニメを作る段階では、何も覚える必要はありません。
2 アニメキャストを理解するために、「バスケットボール」「プロペラ飛行機」というアニメキャストの基本を学習するチュートリアルアニメが、9VAeに同梱されています。
- Windows/Raspberry Pi/Ubuntu の場合、解凍したフォルダにある「demo」 をダブルクリック
- Macintoshの場合、フォルダの中の「9View」をダブルクリックしてください。

関連記事

9VAeきゅうべえ のご紹介

  1. 無料ソフトでアニメを作ってみよう(9VAe きゅうべえ)
  2. インストール方法
  3. スクラッチ、ビスケットの次は 9VAe=第3のプログラミング学習環境
  4. よくある質問

9VAeきゅうべえ 初級編

  1. 9VAe チュートリアル(1)ーページでタイムラインなし
  2. 9VAe チュートリアル(2)ー図形入力、選択、移動、サイズ変更
  3. 9VAe チュートリアル(3)ーアニメキャストを作る、時間調整
  4. 9VAe チュートリアル(4)ーアニメキャストの修正、往復
  5. 9VAe チュートリアル(5)ー動きグラフ、ページコピー、GIF作成
  6. 書き順アニメーションの作り方
  7. 9VAeきゅうべえ:長いアニメを作る方法

9VAeきゅうべえ 上級編

  1. 動くLINEスタンプのAPNG作成:無料ソフト9VAeきゅうべえ
  2. 萌えキャラ デジたんを目ぱちさせるまで:APNGアニメの作り方
  3. openclipartの無料イラストをアニメ化する6つの手順
  4. イラストから動くLINEスタンプのようなアニメを簡単に作る方法
  5. Openclipart の 無料SVG をアニメにするテクニック
  6. 無料アニメソフト9VAeきゅうべえの裏技集

9VAeきゅうべえ サンプル作品

  1. 9VAeきゅうべえ」で絵を描かずに作れるGIFアニメ
  2. 9VAeきゅうべえで作成したSVGアニメーション

9VAeきゅうべえ 技術資料

  1. アニメソフト 9VAe をカスタマイズする方法
  2. イラストレータのデータを 9VAe(きゅうべえ)に変換する方法
  3. 9VAe / 9svg データフォーマット解説