feat(assets) 资源测试备份

main.js

@@ -24,6 +24,8 @@ import ResourceTestScene from './scenes/ResourceTestScene.js';
 import MapEditTestScene from './scenes/MapEditTestScene.js';
 // 导入角色动画测试场景
 import CharacterAnimationTestScene from './scenes/CharacterAnimationTestScene.js';
+// 导入临时场景
+import TmpScene from './scenes/TmpScene.js';
 
 // 创建游戏的最终配置对象
 const config = {
@@ -45,7 +47,8 @@ const config = {
     ItemListTestScene,
     ResourceTestScene,
     MapEditTestScene,
-    CharacterAnimationTestScene
+    CharacterAnimationTestScene,
+    TmpScene
   ]
 };
 

scenes/BootScene.js

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

scenes/MapEditTestScene.js

@@ -14,7 +14,7 @@
 export default class MapEditTestScene extends Phaser.Scene {
   constructor() {
     super({ key: 'MapEditTestScene' });
-    this.tileSize = 32; // 地图瓦片大小
+    this.tileSize = 16; // 地图瓦片大小
     this.selectedTile = null; // 当前选中的瓦片
     this.mapLayer = null; // 地图层
     this.mapWidth = 50; // 地图宽度（瓦片数量）
@@ -26,7 +26,7 @@ export default class MapEditTestScene extends Phaser.Scene {
     this.tilemapKey = ''; // 单张瓦片图的键名
     this.tileCount = 234; // 总瓦片数
     this.tileImageSize = 16; // 瓦片在图片中的实际大小
-    this.tileSpacing = 1; // 瓦片间距
+    this.tileSpacing = 0; // 瓦片间距
     this.tileColumns = 18; // 瓦片图列数
     this.tileRows = 13; // 瓦片图行数
   }
@@ -122,7 +122,7 @@ export default class MapEditTestScene extends Phaser.Scene {
       this.tilemapKey = tilemapKey;
       // 存储瓦片的位置信息，用于后续切割
       this.tileImageSize = 16; // 瓦片大小16x16px
-      this.tileSpacing = 1; // 瓦片间距1px
+      this.tileSpacing = 0; // 瓦片间距0px
       this.tileColumns = 18; // 18列
       this.tileRows = 13; // 13行
       
@@ -249,7 +249,7 @@ export default class MapEditTestScene extends Phaser.Scene {
     this.selectedTileContainer.setDepth(11);
     
     // 添加选中瓦片背景
-    const selectedTileBg = this.add.rectangle(0, 0, 64, 64, 0x333333);
+    const selectedTileBg = this.add.rectangle(0, 0, 16, 16, 0x333333);
     selectedTileBg.setOrigin(0, 0);
     selectedTileBg.setDepth(10);
     this.selectedTileContainer.add(selectedTileBg);
@@ -354,44 +354,57 @@ export default class MapEditTestScene extends Phaser.Scene {
         fullTilemap.setScale(1);
         this.tileSelectionContainer.add(fullTilemap);
         
-        // 计算每个瓦片在实际图片中的位置和大小
+        // 根据用户提供的精确信息：图片288*208，瓦片16*16，18*13排列
         const tileWidth = 16; // 瓦片大小16x16px
         const tileHeight = 16;
-        const spacing = 1; // 瓦片间距1px
+        const spacing = 0; // 瓦片之间没有间距（288/18=16，208/13=16）
         const columns = 18; // 18列
+        const rows = 13; // 13行
+        
+        console.log(`瓦片配置：大小${tileWidth}x${tileHeight}，间距${spacing}，${columns}x${rows}排列`);
         
         // 为每个瓦片位置添加透明的交互式矩形，用于悬停高亮和点击选择
         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);
+          // 精确计算瓦片在实际图片中的位置（无间距）
+          const tileX = col * tileWidth;
+          const tileY = row * tileHeight;
           
-          console.log(`瓦片 ${i} 位置: (${tileX}, ${tileY}), 大小: ${tileWidth}x${tileHeight}`);
+          console.log(`瓦片 ${i} 索引 -> 行列: (${col}, ${row}) -> 位置: (${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);
+          // 使用add.zone创建透明区域，专门用于交互
+          const tileZone = this.add.zone(tileX, tileY, tileWidth, tileHeight);
+          tileZone.setOrigin(0, 0);
+          tileZone.setInteractive({ useHandCursor: true });
+          this.tileSelectionContainer.add(tileZone);
           
           // 瓦片点击事件
-          tileRect.on('pointerdown', () => {
-            console.log(`点击了瓦片 ${i}，位置: (${tileX}, ${tileY})`);
+          tileZone.on('pointerdown', () => {
+            console.log(`点击了瓦片 ${i}，行列: (${col}, ${row})`);
             this.selectTile(i);
           });
           
           // 悬停高亮效果
-          tileRect.on('pointerover', () => {
-            // 创建高亮效果
-            tileRect.setFillStyle(0xffffff, 0.3);
+          tileZone.on('pointerover', () => {
+            // 创建临时高亮矩形
+            if (!this.highlightRect) {
+              this.highlightRect = this.add.rectangle(tileX, tileY, tileWidth, tileHeight, 0xffffff, 0.3);
+              this.highlightRect.setOrigin(0, 0);
+              this.tileSelectionContainer.add(this.highlightRect);
+            } else {
+              this.highlightRect.setPosition(tileX, tileY);
+            }
           });
           
-          tileRect.on('pointerout', () => {
+          tileZone.on('pointerout', () => {
             // 移除高亮效果
-            tileRect.setFillStyle(0x000000, 0);
+            if (this.highlightRect) {
+              this.highlightRect.destroy();
+              this.highlightRect = null;
+            }
           });
         }
         
@@ -439,22 +452,37 @@ export default class MapEditTestScene extends Phaser.Scene {
         if (this.selectedTile >= 0 && this.selectedTile < this.tileCount) {
           // 防御性编程：检查纹理是否存在
           if (this.textures.exists(this.tilemapKey)) {
+            // 根据用户提供的精确信息：瓦片16*16，无间距，18*13排列
+            const tileWidth = 16;
+            const tileHeight = 16;
+            const spacing = 0;
+            const columns = 18;
+            
             // 计算瓦片在大图中的位置
-            const col = this.selectedTile % this.tileColumns;
-            const row = Math.floor(this.selectedTile / this.tileColumns);
+            const col = this.selectedTile % columns;
+            const row = Math.floor(this.selectedTile / columns);
             
-            // 计算源矩形
-            const frameX = col * (this.tileSize + this.tileSpacing);
-            const frameY = row * (this.tileSize + this.tileSpacing);
+            // 计算裁剪区域 - 正确使用图块对应的左上角像素位置
+            const cropWidth = tileWidth;
+            const cropHeight = tileHeight;
             
-            // 创建瓦片 - 使用单张瓦片图并裁剪
+            // 计算图块在大图中的精确左上角像素位置
+            const frameX = col * tileWidth;
+            const frameY = row * tileHeight;
+            
+            // 创建一个新的image，专门用于显示选中的瓦片
             const tile = this.add.image(0, 0, this.tilemapKey);
             tile.setOrigin(0, 0);
-            tile.setCrop(frameX, frameY, this.tileSize, this.tileSize);
-            tile.setScale(2); // 放大显示
+            
+            // 先设置裁剪区域，使用图块在大图中的精确位置作为起始点
+            tile.setCrop(frameX, frameY, cropWidth, cropHeight);
+            
+            // 然后设置缩放，放大显示
+            tile.setScale(2);
+            
             this.selectedTileContainer.add(tile);
             
-            // 添加选中边框
+            // 添加选中边框，匹配放大后的瓦片大小
             const border = this.add.rectangle(0, 0, 64, 64, 0x00ff00, 0);
             border.setOrigin(0, 0);
             border.setStrokeStyle(2, 0x00ff00, 1);
@@ -645,11 +673,14 @@ export default class MapEditTestScene extends Phaser.Scene {
    * 放置瓦片
    */
   placeTile(pointer) {
-    // 将屏幕坐标转换为世界坐标
+    // 将屏幕坐标转换为世界坐标 - 确保与鼠标位置完全匹配
     const worldPoint = this.cameras.main.getWorldPoint(pointer.x, pointer.y);
     
     // 计算瓦片坐标 - 使用地图的瓦片大小32px
     const mapTileSize = 32;
+    
+    // 确保鼠标点击位置与绘制位置完全一致
+    // 使用Math.floor确保点击瓦片的哪个位置都绘制到对应瓦片
     const tileX = Math.floor(worldPoint.x / mapTileSize);
     const tileY = Math.floor(worldPoint.y / mapTileSize);
     
@@ -676,22 +707,44 @@ export default class MapEditTestScene extends Phaser.Scene {
         existingTile.destroy();
       }
       
-      // 创建新瓦片
+      // 计算精确的绘制位置 - 确保与鼠标点击的瓦片完全对应
+      const drawX = tileX * mapTileSize;
+      const drawY = tileY * mapTileSize;
+      
+      console.log(`鼠标位置: (${pointer.x}, ${pointer.y}) -> 世界坐标: (${worldPoint.x}, ${worldPoint.y}) -> 瓦片坐标: (${tileX}, ${tileY}) -> 绘制位置: (${drawX}, ${drawY})`);
+      
+      // 创建新瓦片 - 精确放置在计算出的位置
       try {
-        const tile = this.add.image(tileX * mapTileSize, tileY * mapTileSize, this.tilemapKey);
-        tile.setOrigin(0, 0);
+        // 根据用户提供的精确信息：瓦片16*16，无间距，18*13排列
+        const tileWidth = 16;
+        const tileHeight = 16;
+        const columns = 18;
         
         // 计算瓦片在大图中的位置
-        const col = this.selectedTile % this.tileColumns;
-        const row = Math.floor(this.selectedTile / this.tileColumns);
+        const col = this.selectedTile % columns;
+        const row = Math.floor(this.selectedTile / columns);
         
-        // 设置裁剪区域，只显示当前瓦片
-        const frameX = col * (this.tileSize + this.tileSpacing);
-        const frameY = row * (this.tileSize + this.tileSpacing);
-        tile.setCrop(frameX, frameY, this.tileSize, this.tileSize);
+        // 计算裁剪区域 - 正确使用图块对应的左上角像素位置
+        const cropX = col * tileWidth; // 图块在大图中的x坐标
+        const cropY = row * tileHeight; // 图块在大图中的y坐标
+        const cropWidth = tileWidth;
+        const cropHeight = tileHeight;
+        
+        console.log(`选中瓦片索引: ${this.selectedTile} -> 行列: (${col}, ${row}) -> 裁剪区域: (${cropX}, ${cropY}, ${cropWidth}, ${cropHeight})`);
+        
+        // 创建image并设置初始位置
+        const tile = this.add.image(drawX, drawY, this.tilemapKey);
+        tile.setOrigin(0, 0);
+        
+        // 先设置裁剪区域，使用图块在大图中的精确位置
+        tile.setCrop(cropX, cropY, cropWidth, cropHeight);
+        
+        // 然后设置缩放，确保瓦片填满地图网格
+        const scaleFactor = mapTileSize / cropWidth;
+        tile.setScale(scaleFactor);
+        
+        console.log(`绘制位置: (${drawX}, ${drawY}), 缩放因子: ${scaleFactor}`);
         
-        // 缩放瓦片以适应地图的32x32图块
-        tile.setScale(mapTileSize / this.tileSize);
         tile.setDepth(2);
         this.mapLayer.add(tile);
         

scenes/TmpScene.js

@@ -0,0 +1,115 @@
+export default class TmpScene extends Phaser.Scene {
+  constructor() {
+    super({ key: 'TmpScene' });
+  }
+
+  preload() {
+    // 加载资源
+  }
+
+  create() {
+    // 创建场景
+    // 物理世界和相机边界
+    const worldSize = this.mapWidth * this.tileSize;
+    this.physics.world.setBounds(0, 0, worldSize, worldSize);
+    this.cameras.main.setBounds(0, 0, worldSize, worldSize);
+    // 设置背景色
+    this.cameras.main.setBackgroundColor('#222222');
+
+    // 创建地图编辑区域
+    console.log('创建地图编辑区域');
+    this.createMapArea();
+
+    // 创建瓦片选择区域
+    console.log('创建瓦片选择区域');
+    this.createTileSelectionArea();
+  }
+
+  createMapArea() {
+    // 创建地图容器
+    this.mapContainer = this.add.container(0, 0);
+    this.mapContainer.setDepth(1);
+    
+    // 创建背景网格
+    this.createGrid();
+    
+    // 创建地图层（用于放置瓦片）
+    this.mapLayer = this.add.container(0, 0);
+    this.mapContainer.add(this.mapLayer);
+    
+    // 初始化空地图
+    this.mapData = [];
+    for (let y = 0; y < this.mapHeight; y++) {
+      this.mapData[y] = [];
+      for (let x = 0; x < this.mapWidth; x++) {
+        this.mapData[y][x] = -1; // -1表示空瓦片
+      }
+    }
+  }
+
+  //创建背景网格
+  createGrid() {
+    // 创建网格线
+    const gridGraphics = this.add.graphics();
+    gridGraphics.lineStyle(1, 0x444444, 0.5);
+    
+    // 绘制垂直线
+    for (let x = 0; x <= this.mapWidth; x++) {
+      gridGraphics.moveTo(x * this.tileSize, 0);
+      gridGraphics.lineTo(x * this.tileSize, this.mapHeight * this.tileSize);
+    }
+    
+    // 绘制水平线
+    for (let y = 0; y <= this.mapHeight; y++) {
+      gridGraphics.moveTo(0, y * this.tileSize);
+      gridGraphics.lineTo(this.mapWidth * this.tileSize, y * this.tileSize);
+    }
+    
+    this.mapContainer.add(gridGraphics);
+  }
+
+  createTileSelectionArea() {
+    // 瓦片选择区域位置
+    const tilePanelX = 10;
+    const tilePanelY = 10;
+    const chunkSize = 16;
+    const tilePictureSizeX = 288;
+    const tilePictureSizeY = 208;
+    
+    // 瓦片选择区域背景
+    const tilePanel = this.add.rectangle(tilePanelX, tilePanelY, tilePictureSizeX, tilePictureSizeY+chunkSize, 0x111111, 0.8);
+    tilePanel.setOrigin(0, 0);
+    tilePanel.setScrollFactor(0, 0);
+    tilePanel.setDepth(10);
+    
+    // 瓦片选择区域标题
+    this.add.text(tilePanelX, tilePanelY, '瓦片选择', {
+      fontSize: '16px',
+      fill: '#ffffff',
+      fontFamily: 'Arial',
+      fontWeight: 'bold'
+    }).setScrollFactor(0, 0).setDepth(11);
+    
+    // 瓦片选择容器 - 注意：这是一个Container对象，可以使用removeAll方法
+    this.tileSelectionContainer = this.add.container(tilePanelX, tilePanelY+tilePictureSizeY+chunkSize);
+    this.tileSelectionContainer.setScrollFactor(0, 0);
+    this.tileSelectionContainer.setDepth(11);
+    
+    // 当前选中瓦片显示 - 改为使用Container容器，而不是Rectangle，这样可以使用removeAll方法
+    this.selectedTileContainer = this.add.container(tilePanelX, tilePanelY+tilePictureSizeY+chunkSize*2);
+    this.selectedTileContainer.setScrollFactor(0, 0);
+    this.selectedTileContainer.setDepth(11);
+    
+    // 添加选中瓦片背景
+    const selectedTileBg = this.add.rectangle(0, 0, 16, 16, 0x333333);
+    selectedTileBg.setOrigin(0, 0);
+    selectedTileBg.setDepth(10);
+    this.selectedTileContainer.add(selectedTileBg);
+    
+    this.add.text(tilePanelX, tilePanelY+tilePictureSizeY+chunkSize, '当前选中瓦片:', {
+      fontSize: '16px',
+      fill: '#ffffff',
+      fontFamily: 'Arial'
+    }).setScrollFactor(0, 0).setDepth(11);
+  }
+}