GDevelop 5 编辑器newIDE开发环境搭建与源码构建完全指南【免费下载链接】GDevelop Open-source, cross-platform 2D/3D/multiplayer game engine designed for everyone.项目地址: https://gitcode.com/GitHub_Trending/gd/GDevelop本指南以 newIDE/README.md 为骨架结合 GDevelop 仓库中的newIDE/app、newIDE/electron-app、newIDE/web-app、GDevelop.js与GDJS源码系统讲解 GDevelop 5 编辑器即 newIDE的架构组成、本地安装、Web 开发调试、Electron 桌面应用打包、Storybook 组件开发、CI 无头导出headless CLI、主题定制与翻译流程。读完本文你将能够从零拉起编辑器开发环境、修改扩展与游戏引擎代码并即时预览以及构建可在 CI 上执行导出命令的便携式构建产物。一、编辑器架构五个技术栈 一个编译到 JS 的 C 核心newIDE 是 GDevelop 5 的编辑器本体代码位于仓库的 newIDE 目录。根据 newIDE/README.md 的说明它由以下技术组合而成React负责整个 UI 组件树与状态管理Material-UI提供控件、主题与排版基础newIDE/app/package.json中锁定material-ui/core4.11.0 等版本Pixi.js用于场景编辑器中的实例渲染2DThree.js用于 3D 场景编辑Electron将 Web 应用封装为桌面独立应用newIDE/electron-app/GDevelop.js将 GDevelop 的 C 核心类编译为 JavaScript 后供编辑器调用用于处理游戏工程项目解析、序列化、事件编辑等。从 newIDE/app/package.json 的dependencies可以看到这套技术栈的具体落地react18.2.0、material-ui/core4.11.0、pixi.js-legacy7.4.2、three0.160.0、react-mosaic-component多窗格布局、react-monaco-editor事件/脚本代码编辑器、lingui/react国际化等。开发期还依赖flow-bin、prettier、storybook与style-dictionary主题构建。编辑器与游戏引擎的分工是编辑器负责创作、调试与导出游戏运行时引擎GDJS位于GDJS/Runtime与扩展Extensions负责在玩家浏览器中实际运行游戏。两者共享同一套由扩展声明的对象、行为、特效、动作、条件与表达式元数据。二、安装依赖Git Node.js Yarn可选官方要求的本机环境为 Git 与 Node.jsYarn 为可选项。安装步骤如下git clone https://github.com/4ian/GDevelop.git cd GDevelop/newIDE/app npm install # 或 yarn以本仓库为例等价地克隆后进入newIDE/app执行依赖安装即可。npm install触发postinstall钩子见 newIDE/app/package.json它会依次执行patch-package、在GDJS下安装依赖并运行npm run import-resources。三、开发模式npm start 与资源导入机制依赖安装完成后在newIDE/app目录启动开发服务器npm start # 或 yarn start该命令会在浏览器中打开编辑器。从 newIDE/app/package.json 的scripts可以看到npm start实际上先执行import-resources再用concurrently同时启动两个进程start: npm run import-resources concurrently \react-app-rewired start\ \node scripts/watch-serve-GDJS-runtime.js\ -n \editor,game engine\ --kill-othersimport-resources依次完成以下工作对应scripts目录中的实现脚本make-version-metadata生成版本元数据make-version-metadata.jsimport-zipped-external-editors导入 Piskel像素画、JFXr音效等外部编辑器import-zipped-editor.jsbuild-theme-resources用 Style Dictionary 编译全部主题build-theme-resources.jsmake-service-worker生成 Service Workermake-service-worker.jsimport-libGD.js自动下载 libGD.jsGDevelop C 核心的 WebAssembly/JS 构建如果你修改过 GDevelop 原生代码如 C 扩展也可以参考 GDevelop.js 自行构建 libGD.js 后再导入import-GDJS-Runtime.js将 GDJS Runtime 与扩展声明/运行时源码拷贝进编辑器资源import-monaco-editor.js与import-zipped-external-libs.js导入 Monaco 编辑器与第三方库。Linux 注意如果启动时遇到如下错误——Error: watch GD/newIDE/app/some/file ENOSPC说明系统 inotify 监视数量达到上限。解决方法是按照 inotify 相关系统调优指南如echo fs.inotify.max_user_watches524288 | sudo tee -a /etc/sysctl.conf sudo sysctl -p调大fs.inotify.max_user_watches后重试。四、Electron 桌面独立应用开发编辑器在开发模式下由本地服务器提供页面因此运行独立桌面应用前必须先启动并保持npm start运行cd newIDE/app npm start # 先在另一个终端启动并保持运行 # 新开一个终端 cd newIDE/electron-app npm install # 或 yarn npm run start # 或 yarn startelectron-app的启动脚本为electron app见 newIDE/electron-app/package.json其postinstall会导入 React Developer Tools 等 Electron 扩展并安装app子目录依赖。electron-app目录中的 README.md 明确说明这就是把 newIDE 打包为独立编辑器所用到的 Electron 源码。快速安装并运行仓库 scripts 目录下提供了自动化脚本 gitCloneAndBuildGD.batWindows 用户下载该批处理脚本放到希望克隆 GDevelop 的位置后直接运行即可自动完成克隆、构建 IDE 并启动。五、UI 组件开发Storybook 游乐场编辑器组件以 Storybook 作为 UI 快速开发与测试的游乐场cd newIDE/app npm run storybook # 或 yarn storybook脚本定义在 newIDE/app/package.json 中storybook dev -p 9009即默认监听 9009 端口。提交 Pull Request 或推送 commit 时CI 会为你的分支构建并临时托管 Storybook可直接在浏览器中测试组件。六、质量保障单测、类型检查与自动格式化cd newIDE/app npm run test # 或 yarn test —— 单测react-app-rewired test --envnode npm run flow # 或 yarn flow —— Flow 类型检查 npm run format # 或 yarn format —— Prettier 自动格式化配套脚本同样定义在 newIDE/app/package.jsonlint使用 ESLint 且要求零警告check-format检查未格式化文件check-script-types对scripts目录做 TypeScript 检查。此外lint-staged会在提交前对暂存的src/**/*.js自动执行 Prettier 与 ESLint。七、主题定制从 theme.json 到 CSS/JSON编辑器的主题机制详见 newIDE/README-themes.md。核心要点每个主题拥有独立子目录位于newIDE/app/src/UI/Theme下仓库当前已内置DefaultLight、DefaultDark、BlueDark、DeepBlue、Nord、OneDark、RosePine、SolarizedDark等主题主题由一份theme.json定义如 DefaultLightTheme/theme.json 中primary.dark、primary.color、primary.light、text-contrast-color等字段值为十六进制色值并带调色板注释编译后产出一个.css文件将样式生成为 CSS Custom Properties通过主题 class 应用到应用的不同区域一个.json文件扁平样式对象供 Material-UI 与自定义组件导入使用每个主题还有一个index.js如 DefaultLightTheme/index.js调用createGdevelopTheme传入 styles、rootClassNameIdentifier与paletteType来生成编辑器使用的主题对象。新建主题在newIDE/app下执行npm run create-new-theme 主题名脚本create-new-theme.js会创建index.js、theme.json及对应目录填入主题名与默认值并更新根目录相关文件、重编译全部主题。编辑主题修改theme.json后运行npm run build-theme-resources将样式重新编译为.css与.json。该命令在每次改动后都需要执行一次。八、开发游戏引擎与扩展热更新工作流游戏引擎核心GDJS位于 GDJS/Runtime扩展源码位于仓库根目录的 Extensions。扩展开发的手把手教程见 newIDE/README-extensions.md其标准工作流为以 Electron 方式启动 GDevelop并在开发者控制台确认出现Loaded x JS extensions.日志说明扩展已加载打开Extensions下的某个扩展如 Extensions/FacebookInstantGames修改其JsExtension.js声明或运行时 TS 文件改动会被自动导入编辑器控制台会出现GDJS Runtime update消息若在偏好设置中关闭了自动导入可手动运行cd scripts node import-GDJS-Runtime.js # 将扩展声明与运行时拷贝进 GDevelop验证改动修改了声明则按 CtrlRmacOS 为 CmdR重载编辑器修改了运行时文件则重新启动游戏预览编辑器运行期间修改 GDJS 源码监视器会自动重建引擎随后直接启动预览即可看到效果。扩展由声明JsExtension.js描述元数据与 IDE 集成与运行时实现extensionnametools.ts、objectnameruntimeobject.ts、behaviornameruntimebehavior.ts等 TypeScript 文件两部分组成。声明 API 与 C 声明几乎等价setExtensionInformation声明扩展信息addAction/addCondition/addExpression/addStrExpression配合addParameter与getCodeExtraInformation().setFunctionName()声明指令addObject/addBehavior配合ObjectJsImplementation/BehaviorJsImplementation声明对象与行为registerProperty声明全局配置属性addDependency声明 npm 包或 Cordova 插件依赖addEffect声明特效。运行时侧则通过继承gdjs.RuntimeBehavior、gdjs.RuntimeObject实现行为与对象并通过gdjs.PixiFiltersTools.registerFilterCreator注册 PixiJS 滤镜。仓库中的 Extensions/ExampleJsExtension 是完整的入门示例。九、云存储提供商Google Drive / Dropbox / OneDrive的开发调试开发模式下云存储提供商使用开发密钥接入但不能从传统http://localhost:3000源访问必须使用http://gdevelop-app-local.com:3000在 hosts 文件中添加一条重定向127.0.0.1 gdevelop-app-local.com从http://gdevelop-app-local.com:3000启动 Web 应用。仅当需要云存储功能在开发环境可用时才需要此配置未配置时 GDevelop 在使用云存储时仅显示错误不影响其他功能。十、便携式构建为 CI / 无头环境准备的命令行工具10.1 构建便携包在newIDE/electron-app下构建一个自包含 zip无安装器、无代码签名可解压到 CI 运行器上执行 CLI 命令cd newIDE/electron-app npm install # Linux / macOS GD_PORTABLE_BUILDtrue npm run build -- --publish never # Windows (PowerShell) $Env:GD_PORTABLE_BUILDtrue; npm run build -- --publish never该流程对应electron-builder打包配置见 newIDE/electron-app/electron-builder-config.js产物 zip 内含完整编辑器。10.2 用 CLI 执行导出命令解压后即可运行命令。导出 HTML5 游戏# Windows GDevelop.exe --disable-update-check --run-command EXPORT_HTML5_EXTERNAL path\to\game.json # Linux需安装依赖库sudo apt install -y libnss3 libasound2t64 ./gdevelop --no-sandbox --disable-update-check \ --run-command EXPORT_HTML5_EXTERNAL /path/to/game.json导入扩展并保存工程IMPORT_EXTENSION_AND_SAVE会把一个或多个扩展文件导入工程并保存每个扩展路径用一个重复的--cmd-args标志传入# Windows GDevelop.exe --disable-update-check --run-command IMPORT_EXTENSION_AND_SAVE path\to\game.json ^ --cmd-args path\to\FirstExtension.json --cmd-args path\to\SecondExtension.json # Linux ./gdevelop --no-sandbox --disable-update-check \ --run-command IMPORT_EXTENSION_AND_SAVE /path/to/game.json \ --cmd-args /path/to/FirstExtension.json --cmd-args /path/to/SecondExtension.json附加命令行标志标志作用--keep-open命令执行完成后不退出--dev-tools打开 DevTools--block-on-diagnostic-errors工程存在诊断错误时导出失败--no-block-on-diagnostic-errors忽略诊断错误继续导出执行语义如果同一工程已在运行中的编辑器里打开命令会在该窗口中执行fire-and-forgetCLI 立即退出且不等待、不返回真实结果否则命令以无头模式运行并返回真实退出码可可靠用于 CI。仓库还提供了 test-portable-cli-export.js 作为该导出链路的测试脚本。10.3 将 CLI 加入 PATH使用 Windows NSIS 安装器安装 GDevelop 时安装目录会自动加入当前用户的PATH新开终端后即可直接运行GDevelop --run-command ...其他构建macOS.dmg、Linux AppImage/.deb可在运行中的应用内执行命令面板中的“Install GDevelop CLI in PATH”Windows 上把安装目录追加到用户PATHmacOS/Linux 上在/usr/local/bin创建gdevelop符号链接。十一、构建并部署官方应用仅维护者需要该小节仅面向需要在 GDevelop 官网发布“官方应用”的维护者普通贡献者不需要可直接使用每日构建版详见 Nightly-Builds-and-continuous-deployment.md。桌面版先在newIDE/electron-app/app/package.json更新版本号并合并到 master等待 CICircleCI 负责 macOSLinuxAppVeyor 负责 Windows构建发布所需工件完成后用 download-all-build-artifacts.js 下载并上传到新的 GitHub Release。本地手动构建桌面版可执行cd newIDE/electron-app npm run build。Web 版cd newIDE/web-app yarn deploy # 或 npm run deploy该命令同时会上传游戏引擎GDJS与扩展源码IDE 所需并清理 CloudFlare 缓存。十二、更新翻译从编辑器、GDevelop Core 与扩展中提取翻译cd newIDE/app yarn extract-all-translations # 或 npm run extract-all-translations这会生成ide-messages.pot位于newIDE/app/src/locales/en与gdcore-gdcpp-gdjs-extensions-messages.pot位于scripts两者均需上传到 GDevelop 的 Crowdin 项目。从 Crowdin 构建并下载翻译后解压到newIDE/app/src/locales再执行yarn compile-translations # 或 npm run compile-translations即可将 PO 文件编译为运行时使用的语言资源。两个命令分别由 extract-all-translations.js 与 compile-translations.js 实现。十三、参与贡献编辑器、游戏引擎与扩展始终处于持续开发中贡献方式包括从路线图中认领功能或自己发现缺失/可改进之处按本指南搭建环境后修改编辑器或游戏引擎/扩展先 Fork 仓库再创建 Pull Request 提交改动提交前确保测试通过单测、Flow、格式化命令见上文第六节。结语从 newIDE/README.md 可以看出newIDE 的工程化链路相当完整npm start一站式导入资源并双进程热开发、Electron 独立应用与 Web 应用共享同一套代码、Storybook 支撑 UI 组件快速迭代、Style Dictionary 驱动的主题系统、以及面向 CI 的便携式 CLI 导出能力。无论是想为编辑器贡献 UI 组件、为游戏引擎编写新扩展还是搭建自动化构建流水线本文涉及的路径与命令都可作为直接入口配合 newIDE/README-extensions.md、newIDE/README-themes.md 与 GDJS/README.md 即可深入对应模块。【免费下载链接】GDevelop Open-source, cross-platform 2D/3D/multiplayer game engine designed for everyone.项目地址: https://gitcode.com/GitHub_Trending/gd/GDevelop创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
