feat(assets) 资源测试备份

scenes/BootScene.js

@@ -19,6 +19,7 @@ export default class BootScene extends Phaser.Scene {
 
     // 测试场景列表
     const testScenes = [
+      { key: 'CharacterAnimationTestScene', name: '测试场景12：角色动画测试' },
       { key: 'MapEditTestScene', name: '测试场景11：地图编辑测试' },
       { key: 'ResourceTestScene', name: '测试场景10：资源包测试' },
       { key: 'ItemListTestScene', name: '测试场景9：物品列表菜单测试' },

scenes/CharacterAnimationTestScene.js

@@ -0,0 +1,305 @@
+// 角色动画测试场景
+// 使用Player0和Player1图片作为移动帧
+
+export default class CharacterAnimationTestScene extends Phaser.Scene {
+  constructor() {
+    super({ key: 'CharacterAnimationTestScene' });
+    this.tileSize = 32; // 瓦片大小
+    this.player = null; // 玩家角色
+    this.cursors = null; // 键盘控制
+  }
+  
+  preload() {
+    // 加载玩家瓦片图片
+    console.log('加载玩家瓦片图片...');
+    
+    // 加载Player0的动画帧（假设tile_0000.png到tile_0007.png是Player0的帧）
+    for (let i = 0; i < 8; i++) {
+      this.load.image(`player0-${i}`, `assets/PNG/Players/Tiles/tile_${String(i).padStart(4, '0')}.png`);
+    }
+    
+    // 加载Player1的动画帧（假设tile_0008.png到tile_0015.png是Player1的帧）
+    for (let i = 8; i < 16; i++) {
+      this.load.image(`player1-${i-8}`, `assets/PNG/Players/Tiles/tile_${String(i).padStart(4, '0')}.png`);
+    }
+    
+    console.log('玩家瓦片图片加载完成');
+  }
+  
+  create() {
+    // 物理世界和相机边界
+    const worldSize = 2000;
+    this.physics.world.setBounds(0, 0, worldSize, worldSize);
+    this.cameras.main.setBounds(0, 0, worldSize, worldSize);
+    
+    // 设置背景色
+    this.cameras.main.setBackgroundColor('#222222');
+    
+    // 创建地面网格
+    this.createGrid();
+    
+    // 创建角色动画
+    this.createCharacterAnimations();
+    
+    // 创建玩家角色
+    this.createPlayer();
+    
+    // 设置输入控制
+    this.setupInput();
+    
+    // 显示提示信息
+    this.showInstructions();
+    
+    // 相机跟随玩家
+    this.cameras.main.startFollow(this.player, true, 0.1, 0.1);
+  }
+  
+  /**
+   * 创建地面网格
+   */
+  createGrid() {
+    // 创建网格线
+    const gridGraphics = this.add.graphics();
+    gridGraphics.lineStyle(1, 0x444444, 0.5);
+    
+    // 绘制垂直线
+    for (let x = 0; x <= 2000; x += this.tileSize) {
+      gridGraphics.moveTo(x, 0);
+      gridGraphics.lineTo(x, 2000);
+    }
+    
+    // 绘制水平线
+    for (let y = 0; y <= 2000; y += this.tileSize) {
+      gridGraphics.moveTo(0, y);
+      gridGraphics.lineTo(2000, y);
+    }
+  }
+  
+  /**
+   * 创建角色动画
+   */
+  createCharacterAnimations() {
+    console.log('创建角色动画...');
+    
+    // 创建Player0的移动动画
+    this.anims.create({
+      key: 'player0-move',
+      frames: [
+        { key: 'player0-0' },
+        { key: 'player0-1' },
+        { key: 'player0-2' },
+        { key: 'player0-3' },
+        { key: 'player0-4' },
+        { key: 'player0-5' },
+        { key: 'player0-6' },
+        { key: 'player0-7' }
+      ],
+      frameRate: 10,
+      repeat: -1
+    });
+    
+    // 创建Player1的移动动画
+    this.anims.create({
+      key: 'player1-move',
+      frames: [
+        { key: 'player1-0' },
+        { key: 'player1-1' },
+        { key: 'player1-2' },
+        { key: 'player1-3' },
+        { key: 'player1-4' },
+        { key: 'player1-5' },
+        { key: 'player1-6' },
+        { key: 'player1-7' }
+      ],
+      frameRate: 10,
+      repeat: -1
+    });
+    
+    console.log('角色动画创建完成');
+  }
+  
+  /**
+   * 创建玩家角色
+   */
+  createPlayer() {
+    console.log('创建玩家角色...');
+    
+    // 创建玩家角色
+    this.player = this.physics.add.sprite(1000, 1000, 'player0-0');
+    this.player.setScale(2); // 放大角色
+    this.player.setBounce(0.2); // 反弹效果
+    this.player.setCollideWorldBounds(true); // 碰撞世界边界
+    
+    console.log('玩家角色创建完成');
+  }
+  
+  /**
+   * 设置输入控制
+   */
+  setupInput() {
+    // 键盘控制 - 方向键
+    this.cursors = this.input.keyboard.createCursorKeys();
+    
+    // 添加字母键控制
+    this.keys = {
+      a: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A),
+      w: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W),
+      s: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S),
+      d: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D),
+      space: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE)
+    };
+    
+    // 切换角色按钮
+    this.createButton(this.sys.game.config.width - 200, 100, '切换角色', () => {
+      this.switchCharacter();
+    });
+    
+    // 返回启动场景按钮
+    this.createButton(this.sys.game.config.width - 200, 150, '返回启动场景', () => {
+      this.scene.start('BootScene');
+    });
+  }
+  
+  /**
+   * 创建按钮
+   */
+  createButton(x, y, text, callback) {
+    // 按钮背景
+    const button = this.add.rectangle(x, y, 180, 40, 0x333333);
+    button.setOrigin(0.5, 0.5);
+    button.setScrollFactor(0, 0);
+    button.setDepth(10);
+    button.setInteractive({ useHandCursor: true });
+    
+    // 按钮文本
+    const buttonText = this.add.text(x - 70, y - 15, text, {
+      fontSize: '14px',
+      fill: '#ffffff',
+      fontFamily: 'Arial'
+    });
+    buttonText.setScrollFactor(0, 0);
+    buttonText.setDepth(11);
+    
+    // 按钮事件
+    button.on('pointerdown', callback);
+    
+    button.on('pointerover', () => {
+      button.setFillStyle(0x555555);
+    });
+    
+    button.on('pointerout', () => {
+      button.setFillStyle(0x333333);
+    });
+  }
+  
+  /**
+   * 切换角色
+   */
+  switchCharacter() {
+    // 根据当前使用的纹理切换角色
+    if (this.player.anims.currentAnim && this.player.anims.currentAnim.key === 'player0-move') {
+      // 切换到Player1
+      this.player.play('player1-move');
+      console.log('切换到Player1');
+    } else {
+      // 切换到Player0
+      this.player.play('player0-move');
+      console.log('切换到Player0');
+    }
+  }
+  
+  /**
+   * 显示提示信息
+   */
+  showInstructions() {
+    // 标题
+    this.add.text(20, 20, '角色动画测试场景', {
+      fontSize: '20px',
+      fill: '#ffffff',
+      fontFamily: 'Arial',
+      fontWeight: 'bold'
+    }).setScrollFactor(0, 0).setDepth(11);
+    
+    // 操作提示
+    const instructions = [
+      'WASD或方向键移动角色',
+      '角色移动时播放动画',
+      '点击"切换角色"按钮切换Player0和Player1',
+      '角色动画使用Player0和Player1的图片作为移动帧',
+      '按空格键返回启动场景'
+    ];
+    
+    for (let i = 0; i < instructions.length; i++) {
+      this.add.text(20, 50 + i * 25, instructions[i], {
+        fontSize: '14px',
+        fill: '#ffffff',
+        fontFamily: 'Arial'
+      }).setScrollFactor(0, 0).setDepth(11);
+    }
+    
+    // 显示当前角色
+    this.currentCharacterText = this.add.text(20, 200, '当前角色: Player0', {
+      fontSize: '16px',
+      fill: '#00ff00',
+      fontFamily: 'Arial',
+      fontWeight: 'bold'
+    }).setScrollFactor(0, 0).setDepth(11);
+  }
+  
+  /**
+   * 更新玩家移动
+   */
+  updatePlayerMovement() {
+    const speed = 200; // 移动速度
+    
+    // 停止所有移动
+    this.player.setVelocity(0);
+    
+    let isMoving = false;
+    
+    // 水平移动
+    if (this.cursors.left.isDown || this.keys.a.isDown) {
+      this.player.setVelocityX(-speed);
+      this.player.setFlipX(true); // 向左翻转
+      isMoving = true;
+    } else if (this.cursors.right.isDown || this.keys.d.isDown) {
+      this.player.setVelocityX(speed);
+      this.player.setFlipX(false); // 向右不翻转
+      isMoving = true;
+    }
+    
+    // 垂直移动
+    if (this.cursors.up.isDown || this.keys.w.isDown) {
+      this.player.setVelocityY(-speed);
+      isMoving = true;
+    } else if (this.cursors.down.isDown || this.keys.s.isDown) {
+      this.player.setVelocityY(speed);
+      isMoving = true;
+    }
+    
+    // 根据移动状态播放或停止动画
+    if (isMoving) {
+      if (!this.player.anims.isPlaying) {
+        // 如果没有播放动画，根据当前角色播放对应的移动动画
+        if (this.currentCharacterText.text === '当前角色: Player0') {
+          this.player.play('player0-move');
+        } else {
+          this.player.play('player1-move');
+        }
+      }
+    } else {
+      // 停止动画，保持当前帧
+      this.player.anims.pause();
+    }
+  }
+  
+  update() {
+    // 更新玩家移动
+    this.updatePlayerMovement();
+    
+    // 按空格键返回启动场景
+    if (this.keys.space.isDown) {
+      this.scene.start('BootScene');
+    }
+  }
+}

scenes/MapEditTestScene.js

@@ -14,15 +14,21 @@
 export default class MapEditTestScene extends Phaser.Scene {
   constructor() {
     super({ key: 'MapEditTestScene' });
-    this.tileSize = 32; // 瓦片大小
+    this.tileSize = 32; // 地图瓦片大小
     this.selectedTile = null; // 当前选中的瓦片
-    this.tileSet = []; // 瓦片集合
     this.mapLayer = null; // 地图层
     this.mapWidth = 50; // 地图宽度（瓦片数量）
     this.mapHeight = 50; // 地图高度（瓦片数量）
     this.isDragging = false; // 是否正在拖拽地图
     this.lastDragPosition = { x: 0, y: 0 }; // 上次拖拽位置
     this.zoomLevel = 1; // 缩放级别
+    // 瓦片图相关属性
+    this.tilemapKey = ''; // 单张瓦片图的键名
+    this.tileCount = 234; // 总瓦片数
+    this.tileImageSize = 16; // 瓦片在图片中的实际大小
+    this.tileSpacing = 1; // 瓦片间距
+    this.tileColumns = 18; // 瓦片图列数
+    this.tileRows = 13; // 瓦片图行数
   }
   
   preload() {
@@ -81,16 +87,12 @@ export default class MapEditTestScene extends Phaser.Scene {
    */
   loadTileAssets() {
     console.log('开始加载瓦片资源');
-    // 加载地形瓦片
-    this.tileCount = 32;
-    for (let i = 0; i < this.tileCount; i++) {
-      // 使用唯一的键名，避免与其他场景冲突
-      const tileKey = `mapedit-tile-${i}`;
-      const tilePath = `assets/PNG/Tiles/Tiles/tile_${String(i).padStart(4, '0')}.png`;
-      console.log(`加载瓦片: ${tileKey} -> ${tilePath}`);
-      // 修复：使用正确的方式加载瓦片，不使用setFilter链式调用
-      this.load.image(tileKey, tilePath);
-    }
+    
+    // 只加载单张瓦片图，替代多张瓦片资源
+    const tilemapKey = 'mapedit-tilemap';
+    const tilemapPath = 'assets/PNG/Tiles/Tilemap/tilemap_packed.png';
+    console.log(`加载瓦片图: ${tilemapKey} -> ${tilemapPath}`);
+    this.load.image(tilemapKey, tilemapPath);
     
     // 加载进度回调
     this.load.on('progress', (progress) => {
@@ -108,25 +110,23 @@ export default class MapEditTestScene extends Phaser.Scene {
       this.assetsLoaded = true;
       this.loadingText.setText('资源加载完成！');
       
-      // 修复：在资源加载完成后为每个纹理设置NEAREST过滤模式
-      for (let i = 0; i < this.tileCount; i++) {
-        const tileKey = `mapedit-tile-${i}`;
-        // 检查纹理是否存在
-        if (this.textures.exists(tileKey)) {
-          // 获取纹理并设置过滤模式
-          const texture = this.textures.get(tileKey);
-          // 设置所有帧的过滤模式为NEAREST
-          texture.setFilter(Phaser.Textures.FilterMode.NEAREST);
-          console.log(`设置纹理 ${tileKey} 的过滤模式为NEAREST`);
-        }
+      // 设置瓦片图的过滤模式为NEAREST
+      if (this.textures.exists(tilemapKey)) {
+        const texture = this.textures.get(tilemapKey);
+        texture.setFilter(Phaser.Textures.FilterMode.NEAREST);
+        console.log(`设置纹理 ${tilemapKey} 的过滤模式为NEAREST`);
       }
       
-      // 初始化瓦片集合
-      this.tileSet = [];
-      for (let i = 0; i < this.tileCount; i++) {
-        this.tileSet.push(`mapedit-tile-${i}`);
-      }
-      console.log(`瓦片集合初始化完成，共 ${this.tileSet.length} 个瓦片键名`);
+      // 初始化瓦片集合 - 只使用单张瓦片图键名
+      this.tileCount = 234; // 根据Tilesheet.txt，总瓦片数为18x13=234
+      this.tilemapKey = tilemapKey;
+      // 存储瓦片的位置信息，用于后续切割
+      this.tileImageSize = 16; // 瓦片大小16x16px
+      this.tileSpacing = 1; // 瓦片间距1px
+      this.tileColumns = 18; // 18列
+      this.tileRows = 13; // 13行
+      
+      console.log(`瓦片图初始化完成，共 ${this.tileCount} 个瓦片`);
       // 只有在tileSelectionContainer初始化后才调用updateTileSelection
       if (this.tileSelectionContainer) {
         console.log('tileSelectionContainer已初始化，调用updateTileSelection');
@@ -220,8 +220,8 @@ export default class MapEditTestScene extends Phaser.Scene {
    * 创建瓦片选择区域
    */
   createTileSelectionArea() {
-    // 瓦片选择区域背景
-    const tilePanel = this.add.rectangle(10, 70, 220, 400, 0x111111, 0.8);
+    // 瓦片选择区域背景 - 使用固定大小，足够容纳完整瓦片图
+    const tilePanel = this.add.rectangle(10, 70, 300, 250, 0x111111, 0.8);
     tilePanel.setOrigin(0, 0);
     tilePanel.setScrollFactor(0, 0);
     tilePanel.setDepth(10);
@@ -239,12 +239,12 @@ export default class MapEditTestScene extends Phaser.Scene {
     this.tileSelectionContainer.setScrollFactor(0, 0);
     this.tileSelectionContainer.setDepth(11);
     
-    // 瓦片选择网格
-    this.tileSelectionGrid = this.add.grid(0, 0, 200, 360, 64, 64, 0x333333, 0.5, 0x444444, 0.5);
-    this.tileSelectionContainer.add(this.tileSelectionGrid);
+    // 移除网格，不再需要
+    // this.tileSelectionGrid = this.add.grid(0, 0, fullWidth, fullHeight, tileWidth, tileHeight, 0x333333, 0.5, 0x444444, 0.5);
+    // this.tileSelectionContainer.add(this.tileSelectionGrid);
     
     // 当前选中瓦片显示 - 改为使用Container容器，而不是Rectangle，这样可以使用removeAll方法
-    this.selectedTileContainer = this.add.container(20, 490);
+    this.selectedTileContainer = this.add.container(20, 340);
     this.selectedTileContainer.setScrollFactor(0, 0);
     this.selectedTileContainer.setDepth(11);
     
@@ -254,7 +254,7 @@ export default class MapEditTestScene extends Phaser.Scene {
     selectedTileBg.setDepth(10);
     this.selectedTileContainer.add(selectedTileBg);
     
-    this.add.text(20, 470, '当前选中瓦片:', {
+    this.add.text(20, 320, '当前选中瓦片:', {
       fontSize: '14px',
       fill: '#ffffff',
       fontFamily: 'Arial'
@@ -330,65 +330,78 @@ export default class MapEditTestScene extends Phaser.Scene {
    */
   updateTileSelection() {
     console.log('开始更新瓦片选择显示');
-    console.log(`当前瓦片集合数量: ${this.tileSet.length}`);
+    console.log(`当前瓦片数量: ${this.tileCount}`);
     
     // 清空当前瓦片选择
     console.log('清空当前瓦片选择');
     this.tileSelectionContainer.removeAll(true);
     
-    // 重新添加网格
-    console.log('重新添加瓦片选择网格');
-    this.tileSelectionGrid = this.add.grid(0, 0, 200, 360, 64, 64, 0x333333, 0.5, 0x444444, 0.5);
-    this.tileSelectionContainer.add(this.tileSelectionGrid);
-    
-    // 添加瓦片到选择区域
-    console.log('开始添加瓦片到选择区域');
-    for (let i = 0; i < this.tileSet.length; i++) {
-      const tileX = (i % 3) * 64;
-      const tileY = Math.floor(i / 3) * 64;
-      const tileKey = this.tileSet[i];
-      
-      console.log(`添加瓦片 ${i}: ${tileKey} 到位置 (${tileX}, ${tileY})`);
-      
-      try {
-        // 检查纹理是否存在
-        if (this.textures.exists(tileKey)) {
-          console.log(`纹理 ${tileKey} 存在`);
-          // 创建瓦片
-          const tile = this.add.image(tileX, tileY, tileKey);
-          tile.setOrigin(0, 0);
-          // 修复：根据瓦片实际大小调整缩放比例，确保在选择区域中显示正确大小
-          const selectionTileSize = 64; // 选择区域中每个瓦片的大小
-          tile.setScale(selectionTileSize / tile.width);
-          tile.setInteractive({ useHandCursor: true });
-          this.tileSelectionContainer.add(tile);
+    try {
+      // 检查纹理是否存在
+      if (this.textures.exists(this.tilemapKey)) {
+        console.log(`纹理 ${this.tilemapKey} 存在`);
+        
+        // 获取瓦片图的实际尺寸
+        const texture = this.textures.get(this.tilemapKey);
+        const frame = texture.get();
+        const actualWidth = frame.width;
+        const actualHeight = frame.height;
+        console.log(`瓦片图实际尺寸: ${actualWidth}x${actualHeight}`);
+        
+        // 直接添加完整瓦片图，不裁剪，不缩放
+        const fullTilemap = this.add.image(0, 0, this.tilemapKey);
+        fullTilemap.setOrigin(0, 0);
+        fullTilemap.setScale(1);
+        this.tileSelectionContainer.add(fullTilemap);
+        
+        // 计算每个瓦片在实际图片中的位置和大小
+        const tileWidth = 16; // 瓦片大小16x16px
+        const tileHeight = 16;
+        const spacing = 1; // 瓦片间距1px
+        const columns = 18; // 18列
+        
+        // 为每个瓦片位置添加透明的交互式矩形，用于悬停高亮和点击选择
+        for (let i = 0; i < this.tileCount; i++) {
+          const col = i % columns;
+          const row = Math.floor(i / columns);
+          
+          // 精确计算瓦片在实际图片中的位置
+          const tileX = col * (tileWidth + spacing);
+          const tileY = row * (tileHeight + spacing);
+          
+          console.log(`瓦片 ${i} 位置: (${tileX}, ${tileY}), 大小: ${tileWidth}x${tileHeight}`);
+          
+          // 创建透明的交互式矩形，精确对齐瓦片
+          const tileRect = this.add.rectangle(tileX, tileY, tileWidth, tileHeight, 0x000000, 0);
+          tileRect.setOrigin(0, 0);
+          tileRect.setInteractive({ useHandCursor: true });
+          this.tileSelectionContainer.add(tileRect);
           
           // 瓦片点击事件
-          tile.on('pointerdown', () => {
-            console.log(`点击了瓦片 ${i}: ${tileKey}`);
+          tileRect.on('pointerdown', () => {
+            console.log(`点击了瓦片 ${i}，位置: (${tileX}, ${tileY})`);
             this.selectTile(i);
           });
           
-          tile.on('pointerover', () => {
-            // 高亮显示
-            tile.setTint(0x888888);
+          // 悬停高亮效果
+          tileRect.on('pointerover', () => {
+            // 创建高亮效果
+            tileRect.setFillStyle(0xffffff, 0.3);
           });
           
-          tile.on('pointerout', () => {
-            // 取消高亮
-            tile.clearTint();
+          tileRect.on('pointerout', () => {
+            // 移除高亮效果
+            tileRect.setFillStyle(0x000000, 0);
           });
-          
-          console.log(`成功添加瓦片 ${i}: ${tileKey}`);
-        } else {
-          console.error(`纹理 ${tileKey} 不存在！`);
         }
-      } catch (error) {
-        console.error(`加载瓦片${i}失败:`, error);
+        
+        console.log('瓦片选择区域已更新，直接显示完整瓦片图');
+      } else {
+        console.error(`纹理 ${this.tilemapKey} 不存在！`);
       }
+    } catch (error) {
+      console.error('更新瓦片选择显示失败:', error);
     }
-    
-    console.log('瓦片选择区域已更新，瓦片数量:', this.tileSet.length);
   }
   
   /**
@@ -423,13 +436,22 @@ export default class MapEditTestScene extends Phaser.Scene {
     if (this.selectedTile !== null && this.selectedTile !== -1) {
       try {
         // 防御性编程：检查瓦片索引是否在有效范围内
-        if (this.selectedTile >= 0 && this.selectedTile < this.tileSet.length) {
-          const tileKey = this.tileSet[this.selectedTile];
+        if (this.selectedTile >= 0 && this.selectedTile < this.tileCount) {
           // 防御性编程：检查纹理是否存在
-          if (this.textures.exists(tileKey)) {
-            // 创建瓦片 - 注意：添加到Container容器中，而不是直接添加到场景
-            const tile = this.add.image(0, 0, tileKey).setScale(2);
+          if (this.textures.exists(this.tilemapKey)) {
+            // 计算瓦片在大图中的位置
+            const col = this.selectedTile % this.tileColumns;
+            const row = Math.floor(this.selectedTile / this.tileColumns);
+            
+            // 计算源矩形
+            const frameX = col * (this.tileSize + this.tileSpacing);
+            const frameY = row * (this.tileSize + this.tileSpacing);
+            
+            // 创建瓦片 - 使用单张瓦片图并裁剪
+            const tile = this.add.image(0, 0, this.tilemapKey);
             tile.setOrigin(0, 0);
+            tile.setCrop(frameX, frameY, this.tileSize, this.tileSize);
+            tile.setScale(2); // 放大显示
             this.selectedTileContainer.add(tile);
             
             // 添加选中边框
@@ -438,10 +460,10 @@ export default class MapEditTestScene extends Phaser.Scene {
             border.setStrokeStyle(2, 0x00ff00, 1);
             this.selectedTileContainer.add(border);
           } else {
-            console.error(`selectTile: 纹理 ${tileKey} 不存在`);
+            console.error(`selectTile: 纹理 ${this.tilemapKey} 不存在`);
           }
         } else {
-          console.error(`selectTile: 瓦片索引 ${this.selectedTile} 超出范围 (0-${this.tileSet.length-1})`);
+          console.error(`selectTile: 瓦片索引 ${this.selectedTile} 超出范围 (0-${this.tileCount-1})`);
         }
       } catch (error) {
         console.error('selectTile: 显示选中瓦片失败:', error);
@@ -626,9 +648,10 @@ export default class MapEditTestScene extends Phaser.Scene {
     // 将屏幕坐标转换为世界坐标
     const worldPoint = this.cameras.main.getWorldPoint(pointer.x, pointer.y);
     
-    // 计算瓦片坐标
-    const tileX = Math.floor(worldPoint.x / this.tileSize);
-    const tileY = Math.floor(worldPoint.y / this.tileSize);
+    // 计算瓦片坐标 - 使用地图的瓦片大小32px
+    const mapTileSize = 32;
+    const tileX = Math.floor(worldPoint.x / mapTileSize);
+    const tileY = Math.floor(worldPoint.y / mapTileSize);
     
     // 检查瓦片坐标是否在地图范围内
     if (tileX < 0 || tileX >= this.mapWidth || tileY < 0 || tileY >= this.mapHeight) {
@@ -644,8 +667,7 @@ export default class MapEditTestScene extends Phaser.Scene {
     if (this.selectedTile === -1) {
       this.removeTile(tileX, tileY);
     } else {
-      // 放置瓦片
-      const tileKey = this.tileSet[this.selectedTile];
+      // 放置瓦片 - 使用单张瓦片图
       
       // 检查该位置是否已有瓦片
       const existingTile = this.getTileAt(tileX, tileY);
@@ -654,12 +676,22 @@ export default class MapEditTestScene extends Phaser.Scene {
         existingTile.destroy();
       }
       
-      // 创建新瓦片 - 修复：使用正确的缩放比例，确保瓦片填满整个图块
+      // 创建新瓦片
       try {
-        const tile = this.add.image(tileX * this.tileSize, tileY * this.tileSize, tileKey);
+        const tile = this.add.image(tileX * mapTileSize, tileY * mapTileSize, this.tilemapKey);
         tile.setOrigin(0, 0);
-        // 修复：根据瓦片实际大小调整缩放比例，确保填满32x32图块
-        tile.setScale(this.tileSize / tile.width);
+        
+        // 计算瓦片在大图中的位置
+        const col = this.selectedTile % this.tileColumns;
+        const row = Math.floor(this.selectedTile / this.tileColumns);
+        
+        // 设置裁剪区域，只显示当前瓦片
+        const frameX = col * (this.tileSize + this.tileSpacing);
+        const frameY = row * (this.tileSize + this.tileSpacing);
+        tile.setCrop(frameX, frameY, this.tileSize, this.tileSize);
+        
+        // 缩放瓦片以适应地图的32x32图块
+        tile.setScale(mapTileSize / this.tileSize);
         tile.setDepth(2);
         this.mapLayer.add(tile);