diff --git a/scenes/storeScenes/BreatheLife.js b/scenes/storeScenes/BreatheLife.js index 926b89c..1403c4c 100644 --- a/scenes/storeScenes/BreatheLife.js +++ b/scenes/storeScenes/BreatheLife.js @@ -19,6 +19,14 @@ export default class BreatheLife extends Phaser.Scene { // 加载角色动画和图片资源 this.load.image(`player0-0`, `assets/PNG/Players/Tiles/tile_${String(0).padStart(4, '0')}.png`) this.load.image(`player1-0`, `assets/PNG/Players/Tiles/tile_${String(8).padStart(4, '0')}.png`) + + // 批量加载图片用于动画播放 + for (let i = 1; i < 8; i++) { + this.load.image(`player0-${i}`, `assets/PNG/Players/Tiles/tile_${String(i).padStart(4, '0')}.png`); + } + for (let i = 9; i < 16; i++) { + this.load.image(`player1-${i-8}`, `assets/PNG/Players/Tiles/tile_${String(i).padStart(4, '0')}.png`); + } } /** @@ -32,6 +40,8 @@ export default class BreatheLife extends Phaser.Scene { // 初始化角色计数器,用于跟踪创建的角色数量 this.spriteCount = 0 this.spriteTextureCount = 0 + this.spriteAnimCount = 0 + this.targetCount = 3 // 目标角色数量 // 监听鼠标点击事件,点击后创建一个新的角色 this.input.on('pointerdown', () => { @@ -51,19 +61,23 @@ export default class BreatheLife extends Phaser.Scene { const clickedSprite = this.getClickedSprite(x, y) console.log("点击到的精灵:", clickedSprite) // 如果满足条件则切换到下一场景 - if (this.spriteCount >= 3 && this.spriteTextureCount >= 3) { + if ( + this.spriteCount >= this.targetCount + && this.spriteTextureCount >= this.targetCount + && this.spriteAnimCount >= this.targetCount + ) { this.scene.start(this.nextScene) - } - else if (clickedSprite) { // 如果点击到了精灵 + }else if (clickedSprite) { // 如果点击到了精灵 console.log("当前精灵的纹理:", clickedSprite.texture.key) // 查看当前精灵的纹理 // 如果纹理为默认值或纹理缺失 if (clickedSprite.texture.key === 'player' || clickedSprite.texture.key === '__MISSING') { this.setSpriteTexture(clickedSprite, `player1-0`) // 设置指定的纹理 + }else if (clickedSprite.texture.key === 'player1-0'){ // 如果点击的角色纹理已经是player1-0,则添加动画 + this.addSpriteAnimation(clickedSprite) } - } - else { - // 创建一个新的角色 sprite,缩放为1倍 - const sprite = this.physics.add.sprite(x, y, 'player').setScale(1) + }else if (this.spriteCount < 3) { + // 创建一个新的角色 sprite,缩放为1倍,并设置原点为中心底部 + const sprite = this.physics.add.sprite(x, y, 'player').setScale(1).setOrigin(0.5, 1) // 设置角色碰撞世界边界 sprite.setCollideWorldBounds(true) @@ -107,5 +121,37 @@ export default class BreatheLife extends Phaser.Scene { this.spriteTextureCount++ } - + + /** + * 为角色添加动画 + * @param {Phaser.GameObjects.Sprite} sprite - 要添加动画的角色精灵 + */ + addSpriteAnimation(sprite) { + // 检查角色是否已添加动画 + if (sprite.anims.exists('player-move')) { + return + } + + // 创建角色动画 + // sprite.anims.create({ + // key: 'player1-0', + // frames: sprite.anims.generateFrameNumbers('player1-0', { start: 0, end: 7 }), + // frameRate: 10, + // repeat: -1 + // }) + + // 创建移动动画 + this.anims.create({ + key: 'player-move', + frames: [ + { key: 'player1-1' }, + { key: 'player1-2' } + ], + frameRate: 10, + repeat: -1 + }); + // 播放角色动画 + sprite.anims.play('player-move') + this.spriteAnimCount++ + } }