129 lines
4.3 KiB
HTML
129 lines
4.3 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>NS Unknown Game 地图编辑器</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<header class="app-header">
|
|
<div>
|
|
<h1>地图编辑器</h1>
|
|
<p>编辑游戏运行时使用的 Frostbite2D .map 文本地图。</p>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button id="undoButton" type="button" disabled>撤回</button>
|
|
<button id="loadSampleButton" type="button">加载 stage_01.map</button>
|
|
<label class="file-button">
|
|
打开 .map
|
|
<input id="fileInput" type="file" accept=".map,text/plain">
|
|
</label>
|
|
<button id="saveProjectButton" type="button" disabled>保存</button>
|
|
<button id="deployButton" type="button" disabled>一键部署</button>
|
|
<button id="downloadButton" type="button" class="primary-button">保存并下载</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="editor-shell">
|
|
<aside class="panel left-panel">
|
|
<section class="tool-card">
|
|
<div class="section-title">
|
|
<h2>地图设置</h2>
|
|
<span>基础参数</span>
|
|
</div>
|
|
<div class="field-grid">
|
|
<label>
|
|
地图 ID
|
|
<input id="mapIdInput" type="text">
|
|
</label>
|
|
<label>
|
|
世界宽
|
|
<input id="worldWidthInput" type="number" step="1">
|
|
</label>
|
|
<label>
|
|
世界高
|
|
<input id="worldHeightInput" type="number" step="1">
|
|
</label>
|
|
<label>
|
|
网格
|
|
<input id="gridSizeInput" type="number" step="1" min="1" value="10">
|
|
</label>
|
|
<label>
|
|
编辑目标
|
|
<select id="hitFilterInput">
|
|
<option value="all">智能选择</option>
|
|
<option value="collision">碰撞块</option>
|
|
<option value="tile">铺砖区</option>
|
|
<option value="zone">战斗区</option>
|
|
<option value="spawn">出生点</option>
|
|
<option value="rect">场景矩形</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="tool-card">
|
|
<div class="section-title">
|
|
<h2>新增对象</h2>
|
|
<span>放到当前视图中心</span>
|
|
</div>
|
|
<div class="button-grid">
|
|
<button id="addTilesetButton" type="button">图块集</button>
|
|
<button id="addLayerButton" type="button">图层</button>
|
|
<button id="addCollisionButton" type="button">碰撞块</button>
|
|
<button id="addTileRectButton" type="button">铺砖区</button>
|
|
<label class="file-button">
|
|
导入图形
|
|
<input id="graphicFileInput" type="file" accept="image/*">
|
|
</label>
|
|
<button id="addBattleZoneButton" type="button">战斗区</button>
|
|
<button id="addSpawnButton" type="button">出生点</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="tool-card object-section">
|
|
<div class="section-title">
|
|
<h2>对象列表</h2>
|
|
<span>点击选择后可拖动</span>
|
|
</div>
|
|
<div id="objectList" class="object-list"></div>
|
|
</section>
|
|
</aside>
|
|
|
|
<section class="canvas-panel">
|
|
<div class="toolbar">
|
|
<span id="statusText">就绪</span>
|
|
<span id="viewText"></span>
|
|
</div>
|
|
<canvas id="mapCanvas" width="1280" height="720"></canvas>
|
|
</section>
|
|
|
|
<aside class="panel right-panel">
|
|
<section>
|
|
<h2>选中对象</h2>
|
|
<div id="selectionSummary" class="selection-summary">未选择对象。</div>
|
|
<div id="propertyPanel" class="property-panel"></div>
|
|
<div class="layer-actions">
|
|
<button id="moveLayerUpButton" type="button">图层上移</button>
|
|
<button id="moveLayerDownButton" type="button">图层下移</button>
|
|
</div>
|
|
<button id="deleteButton" type="button" class="danger-button">删除选中对象</button>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>图块集</h2>
|
|
<div id="tilesetList" class="tileset-list"></div>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>导出文本</h2>
|
|
<textarea id="outputText" spellcheck="false"></textarea>
|
|
</section>
|
|
</aside>
|
|
</main>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|