先看效果：

代码注解：

class Example extends Phaser.Scene
{
    preload ()
    {
        // 首先初始化资源
        this.load.atlas('gems', 'assets/tests/columns/gems.png', 'assets/tests/columns/gems.json');
    }

    create ()
    {
        //  首先定义初始化动画

        this.anims.create({ key: 'ruby', frames: this.anims.generateFrameNames('gems', { prefix: 'ruby_', end: 6, zeroPad: 4 }), repeat: -1 });
        this.anims.create({ key: 'square', frames: this.anims.generateFrameNames('gems', { prefix: 'square_', end: 14, zeroPad: 4 }), repeat: -1 });

        //  精灵的配置项
        const config = {
            key: 'gems', // 配置唯一ID
            x: { randInt: [ 0, 800 ] }, // x坐标随机范围
            y: { randInt: [ 0, 300 ] }, // y坐标随机范围
            scale: { randFloat: [ 0.5, 1.5 ] }, // 缩放
            anims: 'ruby' //调用上面哪一种动画配置
        };

        //  使用上面的配置制作16个精灵
        for (let i = 0; i < 16; i++)
        {
            this.make.sprite(config);
        }

        //  更复杂的动画配置对象。
        //  这次调用delayedPlay是一个函数。
        const config2 = {
            key: 'gems',
            frame: 'square_0000',
            x: { randInt: [ 0, 800 ] },
            y: { randInt: [ 300, 600 ] },
            scale: { randFloat: [ 0.5, 1.5 ] },
            anims: { //精确定义动画参数
                key: 'square',
                repeat: -1, //重复
                repeatDelay: { randInt: [ 1000, 4000 ] }, //重复延迟随机范围
                delayedPlay: function () //初始化延迟时间也是随机的
                {
                    return Math.random() * 6000;
                }
            }
        };

        //  使用上面的配置制作16个精灵
        for (let i = 0; i < 16; i++)
        {
            this.make.sprite(config2);
        }
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    pixelArt: true,
    width: 800,
    height: 600,
    scene: Example
};

const game = new Phaser.Game(config);

以上就是phaser3精灵旋转动画代码讲解全部内容,感谢大家支持自学php网。