phaser3动画爆炸效果-自学php网

phaser3动画爆炸效果

来源：未知时间：2023-10-28 09:22 作者：小飞侠阅读:次

[导读] 代码讲解： classExampleextendsPhaser.Scene{constructor(){super();}preload(){//加载动画资源和配置this.load.spritesheet(boom,assets/sprites/explosion.png,{frameWidth:64,frameHeight:64,endFrame:23});}create(){constconfig={key:exp...

效果图：

素材：explosion.png

爆炸效果.png

代码讲解：

class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        //加载动画资源和配置
        this.load.spritesheet('boom', 'assets/sprites/explosion.png', { frameWidth: 64, frameHeight: 64, endFrame: 23 });
    }

    create ()
    {
        const config = {
            key: 'explode',
            frames: 'boom',
            frameRate: 30,
            repeat: -1,
            repeatDelay: 2000
        };

        this.anims.create(config);

        for (let i = 0; i < 256; i++)
        {
            let x = Phaser.Math.Between(0, 800);
            let y = Phaser.Math.Between(0, 600);

            let boom = this.add.sprite(x, y, 'boom', 23);

            //  Each one can have a random start delay
            boom.play({
                key: 'explode',
                delay: Math.random() * 3000
            });
        }
    }
}

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

const game = new Phaser.Game(config);

知识点1：spritesheet

加载动画资源，

在官方文档 Phaser . Loader . LoaderPlugin 下有一个

spritesheet(key, [url], [frameConfig], [xhrSettings]) 方法

具体配置参照图：

name 名字	type 类型	arguments 参数	description 描述
key	string \| Phaser.Types.Loader.FileTypes.SpriteSheetFileConfig \| Array.<Phaser.Types.Loader.FileTypes.SpriteSheetFileConfig>		用于此文件、文件配置对象或它们的数组的键。
url	string	<optional>	要从中加载此文件的绝对或相对 URL。如果未定义，或者 `null` 它将设置为，即如果是“外星人” `<key>.png` ，那么 `key` URL 将是“外星人.png”。
frameConfig 框架配置	Phaser.Types.Loader.FileTypes.ImageFrameConfig	<optional>	框架配置对象。至少它应该有一个 `frameWidth` 属性。
xhrSettings xhr设置	Phaser.Types.Loader.XHRSettingsObject	<optional>	XHR 设置配置对象。用于替换加载程序的默认 XHR 设置。

this.load.spritesheet('boom', 'assets/sprites/explosion.png', { frameWidth: 64, frameHeight: 64, endFrame: 23 });

知识点2：创建动画，并启动

            ...
            const config = {
                key: 'explode',
                frames: 'boom',
                frameRate: 30,
                repeat: -1,
                repeatDelay: 2000
            };
            this.anims.create(config);
            ...
            boom.play({
                key: 'explode',
                delay: Math.random() * 3000
            });

参数配置参考：

name 名字	type 类型	arguments 参数	Default 违约	description 描述
key	string 字符串	<optional>		The key that the animation will be associated with. i.e. sprite.animations.play(key) 动画将与之关联的键。即 sprite.animations.play（key）
frames 框架	string \| Array.<Phaser.Types.Animations.AnimationFrame> 字符串 \|数组。< Phaser.Types.Animations.AnimationFrame>	<optional>		Either a string, in which case it will use all frames from a texture with the matching key, or an array of Animation Frame configuration objects. 字符串（在这种情况下，它将使用具有匹配键的纹理中的所有帧）或动画帧配置对象的数组。
sortFrames sortFrames（排序帧）	boolean 布尔	<optional>	true 真	If you provide a string for `frames` you can optionally have the frame names numerically sorted. 如果提供字符串， `frames` 则可以选择对帧名称进行数字排序。
defaultTextureKey defaultTextureKey （默认纹理键）	string 字符串	<optional>	null 零	The key of the texture all frames of the animation will use. Can be overridden on a per frame basis. 动画的所有帧都将使用的纹理键。可以按帧覆盖。
frameRate 帧率	number 数	<optional>		The frame rate of playback in frames per second (default 24 if duration is null) 播放的帧速率（以每秒帧数为单位）（如果持续时间为 null，则默认为 24）
duration 期间	number 数	<optional>		How long the animation should play for in milliseconds. If not given its derived from frameRate. 动画应播放多长时间（以毫秒为单位）。如果没有给出它派生自 frameRate。
skipMissedFrames skipMissed帧	boolean 布尔	<optional>	true 真	Skip frames if the time lags, or always advanced anyway? 如果时间滞后，则跳过帧，还是无论如何都要前进？
delay 延迟	number 数	<optional>	0	Delay before starting playback. Value given in milliseconds. 开始播放前的延迟。以毫秒为单位给出的值。
repeat 重复	number 数	<optional>	0	Number of times to repeat the animation (-1 for infinity) 重复动画的次数（-1 表示无穷大）
repeatDelay 重复延迟	number 数	<optional>	0	Delay before the animation repeats. Value given in milliseconds. 动画重复前的延迟。以毫秒为单位给出的值。
yoyo 溜溜球	boolean 布尔	<optional>	false 假	Should the animation yoyo? (reverse back down to the start) before repeating? 动画应该溜溜球吗？（倒回起点）在重复之前？
showBeforeDelay showBefore延迟	boolean 布尔	<optional>	false 假	If this animation has a delay, should it show the first frame immediately (true), or only after the delay (false) 如果此动画有延迟，它应该立即显示第一帧（true），还是仅在延迟后显示（false）
showOnStart	boolean 布尔	<optional>	false 假	Should sprite.visible = true when the animation starts to play? This happens after any delay, if set. 动画开始播放时 sprite.visible = true 吗？如果设置了任何延迟，这将发生。
hideOnComplete	boolean 布尔	<optional>	false 假	Should sprite.visible = false when the animation finishes? 动画完成时 sprite.visible = false 应该吗？

以上就是phaser3动画爆炸效果全部内容,感谢大家支持自学php网。

phaser3相机代码demo讲解

phaser3图片精灵人物每个状态动画

子栏目

phaser3动画爆炸效果

代码讲解：

知识点1：spritesheet

知识点2：创建动画，并启动

最新评论

添加评论

更多文章推荐

添加评论