この記事はラブライブ! Advent Calendar 2016 - Adventarの21日目の記事として公開されました。
★ TL;DR
- ちょっとだけプログラミングの話
- 愛おしいラブライブのキャラクターを身近に
- プログラムを公開するから、あとはみんなでがんばれ
★ 私とラブライブ
ラブライブといえば、キャラ(アニメ・誌面)/音楽/声優さんの三位一体が成した素晴らしい作品です。私の場合は声優さんがキッカケで「南條さんが声優しているの!?」というところから入り、気づけば絵里推しとして大ハマリしていたのでした。じょるの尊い...。えりちふつくしい...。ちなみにAqoursは梨子が好きになりました。直前のスクフェスのイベント(梨子イベ)は60位に喰い込みました。愛の力ですね。
★ 愛おしいキャラクターを身近に
さて、ライブライブを語るときに魅力的なキャラクターの話はつきものだと思います。そして私もそうですが「魅力的なキャラをもっと身近に!」という気持ちの方は、多かれ少なかれおられると思います。その手軽な方法の1つに、PCやスマホの壁紙設定があり、私は劇場版の特典色紙をスキャンしてPC壁紙にしていました。
えりちふつくs
★ 動かしたい?
こうして、PC壁紙のえりちを見るたびに癒されるわけですが、ある日思ったのです。
「これ、動かせないかな...?」
次の瞬間、隣でこんなことを言われた気がしました。
「やりたいからやってみる。本当にやりたい事って、そんな感じではじまるんやない?」
これはもうやるしかない。やるったらやる!
★ 作り方(レシピ)
材料
- アニメーションのコマ画像を数点
- 画像を綺麗に切り出すための熱いハートがあれば(最重要)
- 透明なウィンドウ
実装
- マウスカーソルの追従
- 透明なウィンドウを表示(って見えないけど)
- コマ画像をパラパラアニメの要領で透明なウィンドウに描画
★ 出来上がっていく様子
ここからはTwitterのPostで、カタチになっていく様子をご覧ください。
1.劇場版BDのエンディングシーンから素材を丁寧に切り出し、コマ画像を作っていきます。
@od_10z @icchu おでさんのための角から生えるアプリ、素材制作あと5コマです! pic.twitter.com/pvK8cfHigx
— らい場のおおば (@tworks) July 3, 2016
2.試しに透明なウィンドウの上に、1コマ描画しました。この時点ではまだ動いていません。
角から生えるやつを作り始めた pic.twitter.com/GK6hHi38tc
— らい場のおおば (@tworks) July 2, 2016
3.アニメーション処理を入れてみました。それっぽく動いています。
角から生えるやつ、少しずつ動かしてってる pic.twitter.com/sJpqFakEWU
— らい場のおおば (@tworks) July 3, 2016
4.マウスカーソルが左下に来たら、ピョコっと生えるようにしました。いい感じです。
角から生えるやつ、最初は完全に見えないようにした。(Windows API風に言うと)マウスをグローバルフックさせて、他のアプリがフロントにおっても生えるよーにした。 pic.twitter.com/GAIIdKz7S4
— らい場のおおば (@tworks) July 3, 2016
5.アニメーション終了時にフェードアウト処理を入れつつ、アニメーション速度を調整しました。
角から生えてくるやつ、滑らかに消えていくver. pic.twitter.com/1EockRHFLV
— らい場のおおば (@tworks) July 4, 2016
作業時間はコマ画像切り抜き11時間/プログラミング1時間。そんな感じで出来上がっていくのでした。このアプリを常駐させておき、ふと疲れたときにマウスを左下にもっていくと...癒されるわけです(・8・)自分で作っておきながらですが、動くものを目の当たりにするとハァアァァルゥゥアァアショォォーーー!ホッコリしますね。
★ 下から生える
一度仕組みができてしまえば、アニメのコマの差し替え+アニメーション調整でバリエーションが増やせそうです。ということで早速...ヨーソロー!
生えるヨーソロー! pic.twitter.com/osgM6RbbE7
— らい場のおおば (@tworks) July 7, 2016
★ そして駆け抜ける!
勘のよい方は気づかれたかもしれません。
「あなた絵里推しなのに、ここまで絵里要素ないじゃん!」
と。
「私だって、好きなことだけやって、それだけで何とかなるんだったらそうしたいわよ!!」
「ちょっと待って、別にやりたいなんて。大体、私がアプリになるなんておかしいでしょう?」
と言いたい衝動を抑えつつ、作成に入ります。
勢いでデスクトップを駆け抜けるエリーチカを作ってしまった...毎時0分になったら時報の代わりに起動するようにしよう pic.twitter.com/LIc9R2SFEn
— らい場のおおば (@tworks) July 10, 2016
2期1話冒頭のシーンですね。こちらは透明なウィンドウを画面全体に表示し描画しています。ああ...えりちふつk
★ まとめ(主に開発者の方へ)
- 「プログラムを公開してほしい」という声を各所からいただいてましたので、これを期に公開(OSS化)します。MITライセンスです。
- 諸事情でコマ画像は公開していません。察してください。\ダレカタスケテー!/
- 実装は動けばヨシの心でアニメーション処理はベタ書きです。気になる方はcloneするなりforkするなりして、カッチョよく実装してあげてください。pull reqを送っていただけると作者が泣いて喜びます。
- 私の都合でいまのところmacOS版しかないです。Windows版は一度作りかけたのですが頓挫しています。以降の開発は https://twitter.com/od_10z に引き継ぎますので、リクエストは@od_10zへ出していただけるとスピリチュアルやね。
- 「プログラムを公開されても俺には開発環境ないし...」という方は、開発できる身近な方を探してみてください(すみません)
- 知人から「テクノロジーは変態によってこうなるのだ!」という名言を頂きました。み、ミトメラレナイワァ...
★ 最後に
本プログラムが少しでも皆様の癒しになれば幸いです。\ハラショー!/