動く漫画を作ろう

さて、ここまでの説明で『動く漫画』を実現するために必要な
基本的な知識はおおよそ整ったように思う。
ではではいよいよみなさんお待ちかね。
Foooスクリプトを使って実際に『動く漫画』を作ってみよう。

まず素材を用意しておく。

背景.png	コマ１.png	コマ２.png	コマ３.png

『動く漫画』は４つのステップで作っていく。
順に詳しく見ていこう。

STEP1: デーカーの作成

最初のステップは、デーカーの作成だ。
配置などは考えず、どばばーっと書き連ねてしまおう。

method Main()
{
  CreateImage(name="背景", image="背景.png");
  CreateFrame(name="コマ１", image="コマ１.png");
  CreateFrame(name="コマ２", image="コマ２.png");
  CreateFrame(name="コマ３", image="コマ３.png");
  CreateBalloon(name="台詞１", text="それにしても腹が減った");
  CreateBalloon(name="台詞２", text="クククク…");

  Enter(to="背景");
  Enter(to="コマ１");
  Enter(to="コマ２");
  Enter(to="コマ３");
  Enter(to="台詞１");
  Enter(to="台詞２");
}

ぐちゃぐちゃだが…配置を無視しているので当然である。

STEP2: 配置

次のステップは、配置の調整だ。
配置の調整は、x, y, tailパラメータなどにまず適当な値を入れて
実行してみては微調整を繰り返す地味な作業である。

method Main()
{
  CreateImage(name="背景", image="背景.png", x=0, y=0);
  CreateFrame(name="コマ１", image="コマ１.png", x=440, y=0);
  CreateFrame(name="コマ２", image="コマ２.png", x=780, y=65);
  CreateFrame(name="コマ３", image="コマ３.png", x=100, y=355);
  CreateBalloon(name="台詞１", text="それにしても腹が減った"
    , x=620, y=110, tail=-30);
  CreateBalloon(name="台詞２", text="クククク…", x=485, y=525, tail=160);

  Enter(to="背景");
  Enter(to="コマ１");
  Enter(to="コマ２");
  Enter(to="コマ３");
  Enter(to="台詞１");
  Enter(to="台詞２");
}

見た目が整った。

STEP3: 順序付け

第三のステップは、表示順の整理だ。
wait文を使って、Enterに時間差をつけていく。

method Main()
{
  CreateImage(name="背景", image="背景.png", x=0, y=0);
  CreateFrame(name="コマ１", image="コマ１.png", x=440, y=0);
  CreateFrame(name="コマ２", image="コマ２.png", x=780, y=65);
  CreateFrame(name="コマ３", image="コマ３.png", x=100, y=355);
  CreateBalloon(name="台詞１", text="それにしても腹が減った"
    , x=620, y=110, tail=-30);
  CreateBalloon(name="台詞２", text="クククク…", x=485, y=525, tail=160);

  Enter(to="背景");
  wait 1000;

  Enter(to="コマ１");
  wait 1000;

  Enter(to="コマ２");
  wait 1000;

  Enter(to="台詞１");
  wait 1500;

  Enter(to="コマ３");
  wait 1000;

  Enter(to="台詞２");
  wait 1000;
}

もうかなり漫画っぽくなってきた。

STEP4: 演出付け

第４のステップは、演出付けだ。
コマに動きをつけていく。

method Main()
{
  CreateImage(name="背景", image="背景.png", x=0, y=0);
  CreateFrame(name="コマ１", image="コマ１.png", x=440, y=0, alpha=0%);
  CreateFrame(name="コマ２", image="コマ２.png", x="OutRight", y=65);
  CreateFrame(name="コマ３", image="コマ３.png", x=407, y=505
    , ox="Center", oy="Middle", sx=0%, sy=0%);
  CreateBalloon(name="台詞１", text="それにしても腹が減った"
    , x=620, y=110, tail=-30);
  CreateBalloon(name="台詞２", text="クククク…", x=485, y=525, tail=160);

  Enter(to="背景");
  wait 1000;

  Enter(to="コマ１");
  Opaque(to="コマ１", time=1000, alpha=100%);
  wait 1000;

  Enter(to="コマ２");
  Move(to="コマ２", time=1000, x=780);
  wait 1000;

  Enter(to="台詞１");
  wait 1500;

  Enter(to="コマ３");
  Zoom(to="コマ３", time=1000, sx=100%, sy=100%);
  wait 1000;

  Enter(to="台詞２");
  wait 1000;
}

あちこち手を加えているが、何をしているのかは説明せずともだいたいわかるだろう。
ちなみにsx, sy, angle, alphaパラメータはCreate系命令でも指定することができる。

ひとまず完成だ！

まだまだかなり荒削りだが『動く漫画』を作る手順はざっとこんなかんじである。
随分面倒なんだな…と思っただろうか。
思ったより簡単だな…と思っただろうか。

こんにち、このような演出はFLASHやAfterEffectsのような
タイムラインをGUIに持つエディタを使って作成していくのが一般的だ。
そんな演出を全部スクリプトで構造的に書いてしまえるというのがFoooの面白い特徴だろう。