So-net無料ブログ作成
作成雑記 ブログトップ

再現のための構成 その3 [作成雑記]

■ボンクラーズA

 大阪、神楽、智の順で起き上がるカットです。それぞれを動画からトレスして作成しています。
智の顔は実線を何本か密集させることによって、目の下の荒れた感じを表現してあります。



■ボンクラーズB

 ボンクラーズダンスです。3人の体形が微妙に違うので、シンボルの使い回しをせずに全て
作画してあります(大阪よりも智の脚の方が太く、服の動きも違います)。やってもやっても
終わらなかったカットです。



■ボンクラーズC

 ボンクラーズダンスその2。キャラは左に影絵は右に移動するカットなので、影絵部分は独立
させてコマ単位で位置合わせをします。途中で影絵が拡大する部分はトゥイーンを使用。
各キャラの頭はシンボルの回転です。例によって影絵側は頭も合成して不要なポイントを
削っています。線を消すだけでもキャラ6人分のポイントが4人分位になります。



■ゆかり車:胎動

 3枚の絵だけなので簡単だったカットです。ここは処理も軽いので、特に多目のポイント使って
キャラの線を拾いました。疾走直前のゆかりの目は塗りと線によってシャープなシャドウの
感じを表現してあります(線の密集でここを表現するのは、流石に無理と判断しました)。にゃもの
目も同様の処理をしてあります。汗は白の実線を使ってライントレスを表現しました。



■ゆかり車:疾走

 BGは固定、車と背景の謎の物体を流すことで動かしています。謎の物体は切れ目の方を
メインで作って、切れ目が見えないコマでは全く動かしていません。車はゆかり・にゃも・
座席と影絵・ボンネットという構成になっています。




キャラ(シートベルト込み)の下に座席と内装の色を敷き、それらの上にボンネットを被せて
キャラの下端を隠します。これをまとめて車のシンボルとし、トゥイーンで左右に動かします。



■木村三連

 榊さん三連と同様に、ひとつのシンボルを縮小して使い回しています。木村のほほのグラデ
らしき部分は、極細線を何本か縦に引いて表現しました。



■水着

 止め絵になってる手前の三人は一枚絵で丁寧に線を拾います。木村のうねうねは動画から
ループになってる箇所を見つけて(16枚ループだったような気がします)その部分だけを製作、
それを拡大とループが綺麗に繋がるようにトゥイーンで調整しました。木村をムービークリップに
したのは特に意味はありません。その時はMCでないとダメだろうと単純に思っていただけ
なんですが、こうしておくとFlash5ではこの部分だけavi出力できなかったので、一応気分的な
プロテクトの意味合いもあります。多分最近のツールではこの辺もちゃんと変換できそうですが。



■父鳴動

 ゆかり寝で裏読みしたBGは飛翔用なので、その上に鳴動中のBGを載せて隠しておきます。
鳴動中の振動は「BG・父・煙・地面・テロップ付き丸」の重ね順でひとまとめにしたシンボルを、
トゥイーンで1コマずつ動画に合わせて動かして表現します。地面はアルファマスク付きPNGで、
テロップが吹っ飛んで見えてる部分等を合成して、繋ぎ目が分からないようにレタッチします。
鳴動用のBGも同様に揺れで見える部分をレタッチしておきます。

 父は全作画、煙は動画からループを割り出してその分だけ作成します。煙は塗りのみの
表現なので、実線を消しておきます。



■父飛翔

 発進の瞬間に鳴動用のBGを消し、地面の画像を発進用に差替えます。噴射炎の光の
グラデ表現は、グラデ用に作ったPNGの画像を複数用意し、動画の光具合に合わせて
拡縮等をさせます。噴射の瞬間に2コマだけ父がぼやけるので、実線の色を塗りに近く
する&影の塗り分け部分に軽くソフトエッジをかけてボケ味を表現しました。

 時々入る陽炎の表現は、絵自体をうねうね描くことによって軽く表現してあります。

これだけでは噴射炎の白丸が表現できないので、PNGグラデの上に白丸を重ねます。
高度が上がるに従い、煙の色が変わりますが、ひとまとめにした煙のシンボルを着色すると
重そうだったので、コマ毎に煙の色を塗り直してみました。同様に空気遠近法で色があせて
行く父の色も変えてあります。

 飛翔用のBGは、動画から必要な部分を抜き出して描き直したBGをスライドさせます。



■ちよすけ落下

 父に被さるようにちよすけが落下してきます。この絵は長い絵をスライドさせているのだと
思っていたのですが、いざ動画から抜き出した絵を合成すると…繋がりません。1コマずつ
動画として範囲内だけ描いていることが判明したので、同様に表現することにしました。
そうして作ってみたら、実は落下中に服や髪の毛が動いていたことにも気付きます。

 あずまんが大王はデジタル彩色ですから、スキャナの関係で長い紙をスキャンしないように
小分けに作画をしたのかも知れません。



■全員集合

 BG固定でキャラと影絵が縮小していくラストカットです。手間はかかるものの一枚絵なので
構成的には単純なカットになります。テロップの載る赤丸をちよすけ・かおりん・大阪・神楽が
担いでますが、動画でもかおりんとちよすけの左手が赤丸をちゃんと掴んでなかったので、
こちらでも再現しておきました。絵的に逃げ場が無いので処理が重いカットです。

 最後にテロップを消してリプレイボタンを付けようかとも思いましたが、いちいちボタンを押して
スタート画面に戻るのも面倒なので、フレームの最後でスタート画面に戻るようにしておきました。
これで全カット完成です。


nice!(0) 
共通テーマ:マンガ・アニメ(旧テーマ)

再現のための構成 その2 [作成雑記]

カット構成の続きです。



■ペンギンちよ

 動画では中央のちよすけは左右どちらかが切れているので、トレスの前に1枚絵に加工して
おきます。榊さんと神楽の影絵は、にゃも&ゆかりのカットと同じく独立して移動しているので、
(キャラとは移動スピードが違います)影絵の不要なポイントを削除して少しでも処理を軽く
しておきます。

 このカットは山車の次に重いカットなので、カメラがパンする際のテロップのフェード表現は
シンボルの着色やアルファ値の変化等を使わずに、動画からそのコマのテロップの色を
抽出してコマごとに塗り替えて「フェードしてるように」見せています。パンする際に影絵の
位置関係も変わるので、コマごとに影絵の位置を合わせてあります。



■バルーン移動

 単純な構成の割りにはテロップのポイント数が多くて(このカットでは画数が多い文字が
固まっています)、意外にコマ落ちするカットです。1コマ撮りで左から右へ移動するだけの
シンプルなカットだけにコマ落ちが目立つのだと思います。あまり意味はありませんが、
智と大阪には一応顔を作ってあります。



■どこまでもな

 羽ばたいてる髪はキャラとは独立して動いているので別に用意。キャラとその影絵を
まとめてトゥイーンで動かします(両キャラとも独立した動きで微妙に左に動いています)。
下に流れる山とその影は流れるスピードが違うので、それぞれを見える範囲だけ用意して
右に流します。削れる箇所がほとんどないので、このカットもコマ落ちしやすいカットです。

こんな感じで山も削ってます。



■ゆかり寝

 カットの冒頭に1秒ほど止め絵が入ってるので、その時間を利用してちよ父発進シーン用の
長いBGを裏読みしています。BGが長すぎて読み込みにどうしても時間がかかるので、
苦肉の策で一番止めが長いこのカットで裏読みして回避するようにしました。これ以前から
読むことも考えましたが、これ以前のカットは処理が重いカットが連続しているので、ここで
読むことに落ち着きました。BGをもっと分割して表示する方法もあるようですが、ここを作ってる
時はそこまで考えが至らなかったので強引に処理してあります。

 動画では教卓の天板とゆかりを1枚絵で描いているので、コマごとに天板がガタついていますが、
どうにもガタツキが汚かったので、天板は同じ絵をコピーしてゆかりと合成するようにしました。



■大阪三連~大阪寝

 一番最初に手を付けたカットだけに、後から見ると色々と無駄な部分が多くて、全体の作業が
進むごとに手が入ったカットです。後の方で大阪三連の2回目のみ1コマ分最初の絵が長いと
気付いたので、シンボルから独立させて作ってあります。

 大阪寝のカットでは文字は3枚ループ、ゆかりは上半身と口を別パーツにしてあります。ゆかりの
影絵は上半身の動きに合わせて動くので注意。



■榊さん三連

 動画のトレスで特に問題がないカットです。影絵はポイントを削った影絵用のシンボルを着色して
表現しています。この記事をまとめるまで、2回目の影絵の表示するタイミングを間違えてることに
気付きませんでした…迂闊です。



■かみねこ

 動画と同様に、腕込みでかみねこのループの絵を作り、キャラと壁の間に挟みます。最初は
腕の影絵は動いてなかったんですが、動いてないとイマイチだったので、腕用の影絵を必要な
サイズ分後で追加しました。

 本来のスタート画面はローディング画面のちよ父でしたが、見た目に動きが欲しかったので
このカットをムービークリップで動かすことにしました。余談ですが北米版のDVDではこのカットが
メニュー画面として登場します(北米版にはこれにちよ父が出たり入ったりしますが)。

肘の辺りに小さく見えてる青い部分が腕用の追加影です。



残りはその3で…


nice!(0) 
共通テーマ:マンガ・アニメ(旧テーマ)

再現のための構成 [作成雑記]

 元々大王のOPはBGがグラデーションで構成されているので、(ちよ父の発進シーンを除く)
ベクターデータとは相性が良いと言えます。ですが、ただ全てのコマをパストレスしただけでは
相当なマシンスペックがないとTVと同じコマ数で再生できるFlashにはなりません(パストレスの
精度や、不明瞭な部分を絵として描き直すと言う部分は便宜上考えずにおきます)。

 今作では「TV版と同等の画質&コマ数で再現(移植)する」のが外せないポイントだったので、
画質・コマ数を落とさずに見えない部分で処理の軽量化を計る「とんち」を多用してあります。
塵も積もれば山となる。たいした手法ではありませんが、各カット内の構成を記しておきますので、
写経に興味やご意見のある方は是非2~3カット挑戦してみて下さい。



■ちよすけ~智までの飛び→タイトル襲来

 6人が順に画面内に入ってくるカットです。榊さんまではコマのトレスで問題ありませんが、各
キャラの最後のコマは影絵だけが動いているので注意が必要です。智とタイトルとその影絵の
プライオリティにも注意。後半にBGのグラデーションが黄色から赤に変わるので、ベタで持った
BGとは別にグラデーションだけのシンボルを用意しておきます。その際にタイトルの影絵の
色も変わるので、こちらも独立させておく必要があります。各部の重ね順にも注意。

 智を弾き飛ばしたタイトルは画面内で変形をしつつ最後に中央に収まります。この変形には
パースがかかっているので(Flash5には自由変形がないので)、全てのコマを作画しました。

「THE ANIMATION」の文字が入って縮小開始。その後グラデとタイトルの影絵の色が変わります。
色の変化は、動画から変化に使ってるコマ数を求めて、トゥイーンで変化させています。
「THE ANIMATION」は動画と同じフォントがなかったので、それっぽいフォントから自作しました。



■にゃもとゆかり

 上下からにゃもとゆかりがインしてくるカットです。アニメのタイミングは同じですが、キャラと
影絵では移動スピードが違うのでそれぞれを独立させる必要があります。影絵部分は無駄な
ポイントを1個ずつ削除して処理の軽減を行います。

 キャラは回転する1コマ前に光源が変わるのでそれも拾います。回転中にキャラが切れてる
のが見えないように、キャラは長めに書き足しておきます(上:回転前 下:回転用)



■山車

 こちらは「作業状況」のカテゴリに細かい記入があるので、そちらを参考にして下さい。
智車が出てくる瞬間に非常に負荷がかかるので、ある程度キャラが出てくるまでは
手だけを置いてあります。



■よみ計り

 60~40までの目盛を作り、コマ単位で動画と位置合わせをします。動画ではよみの
影絵に色替えしきれていない実線が見えていますが、これを再現すると重すぎるので
実線は削除しました。キャラ・テロップ・目盛・影絵の重ね順に注意。

よみの影絵部分は、例によって見える部分だけ残してポイントを削っておきます。



■忠吉さん

 1回目と2回目では絵やBGが違います。頭のフォルムが綺麗に出るようにポイントの
微調整をFlash上でも行います。影絵が独立しているコマにも注意。



■智二連

 線の太い部分に注意。アップ時の眉毛は多少根元を太くしてあります。ほとんど見え
ませんが、2回目のBGの色が違います。



■かおりん

 キャラの移動と影絵の移動が独立していて、影絵だけが枠の中に入っています。
キャラから作った影絵のみをマスク内に置き、そのマスクをトゥイーンで移動させます。
キャラの顔はシンボルの回転です(影絵は顔も合成、不要なポイントを削除します)。

赤枠部分がマスク



長くなりそうなので、続きは次回に。


nice!(0) 
共通テーマ:マンガ・アニメ(旧テーマ)

Flash化の手順 [作成雑記]

暇を見つけて少しずつ作っている関係から、1~2ヶ月ぶりに作成に戻ると自分でも
効率的な手順を忘れている場合が多々あるので、メモ代わりに今回のFlash
コンバートの手順を記してみたいと思います。何かの役には立つかもです。



■素材とツールの用意:今回使用したツールは下記のものになります。
 ・aviutl(素材から画像を抜き出す。1コマごとの動きを調べる)
 ・レタッチツール(抜き出した画像を加工する)
 ・Illustrator9.0(パストレスに使用→swfファイルで書き出す)
 ・Flash5(彩色や要素の組み上げ等、最終的な仕上げ)



●aviutlで必要なコマを抜き出す

素材の動画をコマ送りで見ながら、どう言う要素でそのコマが構成されて
いるのかを調べます。大王OPの場合はグラデーションBGの上にキャラや
フキダシが乗り、その間にキャラの影絵のようなベタ塗りの絵が挟まる
形になっているので、キャラをパストレスして影絵はそれを元に作るように
します。

aviutlを使えば必要なコマをイメージとしてクリップボードにコピーできるので、
色々と便利です。WinDVD等のキャプチャーで取り込むこともできますが、
何故かアスペクト比が変わってたりするので、手持ちのaviファイルを素材に
使いました。素材の画質は良いに越したことは無いですが、線が拾えれば
良いので極端にブロックノイズが乗っていなければ何とかなります。
レタッチツールはフルカラーの物であれば何でも良いです。トレスする枚数が
多い場合はJpegで画像を保存します。



●レタッチツールで抜き出した画像を加工する

画像のサイズはFlash化する際の最終的なサイズに合わせておきます。
同じ絵のまま移動するキャラの位置合わせに利用するので、画像抽出の時点で
サイズを統一しておいた方が面倒がありません。大王の場合は640*480の
72dpiで統一してあります。



●Illustratorでパストレス→swfファイルで書き出す

Illustratorでパストレスします。ドロー系のソフトでFlashにデータを持っていける
ツールであれば何でも良いのですが、Illustratorが一番楽だったので線画の
トレスは全てIllustratorで済ませます。

画像の上に線画用レイヤーを作り、必要な線を0.25の黒線でトレスします。



線のトレスが完了したら、影の境界線を赤や紫等でトレスします。

線の色を変えておけば、その色の線だけを選択できるので修正や彩色時の線の
整理が楽になります。Flash上でもこの方法は便利なので、細かい線が重なってる
部分などはあらかじめ色分けした線で引いておくのも良い方法です。



時々線画だけの表示にして絵のニュアンスをチェックします。



ドローツールではパスを閉じないとその中に色を塗れないので、アニメ絵のように線が
複雑に重なっている絵をそのままトレスすると、見た目は線が繋がってるのにデータ上
ではパスが閉じていないと言う状況が多々発生することになります。色が塗れないと
彩色時に非常に困ることになるので、パストレスの時点で全ての線のパスが閉じる
ように線を引いておきます。

具体的には下図のように線が飛び出すように長目に引いておくと、Flashに持っていった
際に上手くパスが閉じるようです。後の修正が面倒に感じますが、この方法が一番
確実にパスを閉じることができます。



パストレスが完了したら「ファイル」→「データ書き出し」でswfファイルに書き出します。

「曲線の性質」の数値が高いほど、曲線の精度は上がりますが、その分ポイント数が
増えるので「7~8」にしておきます。通常は「7」で十分ですが、曲線で構成された
単純なフォルムなど、曲線が崩れると困る場合などは「8」を使うと良いでしょう。

※コンバートした際、曲線の精度が落ちるのはFlash上で設定したムービーの解像度が
関係しているようです。ムービーの解像度を高目に設定しておいて、最終的にサイズ
調整するかパブリッシュでサイズを指定してしまうのもひとつの手ではないかと思います。

※書き出しはトレスに使った画像レイヤーも含めて書き出します。こうするとFlashに
線画と画像の位置関係が保たれたまま読み込むことができます。



●Flash5で修正~彩色~仕上げ

Ctrl+Rで書き出したswfファイルを読み込みます。読み込んだ状態では下図のように
細かくグループ化されている状態なので、グループ化を解除して作業を進めます。



余計な線を「流し消しツール」で消します。



線修正が完了しました。



色を塗ります。「隙間を閉じない」にしておくと、細かい場所まで塗りが届いてくれる
ような気がします。影色から先に塗って、影のトレス線を逐次消して行くと後の作業が
楽になります。



彩色が完成しました。





影絵がキャラに同期してる場合は、キャラ絵を影絵レイヤーにコピーして余計なポイントを
削除した影絵を作成→キャラ絵の下にペーストして合成すれば、キャラに隠れてる部分は
全て消えるので簡単ですが、キャラ絵と影絵がそれぞれ独立して動いている場合は別の
絵として影絵を作成します。

一番楽なのはキャラ絵をシンボルかインスタンス化して、それを「効果」で影色に塗り替えて
しまう方法なのですが、それでは画面上に表示されるポイント数も倍になってしまうので
やたら重いFlashになってしまいます。「それでも良いや」で済ますのも手ですが、まともに
動かないFlashを作っても無意味なので、キャラで隠れて見えない部分は極力直線的に
処理してポイント数を減らすようにします。不要な線や見えない部分を削るとポイント数は
半分以下に押さえられるので、大幅に処理が軽くなります。これで1コマ完成です。





全てのコマが揃ったら、元の動画を見ながらコマ毎にタイミングや位置を合わせて1カット分
完成させます。以後、この繰り返しで全てのカットを作成していきます。


nice!(0) 
共通テーマ:マンガ・アニメ(旧テーマ)
作成雑記 ブログトップ

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。

×

この広告は1年以上新しい記事の更新がないブログに表示されております。