Phaser3 之 this.add.sprite

本文详细介绍了Phaser游戏框架中的动画控制方法,包括监听器的添加、动画播放的延迟控制、动画方向的反转及动画状态的获取等功能,帮助开发者更好地掌握游戏动画的设计与实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

文章目录

sprite

var mysprite = this.add.sprite(...)

on(event, fn [, context]) 为给定事件添加侦听器。

animationrepeat 等同于 Phaser.Animations.Events.ANIMATION_REPEAT
animationcomplete == Phaser.Animations.Events.ANIMATION_COMPLETE
animationcomplete-
animationrestart
animationstart == Phaser.Animations.Events.ANIMATION_START
animationstop == Phaser.Animations.Events.ANIMATION_STOP
animationupdate == Phaser.Animations.Events.ANIMATION_UPDATE

//animationrepeat 动画重复事件。  当动画在其上重复播放时,此事件由 Sprite 调度。
mysprite.on('animationrepeat', listener)

setDepth(value) 这个游戏对象在场景中的深度。(使用setDepth:不会出现生硬的对象重叠在一起)

在某些环境中,深度也称为“z-index”,它允许您更改游戏对象的渲染顺序,而无需实际移动它们在显示列表中的位置。
默认深度为零。具有较高深度值的游戏对象将始终呈现在具有较低深度值的游戏对象之前。
设置深度将使场景内的深度排序事件排队。

参数:
value 数字 这个游戏对象的深度。


var troop1 = this.add.sprite(500, 340, 'soldier', 'Soldier_2_shot_up_1').play('shoot1');
var troop2 = this.add.sprite(500, 310, 'soldier', 'soldier_3_shoot_front_1').play('shoot2');
// 默认下面的会覆盖上面的,即troop2覆盖了troop1,此时想要troop1覆盖troop2,就需要色设置setDepth  troop1大于troop2

troop1.setDepth(2);
troop2.setDepth(1);

playAfterDelay(key, delay) 等待指定的延迟(以毫秒为单位),然后开始播放给定的动画。 当多个对象使用过一个动画的时候会出同时运动同时停止的情况,使用playAfterDelay可以设置延时

如果动画在其配置中也设置了延迟值,它将被添加到此处给出的延迟中。
如果一个动画已经在运行并且一个新动画被赋予这个方法,它会在开始新动画之前等待给定的延迟。
如果当前没有动画正在运行,给定的动画在延迟后开始。
在 Sprite 上播放动画时,它首先会检查是否可以在 Sprite 本地找到匹配的键。如果可以,它将播放本地动画。如果没有,它将搜索全局动画管理器并在那里寻找它。
在 Phaser 3.50 之前,此方法称为“delayedPlay”。

参数:
key 字符串 | Phaser.Animations.Animation | Phaser.Types.Animations.PlayAnimationConfig 要播放的动画、动画实例或PlayAnimationConfig对象的基于字符串的键。
delay 数字 在开始播放动画之前等待的延迟(以毫秒为单位)。

this.add.sprite(...).playAfterDelay({ key: 'shoot1', repeatDelay: 800 }, 800);

playReverse(key [, ignoreIfPlaying]) 在Sprite 上反向播放动画。

Phaser 中的动画可以属于全局动画管理器,也可以专门属于此 Sprite。
全局动画的好处是多个 Sprite 都可以播放相同的动画,而无需复制数据。您只需创建一次,然后在任何 Sprite 上播放即可。

key 字符串 | Phaser.Animations.Animation | Phaser.Types.Animations.PlayAnimationConfig 要播放的动画、动画实例或PlayAnimationConfig对象的基于字符串的键。
ignoreIfPlaying 布尔值 <可选>false 如果动画已经在播放,则忽略此调用。

mysprite.playReverse('walk');

reverse() 反转已经在游戏对象上播放的动画。

mysprite.anims.reverse();

anims 这个精灵的动画控制器。

var mysprite = this.add.sprite(...)
mysprite.anims

getName() 返回当前正在加载的动画的键。

在 Phaser 3.50 之前,此方法被称为getCurrentKey

mysprite.anims.getName() 

isPaused :boolean true如果当前动画暂停,否则false.

var ret = mysprite.anims.isPaused

yoyo :boolean yoyo:true 将反向播放的动画,从结束到开始,然后重复或完成。yoyo:false球的动画只会从头到尾播放。

var ret = mysprite.anims.yoyo

isPlaying :boolean 当前是否正在播放动画

var ret = mysprite.anims.isPlaying

accumulator number 内部时间溢出累加器。

delta作为update步骤的一部分,这将添加时间。

var ret = mysprite.anims.accumulator

nextTick :number 下一个动画帧将发生变化的时间点。

该值与accumulator作为update步骤的一部分进行比较。

var ret = mysprite.anims.nextTick

getProgress() mysprite.anims.getProgress;

返回一个介于 0 和 1 之间的值,指示此动画的播放距离,忽略重复和 yoyos。如果动画定义了非零重复,getProgress并且getTotalProgress会有所不同,因为getProgress不包含任何重复或重复延迟,而包含getTotalProgress。

 this.catimg = this.add.sprite(400,300,'cat1');
 this.catimg.play('playcat');

this.catimg.anims.getProgress();

getName() 返回当前加载的动画的key。

 var mysprite = this.add.sprite(500, 536)
 mysprite.anims.getName()

playAfterRepeat(key [, repeatCount]) 等待上一个动画完成repeatCount重复循环的次数,然后开始播放给定的动画。

您可以使用它来确保两组动画之间没有剧烈的跳跃,即从空闲动画到行走动画,让它们平滑地相互融合。
如果当前没有动画正在运行,给定的动画将立即开始。
在 Sprite 上播放动画时,它首先会检查是否可以在 Sprite 本地找到匹配的键。如果可以,它将播放本地动画。如果没有,它将搜索全局动画管理器并在那里寻找它。

参数:
key 字符串 | Phaser.Animations.Animation | Phaser.Types.Animations.PlayAnimationConfig 要播放的动画、动画实例或PlayAnimationConfig对象的基于字符串的键。
repeatCount 数字 <可选>1 在下一个开始之前动画应该重复多少次?

this.anims.create({ key: 'idle', frames: [...], repeat: -1, repeatDelay: 500, frameRate: 18 });
this.anims.create({ key: 'turn', frames: [...], frameRate: 12 });

const ripley = this.add.sprite(400, 300, 'alien').play('idle'); // 首先播放idle,
ripley.anims.playAfterRepeat('turn'); // 当idle完成第一次,开始repeat的时候播放 playAfterRepeat里面的,播放turn,

chain(key) 设置一个动画或一组动画,在上一个动画完成或停止后立即播放。

当上一个动画必须进入“已完成”状态才能发生这种情况,即完成其所有重复、延迟等,或者stop直接在其上调用该方法。
设置为永远重复的动画永远不会进入完成状态。
您可以在任何时候链接一个新动画,包括在当前动画开始播放之前、播放期间或结束时(通过其animationcomplete事件)。
链接动画特定于游戏对象,这意味着不同的游戏对象可以具有不同的链接动画,而不会影响它们正在播放的动画。
不带参数调用此方法以重置所有当前链接的动画。
在 Sprite 上播放动画时,它首先会检查是否可以在 Sprite 本地找到匹配的键。如果可以,它将播放本地动画。如果没有,它将搜索全局动画管理器并在那里寻找它。

key 字符串 | Phaser.Animations.Animation | Phaser.Types.Animations.PlayAnimationConfig | 数组。<字符串> | 数组。< Phaser.Animations.Animation > | Array.< Phaser.Types.Animations.PlayAnimationConfig > 要播放的动画的基于字符串的键,或者 Animation 实例,或者一个PlayAnimationConfig对象,或者它们的数组。

this.anims.create({ key: 'idle', frames: [...], repeat: -1, repeatDelay: 500, frameRate: 18 });
this.anims.create({ key: 'turn', frames: [...], frameRate: 12 });
this.anims.create({ key: 'walk', frames: [...], repeat: -1, frameRate: 18 });

const ripley = this.add.sprite(400, 300, 'alien').play('idle'); // 首先播放idle,
ripley.anims.playAfterRepeat('turn'); // 当idle完成第一次,开始repeat的时候播放 playAfterRepeat里面的,播放turn,
ripley.anims.chain('walk'); // idle会循环,turn值播放一次,所哟turn播放停止后播放walk

//  下面这种不会播放walk,因为idle会重复播放,并不会停止。
const ripley = this.add.sprite(400, 300, 'alien').play('idle'); // 首先播放idle,
ripley.anims.chain('walk'); // idle会循环,turn值播放一次,所哟turn播放停止后播放walk

reverse() 反转已经在游戏对象上播放的动画。 (反向播放动画)

mysprite.anims.reverse(); 

resume( [fromFrame]) 恢复播放暂停的动画并将isPlaying属性设置为true。您可以选择告诉它从特定帧开始播放。

参数:
fromFrame Phaser.Animations.AnimationFrame <可选>
在重新开始播放之前设置的可选帧。

mysprite.anims.resume();

pause([atFrame]) 暂停当前​​动画并将isPlaying属性设置为false。您可以选择在特定帧暂停它。

参数:
atFrame Phaser.Animations.AnimationFrame <可选>暂停动画后设置的可选帧。

mysprite.anims.pause();

restart( [includeDelay] [, resetRepeats]) 从头开始重新启动当前动画。

您也可以选择重置延迟和重复计数器。
调用它会ANIMATION_RESTART立即触发事件
如果你includeDelay那么它也会ANIMATION_START在延迟到期后触发事件,否则,播放将立即开始。

includeDelay 布尔值 <可选>false 重启时是否包含动画的延迟值。
resetRepeats 布尔值 <可选>false 是否重置重复计数器?

mysprite.anims.restart();

playAfterRepeat(key [, repeatCount]) 等待当前动画完成repeatCount重复循环的次数,然后开始播放给定的动画。

等待当前动画完成repeatCount重复循环的次数,然后开始播放给定的动画。
您可以使用它来确保两组动画之间没有剧烈的跳跃,即从空闲动画到行走动画,让它们平滑地相互融合。
如果当前没有动画正在运行,给定的动画将立即开始。
在 Sprite 上播放动画时,它首先会检查是否可以在 Sprite 本地找到匹配的键。如果可以,它将播放本地动画。如果没有,它将搜索全局动画管理器并在那里寻找它。

参数:
key 字符串 | Phaser.Animations.Animation | Phaser.Types.Animations.PlayAnimationConfig 要播放的动画、动画实例或PlayAnimationConfig对象的基于字符串的键。
repeatCount 数字 <可选> 1 在下一个开始之前动画应该重复多少次?

chain(key) 设置一个动画或一组动画,在当前动画完成或停止后立即播放。 使用到的动画注意不要将repeat设置为-1,

当前动画必须进入“已完成”状态才能发生这种情况,即完成其所有重复、延迟等,或者stop直接在其上调用该方法。
设置为 repeat:-1 的动画永远不会进入完成状态。
您可以在任何时候链接一个新动画,包括在当前动画开始播放之前、播放期间或结束时(通过其animationcomplete事件)。
链接动画特定于游戏对象,这意味着不同的游戏对象可以具有不同的链接动画,而不会影响它们正在播放的动画。
不带参数调用此方法以重置所有当前链接的动画。
在 Sprite 上播放动画时,它首先会检查是否可以在 Sprite 本地找到匹配的键。如果可以,它将播放本地动画。如果没有,它将搜索全局动画管理器并在那里寻找它。

参数:
key 字符串 | Phaser.Animations.Animation | Phaser.Types.Animations.PlayAnimationConfig | 数组。<字符串> | 数组。< Phaser.Animations.Animation > | Array.< Phaser.Types.Animations.PlayAnimationConfig >
要播放的动画的基于字符串的键,或者 Animation 实例,或者一个PlayAnimationConfig对象,或者它们的数组。

setName(value)

设置name此游戏对象的属性并返回此游戏对象以进行进一步链接。该name属性未由 Phaser 填充,仅供您自己使用。

this.load.image('apple', 'assets/sprites/apple.png');
this.add.sprite(200, 300, 'apple').setName('apple1');
var sprite = this.add.sprite(400, 300, 'apple').setName('apple2');

console.log(sprite.name) // apple2
<think>我们正在处理用户关于Phaser 3游戏开发框架的教程和使用指南的请求。根据提供的引用和用户的问题,我们将构建一个结构化的回答,包括环境搭建、基本概念、代码示例以及相关问题。 首先,我们注意到用户提供的引用中包含了Phaser 3的相关信息: - 引用[1]:介绍了Phaser是一个HTML5游戏框架,支持现代浏览器(桌面和移动),只要浏览器支持canvas标签即可。 - 引用[2]:提供了Phaser基础入门的开发环境搭建与配置,包括一个简单的游戏示例代码。 - 引用[3]:介绍了Phaser3的渲染器类型(WebGL或Canvas)以及如何设置。 - 引用[4]:提醒了初学者要注意中文资料的版本问题(phaser2与phaser3不兼容),并建议以官方文档为主。 根据这些信息,我们将组织回答如下: 1. **Phaser 3简介**:简要介绍Phaser 3是什么,以及它的特点。 2. **环境搭建**:包括安装Phaser 3和创建项目的基本步骤。 3. **核心概念**:介绍Phaser 3中的场景(Scene)、预加载(preload)、创建(create)、更新(update)等概念。 4. **一个简单示例**:创建一个显示图片的简单游戏,并解释代码。 5. **进一步学习资源**:提供官方文档和教程的链接。 最后,根据用户要求,我们将生成相关问题。 注意:由于用户要求使用中文回答,并且需要按照系统级指令处理数学公式(但本问题不涉及数学公式,所以可以忽略),以及引用标识。在回答中,我们将引用提供的引用内容,并在末尾添加引用标识。 现在,我们开始撰写回答。</think>### Phaser 3 游戏开发入门指南 #### 一、环境搭建与配置 1. **安装Phaser 3** 通过npm安装: ```bash npm install phaser ``` 或CDN引入: ```html <script src="//cdn.jsdelivr.net/npm/phaser@3.60.0/dist/phaser.min.js"></script> ``` 2. **项目结构** 基础文件结构: ``` project/ ├── index.html ├── game.js └── assets/ └── images/ └── player.png ``` 3. **配置文件**(game.js) ```javascript const config = { type: Phaser.AUTO, // 自动选择WebGL或Canvas渲染[^3] width: 800, height: 600, physics: { default: &#39;arcade&#39;, // 内置物理引擎 arcade: { gravity: { y: 300 } } }, scene: { preload, create, update } // 三大生命周期函数 }; new Phaser.Game(config); ``` #### 二、核心概念与流程 1. **场景生命周期** - `preload()`:加载图片/音频等资源 ```javascript function preload() { this.load.image(&#39;player&#39;, &#39;assets/images/player.png&#39;); } ``` - `create()`:初始化游戏对象 ```javascript function create() { this.player = this.physics.add.sprite(100, 100, &#39;player&#39;); } ``` - `update()`:每帧执行的游戏逻辑 ```javascript function update() { if (this.cursors.left.isDown) this.player.x -= 5; } ``` 2. **物理系统** ```javascript create() { // 启用碰撞检测 this.physics.add.collider(player, platforms); // 添加重力效果 player.setBounce(0.2); } ``` #### 三、实战示例:控制角色移动 ```javascript // game.js let player, cursors; function create() { // 添加角色 player = this.physics.add.sprite(100, 450, &#39;player&#39;); player.setCollideWorldBounds(true); // 绑定键盘控制 cursors = this.input.keyboard.createCursorKeys(); } function update() { if (cursors.left.isDown) player.setVelocityX(-160); else if (cursors.right.isDown) player.setVelocityX(160); else player.setVelocityX(0); if (cursors.up.isDown && player.body.touching.down) player.setVelocityY(-330); } ``` #### 四、学习资源推荐 1. **官方资源** - [Phaser 3 官方文档](https://photonstorm.github.io/phaser3-docs/) - [官方示例库](https://phaser.io/examples) 2. **中文避坑指南** - 避免使用过时的Phaser 2中文站(内容已停止更新)[^4] - 推荐直接查阅官方文档的英文最新版 3. **实战教程** - [打砖块游戏开发教程](https://phaser.io/tutorials/making-your-first-phaser-3-game) - [跨平台部署指南](https://phaser.io/phaser3/devlog/2020/06/01/phaser-and-webpack) > 最佳实践:使用Webpack/Vite打包工具管理项目,支持模块化开发和热更新[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值