dnjiro’s 9VAe blog

誰でもアニメが作れる無料ソフト9VAeきゅうべえ開発者のブログ

9VAeきゅうべえのタイルエディタの使い方

動画素材作成フリーソフト9VAeきゅうべえのタイルエディタを使って、 和紙、水滴、草原、イナズマ、とかげ、お花畑といった模様を作る方法を説明した。パソコン、スマホで10分程度で作成できる。

f:id:dnjiro:20200313195057g:plain

9VAeきゅうべえ、Ver.0.6.13 に、タイル模様を自作できるタイルエディタが搭載された。この機能は10年ほど前から搭載をすすめていた機能だ。上がタイルつき、下がタイルなしだ。上のほうがよいだろう。ただ模様は無限にあるので物体に適した模様を簡単に自作できることが重要だ。

f:id:dnjiro:20200313200158g:plain

実は2017年に標準タイルが公開されたときからエディタがあったが、操作がわかりにくく公開していなかった。そのあと、Android版、iPhone版ができ、そこに移植するのに時間がかかった。

9VAeタイルエディタの使い方

使い方は一応 Qiita に解説記事を書いた。ただ素材画像についてあまり書いていないので、使い道がピンとこないかもしれない。

  • タイルエディタの機能をまとめると、
    • 素材画像からタイルにする領域を選ぶ
    • タイルのつなぎ目を目立たなくする
    • 透明にするかなど、塗りつぶし方法を選ぶ
    • 明るさの調整、サイズの調整

これでどんなタイルが作れるか試してみた。以下の結果をみれば、ネットから入手できるフリーの素材画像から無限にタイル模様が作れそうだ。

9VAeタイルエディタで作れるか試してみた課題

  • 思いつくままテーマをあげてみた。
    • 和紙
    • 水滴がついた窓ガラス(透明タイル)
    • 草原
    • イナズマ
    • とかげ
    • お花畑(色つきタイル)

iPhoneを使った手順を説明した。もちろんパソコンでもできる。Androidの場合、キャプチャした画像を「9VAe」フォルダにいれる必要がある

1.和紙

画像を検索してキャプチャー

  1. まず、ブラウザで「フリー テクスチャ 和紙」をキーワード検索する
  2. 検索結果の中から、自由に使用してよいフリー素材画像を選んで画面キャプチャする

各OSの画面キャプチャー方法、画像のトリミングの方法は以下のとおり

OS 画面キャプチャー 切り取り
iPhone 電源ボタンとホームボタンを同時押し、iPhoneXではサイドボタンと音量あげるボタンの同時押し 写真アプリで編集
Android スクリーンショットをとる方法 フォトアプリで編集
Mac Shift+コマンド+4 キャプチャ時に切り取り
Windows PrintScreen キー ペイントブラシで選択、右ボタンメニュー>トリミング

iPhone で画像検索>キャプチャーし、写真アプリで開いた結果が下図。

f:id:dnjiro:20200308150045p:plain

以下、iPhone での操作を説明

  1. 「写真」アプリでキャプチャ画像を開く(上図)
  2. 編集(上図A)をタッチ
  3. 画像トリミングボタン(下図B)、範囲指定ボタン(下図C)をタッチ
  4. 右下隅(下図D)左上隅(下図E)をドラッグしてタイル素材だけ選ぶ
  5. 完了ボタン(下図F)をタッチf:id:dnjiro:20200308153209p:plain

9VAeでタイルを作成

  1. 9VAeきゅうべえを起動
  2. 塗り色ボタン(下図G)をタッチ。下向き三角(下図H)で空のタイルを表示
  3. 空のタイル(下図I)をタッチ。f:id:dnjiro:20200308155402p:plain
  4. キャプチャした画像を選ぶとタイルエディタが開きます。
  5. タイルの左上の◇(下図J)をドラッグし、和紙の模様にしたい場所の上に移動します。
  6. 虫眼鏡の左の「+」ボタン(下図K)をタッチすると拡大します。タイルの内側(下図L)がタイル塗りつぶしされますので、この表示をみながら、重なり調整ハンドル(下図M)をドラッグします。f:id:dnjiro:20200308160850p:plain△が右上隅の場合、周囲のタイルとの重なりがまったくないので、つなぎ目が目立つ場合があります。△を内側に移動させると重なり部分ができ、その間をなめらかに接続するためつなぎ目が目立たなくなります。
  7. 左上の◇ハンドル(上図J)で模様の場所がかわります。ちなみに右下の◇のドラッグで大きさがかわります。△は重なり具合の調整です。この3つのハンドルを移動し、和紙のタイル模様を探します。
  8. タイル模様が決まったら、選択ボタン(下図N)をタッチすれば、タイルエディタの模様編集が終了します。

図形にタイル模様をつける

f:id:dnjiro:20200308173815p:plain

  1. 塗りのある四角ボタン(上図O)をタッチし、画面をドラッグ(上図P)して四角形を追加。画面全体を表示するには虫眼鏡ボタン(上図S)をタッチします。
  2. 四角形を描いたら選択ボタン(上図N)をタッチ。iPhoneは画面変更ボタン「>>>」(上図Q)でカラーパレットを表示
  3. 塗り色ボタン(上図Q)でカラーパレットを開き、作成したタイルをタッチ。これで描画した四角形にタイル模様がつきますが、明るさ調整前なので模様がはっきりとは見えません。

タイルの明るさを調整

f:id:dnjiro:20200308175444p:plain

  1. 選択ボタン(上図T)をタッチ。
  2. タイルをタッチして選択し、選択枠の中心ボタン「+」をタッチ。メニューの「明るさ」の上下△ボタンをタッチし、明るさを調整します。この例では、「明るさ7」にすれば上図のようになりました。

結果

f:id:dnjiro:20200308180407p:plain

  1. 四角形を選択し、選択枠中心の「+」(上図V)をタッチし、メニューから「複製」をタッチ。2つ四角形を複製します。
  2. カラーパレットを表示し、白と薄茶色に変更した結果が上図です。和紙の雰囲気がでているでしょうか。

  3. このあと、タイルを選択し、選択枠中心の「+」をタッチ。メニューから「タイル模様の修正」を実行すれば、タイルエディタが起動し、模様の画像の場所を変更できます。この方法で四角形の模様をあとから自由に変更することができます。

2.水滴がついた窓ガラス

画像を検索してキャプチャー

  1. ブラウザで「フリー テクスチャ 水滴」をキーワード検索
  2. 上と同じ方法でタイルを作成
  3. タイルの描画モードを「白を透明に」に設定。これで水の部分が透明になります。

結果

f:id:dnjiro:20200309011402p:plain

3.草原

画像を検索してキャプチャー

  1. ブラウザで「フリー テクスチャ 草原」をキーワード検索
  2. 上と同じ方法でタイルを作成

結果

f:id:dnjiro:20200310142020p:plain

4.イナズマ

画像を検索してキャプチャー

  1. ブラウザで「フリー テクスチャ イナズマ」をキーワード検索
  2. 上と同じ方法でタイルを作成
  3. 「より白く」オプションで模様を作成

結果

f:id:dnjiro:20200310143948p:plain

5.とかげ

画像を検索してキャプチャー

  1. ブラウザで「フリー テクスチャ 爬虫類」をキーワード検索
  2. 上と同じ方法でタイルを作成
  3. FreeSVGからとかげ(Lizard)のイラストを検索、読み込んで回転させて、タイル塗りつぶしを設定
  4. とかげの色を緑色に設定、タイル模様サイズを縮小

結果

f:id:dnjiro:20200313195057g:plain

6.花畑

画像を検索してキャプチャー

  1. ブラウザで「フリー テクスチャ 花畑」をキーワード検索
  2. 上と同じ方法でタイルを作成
  3. タイル塗りつぶし方法を「白を透明に>黒を透明に>カラー」に設定
  4. 四角形を灰色に設定、タイルの色がそのまま表示されます。

結果

f:id:dnjiro:20200313104103p:plain

何例か作成してみたが、意外と簡単にタイル模様がつくれる。タイルエディタがないとタイル模様のつなぎ目が非常に目立つ。9VAeのタイルエディタは、完全とはいえないが、かなり使えそうだ。


9VAeきゅうべえに関する問い合わせ

Power Director用グリーンバック素材を9VAeきゅうべえで作る

Android版 PowerDirector用に9VAeきゅうべえでグリーンバック動画を作る方法を説明しました。作業時間は15分くらいです。パソコン版9VAeiPhone/iPad版9VAeでもできます。iMovie でのグリーンバック動画の作り方はこちら

f:id:dnjiro:20200305085305g:plain


他のアニメの作り方はこちらをご覧ください

 

■ 9VAeきゅうべえのダウンロード

■ Power Director のダウンロード

 

1.サンプル動画を準備(自分で撮影した動画でもOK)

作り方を説明するために、9VAeきゅうべえで、サンプル動画を作成します。自分で撮影した動画をつかってもかまいません。

  1. 9VAeを起動。Android版の場合、画面を横にして画面をタッチすれば横画面になります。
  2. 「ヘルプメニュー>(かおであそぼう(練習用))>変身」をタッチ。下画面のようになります。
  3. 「ファイルメニュー>アニメGIF出力」
  4. パソコン版の場合、先に保存ファイルを指定します。スマホ版の場合、サイズ設定画面になりますので「OK」をタッチすれば、(new-sample).gif という名前でアニメGIFが9VAeフォルダに保存されます。

 

f:id:dnjiro:20200305100225p:plain

 

2. PowerDirector で新規プロジェクトを作成、アニメGIFを入力

以下、Android版で説明します。

  1. PowerDirector を起動
  2. 「新しいプロジェクトを作成して編集を開始」 をタッチ
  3. 「16:9」をタッチ
  4. 写真マーク(下図A)をタッチ、「「9VAe」(下図B)をタッチ

    f:id:dnjiro:20200304111644p:plain

  5. (new-sample).gif をタッチ(下図C)。表示された「+」をタッチ(下図C)。これでプロジェクトに動画が追加されます。

    f:id:dnjiro:20200304134841p:plain

  6. 動画エリア(上図D)をタッチすれば、PowerDirectorの編集画面(下図)になります。プレイボタン(下図E)で動画を見てみましょう。

    f:id:dnjiro:20200304135719p:plain

 

この動画にしゃべるキャラクタと吹き出し文字をいれてみましょう。

 

3.9VAeきゅうべえにSVGキャラクタを読み込む

  1.  OpenclipartにあるフリーのSVGキャラクタ(こちら)を読み込みましょう。
  2. スマホの場合、上のリンクをひらき、DOWNLOADの下にある、「SVG(Vector)」ボタン(ここでもよい)を長押しし、メニューから「リンクアドレスをコピー」をタッチします。次に、9VAeきゅうべえを開き、「ファイルメニュー>新規作成」のあと「ツールメニュー>ネットからダウンロード」を実行し、http 入力欄を長押しして「貼り付け」をタッチ。

    f:id:dnjiro:20200304141606p:plain

    OKをタッチすれば、キャラクタが入力されます(下図)。
  3. パソコン版の場合、DOWNLOADの下にある、「SVG(Vector)」ボタン(ここでもよい)を右ボタンでクリックし、メニューから「リンク先を保存(または対象を保存)」をクリックして保存します。次に、9VAeきゅうべえを開き、「ファイルメニュー>新規作成」のあと「ツールメニュー>9VA/SVG/WMFを入れる」でダウンロードしたSVGファイルを読み込んでください。

f:id:dnjiro:20200304230159p:plain



4.キャラクタの位置、サイズ調整

  1. 左下の虫眼鏡の右側の「-」(上図F)を何回かタッチすれば表示倍率が小さくなります。(iPhone版の横画面で虫眼鏡ボタンが見えない場合は縦画面にしてタッチしてください。)
  2. キャラクタを囲んでいる選択枠の角のハンドル(上図H)のドラッグでサイズ変更。枠線(上図I)で移動ができます。キャラクタの位置を調整してから、虫眼鏡ボタン(上図G)をタッチしてください。 

 

5.キャラクタのしゃべり方の調整

  1. キャラクタの選択枠中心の「+」(上図J)をタッチし、メニューから「アニメの中を修正する」をタッチすれば、アニメーションの中が見えます。プレイボタン(下図K)で動きをみてください。(このアニメも9VAeで作られました。作り方はこちら)

    f:id:dnjiro:20200304231422p:plain

  2. アニメの停止は右側のストップボタンです。このしゃべり方をもっと速くしましょう。
  3. ページ番号1(上図L)をタッチ。メニューから「ページの指定ここから」をタッチ
  4. 最後のページにいくボタン「>>」(上図M)をタッチ
  5. 最後のページ番号9(下図N)をタッチ。メニューから「ページの指定ここまで」をタッチ。これで全部のページが選択されたことになります。
  6. ページの時間「0秒」(下図O)をタッチ。メニューから「まとめて調整する」をタッチ。全体の時間を2(秒)にしてプレイしてみてください。時間が短くなったので早くしゃべるようになります。

    f:id:dnjiro:20200304232710p:plain

    このアニメーションは1ページから8ページまで「繰り返し」がはいっており、ストップを押すまで止まりません。途中のページの口の形やページの時間を細かくかえれば、しゃべり方を細かく調整できます。9ページは「O」の口の形をストックしたもので再生されません。

  7. 画面上の太字(new)> 3314980 は(new)がアニメ本体の名前、3314980 は読み込んだアニメキャストのファイル名です。(new)(上図P)をタッチ。メニューから「このアニメにもどる」をタッチして、元のアニメに戻りましょう。
 

f:id:dnjiro:20200304234602p:plain



6.文字と吹き出しを入れる

  1. 文字入力ボタン(上図Q)をタッチ。
  2. 「9VAeで作りました」と入力。「OK」ボタンで入力が完了します。
  3. 上の図形タブ3(上図R)をタッチすると、基本図形が入力できます。文字を選んだ状態で、吹き出し(上図S)をタッチすれば、文字の背後に文字の大きさにあわせた吹き出しが入ります。
  4. 吹き出しの選択枠(上図T)の角のハンドルで拡大、枠線で移動などをつかって調整してください。

 

7. グリーンバック背景ページをいれる

  1. ページの左側の「<」(上図U)をタッチ。メニューから「グリーンの背景をいれる」をタッチ。メニューにこの項目がない場合、9VAeを最新版(Ver.0.6.13-200210以降)にしてください。
  2. 2ページの時間(下図V)をタッチ。「1秒長くする」を何回かタッチし、4秒にしましょう。
  3. プレイボタンで動きを見ると女子高生の口が太いようです。
  4. 2ページ(下図W)をタッチして2ページに移動。女子高生(下図X)を選びます。
  5. 図形パレット(下図Y)をタッチ。線の太さ(下図Z)をタッチ。メニューの上から2つめ(一番細い線)をタッチします。これでアニメキャストの中の線が全部細くなります。

    f:id:dnjiro:20200305005516p:plain

  • アニメキャストのサイズを変更したとき、線の太さがあわない場合があります。そのときはアニメキャストを選んで、アニメキャスト全体の太さを調整します。
 

7. グリーンバック素材を動画出力

  1. ここまでできたら「ファイルメニュー>名前を付けて保存」で名前をつけて保存しておきましょう。ここでは「girls」と名前をつけました。スマホ版では、「9VAe」フォルダに保存されます。
  2. 「ファイルメニュー>アニメGIF出力」。
  3. 動画素材を作る場合、画面サイズは、幅を空白、高さを720、コマ/秒を30にするとよいでしょう。「OK」ボタンでアニメGIFを作成します。

    f:id:dnjiro:20200305104341p:plain



 

8. Power Director にグリーンバック動画を追加

 

f:id:dnjiro:20200305065617p:plain

  1. 左側の追加ボタン(上図a)をタッチ。画像(上図b)をタッチ。
  2. 「9VAe」フォルダをタッチ。作成したグリーンバック動画(下図c)をタッチ。「+」が表示されるのでもう一度(下図c)をタッチ。

    f:id:dnjiro:20200305070629p:plain

  3. 画面下(上図d)をタッチ。動画編集画面に移動します。

    f:id:dnjiro:20200305071557p:plain

  4. グリーンバック動画(上図e)をタッチして選択(両側にまるいマークがつきます。)。左側の鉛筆(上図f)をタッチ。「クロマキー合成」(上図g)をタッチ。クロマキーの色を選ぶ画面に移動します。

    f:id:dnjiro:20200305072523p:plain

  5. スポイトボタン(上図h)をタッチ。画面の緑色(上図i)をタッチ。緑色が透明を示す白黒模様に変わります。戻るボタン(上図j)をタッチ。動画編集画面に戻ります。グリーンバックが透明になっています。

    f:id:dnjiro:20200305074336p:plain

  6. グリーンバック動画が選ばれた状態で、角の四角(上図k)をドラッグして拡大。画面をドラッグして位置調整しましょう。

 

9. 動画の長さを調整

  1. 最初の動画(上図l)をタッチ。動画の両端にまるいマークがつきます。
  2. 右側のまるをドラッグ(下図m)して長さを短くします。これでひとまず完成です。

    f:id:dnjiro:20200305082043p:plain

 

 

10. Power Director から 動画出力

  1. 「出力ボタン」(上図n)をタッチ。「動画出力」(上図o)をタッチ。出力画面に移動します。

    f:id:dnjiro:20200305083030p:plain

  2. 「ギャラリーまたはSDカードに保存」をタッチ。「出力」(上図p)をタッチで動画出力がはじまります。「今すぐ再生」ボタンを押せば完成した動画が見られます。

 

9VAeをつかえばグリーンバック動画がすぐ作れる 

  • 9VAeきゅうべえを使えば、グリーンバック動画が簡単に作れます。
  • FreeSVG など多くのSVGイラストをつかって動くキャラクタ素材が作れます。動画作成にご利用ください。
  • なお、このサイトの一番上にある動画はアニメGIFで、9VAeきゅうべえだけで作成したものです。アニメ素材を合成するだけなら、9VAe上でアニメキャストを重ねたほうが簡単です。動画編集を行う場合に、PowerDirector、iMovie, AviUtl などを使うとよいでしょう。
  • もっと長いアニメを作ることもできます。以下をご覧ください。

9VAeきゅうべえ:長いアニメを作る方法 - Qiita

 

 

9VAeきゅうべえに関する問い合わせ

 

外部コントロールできる9VAeのフランス語版がおかしかった理由

外部プログラムからアニメーションをコントロールできるフリーソフト9VAeきゅうべえラズベリーパイ版を公開した。ダウンロードはこちら そのフランス語版の動作がおかしかったので、原因追及した顛末を紹介している。なお、今、公開されているバージョンは正しく動作します。(0.6.13dで修正しました。)

最初につくったバージョンは、日本語、英語では正しく動作するのに、フランス語ではアニメの顔がでかくなるという現象が発生。以下のような感じ。 f:id:dnjiro:20200229212252p:plain

  • 言語設定をフランス語にすると、オーバーレイの上に描いたアニメキャストの顔が、ばかでかくなってる。不思議なのは、日本語、英語、中国語は問題なくて、フランス語だけ顔がでかい。
  • 9VAeきゅうべえ本体は正常に動いているので、CSV命令を読み込んで、座標値や倍率を取得する部分がおかしいのか。
  • CSVテキストから数値を読み込むには、 sscanf 関数を使ってるのだが、フランス語と英語で数字のコードが違うのか?、そういえば、フランス語で、数字の9をうつと、へんな文字がはいる(これは単にキーボード配列の違いと思うが)フランス語版 9VAeきゅうべえは、フランスの方(こちら) の翻訳のおかげである。なぜフランス語だけおかしくなるのだろうか。

対応方針、どうデバッグするか

  • どんな細かいことでも、原因を追究すると、大きなバグを発見することがある。 というのは今まで何回も正しかった。これを見過ごしてはいけない。
  • 開発環境をいれてデバッガーで値をみるのがてっとり早い。ただフランス語でデバッガが使えるのか・・・

ラズベリーパイ Buster で、Geanyのデバッガーが動作しない

フランス語の小数点はなんと「,」らしい

  • 問題の部分はマウスカーソルにアニメキャストを割り当てる「setM」命令で「setM,1,2,15,"face"」と書いてある。1は設定、2は倍率、15が角度。このパラメータを「sscanf ",%f,%f,%f」で3つの変数に読み込んでいる。sscanf はC言語の文字、数値入力関数。
  • デバッガでみると sscanf の結果、最初の数字が「1.2」、2番目の倍率が「15」、3番目が0になっていた。倍率2が15になったので顔(face)が7倍でかくなった。「1,2」が「1.2」になってるのが問題。
  • ネットで検索すると、なんとフランス語の小数点は「,」らしい。
  • そうすると、CSVファイルのコンマ区切りはどうするのか?と思って検索すると、以下の記事を発見
  • ヨーロッパでCSVファイルが開けない

イタリア、ドイツ、フランスなどでは、小数は「,」、CSVの区切りは「;」らしい

  • とすると、サンプルのCSVデータをフランスのエクセルで開くと、正しく開くことができないのでは?と思って LibreOffice Calc で開いてみると、最初に区切りを指定する画面が表示された。単純テキストと解釈されたもようである。
  • さらに、LibreOffice Calc フランス語で、CSV保存すると「,」区切りで保存された。「;」にはしてないみたい。たしかにそんなものが出回ると迷惑だ。
  • ということで、小数点は「.」CSV区切りは「,」で決定とし、それをフランス語でも正しく動くようにしたい。
  • 対策として、フランス語、イタリア語、ドイツ語の場合、「.」と「,」、「,」と「;」を入れ替えてから、sscanf を使うようにするのが考えられる。しかし sscanf の動作は、Windows / Mac / Android / iOS もみな同じ動作なのか。また、フランスの sscanf がコンマを小数点と解釈するのなら、もっと問題が出るのでは・・・

フランスの sscanf が「,」を小数点にするなら、SVGの解釈に失敗するのでは?

  • ベクトル形式で図形SVGファイルの座標値はピリオドの小数点で、コンマで区切られている。SVG読み込みが全滅しているのではないか?さらに、9VAeの保存をバイナリからSVGに変更しているのだが、大丈夫なのか。
  • フランス語9VAeでSVGファイルを開いてみると、ちゃんと動作しているみたいだ。ソースを調べてみると「,」の分割は自力でやっていて、小数入力だけ sscanf %f を使っていた。フランスでは整数部分だけ正しくよんでいて、小数以下が無視されている可能性がある。うーむ。9VAeのSVG保存については、独自情報も保存しているので大丈夫だった。
  • 英国と米国は、小数の位の表示にピリオドを使用する、世界でも数少ない国という記事を発見。小数点が点なのはマイナーだったのか! -ロケールの設定という記事を発見。これで、sscanf の動作を切り替えられるか、と思ってプログラムでロケールを切り替えてみたが、動作は変わらなかった。
  • 結局、「.」と「,」、「,」と「;」の入れ替え前と後の2通りを行って、正しそうな方を選ぶことにした。言語によって処理を切り替えるということはしない。結果で判断する。例えば、Windows版9VAeきゅうべえは、フランス語でも正常に動作しており、sscanfの小数点はピリオドみたいだ。ただ日本で入手できるWindowsをフランス語設定にしたということなので、フランスでどうなっているかわからん。

言語によって sscanf %f の動作がかわるのは、ラズパイだけだった

あらためて、Windows / Macintosh / Raspberry Pi / Ubuntu の動作を調べてみると、フランス語にして顔が大きくなるのはラズベリーパイだけだった。言語設定によって、sscanf %f の動作がかわるライブラリはあまり採用されていないのかも。SVG入力、データ保存に問題ないということなのでひと安心である。

9VAeきゅうべえに関する問い合わせ

9VAeきゅうべえは、Chromebook でも動くか?

SVGイラストから動画素材を簡単に作成できるフリーソフト、9VAeきゅうべえは、Windows Mac ラズベリーパイ Ubuntu AndroidiOS、FireOS、といろんなOSに移植してきたので、つぎは、Chromebook ?・・・と考えていた。ただ、そのために、Chromebook を購入するのもなんだかと思っていたところ、中古のWindowsでChromeOSが動くらしいので、試してみると、簡単にできた。

 

さらに、新しいChromeOSは、Androidアプリが動くとのことなので、9VAeきゅうべえアンドロイド版をすこし改造すると、ChromeOS版ができるかもしれん。

 

9VAeきゅうべえ Android版は、DXライブラリを使っているのだが、Chromebookでの動作は考えてないだろうからちょっと不安だが、逆にどこまでできるのか興味もある。ということで、調べたことを記録していきます。

 

ChromeOS の無料版は、Cloud Ready home

下の記事にそって、CloudReady -usb-maker を実行し、起動用USBメモリを作成して起動したら、中古パソコンがChromebook になった。USBブートでとてもあつかいやすい。厳密にはChromebook ではないかもだが、テストには使えそうな気がする。

 

ChromeOS 用アプリの作り方

以下に開発方法がかかれている。中古のノートパソコンをUSBデバッグの実機にできるのかどうか、わからんが、APKをメールでおくって、インストールして動かしてみることはできそう。

トレス動画は9VAeきゅうべえで作ると簡単

9VAeを使って動画をトレスする方法を説明します。9VAeきゅうべえアンドロイド版でもPC版iPad/iPhone版でもつくれます。ここで説明したトレス作業には2から数時間かかります。他のアニメの作り方はこちらをご覧ください

 

トレス動画は、動画をキャプチャし、全コマ手書きでトレスするのが基本です。例えば以下の14秒の動画は、秒24コマなら、336コマ、絵をトレスする必要があります。

f:id:dnjiro:20200204141635g:plain

 

ところが、9VAeを使えば、キーフレームだけトレースし、中間のコマは自動補間させることで、絵をトレスする枚数を大幅に減らすことができます。 この動画ならたった6コマのトレースで再現できます。

 

  

■ 9VAeきゅうべえのダウンロード

フリーソフト9VAeきゅうべえは以下からダウンロードできます。

 

1.トレスしたい動画1カットから8コマ以内のキーフレーム画像を選ぶ

上の14秒の動画キャプチャから以下の6枚の絵を選んでキャプチャしました。下の時間は選んだコマが再生される時間です。トレスを試してみたい場合はご使用ください。画像サイズは、280x210です。

  1. f:id:dnjiro:20200204143602p:plain

    0秒
  2. f:id:dnjiro:20200204143718p:plain

    2秒
  3. f:id:dnjiro:20200204143759p:plain

    5秒
  4. f:id:dnjiro:20200204143831p:plain

    6秒
  5. f:id:dnjiro:20200204143907p:plain

    8秒
  6. f:id:dnjiro:20200204143939p:plain

    13秒

 

 

2. キーフレームのコマを読み込み、再生時間を設定

f:id:dnjiro:20200204152730p:plain



  1. 絵・写真入力ボタン(上図A)をクリックし、最初のコマを入力。もし画面サイズがあわなかったら、ページメニュー>ページ設定(スマホの場合は、ファイル>ページ設定)で画面サイズの縦横を画像サイズ(上のサンプル画像は280x210)に合わせてください。
  2. ページの右側の「+」(上図B)をクリック。メニューから「空白ページを作る」。新しいページができるので、順番にトレスする原画を入れてください。
  3. 原画をいれたらページの時間(上図C)を設定しましょう。この部分をクリックし、そこに入れた原画の再生時間から次の原画の再生時間までの時間を設定します。
  4. 再生ボタン(上図D)を押せば、原画が正しい時間に再生されます。この上にトレス画像を追加していき、なめらかに動く動画にかえていきます。

 

3.背景ページ作成し、最初の原画を背景ページに入れる

  1. 先頭ページの左側の「<」(上図E)をクリック。「背景ページを入れる」をクリック。先頭に背景ページができます。
  2. 2ページ(下図F)をクリックして2ページに移動
  3. 原画(下図G)をクリックして選択。図形を切り取るボタン(下図H)をクリック。原画がクリップツールに切り取りされます。
  4. 背景ページ(下図I)をクリックして移動
  5. 図形を取り出すボタン(下図J)をクリック。メニューから「ステージにもどす」をクリック。背景ページに原画がはいります。

f:id:dnjiro:20200204163554p:plain

 

4. 左の雲をトレス

  • 背景ページの原画の上を9VAeきゅうべえでなぞっていきます。
  • 9VAeは図形エディタなので、重なり順序が重要です。あとから重なりを変更できますが、なるべく背後にあるものからトレスしていきます。

 

  1. 2ページ(上図F)をクリックして2ページに移動。背景ページが見えます。
  2. わかりやすいように線の色(下図K)をクリックして、赤色にします。
  3. まず、左上の雲をトレスしてみましょう。画面左下の「+」(下図L)で画面を拡大できます。パソコンの場合、スペースキーを押しながら画面をドラッグすれば拡大位置を変更できます。スマホではピンチイン、ピンチアウト、2本指ドラッグが使えます。
  4. トレスは折れ線(下図M)を使ってみてください。
  5. 下図の△□で表示されている点が入力した点です。△がとがった点、□が曲がった点を表します。この2つは右側のパレットの「コーナー、カーブ」(下図N)または、シフトボタン(下図O)で切り替えられます。
  6. 折れ線入力では、最初に入力した点をクリックすれば図形入力がひとつ完了します。
  7. 間違えたときは、Undoボタン(下図P)で戻してください。点選択ボタン(下図Q)をクリックすれば下図のように入力した点が表示されるので、点を選んで位置を修正したり、△、□を変更できます。

f:id:dnjiro:20200204171445p:plain

 

5.雲を複製して影を入力

 
  1. 選択ボタン(下図R)をクリック。選択枠を表示させます。
  2. 下のシフトボタン(下図S)をクリック。選択枠中心の「+」(下図T)をクリック。メニューから「複製する」をクリックします。シフトが押された状態で「複製する」を実行すれば、同じ位置に複製されます。パソコン版の場合はシフトキーを押しながら「複製する」をクリックしても同じです。
  3. 点選択ボタン(下図U)をクリック。点が表示されるので点をドラッグして移動させ、雲の影をつくります。

f:id:dnjiro:20200204180912p:plain

雲の影を入力した状態を下図に示します。

 

6. 雲の影の色、雲の色を設定、パレットに登録

  1. カラーパレットの色1(下図V)をクリック。「画面から色を選ぶ」をクリック
  2. 雲の影の色(下図W)をクリック。雲の影の色が塗られます。
  3. 登録ボタン(下図X)をクリック。雲の影がパレットに登録されます。
  4. 雲(下図Y)を選択
  5. カラーパレットの色1(下図V)をクリック。「画面から色を選ぶ」をクリック
  6. 雲の色(下図Z)をクリック。雲の色が塗られます。
  7. 影が登録されたパレット(下図a)をクリック。メニューから「追加登録する」をクリック。これで雲がパレットに登録されました。

f:id:dnjiro:20200204182731p:plain
 

7. 雲を複製し、別の雲をつくる

  1. 登録された雲(上図a)をクリック。メニューから「選択する」をクリック
  2. これで雲が選択されます。選択枠の中心の「+」をクリック。メニューから「複製する」をクリックこれで雲が複製されます。
  3. 登録された雲(上図a)をクリック。メニューから「追加登録する」をクリック
  4. 画面左下の「ー」(下図b)をクリックして倍率を下げます。
  5. 選択枠をドラッグして右側の雲の上に移動。
  6. 登録された雲(下図c)をクリック。メニューから「下と重ねる」をクリック。これで背景が透けて見えるようになります。
  7. 点選択ボタン(下図d)をクリックし、雲の形を背景に合わせます。
  8. 完成したら、もう一度複製し、上の雲を作ります。

f:id:dnjiro:20200204185328p:plain

 

8. 左下の家をトレス

  1. 左下の家をトレスしました。折れ線入力(下図e)を使って、家の向こう側の図形から入力していきます。
  2. 全部入力が完了したら、今度は手前の図形から順番に、塗り色(下図f)から「画面から色を選ぶ」を使って色をつけていきます。
  3. 完成したら家全部を選んで、登録パレットの「+」(下図g)をクリックしてパレットにまとめておきます。

f:id:dnjiro:20200204191620p:plain



9. 後ろの山をトレス

  1. 後ろの山をトレスしました。
  2. 入力が完了してから重なりを下にするボタン(下図h)を何回かクリックし、家よりも背後にしました。
  3. 下図は、登録パレットに登録したあと、ボタン(下図i)をクリックし「下と重ねる」設定して背景と重ねて見せています。

f:id:dnjiro:20200204193346p:plain

 

10. 後ろの髪、首、顎の下の影をトレス

f:id:dnjiro:20200204194444p:plain

 

11.服をトレス

  1. 服をトレスしました。
  2. 山が邪魔になるので、登録されたパレット(下図j)をクリックし「隠す」にして見えなくしました。

f:id:dnjiro:20200204195626p:plain

 

12.顔をトレス

  1. 顔をトレスしました。
  2. 邪魔になるパーツは、登録パレットから「隠す」設定して見えなくして作業します。
  3. 肌の色、髪の毛の下の影の色は画面から入力しました。

f:id:dnjiro:20200204200746p:plain

 

13.左目をトレス 

  1. 左目をトレスしました。
  2. 瞳は円ボタン(下図k)、眉毛は折れ線ボタン(下図l)で入力しました。
  3. 顔は、登録パレット(下図m)を「隠す」設定にして、見えなくしています。

f:id:dnjiro:20200204202232p:plain

 

14.左目を複製し、右目に形を合わせる

  1. 右目は左目を複製し、変形して作成しました。
  2. 画面から色を取得してつけました。

f:id:dnjiro:20200204202921p:plain

 

15.髪の毛をトレス、線の色を黒、または、なしに変更

  1. 髪の毛をトレスしました。
  2. トレス作業中、邪魔になるパーツは登録パレットで「隠す」設定にして作業しました。
  3. トレスした髪の毛は「+」ボタン(下図n)をクリックし登録パレットに登録しました。
  4. その後、各図形を選択し、線の色(下図o)をクリックし黒色にするか、線の種類(下図p)をクリックし「なし」に設定しました。
  5. 最後に登録パレットの設定をリセットするボタン(下図q)をクリックし、「隠す」設定を解除した状態が下図です、

f:id:dnjiro:20200204213002p:plain

 

16.背景の画像を次のキーフレームの画像と入れ替える

  1. 背景ページ(上図r)をクリックして背景に移動
  2. 画像をクリックして選んで、切り取りボタン(上図s)をクリック。画像が記憶ツールに移動します。
  3. 2ページ(上図t)をクリックして2ページに移動
  4. 取り出しボタン(上図u)をクリック。メニューから「ステージに戻す」をクリック。画像が2ページに戻ります。
  5. 3ページ(上図v)をクリックして3ページに移動
  6. 画像をクリックして選んで、切り取りボタン(上図s)をクリック。画像が記憶ツールに移動します。
  7. 背景ページ(上図r)をクリックして背景に移動
  8. 取り出しボタン(上図u)をクリック。メニューから「ステージに戻す」をクリック。3ページの画像が背景に入ります。
  9. 3ページ(上図v)をクリックして3ページに移動。背景が背後に見えます。

f:id:dnjiro:20200204220542p:plain



 

17.2ページのトレス画像を3ページにリンクコピー

  1. 2ページ(上図w)をクリックして移動。
  2. 編集メニュー>選択する>全て(スマホの場合は「編集メニュー>すべて選択」)。
  3. 次のページにリンクコピーするボタン(上図x)をクリック。これで2ページの図形が全て3ページにリンクコピーされます。リンクコピーされた図形は、変形したときに途中の形が自動補間されます。
  4. 3ページにコピーされた原画は不要なので、3ページの原画をクリックして選択し、削除ボタン(上図y)をクリック。これで、3ページに2ページの図形がコピーされ、下に背景の原画が見える状態になりました。
  5. 下図では、登録パレット(下図z)をクリックし、「下と重ねる」にチェックを入れています。

 

f:id:dnjiro:20200205064837p:plain

 

18.雲の形を原画に合わせて変形

  1. 雲以外の登録パレット(下図A)をクリックし、「隠す」にチェック。パレットが見えない場合「<>」ボタン(下図B)で表示させることができます。
  2. 雲の登録パレット(下図C)をクリックし「下と重ねる」にチェック。これで雲だけが原画と重なって見えます。
  3. 雲の登録パレット(下図C)をクリック。メニューから「選択する」をクリック。これで雲が選ばれます。
  4. 点選択ボタン(下図D)をクリック。雲の点が表示されるので、原画に合わせて変形していきます。
  5. 1点ずつ移動することもできますし、下図のように複数の点を選んで、選択枠の辺のハンドル(下図E)をドラッグしてまとめて引き伸ばすと効率よく変形することができます。

f:id:dnjiro:20200205072628p:plain

 

19.家を原画に合わせる

f:id:dnjiro:20200205075711p:plain

 

20.服、首、背景の山を原画に合わせる

f:id:dnjiro:20200205082045p:plain

 

21.顔を原画に合わせる

  1. 顔を原画に合わせます
  2. 拡大して、ていねいに点の位置を調整していきます。
  3. 点の一部を選んで、もう一度点選択ボタン(下図F)をクリックすれば、その点を含んだ図形の点だけ表示されるので、修正しやすくなります。
  4. 点の数がたらなくて形が合わせられない場合は、点追加ボタン(下図G)をクリックすれば点を追加できます。
  5. プレイボタン(下図H)を押して動きを確認しながら調整してください。2ページの原画を選んで、重なり順序を下げるボタン(下図I)をシフトキー(下図J)といっしょにクリックすれば、原画が一番下になり、2ページから3ページまでトレスした図形がなめらかに動きます。

f:id:dnjiro:20200205134958p:plain


22.3ページにあって、2ページにない雲を複製して作る

 

  1. 3ページの上の雲は、2ページにはなかったので、3ページの雲を複製してつくります(下図□△)。
  2. 追加する雲ができたら、選択ボタン(下図K)をクリックし、シフトボタン(下図L)をクリックし、2ページにもある雲(下図M)を左からドラッグして追加選択します。これで、新しく追加した雲と、2ページにリンクした雲の両方同時に選択した状態にします。
  3. 前のページにリンクコピーするボタン(下図N)をクリック。これで、新しく追加した雲がいっしょに選択した2ページにある雲に合わせた位置にコピーされます。

 

f:id:dnjiro:20200205152834p:plain



 

23.ここまでトレスした結果

ここまでトレスした結果は、以下のように2秒のアニメーションになります。0秒の原画をトレスし、2秒の原画にあわせて変形したわけですが、これで、2秒分、すなわち秒24コマなら48コマ分トレスしたことになります。

f:id:dnjiro:20200205142052g:plain

あとの作業のポイントをまとめると次のようになります。

  1. リンクコピー(上図O)を使ってトレスした図形を次の原画にコピーする
  2. 原画は背景ページに移動させる
  3. 登録パレットの「下と重ねる」「隠す」を有効に使う
  4. 画面を拡大し、背景にあわせて点を移動させる
  5. 図形の一部の点を選び、点選択ボタンをクリックすれば、その図形の点だけ表示されるので有効に使う
  6. 点が少なくて形が修正できないときは、点の追加を使う

 

今回説明していないテクニックもあげておきます。

  1. うまく補間できない場合、中間ページを作成して修正できます。
  2. 正確な回転、パスにそった動きは、アニメキャストを使います。
  3. 背景が動かない口パクは動きグラフをつかえば少ないコマで表現できます。
  4. 1つの図形が2つに別れるといった場合、0秒のページをいれて別の図形(リンクしていない図形)に切り替えます。

 

24.アニメGIF出力

  • ファイルメニュー>「アニメGIF出力」でアニメGIFが作成できます。
  • パソコン版の場合、最初に保存場所、ファイル名を指定します。デスクトップなど、わかりやすい場所に作成してください。
  • Androidの場合、完成したファイルは、端末内の「9VAe」フォルダの中に、指定した名前で出力されます。フォトアプリで、「端末内の写真>9VAe」で見ることができます。

 

25.9VAeきゅうべえでトレス動画を作る利点

9VAe上で原画をトレスするのはそれなりに時間がかかりますが、

  • 最初の絵のトレスには時間がかかるが、2枚目以降はコピーして変形するので手間がかからなくなる。
  • 後からいくらでも細かい修正ができる。
  • 完成した後で、秒間のコマ数、再生画面サイズを自由に調整できる。
  • トレスしたキャラクタに、新しい表情や新しい動きをつけるのが簡単。作成したアニメーションが次の素材として有効利用できる。
  • 次の表にあるように、いろんなフォーマットで動画クリップを出力できる。

といったメリットがあります。

 

9VAeをつかえば短い動画クリップがすぐ作れる 

  • 9VAeは各ソフトにあわせて、いろんなフォーマットでクリップ動画を出力できます。
アプリ クリップ形式 作り方
PowerPoint
LibreOffice
Keynote
アニメGIF 背景を透明にして出力
iMovie
PowerDirector
グリーンバック動画 先頭に背景ページをいれ、緑色の四角を入れる
AviUtl 連番PNG 背景を透明にして出力

 

  • もっと長いアニメや動画を作ることもできます。以下をご覧ください。

9VAeきゅうべえ:長いアニメを作る方法 - Qiita

 

 

9VAeきゅうべえに関する問い合わせ

 

プレゼン用動くイラストを9VAeきゅうべえで作る

プレゼンで使う動くイラストを自作してみましょう。9VAeきゅうべえアンドロイド版でもPC版iPad/iPhone版でもつくれます。

 

f:id:dnjiro:20200203141121g:plain

作成時間は5分程度です。他のアニメの作り方はこちらをご覧ください

 


プレゼン用動くイラストを9VAeきゅうべえで作る

 

■ 9VAeきゅうべえのダウンロード

LibreOffice のダウンロード

今回は、オープンソースのオフィスのプレゼンテーションソフト「LibreOffice Impress Windows版」と、9VAeを使います。

PowerPointKeynoteスマートフォンでも作れます。3から実行してください。

 

1. LibreOffice Impress で図形を描いてカットする

Windows版 の Impress と 9VAeきゅうべえは相性がよく、Impressで描いた図形をコピーし、9VAeで貼り付けすれば、図形を9VAeに取り込むことができます。下は Impressの編集画面です。

 

f:id:dnjiro:20200203090606p:plain

  1. Impress 挿入メニュー(上図A)>シェイプ>矢印>スプリット矢印をクリック
  2. 画面をドラッグ(下図B)して矢印をかく
  3. Impress 編集メニュー(下図C)>「切り取り」をクリック(または、Ctrl+X)。これで上向き矢印が切り取りされます。

f:id:dnjiro:20200203091627p:plain

 

2. 9VAeきゅうべえで、貼り付け

f:id:dnjiro:20200203092404p:plain

  1. 9VAeきゅうべえで「編集メニュー(上図D)>貼り付け」をクリック(または Ctrl+V)。これで上向き矢印が9VAeきゅうべえの中にはいります。

 

3.LibreOfficeでない場合、SVGイラストをダウンロード

 
  1. 以下のイラストを開く 。ダウンロードは「[↓] SVG FILE」ボタン

    Vector image of divergent symbol | FreeSVG

  2. スマホの場合「[↓] SVG FILE」ボタンを長押し。メニューから「リンクアドレスをコピー」をタッチ。9VAeきゅうべえのツールメニュー>「ネットからダウンロード」のあと、http:入力エリアを長押しして「貼り付け(ペースト)」。これで、上向き矢印のイラストが読み込まれます。その後、選択枠中心の「+」をタッチし「アニメを修正」をタッチしてください。
  3. パソコンの場合は「[↓] SVG FILE」ボタンを右ボタンでクリック。「対象をファイルに保存」または「リンク先のファイルをダウンロード」。9VAeきゅうべえメニューから「ファイル>開く」をクリック。ダウンロードしたファイルを選ぶ
これで、上向き矢印のイラストが読み込まれます。
 

4. 続きのページを作成

  1. ページの右側の「+」(上図E)をクリック。メニューから「続きのページを作る」
1ページの内容がコピーされ、2ページができます(下図)。どちらかのページを修正すればなめらかに動くアニメーションができます。

f:id:dnjiro:20200203144444p:plain


 

 

5. 矢印内部の点を表示し、矢印の頭の点を選んで右上に伸ばす

  1. 矢印をクリック(上図F)して選択。
  2. 点選択ボタン(上図G)をクリック。矢印の頂点△が上図のように表示されます。(△はとがった点です。曲線上の点があれば、□で表示されます。)
  3. 右上の矢印の頭だけを外からドラッグして選択(上図H)
  4. 選択枠をドラッグして矢印の頭を右上に移動します(下図I)(選択枠中心の「+」をドラッグしてもよいです)
  5. f:id:dnjiro:20200203094535p:plain

 

6. 1ページの矢印を左上に伸ばす、往復ボタンを入れ、0.5秒にする

  1. 1ページ(上図J)をクリックして1ページに移動
  2. 左側の矢印の先の点(下図K)を選び、右上にドラッグして伸ばしましょう
  3. 1ページの左肩の小さなボタン(下図L)をクリック。メニューから「往復」をクリック。(1ページに移動していないと「往復」は表示されません)
  4. 1ページの時間「1秒」(下図M)をクリック。メニューから「0.1病短くする」を何回かクリックしてページの時間を0.5秒にしましょう。
  5. プレイボタン(下図N)で動きをみてください。簡単にできたでしょう。停止は右側のストップボタンです。f:id:dnjiro:20200203095248p:plain

7. アニメーション全体のサイズ、位置調整

  1. 1ページのページ番号「1」(上図O)をクリック。メニューから「ページの指定ここから」をクリック
  2. 2ページのページ番号「2」(上図P)をクリック。メニューから「ページの指定ここまで」をクリック。これで2ページ全体が選ばれたことになり、まとめてサイズ、位置調整ができます。複数ページが選択されたとき選択枠は下図のように2重線になります。
  3. 選択枠の角のハンドル(下図Q)をドラッグしてサイズを縮小
  4. 選択枠の枠線(下図R)をドラッグして下に移動

    f:id:dnjiro:20200203112507p:plain





 

8. 1ページに文字を入れる

  1. 1ページ(上図S)をクリックして1ページに移動
  2. 文字入力ボタン「A」(上図T)をクリック。右側の矢印の上に「使わない」左側の矢印の上に「9VAeきゅうべえを使う」と入力してみましょう
  3. 入力したあと、選択枠の角(下図U)をドラッグして文字のサイズが調整できます。
  4. 選択枠の枠線(下図V)をドラッグ(または中心の「+」をドラッグ)すれば位置を調整できます。
  5. 文字にイフェクトをつけてみましょう。イフェクトをつけるボタン(下図W)をクリックしメニューから「縁をつける」、もう一度クリックし「ぶれをつける」効果をつけました。
  6. 縁の色はカラーパレットの色2(下図X)で設定できます。
  7. プレイボタン(下図Y)でどう動くか見てください。停止は右側のストップボタンです。

    f:id:dnjiro:20200203111736p:plain

 なお、1ページに「往復」命令がはいっているため、2ページに文字をいれても表示されない(2ページに進まない)点に注意してください。

 

9.アニメGIF出力

  • ファイルメニュー>「アニメGIF出力」でアニメGIFが作成できます。
  • パソコン版の場合、最初に保存場所、ファイル名を指定します。デスクトップなど、わかりやすい場所に作成してください。
  • 今回のアニメは「往復」命令があるため、再生時間が無制限となり、時間を自分で設定する必要があります。往復1秒なので、出力秒数は1秒にするとよいでしょう。
  • LibreOffice Impress などプレゼンソフトに入れる場合「背景を透明にする」にチェックを入れておきます。
  • Androidの場合、完成したファイルは、端末内の「9VAe」フォルダの中に、指定した名前で出力されます。フォトアプリで、「端末内の写真>9VAe」で見ることができます。

 

10.プレゼンソフトに、画像として入れる

作成したアニメGIFプレゼンソフトに画像(写真と同じ)として挿入します。再生すればアニメーションになります。

 

  1. LibreOffice Impress の「挿入メニュー(下図Z)>画像」をクリック。上で保存したアニメGIFファイルを選ぶ。

 

f:id:dnjiro:20200203124256p:plain

 

9VAeをつかえば短い動画クリップがすぐ作れる 

  • 9VAeきゅうべえを使えば、短い動画クリップがすぐ作れます。今回は、LibreOfficeのシェイプ図形を使いましたが、FreeSVG Openclipart など多くのSVGイラストサイトの素材を入力し、続きのページを作成して一部変形し、1ペジに「往復」命令をいれれば、動画になります。いろんな動画をつくってみてください。
  • 9VAeは各ソフトにあわせて、いろんなフォーマットでクリップ動画を出力できます。
アプリ クリップ形式 作り方
PowerPoint
LibreOffice
Keynote
アニメGIF 背景を透明にして出力
iMovie
PowerDirector
グリーンバック動画 先頭に背景ページをいれ、緑色の四角を入れる
AviUtl 連番PNG 背景を透明にして出力

 

  • もっと長いアニメや動画を作ることもできます。以下をご覧ください。

9VAeきゅうべえ:長いアニメを作る方法 - Qiita

 

 

9VAeきゅうべえに関する問い合わせ

 

【大阪工業大学】2020.1.27 梅キャンX勉強会【梅田キャンパス】の原稿

【大阪工業大学】第34回 梅キャンX勉強会【梅田キャンパス】 で LT やることになったので、その原稿

f:id:dnjiro:20200126121954p:plain

2つのデータ表現方法

方法 特徴
ビットマップ 絵をドットで表現する。拡大するとギザギザ(ぼける)。修正は消して描き直し
ベクトル 絵を図形(座標)で表現する。拡大してもきれい。簡単に修正できる。
  • 文字フォントは最初はドットフォント(16x16, 32x32.. ビットマップ)だったが、今はアウトラインフォント(ベクトル)になった。
  • 画像は両方残っている。Photoshop、GIF はビットマップ。イラストレータSVGはベクトル
  • 9VAeきゅうべえはベクトル方式

アニメーションフォーマットの比較・変遷

拡張子 方式 色数 マスク メモ
GIF ビットマップ 256色 2値マスク × パソコン通信用に開発。どこでも再生できる。256色でもきれい。ボタンを押さなくても再生する。古い規格だが手軽で使いやすく、生き残っている
shockwave ビットマップ フルカラー 半透明マスク 音〇 Web用技術としてMacromediaが提唱したが、途中で FutureSplashを買収し ベクトル方式Flashにのりかえた。
APNG ビットマップ フルカラー 半透明マスク × GIFの後継としてFirefoxが提唱。動くLINEスタンプが採用、Safariが採用したがiPhoneカメラロールでGIFは動くがAPNGはみえない
MP4 ビットマップ フルカラー マスクなし 音〇 動画フォーマットとして普及、スマホ、パソコンで再生できる。自動スタートしない 。音が出せるが最初音を消すようになった
Flash
(SWF)
ベクトル フルカラー 半透明マスク 音〇 動画、アニメ、ゲーム、なんでもできる。いったん世界制覇し、その後Adobeに買収されたが iPhoneで禁止され消滅。
SVG ベクトル フルカラー 半透明マスク 音△ Maromedia Flashに対抗し、Adobe中心に作られた標準規格。ベクトル静止画は普及。アニメ、ゲーム用仕様(SMILE)は、IE、EDGE以外で再生できるが、複雑すぎて非推奨。9VAeはSVG SMILで保存できる。
プログラム 両方 なんでもあり なんでもあり 音〇 ビットマップやSVGを使い、動きはプログラムで表現。Flashがなくなっていろんなライブラリが混在、わけわからん状態
EVA ベクトル フルカラー 半透明マスク 音〇 9VAeの基本フォーマット(今はSVGに移行中)データが小さくアニメ教室向け

アニメーションと絵画、音楽の比較

000a.gif

  • 絵画、音楽は、子供のころから作っている。大人で趣味にする人がおり、一部がプロになる。
  • アニメーションは子供から大人になるまで作らない。一部の人がプロになる

  • 子供から大人までアニメーションを作る人が少なすぎる。

  • 原因はアニメを作るのが手間がかかる、アニメを作る必然性がない、と考えられるが、今はどちらも間違い。

アニメーションと動画の違い

  • 動画を作りたい人は増えている。Youtube, Instagram, Twitter, Facebook...
  • 一般の人は、アニメーションと動画が区別できていない
項目 動画ソフト アニメーションソフト 描画ソフト
機能 複数の動画をつなぐ、合成、音を入れる、イフェクトをつける 動きをつける、キーフレーム補間、時間調整 絵を描く
有料ソフト
(プロ/一般)
Premiere AfterEffects, Animate(Flash), LIVE2D Photoshop, Illustrator, ClipStudio
無料ソフト
(一般)
iMovie(Mac/iPhone/iPad),
AviUtl(Windows)
9VAeきゅうべえ
AnimeEffects
ペイントブラシ
アイビスペイント
文字を動かす
吹き出しを動かす
キャラクタがしゃべる
  • 9VAe と AnimeEffects の違い、9VAeはベクトル、AnimeEffectsはビットマップのポリゴンメッシュ変形+関節アニメーション。
  • 絵が苦手な人がSVGイラストを動かしたい場合は、9VAeきゅうべえのほうが簡単。
  • 9VAeきゅうべえはネット上の100万点以上のフリーイラストを読み込んで使える。AnimeEffects は、Photoshop を使って絵のパーツ分けをする必要がある。

9VAeきゅうべえができること


9VAeで簡単動く年賀状作成「獅子舞」

  • 9VAeで筆者がつくったアニメ(実体TV)。これを作るのは楽しかった。

9VAeきゅうべえの無償モデル

事例

事例 内容 収益
LINEアニメーションスタンプを作って売る本 解説本 印税
Mr.PC 9VAeをDVDにいれて販売 雑誌代金
キッズプラザ大阪 アニメ制作コーナーを設置 入場料
プログラミング教室
お絵描き教室
学校の授業
アニメ制作カリキュラム追加 受講料、授業料
動くLINEスタンプ 9VAeでスタンプを作成して販売 スタンプ代金
ブログ
Youtube
9VAeの解説記事 アフィリエイト
・・・ ・・・ ・・・
  • 既存ビジネスに9VAeを追加すればアニメーションの要素が追加できる
  • アニメーション単独では購入動機がない(今までアニメを作ってない、誰も困っていない)が既存ビジネスの拡張なら利益が出せる。
  • 9VAe 側は、開発費を0円にすれば継続できる(外注しない、出張しない、むやみに拡張しない・・)
  • 9VAeきゅうべえを有料でも購入したい人が増えるまで、このモデルで続ける。

時間があれば、キジEVAの紹介

  • こちら(キジEVA)
  • アニメーションがパーツ化され、交換できるようになると、コンテンツが進歩する。初音ミク、Unity などでそれがみられる。

9VAeきゅうべえに関する問い合わせ