@tbminiapp/pixi-apng-textures

This packages contains the loaders for apng file formats

Installation

npm install @tbminiapp/pixi-apng-textures

Usage

import { APNGLoader } from '@tbminiapp/pixi-apng-textures';
import { Loader } from '@tbminiapp/pixi-loaders';

PIXI.Loader.registerPlugin(APNGLoader);
const loader = new PIXI.Loader();
// apng文件的扩展名必须为.apng loader会根据扩展名去判断使用哪种解析器进行文件解析
// apng解析器会根据文件的arraybuffer头部签名来判断是否为apng文件，如果非apng文件 使用了.apng扩展名，则resource为null
const textureKey = 'flowerball';
loader.add(textureKey, 'https://img.alicdn.com/imgextra/i2/O1CN01r3wWKG1wfwDE15AKb_!!6000000006336-54-tps-270-270.apng')
loader.load((_loader, resource) => {
    const explosionTextures = [];
    // frameDelay: 帧间隔时间 ms
    // frameTextureKeys: apng分帧后 每一帧在TextureCache中的 cacheId,
    // frameCount: apng 总帧数,
    const { frameDelay, frameTextureKeys, frameCount } = resource[textureKey];
    frameTextureKeys.forEach((item, index) => {
        explosionTextures.push(PIXI.Texture.from(item));
    })
    const animatedSprite = new PIXI.AnimatedSprite(explosionTextures);
    animatedSprite.animationSpeed = 0.5;
    animatedSprite.play();
    animatedSprite.anchor.set(0.5);
    animatedSprite.position.set(application.screen.width / 2, application.screen.height / 2)
    application.stage.addChild(animatedSprite);
});