mirror of
https://github.com/unanmed/HumanBreak.git
synced 2025-01-19 04:19:30 +08:00
点光源跟随勇士，动画路径
This commit is contained in:
parent
b0bfbfa0a4
commit
c39dd87556
28
package.json
28
package.json
@ -16,37 +16,37 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ant-design/icons-vue": "^6.1.0",
|
||||
"ant-design-vue": "^3.2.15",
|
||||
"axios": "^1.3.4",
|
||||
"ant-design-vue": "^3.2.17",
|
||||
"axios": "^1.3.5",
|
||||
"chart.js": "^4.2.1",
|
||||
"lodash": "^4.17.21",
|
||||
"lz-string": "^1.5.0",
|
||||
"mutate-animate": "^1.0.2",
|
||||
"mutate-animate": "^1.1.1",
|
||||
"three": "^0.149.0",
|
||||
"vue": "^3.2.47"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.21.0",
|
||||
"@babel/core": "^7.21.0",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/core": "^7.21.4",
|
||||
"@babel/preset-env": "^7.21.4",
|
||||
"@types/babel__core": "^7.20.0",
|
||||
"@types/fontmin": "^0.9.0",
|
||||
"@types/fs-extra": "^9.0.13",
|
||||
"@types/lodash": "^4.14.191",
|
||||
"@types/lz-string": "^1.3.34",
|
||||
"@types/node": "^18.14.6",
|
||||
"@vitejs/plugin-legacy": "^2.3.1",
|
||||
"@vitejs/plugin-vue": "^3.2.0",
|
||||
"@vitejs/plugin-vue-jsx": "^2.1.1",
|
||||
"compressing": "^1.8.0",
|
||||
"@types/lodash": "^4.14.194",
|
||||
"@types/node": "^18.15.11",
|
||||
"@vitejs/plugin-legacy": "^4.0.2",
|
||||
"@vitejs/plugin-vue": "^4.1.0",
|
||||
"@vitejs/plugin-vue-jsx": "^3.0.1",
|
||||
"compressing": "^1.9.0",
|
||||
"fontmin": "^0.9.9",
|
||||
"form-data": "^4.0.0",
|
||||
"fs-extra": "^10.1.0",
|
||||
"less": "^4.1.3",
|
||||
"terser": "^5.16.5",
|
||||
"terser": "^5.16.9",
|
||||
"ts-node": "^10.9.1",
|
||||
"typescript": "^4.9.5",
|
||||
"unplugin-vue-components": "^0.22.12",
|
||||
"vite": "^3.2.5",
|
||||
"vite": "^4.2.1",
|
||||
"vue-tsc": "^1.2.0"
|
||||
}
|
||||
}
|
||||
1534
pnpm-lock.yaml
1534
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
@ -320,7 +320,7 @@ core.prototype._loadPlugin = async function () {
|
||||
core.plugin.showMarkedEnemy.value = true;
|
||||
}
|
||||
if (main.pluginUseCompress) {
|
||||
await main.loadScript(`project/plugin.min.js?v=${main.version}`);
|
||||
await main.loadScript(`project/plugin.m.js?v=${main.version}`);
|
||||
} else {
|
||||
for await (const plugin of mainData.plugin) {
|
||||
await main.loadScript(
|
||||
|
||||
@ -41,7 +41,7 @@ var enemys_fcae963b_31c9_42b4_b48c_bb48d09f3f80 =
|
||||
"elemental": {"name":"元素生物","hp":0,"atk":0,"def":0,"money":0,"exp":0,"point":0,"special":[]},
|
||||
"steelGuard": {"name":"铁守卫","hp":0,"atk":0,"def":0,"money":0,"exp":0,"point":0,"special":[18],"value":20},
|
||||
"evilBat": {"name":"邪恶蝙蝠","hp":1000,"atk":800,"def":350,"money":1,"exp":40,"point":0,"special":[2]},
|
||||
"frozenSkeleton": {"name":"冻死骨","hp":7500,"atk":2500,"def":1000,"money":2,"exp":90,"point":0,"special":[1,20],"crit":500,"ice":10},
|
||||
"frozenSkeleton": {"name":"冻死骨","hp":7500,"atk":2500,"def":1000,"money":2,"exp":90,"point":0,"special":[1,20],"crit":500,"ice":10,"description":"弱小，无助，哀嚎，这就是残酷的现实。哪怕你身处极寒之中，也难有人对你伸出援手。人类总会帮助他人，但在这绝望的环境下，人类的本性便暴露无遗。这一个个精致却又无情的骷髅，便是那些在极寒之中死去的冤魂。"},
|
||||
"silverSlimelord": {"name":"银怪王","hp":0,"atk":0,"def":0,"money":0,"exp":0,"point":0,"special":[]},
|
||||
"goldSlimelord": {"name":"金怪王","hp":0,"atk":0,"def":0,"money":0,"exp":0,"point":0,"special":[]},
|
||||
"skeletonWarrior": {"name":"骷髅士兵","hp":500,"atk":100,"def":20,"money":0,"exp":12,"point":0,"special":[1],"crit":500,"description":"看来未来的机器人并不满足与赤手空拳，他们也拿上了武器。"},
|
||||
@ -68,13 +68,13 @@ var enemys_fcae963b_31c9_42b4_b48c_bb48d09f3f80 =
|
||||
"bowman": {"name":"猎人","hp":500,"atk":100,"def":50,"money":0,"exp":16,"point":0,"special":[24],"value":75,"description":"没人知道这些人怎么做出的弓，也没人知道他们怎么收集的这么多剑。而其他人唯一能做的事，便是远离他们。"},
|
||||
"liteBowman": {"name":"山间猎手","hp":1200,"atk":200,"def":60,"money":1,"exp":27,"point":0,"special":[24],"description":"这箭，或许就是那些败于他弓下的那些不知好歹的莽夫的骨头吧。或许，绕开他的视野才是躲避他的攻击的最好办法。"},
|
||||
"crimsonZombie": {"name":"勇气之兽","hp":1800,"atk":2000,"def":-100,"money":1,"exp":35,"point":0,"special":[],"description":"没人会愿意跟这些野兽一起吧？至少我是不想。上天赋予的勇气，却让他们更加渴望鲜血，这不是很可悲吗？"},
|
||||
"watcherSlime": {"name":"邪眼史莱姆","hp":5000,"atk":1200,"def":600,"money":1,"exp":50,"point":0,"special":[17]},
|
||||
"mutantSlimeman": {"name":"变异史莱姆人","hp":350,"atk":70,"def":27,"money":0,"exp":13,"point":0,"special":[]},
|
||||
"watcherSlime": {"name":"邪眼史莱姆","hp":5000,"atk":1200,"def":600,"money":1,"exp":50,"point":0,"special":[17],"description":"成群结队地出现在森林中，看遍百花齐放，经历万物凋零。他们守在这森林中，将那些企图突破这里的人置于死地。"},
|
||||
"mutantSlimeman": {"name":"变异史莱姆人","hp":350,"atk":70,"def":27,"money":0,"exp":13,"point":0,"special":[],"description":"据说，史莱姆人也会基因突变，这样就产生了这种变异史莱姆人。"},
|
||||
"devilKnight": {"name":"恶灵骑士","hp":0,"atk":0,"def":0,"money":0,"exp":0,"point":0,"special":[]},
|
||||
"grayPriest": {"name":"智慧法王","hp":3000,"atk":600,"def":250,"money":1,"exp":40,"point":0,"special":[13]},
|
||||
"grayPriest": {"name":"智慧法王","hp":3000,"atk":600,"def":250,"money":1,"exp":40,"point":0,"special":[13],"description":"法杖？他已经不需要了。没有人知道他长什么样，只知道他的智慧已非常人能及，只知道他的法术能让一个人在瞬间化为灰烬。"},
|
||||
"greenGateKeeper": {"name":"睿智雕像","hp":5000,"atk":1250,"def":900,"money":1,"exp":65,"point":0,"special":[1],"crit":1000},
|
||||
"ghostSoldier": {"name":"山间骷髅","hp":750,"atk":180,"def":40,"money":0,"exp":18,"point":0,"special":[],"description":"这次，他们穿上了盔甲。"},
|
||||
"frostBat": {"name":"寒霜蝙蝠","hp":20000,"atk":3200,"def":2000,"money":2,"exp":2000,"point":0,"special":[4,20],"ice":90},
|
||||
"frostBat": {"name":"寒霜蝙蝠","hp":20000,"atk":3200,"def":2000,"money":2,"exp":2000,"point":0,"special":[4,20],"ice":90,"description":"“穿梭于寒风里，行走在锋芒中”，寒霜蝙蝠将这句话运用到了极致。别看那小小的身体，它足以将你拆的七零八落。在它面前，任何小把戏都会被它看得一清二楚。它那凶恶的眼神，是否在哪里见过呢？"},
|
||||
"blackKing": {"name":"黑衣魔王","hp":1000,"atk":500,"def":0,"money":1000,"exp":1000,"point":0,"special":[],"notBomb":true},
|
||||
"yellowKing": {"name":"黄衣魔王","hp":0,"atk":0,"def":0,"money":0,"exp":0,"point":0,"special":[]},
|
||||
"greenKing": {"name":"青衣武士","hp":0,"atk":0,"def":0,"money":0,"exp":0,"point":0,"special":[]},
|
||||
|
||||
@ -59,6 +59,13 @@ main.floors.MT42=
|
||||
0,
|
||||
13
|
||||
]
|
||||
},
|
||||
"8,12": {
|
||||
"floorId": "MT48",
|
||||
"loc": [
|
||||
3,
|
||||
7
|
||||
]
|
||||
}
|
||||
},
|
||||
"beforeBattle": {},
|
||||
|
||||
@ -49,18 +49,18 @@ main.floors.MT44=
|
||||
"cannotMoveIn": {},
|
||||
"map": [
|
||||
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[ 0, 0, 0, 0, 0, 0, 0, 0,617, 0, 0, 0,600, 0, 0],
|
||||
[ 0, 0, 0, 0, 0, 0, 0, 0,617, 0,403, 0,600, 0, 0],
|
||||
[ 92, 0,584,584,584, 0,543, 0, 0,604,604,604, 0, 0, 0],
|
||||
[584, 0,584, 0, 0, 0, 0, 0, 0, 0,492, 0, 0, 0, 0],
|
||||
[584, 0,584, 0, 0, 0, 0, 0,378, 0,492, 0,378, 0, 0],
|
||||
[584, 0,643, 0, 0, 0, 0,595, 0,602,604,610,70176,70177,70177],
|
||||
[584,584,584,584,584, 0,584,584,494, 0, 0, 0,608, 0, 94],
|
||||
[ 0, 0, 0, 0, 0,613, 0, 0,584,614,584,584,70208,70209,70209],
|
||||
[ 0, 0, 0, 0, 0,274, 0, 0,584,614,584,584,70208,70209,70209],
|
||||
[586, 0, 0, 0, 0,588, 0, 0,584, 0, 0,584,584, 0, 0],
|
||||
[586, 0,588,588,588,588,602,584,584,584, 0,584,584, 0, 0],
|
||||
[586, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[586,586,586, 0,587,587, 0, 0, 0, 0, 0,585,585, 0, 0],
|
||||
[586, 0, 0, 0, 0,587, 0,617,585,585,492, 33, 33, 0, 0],
|
||||
[586, 0,586, 0,587,587,587, 0,584,584,584,584,584, 0, 0],
|
||||
[586,617,588,588,588,588,602,584,584,584, 0,584,584, 0, 0],
|
||||
[586, 0, 0, 0,274, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[586,586,586,610,587,587,595, 0,376, 0, 0,585,585, 0, 0],
|
||||
[586, 0,600, 0, 0,587, 33,617,585,585,492, 33, 33, 0, 0],
|
||||
[586, 0,586,614,587,587,587, 0,584,584,584,584,584, 0, 0],
|
||||
[ 92, 0,586, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[584,584,584,584,584,584,584, 93, 0, 0, 0, 0, 0, 0, 0]
|
||||
],
|
||||
|
||||
@ -26,20 +26,46 @@ main.floors.MT48=
|
||||
"cannotMove": {},
|
||||
"cannotMoveIn": {},
|
||||
"map": [
|
||||
[ 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
|
||||
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
|
||||
[ 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[ 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0],
|
||||
[ 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1],
|
||||
[ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0],
|
||||
[ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
[ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0],
|
||||
[ 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0],
|
||||
[ 1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0],
|
||||
[ 1, 0, 0, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1, 0],
|
||||
[ 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0],
|
||||
[ 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0],
|
||||
[ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0],
|
||||
[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0]
|
||||
],
|
||||
"bgmap": [
|
||||
[300,300,300,300,300,300,300,300,300,300,300,300,300,300,300],
|
||||
[300,300,300,300,300,300,300,300,300,300,300,300,300,300,300],
|
||||
[300,300,300,300,300,300,300,300,300,300,300,300,300,300,300],
|
||||
[300,300,300,300,300,300,300,300,300,300,300,300,300,300,300],
|
||||
[300,300,300,300,300,300,300,300,300,300,300,300,300,300,300],
|
||||
[300,300,300,300,300,300,300,300,300,300,300,300,300,300,300],
|
||||
[300,300,300,300,300,300,300,300,300,300,300,300,300,300,300],
|
||||
[300,300,300,300,300,300,300,300,300,300,300,300,300,300,300],
|
||||
[300,300,300,300,300,300,300,300,300,300,300,300,300,300,300],
|
||||
[300,300,300,300,300,300,300,300,300,300,300,300,300,300,300],
|
||||
[300,300,300,300,300,300,300,300,300,300,300,300,300,300,300],
|
||||
[300,300,300,300,300,300,300,300,300,300,300,300,300,300,300],
|
||||
[300,300,300,300,300,300,300,300,300,300,300,300,300,300,300],
|
||||
[300,300,300,300,300,300,300,300,300,300,300,300,300,300,300],
|
||||
[300,300,300,300,300,300,300,300,300,300,300,300,300,300,300]
|
||||
],
|
||||
"fgmap": [
|
||||
|
||||
],
|
||||
"bg2map": [
|
||||
|
||||
],
|
||||
"fg2map": [
|
||||
|
||||
]
|
||||
}
|
||||
@ -3,6 +3,7 @@ import fss from 'fs';
|
||||
import fse from 'fs-extra';
|
||||
import Fontmin from 'fontmin';
|
||||
import { exec } from 'child_process';
|
||||
import * as babel from '@babel/core';
|
||||
|
||||
(async function () {
|
||||
// 1. 去除未使用的文件
|
||||
@ -100,7 +101,7 @@ import { exec } from 'child_process';
|
||||
exec(
|
||||
`babel ${data.main.plugin
|
||||
.map(v => `./dist/project/plugin/${v}.js`)
|
||||
.join(' ')} --out-file ./dist/project/plugin.min.js`
|
||||
.join(' ')} --out-file ./dist/project/plugin.m.js`
|
||||
).on('close', async () => {
|
||||
const main = await fs.readFile('./dist/main.js', 'utf-8');
|
||||
await fs.writeFile(
|
||||
|
||||
@ -15,6 +15,7 @@ import shadow from './plugin/shadow/shadow';
|
||||
import gameShadow from './plugin/shadow/gameShadow';
|
||||
import achievement from './plugin/ui/achievement';
|
||||
import completion, { floors } from './plugin/completion';
|
||||
import path from './plugin/fx/path';
|
||||
|
||||
function forward() {
|
||||
const toForward: any[] = [
|
||||
@ -34,7 +35,8 @@ function forward() {
|
||||
shadow(),
|
||||
gameShadow(),
|
||||
achievement(),
|
||||
completion()
|
||||
completion(),
|
||||
path()
|
||||
];
|
||||
|
||||
// 初始化所有插件，并转发到core上
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div id="enemy-desc">
|
||||
<span>怪物描述</span>
|
||||
<Scroll id="enemy-desc-scroll">
|
||||
<span>{{ enemy.description }}</span>
|
||||
<span> {{ enemy.description }}</span>
|
||||
</Scroll>
|
||||
</div>
|
||||
<a-divider dashed style="border-color: #ddd4"></a-divider>
|
||||
@ -40,7 +40,7 @@ function mark() {
|
||||
<style lang="less" scoped>
|
||||
#enemy-target {
|
||||
width: 100%;
|
||||
font-size: 2.5vh;
|
||||
font-size: 2.8vh;
|
||||
}
|
||||
|
||||
#enemy-desc {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Animation, sleep, TimingFn } from 'mutate-animate';
|
||||
import { Animation, circle, hyper, sleep, TimingFn } from 'mutate-animate';
|
||||
import { completeAchievement } from '../ui/achievement';
|
||||
import { has } from '../utils';
|
||||
import { ChaseCameraData, ChasePath, getChaseDataByIndex } from './data';
|
||||
|
||||
496
src/plugin/fx/path.ts
Normal file
496
src/plugin/fx/path.ts
Normal file
@ -0,0 +1,496 @@
|
||||
import {
|
||||
TimingFn,
|
||||
linear,
|
||||
bezierPath,
|
||||
Animation,
|
||||
hyper,
|
||||
power,
|
||||
sleep
|
||||
} from 'mutate-animate';
|
||||
import { has } from '../utils';
|
||||
|
||||
interface AnimatedPathShadow {
|
||||
offsetX: number | TimingFn;
|
||||
offsetY: number | TimingFn;
|
||||
blur: number | TimingFn;
|
||||
color: string | TimingFn<4>;
|
||||
}
|
||||
|
||||
type AnimatedPathShadowEntry = [
|
||||
keyof AnimatedPathShadow,
|
||||
ValueOf<AnimatedPathShadow>
|
||||
][];
|
||||
|
||||
type AnimatedPathFilterKey =
|
||||
| 'blur'
|
||||
| 'brightness'
|
||||
| 'contrast'
|
||||
| 'grayscale'
|
||||
| 'hueRotate'
|
||||
| 'opacity'
|
||||
| 'saturate'
|
||||
| 'sepia';
|
||||
|
||||
type AnimatedPathFilter = Record<AnimatedPathFilterKey, number | TimingFn>;
|
||||
|
||||
interface Path {
|
||||
path: TimingFn<2>;
|
||||
length: number;
|
||||
}
|
||||
|
||||
export default function init() {
|
||||
return { AnimatedPath, pathTest: test };
|
||||
}
|
||||
|
||||
export class AnimatedPath {
|
||||
/** 不同线条间是否连接起来，不连接的话中间可能会有短暂的中断 */
|
||||
join: boolean = true;
|
||||
/** 路径信息 */
|
||||
linePath: Path[] = [];
|
||||
/** 绘制画布 */
|
||||
ctx: CanvasRenderingContext2D;
|
||||
|
||||
private dashStatus: number = 0;
|
||||
private dashLength: number = 0;
|
||||
private dashMode: (number | TimingFn)[] = [];
|
||||
private lineWidth: number | TimingFn = 1;
|
||||
private lineColor: string | TimingFn<4> = '#fff';
|
||||
private lineShadow: Partial<AnimatedPathShadow> = {};
|
||||
private lineFilter: Partial<AnimatedPathFilter> = {};
|
||||
private pathClose: boolean = false;
|
||||
|
||||
constructor(ctx: CanvasRenderingContext2D) {
|
||||
this.ctx = ctx;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置虚线格式
|
||||
* @param mode 一个偶数个元素的数组，表示虚线格式，如果不是偶数个，那么会再复制一份加到后面。
|
||||
* 元素可以填数字或一个函数，如果是数字，表示该值是定值，
|
||||
* 如果是函数，该函数包括一个参数input，表示绘制动画的完成度，输出一个数字，表示虚线的长度。
|
||||
* @example path.dash([5, 10]); // 表示绘制时，会先绘制5像素的实线，之后10像素不绘制，然后再绘制5像素实线，以此类推。
|
||||
* @example path.dash([5, (input) => Math.round(input * 10)]);
|
||||
* // 表示绘制时，先绘制5像素的实线，然后会有一段不绘制，不绘制的长度是动画完成度乘10，以此类推。
|
||||
*/
|
||||
dash(mode: (number | TimingFn)[]): this {
|
||||
const res = mode.slice();
|
||||
if (mode.length % 2 === 1) res.push(...mode);
|
||||
this.dashMode = mode;
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置线条宽度
|
||||
* @param width 绘制的线条宽度，如果是数字，表示宽度是个常量。
|
||||
* 也可以传入一个函数，函数包括一个参数input，表示绘制动画的完成度，输出一个数字，表示宽度。
|
||||
* @example path.width(2); // 设置线条宽度为2像素
|
||||
* @example path.width((input) => input * 5); // 设置线条宽度为动画完成度的5倍
|
||||
*/
|
||||
width(width: number | TimingFn): this {
|
||||
this.lineWidth = width;
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置线条颜色
|
||||
* @param color 颜色，可以传入css颜色字符串或函数，传入字符串表示线条颜色为定值，
|
||||
* 如果传入函数，这个函数有一个参数input，表示动画完成度，输出一个有4个元素的数组，表示颜色的rgba值。
|
||||
* @example path.color('#fff'); // 设置线条为白色
|
||||
* @example path.color((input) => [input * 100, input * 50, input * 255, input * 0.8]);
|
||||
* // 设置颜色的红色值为动画完成度的100倍，绿色为动画完成度的50倍，蓝色为动画完成度的255倍，不透明度为动画完成度的0.8倍
|
||||
*/
|
||||
color(color: string | TimingFn<4>): this {
|
||||
this.lineColor = color;
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置线条阴影
|
||||
* @param shadow 阴影信息，一个对象，包含offsetX(横向偏移量), offsetY(纵向偏移量), blur(虚化程度), color(颜色)
|
||||
* 四个属性，均为可选，前三个可传入数字或函数，color可传入字符串或函数，传入的函数与前面几个方法中的函数类似。
|
||||
* ```ts
|
||||
* path.shadow({
|
||||
* offsetX: 3, // 横向偏移量为3
|
||||
* offsetY: input => input * 10, // 纵向偏移量为动画完成度的10倍
|
||||
* color: '#0008', // 颜色为半透明的黑色
|
||||
* blur: 4 // 虚化程度为4
|
||||
* })
|
||||
* ```
|
||||
*/
|
||||
shadow(shadow: Partial<AnimatedPathShadow>): this {
|
||||
this.lineShadow = shadow;
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置线条的滤镜
|
||||
* @param filter 滤镜信息，一个对象，可以有以下属性：
|
||||
* 1. `blur`: 虚化程度
|
||||
* 2. `brightness`: 亮度，百分比，`0-Infinity`
|
||||
* 3. `contrast`: 对比度，百分比，`0-Infinity`
|
||||
* 4. `grayscale`: 黑白度，百分比，`0-100`
|
||||
* 5. `hueRotate`: 色相旋转，角度，`0-360`
|
||||
* 6. `invert`: 反色，百分比，`0-100`
|
||||
* 7. `opacity`: 不透明度，百分比，`0-100`
|
||||
* 8. `saturate`: 饱和度，百分比，`0-Infinity`
|
||||
* 9. `sepia`: 深褐色(怀旧风格)，百分比，`0-100`
|
||||
* 以上属性均可选，均可传入数字或函数。
|
||||
* ```ts
|
||||
* path.filter({
|
||||
* blur: 3, // 虚化程度为3
|
||||
* contrast: input => 100 + input * 50 // 对比度增加动画完成度的50倍
|
||||
* })
|
||||
* ```
|
||||
*/
|
||||
filter(filter: Partial<AnimatedPathFilter>): this {
|
||||
this.lineFilter = filter;
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 清空路径
|
||||
*/
|
||||
clear(): this {
|
||||
this.linePath = [];
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加直线
|
||||
* @param x1 起点横坐标
|
||||
* @param y1 起点纵坐标
|
||||
* @param x2 终点横坐标
|
||||
* @param y2 终点纵坐标
|
||||
* @returns
|
||||
*/
|
||||
line(x1: number, y1: number, x2: number, y2: number): this {
|
||||
const dx = x2 - x1;
|
||||
const dy = y2 - y1;
|
||||
this.add(x => [x1 + dx * x, y1 + dy * x], Math.sqrt(dx ** 2 + dy ** 2));
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加圆弧
|
||||
* @param x 圆心横坐标
|
||||
* @param y 圆心纵坐标
|
||||
* @param r 圆半径
|
||||
* @param start 圆起始角度，弧度制，水平向右表示0弧度，顺时针旋转
|
||||
* @param end 圆终止角度，弧度制
|
||||
*/
|
||||
circle(x: number, y: number, r: number, start: number, end: number): this {
|
||||
const dt = end - start;
|
||||
this.add(
|
||||
input => [
|
||||
x + r * Math.cos(dt * input + start),
|
||||
y + r * Math.sin(dt * input + start)
|
||||
],
|
||||
r * dt
|
||||
);
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加一个椭圆
|
||||
* @param x 圆心横坐标
|
||||
* @param y 圆心纵坐标
|
||||
* @param a 椭圆横轴长
|
||||
* @param b 椭圆纵轴长
|
||||
* @param start 起始角度，弧度制
|
||||
* @param end 终止角度，弧度制
|
||||
*/
|
||||
ellipse(
|
||||
x: number,
|
||||
y: number,
|
||||
a: number,
|
||||
b: number,
|
||||
start: number,
|
||||
end: number
|
||||
): this {
|
||||
const dt = end - start;
|
||||
this.add(input => [
|
||||
x + a * Math.cos(dt * input + start),
|
||||
y + b * Math.sin(dt * input + start)
|
||||
]);
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加一个矩形
|
||||
* @param x 左上角横坐标
|
||||
* @param y 左上角纵坐标
|
||||
* @param w 宽度
|
||||
* @param h 高度
|
||||
* @param lineWidth 线宽，用于闭合矩形
|
||||
*/
|
||||
rect(
|
||||
x: number,
|
||||
y: number,
|
||||
w: number,
|
||||
h: number,
|
||||
lineWidth: number = 0
|
||||
): this {
|
||||
const x2 = x + w;
|
||||
const y2 = y + h;
|
||||
this.line(x, y, x2, y)
|
||||
.line(x2, y, x2, y2)
|
||||
.line(x2, y2, x, y2)
|
||||
.line(x, y2, x, y - lineWidth / 2);
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加一个贝塞尔曲线
|
||||
* @param point 起点，控制点，终点的坐标
|
||||
*/
|
||||
bezier(...point: [number, number][]): this {
|
||||
if (point.length < 2) {
|
||||
throw new Error(`The point number of bezier must larger than 2.`);
|
||||
}
|
||||
const start = point[0];
|
||||
const end = point.at(-1)!;
|
||||
const cps = point.slice(1, -1);
|
||||
this.add(bezierPath(start, end, ...cps));
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加一个路径
|
||||
* @param path 路径函数，输入一个绘制完成度，输出一个坐标
|
||||
* @param length 路径的长度，不填则会调用calLength进行计算，用于该段路径的绘制时间的计算，
|
||||
* 也可以通过设置这个值来指定该段路径的绘制时间。请尽量指定该值，不然的话性能表现会较差，如果大量添加路径可能会导致卡顿。
|
||||
* @example path.add(input => [input * 100, (input * 100) ** 2]); // 添加一个抛物线路径
|
||||
*/
|
||||
add(path: TimingFn<2>, length: number = this.calLength(path)): this {
|
||||
this.linePath.push({
|
||||
path,
|
||||
length
|
||||
});
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置路径是否闭合
|
||||
* @param close 路径是否闭合
|
||||
*/
|
||||
close(close: boolean): this {
|
||||
this.pathClose = close;
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 对一个路径进行线积分，计算其长度。注意该函数性能较差，请谨慎使用
|
||||
* @param path 路径函数，输入一个绘制完成度，输出一个坐标
|
||||
* @returns 路径的长度
|
||||
*/
|
||||
calLength(path: TimingFn<2>): number {
|
||||
let [lastX, lastY] = path(0);
|
||||
let length = 0;
|
||||
for (let i = 1; i <= 1000; i++) {
|
||||
const [x, y] = path(i * 0.001);
|
||||
length += Math.sqrt((x - lastX) ** 2 + (y - lastY) ** 2);
|
||||
lastX = x;
|
||||
lastY = y;
|
||||
}
|
||||
return length;
|
||||
}
|
||||
|
||||
/**
|
||||
* 立即执行绘制，不执行动画，该函数的性能表现可能较差，请谨慎使用
|
||||
*/
|
||||
drawImmediate(): this {
|
||||
const totalLength = this.linePath.reduce(
|
||||
(pre, cur) => pre + cur.length,
|
||||
0
|
||||
);
|
||||
let drawed = 0;
|
||||
this.linePath.forEach(v => {
|
||||
this.drawFrom(v.path, 0, 1, drawed, v.length);
|
||||
drawed += v.length / totalLength;
|
||||
});
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 执行绘制
|
||||
* @param time 绘制时间，如果是0则会直接调用drawImmediate函数，注意如果时间太短的话可能会造成明显的锯齿现象
|
||||
* @param timing 绘制完成度的速率函数，输入一个时间完成度，输出一个绘制完成度
|
||||
*/
|
||||
draw(time: number, timing: TimingFn = linear()): this {
|
||||
const totalLength = this.linePath.reduce(
|
||||
(pre, cur) => pre + cur.length,
|
||||
0
|
||||
);
|
||||
const ratio = this.linePath.map(v => v.length / totalLength);
|
||||
let drawed = 0;
|
||||
let now = 0;
|
||||
let nowEnd = ratio[0];
|
||||
let lastComplete = 0;
|
||||
this.ctx.beginPath();
|
||||
this.ctx.moveTo(...this.linePath[0].path(0));
|
||||
|
||||
const findNext = (input: number) => {
|
||||
if (input >= 1 || nowEnd > input) return [];
|
||||
const skipped: number[] = [];
|
||||
while (1) {
|
||||
drawed += ratio[now];
|
||||
now++;
|
||||
nowEnd += ratio[now];
|
||||
if (input < nowEnd) {
|
||||
lastComplete = drawed;
|
||||
break;
|
||||
} else skipped.push(now);
|
||||
}
|
||||
return skipped;
|
||||
};
|
||||
|
||||
const ani = new Animation();
|
||||
ani.register('path', 0);
|
||||
ani.mode(timing).time(time).absolute().apply('path', 1);
|
||||
ani.all().then(() => {
|
||||
ani.ticker.destroy();
|
||||
if (this.pathClose) {
|
||||
this.ctx.beginPath();
|
||||
this.ctx.moveTo(...this.linePath.at(-1)!.path(0.999));
|
||||
this.ctx.lineTo(...this.linePath[0].path(0.001));
|
||||
this.ctx.stroke();
|
||||
}
|
||||
this.ctx.closePath();
|
||||
});
|
||||
ani.ticker.add(() => {
|
||||
const complete = ani.value.path;
|
||||
if (complete >= nowEnd) {
|
||||
const d = nowEnd - drawed;
|
||||
const from = (lastComplete - drawed) / d;
|
||||
this.drawFrom(
|
||||
this.linePath[now].path,
|
||||
from,
|
||||
1,
|
||||
lastComplete,
|
||||
ratio[now]
|
||||
);
|
||||
const skipped = findNext(complete);
|
||||
skipped.forEach(v => {
|
||||
const path = this.linePath[v];
|
||||
this.drawFrom(path.path, 0, 1, lastComplete, ratio[v]);
|
||||
});
|
||||
}
|
||||
const fn = this.linePath[now].path;
|
||||
const d = nowEnd - drawed;
|
||||
const from = (lastComplete - drawed) / d;
|
||||
const to = (complete - drawed) / d;
|
||||
this.drawFrom(fn, from, to, lastComplete, ratio[now]);
|
||||
lastComplete = complete;
|
||||
});
|
||||
return this;
|
||||
}
|
||||
|
||||
private drawFrom(
|
||||
path: TimingFn<2>,
|
||||
from: number,
|
||||
to: number,
|
||||
complete: number,
|
||||
ratio: number,
|
||||
length?: number
|
||||
) {
|
||||
const [fx, fy] = path(from);
|
||||
const [tx, ty] = path(to);
|
||||
|
||||
const l =
|
||||
length ?? Math.ceil(Math.sqrt((tx - fx) ** 2 + (ty - fy) ** 2));
|
||||
const step = (to - from) / l;
|
||||
const ctx = this.ctx;
|
||||
let [lastX, lastY] = path(from);
|
||||
for (let i = 1; i <= l; i++) {
|
||||
this.handleFx(complete + (ratio * i * step) / l);
|
||||
const [x, y] = path(from + step * i);
|
||||
ctx.lineTo(x, y);
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(lastX, lastY);
|
||||
ctx.lineTo(x, y);
|
||||
lastX = x;
|
||||
lastY = y;
|
||||
}
|
||||
}
|
||||
|
||||
private handleFx(complete: number) {
|
||||
const ctx = this.ctx;
|
||||
const width =
|
||||
typeof this.lineWidth === 'number'
|
||||
? this.lineWidth
|
||||
: this.lineWidth(complete);
|
||||
ctx.lineWidth = width;
|
||||
|
||||
let color;
|
||||
if (typeof this.lineColor === 'string') {
|
||||
color = this.lineColor;
|
||||
} else {
|
||||
const c = this.lineColor(complete);
|
||||
color = `rgba(${c[0]},${c[1]},${c[2]},${c[3]})`;
|
||||
}
|
||||
ctx.strokeStyle = color;
|
||||
|
||||
const shadow: Partial<
|
||||
Record<keyof AnimatedPathShadow, string | number>
|
||||
> = {};
|
||||
for (const [key, value] of Object.entries(
|
||||
this.lineShadow
|
||||
) as AnimatedPathShadowEntry) {
|
||||
if (typeof value === 'function') {
|
||||
const n = value(complete);
|
||||
if (typeof n === 'number') {
|
||||
shadow[key as Exclude<keyof AnimatedPathShadow, 'color'>] =
|
||||
n;
|
||||
} else {
|
||||
shadow.color = `rgba(${n[0]},${n[1]},${n[2]},${n[3]})`;
|
||||
}
|
||||
} else {
|
||||
// @ts-ignore
|
||||
shadow[key] = value;
|
||||
}
|
||||
}
|
||||
if (has(shadow.blur)) ctx.shadowBlur = shadow.blur as number;
|
||||
if (has(shadow.offsetX)) ctx.shadowOffsetX = shadow.offsetX as number;
|
||||
if (has(shadow.offsetY)) ctx.shadowOffsetY = shadow.offsetY as number;
|
||||
if (has(shadow.color)) ctx.shadowColor = shadow.color as string;
|
||||
|
||||
let filter = '';
|
||||
for (const [key, value] of Object.entries(this.lineFilter) as [
|
||||
AnimatedPathFilterKey,
|
||||
number | TimingFn
|
||||
][]) {
|
||||
let v;
|
||||
if (typeof value === 'number') {
|
||||
v = value;
|
||||
} else {
|
||||
v = value(complete);
|
||||
}
|
||||
if (key === 'blur') filter += `blur(${v}px)`;
|
||||
else filter += `${key}(${v}%)`;
|
||||
}
|
||||
ctx.filter = filter;
|
||||
}
|
||||
}
|
||||
|
||||
async function test() {
|
||||
const ctx = core.createCanvas('test', 0, 0, 480, 480, 100);
|
||||
ctx.canvas.style.backgroundColor = '#000d';
|
||||
const path = new AnimatedPath(ctx);
|
||||
path.color('#fff')
|
||||
.width(2)
|
||||
.rect(100, 100, 280, 280, 2)
|
||||
.close(true)
|
||||
.draw(1000, power(5, 'in-out'));
|
||||
|
||||
await sleep(1050);
|
||||
path.clear()
|
||||
.bezier([200, 200], [280, 200], [280, 280])
|
||||
.bezier([280, 280], [200, 280], [200, 200])
|
||||
.draw(1000, power(5, 'in-out'));
|
||||
await sleep(1050);
|
||||
path.clear()
|
||||
.bezier([280, 200], [200, 200], [200, 280])
|
||||
.bezier([200, 280], [280, 280], [280, 200])
|
||||
.draw(1000, power(5, 'in-out'));
|
||||
}
|
||||
@ -1,6 +1,8 @@
|
||||
import { Polygon } from './polygon';
|
||||
import {
|
||||
Light,
|
||||
getAllLights,
|
||||
refreshLight,
|
||||
removeAllLights,
|
||||
setBackground,
|
||||
setBlur,
|
||||
@ -9,29 +11,44 @@ import {
|
||||
} from './shadow';
|
||||
|
||||
export default function init() {
|
||||
const origin4 = control.prototype.drawHero;
|
||||
control.prototype.drawHero = function () {
|
||||
origin4.apply(core.control, arguments);
|
||||
if (core.getFlag('__heroOpacity__') !== 0) {
|
||||
getAllLights().forEach(v => {
|
||||
if (!v.followHero) return;
|
||||
v._offset ??= { x: v.x, y: v.y };
|
||||
v.x = core.status.heroCenter.px + v._offset.x;
|
||||
v.y = core.status.heroCenter.py + v._offset.y;
|
||||
refreshLight();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return { updateShadow, clearShadowCache, setCalShadow };
|
||||
}
|
||||
|
||||
const shadowInfo: Partial<Record<FloorIds, Light[]>> = {
|
||||
MT43: [
|
||||
MT48: [
|
||||
{
|
||||
id: 'mt42_1',
|
||||
x: 280,
|
||||
y: 220,
|
||||
decay: 100,
|
||||
r: 300,
|
||||
color: '#0000'
|
||||
id: 'mt48_1',
|
||||
x: 0,
|
||||
y: 0,
|
||||
decay: 1000,
|
||||
r: 2000,
|
||||
color: '#0000',
|
||||
followHero: true
|
||||
}
|
||||
]
|
||||
};
|
||||
const backgroundInfo: Partial<Record<FloorIds, Color>> = {
|
||||
MT43: '#0008'
|
||||
MT48: '#0008'
|
||||
};
|
||||
const blurInfo: Partial<Record<FloorIds, number>> = {
|
||||
MT43: 4
|
||||
MT48: 4
|
||||
};
|
||||
const immersionInfo: Partial<Record<FloorIds, number>> = {
|
||||
MT43: 8
|
||||
MT48: 4
|
||||
};
|
||||
const shadowCache: Partial<Record<FloorIds, Polygon[]>> = {};
|
||||
|
||||
|
||||
@ -24,12 +24,16 @@ export interface Light {
|
||||
color: Color;
|
||||
/** 是否可以被物体遮挡 */
|
||||
noShelter?: boolean;
|
||||
/** 是否跟随勇士 */
|
||||
followHero?: boolean;
|
||||
/** 正在动画的属性 */
|
||||
_animating?: Record<string, boolean>;
|
||||
/** 执行渐变的属性 */
|
||||
_transition?: Record<string, TransitionInfo>;
|
||||
/** 表示是否是代理，只有设置渐变后才会变为true */
|
||||
_isProxy?: boolean;
|
||||
/** 跟随勇士的时候的偏移量 */
|
||||
_offset?: Loc;
|
||||
}
|
||||
|
||||
export default function init() {
|
||||
@ -49,7 +53,8 @@ export default function init() {
|
||||
animateLight,
|
||||
transitionLight,
|
||||
moveLightAs,
|
||||
getAllLights
|
||||
getAllLights,
|
||||
refreshLight
|
||||
};
|
||||
}
|
||||
|
||||
@ -171,6 +176,13 @@ export function setBackground(color: Color) {
|
||||
needRefresh = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 刷新灯光信息并重绘
|
||||
*/
|
||||
export function refreshLight() {
|
||||
needRefresh = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 动画改变一个属性的值
|
||||
* @param id 灯光id
|
||||
@ -416,12 +428,14 @@ export function drawShadow() {
|
||||
// 绘制阴影，一个光源一个光源地绘制，然后source-out获得光，然后把光叠加，再source-out获得最终阴影
|
||||
for (let i = 0; i < lights.length; i++) {
|
||||
const { x, y, r, decay, color, noShelter } = lights[i];
|
||||
const rx = x + 32;
|
||||
const ry = y + 32;
|
||||
// 绘制阴影
|
||||
ct1.clearRect(0, 0, w, h);
|
||||
ct2.clearRect(0, 0, w, h);
|
||||
if (!noShelter) {
|
||||
for (const polygon of shadowNodes) {
|
||||
const area = polygon.shadowArea(x + 32, y + 32, r);
|
||||
const area = polygon.shadowArea(rx, ry, r);
|
||||
area.forEach(v => {
|
||||
ct1.beginPath();
|
||||
ct1.moveTo(v[0][0], v[0][1]);
|
||||
@ -439,21 +453,21 @@ export function drawShadow() {
|
||||
ct2.globalCompositeOperation = 'source-over';
|
||||
ct2.drawImage(temp1, 0, 0, w, h);
|
||||
ct2.globalCompositeOperation = 'source-out';
|
||||
const gra = ct2.createRadialGradient(x, y, decay, x, y, r);
|
||||
const gra = ct2.createRadialGradient(rx, ry, decay, rx, ry, r);
|
||||
gra.addColorStop(0, core.arrayToRGBA(color));
|
||||
gra.addColorStop(1, 'transparent');
|
||||
ct2.fillStyle = gra;
|
||||
ct2.beginPath();
|
||||
ct2.arc(x, y, r, 0, Math.PI * 2);
|
||||
ct2.arc(rx, ry, r, 0, Math.PI * 2);
|
||||
ct2.fill();
|
||||
ctx.drawImage(temp2, 0, 0, w, h);
|
||||
// 再绘制ct1的阴影，然后绘制到ct3叠加
|
||||
ct1.globalCompositeOperation = 'source-out';
|
||||
const gra2 = ct1.createRadialGradient(x, y, decay, x, y, r);
|
||||
const gra2 = ct1.createRadialGradient(rx, ry, decay, rx, ry, r);
|
||||
gra2.addColorStop(0, '#fff');
|
||||
gra2.addColorStop(1, '#fff0');
|
||||
ct1.beginPath();
|
||||
ct1.arc(x, y, r, 0, Math.PI * 2);
|
||||
ct1.arc(rx, ry, r, 0, Math.PI * 2);
|
||||
ct1.fillStyle = gra2;
|
||||
ct1.fill();
|
||||
// 绘制到ct3上
|
||||
|
||||
4
src/types/control.d.ts
vendored
4
src/types/control.d.ts
vendored
@ -751,8 +751,8 @@ interface Control {
|
||||
* @example core.getHeroLoc(); // 获取主角的位置和朝向
|
||||
* @param name 要读取横坐标还是纵坐标还是朝向还是都读取
|
||||
*/
|
||||
getHeroLoc(): Loc;
|
||||
getHeroLoc<K extends keyof Loc>(name: K): Loc[K];
|
||||
getHeroLoc(): DiredLoc;
|
||||
getHeroLoc<K extends keyof DiredLoc>(name: K): DiredLoc[K];
|
||||
|
||||
/**
|
||||
* 根据级别的数字获取对应的名称，后者定义在全塔属性
|
||||
|
||||
2
src/types/util.d.ts
vendored
2
src/types/util.d.ts
vendored
@ -890,3 +890,5 @@ type NonObjectOf<T> = SelectType<T, NonObject>;
|
||||
type EndsWith<T extends string> = `${string}${T}`;
|
||||
|
||||
type KeyExcludesUnderline<T> = Exclude<keyof T, `_${string}`>;
|
||||
|
||||
type ValueOf<T> = T[keyof T];
|
||||
|
||||
Loading…
Reference in New Issue
Block a user