chicrobot/CINC
1
0 Fork 0
mirror of http://junepve.top:3000/chicrobot/CINC.git synced 2026-10-30 00:31:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(assets) 资源测试备份

Browse Source
This commit is contained in:
chicrobot committed 2026-01-07 22:52:19 +08:00
1 parent dbef3822c0
commit 66544082b2
4 files changed
+215 -43
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

scenes/MapEditTestScene.js
+95 -42
View File
@@ -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);