iPad版:モーションマンガ

Webコミックとか電子コミック関連のニュースは、時々チェックしてます、自分の目に付いた範囲でですが。

最近読んだ記事の中で、モーションマンガという言葉を見つけました。何の記事だったか今調べてみたんですけど見つからなくて(Θ_Θ)ゞ。その記事を読んでいくと、手塚治虫マガジン倶楽部（月額会員制の手塚マンガ配信サービス）で、動くマンガとしてモーションマンガという言葉を使っていました。

ではモーションコミックという言葉はどうだろうかと調べてみると、こちらはけっこういろいろなところで使われてるようです。アメコミのマーベル（Marvel Comics）のMotion Comicsとか。

いいですよね、モーションマンガやモーションコミックというネーミングは、解りやすくて。

マルチメディア・コミックというとすぐにピンとこないし、インタラクティブ・コミックも堅苦しいし。

このブログでは、自分に最も適した表現スタイル、自分の持ち味を最も活かせる表現手法を模索してきました。その結果、現時点では、静止画・文字・アニメ・音声・サウンド・インタラクティブな仕掛けといった要素を駆使して描く電子コミックとして、自分の中でかなり固まってきています。

現在制作中のiPad版電子コミック【Wings ウイングス】には、これまで模索してきた表現手法を成果として結実させたいと頑張ってます。まあXcodeでObjective-Cという難しさはあるんですが。

近い将来、デジタルネイティブと呼ばれる子供達が育って、電子コミック作品をばんばん発表しだした時、私の作品をネットで発見して「あっ、おっさんがけっこう頑張って新しいマンガにトライしてんじゃん！」と言われるように（？）、頑張ってます。というか、いくらデジタルネイティブであろうとも、簡単には追いつき追い越せない高みにまで行ってやるぜ！と思ってます。

なぜか、書いてるうちに鼻息が荒くなってきてしまいましたε=(＾＾*)o。

さて、上の画像はWings4ページ目のネームです。主人公レナは、大空を飛翔中に何かのアクシデントで落下。そして意識が戻ったら見知らぬ独房らしき部屋にいた、というシーンです。

画像の上部にこちょこちょっとメモ書きがあります。

『あっ、背景という字が背影になってる！何てこった、後で直さねば！』

メモ書きにあるとおり、背景画像とその上のレナのアニメの間に、扉や格子窓、トイレやスツールといった部屋の備品の画像を、レナがきょろきょろと部屋を見回す動きに合わせてコマ割りで表示していきます。

このあたりの表現のしかたはいろいろ考えられますが、今回はシンプルに。

ネームも電子コミックに載せるコンテンツの一部なので、丁寧に描きました。

なぜ独房らしき部屋にいるのか、それはマンガの後半で明らかになります。

iPad版:スライダー設置

上の画像は、iPadシミュレーターで動作確認中の画面をキャプチャーしました。主人公レナが落下するシーンのズーム画像ですね。

眼を見開いて、顔面蒼白の図。本編のアニメでは髪が風に煽られてばさっばさっとなびきます。

髪の毛のおでこの辺りの生え際で苦労してしまいました。

レナのヘアーはDAZ3Dで購入したものを使うことにしたんですが、このように髪を風になびかせるときは、Poserのヘアルームでスタイリングします。新たにスキンヘッドにしてから植毛しなければなりません。

ひさびさのヘアスタイリングは、ぜんぜん髪型が決まらなくて5回くらいやり直して、やっと完成したのが上の画像。あまりかっこ良くないですよね。でも風になびいて動くので、これで良しとしましょう。

生え際辺りが、どうしても上手くできなくて最終的には産毛を上からかぶせる感じで何とか切り抜けました。

レナの画の下に何やら中央につまみのあるバーのようなものが見えます（丸いつまみを境に左が青いバー）。これが今回設置したスライダーです。

丸いつまみをドラッグすることでページを移動できます。

基本的には本当にシンプルな電子コミックにしたいので、ページの右端をタップしたら次ページに進み、左端をタップしたら1ページ前に戻る。そして最終ページやトップページなど一気にページを移動したいときは、このスライダーを使うというインタフェースです。

スライダーの設置のしかたは、iPad/iPhoneのプログラミング本をぱらぱらっとめくるとすぐにUISliderの項目が目に留まったので、書かれているとおりにコーディングしました。

『よし、問題なし！』と思いきや、iPadシミュレーターで動作チェックすると、つまみをドラッグするや否や瞬間的にページが移動してしまいます。例えば最終ページに移動しようとして、スライダーのつまみをグググッとドラッグ開始するとつまみに触れたとたんにページ移動してしまう感じ。

ズリズリッとドラッグしてぱっと指を離したところで、画面移動のメソッドを実行してほしいのになぜかうまくいきません。

実は、UISliderのcontinuousというプロパティのデフォルト値がYESになっているので、そのためつまみに触るや否やメソッドが送信されてページ移動してしまったんですね。この値をNOにすればOK。

このことになかなか気が付かなくて、ネットで調べたり本を読み返したりして（よく見ると本には書いてあったんですが、なぜか目に入らず）、えらく時間をロスしてしまったのでした。

『よし、でもこれでスライダーはOKだ！』と動作チェック。つまみをズリズリッとドラッグして、ぱっと離すとちゃんと目的のページに移動してくれました。

ところが今度は別の問題が発生。1ページ目に設置してあるスライダーを使って5ページ目に移動し、その1ページ前の4ページ目に移動しようとページの左端をタップすると1ページ目に戻ってしまいます。つまりスライダーを使ったページに戻ってしまうんですよね。

これはUINavigationControllerクラスのpopViewControllerAnimated:メソッドが画面遷移の履歴をさかのぼっているため、ということはすぐに分かりました。

というわけで、ページの左端をタップしたときは新たにその1ページ前のページを生成して表示することにしました。

これで1ページ前のページがしっかり表示されたんですが、ここでまたまた問題が発生。

ページめくりのアニメは画面がスライドするタイプの画面切替えアニメを使っています。

1ページ前に移動したいので、左から右にスライドして表示してほしいのに、右から左にスライドしながら表示されてしまうんですよね。

『でもこれは簡単になおせるよね...』と思ったんですが、そうはいきませんでした。

QuartzCore.frameworkのCATransitionにたどり着いてようやく左から右にスライドさせるまで、ずいぶん悪戦苦闘してしまいました。

亀の速度でじわじわ進んでいます。

iPad版:落下アニメ乗り切る

レナが落下する難しいアニメのシーンなんとか乗り切りました。

難しいアニメと書きましたが、XcodeでObjective-Cで作るのが難しいのであって、Flashで作るのであればそんなに難しくはありません。

そういえば【時空マジシャン】では、女忍者の寿々女が上空から落下するシーンがありました。あれはFlashでしたけど、寿々女の身体がゆらゆら揺れるムービークリップを作って、そのムービークリップが縮小しながらフェードアウトします。同時に寿々女の別の体勢のムービークリップがフェードイン。

ということを繰り返しながら落下アニメを作りました。それから寿々女の髪が強風にばさばさと煽られるアニメも、落下感を表現するために欠かせない効果でした。

Flashでは上記のようにムービークリップを入れ子にする作り方、つまり髪が煽られるアニメのムービークリップ、そのムービークリップごと身体が上下左右に揺れたり回転するムービークリップ、さらにそのムービークリップが縮小しながらフェードアウトするムービークリップ、という入れ子の構造で複雑な表現が可能でした。

Xcodeではその入れ子のような作り方を含めて、いろいろなアニメ表現のノウハウがまだぜんぜん蓄積できてません。なにしろ画像を配列にセットして、パラパラ漫画を作ったことと、[NSObject performSelector]というメソッドを使って表示タイミングを制御することがやっと出来るようになった状況なので。

そのような心もとない状況でどうやって今回の落下アニメを乗り切ったかというと、パラパラ漫画とperformSelectorで乗り切りました。出来ることでしのぐしかないので。

まずパタパタと羽ばたいているアニメをひとしきり表示した後、1秒間かけてフェードアウト。次の位置に別の姿勢（少し下から見上げる角度）で同じく羽ばたきアニメ。という具合にレナが上昇していきます。

かなり上空まで行ったところでアクシデントが起こり（カシューンンン...という効果音を鳴らす）、落下し始める。キリモミしたり風にあおられながら落下。これもパラパラ漫画で表現。

さてこれだけではあまりおもしろくないアニメです。そこで今回工夫したのは、前回のブログでも書いたようにモーションブラーを多用することです。

普通にレンダリングした落下画像の間にモーションブラーをかけた画像をはさんでスピード感を出したり、キリモミ落下では時計回り・反時計回りに回転させてレンダリング後、放射状のブラーをかけた画像を配列にセットして動かしました。

上の画像は、アニメで使ったブラー画像をマージして1つにまとめたものです。

モーションブラーを使うアニメは、【時空マジシャン】でもときどき使ってましたが、それほど頻度多くなかったと思います。手裏剣を投げるときとか。

でもこのiPad版電子コミックでは、多用することになりそうです。なにせFlashでアニメを作る自由度に比べ、Xcodeはまだぜんぜん使いこなせてないので、このモーションブラーはとても重要な戦力です。

たのんだぞ、モーションブラー！