如果是简单的体验pixi,可以直接const sprite = new PIXI.sprite('路径');创建精灵,但是如果是做复杂一点的东西,静态资源比较多,就需要使用loader等API

    使用雪碧图和sprite,loader,rectangle,texture创建一个Sprite:

    1. const loader = new PIXI.loader();
    2. //使用pixi加载图片并添加别名.添加雪碧图配置文件文件
    3. loader.add('image','./image.png').add('spaceship','shaceship.json');
    4. loader.load((load,resource)=>{
    5. //获取雪碧图配置文件添加精灵动画,animations是一个texture对象
    6. const id = resource.spaceship.spritesheet.animations;
    7. const sprite = new PIXI.AnimatedSprite(id['图片名称']);
    8. //要图片动起来
    9. sprite.play();
    10. //循环一直播放
    11. sprite.loop = true;
    12. //设置图片速度
    13. sprite.animationSpeed = 0.2;
    14. //图片完成后的事件
    15. sprite.oncompile = () => {
    16. console.log('播放完成');
    17. }
    18. })

    这样就可以让图片一直动起来了!!