@dao3fun/high-bessel 是什么？

@dao3fun/high-bessel 是一个专为神奇代码岛设计的高阶贝塞尔曲线库，以其轻量级、简洁性和易用性而著称。借助这个库，你可以迅速实现各种复杂的动画效果。

原理

上图展示了一个二维贝塞尔曲线模型。在这个模型中，每一个橙色的点（我们称之为固定点）都对应着一个特定的坐标位置，这些坐标同样可以代表模型中各个点的位置。而黑色的曲线则是根据这些固定点生成的贝塞尔曲线。本库的主要功能就是实现这条黑色贝塞尔曲线上点的平滑移动。

应用实例

• 在 box3 游戏《新春·欢乐游乐园》中，火车的运行路径就巧妙地运用了贝塞尔 3 阶内连续移动技术。点击体验 >
• 另一款 box3 游戏《瓶盖人大乱斗》中的胜利场面，也采用了贝塞尔 3 阶内连续移动技术，并锁定了视角。点击体验 > >

安装

使用 ArenaPro 插件安装

1. 在 VScode 编辑器中，按下Ctrl + Shift + P打开命令面板。
2. 搜索“ArenaPro”并运行ArenaPro: 查看神岛NPM包命令。
3. 在弹出的输入框中输入highbessel进行搜索。
4. 点击搜索结果，然后在左下角弹窗中点击“确认安装”，等待安装完成。

使用 npm 安装

你也可以在终端中直接运行以下命令来安装：

npm install @dao3fun/high-bessel

使用示例

生成模型

效果：根据刷新频率，在贝塞尔曲线上动态生成一系列模型。

步骤：

1. 在地图中放置任意模型作为固定点，每个模型的位置都不同。确保这些固定点模型的名称以“pos”开头，后面跟一个数字，表示该点在贝塞尔曲线上的位置。

   

2. 在代码中，使用以下 JavaScript 代码来初始化贝塞尔曲线动画对象，并设置固定点模型名称。

   import GameHighBessel, { GameHighBesselEases } from "@dao3fun/high-bessel";
   
   // 初始化贝塞尔曲线动画对象，设置固定点模型名称为 "pos"
   const bessel = new GameHighBessel({
     fixedPointNameOrPosList: "pos",
   });
   
   // 当动画进度更新时，创建一个新实体表示贝塞尔曲线上的一个点
   bessel.onUpdate((point) => {
     world.createEntity({
       mesh: "mesh/点.vb", // 替换为你的模型路径
       collides: false,
       gravity: false,
       position: point,
     });
   });
   
   // 播放贝塞尔曲线动画，设置播放速度为 0.01
   bessel.play({
     speed: 0.01,
   });

3. 运行代码后，你将看到一系列模型沿着贝塞尔曲线动态生成。

   

通过@dao3fun/high-bessel 库，你可以轻松地在项目中实现各种复杂的动画效果，为你的创作增添更多趣味和创意。