有一些工具与我们的 STG 引擎内核无关, 但也同样非常重要. 我将这些工具存放在了官方库 @stg/utils 中, 同时完整的 web-stg 包也直接提供了这其中的全部 API.
stg.math
的用法基本与 JavaScript 的全局变量 Math 相同, 不过对其中的部分函数使用了 lru-cache 处理, 多次连续调用会自动从缓存中获取. 因此使用这其中的函数有助于提高性能. 此外, math 对象增加了下面的属性和方法:
math.twoPI
: 2πmath.halfPI
: 0.5πmath.sec
: 正割函数math.csc
: 余割函数math.cot
: 余切函数我们提供了一些用于随机化的函数, 你可以通过 stg.random
来使用它们.
返回一个随机的 ±1. 概率均为 0.5.
生成一个置于 [start, end) 区间内的随机实数.
生成一个置于 [start, end) 区间内的随机整数.
使一个处于init
位置的数在范围[start, end]
之间做随机的转移. 移动距离至少为min
, 最大为max
. 这个函数基本就是为了东方游戏的 boss 设计的 (笑).
const { math, random } = require('web-stg') module.exports.reference = { origin: { state: { x: 100, y: 200, radius: 16, }, methods: { transfer() { this.prev = this.$coord this.next = { x: random.transfer(this.x, 60, 140, 40, 80), y: random.transfer(this.y, 80, 320, 60, 120), } }, }, mounted() { this.transfer() this.setInterval(144, this.transfer) }, mutate(tick) { const rest = (tick % 144 - 72) / 72 if (rest < 0) return const scale = (1 - math.cos(math.PI * rest)) / 2 this.x = this.prev.x + (this.next.x - this.prev.x) * scale this.y = this.prev.y + (this.next.y - this.prev.y) * scale }, display() { this.fillCircle() }, } }
我们提供了一系列与颜色相关的函数, 你可以通过 stg.color
来使用它们的. 由这个库中的函数返回的实例可以直接在其他 API 的颜色接口中使用.
包含了全体 CSS 颜色的一个对象. 你可以使用诸如 color.builtin.blue
来获得一个蓝色实例.
返回一个由 4 / 8 / 16 个颜色字符串构成的数组, 表示东方 Project 风格中典型的颜色方案.
通过 RGBA / HSLA / HSVA 构造一个颜色实例.
通过十六进制字符构造一个颜色实例. hexString
的开头可以有一个 #
也可以没有, 包含的十六进制字符数可以是 3, 4, 6 或者 8.