企业官网建设流程全解析

从零开始做 GDevelop 扩展：10分钟搭出对象呼吸闪烁效果的完整教程

【免费下载链接】GDevelop🎮 Open-source, cross-platform 2D/3D/multiplayer game engine designed for everyone.项目地址: https://gitcode.com/GitHub_Trending/gd/GDevelop

做平台跳跃时，你多半遇到过这种时刻：想让金币在原地一闪一闪吸引点击，翻遍动作和效果面板却没有现成的。GDevelop 这套开源游戏引擎把内置能力拆成了插件式的自定义扩展——自己写一个「闪烁」扩展，可能只要 30 行代码。

扩展是什么：给游戏引擎装“外挂”

GDevelop 里的对象、行为、动作、条件，全部由扩展提供。一个扩展就是一份声明加一份实现：声明文件叫JsExtension.js，它告诉编辑器“这个扩展叫什么、提供什么参数”；实现文件是 TypeScript，写的是游戏运行时的真实逻辑，按惯例命名为xxxruntimebehavior.ts。

打个比方：扩展就像插座，声明是插座上的孔位和标签，实现是插进去的电器。编辑器只认识孔位，电器真正干活要等游戏跑起来。

想动手前，先备齐最小前置清单：Git、Node.js、一个能编辑 TypeScript 的代码编辑器。然后执行下面这条命令，克隆仓库并装好编辑器依赖：

git clone https://gitcode.com/GitHub_Trending/gd/GDevelop cd GDevelop/newIDE/app && npm install

在Extensions/下建一个文件夹BlinkEffect/，里面放两个文件：声明JsExtension.js和运行时blinkruntimebehavior.ts。目标很简单——给 Sprite 挂一个行为，让对象透明度按正弦波呼吸。编辑器会监听这些文件的改动并自动热导入，没反应时也可以手动跑newIDE/app/scripts里的import-GDJS-Runtime.js。

声明文件负责给编辑器“报户口”。它是整个扩展唯一必需的文件，作用如下：

module.exports = { createExtension: function (_, gd) { const extension = new gd.PlatformExtension(); extension.setExtensionInformation( 'BlinkEffect', _('Blink Effect'), _('Make objects pulse smoothly in and out'), 'Your Name', 'MIT' ); const behavior = new gd.BehaviorJsImplementation(); behavior.initializeContent = function (content) { content.setDoubleAttribute('blinkSpeed', 1); }; behavior.updateProperty = function (content, name, value) { if (name === 'Blink speed') { content.setDoubleAttribute('blinkSpeed', parseFloat(value)); return true; } return false; }; // ...getProperties 同理，见仓库里的示例扩展

setExtensionInformation的第一个参数是扩展 ID，全局唯一，建议与文件夹同名；后面的参数依次是显示名、描述、作者和许可证。BehaviorJsImplementation的三个方法管属性的默认值、写入和读取，blinkSpeed就是用户在属性面板里填的“闪烁速度”。行为本体的声明是extension.addBehavior('Blink', ...)，关键在收尾那行setIncludeFile('Extensions/BlinkEffect/blinkruntimebehavior.js')，它告诉引擎运行时去加载哪份实现文件，具体写法可以参考仓库里的 Extensions 示例目录。

再看运行时怎么把效果“长”到对象上。这段代码的核心逻辑是：

namespace gdjs { export class BlinkRuntimeBehavior extends gdjs.RuntimeBehavior { _blinkSpeed: number; constructor( instanceContainer: gdjs.RuntimeInstanceContainer, behaviorData: any, owner: gdjs.RuntimeObject ) { super(instanceContainer, behaviorData, owner); this._blinkSpeed = behaviorData.blinkSpeed || 1; } doStepPreEvents(instanceContainer: gdjs.RuntimeInstanceContainer) { const t = instanceContainer.getTime(); const wave = (Math.sin(t * this._blinkSpeed * Math.PI * 2) + 1) / 2; this.owner.setOpacity(wave * 255); } } gdjs.registerBehavior('BlinkEffect::Blink', gdjs.BlinkRuntimeBehavior); }

拆开看三处要点：

• gdjs.registerBehavior把类与「扩展ID::行为ID」绑定，引擎创建每个带该行为的对象时，实例化的是你这个类；
• 构造函数里的behaviorData就是声明文件写入的属性数据，所以面板里改速度，运行时立刻生效；
• doStepPreEvents是每帧事件执行前的钩子，用instanceContainer.getTime()拿场景时间，正弦波在 0 到 255 之间调制透明度，形成呼吸效果。

验证效果与排错

启动编辑器（newIDE/app下执行npm start），预览一个放了 Sprite 的场景。三处要核对：属性面板的行为列表里出现了 Blink、对象真的在明暗起伏、开发者控制台没有红色报错。

排错有个黄金顺序：先看控制台。启动时会打印类似Loaded x JS extensions.的日志确认声明被加载，改动运行时文件后会有GDJS Runtime update提示。改JsExtension.js需要按 Ctrl+R 重启编辑器界面，改运行时文件只要重新预览。控制台报错一般带类名和文件名，顺着点进去通常一眼能定位。参考 newIDE 的扩展编写说明 里对整套开发循环的描述。

加动作、条件与参数

想让扩展更“有交互”，在声明里继续链式调用即可：extension.addAction(...)注册动作，addCondition(...)注册条件，每个参数用.addParameter('expression', _('Speed'), '', false)追加，最后通过getCodeExtraInformation().setFunctionName('setSpeed')绑定到运行时类里同名方法。这样用户在事件表里就能拖出“设置闪烁速度”这样的指令。

想要“事件驱动”的完整行为（把条件和动作挂到行为下、在事件表里直接展开），DestroyOutsideBehavior 扩展 是很好的对照范例：C++ 侧声明加destroyoutsideruntimebehavior.ts运行时，结构一目了然。


新手最常踩的四个坑

• 声明文件名写错。必须是JsExtension.js，一个字都不能差，否则编辑器静默跳过，连报错都没有。
• 扩展 ID 重复。BlinkEffect与其他扩展撞名时，行为列表会出现奇怪的重叠。先搜一下Extensions/下有没有同名 ID。
• 改了声明没重启。声明文件不热更新，必须 Ctrl+R；只重新预览的话改的是运行时的效果才会生效。
• setIncludeFile指向了.ts源码。引擎加载的是编译后的.js文件，路径要写成Extensions/BlinkEffect/blinkruntimebehavior.js这样的形式。

这四类问题往往没有任何提示，控制台就是最后的裁判：每次改完都瞄一眼，能省一半排查时间。

发布你的扩展，以及去哪继续挖

扩展做好后，把BlinkEffect/目录连同必要的资源整理好，提交 Pull Request 给主仓库，维护者审核后合入，所有人更新仓库即可使用；也可以直接把扩展文件夹分享给朋友，放进对方的Extensions/目录就能加载。

想继续深挖，这几个入口最值得收藏：newIDE/README-extensions.md 是官方扩展编写指南，覆盖属性、依赖、对象编辑器等所有声明 API；GDJS 运行时源码 里能看到RuntimeBehavior基类的完整方法列表；Extensions 目录 下几十个官方扩展就是最好的模板库，挑一个最接近你想法的抄结构，效率最高。

把声明和实现分开想，就抓住了 GDevelop 自定义扩展的全部骨架：声明管编辑器的“面子”，实现管游戏的“里子”。从这 30 行闪烁效果出发，你的下一个插件可能就是别人教程里的那个例子。

【免费下载链接】GDevelop🎮 Open-source, cross-platform 2D/3D/multiplayer game engine designed for everyone.项目地址: https://gitcode.com/GitHub_Trending/gd/GDevelop