Memory Parade 制作記

2008.01.13 01:50

あけましておめでとうございます。Memory Parade公開から実に約2週間、やっと着手しました制作記です。「これなかなか真似できないだろうなー」と思う部分が多数あるのですが、網羅しようとすると文が散漫になる上、なにより疲れます。そこで、一つは本作品最大のポイント「合作の方法」、もう一つ「擬似3Dカメラワーク基礎」を取りあげてみたいと思います。電飾や夕日の色彩、フィルタの問題点とかも触れてみたいのは山々なんですけどね。

memory_parade_1.jpg

▲背景はぼかし+グロー内側フィルタをかけ、減算モードで描画。難しかった…。

ではまず合作の方法。ご存知のとおりこの作品はハルサンゴのこなさんとの合作です。あとがきにあるよう、connectsのような「パートわけ」でない形での合作にしようというのはほぼ最初から決まっていました。片方がベースを作って、それを発展させていく方法です。ちらほら「こなさんはキャラアニメだけ?」みたいな感想を目にするのですが、実は全く違います。それだけうまく調和できたと思う反面、ちょっとおこがましい気持ちもあり複雑なのですけども。

具体的な流れは、まず構成やカメラワークをなんとなく私が作りました。この時点ではラフ絵や説明書きがほとんどですが、あとで「シンボルの入れ替え」で全て済む様、タイミングとシンボル構成は気を遣いました。それが部分的に出来次第、絵的なデザインをこなさんにお願いしつつ、他のシーンの構成を作りのおおざっぱな繰り返しです。次にこなさんにはキャラアニメを描きこんでいただいてる間に、上がってきたデザインを動かします。時計台をまわしたり、草を揺らしたり、上からのアングルで街灯を作ってみたりという作業です。そして最後にちょっと色彩を「着色」などで調整します。なので、実は私は絵的なデザインを実はほとんどやってません。(雲と背景のビルくらいかな…。)

そして作品のメイン(?)でもある電飾は、全て最後の三日くらいで、互いに好き放題作ってスクロールさせた感じでした。見分けろというほうが無理なのですが、どっちが作ったのか考えながら見ても面白いかと思います。

memory_parade_2.jpg

▲途中swfより。「『ここ』の中身作ってください。」

memory_parade_3.jpg

▲絵はこなさんが一晩で描いてくれました。手描き16ページ。すごい。。

 つぎに擬似3Dカメラワークについて。Flashの3D表現なんてたかが知れていて、大抵「スクロール」「回転」「前後移動」のどれかです。Memory Paradeでは「スクロール」6割「回転」3割と言っていいほど、しかも等速で延々と行っているので非常にわかりやすいと思います。

まずもっとも基本となるのが「スクロール」。電飾が動いてるとこ全般に見られます。近くのものを早く、遠くの背景を遅くうごかすだけです。静止させる基準点が無限遠にあると言い換えても良いです。拡大縮小率と速度の比を一定に保つことだけ注意します。

 それをちょっと応用したのが「回転」。最初の時計台周りに一周するシーンに見られます。近くのものと背景と逆方向に動かすだけです。スクロールの基準点を手前に持ってくるとも言えます。つまり基準点は時計台と言えます。軌道の端で街灯やベンチが横を向く部分は見る人に脳内補完してもらいます。注意すべきなのは、時計台より奥に行けば行くほど、大きさは小さくなってもスピードが早くなる点です。街灯よりビルを速く移動しないと違和感がでます。

あと今回はほとんど出てこない「前後移動」。一番オススメの例が「“xync” concept movie」。例えば前移動を表したい場合、ものを等速で拡大するのではなく、徐々に拡大速度をあげていくことが重要です。大雑把にいうとイージングをインにします。

ここからちょっと難しいお話。つまるところ全て「回転」の三角関数と「前後」の指数関数の組み合わせです。先ほど「大雑把に」と言ったのは、Flashのイージングが三角関数の度合いになってるためです。もちろん厳密な数値計算なんてせず「それっぽく見えるか」を最重要視すべきだと思いますが、関数を意識すると調整の指針が立ちやすいです。特にオブジェクト数が多い場合は重宝します。

memory_parade_4.jpg

▲この辺で「回転」から「スクロール」へ徐々に切り替え。

「スクロール」6割「回転」3割と言いましたが、残りの1割は夜景のシーンです。横に「回転」しながら縦に「スクロール」しつつ、徐々に回転の軌道面を変えるという…。モーションガイドが張り巡らされてます。あのシーンには反省点も残ってます。

 最後にこんなものを表示テストしつつ終わりにしたいと思います。文字や「☆」みたいなのを一緒に「スクロール」させると楽しいと思います。

One Comment to “Memory Parade 制作記”

  1. YU:

    こなさんのブログもお邪魔しましたが大変興味深く拝見させていただきました。(形式ばった文章になってしまいますが。)
    やっぱすげえの作る人は違うなあ( -∀-)ノ
    ちょっと話はそれますが紅白FLASH合戦をブログで紹介してみたところ「Memory Parade」が一番人気でしたよ♪
    (まだみんなの評価は集まってないけどこのままいけば)
    いつもながらyama_koさんのカメラワークには脱帽です。
    こなさんの世界観もいいですよね。
    STARTに通ずるものがありますねえ。

    しかしいい勉強になった( ´=ิ益=ิ`)yぷはー