こんにちは、づやです。
気づいたら、PixiJS が v4 になってました。WebGL Filter なるものが追加されていたので、触ってみました。
Filterを触っていきます
インストールから
v4 自体が初めてなので、インストールからお作法に則って使ってみたいと思います。
インストールは npm 推奨なので、npm から。
npm install pixi.js※「 npm って何？」って人は、こちらを先に読まれた方がよいかと思います。
npm の基本操作と解説
※この記事に出てくるコードを、いろんなブラウザで動かすには Babel が必要になります。 ES6の概要と、最新ブラウザに対応させる「Babel」の使い方
「Babelとは一体……」という方は、こちらを見ていただければ。
れもん
BlurFilter
まず、BlurFilter から使ってみます。
その名のとおり、ブラーがかけれるんだと思います。
今回はこの画像を使います。
最初なので、お作法に則りつつ書いていきます。
// applicationを用意します
// 今回は画像サイズにあわせてます
const app = new PIXI.Application({
width : 600 ,
height : 546
});
// DOMにPixi用のcanvasタグを追加
document.body.appendChild(app.view);
// 画像を読み込んでロードを待つよ
PIXI.loader.add('image', 'assets/images/sample.jpg').load((loader, resources) => {
// ロード終わったらここの処理走るよ
// 作った画像をstageに追加するよ
const image = new PIXI.Sprite(resources.image.texture);
app.stage.addChild(image);
// ブラーフィルター作成
let filter = new PIXI.filters.BlurFilter();
// 画像にフィルターをかけるよ
// 複数かけれるので、1個でも配列で渡す必要あり
image.filters = [filter];
});こうすると、画像がこんな感じになります。
カンタンですね。
リファレンス を見ると、いろいろなメンバ変数を持っていますね。
例えば、コードを下記のように変更してみます。
// ブラーフィルター作成
let filter = new PIXI.filters.BlurFilter();
filter.blur = 50
// 画像にフィルターをかけるよ
image.filters = [filter];blur に 50 を設定するとこうなります。
ということは、この値をいじってあげたら動きをつけられる気がします。
だんだん 0 にしていってみると、こんな感じにでブラーがとけていきます。
（小数点 1 桁までの数字にしようね）
ZoomBlurFilter
次は ZoomBlurFilter にしてみました。
たぶんこれ新しいやつです。
pixi 本体と別に、pixi-filters というソースを読み込む必要があります。
npm ならカンタンです。
npm install pixi-filtersでざっくり書いたコードがこちら
※stage作ったりとかは割愛してます
let filter = new PIXI.filters.ZoomBlurFilter();
image.filters = [filter];これをかけると画像がこうなりますね。
疾走感が出ました。
リファレンスをみるとけっこういろんなパラーメータがありますね。コンストラクタでも渡せるのでちょっとためしてみましょう。
let strength = 0.5; // エフェクトの強さ
let center = [app.renderer.width / 2, app.renderer.height / 2]; // 中心をどこにおくか
let innerRadius = 1; // エフェクトの中心部分の半径
let radius = -1; // 全体の半径
let filter = new PIXI.filters.ZoomBlurFilter(strength, center, innerRadius, radius);
image.filters = [filter];こんな感じになりました。
またこれらはメンバ変数としても保持しているので、strength とかを動かしたら、アニメーションさせることができそうですね。
こんな感じです。
TwistFilter
長くなったので TwistFilter になります。
リファンス（※現在はサービスを終了しています。） を見ながらいじってみましょう。
let padding = 20;
let angle = 4;
let radius = 250;
let filter = new PIXI.filters.TwistFilter(radius, angle, padding);
filter.offset = [300 , 273];
image.filters = [filter];おお、渦ができましたね。
こいつもメンバ変数をいじってあげればアニメーションさせることが可能です。
終わりに
まだまだたくさんあるので、他のフィルターは次回移行紹介できたらと思います。
テクスチャ重ねる系を紹介できたらいいな。
関係ないですけど、今回使用させていただいた画像かわいい ですよね。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
