BackRooms Canvas：在 GitHub Copilot 侧边栏中构建无限后室漫游画布

BackRooms Canvas在 GitHub Copilot 侧边栏中构建无限后室漫游画布【免费下载链接】awesome-copilotCommunity-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-copilot导读BackRooms Canvas 是 Awesome Copilot 仓库extensions/backrooms-canvas中提供的一个 GitHub Copilot 画布Canvas扩展它在 Copilot 侧边栏中打开一个无限延伸、以种子seed确定性生成的后室Backrooms第一人称世界你可以在 Agent 工作期间漫游其间而 Agent 的实时状态与流式回复会以墨水手写体直接涂写在墙壁上。阅读本文后你将掌握该扩展的安装方式、画布输入参数与完整操作键位理解report_job、ghost_write、relocate三个 Agent 动作的调用协议并借助源码extension.mjs弄清它如何用循环回环 HTTP 服务器 Server-Sent Events VSCode webview 宿主 Shim这一架构让一套为 VSCode 编写的游戏 bundle 原封不动地跑进 Copilot 画布。这是什么一个会回应你的后室漫游画布黄色壁纸的走廊、嗡嗡作响的荧光灯管、掉落的吊顶天花板、磨旧的办公地毯再叠加 1990 年代手持摄像机式的抖动与胶片颗粒——这就是 BackRooms Canvas 营造的氛围。它并非静态壁纸世界由程序化无限迷宫引擎驱动每一面墙、每个房间、每件道具都是种子的纯函数——同一个种子永远重建出完全相同的房间向任何方向无限延伸。它也不是普通的背景应用。当 Agent 在会话中工作时走廊会开始写回Agent 的状态与流式输出会被涂写在墙上HUD 电池下方则运行着一个摄像机风格的 token 计数器。从 README 可知它是 BackViews VSCode 扩展的画布移植版底层世界由 cmd-backedges作者 John Haugabook的过程式无限迷宫引擎驱动。仓库文件结构extensions/backrooms-canvas/ ├── extension.mjs # 画布声明、loopback 游戏服务器、静态资源处理与 Agent 动作 ├── game/ # 预构建游戏 bundlewebview.js与 index.html 宿主 Shim ├── materials/ # 照片级贴图wallpaper.jpg / ceiling.jpg / carpet.jpg ├── assets/ # 应用图标与扩展画廊 preview.png ├── package.json # 声明 Copilot SDK 依赖与 ESM 入口 └── copilot-extension.json # Copilot 扩展名/版本元数据此外仓库的 plugins/backrooms-canvas 目录还提供了对应的插件元数据支持通过copilot plugin install backrooms-canvasawesome-copilot一键安装。环境要求Prerequisites根据 README运行该扩展需要Node.js 20.19 或更新版本——因为 Copilot SDK 要求node ^20.19.0 || 22.12.0见 package.json 中声明的github/copilot-sdk依赖支持 WebGL 的画布表面——渲染器是原生 WebGL无任何框架抽象启用 GitHub Copilot 应用的 canvas / UI-extensions 实验特性。安装步骤把整个文件夹放到用户级或项目级扩展目录然后安装依赖# 用户级作用域 cd ~/.copilot/extensions/backrooms-canvas # 或项目级作用域从仓库根目录开始 cd .github/extensions/backrooms-canvas npm install随后在 GitHub Copilot 应用中重新加载扩展打开backrooms-canvas画布点击视图以捕获鼠标即可开始行走。npm install会安装github/copilot-sdklatest入口为 ESM 模块extension.mjstype: module。可选的打开输入参数打开画布时可传入以下输入输入类型说明seednumber迷宫种子。相同种子永远重建相同的走廊0则随机生成种子。materialPresetstring墙面材质组classic、office、pool、concrete或panel。monsterEnabledboolean走廊里是否有别的东西在行走。输入参数在源码中的处理逻辑从 extension.mjs 的normalizeOverrides可以看出打开输入会被收敛成部分设置覆盖且只信任与 Agent 预设相关的键seed通过Math.trunc(clampNumber(input.seed, 0, Number.MAX_SAFE_INTEGER, 0))规整seed 0时调用randomSeed()Math.floor(Math.random() * 999_999) 1生成 1999999 的随机种子materialPreset经pickEnum校验仅接受MATERIAL_PRESETS [classic, office, pool, concrete, panel]中的枚举值否则回退到classicmonsterEnabled被强制转换为布尔值input.monsterEnabled true源码还额外支持monsterFormspider/humanoid/cloud/random与copilotGhostWriter两个输入即使 README 未在表格中列出——它们同样会被合并进设置覆盖。操作与控制Controls输入动作W/S或Up/Down前进 / 后退A/D左移 / 右移扫射Left/Right或Q/E转身Shift加速Hurry鼠标点击视图后环顾四周M或Esc打开游戏内菜单游戏内菜单包含Resume继续、Relocate换位、Settings设置、Help帮助以及实时统计数据。菜单中的设置更改会通过localStorage持久化到画布因此你的选择在刷新后依然保留。这一点在 game/index.html 的 Shim 中有对应实现acquireVsCodeApi()以backrooms.settings/backrooms.state两个localStorage键分别持久化设置与玩家状态当玩家在菜单中显式修改某设置时Shim 还会向服务端发送DELETE /override/key请求删除对应的按次打开覆盖使刷新后保留玩家的选择而非旧覆盖详见 extension.mjs 中的注释逻辑。Agent 动作让 Agent 自己写墙Agent 通过三个动作驱动游戏并喂养幽灵写手ghost-writer它们是原扩展backviews_reportJob工具与聊天会话镜像的画布等价物见 READMEreport_job { status, tokens?, done? }报告当前任务步骤。状态文本会被涂写在墙上token 数驱动 HUD 计数器。在任务开始时调用一次每个新步骤再调用一次完成时以done: true再调用一次。参数校验逻辑normalizeJob非常严谨status截断为前 120 个字符status.slice(0, 120)tokens只接受有限数值向下取整且不小于 0Math.max(0, Math.floor(input.tokens))done: true时working变为false墙壁停止更新、计数器淡出未传或非法输入时回退到IDLE_JOB { working: false, status: , tokens: 0 }。ghost_write { text, tokens?, done? }把一段文本逐字符幽灵写到前方的墙壁上像流式聊天回复一样逐渐生长。每次调用发送累积至今的完整文本最后以done: true调用一次使其定格。对应实现normalizeSessiontokens未提供时默认按text.length / 4估算done: true且文本非空时working变为false笔迹定格、计数器停止。relocate将漫游者传送到一个新的随机种子并抹去墙上已有的一切文字。源码中该动作在广播relocate事件前会先把entry.job重置为IDLE_JOB、entry.session置空避免刷新时把旧内容重放到新迷宫里。让 Agent 自动旁白要让 Agent 自动播报自己可在项目的.github/copilot-instructions.md中引用这些动作指示它在聊天请求的每个步骤调用report_job。三个动作的完整 JSON Schema 均声明在 extension.mjs 的createCanvas中report_job要求status必填ghost_write要求text必填relocate无参数。所有 schema 均设置additionalProperties: false。移植原理VSCode webview bundle 如何在画布中运行BackRooms Canvas 最巧妙之处在于游戏本体完全未改game/webview.js 是与 VSCode 扩展相同的自包含 bundle——WebGL 渲染器、迷宫引擎、摄像机叠加层和写墙子系统全部打包进一个 esbuild IIFE共 4000 余行。这个 bundle 当初是为 VSCode webview 宿主编写的通过acquireVsCodeApi()和window.postMessage与宿主通信。game/index.html 中的宿主 Shim 完成了桥接acquireVsCodeApi()以localStorage为后端用于状态种子、玩家位置与设置持久化画布服务器extension.mjs运行一个 loopback HTTP 服务器在/events上通过Server-Sent EventsSSE流式推送 Agent 活动Shim 把这些事件翻译成 bundle 本就监听的jobStatus、chatSession、relocate消息Agent 动作广播到该 SSE 流于是report_job写墙、ghost_write流式写字的观感与 VSCode 聊天镜像完全一致。这一架构与其姊妹项目 arcade-canvas 相同静态前端由 loopback 服务器提供Agent 通过画布动作驱动前端。消息协议一览源码头部注释extension.mjs明确定义了消息形状与 bundle 的期望完全对齐对应原版src/shared/settings.tshost - game : { type: config, settings } { type: jobStatus, job } // CopilotJob { type: chatSession, session } // ChatSessionSnapshot { type: relocate } game - host : { type: ready } // 由 Shim 处理 { type: updateSetting, key, value } // 由 Shim 处理服务端实现要点extension.mjs按实例隔离servers是一个Map以instanceId为键每次打开画布open回调若对应实例不存在则调用startServer启动一个监听127.0.0.1:0随机空闲端口的 loopback 服务器每个打开的画布实例独占一个入口entry包含clientsSSE 连接集合、overrides、job、session等状态。SSE 断线续播/events建立连接时会立刻重放当前jobStatus与chatSessionextension.mjs保证刚打开面板或重连的客户端能接上现场状态连接关闭时从clients集合移除。路径安全resolveUnder将请求路径解析到指定根目录下任何逃逸到根目录之外的路径都会抛出CanvasError(invalid_path, ...)并以 400 拒绝杜绝目录穿越。材质注入renderIndex会把__BACKROOMS_INIT__注入 HTML包含默认设置、覆盖项、三张照片贴图的 URL/materials/wallpaper.jpg等以及当前 job/sessionShim 据此构建游戏的首条config消息含转义为\u003c的防注入处理。静态资源支持按扩展名设置正确的 Content-Type图片png/jpg/svg/webp、JS、HTML、CSS 一应俱全/favicon.ico直接回应用户图标 assets/icon.png。默认设置DEFAULT_SETTINGSextension.mjs与 bundle 内部的DEFAULT_SETTINGS完全一致涵盖移动速度2.2、渲染距离14、摄像机抖动/胶片颗粒/VHS HUD、家具、鼠标视角、materialPreset: classic、怪物速度2.6、怪物生成数量范围1~5、copilotGhostWriter: true等Shim 按bundle 默认 → 玩家保存的菜单选择 → 按次打开的 Agent 覆盖的优先级合并生效见 game/index.html。生命周期onClose回调会删除服务器记录、断开所有 SSE 客户端并关闭 loopback 服务器确保画布关闭后资源被回收尚未打开画布就调用动作时getOpenEntry会抛出backrooms_not_open错误提示先打开画布。如何让 Agent 在会话中写墙要让这套机制真正跑起来最简单的方式是在仓库的.github/copilot-instructions.md中引导 Agent会话开始时调用report_job { status: reading the codebase, tokens }每个处理步骤更新report_job用新状态覆盖墙上文字需要流式呈现回复时用ghost_write { text: 累积文本, tokens }逐次增长任务完成时调用report_job { status: done, tokens, done: true }或ghost_write { text, done: true }让文字定格、计数器淡出。许可与致谢该扩展以MIT许可发布。迷宫生成引擎与原始扩展均出自 cmd-backedges 与 vscode-backviews作者 John HaugabookBackRooms Canvas 是它们的画布移植作品。如果你想在自己的 Copilot 工作流中获得一个既养眼又能直观看见 Agent 进度的背景BackRooms Canvas 是一份开箱即用、且可以完全照搬架构二次开发的参考实现。【免费下载链接】awesome-copilotCommunity-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.项目地址: https://gitcode.com/GitHub_Trending/aw/awesome-copilot创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考