PixiJSでフィルター機能を使用して画像の色を変化させる方法【JavaScript】

SHARE

今回はJavaScriptの2D描画ライブラリである「PixiJS」のFiltersを使用して画像の色を変更させる機能を実装したソースコードを公開いたします。

PixiJSの特徴として「高速」「どのデバイスにも対応」「無料で使用できる」などが挙げられます。アニメーションライブラリGSAPと組み合わせることで魅力的なサイトを実装することも可能です。

1.実装イメージ

実装イメージは以下の通りです。
元々白色で塗りつぶされたの画像ですがカラーコードを変更することで画像の色を変更することが可能です。

コピペしてすぐに実務で実装できるようにしております。
注意点としては予め、CDNや公式サイトからプラグインをダウンロードしておきましょう。

PixiJSのCDNはコチラ

必要なファイルは『pixi.js』『pixi-filters.js』の2つです

2.HTML

HTMLはコチラの通りになっています。’mycanvas’というid属性を付与したdivタグ一行のみで問題ありません。非常にシンプルですね

<body>
  <div id="mycanvas"></div>
  <script src="https://pixijs.download/release/pixi.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/pixi-filters@latest/dist/pixi-filters.js"></script>
  <script src="./script.js"></script>
</body>

3.CSS

次にCSSです。こちらも特に変わったスタイルを当てる必要はありません。

html{
	padding:0;
	margin:0;
	overflow: hidden;
	}

body{
	padding:0;
	margin:0;
	font-family: sans-serif;
}

4.JavaScript

最後にJavaScriptです。こちらでcanvasタグを生成しそこに画像の位置や色を指定してcanvas内に配置します。

const canvas = document.getElementById('mycanvas');

const app = new PIXI.Application({
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0x363636
});
canvas.appendChild(app.view)

let loader = PIXI.Loader.shared;
loader.add("shard", "https://ryo-sukeblog.net/img/pixijs/filter/shard-white.png");
loader.load(handleLoadComplete);

function handleLoadComplete() {
  let texture = loader.resources.shard.texture;
  let filter
  = new PIXI.filters.MultiColorReplaceFilter
  (
    
    [ [0xffffff, 0x000000] ]

  , 0.1);
  
  let container = new PIXI.Container();
  let sprite = new PIXI.Sprite(texture);

  sprite.anchor.x = 0.5;
  sprite.anchor.y = 0.5;

  container.addChild(sprite);
  container.x = app.renderer.screen.width / 2;
  container.y = app.renderer.screen.height / 2;
  container.filters = [filter];

  app.stage.addChild(container);
}

ポイントは11行目の部分で色を変更したい画像のパスを指定してあげることです。

また20行目で色の変更を指定しているのですが「0xffffff」(白)から「0x000000」（黒）に変更するという意味の記述内容となっております。

数字の冒頭についている「0x」というのは16進数の表記を示す接頭辞のことです。ですので0xの後ろにはよく見かけるff0000（赤）ffff00（黄）といった16進数カラーコードを記述することで希望する色に変更が可能です。

複雑なhtmlやcssでスタイルを当てる必要がなくほぼjsファイル内で完結するようになっています。

5.まとめ

いかがだったでしょうか？PixiJSを使用することでhtmlやcssだけでは実現できない既存の画像にフイルターをかけて色を変更することが可能となります。他にもグリッチや水面の動きを加えたりすることも出来ます。

公式がフィルターのデモを用意してくれていますが様々なフィルターが存在しており他サイトには魅力的なサイトを作ることが出来ますね。

何かしらの気付きやきっかけになっていただけたら嬉しいです。最後までご視聴ありがとうございました～

前の記事

【Swiper】GSAPと組み合わせて斜め向きに移動するスライ…

次の記事

【初心者向け】CSSとJavaScriptで基本的なアニメーシ…