
PixiEditor 快速上手:1 块画布同时搞定像素画、动画与矢量【免费下载链接】PixiEditorPixiEditor is a Universal Editor for all your 2D needs项目地址: https://gitcode.com/GitHub_Trending/pi/PixiEditorPixiEditor 是一个用 C#/.NET 编写的开源通用 2D 编辑器,在同一个项目文件里完成像素画、软笔刷绘画、矢量图形、逐帧动画,还能用节点图程序化生成画面。如果你平时需要为游戏制作精灵图或 2D 素材,又不想同时开好几个工具,这套编辑器值得花十分钟了解一下。项目速览条目内容技术栈C# .NET 8,Avalonia 11 跨平台 UI,自研 Drawie 渲染库(Skia / Vulkan)支持平台Windows、macOS、Linux(另提供 Flatpak 打包文件)适用场景游戏精灵图、2D 逐帧动画、Logo 与图片编辑、节点程序化创作导出格式png、jpg、svg、gif、mp4 等,项目文件为 .pixi 格式扩展机制仓库内置 12 个官方扩展示例(命令、调色板、UI 组件等) 核心构成三端统一的 Avalonia 界面一句话结论:界面层用 Avalonia(一个跨平台的 .NET UI 框架)搭建,同一套窗口代码跑在三个系统上。入口在 src/PixiEditor.Desktop/Program.cs,画布交互逻辑集中在 src/PixiEditor/Views/Rendering/Scene.cs,与具体平台解耦。// 启动时按平台选择渲染实现,并把 Skia 的 GPU 资源上限设为默认值的 4 倍 return AppBuilder.ConfigureApp().UsePlatformDetect() .With(new SkiaOptions { MaxGpuResourceSizeBytes 1024 * 600 * 4 * 12 * 4 });Skia 是 Google 开源的 2D 图形库,这段配置大约预留 112MB 的 GPU 资源额度,给大画布缩放留余量。一切皆节点的图渲染系统一句话结论:图层、特效乃至文档结构本身,都是节点图里的节点。PixiEditor 为每份文档暴露节点图,拖入噪声、色彩、着色器节点并连线,就能程序化地合成画面,右侧预览随连线实时刷新,思路和 Blender 的合成器一致。时间轴动画与三套工具集一句话结论:2.0 版本内置时间轴,画面下方是一整条帧列表,底部可设置 12 FPS 等播放参数。编辑器默认提供 Pixel art(像素级工具)、Painting(软笔刷、抗锯齿图形)、Vector(路径与形状)三套工具集,三者可混用在同一块画布上,比如像素底色上叠加矢量描边,最后按导出格式一次性输出。快速上手克隆代码:git clone https://gitcode.com/GitHub_Trending/pi/PixiEditor,进入目录后执行git submodule update --init拉取依赖子模块。安装 .NET 8 SDK(仓库 global.json 指定 8.0.405,允许小版本向后兼容),然后运行dotnet build src/PixiEditor.sln,预期构建全部成功。运行dotnet run --project src/PixiEditor.Desktop,预期看到深色主题主窗口:左侧工具栏、右侧取色器与图层面板。新建文档,在左上角切换三套工具集各画一笔,验证像素与矢量工具能共用一块画布。打开底部节点图面板,拖入几个节点并连线,观察右侧 Preview 随连接实时变化。⚠️ 注意事项与常见坑渲染 API 选择:默认优先 Vulkan,老集显上若黑屏或报错,启动时加--opengl参数即可切换 OpenGL(WGL/Glx),也可以写入偏好配置。子模块依赖:src/Drawie、src/PixiDocks、src/PixiParser、src/ColorPicker 四个目录是 git 子模块(见 .gitmodules),不执行git submodule update --init会因缺少被引用项目而构建失败。GPU 资源:Skia 的 GPU 资源额度被设为默认值 4 倍(约 112MB),低端集显笔记本建议先用小画布验证。格式取舍:日常保存用 .pixi 才能保留图层与节点结构;对外交付再导出,矢量内容导 svg,动画导 gif/mp4。扩展开发起点:samples/ 里有 12 个扩展示例工程,从 HelloWorld 到调色板、命令系统,想写自己的扩展从这里抄作业最快。总结PixiEditor 把像素画、绘画、矢量、时间轴动画和节点程序化渲染整合进一个 .NET 跨平台应用,对做游戏 2D 素材的开发者来说,是目前开源里少见能一个窗口全搞定的选择。如果这篇上手指南帮到你,欢迎点赞、收藏或关注,后续会更新更多 PixiEditor 实战技巧。【免费下载链接】PixiEditorPixiEditor is a Universal Editor for all your 2D needs项目地址: https://gitcode.com/GitHub_Trending/pi/PixiEditor创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考