如果是简单的体验pixi,可以直接const sprite = new PIXI.sprite('路径');
创建精灵,但是如果是做复杂一点的东西,静态资源比较多,就需要使用loader等API
使用雪碧图和sprite,loader,rectangle,texture创建一个Sprite:
const loader = new PIXI.loader();
//使用pixi加载图片并添加别名.添加雪碧图配置文件文件
loader.add('image','./image.png').add('spaceship','shaceship.json');
loader.load((load,resource)=>{
//获取雪碧图配置文件添加精灵动画,animations是一个texture对象
const id = resource.spaceship.spritesheet.animations;
const sprite = new PIXI.AnimatedSprite(id['图片名称']);
//要图片动起来
sprite.play();
//循环一直播放
sprite.loop = true;
//设置图片速度
sprite.animationSpeed = 0.2;
//图片完成后的事件
sprite.oncompile = () => {
console.log('播放完成');
}
})
这样就可以让图片一直动起来了!!