今年も年賀コンテンツ的なものを作ってみました2019
あけましておめでとうございます！今年も年賀コンテンツを作ってみました。
スマホの場合はタップ、PCの場合はキーを叩くと、どんどん文字が出てきますので、やってみてください。
そこはかとなくハリーポッター風です。なんで今ハリーポッターなのかは自分でもよくわかりませんが、作品内の魔法である「姿あらわし / 姿くらまし (Disapparition / Apparition)」のエフェクトが好きなので、作ってみただけです。昨年はファンタスティック・ビーストの2作目も公開されてましたし。
↑の1:46秒くらいのワープ？の魔法のエフェクトです。シュルシュルってなって出てきたり消えたりするような表現です。
使う人によっては表現が異なるみたいですが、わりとシュルシュルってなるやつが一般的(？)みたいです。
・・・
やったことをざっくりまとめると
・文字を3Dで表示
・文字を歪ませて高速で動かす
・ガラスのような屈折表現 (文字)
・ブルームエフェクト
・アンチエイリアス
・右上のinfoボタンをクリックした際の背景
本当はモーションブラーや空間を歪ませるようなエフェクト、煙などなど盛り込みたい要素があったんですが、処理負荷が限界でした。。(今でも結構重い)
文字の動きは、文字のモデルを3つに分身させつつ、引き伸ばしながら球状に(正確に言うと違うけど)ギュンギュン動かしているだけです。動きが早いのでいろいろごまかせてます。
アンチエイリアスは
こちらを使わせてもらっています。お手軽。
スペックの低い端末 (一定のフレームレートを下回った場合)では、ポストエフェクトをかけないような処理を入れていたりもします。(それでも重かったりもしますが。。)
ちなみに、debug consoleから
window.setNoEffectsMode();とするとエフェクトなしモードになり、さらに
window.setLowResMode();とすると、低解像度モードになります。確認用の機能です。
フォントは「ハリーポッター フォント」で検索したところ、以下のページが出てきました。
フリーのフォントを2種類 (Harry PとLumos) を使わせてもらっています。
背景の写真はこちらを青く、コントラスト強めに加工して使わせてもらっています。
ハリーポッターの舞台であるロンドンではなく、ヴロツワフというポーランドの都市の写真らしいんですが、青く加工したらそれっぽくなりました。
・・・
昨年、一昨年も年賀コンテンツを作っていたので貼ってみます。
2018年はゴッドレイ (後光がさすような表現)がやりたかっただけ。
2017年はWebVRがやりたかっただけです。
そして2019年はハリーポッターがやりたかっただけです。
・・・
そんなこんなでSNS上では作りたいもの作って公開しがちですが、お仕事も真面目に頑張ってます。
あと去年何回も言ってますが、ちゃんとポートフォリを作り直して、営業活動をしようと思います。
今年もみなさまが役に立つ・楽しめるコンテンツを作っていけるよう精進いたします。
サポートいただければ、レッドブルを飲んでより頑張れると思います。翼を授けてください。