mirror of
http://junepve.top:3000/chicrobot/CINC.git
synced 2026-10-30 00:31:29 +08:00
feat(assets) 资源测试备份
This commit is contained in:
chicrobot committed
1 parent
1a067f15a1
commit
dbef3822c0
4 files changed
+437
-96
No files matched your search
+127
-95
@@ -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);
|
||||
|
||||
|
||||
Reference in new issue
Block a user