map_viewer.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>地图查看器 - 无角色</title>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
    <style>
        body { margin: 0; padding: 0; background: #2c3e50; }
        #game-container { width: 100%; height: 100vh; }
        .info { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.7); color: white; padding: 10px; border-radius: 5px; z-index: 100; }
    </style>
</head>
<body>
    <div class="info">
        <h3>地图查看器</h3>
        <p>WASD或方向键移动地图</p>
        <p>空格放大, Shift缩小</p>
        <p>鼠标拖拽可移动</p>
    </div>
    <div id="game-container"></div>
    
    <script>
        // 地图配置
        const config = {
          type: Phaser.CANVAS,  // 使用Canvas替代WebGL
          width: window.innerWidth,
          height: window.innerHeight,
          parent: "game-container",
          pixelArt: true,
          backgroundColor: '#4488aa', // 添加背景颜色
          scene: {
            preload: preload,
            create: create,
            update: update
          }
        };

        // 创建游戏实例
        const game = new Phaser.Game(config);
        let cursors, wasdKeys;
        let camera;
        let isDragging = false;
        let lastPointerPosition = { x: 0, y: 0 };
        let moveSpeed = 15; // 相机移动速度
        let coordText; // 坐标显示文本

        // 在preload函数中添加资源加载事件监听器
        function preload() {
          // 显示加载进度
          const loadingText = this.add.text(this.cameras.main.centerX, this.cameras.main.centerY, '加载中...', { 
            font: '24px Arial', fill: '#ffffff' 
          }).setOrigin(0.5);
          
          this.load.on('progress', (value) => {
            loadingText.setText(`加载中: ${parseInt(value * 100)}%`);
          });
          
          this.load.on('complete', () => {
            loadingText.destroy();
          });
          
          // 添加特定资源加载完成事件
          this.load.on('filecomplete-image-interiors_full', function() {
            console.log('✅ interiors_full 贴图加载完成');
          });
          
          this.load.on('filecomplete-image-pool', function() {
            console.log('✅ pool 贴图加载完成');
          });
          
          this.load.on('loaderror', function(file) {
            console.error('❌ 资源加载失败:', file.key);
          });
          
          // 加载必要的图像资源
          this.load.image("interiors_full", "environment/frontend_server/static_dirs/assets/the_ville/visuals/map_assets/v1/Interiors_32x32_full.png");
          this.load.image("pool", "environment/frontend_server/static_dirs/assets/the_ville/visuals/map_assets/v3/tileset-grassland-water.png");
          
          this.load.image("blocks_1", "environment/frontend_server/static_dirs/assets/the_ville/visuals/map_assets/blocks/blocks_1.png");
          this.load.image("blocks_2", "environment/frontend_server/static_dirs/assets/the_ville/visuals/map_assets/blocks/blocks_2.png");
          this.load.image("blocks_3", "environment/frontend_server/static_dirs/assets/the_ville/visuals/map_assets/blocks/blocks_3.png");
          this.load.image("walls", "environment/frontend_server/static_dirs/assets/the_ville/visuals/map_assets/v1/Room_Builder_32x32.png");
          this.load.image("interiors_pt1", "environment/frontend_server/static_dirs/assets/the_ville/visuals/map_assets/v1/interiors_pt1.png");
          this.load.image("interiors_pt2", "environment/frontend_server/static_dirs/assets/the_ville/visuals/map_assets/v1/interiors_pt2.png");
          this.load.image("interiors_pt3", "environment/frontend_server/static_dirs/assets/the_ville/visuals/map_assets/v1/interiors_pt3.png");
          this.load.image("interiors_pt4", "environment/frontend_server/static_dirs/assets/the_ville/visuals/map_assets/v1/interiors_pt4.png");
          this.load.image("interiors_pt5", "environment/frontend_server/static_dirs/assets/the_ville/visuals/map_assets/v1/interiors_pt5.png");
          this.load.image("CuteRPG_Field_B", "environment/frontend_server/static_dirs/assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Field_B.png");
          this.load.image("CuteRPG_Field_C", "environment/frontend_server/static_dirs/assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Field_C.png");
          this.load.image("CuteRPG_Harbor_C", "environment/frontend_server/static_dirs/assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Harbor_C.png");
          this.load.image("CuteRPG_Village_B", "environment/frontend_server/static_dirs/assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Village_B.png");
          this.load.image("CuteRPG_Forest_B", "environment/frontend_server/static_dirs/assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Forest_B.png");
          this.load.image("CuteRPG_Desert_C", "environment/frontend_server/static_dirs/assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Desert_C.png");
          this.load.image("CuteRPG_Mountains_B", "environment/frontend_server/static_dirs/assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Mountains_B.png");
          this.load.image("CuteRPG_Desert_B", "environment/frontend_server/static_dirs/assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Desert_B.png");
          this.load.image("CuteRPG_Forest_C", "environment/frontend_server/static_dirs/assets/the_ville/visuals/map_assets/cute_rpg_word_VXAce/tilesets/CuteRPG_Forest_C.png");
          
          // 加载地图JSON
          this.load.tilemapTiledJSON("map", "environment/frontend_server/static_dirs/assets/the_ville/visuals/the_ville_jan7-2.json");
        }

        function create() {  
          const map = this.make.tilemap({ key: "map" });
          
          // 添加贴图集创建日志
          try {
            const interiors_full = map.addTilesetImage("Interiors_32x32_full", "interiors_full");
            const pool = map.addTilesetImage("tileset-grassland-water", "pool");   
            const collisions = map.addTilesetImage("blocks", "blocks_1");
            const playground = map.addTilesetImage("blocks_2", "blocks_2");
            const playground2 = map.addTilesetImage("blocks_3","blocks_3");
            const walls = map.addTilesetImage("Room_Builder_32x32", "walls");
            const interiors_pt1 = map.addTilesetImage("interiors_pt1", "interiors_pt1");
            const interiors_pt2 = map.addTilesetImage("interiors_pt2", "interiors_pt2");
            const interiors_pt3 = map.addTilesetImage("interiors_pt3", "interiors_pt3");
            const interiors_pt4 = map.addTilesetImage("interiors_pt4", "interiors_pt4");
            const interiors_pt5 = map.addTilesetImage("interiors_pt5", "interiors_pt5");
            const CuteRPG_Field_B = map.addTilesetImage("CuteRPG_Field_B", "CuteRPG_Field_B");
            const CuteRPG_Field_C = map.addTilesetImage("CuteRPG_Field_C", "CuteRPG_Field_C");
            const CuteRPG_Harbor_C = map.addTilesetImage("CuteRPG_Harbor_C", "CuteRPG_Harbor_C");
            const CuteRPG_Village_B = map.addTilesetImage("CuteRPG_Village_B", "CuteRPG_Village_B");
            const CuteRPG_Forest_B = map.addTilesetImage("CuteRPG_Forest_B", "CuteRPG_Forest_B");
            const CuteRPG_Desert_C = map.addTilesetImage("CuteRPG_Desert_C", "CuteRPG_Desert_C");
            const CuteRPG_Mountains_B = map.addTilesetImage("CuteRPG_Mountains_B", "CuteRPG_Mountains_B");
            const CuteRPG_Desert_B = map.addTilesetImage("CuteRPG_Desert_B", "CuteRPG_Desert_B");
            const CuteRPG_Forest_C = map.addTilesetImage("CuteRPG_Forest_C", "CuteRPG_Forest_C");
            

            const bottomGroundLayer = map.createLayer("Bottom Ground", CuteRPG_Field_B, 0, 0);
            const exteriorGroundLayer = map.createLayer("Exterior Ground", [CuteRPG_Village_B, CuteRPG_Desert_C, CuteRPG_Field_B, CuteRPG_Field_C, CuteRPG_Forest_B, playground, collisions, pool], 0, 0);
            const exteriorDecorationL1Layer = map.createLayer("Exterior Decoration L1", [CuteRPG_Field_B, CuteRPG_Field_C, CuteRPG_Forest_B, CuteRPG_Forest_C, CuteRPG_Village_B, interiors_pt5, CuteRPG_Mountains_B, CuteRPG_Desert_B], 0, 0);
            const exteriorDecorationL2Layer = map.createLayer("Exterior Decoration L2", [CuteRPG_Forest_B, CuteRPG_Forest_C, CuteRPG_Field_B], 0, 0);
            const interiorGroundLayer = map.createLayer("Interior Ground", [CuteRPG_Field_C, CuteRPG_Harbor_C, walls], 0, 0);
            const wallLayer = map.createLayer("Wall", [CuteRPG_Field_C, walls], 0, 0);
            const interiorFurnitureL1Layer = map.createLayer("Interior Furniture L1", [interiors_pt1, interiors_pt2, interiors_pt3, interiors_pt4, interiors_pt5, interiors_full], 0, 0);            
            const interiorFurnitureL2Layer = map.createLayer("Interior Furniture L2 ", [interiors_pt1, interiors_pt2, interiors_pt3, interiors_pt4, interiors_pt5, interiors_full], 0, 0);
            const collisionsLayer = map.createLayer("Collisions", collisions, 0, 0);
            
            // 设置深度
            collisionsLayer.setDepth(-1);
            
            // 设置相机
            camera = this.cameras.main;
            camera.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
            camera.setZoom(0.8);
            
            // 将相机初始定位到地图中心
            camera.centerOn(map.widthInPixels / 2, map.heightInPixels / 2);
            
            // 添加坐标显示
            coordText = this.add.text(10, 10, '', { 
              font: '16px Arial', 
              fill: '#ffffff',
              backgroundColor: '#000000',
              padding: { x: 5, y: 5 }
            }).setScrollFactor(0).setDepth(100);
            
            // 添加鼠标滚轮缩放
            this.input.on('wheel', function (pointer, gameObjects, deltaX, deltaY, deltaZ) {
              if (deltaY > 0) {
                camera.zoom = Math.max(0.5, camera.zoom - 0.05);
              } else {
                camera.zoom = Math.min(2.0, camera.zoom + 0.05);
              }
            });
  
            // 添加键盘控制
            cursors = this.input.keyboard.createCursorKeys();
            wasdKeys = this.input.keyboard.addKeys({
              up: Phaser.Input.Keyboard.KeyCodes.W,
              down: Phaser.Input.Keyboard.KeyCodes.S,
              left: Phaser.Input.Keyboard.KeyCodes.A,
              right: Phaser.Input.Keyboard.KeyCodes.D
            });
            
            // 添加鼠标拖动功能
            this.input.on('pointerdown', function (pointer) {
              if (pointer.leftButtonDown()) {
                isDragging = true;
                lastPointerPosition = { x: pointer.x, y: pointer.y };
              }
            });
  
            this.input.on('pointermove', function (pointer) {
              if (isDragging) {
                const deltaX = pointer.x - lastPointerPosition.x;
                const deltaY = pointer.y - lastPointerPosition.y;
                
                // 直接移动相机而不是player
                camera.scrollX -= deltaX / camera.zoom;
                camera.scrollY -= deltaY / camera.zoom;
                
                lastPointerPosition = { x: pointer.x, y: pointer.y };
              }
            });
  
            this.input.on('pointerup', function (pointer) {
              isDragging = false;
            });
          } catch (e) {
            console.error('❌ 贴图集或图层创建失败:', e);
          }
        }

        function update(time, delta) {
          // 直接控制相机而不是player
          if (cursors.left.isDown || wasdKeys.left.isDown) {
            camera.scrollX -= moveSpeed;
          }
          if (cursors.right.isDown || wasdKeys.right.isDown) {
            camera.scrollX += moveSpeed;
          }
          if (cursors.up.isDown || wasdKeys.up.isDown) {
            camera.scrollY -= moveSpeed;
          }
          if (cursors.down.isDown || wasdKeys.down.isDown) {
            camera.scrollY += moveSpeed;
          }
          
          // 空格键放大和Shift键缩小
          if (cursors.space.isDown) {
            camera.zoom = Math.min(2.0, camera.zoom + 0.01);
          }
          if (cursors.shift.isDown) {
            camera.zoom = Math.max(0.5, camera.zoom - 0.01);
          }
          
          // 更新坐标显示
          const tileX = Math.floor(camera.scrollX / 32);
          const tileY = Math.floor(camera.scrollY / 32);
          coordText.setText(`位置: X=${tileX}, Y=${tileY} | 缩放: ${camera.zoom.toFixed(2)}`);
        }
    </script>
</body>
</html>