3テラバイト

プログラム関連備忘録サイト。主にゲーム。

PixiJS

PixiJSで画像を表示する方法

投稿日:

確認環境

  • PixiJS v6.2.1

コード

画像を表示する

const app = new PIXI.Application();
document.body.appendChild(app.view);

const image = PIXI.Sprite.from('assets/image.png');
app.stage.addChild(image);

位置を設定する

image.x = 0;
image.y = 0;

アンカーポイントを設定する

デフォルトは(0, 0)になっており、左上の点がアンカーになっています。
X, Yが同じ値の場合は、省略して0.5とすることもできます。

image.anchor.set(0.5, 0.5);

スケールを設定する

デフォルトは(1, 1)になっています。

image.scale.set(1.5, 1.5);

アルファを設定する

0から1の範囲で設定します。
デフォルトは1になっています。

image.alpha = 0.5;

リンク

PixiJS API Documentation
https://pixijs.download/release/docs/PIXI.Sprite.html

-PixiJS


comment

メールアドレスが公開されることはありません。

関連記事

no image

PixiJSで動画を再生する方法

コード const app = new PIXI.Application({ transparent: true }); document.body.appendChild(app.view); co …

no image

PixiJSで文字を表示する方法

確認環境 PixiJS v6.2.1 コード 文字を表示する const app = new PIXI.Application({ backgroundColor: 0xffffff }); docu …

no image

PixiJSでボタンを作成する方法

以下の例ではSpriteをボタンにしています。interactiveをtrueにするとインタラクションイベントが有効になり、以降で設定しているonメソッドで指定しているイベントが発火するようになります …