PixiJSで広がる2D表現
- カテゴリー
- JavaScript >
- WebGL
2D表現に特化したライブラリ、PixiJSを解説するシリーズです。WebGLの力を利用することを前提に作られており、パフォーマンスが求められるゲーム、画像の加工機能が求められるシミュレータなど、高度な表現が可能になります。
第12回 Renderer：レスポンシブと透過対応
rendererインスタンスを利用して、PixiJSのレスポンシブ対応やCanvas透過を行います。また、これまでの機能を振り返り、PIXI.Applicationを制御する方法を見てみましょう。
第11回 renderやtickerの手動制御
renderを実行するタイミングの制御方法と、確実な画像ロード完了後にrenderを実行する方法を紹介します。これらの細かい制御はPIXI.Rendererならではの機能といえます。
第10回 Renderer：役割とオプション
PIXI.Applicationに比べて、細かいところまで制御できるPIXI.Rendererを紹介します。まずはPIXI.Rendererが持つオプションや、PIXI.Applicationとの違いを見てみましょう。
第9回 フィルターの追加と自作
PixiJSにはビルトインのフィルターが用意されていますが、それ以外にもプラグインとして追加したり、自作したりできます。用途に応じて、利用してみましょう。
第8回 ビルトインのフィルターとその応用
Pixi.JSのフィルター機能を紹介します。まずはPixi.JSに同梱されている6種類のフィルターを見てみましょう。
第7回 表示オブジェクト：グループ化と更新プロパティの特定
複数の表示オブジェクトをグループ化してまとめて移動やフィルター効果を適用できるオブジェクト、さらにスプライトに対して効果的なグループ化ができるオブジェクトを紹介します。
第6回 表示オブジェクト：UI補助オブジェクトや頂点操作が可能なメッシュ
引き続き、さまざまな表示オブジェクトを紹介します。背景用途で使えそうな表示オブジェクトや、メッシュ状や線上の頂点を操作することで画像を揺らす表示オブジェクトを見てみましょう。
第5回 表示オブジェクト：アニメーションやテキスト、描画
PixiJSでは、スプライト以外にもさまざまな表示オブジェクトが用意されています。アニメーションや線や円、矩形、テキストなどを表現してみましょう。
第4回 スプライトの構造とテクスチャ
fromImageメソッドの内部では、画像のロードやベーステクスチャの作成、テクスチャの作成が自動で行われます。しかし、スプライトとテクスチャ、ベーステクスチャの関係を知っておくと、トラブルが起きたときにも対応しやすく、より深くPixiJSを理解できます。
第3回 主要プロパティ：半透明、非表示、ブレンドモード、ボタン化
スプライトの主なプロパティのうち、半透明、非表示、ブレンドモード、マスク、ボタン化を解説します。
第2回 主要プロパティ：座標変換
Pixi.jsにおけるスプライトのプロパティのうち、座標を変換することで表示結果を変えるプロパティを解説します。
第1回 PixiJSの概要と使い方の流れ
2D表現に特化したライブラリ、PixiJSを解説するシリーズです。まずはPixiJSではどのような表現が可能になるのか、その機能例から見てみましょう。