在 tsParticles 中使用 Super Mario Bros 调色板安装、配色与源码级原理解析【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles本篇技术指南聚焦 tsParticles 官方tsparticles/palette-super-mario-bros调色板包讲解如何通过 CDN 或 npm 安装并加载该调色板详细列出其五款标志性配色与深蓝背景并深入源码解释调色板在引擎中的注册与生效原理。读完你可以在任何 tsParticles 项目中复刻经典的“超级马里奥兄弟”复古游戏配色粒子背景并掌握按需覆盖颜色与混合模式等自定义技巧。调色板是什么只定义颜色不定义行为tsparticles/palette-super-mario-bros是 tsParticles 官方提供的一组“超级马里奥兄弟”风格调色板palette。它与 preset预设不同palette 只负责提供一组颜色方案不包含粒子的数量、形状、运动等行为配置。正如该包 README 中强调的A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.因此实际使用时必须把它与一个运行时基础包如tsparticles/basic以及自定义的粒子 options 搭配才能呈现完整的粒子效果。这种“颜色与行为分离”的设计让你可以自由组合任意颜色主题与任意粒子行为是 tsParticles 插件体系中“小颗粒、可复用”思想的体现。官方配色一览该调色板从经典《超级马里奥兄弟》游戏中汲取灵感包含 5 个前景色与 1 个背景色颜色名色值用途灵感Mario Red#D13D2E马里奥标志性的红色Pipe Green#5AA345水管绿色Pink#EC6486粉色点缀Coin Yellow#F3CB4E金币黄色Purple#4B2197紫色点缀Background#1B2A4A深藏蓝背景混合模式Blend modescreen填充Filltrue。其中screen混合模式意味着粒子在叠加区域会变亮很适合深色背景上的发光粒子效果。这些配置直接映射到包的源码中。查看 palettes/gaming/superMarioBros/src/options.ts可以看到一份类型为IPalette的完整定义import { type IPalette } from tsparticles/engine; export const options: IPalette { name: Super Mario Bros, background: #1B2A4A, blendMode: screen, colors: { fill: { enable: true, value: [ #D13D2E, // Mario Red #5AA345, // Pipe Green #EC6486, // Pink #F3CB4E, // Coin Yellow #4B2197, // Purple ], }, }, };IPalette接口定义在 engine/src/Core/Interfaces/IPalette.ts包含四个字段background画布背景色此处为#1B2A4AblendMode画布全局混合模式类型为GlobalCompositeOperation此处为screencolors一组或多组颜色集合SingleOrMultipleIPaletteColors每组可包含fill填充色与stroke描边色两套配置fill下又有enable是否启用、opacity透明度范围可选与value单个或多个颜色值三个字段name调色板名称此处为Super Mario Bros。也就是说一个调色板可同时携带填充色与描边色fill.enable: true表示粒子使用填充色渲染value为数组时粒子颜色会在多个色值之间随机选择。快速使用清单按官方 README 的 Quick checklist接入只需三步安装tsparticles/engine或直接使用下方 CDN bundle加载一个基础包例如tsparticles/basic并在tsParticles.load(...)之前调用loadSuperMarioBrosPalette在 options 中应用调色板并附上一份最简粒子配置。注意顺序加载函数必须位于tsParticles.load()之前调用否则调色板尚未注册palette配置项将无法生效。方式一CDN / Vanilla JS / jQuery 快速接入在 HTML 中通过 jsDelivr 引入两个 script 标签即可script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-super-mario-bros4/tsparticles.palette-palette-super-mario-bros.min.js/script第一个脚本提供引擎与loadBasic函数第二个脚本提供loadSuperMarioBrosPalette函数。脚本加载完成后即可编写如下初始化代码(async engine { await loadBasic(engine); await loadSuperMarioBrosPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: super-mario-bros, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这个示例的关键点await loadBasic(engine)先注册基础粒子能力形状、移动等await loadSuperMarioBrosPalette(engine)再注册调色板palette: super-mario-bros是 options 中的顶层配置项值对应调色板注册名示例粒子配置为 200 个圆形粒子、尺寸 10–15、以速度 2 匀速运动配合调色板即可立即看到效果。方式二npm 安装与按需导入除了 CDN也可以作为 npm 包安装使用。包名与版本信息见 palettes/gaming/superMarioBros/package.json包名为tsparticles/palette-super-mario-bros当前仓库内版本 4.3.3唯一的运行时依赖是tsparticles/engine。在支持 ESM 的项目如 Vite、webpack、Node 配合打包器中可以这样使用import { tsParticles } from tsparticles/engine; import { loadBasic } from tsparticles/basic; import { loadSuperMarioBrosPalette } from tsparticles/palette-super-mario-bros; await loadBasic(tsParticles); await loadSuperMarioBrosPalette(tsParticles); await tsParticles.load({ id: tsparticles, options: { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2 }, }, palette: super-mario-bros, }, });懒加载lazy入口如果希望调色板定义options 数据在注册时才被动态import可以改用包的/lazy子路径入口import { loadSuperMarioBrosPalette } from tsparticles/palette-super-mario-bros/lazy;该入口的实现位于 palettes/gaming/superMarioBros/src/index.lazy.ts它把 options 的加载推迟到注册回调内部通过await import(./options.js)完成适合希望减小初始包体积、按需加载的场景。对应的导出映射定义在 palettes/gaming/superMarioBros/package.json 的exports字段中./lazy子路径。与框架组件库配合使用tsParticles 官方为 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 与 Web Components 等框架提供了组件库见仓库wrappers/目录。在框架项目中使用时参考对应组件库文档在组件初始化前调用loadSuperMarioBrosPalette函数即可其余 options 写法与原生用法一致。自定义与覆盖重要提示调色板只提供默认颜色你可以在 options 中覆盖任何属性覆盖方式与标准 tsParticles 安装完全一致。例如把粒子改为方形、加大尺寸、提高运动速度const options { particles: { number: { value: 300 }, shape: { type: square }, size: { value: { min: 5, max: 20 } }, move: { enable: true, speed: 4 }, }, palette: super-mario-bros, };也可以不依赖palette配置项直接在particles.color中手写这套色板或另配background与blend混合模式实现近似效果。调色板的核心价值在于一行palette: super-mario-bros即可批量应用背景色、混合模式与粒子颜色省去手工维护多份颜色配置。源码原理调色板如何在引擎中生效1. 注册写入 PluginManager 的 palettes 映射loadSuperMarioBrosPalette的实现位于 palettes/gaming/superMarioBros/src/index.tsimport { type Engine } from tsparticles/engine; import { options } from ./options.js; const paletteName super-mario-bros; export async function loadSuperMarioBrosPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }它把调色板以字符串键super-mario-bros注册进引擎的插件管理器。在 engine/src/Core/Utils/PluginManager.ts 中palettes是一个Mapstring, IPaletteaddPalette即向该 Map 写入一项getPalette(name)则按名取出。这与addPreset、addShape、addEffect等 API 并列构成统一的插件注册体系。2. 生效加载时自动导入调色板属性当 options 中出现顶层palette字段时引擎的Options类会在加载配置时调用#importPalette。相关逻辑位于 engine/src/Options/Classes/Options.ts#importPalette(palette: string): void { const paletteData this.#pluginManager.getPalette(palette); if (!paletteData) { return; } this.load({ background: { color: paletteData.background, }, blend: { enable: true, mode: paletteData.blendMode, }, particles: { palette, }, }); }可见palette: super-mario-bros会被自动展开为background.color#1B2A4A深蓝背景blend.enable true且blend.mode screen启用 screen 混合模式粒子层particles.palette引用该调色板供粒子颜色随机选取。同理粒子级别的 options 加载逻辑engine/src/Options/Classes/Particles/ParticlesOptions.ts也通过getPalette获取调色板数据把fill.value中的多个色值合并进粒子可选颜色集合。这正是“调色板只定义颜色、运行时自动装配”的机制你不需要手动写背景色、混合模式与粒子颜色引擎会根据palette名称自动完成装配。若传入的调色板名尚未注册未调用加载函数getPalette返回undefined#importPalette直接返回、不产生任何效果——这也是为什么加载函数必须在tsParticles.load()之前调用的根本原因。总结tsparticles/palette-super-mario-bros通过“颜色与行为分离”的设计把《超级马里奥兄弟》标志性的红、绿、粉、黄、紫五色与深蓝背景打包成一个可复用的调色板插件。接入流程简洁清晰安装引擎与基础包 → 调用loadSuperMarioBrosPalette→ 在 options 中声明palette: super-mario-bros并配置粒子行为。引擎会在加载时自动应用背景色与screen混合模式让粒子获得复古游戏质感的发光效果同时所有粒子配置均可按标准 tsParticles 方式自由覆盖。如需深入了解调色板接口的全部字段如opacity、stroke、width可继续阅读 engine/src/Core/Interfaces/IPalette.ts浏览其他游戏风格与主题调色板可查看仓库 palettes/ 目录下的各色板实现。【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
在 tsParticles 中使用 Super Mario Bros 调色板：安装、配色与源码级原理解析
在 tsParticles 中使用 Super Mario Bros 调色板安装、配色与源码级原理解析【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles本篇技术指南聚焦 tsParticles 官方tsparticles/palette-super-mario-bros调色板包讲解如何通过 CDN 或 npm 安装并加载该调色板详细列出其五款标志性配色与深蓝背景并深入源码解释调色板在引擎中的注册与生效原理。读完你可以在任何 tsParticles 项目中复刻经典的“超级马里奥兄弟”复古游戏配色粒子背景并掌握按需覆盖颜色与混合模式等自定义技巧。调色板是什么只定义颜色不定义行为tsparticles/palette-super-mario-bros是 tsParticles 官方提供的一组“超级马里奥兄弟”风格调色板palette。它与 preset预设不同palette 只负责提供一组颜色方案不包含粒子的数量、形状、运动等行为配置。正如该包 README 中强调的A palette defines colors, not complete behavior, so pair it with a runtime package and particle options.因此实际使用时必须把它与一个运行时基础包如tsparticles/basic以及自定义的粒子 options 搭配才能呈现完整的粒子效果。这种“颜色与行为分离”的设计让你可以自由组合任意颜色主题与任意粒子行为是 tsParticles 插件体系中“小颗粒、可复用”思想的体现。官方配色一览该调色板从经典《超级马里奥兄弟》游戏中汲取灵感包含 5 个前景色与 1 个背景色颜色名色值用途灵感Mario Red#D13D2E马里奥标志性的红色Pipe Green#5AA345水管绿色Pink#EC6486粉色点缀Coin Yellow#F3CB4E金币黄色Purple#4B2197紫色点缀Background#1B2A4A深藏蓝背景混合模式Blend modescreen填充Filltrue。其中screen混合模式意味着粒子在叠加区域会变亮很适合深色背景上的发光粒子效果。这些配置直接映射到包的源码中。查看 palettes/gaming/superMarioBros/src/options.ts可以看到一份类型为IPalette的完整定义import { type IPalette } from tsparticles/engine; export const options: IPalette { name: Super Mario Bros, background: #1B2A4A, blendMode: screen, colors: { fill: { enable: true, value: [ #D13D2E, // Mario Red #5AA345, // Pipe Green #EC6486, // Pink #F3CB4E, // Coin Yellow #4B2197, // Purple ], }, }, };IPalette接口定义在 engine/src/Core/Interfaces/IPalette.ts包含四个字段background画布背景色此处为#1B2A4AblendMode画布全局混合模式类型为GlobalCompositeOperation此处为screencolors一组或多组颜色集合SingleOrMultipleIPaletteColors每组可包含fill填充色与stroke描边色两套配置fill下又有enable是否启用、opacity透明度范围可选与value单个或多个颜色值三个字段name调色板名称此处为Super Mario Bros。也就是说一个调色板可同时携带填充色与描边色fill.enable: true表示粒子使用填充色渲染value为数组时粒子颜色会在多个色值之间随机选择。快速使用清单按官方 README 的 Quick checklist接入只需三步安装tsparticles/engine或直接使用下方 CDN bundle加载一个基础包例如tsparticles/basic并在tsParticles.load(...)之前调用loadSuperMarioBrosPalette在 options 中应用调色板并附上一份最简粒子配置。注意顺序加载函数必须位于tsParticles.load()之前调用否则调色板尚未注册palette配置项将无法生效。方式一CDN / Vanilla JS / jQuery 快速接入在 HTML 中通过 jsDelivr 引入两个 script 标签即可script srchttps://cdn.jsdelivr.net/npm/tsparticles/basic4/tsparticles.basic.bundle.min.js/script script srchttps://cdn.jsdelivr.net/npm/tsparticles/palette-super-mario-bros4/tsparticles.palette-palette-super-mario-bros.min.js/script第一个脚本提供引擎与loadBasic函数第二个脚本提供loadSuperMarioBrosPalette函数。脚本加载完成后即可编写如下初始化代码(async engine { await loadBasic(engine); await loadSuperMarioBrosPalette(engine); const options { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: super-mario-bros, }; await engine.load({ id: tsparticles, options, }); })(tsParticles);这个示例的关键点await loadBasic(engine)先注册基础粒子能力形状、移动等await loadSuperMarioBrosPalette(engine)再注册调色板palette: super-mario-bros是 options 中的顶层配置项值对应调色板注册名示例粒子配置为 200 个圆形粒子、尺寸 10–15、以速度 2 匀速运动配合调色板即可立即看到效果。方式二npm 安装与按需导入除了 CDN也可以作为 npm 包安装使用。包名与版本信息见 palettes/gaming/superMarioBros/package.json包名为tsparticles/palette-super-mario-bros当前仓库内版本 4.3.3唯一的运行时依赖是tsparticles/engine。在支持 ESM 的项目如 Vite、webpack、Node 配合打包器中可以这样使用import { tsParticles } from tsparticles/engine; import { loadBasic } from tsparticles/basic; import { loadSuperMarioBrosPalette } from tsparticles/palette-super-mario-bros; await loadBasic(tsParticles); await loadSuperMarioBrosPalette(tsParticles); await tsParticles.load({ id: tsparticles, options: { particles: { number: { value: 200 }, shape: { type: circle }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2 }, }, palette: super-mario-bros, }, });懒加载lazy入口如果希望调色板定义options 数据在注册时才被动态import可以改用包的/lazy子路径入口import { loadSuperMarioBrosPalette } from tsparticles/palette-super-mario-bros/lazy;该入口的实现位于 palettes/gaming/superMarioBros/src/index.lazy.ts它把 options 的加载推迟到注册回调内部通过await import(./options.js)完成适合希望减小初始包体积、按需加载的场景。对应的导出映射定义在 palettes/gaming/superMarioBros/package.json 的exports字段中./lazy子路径。与框架组件库配合使用tsParticles 官方为 React、Vue 2/3、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 与 Web Components 等框架提供了组件库见仓库wrappers/目录。在框架项目中使用时参考对应组件库文档在组件初始化前调用loadSuperMarioBrosPalette函数即可其余 options 写法与原生用法一致。自定义与覆盖重要提示调色板只提供默认颜色你可以在 options 中覆盖任何属性覆盖方式与标准 tsParticles 安装完全一致。例如把粒子改为方形、加大尺寸、提高运动速度const options { particles: { number: { value: 300 }, shape: { type: square }, size: { value: { min: 5, max: 20 } }, move: { enable: true, speed: 4 }, }, palette: super-mario-bros, };也可以不依赖palette配置项直接在particles.color中手写这套色板或另配background与blend混合模式实现近似效果。调色板的核心价值在于一行palette: super-mario-bros即可批量应用背景色、混合模式与粒子颜色省去手工维护多份颜色配置。源码原理调色板如何在引擎中生效1. 注册写入 PluginManager 的 palettes 映射loadSuperMarioBrosPalette的实现位于 palettes/gaming/superMarioBros/src/index.tsimport { type Engine } from tsparticles/engine; import { options } from ./options.js; const paletteName super-mario-bros; export async function loadSuperMarioBrosPalette(engine: Engine): Promisevoid { await engine.pluginManager.register(e { e.pluginManager.addPalette(paletteName, options); }); }它把调色板以字符串键super-mario-bros注册进引擎的插件管理器。在 engine/src/Core/Utils/PluginManager.ts 中palettes是一个Mapstring, IPaletteaddPalette即向该 Map 写入一项getPalette(name)则按名取出。这与addPreset、addShape、addEffect等 API 并列构成统一的插件注册体系。2. 生效加载时自动导入调色板属性当 options 中出现顶层palette字段时引擎的Options类会在加载配置时调用#importPalette。相关逻辑位于 engine/src/Options/Classes/Options.ts#importPalette(palette: string): void { const paletteData this.#pluginManager.getPalette(palette); if (!paletteData) { return; } this.load({ background: { color: paletteData.background, }, blend: { enable: true, mode: paletteData.blendMode, }, particles: { palette, }, }); }可见palette: super-mario-bros会被自动展开为background.color#1B2A4A深蓝背景blend.enable true且blend.mode screen启用 screen 混合模式粒子层particles.palette引用该调色板供粒子颜色随机选取。同理粒子级别的 options 加载逻辑engine/src/Options/Classes/Particles/ParticlesOptions.ts也通过getPalette获取调色板数据把fill.value中的多个色值合并进粒子可选颜色集合。这正是“调色板只定义颜色、运行时自动装配”的机制你不需要手动写背景色、混合模式与粒子颜色引擎会根据palette名称自动完成装配。若传入的调色板名尚未注册未调用加载函数getPalette返回undefined#importPalette直接返回、不产生任何效果——这也是为什么加载函数必须在tsParticles.load()之前调用的根本原因。总结tsparticles/palette-super-mario-bros通过“颜色与行为分离”的设计把《超级马里奥兄弟》标志性的红、绿、粉、黄、紫五色与深蓝背景打包成一个可复用的调色板插件。接入流程简洁清晰安装引擎与基础包 → 调用loadSuperMarioBrosPalette→ 在 options 中声明palette: super-mario-bros并配置粒子行为。引擎会在加载时自动应用背景色与screen混合模式让粒子获得复古游戏质感的发光效果同时所有粒子配置均可按标准 tsParticles 方式自由覆盖。如需深入了解调色板接口的全部字段如opacity、stroke、width可继续阅读 engine/src/Core/Interfaces/IPalette.ts浏览其他游戏风格与主题调色板可查看仓库 palettes/ 目录下的各色板实现。【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考