入門
PixiJSで広がる2D表現
11

renderを実行するタイミングの制御方法と、確実な画像ロード完了後にrenderを実行する方法を紹介します。これらの細かい制御はPIXI.Rendererならではの機能といえます。

小山田 晃浩
小山田 晃浩 | フロントエンド・エンジニア

PIXI.Applicationに比べて、細かいところまで制御できるPIXI.Rendererを紹介します。まずはPIXI.Rendererが持つオプションや、PIXI.Applicationとの違いを見てみましょう。

小山田 晃浩
小山田 晃浩 | フロントエンド・エンジニア

PixiJSにはビルトインのフィルターが用意されていますが、それ以外にもプラグインとして追加したり、自作したりできます。用途に応じて、利用してみましょう。

小山田 晃浩
小山田 晃浩 | フロントエンド・エンジニア

Pixi.JSのフィルター機能を紹介します。まずはPixi.JSに同梱されている6種類のフィルターを見てみましょう。

小山田 晃浩
小山田 晃浩 | フロントエンド・エンジニア

複数の表示オブジェクトをグループ化してまとめて移動やフィルター効果を適用できるオブジェクト、さらにスプライトに対して効果的なグループ化ができるオブジェクトを紹介します。

小山田 晃浩
小山田 晃浩 | フロントエンド・エンジニア

引き続き、さまざまな表示オブジェクトを紹介します。背景用途で使えそうな表示オブジェクトや、メッシュ状や線上の頂点を操作することで画像を揺らす表示オブジェクトを見てみましょう。

小山田 晃浩
小山田 晃浩 | フロントエンド・エンジニア

PixiJSでは、スプライト以外にもさまざまな表示オブジェクトが用意されています。アニメーションや線や円、矩形、テキストなどを表現してみましょう。

小山田 晃浩
小山田 晃浩 | フロントエンド・エンジニア

fromImageメソッドの内部では、画像のロードやベーステクスチャの作成、テクスチャの作成が自動で行われます。しかし、スプライトとテクスチャ、ベーステクスチャの関係を知っておくと、トラブルが起きたときにも対応しやすく、より深くPixiJSを理解できます。

小山田 晃浩
小山田 晃浩 | フロントエンド・エンジニア

スプライトの主なプロパティのうち、半透明、非表示、ブレンドモード、マスク、ボタン化を解説します。

小山田 晃浩
小山田 晃浩 | フロントエンド・エンジニア

Pixi.jsにおけるスプライトのプロパティのうち、座標を変換することで表示結果を変えるプロパティを解説します。

小山田 晃浩
小山田 晃浩 | フロントエンド・エンジニア

2D表現に特化したライブラリ、PixiJSを解説するシリーズです。まずはPixiJSではどのような表現が可能になるのか、その機能例から見てみましょう。

小山田 晃浩
小山田 晃浩 | フロントエンド・エンジニア