企业官网建设流程全解析

在 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 个背景色：

混合模式（Blend mode）：screen；填充（Fill）：true。其中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：画布背景色，此处为#1B2A4A；
• blendMode：画布全局混合模式，类型为GlobalCompositeOperation，此处为screen；
• colors：一组或多组颜色集合（SingleOrMultiple<IPaletteColors>），每组可包含fill（填充色）与stroke（描边色）两套配置；fill下又有enable（是否启用）、opacity（透明度范围，可选）与value（单个或多个颜色值）三个字段；
• name：调色板名称，此处为"Super Mario Bros"。

也就是说，一个调色板可同时携带填充色与描边色，fill.enable: true表示粒子使用填充色渲染；value为数组时，粒子颜色会在多个色值之间随机选择。

快速使用清单

按官方 README 的 Quick checklist，接入只需三步：

1. 安装@tsparticles/engine（或直接使用下方 CDN bundle）；
2. 加载一个基础包（例如@tsparticles/basic），并在tsParticles.load(...)之前调用loadSuperMarioBrosPalette；
3. 在 options 中应用调色板，并附上一份最简粒子配置。

注意顺序：加载函数必须位于tsParticles.load()之前调用，否则调色板尚未注册，palette配置项将无法生效。

方式一：CDN / Vanilla JS / jQuery 快速接入

在 HTML 中通过 jsDelivr 引入两个 script 标签即可：

<script src="https://cdn.jsdelivr.net/npm/@tsparticles/basic@4/tsparticles.basic.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@tsparticles/palette-super-mario-bros@4/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.ts：

import { type Engine } from "@tsparticles/engine"; import { options } from "./options.js"; const paletteName = "super-mario-bros"; export async function loadSuperMarioBrosPalette(engine: Engine): Promise<void> { await engine.pluginManager.register(e => { e.pluginManager.addPalette(paletteName, options); }); }

它把调色板以字符串键"super-mario-bros"注册进引擎的插件管理器。在 engine/src/Core/Utils/PluginManager.ts 中，palettes是一个Map<string, IPalette>，addPalette即向该 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