モッパーの使い方

モッパーはブラウザ上で簡単にアニメーションを作成しGIFアニメにも書き出せるお絵かきツールです。

0.まえがき1.始めに2.基礎編3.応用編4.動画ファイルでPV作成

0.まえがき

0.1 MOPERブラウザーで動画を見る

 まずは、デモをご覧下さい。滑らかにキャラクターが動いていると思います。


画面1:MOPERブラウザ画面説明

さて、表示画面上の〔フレーム間補間表示〕を切り替えて〔非補間表示〕にして下さい。キャラクターはパラパラ漫画のようにしか動きません。間の動きはMOPERエンジンが自動で作り出しているのです。逆に、パラパラ漫画の労力で滑らかなアニメーションをどなたにでも作成してもらう事がMOPERの最終目標です。

0.2 MOPERで何ができるか

 スレッドメニューの〔MOPERで動画を描く〕で以下に解説をするMOPERエディタに入ることができます。MOPERエディタは、自分のPC上にデータをおいて、継続して作成作業ができる機能もそろっています。その使い方はいろいろな組み合わせがあります。

1.作成データをイラストブックの掲示板に置いておく。必要なときは再編集して、掲示板に再投稿する。尚、一つのデータには容量制限があります。
2.データを自分のPC(ローカル)に保存しておき、アニメーションをGIFアニメーション・JPEG連写で出力し、ニコ静さん、PIXIVさん、CLIPさんに投稿する。
3.データを自分のPC(ローカル)に保存しておき、アニメーションを連番png形式で出力し、AVIファイル等へ変換後、音をつけて再編集して、ニコ動さんやYoutubeさんに投稿する。



画面2:GIF出力


画面3:JPEG出力

 2枚の絵から数十枚の絵を作る魔法のような話しですが、コンピュータが自動でコマを割っているだけなので、製作者もコンピュータが仕事をしやすいように絵を描く必要があります。 早速、3分(フレーム総数5400枚)のフルフレームレートアニメーションに挑戦しましょう!

1.始めに

1.1 基本操作説明

 まずは、本文で使用する幾つかの用語を説明しましょう。



図1:MOPERエディット画面説明

 MOPERエディット画面は、絵を作成する描画エリア、絵を構成する曲線(オブジェクト)を編集する属性設定エリア、レイヤーの前後関係と時間軸上の動きを編集するスコアからなります。

●スコアの説明 スコア上のマス目に表示された小さな四角(プレーン)を選択して、描画エリア上にオブジェクトを描き、囲まれる領域を塗って動画を作成します。ここで、一つのプレーンは、重ね書きの層(レイヤ)とプレーン表示時刻(タイムライン)の2つで決められることに注意してください。 MOPERは、同じレイヤー上の異なる時刻に描かれた複数のプレーン(LLセット)上のオブジェクトの間を滑らかに自動で埋めて動かすツールと考えてください。また、同一時刻の複数のプレーン(TLセット)は常に同時に表示されます。



図2:スコア説明

●オブジェクト用基本ツールの説明 属性設定エリアと描画エリアの間にある縦一列のボタンについて説明します。

・〔アンドゥ|リドゥ〕すべての編集操作をキャンセルするキーです。
・〔ペン|選択|消去|コピー|ペースト〕プレーン上のオブジェクトを描いたり・消したり・コピペするためのプレーン編集用キーです。
・〔ハンド|ズームイン|ズームアウト〕オブジェクト編集の場合に描画エリアでの表示の仕方を変更するキーです。尚、これによってオブジェクトは影響されません。
・〔全移動|全拡大|全回転|全反射〕TLセット上の全てのオブジェクトを移動・拡大・回転・反射するためのTLセット編集用キーです。

 スコア下にある横一列のボタンについて説明します。

・〔作業領域クリア〕スコア左の空欄作業領域にTLセットを格納して処理できます。作業領域の中身を消去するキーです。
・〔先頭|再生|通常・振子〕スコア上に再生領域指定なしの場合、〔先頭〕+〔再生〕で頭から再生するキーです。通常は順方向、振子は順逆方向を反復します。
・〔追加|削除|複製|区切|参照|ラスター|全複製〕:一つのプレーンを追加・削除・複製するキーです。全複製は、TLセットの全てを複製するキーです。
・〔時間軸縮小|時間軸拡大〕スコアの時間方向を拡大・縮小して表示するキーです。

ここで説明のないキーに関しては、以降で説明を行います。では、早速、アニメーション

弾むボール
を作成してみましょう。

1.まず、スコア上の左上のプレーンAを〔選択〕し、〔ペン〕を押します。
2.属性設定エリアが開きますので、〔形状|直線〕を選び、描画エリア下方に地平線を描いて下さい。
3.〔ペン〕のまま、プレーンAの下のプレーンBを押し、属性設定エリアから〔形状|円〕を選んで、描画エリア上方にボールを描いて下さい。

この状況でスコアの下にある〔再生〕を押しても何もおきません。時間軸方向に伸びるLLセットを構成していないからです。そこで、

4.〔選択〕を選び、スコア上でプレーンBを選び、〔複製〕を押します。するとプレーンBの右にプレーンB2が現れます。
5.プレーンB2を選択し、描画エリア上の円を地平線に接するまで下げて下さい。

この状況で〔再生〕を押すとボールが上下するアニメーションができます。しかし、ボールが柔らかく弾んでいませんので、

6.プレーンB2を選び、〔複製〕を押します。するとプレーンBの右にプレーンB3が現れます。
7.プレーンB3を選び、〔全拡大〕を押します。描画エリア左上に現れる文字をY拡大にして、円を楕円に潰し、地平線に接するように移動してください。

この状況で〔再生〕を押すとボールが潰れて跳ね上がるシーンができます。よりリアルになるようにプレーンB2とB3を時間軸方向で離したり近づけたりして 再生時間を調整してみてください。



図3:基本操作説明

●オブジェクト属性の説明 次に上記のアニメーションに彩色と影づけの効果を与えて


弾むボール2

を作成してみましょう。オブジェクトには次のような属性が定義されています。

1.輪郭形状:直線・曲線・矩形・円
2.輪郭状態:ペン幅 0~64画素
2.領域状態:塗り有り・塗り無し
3.透過状態:α値 256段階
4.発色状態:RGB 各256段階
5.描画状態:描画順1プレーン 8段階
6.対応関係:特徴点
7.輪郭状態:順・逆方向

これらのオブジェクトの状態を定義する事で描画とアニメーションの質を変える事ができます。

1.B1の円を選択してください。次に属性設定エリアで好みの色や線の太さを選んでください。
2.終了したら〔パレットに登録〕を押してください。
3.B2とB3の円を選択し、登録されたパレットを押してください。B1と同じように属性が決定されます。

次に左上からスポットライトが当たっている雰囲気でボールの下方に影を描いて行きます。

4.〔ペン〕を選択してB1の円の下に影を描いて下さい。次に〔選択〕して半透明の黒い影になるように属性を決め、パレット登録。
5.ボールよりも影の描画順が右にある事を確認してください。描画順はプレーン内のサブレイヤーの番号となっています。
6.B2とB3にも同様の手順で影を描きます。このとき、B1~B3まで対応するボールと影の描画順は一貫して同じ事を確認してください。

最後に地面にボールの影を描いて行きます。

6.C1に円を描き、楕円へ変形し、属性を設定します。
7.C1を複製し、C2を作成します。ボールの落下点まで影を移動して下さい。
8.C2を複製し、C3を作成します。

ここで〔再生〕すると影がボールの上に来てしまいます。これは、CはBの上位のレイヤーだからです。

9.CのLLセットの先頭の●を押したまま、Bの●へ移動させてスワップする。

これで目標のアニメーションの完成です。



図4:属性選択エリアとLLセット移動

1.2 オブジェクトの作成と編集

●オブジェクト作成 MOPERエンジンでオブジェクトを動かすには、

同じLLセット上のプレーンにおいて同じ描画順のオブジェクトが存在する


必要があります。言い換えれば、ある曲線の未来の形や過去の形も描かれていなければアニメーションにはならないということです。

 仮に彩色したい場合は、オブジェクトを境界として線で囲む必要があります。例えば、髪の毛の場合、先から頭の境界までまとめて描く必要があります。 さらに線は滑らかで髪の先は鋭利に(これを尖点といいます)描くことは非常に難しいことですよね。下の図は描いた線を自動で滑らかにする〔補正〕機能を 使ってどのようにオブジェクトが変化するか示しています。やはり、線を滑らかにするほど尖点が丸くなってしまうわけです。



図5:前髪のオブジェクト


そこで〔結合ペン〕の利用をお勧めします。まず、〔結合ペン〕を選択し、属性設定エリアで〔補正〕を2か3にし、 滑らかな線で髪の輪郭を描いていきます。この時、尖点となるところは次の線とほんの少し交差させて"X"となるようにしてください。描く度に"X"の交点周辺の枝2本が切り取られ"V"になって結合されて行きます。 仮に書き損じた場合は、〔分離〕を選択し、不要な部分と残したい部分を切り離してください。次に、〔結合ペン〕の描画画面上の左上のモードで選択を選び、 残したいオブジェクトを指定して、選択を終了すると線の続きから描くことができます。



図6:前髪のオブジェクト


●オブジェクト編集 それでは先ほど描いた髪毛の次フレームを作成してみましょう。同一レイヤーに次のプレーンを〔追加〕し、 〔ペン〕を選択すると前のオブジェクトのゴーストが出るライトテーブルが始まります。後は、次のオブジェクトの動きをつけて線を引いて行きます。 このとき、新しいオブジェクトの交点は前のオブジェクトの交点と自明な対応関係がつくように線を引いて下さい。



図7:前髪のオブジェクト次フレーム


できあがったら〔結合〕して〔再生〕を押してみてください。もしも、交点の対応関係がおかしく動きが変なときは、下の図のようにオブジェクトを 選択して特徴点編集を選んでください。



図8:特徴点の編集


青で表示される点と緑で表示される円、2つのオブジェクト間でかならず対応する場所になっています。もし、この点の対応関係が おかしいときは描画エリア左上の〔特徴点クリア〕を押して、正しい対応関係の位置に緑の円を置いていってください。〔結合〕キーの下の〔分離〕を押すことで 結合されたオブジェクトを再分割することもできます。


2.基礎編

2.1 顔の表情を動かす

では、多くのオブジェクトを組み合わせたアニメーション

あいう

を製作しながら、さらにオブジェクトの描画と編集について説明しましょう。

●レイヤーの構成を決めながら基本フレームを作成する 一つ目のTLセットのレイヤー構成は以下の図のようになっています。



図9:顔の基本フレーム


プレーンA:後ろ髪(領域)<首(領域)
プレーンB:顔(領域)<鼻(領域)<口の下線(曲線)<口内(領域)<歯(領域)<唇(曲線)
プレーンC・D:白目(領域)<瞳1(領域)<瞳2(領域)<キラ(領域)<まつげ下(曲線)<まつげ上(領域)<まぶた影(領域)<眉毛(領域)
プレーンE:右髪(領域)<左髪(領域)<前髪影(領域)<前髪(領域)<ハイライト(領域)

上記の各プレーンにおいて”<”は、描画順の番号の大きさを示しています。つまり、若い番号ほど後方に描かれ隠蔽されるオブジェクトになります。 この性質を利用してプレーンBでは、後のTLセットで見える「口の中のオブジェクト」を唇のオブジェクトで隠蔽して描いてあります。



図10:口を開くための3つのオブジェクト


●基本フレームのTLセットを複写・参照する  次は、基本フレームのTLセットを複写して、2番目のTLセット作ってみましょう。まず、基本フレームのプレーンを選択し、〔全複写〕を押してください。 すると作業用窓にTLセットごと複写されます。作業窓の上にあるバーを押して、適当なスコア上の場所に移動してください。次に第2TLセットで、 口の形を描き換えます。さて、第3のTLセットでは、再び口を閉じますので基本フレームを複写します。ただし、後の編集作業で基本フレームを書き換えると、 複写したすべてのフレームも書き換え作業が必要となって大変です。そこで、一度、基本フレームのすべてのプレーンを〔参照〕して第3TLセットを作成しておきます。 以降、〔参照〕して作ったプレーンの情報は〔全複写〕で複製した場合も保持されます。逆に、〔参照〕の属性を解除したい場合は、〔作業領域消去〕の隣の 〔作業領域属性クリア〕を押して下さい。これを繰り返して3つのTLセットを用意して、間のプレーンの口の形を書き換えて下さい。〔再生〕すると口のアニメーションができます。



図11:TLセットの複写方法


2.2 エフェクトを利用する

●属性値フェイド

●オブジェクトループ

●強制変形


3.応用編


4.動画ファイルでPV作成

 音と同期するアニメーションが完成しましたら早速、PVを完成させましょう!

●連番PNG分割ツールの準備
1.http://www.illustbook.net/static_files/moper_div.zipからzipファイルをダウンロード
2.zipファイルを任意の場所に解凍

●連番PNGの書出し
1.画面右上の“書出”ボタンをクリック
2.書き出し設定が表示されるので任意に設定(フレームレートは30付近がオススメ)
3.“連番PNG書出”ボタンをクリック
4.エンコードが終了するまで待機
5.エンコードが終了したら現れる“ファイルに保存”ボタンをクリック
6.連番PNGツールと同じディレクトリにbinファイルを保存
 (例えば連番PNGツールのディレクトリをc:\moper_div,binファイルをout.binとします)
7.コマンドプロンプトを開きます
 (Windowsキー+Rでファイル名を指定して実行ダイアログを開き、名前にcmdとタイプし、OKをクリックします)
8.連番PNG分割ツールのディレクトリへ移動
 (例:cd c:\moper_divとタイプしてEnterする)
9.win_div.exe 入力ファイル名 出力ディレクトリ名 として実行
 (例:win_div.exe out.bin ./)
10.PNGファイルが出力されたことを確認

●動画エンコード(AviUtl)を使った場合
1.http://spring-fragrance.mints.ne.jp/aviutl/からファイルをダウンロードして解凍
2.AviUtlを起動し、ファイル-開くを実行
3.00000000.pngを選択し、ダイアログ下方の“fps変換無し”をMOPER書出しの時に設定したフレームレートに設定(たとえば30fps)
4.開くボタンをクリックすれば連番PNGの読み込みが行われる
5.ファイル-AVI出力を実行し、任意の名前をつけて保存すれば動画ファイルが生成が完了

※AviUtlの使い方詳細は他サイトをご覧ください。
ニコニコ動画用の設定であれば
・AviUtlを使ったMP4 (H.264) エンコード:http://nicowiki.com/aviutl_h264.html
・AviUtlを使ったVP6 2pass:http://nicowiki.com/ffmpeg_aviutl.html
が参考になります。