PixiJSとは
- JavaScript の 2D描画ライブラリ
- WebGLのラッパー
- メジャーバージョンアップで大幅に内容が変わる傾向がある
Pixiでできること
- オブジェクト(スプライトや図形)の描画
- オブジェクトのアニメーション(移動、回転、コマ送りアニメーション)
- フィルター処理
- オブジェクトとのインタラクション(クリックやドラッグなど)
Pixiのメリット
- 処理の記述が簡単(ライブラリを使用しない場合と比較)
- スマホでも動く
- 軽い
PixiJSを使う準備
ローカル環境で試す場合
必要なファイル
- PixiJSの.jsファイル(CDNを使う場合は不要)
- 表示用ページの.html ファイル
- 自分のコードを書く.jsファイル
※JSでローカルの画像ファイルを読んで、処理しようとすると止まってしまうのでローカルサーバーを建てる
CDN
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- PixiJSの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.2.1/browser/pixi.min.js" integrity="sha512-QoMT2trKr0WrE9x+TpWBsalvY3TXYjYkVV6e7Mf71FqHUDlPHHi6JW+SenXQ6gf+CIRI5xiRbVBnLBjF24GyOw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- 自分のJSの読み込み -->
<script src="/js/main.js" defer></script>
</head>
<body>
</body>
</html>
自分で環境を用意しないでPixiJSを試す場合
PixiPlayground
application
Pixiアプリケーションを生成する
PIXI.Application
いくつかの基本的な機能が1まとめになった、Pixiを使った処理の土台
PIXI.Applicationが持っている機能(メンバ)
| 名前 | 概要 | クラス(型) |
|---|---|---|
| view | body要素に挿入されるcanvas要素(HTML) | HTMLCanvasElement |
| stage | 画面に表示するオブジェクトの舞台 | PIXI.Container |
| screen | viewの大きさなどの情報 | PIXI.Rectangle |
| renderer | レンダリングする | PIXI.Renderer PIXI.CanvasRenderer |
| loader | 画像ファイルなどの読み込み | PIXI.Loader |
| resizeTo | 幅と高さに一致するようにレンダラーのビュー要素のサイズを自動的に変更 | Window HTMLElement |
| ticker | フレームの管理 | PIXI.Ticker |
サンプルコード
デフォルト
オプションを使用しない場合
js/main.js
//アプリケーション「app」の作成
let app = new PIXI.Application();
//body要素の最後の子としてapp.view(canvas)を追加
document.body.appendChild(app.view);
↓
index.html
<body>
<canvas width="800" height="600" style="touch-action: none; cursor: inherit;"></canvas>
</body>
※canvasの背景色は黒(0x000000)になる
幅、高さ、背景色を指定する場合
js/main.js
//アプリケーション「app」の作成(サイズは幅640px、高さは360px)
let app = new PIXI.Application({
width: 640,
height: 360,
backgroundColor: 0xffa500,
});
//body要素の最後の子としてapp.view(canvas)を追加
document.body.appendChild(app.view);
↓
index.html
<body>
<canvas width="640" height="360" style="touch-action: none; cursor: inherit;"></canvas>
</body>
※canvasの背景色はオレンジ(0xffa500)になる
オプション
autoStart
構築後に自動的にレンダリングを開始するかどうか
※falseに設定すると、sharedTickerがすでに起動している場合にsharedTickerをtrueに設定しても、sharedTickerを停止しないので自分で止める必要がある
| 値 | 意味 |
|---|---|
| false | 無効 |
| true(デフォルト) | 有効 |
width
レンダラーのビューの幅
| 値 | 意味 |
|---|---|
| 800(デフォルト) | 幅800px |
height
レンダラーのビューの高さ
| 値 | 意味 |
|---|---|
| 600(デフォルト) | 高さ600px |
view
ビューとして使用するcanvas要素の指定(任意)
| 値 | 意味 |
|---|---|
| 任意のCanvas要素 | 指定したcanvas要素をビューとして使用する |
useContextAlpha
canvasのコンテキストアルファプロパティのパススルー値
透明度を設定したい場合は、backgroundAlphaを使用する
※一部の古いデバイスでパフォーマンス上の理由から、canvas を不透明にする必要がある場合に使用する
| 値 | 意味 |
|---|---|
| false | 無効 |
| true(デフォルト) | 有効 |
autoDensity
解像度「1」以外に対応できるように、CSSピクセル単位でレンダラービューをリサイズできるようにするかどうかの設定
| 値 | 意味 |
|---|---|
| false(デフォルト) | 無効 |
| true | 有効 |
antialias
アンチエイリアスの設定
| 値 | 意味 |
|---|---|
| false(デフォルト) | 無効 |
| true | 有効 |
preserveDrawingBuffer
drawing bufferの保存を有効にする
| 値 | 意味 |
|---|---|
| false(デフォルト) | 無効 |
| true | 有効(WebGLコンテキストでtoDataUrlを使う場合) |
resolution
rendererのデバイスピクセル比
| 値 | 意味 |
|---|---|
| 数値 | 数値での指定 |
| PIXI.settings.RESOLUTION(デフォルト) | そのデバイスのデバイスピクセル比 |
確認
console.log(app.renderer.resolution);
forceCanvas
※pixi.js-legacy または @pixi/canvas-renderer モジュールを使用しているときのみ有効
(それ以外の場合は無視される)
| 値 | 意味 |
|---|---|
| false(デフォルト) | 無効 |
| true | 有効 |
backgroundColor
レンダリング領域の背景色(透明でない場合)
| 値 | 意味 |
|---|---|
| 0x000000(デフォルト) | 黒 |
backgroundAlpha
背景の透明度の設定
| 値 | 意味 |
|---|---|
| 1(デフォルト) | 完全な不透明 |
| 0より大きく、1未満 | 透明度 |
| 0 | 完全な透明 |
clearBeforeRender
reandererが新しいレンダリングパスの前にcanvasをクリアするかどうかの設定
| 値 | 意味 |
|---|---|
| false | 無効 |
| true(デフォルト) | 有効 |
powerPreference
webGLコンテキストに渡されるパラメータ
デュアルグラフィックカードを持つデバイスの場合は "high-performance" に設定される(WebGLのみ)
| 値 | 意味 |
|---|---|
| 文字列 | 渡す文字列の司令 |
sharedTicker
PIXI.Ticker.sharedを使用するかどうかの設定
system tickerは、常にshared tickerとapp tickerの両方の前に実行される
| 値 | 意味 |
|---|---|
| false(デフォルト) | 新規にティッカーを作成する(shared ticker上で実行されるものの前に発生するハンドラを登録できなくなる) |
| true | PIXI.Ticker.sharedを使用する |
sharedLoader
Shared Loaderを使うかどうかの設定
| 値 | 意味 |
|---|---|
| false(デフォルト) | Loader を新規作成する |
| true | PIXI.Loader.shared を使用する |
resizeTo
ステージのサイズを自動的に変更する要素の指定
| 値 | 意味 |
|---|---|
| window | windowオブジェクトに合わせる |
| 任意のHTML要素 | 任意のHTML要素に合わせる |
画像スプライト
テクスチャを再利用する場合
最初にテクスチャを生成して、そのテクスチャを使ってスプライトを生成する
※ベクター画像(SVGファイル)は読み込んだ時点でラスタ変換される
js/main.js
//アプリケーション「app」の作成(サイズは幅640px、高さは360px)
let app = new PIXI.Application({
width: 640,
height: 360,
backgroundColor: 0xffa500,
});
/body要素の最後の子としてapp.view(canvas)を追加
document.body.appendChild(app.view);
// テクスチャ用の画像を読み込む(circle.pngは200px*200pxの画像)
let circleTexture = new PIXI.Texture.from("./img/circle.png");
// テクスチャを使ってスプライトを生成
let circleSprite = new PIXI.Sprite(circleTexture);
// スプライトの基準点の指定(0.5は中心の意味)
circleSprite.anchor.x = 0.5;
circleSprite.anchor.y = 0.5;
// スプライトの位置の指定(ビューの幅、高さの中央)
circleSprite.x = app.screen.width / 2;
circleSprite.y = app.screen.height / 2;
// ステージに追加
app.stage.addChild(circleSprite);
基準点と位置について
基準点
基準点の指定方法(2種類)
- anchor
- pivot
| 名前 | スプライトの左上 | スプライトの右上 | 中心 |
|---|---|---|---|
| anchor | (0,0) | (1.0,1.0) | (0.5,0.5) |
| pivot | (0,0) | (スプライトの幅,スプライトの高さ) | (スプライトの幅/2,スプライトの高さ/2) |
anchorの特徴
実際のピクセルサイズが分からなくても、パーセンテージで基準点を設定することができる
スプライト、テキスト、テクスチャでしか使えない
set()が使える
スプライト.anchor.x = 0.5;
スプライト.anchor.y = 0.5;
//set()を使うとx,yに同じ値を設定できる
スプライト.anchor.set(0.5);
位置
//ビューの幅/2=Xの中央
スプライト.x = app.screen.width / 2;
//ビューの高さ/2=Yの中央
スプライト.y = app.screen.height / 2;
同じテクスチャを再利用しない場合
テクスチャを生成しないで、直接スプライトを生成する
new PIXI.Sprite.from()だけでスプライトを作る
/js/main.js
//アプリケーション「app」の作成(サイズは幅640px、高さは360px)
let app = new PIXI.Application({
width: 640,
height: 360,
backgroundColor: 0xffa500,
});
//body要素の最後の子としてapp.view(canvas)を追加
document.body.appendChild(app.view);
// テクスチャを読み込んでスプライトを生成
let circleSprite = new PIXI.Sprite.from("./img/circle.png");
// スプライトの基準点の指定(0.5は中心の意味)
circleSprite.anchor.x = 0.5;
circleSprite.anchor.y = 0.5;
// スプライトの位置の指定(ビューの幅、高さの中央)
circleSprite.x = app.screen.width / 2;
circleSprite.y = app.screen.height / 2;
// ステージに追加
app.stage.addChild(circleSprite);
テクスチャアトラス
複数の画像を一枚の画像にまとめて読み込み一部を取り出して使う
スプライトシートの作成
「TexturePacker」を使用してスプライトシートを作る
TexturePacker
操作手順
今回は以下の3枚をまとめる
- cat.png
- dog.png
- ape.png
- TexturePackerを起動
- PixiJSを選択
- まとめたい画像すべてを1つのフォルダに入れて、フォルダごとドロップ
- 「Output files」セクションで「Data file」と「Texture file」で保存場所と名前を指定
- 上部メニューの「Publish sprite sheet」を押す
- 画像1枚とjsonファイルが生成される
スプライトシートの読み込み
jsonファイルと、画像ファイルを同じフォルダに格納する
(今回はimgフォルダに格納)
スプライトシートに使うファイル名をtexture.jsonとtexture.pngにした場合の例
/js/main.js
//アプリケーション「app」の作成(サイズは幅640px、高さは360px)
let app = new PIXI.Application({
width: 640,
height: 360,
backgroundColor: "0XDCDCDC",
});
//body要素の最後の子としてapp.view(canvas)を追加
document.body.appendChild(app.view);
///////////////////////////////////
const textureSet = () => {
const dog = PIXI.Sprite.from("dog.png");
app.stage.addChild(dog);
const cat = PIXI.Sprite.from("cat.png");
cat.x = 100;
app.stage.addChild(cat);
const ape = PIXI.Sprite.from("ape.png");
ape.x = 200;
app.stage.addChild(ape);
};
app.loader.add("img/texture.json").load(textureSet);
線
三本の線で三角形を書く
/js/main.js
//アプリケーション「app」の作成(サイズは幅640px、高さは360px)
let app = new PIXI.Application({
width: 640,
height: 360,
backgroundColor: 0xffa500,
});
//body要素の最後の子としてapp.view(canvas)を追加
document.body.appendChild(app.view); // 線を描く
let line = new PIXI.Graphics()
.lineStyle(6, 0x000000) // 線のスタイルの指定
.moveTo(-25, 150) // 線を開始したい場所に移動
.lineTo(25, 0) // 線のゴールを指定して線を引く
.lineTo(75, 150)
.lineTo(-25, 150);
line.x = 300;
line.y = 100;
app.stage.addChild(line);
三本の線で三角形を書いて塗りつぶす
/js/main.js
//アプリケーション「app」の作成(サイズは幅640px、高さは360px)
let app = new PIXI.Application({
width: 640,
height: 360,
backgroundColor: 0xffa500,
});
//body要素の最後の子としてapp.view(canvas)を追加
document.body.appendChild(app.view); // 線を描く
let line = new PIXI.Graphics()
.beginFill(0xff1493)
.lineStyle(6, 0x000000) // 線のスタイルの指定
.moveTo(-25, 150) // 線を開始したい場所に移動
.lineTo(25, 0) // 線のゴールを指定して線を引く
.lineTo(75, 150)
.lineTo(-25, 150)
.endFill();
line.x = 300;
line.y = 100;
app.stage.addChild(line);
lineStyle
lineStyle(width, color, alpha, alignment, native)
| 値 | 意味 |
|---|---|
| width | 幅 |
| color | 色 |
| alpha | 透明度 |
| alignment | 配置（0 =内側、0.5 =中央、1 =外側）WebGLのみ |
| native | trueにすると、線はTRIANGLE_STRIPの代わりにLINESで描画 |
moveTo
指定した位置に移動
moveTo(x,y)
| 値 | 意味 |
|---|---|
| x | x座標 |
| y | y座標 |
lineTo
現在地から、指定した位置まで線を引く
lineTo(x,y)
| 値 | 意味 |
|---|---|
| x | X座標 |
| y | Y座標 |
arcTo
円弧を引く
arcTo(x1,y1,x2,y2,radius)
| 値 | 意味 |
|---|---|
| x1 | X座標1 |
| y1 | Y座標1 |
| x2 | X座標2 |
| y2 | Y座標2 |
| radius | 半径 |
図形
画像を読み込む以外にオブジェクトを作ることができる
基本的な図形や線を描画してスプライトと同様のオブジェクトとして扱える
図形生成
// 図形の描画はメソッドチェーンで行う
new PIXI.Graphics()
.beginFill() //塗りつぶし開始(色の指定)
.描画1()
.描画2()
.描画3()
.塗りつぶしの終了() //塗りつぶし終了
| 値 | 意味 |
|---|---|
| beginFill(色,透明度) | 塗りつぶし |
透明度は指定を省略可能
円
drawCircle(中心のx座標, 中心のy座標, 半径)
//アプリケーション「app」の作成(サイズは幅640px、高さは360px)
let app = new PIXI.Application({
width: 640,
height: 360,
backgroundColor: 0xffa500,
});
//body要素の最後の子としてapp.view(canvas)を追加
document.body.appendChild(app.view);
// 円を描画
let circle = new PIXI.Graphics()
.beginFill(0xff0000) // 色を指定して塗りつぶし開始(endFill()まで有効)
.drawCircle(0, 0, 100) //円を描画
.endFill(); //beginFillの終了
// 基準点の指定
// (PIXI.Graphicsにはanchorが無いので、pivot(割合ではなくpxで指定)を使う)
circle.pivot.x = 0;
circle.pivot.y = 0;
// 位置の指定(px)
circle.x = 320;
circle.y = 180;
//回転の指定
circle.rotation = Math.PI / 1;
//ステージに追加
app.stage.addChild(circle);
楕円
drawEllipse(中心のx座標, 中心のy座標, 幅, 高さ) //単位はpx
js/main.js
//アプリケーション「app」の作成(サイズは幅640px、高さは360px)
let app = new PIXI.Application({
width: 640,
height: 360,
backgroundColor: 0xffa500,
});
//body要素の最後の子としてapp.view(canvas)を追加
document.body.appendChild(app.view);
// 楕円を描画
let ellipse = new PIXI.Graphics()
.beginFill(0xff0000) // 色を指定して塗りつぶし開始(endFill()まで有効)
.drawEllipse(15, 30, 30, 60) // 楕円の描画
.endFill(); //beginFillの終了
// 基準点の指定
// (PIXI.Graphicsにはanchorが無いので、pivot(割合ではなくpxで指定)を使う)
ellipse.pivot.x = 15;
ellipse.pivot.y = 10;
// 位置の指定(px)
ellipse.x = 100;
ellipse.y = 100;
//回転の指定
ellipse.rotation = Math.PI / 180;
//ステージに追加
app.stage.addChild(ellipse);
多角形
drawPolygon([x1,y1,x2,y2,....])
js/main.js
//アプリケーション「app」の作成(サイズは幅640px、高さは360px)
let app = new PIXI.Application({
width: 640,
height: 360,
backgroundColor: 0xffa500,
});
//body要素の最後の子としてapp.view(canvas)を追加
document.body.appendChild(app.view);
// 八角形を描画
let octagon = new PIXI.Graphics()
.beginFill(0xff0000) // 色を指定して塗りつぶし開始(endFill()まで有効)
.drawPolygon([
100, 0, 70, 70, 0, 100, -70, 70, -100, 0, -70, -70, 0, -100, 70, -70,
]) //
.endFill(); //beginFillの終了
// 基準点の指定
// (PIXI.Graphicsにはanchorが無いので、pivot(割合ではなくpxで指定)を使う)
octagon.pivot.x = 0;
octagon.pivot.y = 0;
// 位置の指定(px)
octagon.x = 320;
octagon.y = 180;
//回転の指定
octagon.rotation = Math.PI / 8;
//ステージに追加
app.stage.addChild(octagon);
塗りつぶし
終了はどちらもendFill()
| 塗りつぶしの種類 | 内容 |
|---|---|
| beginFill() | 色で塗りつぶす |
| beginTextureFill() | テクスチャで塗りつぶし |
色で塗りつぶし
beginFill(color,alpha)
| 名前 | タイプ | 任意/必須 | デフォルト値 | 説明 |
|---|---|---|---|---|
| color | 数値 | 任意 | 0xffffff | テクスチャの後ろを埋める背景 |
| alpha | 数値 | 任意 | 1 | 塗りつぶしのアルファ |
テクスチャで塗りつぶし
beginTextureFill(texture, color,alpha, matrix)
| 名前 | タイプ | 任意/必須 | デフォルト値 | 説明 |
|---|---|---|---|---|
| texture | PIXI.Texture | 任意 | PIXI.Texture.WHITE | 塗りつぶすテクスチャ |
| color | 数値 | 任意 | 0xffffff | テクスチャの後ろを埋める背景 |
| alpha | 数値 | 任意 | 1 | 塗りつぶしのアルファ |
| matrix | PIXI.Matrix | 任意 | null | 変換行列 |
いろいろな図形
drawChamferRect
長方形(面取り)
drawChamferRect(x, y, width, height, chamfer)
角が面取りされた長方形
※@pixi/graphics-extrasを使用した場合のみ利用可能
引数
| 名前 | タイプ | 説明 |
|---|---|---|
| x | 数値 | 長方形の左上隅 |
| y | 数値 | 長方形の右上隅 |
| width | 数値 | 長方形の幅 |
| height | 数値 | 長方形の高さ |
| chamfer | 数値 | ゼロでない実数, コーナーのカットアウトのサイズ |
戻り値
| タイプ | 説明 |
|---|---|
| PIXI.Graphics | 自身を返す |
drawCircle
円
drawCircle(x, y, radius)
引数
| 名前 | タイプ | 説明 |
|---|---|---|
| x | 数値 | 中心のX座標 |
| y | 数値 | 中心のY座標 |
| radius | 数値 | 半径 |
戻り値
| タイプ | 説明 |
|---|---|
| PIXI.Graphics | このGraphicsオブジェクト(メソッドコールを連鎖させるのに適す) |
drawEllipse
楕円
drawEllipse(x, y, width, height)
引数
| 名前 | タイプ | 説明 |
|---|---|---|
| x | 数値 | 中心のX座標 |
| y | 数値 | 中心のY座標 |
| width | 数値 | 楕円の半分の幅 |
| height | 数値 | 楕円の半分の高さ |
戻り値
| タイプ | 説明 |
|---|---|
| PIXI.Graphics | このGraphicsオブジェクト(メソッドコールを連鎖させるのに適す) |
drawFilletRect
長方形(フィレットあり)
※@pixi/graphics-extrasを使用した場合のみ利用可能
drawFilletRect(x, y, width, height, fillet)
※rounded rectangle(丸みを帯びた長方形)との違い：角の半径に負の数を使うことができる
引数
| 名前 | タイプ | 説明 |
|---|---|---|
| x | 数値 | 長方形の左上の角 |
| y | 数値 | 長方形の右上の角 |
| width | 数値 | 長方形の角 |
| height | 数値 | 長方形の高さ |
| fillet | 数値 | 負の値も正の値も許容 |
戻り値
| タイプ | 説明 |
|---|---|
| PIXI.Graphics 自身を返す |
drawPolygon
与えられたパスを使用して多角形を描画
drawPolygon(path)
引数
| 名前 | タイプ | 説明 |
|---|---|---|
| path |
配列<数値> 配列<PIXI.Point> PIXI.Polygon |
ポリゴンを構成するために使用されるパスデータ |
戻り値
| タイプ | 説明 |
|---|---|
| PIXI.Graphics | このGraphicsオブジェクト(メソッドコールを連鎖させるのに適す) |
drawRect
長方形
drawRect(x, y, width, height)
引数
| 名前 | タイプ | 説明 |
|---|---|---|
| x | 数値 | 長方形の左上端のX座標 |
| y | 数値 | 長方形の左上端のY座標 |
| width | 数値 | 長方形の幅 |
| height | 数値 | 長方形の高さ |
戻り値
| タイプ | 説明 |
|---|---|
| PIXI.Graphics | このGraphicsオブジェクト(メソッドコールを連鎖させるのに適す) |
drawRegularPolygon
正多角形
※@pixi/graphics-extrasを使用した場合のみ利用可能
drawRegularPolygon(x, y, radius, sides, rotation)
引数
| 名前 | タイプ | 説明 |
|---|---|---|
| x | 数値 | X座標 |
| y | 数値 | Y座標 |
| radius | 数値 | 多角形の半径 |
| sides | 数値 | 最小値は3 |
| rotation | 数値 | 回転の開始値の指定(ラジアン単位) |
戻り値
| タイプ | 説明 |
|---|---|
| PIXI.Graphics | このGraphicsオブジェクト(メソッドコールを連鎖させるのに適す) |
drawRoundedPolygon
角が丸い正多角形を描く
※@pixi/graphics-extrasを使用した場合のみ利用可能
drawRoundedPolygon(x, y, radius, sides, corner, rotation)
引数
| 名前 | タイプ | 説明 |
|---|---|---|
| x | 数値 | Xの位置 |
| y | 数値 | Yの位置 |
| radius | 数値 | 多角形の半径 |
| sides | 数値 | 最小値は3 |
| corner | 数値 | コーナーのサイズ(px単位) |
| rotation | 数値 | 回転の開始値の指定(ラジアン単位) |
戻り値
| タイプ | 説明 |
|---|---|
| PIXI.Graphics | このGraphicsオブジェクト(メソッドコールを連鎖させるのに適す) |
drawRoundedRect
角丸/面取りされた長方形
drawRoundedRect(x, y, width, height, radius)
引数
| 名前 | タイプ | 説明 |
|---|---|---|
| x | 数値 | 長方形の左上端のX座標 |
| y | 数値 | 長方形の左上端のY座標 |
| width | 数値 | 長方形の幅 |
| height | 数値 | 長方形の高さ |
| radius | 数値 | 長方形の角の半径 |
戻り値
| タイプ | 説明 |
|---|---|
| PIXI.Graphics | このGraphicsオブジェクト(メソッドコールを連鎖させるのに適す) |
drawShape
任意の図形
drawShape(shape)
引数
| 名前 | タイプ | 説明 |
|---|---|---|
| shape | PIXI.Circle PIXI.Ellipse PIXI.Polygon PIXI.Rectangle PIXI.RoundedRectangle |
描画する形状 |
戻り値
| タイプ | 説明 |
|---|---|
| PIXI.Graphics | このGraphicsオブジェクト メソッドコールを連鎖させるのに適す |
drawStar
星形
任意の数のポイントで星形を描く
※@pixi/graphics-extrasを使用した場合のみ利用可能
drawStar(x, y, points, radius, innerRadius, rotation)
引数
| 名前 | タイプ | 任意/必須 | デフォルト値 | 説明 |
|---|---|---|---|---|
| x | 数値 | 必須 | 星の中心X位置 | |
| y | 数値 | 必須 | 星の中心Y位置 | |
| points | 数値 | 必須 | 星の点の数(1点以上) | |
| radius | 数値 | 必須 | 星の外周の半径 | |
| innerRadius | 数値 | 任意 | radiusの半分 | 点間の内半径 |
| rotation | 数値 | 任意 | 0 | 星の回転(ラジアン単位) |
戻り値
| タイプ | 説明 |
|---|---|
| PIXI.Graphics | このGraphicsオブジェクト(メソッドコールを連鎖させるのに適す) |
drawTorus
トーラス形状(ドーナツ型)を描画する
サークルローダーのようなものに使用できる
※@pixi/graphics-extrasを使用した場合のみ利用可能
drawTorus(x, y, innerRadius, outerRadius, startArc, endArc)
引数
| 名前 | タイプ | 任意/必須 | デフォルト値 | 説明 |
|---|---|---|---|---|
| x | 数値 | 必須 | X座標 | |
| y | 数値 | 必須 | Y座標 | |
| innerRadius | 数値 | 必須 | 内円の半径 | |
| outerRadius | 数値 | 必須 | 外円の半径 | |
| startArc | 数値 | 任意 | 0 | sweepを開始する位置(ラジアン単位) |
| endArc | 数値 | 任意 | Math.PI*2 | sweepを終了する位置(ラジアン単位) |
戻り値
| タイプ | 説明 |
|---|---|
| PIXI.Graphics | このGraphicsオブジェクト(メソッドコールを連鎖させるのに適す) |
テキスト
textの特徴
| 項目 | 内容 |
|---|---|
| 改行 | 可 |
| 途中でのスタイル変更 | 不可 |
PIXI.Textでの文字生成はCanvas
理由：WebGL に文字表示の機能が無い
テキストオブジェクト
- スプライトや図形と同様に扱うことができる
- textプロパティを書き換えることで、生成後に表示内容を変更することができる
テキストの表示
//アプリケーション「app」の作成(サイズは幅640px、高さは360px)
let app = new PIXI.Application({
width: 640,
height: 360,
backgroundColor: "0xdcdcdc",
});
//body要素の最後の子としてapp.view(canvas)を追加
document.body.appendChild(app.view);
//テキスト「titleText」を作成(Hello World!を白で)
const titleText = new PIXI.Text("PixiJS", {
fill: 0xffffff, //文字色(白)
fontSize: 100, //文字サイズ(100px)
fontStyle: "bold", //文字のスタイル(太)
dropShadow: "true", //ドロップシャドウ(有)
dropShadowColor: "0x000000", //シャドウの色(黒)
});
//ステージに追加
app.stage.addChild(titleText);
テキストの表示
テキストに適用してプロパティを別で指定して、付与する方法
(同じスタイルのテキストを複数作る場合など)
/js/main.js
//アプリケーション「app」の作成(サイズは幅640px、高さは360px)
let app = new PIXI.Application({
width: 640,
height: 360,
backgroundColor: "0XDCDCDC",
});
//body要素の最後の子としてapp.view(canvas)を追加
document.body.appendChild(app.view);
//テキスト用のスタイルを作成
const textStyle = new PIXI.TextStyle({
fontFamily: "游ゴシック", //フォント(游ゴシック)
fill: 0xffffff, //文字色(白)
fontSize: 40, //文字サイズ(40px)
fontWeight: "bold", //文字のスタイル(太)
dropShadow: true, //ドロップシャドウ(有)
dropShadowColor: "0x000000", //シャドウの色(黒)
dropShadowDistance: 2, //シャドウの距離(2px)
});
//テキストと先に作ったスタイルを使う
const titleText = new PIXI.Text("1番目のテキスト", textStyle);
//テキストと先に作ったスタイルを使う
const titleText2 = new PIXI.Text("2番目のテキスト", textStyle);
//位置が重ならないように調整
titleText2.y = 100;
app.stage.addChild(titleText, titleText2);
プロパティ
style.align
複数行のテキストの配置(単一行のテキストには影響しない)
| 値 | 意味 |
|---|---|
| left'(デフォルト) | 左寄せ |
| center | 中央寄せ |
| right | 右寄せ |
style.breakWords
行を単語で折り返すかどうかの指定
wordWrapをtrueに設定する必要がある
| 値 | 意味 |
|---|---|
| true | 有効 |
| false(デフォルト) | 無効 |
style.dropShadow
テキストにドロップシャドウを設定する
| 値 | 意味 |
|---|---|
| true | 有効 |
| false(デフォルト) | 無効 |
style.dropShadowAlpha
ドロップシャドウのアルファの設定
| 値 | 意味 |
|---|---|
| 1(デフォルト) | 透明 |
| 0より大きく1未満 | 半透明 |
| 0 | アルファなし |
style.dropShadowAngle
ドロップシャドウの角度の設定
| 値 | 意味 |
|---|---|
| 角度 | シャドウの角度(ラジアン単位) |
※デフォルトは値Math.PI/6
style.dropShadowBlur
シャドウブラー半径の設定
| 値 | 意味 |
|---|---|
| 0(デフォルト) | ブラー半径(ピクセル) |
style.dropShadowColor
ドロップシャドウで使用される塗りつぶしの色の指定
| 値 | 意味 |
|---|---|
| 文字列 | 文字列による色指定 |
| 数値 | 数値による色指定 |
※デフォルト値は「black」
style.dropShadowDistance
ドロップシャドウの距離の設定
| 値 | 意味 |
|---|---|
| 数値 | ドロップシャドウの距離(ピクセル単位) |
※デフォルト値は5
style.fill
テキストで使用されるキャンバスの塗りつぶしスタイル
| 値 | 意味 |
|---|---|
| 文字列 | 文字列にとるスタイル指定 |
| 文字列の配列 | 文字列の配列によるスタイル指定 |
| 数値 | 数値によるスタイル指定 |
| 数値の配列 | 数値の配列によるスタイル指定 |
| CanvasGradient | グラデーション |
| CanvasPattern | パターン |
※デフォルト値は「black」
style.fillGradientType
塗りつぶしグラデーションのタイプ/方向の設定
| 値 | 意味 |
|---|---|
| PIXI.TEXT_GRADIENT.LINEAR_VERTICAL(デフォルト) | 垂直方向のグラデーション |
| PIXI.TEXT_GRADIENT.LINEAR_HORIZONTAL | 水平方向のグラデーション |
style.fillGradientStops
塗りつぶしがグラデーションを作成するための色の配列である場合、配列で色の停止点(0から1までの数値)を設定し、それらを等間隔にするデフォルトの動作を上書きできる
| 値 | 意味 |
|---|---|
| 0から1までの数値 | 停止点 |
style.fontFamily
フォントファミリーの設定
オプションの値
| 値 | 意味 |
|---|---|
| 文字列 | 文字列によるフォントファミリー指定 |
| 文字列の配列 | 文字列の配列によるフォントファミリー指定 |
デフォルト値は「Arial」
style.fontSize
フォントサイズの設定
(単位無しの数値はpxになる)
| 値の例 | 意味 |
|---|---|
| 26px | pxによる指定 |
| 160% | %による指定 |
| 1.6em | emによる指定 |
デフォルト値は「26」
style.fontStyle
フォントスタイルの設定
| 値 | 意味 |
|---|---|
| normal(デフォルト) | ノーマル |
| italic | イタリック |
| oblique | 斜体 |
style.fontVariant
フォントバリアントの設定
| 値 | 意味 |
|---|---|
| normal(デフォルト) | ノーマル |
| small-caps | スモールキャップス |
style.fontWeight
フォントウェイト
| 値 | 意味 |
|---|---|
| 'normal'(デフォルト) | ノーマル |
| 'bold' | 太字 |
| 'bolder' | より太く |
| 'lighter' | より細く |
| '100' | Thin (Hairline) |
| '200' | Extra Light (Ultra Light) |
| '300' | Light |
| '400' | Normal (Regular) |
| '500' | Medium |
| '600' | Semi Bold (Demi Bold) |
| '700' | Bold |
| '800' | Extra Bold (Ultra Bold) |
| '900' | Black (Heavy) |
style.leading
行間のスペース
| 値 | 意味 |
|---|---|
| 数値 | 行間(ピクセル単位) |
※デフォルト値は0
style.letterSpacing
文字間の間隔
| 値 | 意味 |
|---|---|
| 数値 | 文字の感覚(ピクセル) |
※デフォルト値は0
style.lineHeight
行の高さ、文字が使用する垂直方向のスペースの設定
| 値 | 意味 |
|---|---|
| 数値 | スペース(ピクセル単位) |
style.lineJoin
作成されるコーナーのタイプの設定
| 値 | 意味 |
|---|---|
| miter(デフォルト) | 鋭い角 |
| round | 丸い角 |
| bevel | 四角い角 |
style.miterLimit
lineJoinの「miter」モードを使用時のmiterの制限
レンダリングされたテキストのスパイキネスを増減させる
| 値 | 意味 |
|---|---|
| 数値 | (ピクセル単位) |
※デフォルト値は10
style.padding
一部のフォントがクロップされる場合に使う
テキストのすべての側にパディングを追加し、クロップが発生するのを防ぐ
| 値 | 意味 |
|---|---|
| 数値 | パディング(ピクセル単位) |
デフォルト値は0
style.stroke
テキストストロークで使用されるキャンバスの塗りつぶしスタイル
| 値の例 | 意味 |
|---|---|
| black(デフォルト) | 黒 |
| blue | 青 |
| #FCFF00 | 鮮やかな緑みの黄 |
style.strokeThickness
ストロークの太さの設定
| 値 | 意味 |
|---|---|
| 数値 | 太さ(ピクセル単位) |
※デフォルト値は0で、その場合ストロークはなし
style.trim
透明な境界線をトリミングする
| 値 | 意味 |
|---|---|
| false(デフォルト) | 無効 |
| true | 有効 |
style.textBaseline
レンダリングされるテキストのベースライン
| 値 | 意味 |
|---|---|
| alphabetic(デフォルト) | アルファベット用 |
style.whiteSpace
改行とスペースを折りたたむか保持するかの設定
(wordWrapをtrueに設定する必要がある)
| 値 | 意味 |
|---|---|
| normal | (collapse, collapse) |
| pre(デフォルト) | (preserve, preserve) |
| pre-line | (preserve, collapse). |
style.wordWrap
ワードラップを使用するかどうかの設定
| 値 | 意味 |
|---|---|
| true | 有効 |
| false(デフォルト) | 無効 |
style.wordWrapWidth
テキストが折り返される幅
(wordWrapをtrueに設定する必要がある)
| 値の例 | 意味 |
|---|---|
| 100(デフォルト) | 幅100px |
テキストを表示する(+外部フォントの適用)
前章の手順では、環境にインストールされているフォントによって文字の形が変わってしまうので、外部フォントを読み込んでテキストオブジェクトで使用する
Web Font Loaderの使用
Web Font Loader(webfont.js)を使って外部フォントを読み込む
| 提供元 | バージョン |
|---|---|
| GitHub | v1.6.28 |
| CDN(cloudflare) | v1.6.28 |
| CDN(google) | v1.6.26 |
cloudflareのCDNのWeb Font Loaderを使う場合
index.html
<!-- 外部フォント読み込み用のライブラリの読み込み(cloudflare) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js" integrity="sha512-v/wOVTkoU7mXEJC3hXnw9AA6v32qzpknvuUF6J2Lbkasxaxn2nYcl+HGB7fr/kChGfCqubVr1n2sq1UFu3Gh1w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
GoogleのCDNのWeb Font Loaderを使う場合
index.html
<!-- 外部フォント読み込み用のライブラリの読み込み(Google) -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
使うフォント提供元別の読み込み方
Google Fontの場合
| プロパティ | 意味 |
|---|---|
| families | 使用するフォントを配列で設定する(複数指定の場合は配列で指定) |
GoogleのFont APIを使用して、読み込みたいフォントファミリーの名前を付ける
Font APIと同じ構文で、スタイルを指定することができる
※FVD構文は非対応
Google Fonts指定のサンプル
/js/main.js
WebFont.load(
{
google: {
families: ["Hina Mincho"],
}
},
リクエストしたフォントがデフォルトのウェイト(例:400)で提供されない場合
フォントイベントを動作させるために必要なバリエーション(例：300、700、など)を明示的にリクエストする必要がある
WebFontConfig = {
google: {
families: ["Open Sans Condensed:300,700"]
}
};
ファイルサイズの削減
日本語フォントはファイルサイズが大きいので、読み込みに時間がかかる
| 条件 | 対策 |
|---|---|
| 変更する必要がある場合 | フォントのサブセット化 |
| 変更する必要がない場合 | 画像化 |
characterのサブセット化
デフォルト以外のcharacterのサブセットを指定する
(例：ラテン文字に加えてギリシャ文字など)
要求されたファミリ文字列の後に、サブセット文字列をコロンで追加する
サブセット文字列は、Google のドキュメントに従う(サブセット名はカンマで区切る)
WebFontConfig = {
google: {
families: ["Hina Mincho:300,700:latin,greek"]
}
};
textのサブセット化
textパラメータを指定する
WebFontConfig = {
google: {
families: ["Hina Mincho"],
text: "あいうえおかきくけこさしすせそ"
}
};
カスタムフォントの場合
自分でフォントファイルを用意する場合
| プロパティ | 内容 |
|---|---|
| families | 使用するフォントを配列で設定する(複数指定の場合は配列で指定) |
| urls |
@font-faceを定義したcssファイルへのリンクを設定(オプション) |
バリエーションの指定
Font Variation Description(フォントバリエーションの説明で指定する
特定のフォントのスタイルとウェイトを説明するための略記法
省略時はデフォルトのn4が適用される
複数指定はカンマ区切り
| 記号 | フォントスタイル |
|---|---|
| n | normal ※デフォルト |
| i | italic |
| o | oblique |
| 数字 | フォントウェイト |
|---|---|
| 1 | 100 |
| 2 | 200 |
| 3 | 300 |
| 4 | 400 (normal)※デフォルト |
| 5 | 500 |
| 6 | 600 |
| 7 | 700 (bold) |
| 8 | 800 |
| 9 | 900 |
| FVD表記の例 | 意味 |
|---|---|
| n4 | font-style: normal font-weight: normal |
| i4 | font-style: italic font-weight: normal |
| i7 | font-style: italic font-weight: bold |
※font-style/font-weightが未指定の場合、デフォルトのn4が使用される
カスタムフォント指定のサンプル
/js/main.js
WebFont.load(
{
// カスタム(自分のサーバーにファイルを置いているなど)の場合
custom: {
/* フォントファミリーの指定 */
families: ["架空明朝:n7"],
/* フォントファイルの場所、フォーマットの指定 */
urls: ["./css/font.css"],
},
)
カスタムフォントの場合はCSSでの指定も必要
index.html
<!-- 外部フォント用のcss -->
<link rel="stylesheet" type="text/css" media="screen" href="./css/font.css" />
fonts.css
@font-face {
font-family: "架空明朝";
font-style: normal;
font-weight: bold;
src: url("../font/kakuu.otf") format("opentype");
}
| 拡張子 | フォーマット |
|---|---|
| .otf | opentype |
| .woff | woff |
複数の種類提供元のフォントを同時に使用する
/js/main.js
WebFont.load(
{
google: {
families: ["Hina Mincho"],
},
custom: {
families: ["架空明朝"],
urls: ["./css/font.css"],
},
実際に使用してみる
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js" integrity="sha512-v/wOVTkoU7mXEJC3hXnw9AA6v32qzpknvuUF6J2Lbkasxaxn2nYcl+HGB7fr/kChGfCqubVr1n2sq1UFu3Gh1w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- 外部フォント用のcss -->
<link rel="stylesheet" type="text/css" media="screen" href="./css/font.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.2.1/browser/pixi.min.js" integrity="sha512-QoMT2trKr0WrE9x+TpWBsalvY3TXYjYkVV6e7Mf71FqHUDlPHHi6JW+SenXQ6gf+CIRI5xiRbVBnLBjF24GyOw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="/js/main.js" defer></script>
</head>
<body>
</body>
</html>
/js/main.js
//アプリケーション「app」の作成(サイズは幅640px、高さは360px)
let app = new PIXI.Application({
width: 640,
height: 360,
backgroundColor: "0XDCDCDC",
});
//body要素の最後の子としてapp.view(canvas)を追加
document.body.appendChild(app.view);
// 外部フォントをロードする
WebFont.load({
// Google Fontsの場合
google: {
families: ["Hina+Mincho"],
},
// カスタム(自分のサーバーにファイルを置いているなど)の場合
custom: {
//フォントファミリーの指定
families: ["架空明朝"],
// @font-faceのcssの指定
urls: ["./css/font.css"],
},
// フォント読み込み成功時
active: () => {
// 「Hina Mincho」でテキストを表示する
let text2 = new PIXI.Text("山田ヤマダやまだyamada", {
fontFamily: "Hina Mincho",
fontSize: 50,
fill: 0x000000,
});
//text2の位置の指定
text2.x = 10;
text2.y = 100;
//text2をステージに追加
app.stage.addChild(text2);
// 「架空明朝」テキストを表示する
let text3 = new PIXI.Text("山田ヤマダやまだyamada", {
fontFamily: "架空明朝",
fontSize: 50,
fill: 0x000000,
});
//text3の位置の指定
text3.x = 10;
text3.y = 200;
//text3をステージに追加
app.stage.addChild(text3);
},
// フォント読み込み失敗時
inactive: () => {
console.log("フォントの読み込み失敗");
},
});
/css/fonts.css
@font-face {
/* フォントファミリーの指定 */
font-family: "架空明朝";
/* フォントファイルの場所、フォーマットの指定 */
src: url("../font/kakuu.otf") format("opentype");
}
Configuration
- ロードするフォントの定義
- 特定のイベントに対するコールバックの指定(オプション)
非同期アプローチを使用する場合
Web Font Loader を読み込むコードの前にグローバル変数 WebFontConfig を定義する
Web Font Loader の設定(2種類)
- グローバル変数「WebFontConfig」で定義する方法
- WebFont.loadメソッドに直接渡す方法
イベント
Web Font Loaderは、開発者がフックできるイベントシステムを提供する
CSSとJavaScriptの両方でフォントの読み込みシーケンスを通知する
| 値 | トリガーされるタイミング |
|---|---|
| loading | すべてのフォントがリクエストされたとき |
| active | フォントがレンダリングされたとき(読み込みに失敗したフォントがある場合も発火) |
| inactive | 全てのフォントの読み込みに失敗したとき |
| fontloading | ロードされたフォントごとに1回発火 登録したハンドラには(フォント名, スタイル)が渡される |
| fontactive | レンダリングするフォントごとに1回発火 登録したハンドラには(フォント名, スタイル)が渡される |
| fontinactive | フォントを読み込めない場合 登録したハンドラには(フォント名, スタイル)が渡される |
CSSのイベント
html 要素のクラスとして実装される
1つのページで複数回フォントを読み込む場合、ページの現在の状態を反映して更新され続ける
html 要素に設定されるクラス(6種類)
.wf-loading
.wf-active
.wf-inactive
.wf-<familyname>-<fvd>-loading
.wf-<familyname>-<fvd>-active
.wf-<familyname>-<fvd>-inactive
クラス名に含まれるプレースホルダー
プレースホルダー
各フォント・ファミリーの名前をサニタイズしたものに置き換わる
名前からスペースとアンダースコアが取り除かれ、すべての文字が小文字に変換される
例
Droid Sans→droidsans
プレースホルダー
FVD記法での表記
JavaScript のイベント
WebFontConfig 設定オブジェクトのコールバック関数として実装されている
WebFontConfig = {
loading: function() {},
active: function() {},
inactive: function() {},
fontloading: function(familyName, fvd) {},
fontactive: function(familyName, fvd) {},
fontinactive: function(familyName, fvd) {}
};
classesとeventsの無効化
classes
| 値 | 内容 |
|---|---|
| false | HTML要素にクラスを設定しない |
| true(デフォルト) | HTML要素にクラスを設定する |
WebFontConfig = {
classes: false
};
events
| 値 | 意味 |
|---|---|
| false | フォントイベント(コールバック)を無効化 |
| true(デフォルト) | フォントイベント(コールバック)を有効化 |
WebFontConfig = {
events: false
};
classesとeventsの両方を無効にした場合
Web Font Loaderはフォントの監視を行わず、ドキュメントに@font-faceルールを挿入するだけになる
Timeouts
タイムアウトの値の単位はミリ秒
(デフォルトは3000ミリ秒)
| 条件 | 発火するイベント |
|---|---|
| 1つ以上のフォントが正常にレンダリングされた場合 | activeイベントが発生 |
| 全部失敗した場合 | inactiveイベントが発生(デフォルトでは5秒後) |
WebFontConfig オブジェクトの timeout オプション
デフォルトのタイムアウトを変更することができる
WebFontConfig = {
google: {
families: ["Hina Mincho"]
},
//タイムアウトを2秒に設定
timeout: 2000
};
コンテナ
コンテナ(PIXI.Container)を作ってオブジェクトを格納し、一括で移動させられる
コンテナに入れられるもの
- オブジェクト
- コンテナ(app.stageもコンテナ)
コンテナに追加するオブジェクトのx,yの基準点は、コンテナの左上端の点
(コンテナのpivotを変更しても変わらない)
js/main.js
//アプリケーション「app」の作成(サイズは幅640px、高さは360px)
let app = new PIXI.Application({
width: 640,
height: 360,
backgroundColor: "0XDCDCDC",
});
//body要素の最後の子としてapp.view(canvas)を追加
document.body.appendChild(app.view);
///////////////////////////////////
//コンテナを作成
let myContainer = new PIXI.Container();
//コンテナの位置を指定
myContainer.x = 100;
myContainer.y = 100;
//コンテナをステージに配置
app.stage.addChild(myContainer);
///////////////////////////////////
//楕円を描画
let ellipse = new PIXI.Graphics()
.beginFill(0xff0000) // 色を指定して塗りつぶし開始(endFill()まで有効)
.drawEllipse(15, 30, 30, 60) // 楕円の描画
.endFill(); //beginFillの終了
//楕円の基準点の指定
// (PIXI.Graphicsにはanchorが無いので、pivot(割合ではなくpxで指定)を使う)
ellipse.pivot.x = 15;
ellipse.pivot.y = 10;
//楕円の位置の指定(px)
ellipse.x = 100;
ellipse.y = 60;
//楕円の回転の指定
ellipse.rotation = Math.PI / 180;
//コンテナに追加
myContainer.addChild(ellipse);
//////////////////////////////////
//八角形を描画
let octagon = new PIXI.Graphics()
.beginFill(0xffa500) // 色を指定して塗りつぶし開始(endFill()まで有効)
.drawPolygon([
100, 0, 70, 70, 0, 100, -70, 70, -100, 0, -70, -70, 0, -100, 70, -70,
]) //
.endFill(); //beginFillの終了
//八角形の基準点の指定
// (PIXI.Graphicsにはanchorが無いので、pivot(割合ではなくpxで指定)を使う)
octagon.pivot.x = 0;
octagon.pivot.y = 0;
//八角形の位置の指定(px)
octagon.x = 320;
octagon.y = 80;
//八角形をコンテナに追加
myContainer.addChild(octagon);
///////////////////////////////////
// コンテナを操作すると、中のオブジェクトを一括して動かせる
myContainer.x += 40;//X座標
myContainer.y += 80;//Y座標
myContainer.rotation = -Math.PI / 8;//回転
myContainer.scale.x = myContainer.scale.y = 0.8;//大きさ
重なり順
オブジェクトやコンテナの重なり順を変更する
オブジェクトやコンテナは、後から追加したものが前面に描画される
ステージのsortableChildrenで、オブジェクトやコンテナのzIndexを有効化して、重なり順を変更できるようにする
/js/main.js
//アプリケーション「app」の作成(サイズは幅640px、高さは360px)
let app = new PIXI.Application({
width: 640,
height: 360,
backgroundColor: "0XDCDCDC",
});
//body要素の最後の子としてapp.view(canvas)を追加
document.body.appendChild(app.view);
///////////////////////////////////
//楕円を描画
let ellipse = new PIXI.Graphics()
.beginFill(0xff0000) // 色を指定して塗りつぶし開始(endFill()まで有効)
.drawEllipse(15, 30, 30, 60) // 楕円の描画
.endFill(); //beginFillの終了
//楕円の基準点の指定
//(PIXI.Graphicsにはanchorが無いので、pivot(割合ではなくpxで指定)を使う)
ellipse.pivot.x = 15;
ellipse.pivot.y = 10;
//楕円の位置の指定(px)
ellipse.x = 320;
ellipse.y = 160;
//楕円の回転の指定
ellipse.rotation = Math.PI / 180;
//楕円をステージに追加
app.stage.addChild(ellipse);
///////////////////////////////////
//八角形を描画
let octagon = new PIXI.Graphics()
.beginFill(0xffa500) // 色を指定して塗りつぶし開始(endFill()まで有効)
.drawPolygon([
100, 0, 70, 70, 0, 100, -70, 70, -100, 0, -70, -70, 0, -100, 70, -70,
]) //
.endFill(); //beginFillの終了
//八角形の基準点の指定
//(PIXI.Graphicsにはanchorが無いので、pivot(割合ではなくpxで指定)を使う)
octagon.pivot.x = 0;
octagon.pivot.y = 0;
//八角形の位置の指定(px)
octagon.x = 320;
octagon.y = 180;
//八角形をステージに追加
app.stage.addChild(octagon);
/////////////////////////////
//楕円が八角形の下に隠れているので、順番を変更して見えるようにする
//zIndexによる自動ソートを有効化
app.stage.sortableChildren = true;
//zIndexの初期値は0なので、楕円のzIndexを1にすると全面に出てくる
ellipse.zIndex = 1;
プロパティ変更
中心点、位置以外のプロパティ変更
サイズの変更
デフォルト値：1.0
スケーリングの補間方法：線形補間法
butaSprite.scale.x = 1.5;
butaSprite.scale.y = 1.5;
透明度の変更
alpha
butaSprite.alpha = 0.9;
回転
| 指定方式 | 意味 |
|---|---|
| rotation | ラジアンで指定 |
| angle | 度数で指定 |
//ラジアンで指定
butaSprite.rotation = Math.PI / 3;
//度数で指定
butaSprite.angle = 60;
色味
tint
色合いを調整(デフォルトは0xffffff)
butaSprite.tint = 0xffff00;
サンプルコード
/js/main.js
//アプリケーション「app」の作成(サイズは幅640px、高さは360px)
let app = new PIXI.Application({
width: 640,
height: 360,
backgroundColor: 0xffa500,
});
//body要素の最後の子としてapp.view(canvas)を追加
document.body.appendChild(app.view);
// テクスチャ用の画像を読み込む(triangle.pngは200px*200pxの画像)
let triangleTexture = new PIXI.Texture.from("./img/triangle.png");
// テクスチャを使ってスプライトを生成
let triangleSprite = new PIXI.Sprite(triangleTexture);
// スプライトの基準点の指定(0.5は中心の意味)
triangleSprite.anchor.x = 0.5;
triangleSprite.anchor.y = 0.5;
// スプライトの位置の指定(ビューの幅、高さの中央)
triangleSprite.x = app.screen.width / 2;
triangleSprite.y = app.screen.height / 2;
// ステージに追加
app.stage.addChild(triangleSprite);
/////////////////////
//サイズの変更
triangleSprite.scale.x = 1.5;
triangleSprite.scale.y = 1.5;
//透明度の変更
triangleSprite.alpha = 0.3;
//回転
triangleSprite.rotation = Math.PI / 3;
//色味の変更
triangleSprite.tint = 0x327fa8;
アニメーション
PixiJSは2Dの描画のライブラリなのでアニメーション機能は最低限しか用意されていない
フレームごとにプロパティを変更することでアニメーションを作成する
app.tickerでフレーム更新時の処理を指定する
deltaは描画が重くて1フレームに間に合わなくなった場合の差分(通常は0)
回転アニメーション
/js/main.js
//アプリケーション「app」の作成(サイズは幅640px、高さは360px)
let app = new PIXI.Application({
width: 640,
height: 360,
backgroundColor: 0xffa500,
});
//body要素の最後の子としてapp.view(canvas)を追加
document.body.appendChild(app.view);
// テクスチャ用の画像を読み込む(triangle.pngは200px*200pxの画像)
let triangleTexture = new PIXI.Texture.from("./img/triangle.png");
// テクスチャを使ってスプライトを生成
let triangleSprite = new PIXI.Sprite(triangleTexture);
// スプライトの基準点の指定(0.5は中心の意味)
triangleSprite.anchor.x = 0.5;
triangleSprite.anchor.y = 0.5;
// スプライトの位置の指定(ビューの幅、高さの中央)
triangleSprite.x = app.screen.width / 2;
triangleSprite.y = app.screen.height / 2;
// ステージに追加
app.stage.addChild(triangleSprite);
/////////////////////
//回転アニメーションの作成
const rotateAnimation = (delta) => {
// スプライト円を回転する
triangleSprite.angle += 2*( 1 + delta );
};
//回転アニメーションの実行
app.ticker.add(rotateAnimation);
//回転アニメーションの停止
//app.ticker.remove(rotateAnimation);
スプライトアニメーション
スプライトの画像のコマ送りによるアニメーション
/js/main.js
//アプリケーション「app」の作成(サイズは幅640px、高さは360px)
let app = new PIXI.Application({
width: 640,
height: 360,
backgroundColor: 0xffa500,
});
//body要素の最後の子としてapp.view(canvas)を追加
document.body.appendChild(app.view);
/////////////////////
//
const onLoaded = (loader, resources) => {
//スプライトシートから個別の画像をセット
const textures = resources.spritesheet.textures;
const textureGroup = Object.keys(textures).map((e) => textures[e]);
const spriteAnimation = new PIXI.AnimatedSprite(textureGroup);
////アニメーションさせるスプライトをステージに追加
app.stage.addChild(spriteAnimation);
//アニメーションさせるスプライトの中心
spriteAnimation.anchor.set(0.5);
//アニメーションさせるスプライトの位置
spriteAnimation.x = app.screen.width / 2;
spriteAnimation.y = app.screen.height / 2;
//アニメーションさせるスプライトのスピード
spriteAnimation.animationSpeed = 0.1;
//スプライトアニメーション開始
spriteAnimation.play();
};
app.loader
//スプライトシート読み込み
.add("spritesheet", "img/texture.json")
//読み込み完了後にonAssetsLoaded実行
.load(onLoaded);
インタラクション
クリック
スプライトをクリックするとconsole.logを実行
/js/main.js
//アプリケーション「app」の作成(サイズは幅640px、高さは360px)
let app = new PIXI.Application({
width: 640,
height: 360,
backgroundColor: 0xffa500,
});
//body要素の最後の子としてapp.view(canvas)を追加
document.body.appendChild(app.view);
// テクスチャ用の画像を読み込む(circle.pngは200px*200pxの画像)
let circleTexture = new PIXI.Texture.from("./img/circle.png");
// テクスチャを使ってスプライトを生成
let circleSprite = new PIXI.Sprite(circleTexture);
// スプライトの基準点の指定(0.5は中心の意味)
circleSprite.anchor.x = 0.5;
circleSprite.anchor.y = 0.5;
// スプライトの位置の指定(ビューの幅、高さの中央)
circleSprite.x = app.screen.width / 2;
circleSprite.y = app.screen.height / 2;
// ステージに追加
app.stage.addChild(circleSprite);
// スプライトのインタラクションを有効化
circleSprite.interactive = true;
// スプライトのマウスホバー時、「矢印カーソル」を「手のひらカーソル」に変更
circleSprite.buttonMode = true;
//テストメッセージの表示
const messageTest = (e) => {
console.log(e, "スプライトがクリックされた");
};
// スプライトにイベントリスナーを設定
circleSprite.on("pointertap", messageTest);
// スプライトのイベントリスナーを解除
//circleSprite.off("pointertap", messageTest);
イベントリスナー
ハンドラに渡るイベント：PIXI.interaction.InteractionEvent
| 設定/解除 | コード |
|---|---|
| 設定 | on() |
| 解除 | off() |
イベント
pointer系のイベント
PCのマウス操作、スマホのタッチ操作の両方で発火する
| イベント | 発火条件 |
|---|---|
| pointertap | オブジェクト上でマウスがクリック(orタップ)され、外れた時 |
| pointerdown | オブジェクト上でマウスがクリック(orタップ)されたとき |
| pointerup | オブジェクト上でマウスクリックが外れたとき |
オブジェクトをドラッグ
ドラッグイベントは無い
/js/main.js
//アプリケーション「app」の作成(サイズは幅640px、高さは360px)
let app = new PIXI.Application({
width: 640,
height: 360,
backgroundColor: 0xffa500,
});
//body要素の最後の子としてapp.view(canvas)を追加
document.body.appendChild(app.view);
// テクスチャ用の画像を読み込む(circle.pngは200px*200pxの画像)
let circleTexture = new PIXI.Texture.from("./img/circle.png");
// テクスチャを使ってスプライトを生成
let circleSprite = new PIXI.Sprite(circleTexture);
// スプライトの基準点の指定(0.5は中心の意味)
circleSprite.anchor.x = 0.5;
circleSprite.anchor.y = 0.5;
// スプライトの位置の指定(ビューの幅、高さの中央)
circleSprite.x = app.screen.width / 2;
circleSprite.y = app.screen.height / 2;
// ステージに追加
app.stage.addChild(circleSprite);
// スプライトのインタラクションを有効化
circleSprite.interactive = true;
// スプライトのマウスホバー時、「矢印カーソル」を「手のひらカーソル」に変更
circleSprite.buttonMode = true;
//スプライトのドラッグ
function dragSprite(e) {
//ドラッグ中のカーソルのポジションを取得(app.stage内での位置)
let position = e.data.getLocalPosition(app.stage);
// スプライトの位置に反映
circleSprite.x = position.x;
circleSprite.y = position.y;
}
//スプライト上でマウスクリックされたとき
const onPointerDown = () => {
// ドラッグイベントリスナーを設定
circleSprite.on("pointermove", dragSprite);
};
//スプライト上でマウスクリックが外れたとき
const onPointerUp = () => {
// ドラッグイベントリスナーを解除
circleSprite.off("pointermove", dragSprite);
};
//スプライトにイベントリスナーを設定
circleSprite.on("pointerdown", onPointerDown).on("pointerup", onPointerUp);
オブジェクトの追加や削除時のイベント
added
オブジェクトがコンテナに追加されたときに発火
| 項目名 | 型 |
|---|---|
| container | PIXI.Container |
removed
オブジェクトがコンテナから削除されたときに発火
| 項目名 | 型 |
|---|---|
| container | PIXI.Container |
removedFrom
オブジェクトがこののコンテナから削除されたときに発火
| 項目名 | 型 | 説明 |
|---|---|---|
| child | PIXI.DisplayObject | コンテナから削除される子要素 |
| container | PIXI.Container | 子要素を取り出されたコンテナ |
| index | 数値 | 削除された子要素の元子要素のインデックス |
destroyed
オブジェクトが破壊されたときに発火
ユーザー操作によるイベント
| イベント | 発火条件 | キャプチャフェーズ |
|---|---|---|
| click | オブジェクト上でポインタデバイスボタン（マウスの左ボタン）が押され、離されたときに発火 | clickcapture |
| mousedown | ディスプレイ上でマウス左ボタンが押されたときに発火 | mousedowncapture |
| mouseenter | マウスポインタがオブジェクトの上に移動し、その子孫のテスト境界をヒットしたときに発火 | mouseentercapture |
| mouseleave | マウスポインタがオブジェクトとその子孫から出るときに発火 | mouseleavecapture |
| mousemove | オブジェクトの上にポインタデバイス(マウス)が移動したときに発火 | mousemovecature |
| mouseout | ポインタデバイス(マウス)がディスプレイオブジェクトの外に移動したときに発火 | mouseoutcapture |
| mouseover | ポインタデバイス(マウス)がオブジェクト上に移動したときに発火 | mouseovercapture |
| mouseup | ポインタデバイスのボタン(通常はマウスの左ボタン)がオブジェクト上で離されたときに発火 | mouseupcature |
| mouseupoutside | マウスダウンを最初に登録したオブジェクトの外側で、ポインタデバイスボタン(マウスの左ボタン)が離されたときに発火 | mouseupoutsidecapture |
| pointercancel | OSがポインタイベントをキャンセルしたときに発火 | pointercancelcapture |
| pointerdown | オブジェクト上でポインタデバイスのボタンが押されたときに発火 | pointerdowncapture |
| pointerenter | オブジェクトの上にポインタが移動し、その子孫の境界がテストに当たったときに発火 | pointerentercapture |
| pointerleave | ポインタがオブジェクトとその子孫のヒットテストの境界を離れると発生する | pointerleavecapture |
| pointermove | オブジェクトの上にポインタデバイスが移動したときに発火 | pointermovecapture |
| pointerout | ポインタデバイスがオブジェクトから移動したときに発火 | pointeroutcapture |
| pointerover | ポインタデバイスがオブジェクト上に移動したときに発火 | pointerovercapture |
| pointertap | オブジェクト上でポインタデバイスボタンが押下、離されたときに発火 | pointertapcapture |
| pointerup | オブジェクト上でポインタデバイスボタンが離されたときに発火 | pointerupcapture |
| pointeroutside | ポインタデバイスのボタンが、ポインタダウンを最初に登録したディスプレイオブジェクトの外側で離されたときに発火 | pointerupoutsidecapture |
| rightclick | オブジェクト上でポインタデバイスのセカンダリボタン(マウスの右ボタン)が押され、離されたときに発火 | rightclickcapture |
| rightdown | オブジェクト上でポインタデバイスのセカンダリボタン(マウスの右ボタン)が押されたときに発火 | rightdowncapture |
| rightup | ポインタデバイスのセカンダリボタン(マウスの右ボタン)がオブジェクト上で離されたときに発火 | rightupcapture |
| rightupoutside | ポインタデバイスのセカンダリボタン(マウスの右ボタン)が、最初にrightdownを登録したディスプレイオブジェクトの外側で離されたときに発火 | rightupoutsidecapture |
| tap | オブジェクトにタッチポイントが配置されたり、取り外されたりしたときに発火 | tapcapture |
| touchchannel | OSがタッチをキャンセルしたときに発火 | touchcancelcapture |
| touchend | オブジェクトからタッチポイントが削除されたときに発火 | touchendcapture |
| touchendoutside | タッチポイントが、最初にタッチスタートを登録したディスプレイオブジェクトの外側で削除されたときに発火 | touchendoutsidecapture |
| touchmove | タッチポイントがディスプレイオブジェクトに沿って移動したときに発火 | touchmovecapture |
| touchstart | オブジェクトにタッチポイントが置かれたときに発火 | touchstartcapture |
衝突
/js/main.js
//アプリケーション「app」の作成(サイズは幅640px、高さは360px)
const app = new PIXI.Application({
width: 640,
height: 360,
backgroundColor: 0xffa500,
});
document.body.appendChild(app.view);
//敵グループ
let enemies = [];
//敵の共通半径
const radius = 30;
//敵1の形状の作成
const enemy1Shape = new PIXI.Graphics()
.beginFill(0xff4500)
.drawCircle(0, 0, radius)
.endFill();
//敵1のスプライト作成
const enemy1 = new PIXI.Sprite();
//敵1のスプライトに形状を追加
enemy1.addChild(enemy1Shape);
//敵1の中心
enemy1.anchor.set(0.5);
//敵1の位置
enemy1.position.set(140, 180);
//敵グループに敵1を追加
enemies.push(enemy1);
//敵2の形状の作成
const enemy2Shape = new PIXI.Graphics()
.beginFill(0xff4500)
.drawCircle(0, 0, radius)
.endFill();
//敵2のスプライト作成
const enemy2 = new PIXI.Sprite();
//敵2のスプライトに形状を追加
enemy2.addChild(enemy2Shape);
//敵2の中心
enemy2.anchor.set(0.5);
//敵2の位置
enemy2.position.set(500, 180);
//敵グループに敵3を追加
enemies.push(enemy2);
//敵3の形状の作成
const enemy3Shape = new PIXI.Graphics()
.beginFill(0xff4500)
.drawCircle(0, 0, radius)
.endFill();
//敵3のスプライト作成
const enemy3 = new PIXI.Sprite();
//敵3のスプライトに形状を追加
enemy3.addChild(enemy3Shape);
//敵3の中心
enemy3.anchor.set(0.5);
//敵3の位置
enemy3.position.set(320, 40);
//敵グループに敵3を追加
enemies.push(enemy3);
//敵4の形状の作成
const enemy4Shape = new PIXI.Graphics()
.beginFill(0xff4500)
.drawCircle(0, 0, radius)
.endFill();
//敵4のスプライト作成
const enemy4 = new PIXI.Sprite();
//敵4のスプライトに形状を追加
enemy4.addChild(enemy4Shape);
//敵4の中心
enemy4.anchor.set(0.5);
//敵4の位置
enemy4.position.set(320, 320);
//敵グループに敵4を追加
enemies.push(enemy4);
//敵をステージに追加
app.stage.addChild(enemy1, enemy2, enemy3, enemy4);
// ドラッグ状態を管理
let isDragging = false;
//自機の当たり判定の半径
const playerShapeRadius = 50;
//自機の作成
const player = new PIXI.Sprite.from("./img/circle.png");
//自機の大きさ(直径)
player.width = 100;
player.height = 100;
//自機のインタラクション有効化
player.interactive = true;
//自機のマウスホバー時のカーソル変更
player.buttonMode = false;
//自機の位置
player.position.set(320, 180);
//自機の中心
player.anchor.set(0.5);
//onPointerDown
const onPointerDown = () => {
isDragging = true;
player.on("pointermove", onPointerMove);
};
//onPointerUp
const onPointerUp = () => {
//isDraggingがfalseのとき
isDragging = false;
//pointermoveを解除する
player.removeListener("pointermove");
};
//onPointerMove
const onPointerMove = (e) => {
//isDraggingがfalseの時
if (isDragging) {
//定数targetに自機を格納
const target = e.currentTarget;
//定数positionにステージのローカル座標を格納
const position = e.data.getLocalPosition(app.stage);
//targetの位置を定数positionのxとyを代入
target.position.set(position.x, position.y);
//配列の長さだけ繰り返す
for (let i = 0; i < enemies.length; i++) {
//定数enemyCenterに敵[i]のx,y座標を格納
const enemyCenter = {
x: enemies[i].x,
y: enemies[i].y,
};
//自機と敵[i]の距離
const xDistance = enemyCenter.x - position.x;
const yDistance = enemyCenter.y - position.y;
const directDistance = Math.sqrt(
Math.pow(xDistance, 2) + Math.pow(yDistance, 2)
);
//自機と敵[i]の距離<(敵[i]の半径+自機の半径)の時
if (directDistance < radius + playerShapeRadius) {
//メッセージ
console.log("衝突した");
//自機を半透明にする
player.alpha = 0.5;
//敵[i]のサイズ変更
enemies[i].scale.set(1.2);
return;
} else {
//自機の透明度を戻す
player.alpha = 1;
//敵[i]のサイズを戻す
enemies[i].scale.set(1);
}
}
}
};
//イベントリスナー
player.on("pointerdown", onPointerDown);
player.on("pointerup", onPointerUp);
//自機をステージに追加
app.stage.addChild(player);
マスク
js/main.js
//アプリケーション「app」の作成(サイズは幅640px、高さは360px)
let app = new PIXI.Application({
width: 640,
height: 360,
backgroundColor: "0XDCDCDC",
});
//body要素の最後の子としてapp.view(canvas)を追加
document.body.appendChild(app.view);
///////////////////////////////////
//コンテナの作成
const container = new PIXI.Container();
//ステージにコンテナを配置
app.stage.addChild(container);
////////////////////////////////////
// ステージと同じ大きさの長方形を作成
let rect = new PIXI.Graphics()
.beginFill(0xff00ff, 1)
.drawRect(0, 0, 640, 360)
.endFill();
//コンテナに長方形を配置
container.addChild(rect);
//////////////////////////////////
//コンテナにマスクを設定(円形)
container.mask = new PIXI.Graphics()
.beginFill(0xffa500)
.drawCircle(320, 180, 160)
.endFill();
フィルター
| フィルターの種類 | 場所 | 例 |
|---|---|---|
| Built-In Filters | PixiJSに組み込まれている | 例：NoiseFilter、BlurFilterなど |
| PixiJS Filters | 外部ライブラリ「PixiJS Filters」に含まれる | 例：DotFilter、EmbossFilter、GlitchFilterなど |
サンプルコード
ブラーフィルター
/js/main.js
//アプリケーション「app」の作成(サイズは幅640px、高さは360px)
let app = new PIXI.Application({
width: 640,
height: 360,
backgroundColor: "0XDCDCDC",
});
//body要素の最後の子としてapp.view(canvas)を追加
document.body.appendChild(app.view);
///////////////////////////////////
// 円を描画
let circle = new PIXI.Graphics()
.beginFill(0xff0000) // 色を指定して塗りつぶし開始(endFill()まで有効)
.drawCircle(0, 0, 100) //円を描画
.endFill(); //beginFillの終了
// 基準点の指定
// (PIXI.Graphicsにはanchorが無いので、pivot(割合ではなくpxで指定)を使う)
circle.pivot.x = 0;
circle.pivot.y = 0;
// 位置の指定(px)
circle.x = 320;
circle.y = 180;
//回転の指定
circle.rotation = Math.PI / 1;
//ステージに追加
app.stage.addChild(circle);
//フィルター作成(ブラーフィルター)
const blurFilter = new PIXI.filters.BlurFilter();
blurFilter.quality = 0.1; //ブラーの質
circle.filters = [blurFilter];
/////////////////////////////
//ブラーの質のアニメーション作成
const blurAnimation = () => {
blurFilter.quality += 0.002;
};
//ブラーの質のアニメーション実行
app.ticker.add(blurAnimation);
Built-In Filters
AlphaFilter
アルファを適用する最も単純なフィルターを適用
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| alpha | 数値 | 1.0 | アルファ量(0~1) |
BlurFilter
ガウスぼかしをオブジェクトに適用
ぼかしの強さは、x軸とy軸に別々に設定できる
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| strength | 数値 | 8 | ブラーフィルタの強さ |
| quality | 数値 | 4 | ブラーフィルタの質 |
| resolution | 数値 | PIXI.settings.FILTER_RESOLUTION | ブラーフィルタの解像度 |
| kernelSize | 数値 | 5 | ブラーフィルタのカーネルサイズを指定(値：5、7、9、11、13、15) |
BlurFilterPass
水平または垂直のガウスぼかしをオブジェクトに適用
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| horizontal | 数値 | boolean | X軸(true)またはY軸(false)に沿って通過 |
| strength | 数値 | 8 | ブラーフィルタの強さ |
| quality | 数値 | 4 | ブラーフィルタの質 |
| resolution | 数値 | ブラーフィルタの解像度 | |
| kernelSize | 数値 | 5 | ブラーフィルタのカーネルサイズ(値：5、7、9、11、13、15) |
ColorMatrixFilter
displayObjectのすべてのピクセルのRGBAカラーとアルファ値に5x4マトリックス変換を適用して、RGBAカラーとアルファ値の新しいセットで結果を生成できる
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| alpha | 数値 | 1 | 元の色と結果の色を混合するときに使用する不透明度の値(0~1) |
| matrix | 配列<数値> |
[1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0] | カラーマトリックスフィルターのマトリックス |
DisplacementFilter
変位マップのピクセル値を使用して、オブジェクトの変位を実行
クレイジーなワープ効果のすべてのマナーを適用できる
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| sprite(必須) | PIXI.Sprite | ディスプレイスメントマップに使用するスプライト(シーンに追加されていることを確認) | |
| scale | 数値 | 変位の規模 |
NoiseFilter
ノイズ効果フィルター
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| noise | 数値 | 0.5 | ノイズの強度([0, 1]の範囲の正規化された値) |
| seed | 数値 | Math.random() | ノイズ生成のランダムシード |
PixiJS Filters
PixiJS Filtersを使うときは追加でスクリプトを読み込み
CDN：PixiJS Filters
<script src="https://cdn.jsdelivr.net/npm/pixi-filters@latest/dist/pixi-filters.js"></script>
AdjustmentFilter
下記のパラメータを調整する
- ガンマ
- コントラスト
- 彩度
- 明るさ
- アルファ
- カラーチャンネルシフト
マトリックスを使用しないので、 ColorMatrixFilterよりも高速で簡単
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| options.gamma | 数値 | 1 | ルミナンスの量 |
| options.saturation | 数値 | 1 | 色の飽和の量 |
| options.contrast | 数値 | 1 | コントラスト量 |
| options.brightness | 数値 | 1 | 全体の明るさ |
| options.red | 数値 | 1 | 多重化された赤チャンネル |
| options.green | 数値 | 1 | 多重化された緑チャンネル |
| options.blue | 数値 | 1 | 多重化された青チャンネル |
| options.alpha | 数値 | 1 | 全体のアルファの量 |
AdvancedBloomFilter
ブジェクトにブルーム効果を適用する
通常のブルームとの違い
ブルームの外観を調整するための高度なコントロールが可能
通常のブルームフィルターよりも低速
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| options.threshold | 数値 | 0.5 | ブルームに影響を与えるために必要な色の明るさを定義 |
| options.bloomScale | 数値 | 1.0 | ブルームの強さの調整値(値が高いと、明るさが強い) |
| options.brightness | 数値 | 1.0 | 明るさ(小さいと微妙な明るさ、大きいと白飛び) |
| options.blur | 数値 | 8 | ブラーのプロパティの強さを同時に設定する |
| options.quality | 数値 | 4 | ブラーフィルターの質 |
| options.kernels | 配列<数値> |
null | ブラーフィルターのカーネル |
| options.pixelSize | 数値 数値<配列> PIXI.Point |
1 | ブラーフィルタのピクセルサイズ |
| options.resolution | 数値 | PIXI.settings.FILTER_RESOLUTION | ブラーフィルターの解像度 |
optionsに数値を与えると、options.thresholdになる
AsciiFilter
ASCIIフィルター
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| size | 数値 | 8 | フォントのサイズ |
BevelFilter
ベベルフィルター
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| options.rotation | 数値 | 45 | 光の角度の指定(度数) |
| options.thickness | 数値 | 2 | ベベルの厚み |
| options.lightColor | 数値 | 0xffffff | 光の色 |
| options.lightAlpha | 数値 | 0.7 | 光のアルファ |
| options.shadowColor | 数値 | 0x000000 | シャドウの色 |
| options.shadowAlpha | 数値 | 0.7 | シャドウのアルファ |
BloomFilter
ガウスぼかしをオブジェクトに適用する
ぼかしの強さは、x軸とy軸に別々に設定可能
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| blur | 数値 PIXI.Point 配列<数値>
|
2 | ブラーXとブラーYの両方の強さを同時に設定する |
| quality | 数値 | 4 | ブラーXとブラーYのフィルターの品質 |
| resolution | 数値 | PIXI.settings.FILTER_RESOLUTION | ブラーXとブラーYのフィルターの解像度 |
| kernelSize | 数値 | 5 | ブラーXとブラーYのフィルターのカーネルサイズ(選択肢：5、7、9、11、13、15) |
BulgePinchFilter
画像を丸く膨らませたり、つまんだりする
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| options.center | PIXI.Point 数値<配列>
|
[0,0] | 効果円の中心のX座標とY座標 |
| options.radius | 数値 | 100 | 効果円の半径 |
| options.strength | 数値 | 1 | -1～1 (-1：強いピンチ、0 ：効果なし、1 ：強いバルジ) |
ColorMapFilter
オブジェクトにカラーマップ効果を適用する
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| colorMap | img要素 canvas要素 PIXI.BaseTexture PIXI.Texture |
フィルタのcolorMapテクスチャ | |
| nearest | 真偽 | false | colorMapのテクスチャに最寄りを使用するかどうか |
| mix | 数値 | 1 | 0~1(0：元画像、1：カラーマップされた画像) |
ColorOverlayFilter
ソースグラフィック内のすべての色を単色に置き換える
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| color | 数値 数値<配列>
|
0x000000 | 変更後の色をRGBで指定(例[1.0, 0.5, 1.0]) |
| alpha | 数値 | 1 | 色のアルファ値 |
ColorReplaceFilter
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| originalColor | 数値 数値<配列> 型付き配列 |
0xFF0000 | 変更元の色をRGBで指定(例[1.0, 1.0, 1.0]) |
| newColor | 数値 数値<配列> 型付き配列 |
0x000000 | 変更後の色をRGBで指定(例[1.0, 0.5, 1.0]) |
| epsilon | 数値 | 0.4 | 色間の浮動小数点比較の許容度/感度 (低いほどより正確、高いほどより包括的) |
ConvolutionFilter
行列畳み込みフィルター効果を適用する
畳み込みは、入力画像のピクセルを隣接するピクセルと組み合わせて、新しい画像を生成する
たたみ込みにより、ぼかし、エッジ検出、シャープニング、エンボス加工、面取りなど、さまざまな画像効果を実現できる
行列は9ポイントの配列として指定する必要がある
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| matrix | 配列<数値> |
[0,0,0,0,0,0,0,0,0] | 行列変換に使用する値の配列(9要素の配列として指定) |
| width | 数値 | 200 | 変形させるオブジェクトの幅 |
| height | 数値 | 200 | 変形させるオブジェクトの高さ |
CrossHatchFilter
クロスハッチ効果
CRTFilter
CRT効果をオブジェクトに適用する
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| options.curvature | 数値 | 1.0 | 交差した線の曲がり具合 |
| options.lineWidth | 数値 | 1.0 | インターレースされた線の幅 |
| options.lineContrast | 数値 | 0.25 | インターレースされた線のコントラスト |
| options.verticalLine | 数値 | false | trueは縦線、falseは横線 |
| options.noise | 数値 | 0.3 | ノイズ効果の不透明度/強度(0〜1) |
| options.noiseSize | 数値 | 1.0 | ノイズの粒子の大きさ |
| options.seed | 数値 | 0 | ランダムノイズの生成に適用するシード値 |
| options.vignetting | 数値 | 0.3 | ヴィネット効果の半径(値を小さくすると、ヴィネットが小さくなる) |
| options.vignettingAlpha | 数値 | 1.0 | ビネットの不透明度 |
| options.vignettingBlur | 数値 | 0.3 | ビネットのぼかしの強さ |
| options.time | 数値 | 0 | インターレースされた線のアニメーション用 |
DotFilter
オブジェクトにCRT効果を適用
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| options.curvature | 数値 | 1.0 | 交差した線の曲がり具合(数値が高いほど曲がる) |
| options.lineWidth | 数値 | 1.0 | インターレースされたラインの幅 |
| options.lineContrast | 数値 | 0.25 | インターレースされたラインのコントラスト |
| options.verticalLine | 数値 | false | true：垂直、false：水平 |
| options.noise | 数値 | 0.3 | ノイズ効果の不透明度/強度(0〜1) |
| options.noiseSize | 数値 | 1.0 | ノイズ粒子の大きさ |
| options.seed | 数値 | 0 | ランダムノイズの生成に使うシード値 |
| options.vignetting | 数値 | 0.3 | ビネット効果の半径 |
| options.vignettingAlpha | 数値 | 1.0 | ビネットの不透明度 |
| options.vignettingBlur | 数値 | 0.3 | ビネットのぼかし強度 |
| options.time | 数値 | 0 | インターレースされたラインのアニメーション用 |
DropShadowFilter
ドロップシャドウ
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| options.rotation | 数値 | 45 | シャドウの角度の指定(degree単位) |
| options.distance | 数値 | 5 | シャドウの距離 |
| options.color | 数値 | 0x000000 | シャドウの色 |
| options.alpha | 数値 | 0.5 | シャドウのアルファ |
| options.shadowOnly | 真偽 | false | シャドウのみレンダリングするかどうか |
| options.blur | 数値 | 2 | ブラーのプロパティの強さを同時に設定する |
| options.quality | 数値 | 3 | ブラーフィルターの質 |
| options.kernels | 配列<数値> |
null | ブラーフィルターのカーネル |
| options.pixelSize | 数値 数値<配列> PIXI.Point |
1 | ブラーフィルタのピクセルサイズ |
| options.resolution | 数値 | PIXI.settings.FILTER_RESOLUTION | ブラーフィルターの解像度 |
EmbossFilter
エンボス
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| strength | 数値 | 5 | エンボスの強さ |
GlitchFilter
オブジェクトにグリッチ効果を適用する
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| options.slices | 数値 | 5 | スライス数の最大値 |
| options.offset | 数値 | 100 | スライスの最大オフセット量 |
| options.direction | 数値 | 0 | スライスのオフセットの角度の指定(degree単位) |
| options.fillMode | 数値 | 0 | オフセット後のスペースのフィルモード |
| options.seed | 数値 | 0 | グリッチ効果をランダム化するためのシード値 |
| options.average | 真偽 | false | true：バンドがほぼ均等に分割される false：バンドの大きさが大きく変化 (よりランダムに見える) |
| options.minSize | 数値 | 8 | 個々のスライスの最小サイズ(全サンプルサイズに対するセグメント) |
| options.sampleSize | 数値 | 512 | ディスプレイスメントマップテクスチャの解像度 |
| options.red | 配列<数値> |
[0,0] | レッドチャンネルのオフセット |
| options.green | 配列<数値> |
[0,0] | グリーンチャンネルのオフセット |
| options.blue | 配列<数値> |
[0,0] | ブルーチャンネルのオフセット |
| fillModeの値 | 意味 |
|---|---|
| 0 | TRANSPARENT |
| 1 | ORIGINAL |
| 2 | LOOP |
| 3 | CLAMP |
| 4 | MIRROR |
GlowFilter
グロー効果
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| options.distance | 数値 | 10 | 光りの距離(resolution=2の場合は2倍にする)※フィルター作成後変更不可 |
| options.outerStrength | 数値 | 4 | スプライトのエッジから外側に向かうグローの強さ |
| options.innerStrength | 数値 | 0 | スプライトのエッジから内側に向かう光りの強さ |
| options.color | 数値 | 0xffffff | グローさせる色 |
| options.quality | 数値 | 0.1 | グローの質(0～1) 数値が高いほど、パフォーマンスが低下 |
| options.knockout | 数値 | false | true：コンテンツを隠し、グローだけを表示させる |
GodrayFilter
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| options.angle | 数値 | 30 | 光線の角度/光源 |
| options.gain | 数値 | 0.5 | 効果の強さ |
| options.lacunarity | 数値 | 2.5 | フラクタルノイズの密度 |
| options.parallel | 真偽値 | true | trueの場合は角度、falseの場合は中心 |
| options.time | 数値 | 0 | 現在の時間の位置 |
| options.center | PIXI.Point 数値<配列>
|
[0,0] | 平行でない光線の焦点(有効化するには、parallelをfalseに設定) |
| options.alpha | 数値 | 1.0 | アルファ値(光線の透過性に影響) |
KawaseBlurFilter
「ガウスぼかし」よりもはるかに高速だが、使用がより複雑
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| blur | 数値 数値<配列>
|
4 | フィルタのぼかしを指定(値が配列の場合、カーネルを設定) |
| quality | 数値 | 3 | フィルタの質(1以上の整数) |
| clamp | 真偽 | false | エッジをクランプする(フルスクリーンフィルターの暗いエッジや、filterAreaのエッジへのにじみを除去するのに有効) |
MotionBlurFilter
モーションブラーをオブジェクトに適用
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| velocity | PIXI.ObservablePoint PIXI.Point 配列<数値>
|
[0, 0] | ブラー効果のためのモーションの速度を設定 |
| kernelSize | 数値 | 5 | ブラーフィルタのカーネルサイズ指定(5以上の奇数) |
| offset | 数値 | 0 | ブラーフィルタのオフセット |
MultiColorReplaceFilter
色を別の色に置き換えるためのフィルター
ColorReplaceFilterとの違い
複数の色のサポート
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| replacements(必須) | 配列<配列> |
色のペア(1つ目の値は元の色、2つ目の値は目標にする色) | |
| epsilon | 数値 | 0.05 | 色間の浮動小数点比較の許容範囲(低いほど正確、高いほど包括的) |
| maxColors | 数値 | replacementsの長さ | フィルターが使用できる最大交換数(フラグメントのコンパイルは一回なので、構築後は変更負荷) |
OldFilmFilter
古いフィルム効果をオブジェクトに適用する
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| options.sepia | 数値 | 0.3 | セピア効果の飽和量(近1：飽和量が多い、近0： 飽和量が少ない、0 ：効果なし) |
| options.noise | 数値 | 0.3 | ノイズ効果の不透明度/強度(0〜1) |
| options.noiseSize | 数値 | 1.0 | ノイズ粒子の大きさ |
| options.scratch | 数値 | 0.5 | スクラッチの発生頻度 |
| options.scratchDensity | 数値 | 0.3 | スクラッチの数の密度 |
| options.scratchWidth | 数値 | 1.0 | スクラッチの幅 |
| options.vignetting | 数値 | 0.3 | ビネット効果の半径を指定(小さくすると、ヴィネットが小さくなる) |
| options.vignettingAlpha | 数値 | 1.0 | ビネットの不透明度 |
| options.vignettingBlur | 数値 | 0.3 | ビネットのぼかし強度 |
| seed | 数値 | 0 | ランダムなノイズの生成に適用される |
optionsに数値を渡すとseedになる
OutlineFilter
アウトラインフィルター
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| thickness | 数値 | 1 | 輪郭の太さ(解像度2の場合は2倍にする) |
| color | 数値 | 0x000000 | アウトラインの色 |
| quality | 数値 | 0.1 | アウトラインの質(0~1) 高くすると、パフォーマンス低、精度高 |
PixelateFilter
ピクセル効果を適用
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| size | PIXI.Point 数値<配列> 数値 |
10 | ピクセルサイズの幅/高さ、または正方形サイズのどちらか |
RadialBlurFilter
オブジェクトにモーションブラーを適用する
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| angle | 数値 | 0 | ブラー効果を出すための動きの角度を設定 |
| center | PIXI.Point 数値<配列>
|
[0,0] | ラジアル(放射状)の中心 |
| kernelSize | 数値 | 5 | ブラーフィルタのカーネルサイズ指定(3以上の奇数) |
| radius | 数値 | -1 | ぼかし半径の最大値(-1は無限大) |
RGBSplitFilter
RGBスプリットフィルター
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| red | PIXI.Point 数値<配列>
|
[-10,0] | 赤チャンネルのオフセット |
| green | PIXI.Point 数値<配列>
|
[0, 10] | 緑チャンネルのオフセット |
| blue | PIXI.Point 数値<配列>
|
[0, 0] | 青チャンネルのオフセット |
ReflectionFilter
反射効果を適用する
波のある水の反射をシミュレート
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| options.mirror | 数値 | true | trueは画像を反転させる、falseは波のみ |
| options.boundary | 数値 | 0.5 | 反射点の垂直位置( 小さいと反射が大きく、大きいと反射が小さく) |
| options.amplitude | 数値 | [0, 20] | 波の振幅の開始と終了 |
| options.waveLength | 数値 | [30, 100] | 波の始点と終点の長さ |
| options.alpha | 数値 | [1, 1] | アルファ値の開始と終了 |
| options.time | 数値 | 0 | 波の位置がアニメーションする時間 |
SimpleLightmapFilter
filterAreaを指定しないと結果が出ない
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| texture(必須) | PIXI.Texture | ライトマップがレンダリングされるテクスチャ | |
| color |
配列<数値> 数値 |
0x000000 | アンビエントカラーのRGBA配列 |
| alpha | 数値 | 1 | 色に依存しないデフォルトのアルファ値 (配列ではなく数値の場合) |
ShockwaveFilter
衝撃波効果を適用する
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| center | PIXI.Point 数値<配列>
|
[0.5, 0.5] | センタープロパティを参照 |
| options.amplitude | 数値 | 0.5 | アンプリチュードプロパティを参照 |
| options.wavelength | 数値 | 1.0 | 波長特性プロパティを参照 |
| options.speed | 数値 | 500.0 | スピードプロパティを参照 |
| options.brightness | 数値 | 8 | 輝度プロパティを参照 |
| options.radius | 数値 | 4 | 半径のプロパティを参照 |
| time | 数値 | 0 | タイムプロパティを参照 |
TiltShiftFilter
TiltShiftフィルター
TiltShiftXFilterとTiltShiftYFilterの両方のパスを管理する
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| blur | 数値 | 100 | ブラーの強さ |
| gradientBlur | 数値 | 600 | グラデーションブラーの強さ |
| start | PIXI.Point | null | エフェクトを開始するY値 |
| end | PIXI.Point | null | エフェクトを終了させるY値 |
ZoomBlurFilter
オブジェクトにズームブラーを適用する
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| options.strength | 数値 | 0.1 | ズームブラー効果の強さを設定する |
| options.center | PIXI.Point 数値<配列>
|
[0,0] | ズームの中心 |
| options.innerRadius | 数値 | 0 | ズームの内内半径を指定(内円内は、ズームブラー効果がかからない) |
| options.radius | 数値 | -1 | 半径 |
| options.maxKernelSize | 数値 | 32 | この値を小さくすると、ディザリングが多い低品質のブラーにできる |
TwistFilter
ツイスト効果を適用する
表示オブジェクトを指定された方向にツイストする
| プロパティ名 | 型 | デフォルト値 | 説明 |
|---|---|---|---|
| options.radius | 数値 | 200 | ツイストの半径 |
| options.angle | 数値 | 4 | ツイストの角度 |
| options.padding | 数値 | 20 | フィルター部分のパディング |
| options.offset | 数値 | ツイストの中心(ローカル、ピクセル座標) |
レスポンシブ
ライブラリを使用して幅可変対応が可能
scaletowindow.jsをjsフォルダ内に格納
index.html
<script src="/js/scaletowindow.js" defer></script>
/js/main.js
//ステージをウィンドウサイズに調整
scaleToWindow(app.view);
//ウィンドウリサイズ時にウィンドウサイズに調整
window.addEventListener("resize", () => {
scaleToWindow(app.view);
});
※もともとの幅より広げるとドットがカタガタするので、appやオブジェクトのサイズを大きくする調整が必要
npm
インストール
npm install pixi.js
npm install pixi-filters
使用
※バンドラーを使用してビルドする場合、PIXIグローバルにはアクセスできない
/js/main.js
import * as PIXI from 'pixi.js'
import { DotFilter } from 'pixi-filters';
const filter = new DotFilter();