見出し画像

今年も年賀コンテンツ的なものを作ってみました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上では作りたいもの作って公開しがちですが、お仕事も真面目に頑張ってます。

あと去年何回も言ってますが、ちゃんとポートフォリを作り直して、営業活動をしようと思います。

今年もみなさまが役に立つ・楽しめるコンテンツを作っていけるよう精進いたします。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

サポートいただければ、レッドブルを飲んでより頑張れると思います。翼を授けてください。

ありがとうございます!あなたの「スキ」が力になります。
1

Takumi Hasegawa (unshift)

東京でフリーランスのdeveloperをやっています。 ポートフォリオがリニューアルしました → https://unshift.jp/ | Facebook Pageはこちら → https://fb.com/unshift.jp/
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。