おおばログ

おっさんプログラマーのブログ。

角から生えるアイツ

この記事はラブライブ! Advent Calendar 2016 - Adventarの21日目の記事として公開されました。

f:id:tworks:20161220110726p:plain

★ TL;DR

  • ちょっとだけプログラミングの話
  • 愛おしいラブライブのキャラクターを身近に
  • プログラムを公開するから、あとはみんなでがんばれ

★ 私とラブライブ

ラブライブといえば、キャラ(アニメ・誌面)/音楽/声優さんの三位一体が成した素晴らしい作品です。私の場合は声優さんがキッカケで「南條さんが声優しているの!?」というところから入り、気づけば絵里推しとして大ハマリしていたのでした。じょるの尊い...。えりちふつくしい...。ちなみにAqoursは梨子が好きになりました。直前のスクフェスのイベント(梨子イベ)は60位に喰い込みました。愛の力ですね。f:id:tworks:20161220013938p:plain

★ 愛おしいキャラクターを身近に

さて、ラブライブを語るときに魅力的なキャラクターの話はつきものだと思います。そして私もそうですが「魅力的なキャラをもっと身近に!」という気持ちの方は、多かれ少なかれおられると思います。その手軽な方法の1つに、PCやスマホの壁紙設定があり、私は劇場版の特典色紙をスキャンしてPC壁紙にしていました。
f:id:tworks:20161219204145p:plain
えりちふつくs

★ 動かしたい?

こうして、PC壁紙のえりちを見るたびに癒されるわけですが、ある日思ったのです。
「これ、動かせないかな...?」
次の瞬間、隣でこんなことを言われた気がしました。
「やりたいからやってみる。本当にやりたい事って、そんな感じではじまるんやない?」
これはもうやるしかない。やるったらやる!

★ 作り方(レシピ)

材料
  • アニメーションのコマ画像を数点
    • 画像を綺麗に切り出すための熱いハートがあれば(最重要)
  • 透明なウィンドウ
実装
  • マウスカーソルの追従
  • 透明なウィンドウを表示(って見えないけど)
  • コマ画像をパラパラアニメの要領で透明なウィンドウに描画

★ 出来上がっていく様子

ここからはTwitterのPostで、カタチになっていく様子をご覧ください。

1.劇場版BDのエンディングシーンから素材を丁寧に切り出し、コマ画像を作っていきます。

2.試しに透明なウィンドウの上に、1コマ描画しました。この時点ではまだ動いていません。

3.アニメーション処理を入れてみました。それっぽく動いています。

4.マウスカーソルが左下に来たら、ピョコっと生えるようにしました。いい感じです。

5.アニメーション終了時にフェードアウト処理を入れつつ、アニメーション速度を調整しました。

作業時間はコマ画像切り抜き11時間/プログラミング1時間。そんな感じで出来上がっていくのでした。このアプリを常駐させておき、ふと疲れたときにマウスを左下にもっていくと...癒されるわけです(・8・)自分で作っておきながらですが、動くものを目の当たりにするとハァアァァルゥゥアァアショォォーーー!ホッコリしますね。

★ 下から生える

一度仕組みができてしまえば、アニメのコマの差し替え+アニメーション調整でバリエーションが増やせそうです。ということで早速...ヨーソロー!


★ そして駆け抜ける!

勘のよい方は気づかれたかもしれません。
「あなた絵里推しなのに、ここまで絵里要素ないじゃん!」
と。
「私だって、好きなことだけやって、それだけで何とかなるんだったらそうしたいわよ!!」
「ちょっと待って、別にやりたいなんて。大体、私がアプリになるなんておかしいでしょう?」
と言いたい衝動を抑えつつ、作成に入ります。


2期1話冒頭のシーンですね。こちらは透明なウィンドウを画面全体に表示し描画しています。ああ...えりちふつk

★ まとめ(主に開発者の方へ)

  • 「プログラムを公開してほしい」という声を各所からいただいてましたので、これを期に公開(OSS化)します。MITライセンスです。

github.com

  • 諸事情でコマ画像は公開していません。察してください。\ダレカタスケテー!/
  • 実装は動けばヨシの心でアニメーション処理はベタ書きです。気になる方はcloneするなりforkするなりして、カッチョよく実装してあげてください。pull reqを送っていただけると作者が泣いて喜びます。
  • 私の都合でいまのところmacOS版しかないです。Windows版は一度作りかけたのですが頓挫しています。以降の開発は https://twitter.com/od_10z に引き継ぎますので、リクエストは@od_10zへ出していただけるとスピリチュアルやね。

 →(12/22 Updated / Windows版もできたかも...githubからリポジトリ公開したら本Blogからもご連絡したいと思います)
  →できました。
tworks.hatenablog.jp


  • 「プログラムを公開されても俺には開発環境ないし...」という方は、開発できる身近な方を探してみてください(すみません)
  • 知人から「テクノロジーは変態によってこうなるのだ!」という名言を頂きました。み、ミトメラレナイワァ...

★ 最後に

本プログラムが少しでも皆様の癒しになれば幸いです。\ハラショー!/