feat(SS) 添加动画效果

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++
+    }
 }