フロントエンドデベロッパーの阿部です。

社内では主にコーポレートサイト等のWebサイトのフロント部分を担当しており、現在は動きや演出の方向に興味があり日々勉強しています。

今回は2D表現に特化したライブラリ『pixi.js』を触る機会があったので、そこで学んだいくつかのfilterについて紹介と簡単な実装の流れを書こうと思います。

pixi.jsに興味がでてきたら是非実際に触ってみてください！  

DisplacementFilter

このフィルターは歪み効果を与えます。

例えば、Webサイトでよく見るフェードイン、フェードアウトのスライダーにこのフィルターを適用するとまた違った感じが出せたりします。

filter素材画像の明暗によって歪みが変化するので、色々と試してみると面白いかもしれません。

簡単な実装の流れですが...

必要な画像をロードし、spriteをcontainerに配置、まずはそのままspriteをcanvasに表示させます。

この時に最初の１枚目以外はalpha:0で透過させておきます。filterをcontainerに対してかけ、歪みを0にしておきます。

あとは、普通にスライダーを実装するのと同じ感じで、一定時間ごとにスライダー画像であるspriteのalpha直を切り替えると良いでしょう。

同時にcontainerのfilter値を変化させる事で歪みfilterを活用した切り替えが表現出来ます。

TweenMax.to(displacementFilter.scale,1.5,{ 　x: 100, 　y: 100, 　ease: Expo.easeOut })

filterのscale値をTweenMax等で操作すると楽です。

また、マウス座標を取得しmousemoveメソッドと絡めることで、このような表現も可能になります。 ファーストビジュアルのロゴなどにかけると面白そうですね。  

ShockwaveFilter

このフィルターはその名の通り衝撃波の様な表現が実装できるフィルターです。(オフィシャルプラグインpixi-filtersを追加する必要があります。)

今回はclickした座標を中心として衝撃波が広がる様にしてみました。hover時のアニメーションにfilterを適用させてみたりとWebサイトでも活用できる場面がありそうです。

簡単な実装の流れは...

こちらもスライダー同様に必要画像をloadし、まずはcanvasに表示させます。spriteに対してclickしたタイミングでfilterを生成し適用している感じです。

また今回はtickerを用いてアニメーションさせます。(衝撃波を広げていくため。)

tickerではfilterのtime値を変化させています。

そしてclickした座標をfilterに渡してあげます。

let ticker = new PIXI.Ticker(); ticker.autoStart = false ticker.add(function(time){
    filter.time = filter.time >= 1 ? 0 : filter.time + 0.01; 
}) 

sprite.on("click",(event)=>{
    filter = new PIXI.filters.ShockwaveFilter([event.data.global.x,event.data.global.y],{
        time: 0, speed: 1000, amplitude: 4, wavelength: 200, brightness: 1.4, radius: 500     
    })
    sprite.filters = [filter]
    ticker.start(); 
}) 

OldFilmFilter

このフィルターは昔ながらの映像感を表現できるノイズをかけることが出来ます。似たフィルターにNoiseFilterがありますが、こちらはより設定できる値が多い強化版の様な印象を受けました。(pixi-filtersの追加が必要になります。)

画像やテキストに対してノイズをかけることでインパクトがある表現が可能になります。使い道が難しいですが、例えばWebサイトのオープニングビジュアルの雰囲気作りに用いたり、画像やテキストに軽くかけ目立たせる様な使い方でしょうか...。

まとめ

これら以外にもまだ多くのフィルターが用意されています。要望に合うフィルターがなければもちろん自作することも出来ます。

pixi.jsを学ぶにあたって、日本語の記事が少なかったり、古いバージョンで書かれていたりするので公式ドキュメントを頼りに学ぶと良いと思います。

また、海外のアワード を受賞しているようなサイトではpixi.jsはthree.js同様にそこそこ使われている印象を受けるので、実装したい表現に近い事をしているWebサイトのコードを覗いてみるのも勉強になりそうです。

阿部 裕太

関西出身のFront-end developer アニメーション/演出を考えるのが好き