Help us understand the problem. What is going on with this article?

小林さんちのメイドラゴンの話数表示ジェネレータを作った

More than 3 years have passed since last update.

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

ygkn
JSer。 WriterLighter ( http://writerlighter.github.io/ )という小説用のテキストエディタを作っています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away