バイリニア補間する

前回窓の中で画像が動くようにしたが、その時もともとの画像を使いまわして
拡大してスライドさせていたので、画像がちょっと汚くなってしまっていた。

画像を拡大するとこのように汚くなるのは、
画像を拡大表示する際のプログラム的な仕組みによるものだ。

画像を拡大した時の見た目は”補間方法”によって変わってくる。

Adobe Photoshopを使ったことがある人なら画像の解像度を変える際に
『ニアレストネイバー』『バイリニア』などの言葉を目にしたことがあるだろう。
それらは”補間方法”の名前だ。

『ニアレストネイバー』は単純な近似をとる方法で「補間なし」とも言われる。
非常に高速である反面、とても汚く拡大される。
『バイリニア』は線形補間をとる方法で、やや低速だが綺麗に拡大される。

Foooではこの『ニアレストネイバー』と『バイリニア』に対応しており、
どちらを使うかはデーカーごとに sampling パラメータで指定することができる。
何も指定しない場合は、『ニアレストネイバー』が使われる。
sampling パラメータには”Nearest”, “BieLinear”のいずれかを指定できる。
“BieLinear”を指定すると次のようになる。

それでは組み込んでみよう。

style 普通 { face="ＭＳ ゴシック", size=32 }
style 小 { size=24 }
style つぶやき { interval=100, speed=250, effect="Rise" }

method Main()
{
  CreateImage(name="背景", image="背景.png"
    , x=0, y=0);

  CreateWindow(name="窓"
    , x=440, y=0, w=405, h=720);
  CreateImage(name="窓/コマ１", image="コマ１.png"
    , x=222, y=324, ox="Center", oy="Middle", sx=110%, sy=110%
    , sampling="BieLinear");
  CreateFrame(name="コマ２", image="コマ２.png"
    , x="OutRight", y=65
    , outline_shape="Vivide", outline_color=white, outline_thick=8);
  CreateFrame(name="コマ３", image="コマ３.png"
    , x=407, y=505, ox="Center", oy="Middle", sx=0%, sy=0%
    , outline_shape="Vivide", outline_color=black, outline_thick=8);

  CreateBalloon(name="台詞１"
    , style="普通", text="それにしても...<BR>腹(はら)が減(へ)った"
    , x=585, y=65, shape="Dumpling", w=300, h=185, tail=-30);
  CreateBalloon(name="コマ３/台詞２"
    , style="小", text="<FONT style='つぶやき'>クククク…"
    , x=63, y=15, shape="Rock", w=220, h=125, tail=160);

  CreateColor(name="幕", color=white, w=1280, h=720, blend="Add");

  Enter(to="背景");
  Enter(to="窓");
  Enter(to="窓/コマ１");
  Enter(to="幕");
  wait 500;

  Move(to="窓/コマ１", time=1000, x=182, step="DecSin");
  Opaque(to="幕", time=1000, alpha=0%, step="DecSin");
  WaitDecor();

  Enter(to="コマ２");
  Move(to="コマ２", time=800, x=780, step="Dec3");
  WaitDecor();

  Enter(to="台詞１", effect="Bound");
  WaitDecor();

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

  Enter(to="コマ３/台詞２", effect="Expand");
  WaitDecor();
}

動画が小さいので拡大してなんとか差がわかるレベルかも…
バイリニア補間は綺麗だが、決して軽い処理ではないのでうまく使い分けるのが肝心だ。