Skip to content

vue2开发的单页静态网页,用以戴森球计划游戏内超距电路蓝图的构建。 项目基于d3js实现拖拉拽编辑,对建筑组件进行创建、连接,并可通过组件封装实现对内部细节的隐藏,将戴森球建筑组合封装为数字电路模块,以网表方式连接电路模块构建大型电路,最终生成戴森球计划游戏蓝图数据在游戏内摆放电路。

License

Notifications You must be signed in to change notification settings

cying314/dspBuildingDesigner

Repository files navigation

戴森球计划 数字电路自动化工具

- DSP物流电路设计器

用于戴森球计划(Dyson Sphere Program)游戏内数字电路蓝图的可视化编辑及自动化构建。

项目将游戏建筑、传送带抽象化为有向图的节点与连接,基于Web端节点编辑器,实现以拖拉拽方式编辑游戏建筑、封装逻辑门组件,并实现基于有向图点边数据解析为游戏建筑对象,序列化为蓝图文件的过程。

项目旨在以嵌套封装的形式,隐藏模块内部复杂逻辑,支持物流级、逻辑门级封装,使戴森球计划相关物流建筑(如四向分流器、传送带、流速器等)的逻辑透明化——用户无需关注游戏内如何构建逻辑门,只需关注数字电路的逻辑实现,由工具自动化构建游戏建筑蓝图。

  • 项目框架:Vue、d3.js

本项目为Vue2开发的单页静态网页,基于d3.js实现Web端节点编辑器。

  • 在线访问地址:

https://cying.xyz/DSP/dspBuildingDesigner

  • b站演示视频:

https://www.bilibili.com/video/BV1Gc411x7Xx/

image-20240416204441

  • 页面截图:

页面截图1

页面截图2

页面截图3

  • 工具说明:

基础操作

  • 创建节点: 方式1、拖拽左侧栏组件到画布中; 方式2、在左侧栏开启双击创建,并勾选要创建的组件,在画布中双击创建
  • 连接: 从一个节点的 插槽 长按左键拖拽到其他节点的 插槽 即可创建连接 *同一个插槽只可连接一次,在右键插槽菜单中可断开连接
  • 选择节点: 左键点击可单选节点,按住Ctrl点击可实现增选、减选; 长按右键可拖拽框选,按住Ctrl框选可实现增选
  • 组件菜单: 右键节点打开节点菜单,可操作切换图标、切换标记数、切换生成物品、封装、展开封装等 右键插槽打开插槽菜单,可操作断开连接、切换插槽方向、设置四向优先接口等

快捷操作

  • Ctrl+A: 全选节点
  • Ctrl+C: 复制选中节点
  • Ctrl+V: 鼠标处粘贴
  • Ctrl+X: 剪切选中节点
  • Delete: 删除选中节点
  • Ctrl+Z: 撤回(限50次)
  • Ctrl+Shift+Z: 重做(取消撤回)
  • Ctrl+S: 保存到浏览器缓存
  • Ctrl+D: 导出工程为JSON文件
  • Ctrl+B: 导出蓝图
  • 方向键↑↓←→: 移动选中节点
  • 双击插槽: 切换插槽方向(封装模块无法切换,为断开连接)
  • 双击文本: 可修改节点名称、传送带标记数等
  • 拖拽连接+Ctrl: 从插槽拖出连接线时,长按Ctrl可进入“批量连接”模式——鼠标经过可连接的插槽时会立即建立连接,并自动从节点的下一个插槽处拉出连接线到鼠标位置

封装模块

  • 封装与展开: 框选节点后,可通过右键菜单创建封装,已封装的组件也可以通过右键展开封装; 模块封装后将展示在左侧栏的当前封装模块中,封装模块将随着项目保存,引入其他组件时将同时引入组件依赖的封装模块
  • 连接封装模块: 实际使用中,模块插槽无需全部连接,未连接的输入口将默认置1(即“悬空置1”),输出口将作为普通流速器回收
  • 封装组件插槽: 封装中必须至少包含各一个输入输出口,封装后输入输出口将作为模块的节点插槽,插槽顺序将按照输入输出口的传送带标记数升序排列
  • 修改封装组件: 若只想修改封装组件的非结构性数据(如插槽名、图标、标记数字、内部文本描述等),可展开封装修改后重新进行封装,工具将在封装时提示“是否覆盖更新封装数据”,确认后将覆盖原有封装内容; 如发生结构变化,则需另行封装并替换模块
  • 批量替换模块: 右键选中封装模块,可选择替换为其他模块,将选中的模块更换为当前工程引用的其他封装模块; 替换时,原模块的插槽连接将根据从左往右的顺序接入到新模块中,若新模块插槽数量小于原模块,则溢出部分将断开链接; 若画布上存在与选中模块相同的结构,将弹窗提示“是否更改到所有相似节点”,确认后可一键替换所有相似模块为指定的新模块(仅替换同层模块,封装内部的模块不会被替换)

安装依赖

cnpm install

运行测试服务

npm run serve

构建打包

npm run build
# 打包后可删除dist文件夹中的css及js文件夹(打包流冗余文件,所有代码已打包进html),仅保留index.html

About

vue2开发的单页静态网页,用以戴森球计划游戏内超距电路蓝图的构建。 项目基于d3js实现拖拉拽编辑,对建筑组件进行创建、连接,并可通过组件封装实现对内部细节的隐藏,将戴森球建筑组合封装为数字电路模块,以网表方式连接电路模块构建大型电路,最终生成戴森球计划游戏蓝图数据在游戏内摆放电路。

Resources

License

Stars

Watchers

Forks

Packages

No packages published