iPad版:四コマ完成

iPad版四コマ漫画【動物使い 寿々女の憂鬱】、四苦八苦しながら何とか作りました。iPadシミュレーターでの動作確認までです。

このブログ初めての人のためにちょっと説明すると、webcomic【時空マジシャン】のiPad版を作ろうとしていまして、その練習作としての四コマ漫画です。

そして作りたいのは静止画の四コマではなく、アニメーションや音声・サウンド・インタラクティブな仕掛けなどで織り成すデジタルならではの電子コミックです。といっても今回は練習作なのでそんなに複雑なことはしていません、というかやりたくてもできませんけど。

まず背景（コマの後ろの余白部分）にモスグリーンのグラデを描きました。これは森の中で寿々女が樹の根元に寄りかかっているというシーンなのでモスグリーンです。

シーンに合わせてこの背景というか余白部分を青空のイメージにしたり、登場人物の心象風景のイメージにしたりするのはおもしろいかもしれませんね。コマの中がメインなのであまりうるさくなると逆効果ですが。

次に一コマ目を描画して、さらに0.5秒おくれて最初のふきだしを表示しました。そしてその台詞の音声を再生。

音声が終わるころに、寿々女がぱちりと片目を開けて「う～ん...そういわれてもなぁ」と口パクで話し出します。

寿々女の音声が終わるタイミングに合わせて二コマ目を表示。

という具合に頭からがりがり作り込んでいきました。

そういえばふきだしの位置を調節するときに、iPadシミュレーターが小さくて見にくかったので調べてみたら、これデフォルトでは50％表示なんですね。

ウインドウ → 表示 → 100％を選んだらドカンとでかくなりました。知らんかった。

前回のブログでもちょっと書きましたが、NSTimerクラスとNSObjectクラスのperformSelectorで表示のタイミングを調節しました。コマやふきだしの表示ではperformSelectorが使い勝手が良いようです。

NSTimerは定期的に画像を変更しながら動き続けるコマや、キャラクターに一定時間ごとにメソッドを実行して何かやらせるような場合に適してますね。

performSelectorで一回メソッドを実行しておいて、animationRepeatCountでずっとアニメーションをやり続けるという方法もあるので、もっといろいろ作っているうちに自分にとってベストな使い方が判ると思います。

Xcodeでマンガを描く習作用に用意したこの四コマ漫画ですが、あまり適してなかったようです。寿々女の顔のアップばかりなので作りやすいはずだったのに、画像制作にめちゃくちゃ時間がかかってしまって。

時空マジシャンのChapter.1と2では、寿々女は「森の女王寿々女様をなめんなよー!!」みたいな表情ばかりだったので、今回の表情を作るためにレンダリングしてポストワークをばしばしやってるうちにXcodeでコーディングする時間が大幅に削られてしまいました。

でも作りながら『なんか無理があるよな...』とか『きっとどっかで壁にぶち当たるのでは...』などと思いながら進めましたが、何とか最後まで到達できたことで一歩も二歩も前進したような気がします。

とはいえ現在私の頭の中ではいくつか気になっていることもあります。

一番気になっているのはオープニングムービー。

さてどうしたものか。

iPad版:四コマ途中経過

今日はiPad版電子コミック制作日記です。前回お見せした四コマ漫画のネームをiPad上で動く完成版にすべく、Xcodeを起ち上げていろいろいじってみました。

NSTimerで定期的にメソッドを実行して表示させてみたり、NSObjectクラスのperformSelectorで指定時間後に1回だけ画像を動かしてみたりと、最も自分で使いやすいやり方を試しているところです。

Flashで【時空マジシャン】を作っているときもそうなんですが、コーディングばかりしているとマンガを描いている気がしないので、Flashの場合はなるべくタイムラインでコマや画像表示を制御して必要に応じてコーディングするようにしています。

アニメ用の画像を数枚用意してタイムラインに配置、プレビューで動作確認をします。当然キャラが動くわけですけど、Flashの場合『やった!動いた!』と大喜びしませんよね、動くのが当たり前なので。もちろん初めてFlashをインストールしたばかりのころは嬉しかったですけど。

XcodeでObjective-C言語で赤字のエラーをいっぱい出しながら、ようやくまともに表示されると『よかった、嬉しい...でも疲れた』という感じ、まだまだそういう段階です。

動くのが当たり前のFlashだと、もっと滑らかに動かないか、より効果的な表現ができないか、ということを考えながら作るわけです。一方無事動いたことを喜んでいる状況のXcodeの場合、もっと上級表現をめざそうという考えがまだうかびません。

そういえば1コマ目の画像を表示して、一瞬間をおいてふきだしを1コマ目の画像にかぶせるようにフェードインで表示します。そのときにふきだしを正確な位置に置くために何度も座標の数値を入れなおしてしまいました。

これはたぶんInterface Builderを使えば簡単に正しい位置に置けるんでしょうけど、今のところまだXcodeだけでやってます。

というのは最初はInterface BuilderとXcodeの両方を使ってサンプルプログラムをいくつか試してみたんですが、どうも解りにくいんですよね。自分でこのように動かしたいと思っても、Interface Builderがからんでいるとやり方が解りにくかったもので。

そんなわけでとりあえずXcodeである程度やりたいことが出来るようになってから、Interface Builderを併用する予定。

ひとしきりXcodeをいじって疲れたので、次は画像作成に移りました。

四コマ漫画で顔のアップばかりなので、バストアップくらいの画像を作るつもりでした。ところがいったん取り掛かると楽しくなっちゃって細部まで作り込んでしまいました。上の画像です。

これは3コマ目ですね。寿々女ににじり寄る狼ジローの図。

寿々女が身に着けている水着のようなものは、当初は虎柄か豹柄をイメージしてました。でも考えてみると日本には虎も豹もいないので、金色の狼の毛皮にすることに。

寿々女の親は動物使いの後を継がせるために、寿々女を厳しく育てたのでした。涙を流す寿々女をペロペロ舐めて癒してくれたのは、母性本能ゆたかな一匹のメス狼。彼女はまばゆいばかりの金色の毛皮の持ち主であった。

彼女が死んだ後もその毛皮を身に着けている寿々女なのでした(ＴεＴ；)。

さて次回は何とか四コマ漫画を完成させて、iPad版の目処をつけたいものです。

iPad版:四コマ漫画ネーム

昨夜はiPad版の制作を進めました。進めたといっても本編の制作にとりかかったわけではなく、まだ準備段階をうろうろしている状況ですけど(ノ_-。)...

前回は一コマ漫画代わりの【福笑い】をXcodeで何とか作ることができたので、今回は四コマ漫画に挑戦。

いままで作った【時空マジシャン】の中から1ページ選んで、それをXcodeで作ってみようかとも思ったのですが、いつも同じ素材ばかりでちょっと飽きたので、今回は新たな四コマ漫画を作ることにしました。上のネームがそれです。

スタンドアローンの四コマ漫画ではなく、【時空マジシャン】ありきの四コマです。コミックスのカバー折り返し部分とかにちょこっとラフな四コマ漫画が描かれていたりしますよね。そんな感じで描いてみました。

題して【動物使い寿々女の憂鬱】。

伊賀隠れ里の住人であり動物使いの寿々女は、森の動物達を統べる女王であります。そんな寿々女もお年頃。フェロモンを発散しているのでしょうか、言い寄ってくる男というか雄も多いのでありました。

そんな動物達の中でも特に女王の夫の座をしつこくねらっているのが狼のジロー。今日も積極的に寿々女にアタックするジローであった。

それにしてもストーリーマンガのキャラで四コマを描くのは難しいですよね。コマが小さいので、キャラが2頭身～4頭身のちびキャラだと描きやすいし可愛いんですが、私の場合最終的には3DCGで完成させるのでネームだけちびキャラにしてもしょうがないし。

『えーい、顔のどアップでうめつくしちまえー!』というわけでこうなりました♪(*￣ω￣)v。

さあ問題はこれをいかにXcodeで電子コミックにするか。

Flashだと各コマをタイムラインに配置して、ふきだしの音声が終了したら次のコマを表示、というように作っていきます。

XcodeではNSTimerで表示秒数やタイミングを制御しなくてはなりません。コマの表示だけなら難しくないと思いますが、コマの中で動くアニメが複雑に絡み合ったり、アニメをランダムに変化させたりするときのタイミングの制御は簡単ではないでしょうきっと。

FlashではMovieClipを入れ子にして、かなり複雑な表現もあまり手間をかけずに出来たので、いつも作りながらFlashのすばらしさを実感していました。

Xcode、つまりObjective-CではNSTimerをいかに自由自在に使いこなせるかがキーになると思います。他にやり方があるのであればいいんですが、今のところ知りませんし思い浮かびません。

Flashはもともとアニメ制作ツールです。ですからそれと同等のことをやろうとするのはそもそも無理があるかもしれません。

でもある程度自分のイメージが表現ができないことには、iPad版電子コミックを作る意味がないので、『こんな簡単なこともこんなに手間がかかるのかΣ(￣□￣；)ショック...だめだこりゃ』という状況は避けたいところ。

などと書いているとまたまたPackager for iPhoneのことがむくむくと頭に湧き上がってくるんですが...

とにかくトライしてみます。

【時空マジシャン】OPムービーcut11の3

ブログの更新はwebcomic制作のペースメーカーになるので、もっと頻繁に更新したいところです。

私の場合、ブログの間隔が空いてしまうときは大体いつも同じタイミングなんですよね。それはネームや画コンテのときではなく、オーサリングのときが多いようです。

ここまで制作して一区切り着いたらブログを書こう、と思いつつ頑張ってオーサリングします。でも頭の中でざっくりと想定した通り順調にいくことは稀で、ほとんどの場合は何度もやり直したり作戦変更することになってしまいます。

頭に想い描いたような画にならなかったり、アニメが上手くつながらなかったり。また効果音や音楽が『このシーンではあの素材集のあの音がぴったりだよね』と思っていたにもかかわらず、実際にそのシーンで流してみたらぜんぜん雰囲気が違った...などということがしょっちゅうです。

まあでもこれはチームでコンテンツやアプリを開発するときにも避けては通れないことで、打ち合わせの段階で画コンテや画面遷移図を見ながら「ではそういうことで...」と決めたにもかかわらず、プログラマーがグラフィックデザイナーのところへ来て「この画をちょっと変えてほしいんですが」とか「打ち合わせと違うじゃん」みたいな。

でもこれは仕様がないんですね。【時空マジシャン】の画とオーサリングは私一人でやってます。自分の頭の中でも画像制作とオーサリングの打ち合わせをやってるわけですけど、その通りにならないので(＾＾；)...いわんや複数人では。

さて上の画は、市場のあんちゃんが占い師のタロットカードを勝手にめくったところです。すると表れたカードは何と!

先ほど書いたように、カードをめくる場面で使う音は『あれにしよう』と頭の中で決めていたサウンドがありました。『怪しげな雰囲気と微かな緊張感を併せ持ったサウンドがあったはず...』とライセンスフリーのサウンド集やネット上で見つけた「自由にお使いください」と書いてあるループサウンドをいろいろ探したんですが、見つかりません。

『う～む、勘違いだったか?』と思ったら出てきました。大昔に購入したCD-ROMの音素材をひっくり返したところようやく発見。

今回は予想と違って雰囲気が合わないなどということはなく、このシーンにぴったり。

ところが今度はループがうまくつながりません。サウンド・エディターを起ち上げて音の波形データを切ったり貼ったり、フェードアウトしたりいろいろ弄った結果なんとかつなぎ目を目立たなくできました。

カードをめくるアニメの画像も実際にオーサリングの段階で角度がけっこう難しくて何度もレンダリングし直し、結果的に予想以上に時間がかかってしまいました。

考えてみると、一見簡単そうなシーンで予想外に手こずる場合が多いような。反対に非常に大変そうに見えるシーンが意外にあっさりと出来てしまったり...というようなことをけっこう経験してきている気がします。

今度から『おっ、簡単に出来そう』と思ったときは『いや、実は難しいんだよね』と思うようにしましょう(￣ω￣)。