LoginSignup
1
1

More than 3 years have passed since last update.

PixiJSで拡張子が画像ファイルでないURLを読み込んでTextureとして扱う

Posted at

PHPなどでjpgを出力させ、それをPixiJSで読み込むときの方法

resource-loaderの中身はPIXI.Loaderのようだが引き続き要調査

import * as PIXI from 'pixi.js'
// Pixiをインストールすると使える。要調査↓↓
import { Loader, Resource } from 'resource-loader'

const container = new PIXI.Application({
    resolution: devicePixelRatio,
    transparent: true,
})

const imageLoader = new Loader()
//画像のURLと読み込みタイプの設定
imageLoader.add('image', './api/imageGenerate.php?' + new Date().getTime(), { loadType: Resource.LOAD_TYPE.IMAGE})
//完了時のイベントハンドラ
imageLoader.onComplete.add(() =>
    .imageLoaded()
)
//読み込みを開始
this.imageLoader.load()

//完了時に実行
imageLoaded() {
        const imageSprite = new PIXI.Sprite()
        container.stage.addChild(.imageSprite)
        //読み込まれるデータがImage(imgタグ)なのでTextureに変換する
        this.imageSprite.texture = new PIXI.Texture(new PIXI.BaseTexture(imageLoader.resources.image.data))
}
1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1