十年匠心定制 · 商业建站与技术教学双线并行 咨询热线:400-886-1026 service@lmnt.cn
ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

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

从零开始做 GDevelop 扩展:10分钟搭出对象呼吸闪烁效果的完整教程 从零开始做 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需要按 CtrlR 重启编辑器界面改运行时文件只要重新预览。控制台报错一般带类名和文件名顺着点进去通常一眼能定位。参考 newIDE 的扩展编写说明 里对整套开发循环的描述。加动作、条件与参数想让扩展更“有交互”在声明里继续链式调用即可extension.addAction(...)注册动作addCondition(...)注册条件每个参数用.addParameter(expression, _(Speed), , false)追加最后通过getCodeExtraInformation().setFunctionName(setSpeed)绑定到运行时类里同名方法。这样用户在事件表里就能拖出“设置闪烁速度”这样的指令。想要“事件驱动”的完整行为把条件和动作挂到行为下、在事件表里直接展开DestroyOutsideBehavior 扩展 是很好的对照范例C 侧声明加destroyoutsideruntimebehavior.ts运行时结构一目了然。![GDevelop 事件编辑器中使用 JavaScript 事件操作对象扩展实现可与之互操作](https://raw.gitcode.com/GitHub_Trending/gd/GDevelop/raw/958396e46a2e47f62aaec8cf67ac3e7ed7a30e76/GDJS/docs/media/GDevelop JavaScript events.png?utm_sourcegitcode_repo_files)新手最常踩的四个坑声明文件名写错。必须是JsExtension.js一个字都不能差否则编辑器静默跳过连报错都没有。扩展 ID 重复。BlinkEffect与其他扩展撞名时行为列表会出现奇怪的重叠。先搜一下Extensions/下有没有同名 ID。改了声明没重启。声明文件不热更新必须 CtrlR只重新预览的话改的是运行时的效果才会生效。setIncludeFile指向了.ts源码。引擎加载的是编译后的.js文件路径要写成Extensions/BlinkEffect/blinkruntimebehavior.js这样的形式。这四类问题往往没有任何提示控制台就是最后的裁判每次改完都瞄一眼能省一半排查时间。发布你的扩展以及去哪继续挖扩展做好后把BlinkEffect/目录连同必要的资源整理好提交 Pull Request 给主仓库维护者审核后合入所有人更新仓库即可使用也可以直接把扩展文件夹分享给朋友放进对方的Extensions/目录就能加载。想继续深挖这几个入口最值得收藏newIDE/README-extensions.md 是官方扩展编写指南覆盖属性、依赖、对象编辑器等所有声明 APIGDJS 运行时源码 里能看到RuntimeBehavior基类的完整方法列表Extensions 目录 下几十个官方扩展就是最好的模板库挑一个最接近你想法的抄结构效率最高。把声明和实现分开想就抓住了 GDevelop 自定义扩展的全部骨架声明管编辑器的“面子”实现管游戏的“里子”。从这 30 行闪烁效果出发你的下一个插件可能就是别人教程里的那个例子。【免费下载链接】GDevelop Open-source, cross-platform 2D/3D/multiplayer game engine designed for everyone.项目地址: https://gitcode.com/GitHub_Trending/gd/GDevelop创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表