generative_agents/map_viewer.html at main · CXP-2024/generative_agents · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!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>