Web(JavaScript)版できました!!

背景

小林さんちのメイドラゴン面白いですよね。

fhánaのMVに惹かれて見始めましたがすぐにハマりました。

アニメの中で、特に僕が好きなシーンの一つが話数表示です。

ゆらゆら揺れたトールが炎を吐いて題名を表示させるというアイデアとゆるさに思わず感動してしまいました。

これは何かしらのGIFが出るだろうなと思ったのですが待ってられないので作りました。

使い方

このスクリプトはimagemagickが必要です。僕の環境はUbuntuだったので入っていましたが、入ってない方は適宜インストールしてください。

  1. GitHubのプロジェクトをcloneします。
  2. このような1280x720で背景が#9dc26dな(↓)画像を作り、プロジェクトルートにsource.pngとして置きます。GIMPなどでは、フレームの最後(frames/043.png)をレイヤーとして開くと位置調整がやりやすいです。 source.png
  3. ./convert.shを実行してしばらくするとmaidragon.gifができていると思います。 maidragon.gif

解説

まずは、大量の画像を処理するためのテンポラリフォルダを作成します。

こちらの記事丸パク参考にさせていただきました。

全てのフレームはトールとロゴ以外の部分が(大体)透明になっているので、source.pngの上に重ねたらいい感じになります。 … ①

例:最後のフレーム

043.png

このようにして全てのフレームを重ね、最後にgifに変換しているわけです。… ②

コードにするとこうなります。

for f in $(ls frames); do
  echo "converting ${f}..."
  convert ./source.png "./frames/${f}" -composite "${tempDir}/${f}" # ①
done

echo "building gif file..."
convert -layers optimize -delay 10 "${tempDir}/*.png" $output # ②

早速LGTMを作ってみました。

lgtm.gif