1114 lines
28 KiB
TypeScript
1114 lines
28 KiB
TypeScript
import { removeBackgroundFromRgba } from '../../../packages/shared/src/assets/chromaKey';
|
|
import {
|
|
AnimationState,
|
|
type Character,
|
|
type CharacterAnimationConfig,
|
|
} from '../../types';
|
|
|
|
export const MASTER_VISUAL_WIDTH = 1024;
|
|
export const MASTER_VISUAL_HEIGHT = 1024;
|
|
export const GENERATED_FRAME_WIDTH = 192;
|
|
export const GENERATED_FRAME_HEIGHT = 256;
|
|
|
|
export const REQUIRED_BASE_ANIMATIONS: AnimationState[] = [
|
|
AnimationState.ATTACK,
|
|
AnimationState.RUN,
|
|
];
|
|
|
|
export const OPTIONAL_BASE_ANIMATIONS: AnimationState[] = [
|
|
AnimationState.IDLE,
|
|
AnimationState.DIE,
|
|
];
|
|
|
|
export type DraftVisualCandidate = {
|
|
id: string;
|
|
label: string;
|
|
dataUrl: string;
|
|
width: number;
|
|
height: number;
|
|
};
|
|
|
|
export type DraftAnimationClip = {
|
|
animation: AnimationState;
|
|
frames: string[];
|
|
fps: number;
|
|
loop: boolean;
|
|
frameWidth: number;
|
|
frameHeight: number;
|
|
previewVideoPath?: string;
|
|
};
|
|
|
|
const DEFAULT_CHARACTER_ANIMATIONS: Record<
|
|
AnimationState,
|
|
CharacterAnimationConfig
|
|
> = {
|
|
[AnimationState.ACQUIRE]: {
|
|
frames: 1,
|
|
prefix: 'acquire',
|
|
folder: 'acquire',
|
|
},
|
|
[AnimationState.ATTACK]: { frames: 1, prefix: 'Attack', folder: 'attack' },
|
|
[AnimationState.RUN]: { frames: 1, prefix: 'Run', folder: 'run' },
|
|
[AnimationState.DOUBLE_JUMP]: {
|
|
frames: 1,
|
|
prefix: 'double jump',
|
|
folder: 'double jump',
|
|
},
|
|
[AnimationState.JUMP_ATTACK]: {
|
|
frames: 1,
|
|
prefix: 'jump attack',
|
|
folder: 'jump attack',
|
|
},
|
|
[AnimationState.DASH]: { frames: 1, prefix: 'dash', folder: 'dash' },
|
|
[AnimationState.HURT]: { frames: 1, prefix: 'hurt', folder: 'hurt' },
|
|
[AnimationState.DIE]: { frames: 1, prefix: 'die', folder: 'die' },
|
|
[AnimationState.CLIMB]: { frames: 1, prefix: 'Climb', folder: 'climb' },
|
|
[AnimationState.SKILL1]: { frames: 1, prefix: 'skill1', folder: 'skill1' },
|
|
[AnimationState.SKILL1_JUMP]: {
|
|
frames: 1,
|
|
prefix: 'skill1 jump',
|
|
folder: 'skill1 jump',
|
|
},
|
|
[AnimationState.SKILL1_BULLET]: {
|
|
frames: 1,
|
|
prefix: 'skill1 bullet',
|
|
folder: 'skill1 bullet',
|
|
},
|
|
[AnimationState.SKILL1_BULLET_FX]: {
|
|
frames: 1,
|
|
prefix: 'skill1 bullet FX',
|
|
folder: 'skill1 bullet FX',
|
|
},
|
|
[AnimationState.SKILL2]: { frames: 1, prefix: 'skill2', folder: 'skill2' },
|
|
[AnimationState.SKILL2_JUMP]: {
|
|
frames: 1,
|
|
prefix: 'skill2 jump',
|
|
folder: 'skill2 jump',
|
|
},
|
|
[AnimationState.SKILL3]: { frames: 1, prefix: 'skill3', folder: 'skill3' },
|
|
[AnimationState.SKILL3_JUMP]: {
|
|
frames: 1,
|
|
prefix: 'skill3 jump',
|
|
folder: 'skill3 jump',
|
|
},
|
|
[AnimationState.SKILL3_BULLET]: {
|
|
frames: 1,
|
|
prefix: 'skill3 bullet',
|
|
folder: 'skill3 bullet',
|
|
},
|
|
[AnimationState.SKILL3_BULLET_FX]: {
|
|
frames: 1,
|
|
prefix: 'skill3 bullet FX',
|
|
folder: 'skill3 bullet FX',
|
|
},
|
|
[AnimationState.SKILL4]: { frames: 1, prefix: 'skill4', folder: 'skill4' },
|
|
[AnimationState.WALL_SLIDE]: {
|
|
frames: 1,
|
|
prefix: 'Wall Slide',
|
|
folder: 'Wall Slide',
|
|
},
|
|
[AnimationState.IDLE]: { frames: 1, prefix: 'Idle', folder: 'idle' },
|
|
[AnimationState.JUMP]: { frames: 1, prefix: 'Jump', folder: 'jump' },
|
|
};
|
|
|
|
type PoseTransform = {
|
|
offsetX: number;
|
|
offsetY: number;
|
|
scaleX: number;
|
|
scaleY: number;
|
|
rotation: number;
|
|
alpha?: number;
|
|
tintColor?: string;
|
|
afterImage?: boolean;
|
|
};
|
|
|
|
type ActionTemplate = {
|
|
frames: number;
|
|
fps: number;
|
|
loop: boolean;
|
|
poseAt: (
|
|
progress: number,
|
|
frameIndex: number,
|
|
totalFrames: number,
|
|
) => PoseTransform;
|
|
};
|
|
|
|
const ACTION_TEMPLATES: Record<AnimationState, ActionTemplate> = {
|
|
[AnimationState.IDLE]: {
|
|
frames: 8,
|
|
fps: 8,
|
|
loop: true,
|
|
poseAt: (progress) => {
|
|
const wave = Math.sin(progress * Math.PI * 2);
|
|
return {
|
|
offsetX: wave * 1.5,
|
|
offsetY: wave * -4,
|
|
scaleX: 1 - wave * 0.015,
|
|
scaleY: 1 + wave * 0.02,
|
|
rotation: wave * 0.01,
|
|
};
|
|
},
|
|
},
|
|
[AnimationState.ACQUIRE]: {
|
|
frames: 6,
|
|
fps: 10,
|
|
loop: false,
|
|
poseAt: (progress) => ({
|
|
offsetX: progress < 0.5 ? progress * 6 : (1 - progress) * 6,
|
|
offsetY: progress < 0.5 ? progress * -18 : -18 + (progress - 0.5) * 18,
|
|
scaleX: 1,
|
|
scaleY: 1,
|
|
rotation: progress < 0.5 ? -0.08 * progress : -0.04 * (1 - progress),
|
|
}),
|
|
},
|
|
[AnimationState.ATTACK]: {
|
|
frames: 6,
|
|
fps: 12,
|
|
loop: false,
|
|
poseAt: (progress) => ({
|
|
offsetX: progress < 0.55 ? progress * 30 : 30 - (progress - 0.55) * 30,
|
|
offsetY: progress < 0.55 ? progress * -12 : -12 + (progress - 0.55) * 10,
|
|
scaleX: 1 + Math.max(0, Math.sin(progress * Math.PI)) * 0.06,
|
|
scaleY: 1 - Math.max(0, Math.sin(progress * Math.PI)) * 0.03,
|
|
rotation: progress < 0.55 ? -0.12 : 0.05 * (progress - 0.55),
|
|
}),
|
|
},
|
|
[AnimationState.RUN]: {
|
|
frames: 8,
|
|
fps: 10,
|
|
loop: true,
|
|
poseAt: (progress) => {
|
|
const cycle = Math.sin(progress * Math.PI * 2);
|
|
return {
|
|
offsetX: cycle * 8,
|
|
offsetY: Math.abs(cycle) * -10,
|
|
scaleX: 1 + Math.max(0, cycle) * 0.04,
|
|
scaleY: 1 - Math.abs(cycle) * 0.04,
|
|
rotation: cycle * 0.05,
|
|
};
|
|
},
|
|
},
|
|
[AnimationState.JUMP]: {
|
|
frames: 6,
|
|
fps: 10,
|
|
loop: false,
|
|
poseAt: (progress) => {
|
|
const arc = Math.sin(progress * Math.PI);
|
|
return {
|
|
offsetX: 0,
|
|
offsetY: -36 * arc,
|
|
scaleX: 1,
|
|
scaleY: 1 - arc * 0.04,
|
|
rotation: -0.02 + progress * 0.04,
|
|
};
|
|
},
|
|
},
|
|
[AnimationState.DOUBLE_JUMP]: {
|
|
frames: 6,
|
|
fps: 10,
|
|
loop: false,
|
|
poseAt: (progress) => {
|
|
const arc = Math.sin(progress * Math.PI);
|
|
return {
|
|
offsetX: progress < 0.5 ? 6 : -6,
|
|
offsetY: -48 * arc,
|
|
scaleX: 1 + arc * 0.03,
|
|
scaleY: 1 - arc * 0.05,
|
|
rotation: -0.08 + progress * 0.16,
|
|
};
|
|
},
|
|
},
|
|
[AnimationState.JUMP_ATTACK]: {
|
|
frames: 6,
|
|
fps: 12,
|
|
loop: false,
|
|
poseAt: (progress) => {
|
|
const arc = Math.sin(progress * Math.PI);
|
|
return {
|
|
offsetX: progress * 18,
|
|
offsetY: -28 * arc,
|
|
scaleX: 1 + arc * 0.05,
|
|
scaleY: 1 - arc * 0.05,
|
|
rotation: -0.12 + progress * 0.18,
|
|
};
|
|
},
|
|
},
|
|
[AnimationState.DASH]: {
|
|
frames: 5,
|
|
fps: 14,
|
|
loop: false,
|
|
poseAt: (progress) => ({
|
|
offsetX: progress * 42,
|
|
offsetY: -6,
|
|
scaleX: 1 + progress * 0.08,
|
|
scaleY: 1 - progress * 0.04,
|
|
rotation: -0.04,
|
|
afterImage: progress > 0.15,
|
|
}),
|
|
},
|
|
[AnimationState.HURT]: {
|
|
frames: 5,
|
|
fps: 10,
|
|
loop: false,
|
|
poseAt: (progress) => ({
|
|
offsetX: -18 * Math.sin(progress * Math.PI),
|
|
offsetY: 4 * progress,
|
|
scaleX: 1,
|
|
scaleY: 1 - progress * 0.02,
|
|
rotation: 0.08 * Math.sin(progress * Math.PI),
|
|
tintColor: 'rgba(248, 113, 113, 0.22)',
|
|
}),
|
|
},
|
|
[AnimationState.DIE]: {
|
|
frames: 7,
|
|
fps: 8,
|
|
loop: false,
|
|
poseAt: (progress) => ({
|
|
offsetX: progress * 18,
|
|
offsetY: progress * 34,
|
|
scaleX: 1,
|
|
scaleY: 1,
|
|
rotation: progress * 1.35,
|
|
alpha: 1 - progress * 0.18,
|
|
}),
|
|
},
|
|
[AnimationState.CLIMB]: {
|
|
frames: 6,
|
|
fps: 8,
|
|
loop: true,
|
|
poseAt: (progress) => {
|
|
const cycle = Math.sin(progress * Math.PI * 2);
|
|
return {
|
|
offsetX: cycle * 2,
|
|
offsetY: cycle * -12,
|
|
scaleX: 1,
|
|
scaleY: 1,
|
|
rotation: cycle * 0.02,
|
|
};
|
|
},
|
|
},
|
|
[AnimationState.WALL_SLIDE]: {
|
|
frames: 4,
|
|
fps: 8,
|
|
loop: true,
|
|
poseAt: (progress) => ({
|
|
offsetX: -8,
|
|
offsetY: progress * 18,
|
|
scaleX: 1,
|
|
scaleY: 1,
|
|
rotation: -0.05,
|
|
alpha: 0.96,
|
|
}),
|
|
},
|
|
[AnimationState.SKILL1]: {
|
|
frames: 6,
|
|
fps: 10,
|
|
loop: false,
|
|
poseAt: () => ({
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
scaleX: 1,
|
|
scaleY: 1,
|
|
rotation: 0,
|
|
}),
|
|
},
|
|
[AnimationState.SKILL1_JUMP]: {
|
|
frames: 6,
|
|
fps: 10,
|
|
loop: false,
|
|
poseAt: () => ({
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
scaleX: 1,
|
|
scaleY: 1,
|
|
rotation: 0,
|
|
}),
|
|
},
|
|
[AnimationState.SKILL1_BULLET]: {
|
|
frames: 4,
|
|
fps: 10,
|
|
loop: false,
|
|
poseAt: () => ({
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
scaleX: 1,
|
|
scaleY: 1,
|
|
rotation: 0,
|
|
}),
|
|
},
|
|
[AnimationState.SKILL1_BULLET_FX]: {
|
|
frames: 4,
|
|
fps: 10,
|
|
loop: false,
|
|
poseAt: () => ({
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
scaleX: 1,
|
|
scaleY: 1,
|
|
rotation: 0,
|
|
}),
|
|
},
|
|
[AnimationState.SKILL2]: {
|
|
frames: 6,
|
|
fps: 10,
|
|
loop: false,
|
|
poseAt: () => ({
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
scaleX: 1,
|
|
scaleY: 1,
|
|
rotation: 0,
|
|
}),
|
|
},
|
|
[AnimationState.SKILL2_JUMP]: {
|
|
frames: 6,
|
|
fps: 10,
|
|
loop: false,
|
|
poseAt: () => ({
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
scaleX: 1,
|
|
scaleY: 1,
|
|
rotation: 0,
|
|
}),
|
|
},
|
|
[AnimationState.SKILL3]: {
|
|
frames: 6,
|
|
fps: 10,
|
|
loop: false,
|
|
poseAt: () => ({
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
scaleX: 1,
|
|
scaleY: 1,
|
|
rotation: 0,
|
|
}),
|
|
},
|
|
[AnimationState.SKILL3_JUMP]: {
|
|
frames: 6,
|
|
fps: 10,
|
|
loop: false,
|
|
poseAt: () => ({
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
scaleX: 1,
|
|
scaleY: 1,
|
|
rotation: 0,
|
|
}),
|
|
},
|
|
[AnimationState.SKILL3_BULLET]: {
|
|
frames: 4,
|
|
fps: 10,
|
|
loop: false,
|
|
poseAt: () => ({
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
scaleX: 1,
|
|
scaleY: 1,
|
|
rotation: 0,
|
|
}),
|
|
},
|
|
[AnimationState.SKILL3_BULLET_FX]: {
|
|
frames: 4,
|
|
fps: 10,
|
|
loop: false,
|
|
poseAt: () => ({
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
scaleX: 1,
|
|
scaleY: 1,
|
|
rotation: 0,
|
|
}),
|
|
},
|
|
[AnimationState.SKILL4]: {
|
|
frames: 6,
|
|
fps: 10,
|
|
loop: false,
|
|
poseAt: () => ({
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
scaleX: 1,
|
|
scaleY: 1,
|
|
rotation: 0,
|
|
}),
|
|
},
|
|
};
|
|
|
|
export function readFileAsDataUrl(file: File) {
|
|
return new Promise<string>((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.onload = () => resolve(String(reader.result ?? ''));
|
|
reader.onerror = () => reject(reader.error ?? new Error('读取文件失败'));
|
|
reader.readAsDataURL(file);
|
|
});
|
|
}
|
|
|
|
export function loadImageFromSource(source: string) {
|
|
return new Promise<HTMLImageElement>((resolve, reject) => {
|
|
const image = new Image();
|
|
image.crossOrigin = 'anonymous';
|
|
image.onload = () => resolve(image);
|
|
image.onerror = () => reject(new Error(`加载图片失败：${source}`));
|
|
image.src = source;
|
|
});
|
|
}
|
|
|
|
function loadVideoFromSource(source: string) {
|
|
return new Promise<HTMLVideoElement>((resolve, reject) => {
|
|
const video = document.createElement('video');
|
|
video.crossOrigin = 'anonymous';
|
|
video.preload = 'auto';
|
|
video.muted = true;
|
|
video.playsInline = true;
|
|
video.onloadeddata = () => resolve(video);
|
|
video.onerror = () => reject(new Error(`加载视频失败：${source}`));
|
|
video.src = source;
|
|
});
|
|
}
|
|
|
|
function createCanvas(width: number, height: number) {
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
const context = canvas.getContext('2d');
|
|
if (!context) {
|
|
throw new Error('无法创建画布上下文');
|
|
}
|
|
return { canvas, context };
|
|
}
|
|
|
|
function drawContainedSource(
|
|
context: CanvasRenderingContext2D,
|
|
source: CanvasImageSource,
|
|
sourceWidth: number,
|
|
sourceHeight: number,
|
|
options: {
|
|
width: number;
|
|
height: number;
|
|
translateX?: number;
|
|
translateY?: number;
|
|
scale?: number;
|
|
rotation?: number;
|
|
alpha?: number;
|
|
},
|
|
) {
|
|
const {
|
|
width,
|
|
height,
|
|
translateX = 0,
|
|
translateY = 0,
|
|
scale = 1,
|
|
rotation = 0,
|
|
alpha = 1,
|
|
} = options;
|
|
const fitScale = Math.min(width / sourceWidth, height / sourceHeight);
|
|
const drawWidth = sourceWidth * fitScale * scale;
|
|
const drawHeight = sourceHeight * fitScale * scale;
|
|
const centerX = width / 2 + translateX;
|
|
const centerY = height / 2 + translateY;
|
|
|
|
context.save();
|
|
context.globalAlpha = alpha;
|
|
context.translate(centerX, centerY);
|
|
context.rotate(rotation);
|
|
context.drawImage(
|
|
source,
|
|
-drawWidth / 2,
|
|
-drawHeight / 2,
|
|
drawWidth,
|
|
drawHeight,
|
|
);
|
|
context.restore();
|
|
}
|
|
|
|
function drawContainedImage(
|
|
context: CanvasRenderingContext2D,
|
|
image: HTMLImageElement,
|
|
options: {
|
|
width: number;
|
|
height: number;
|
|
translateX?: number;
|
|
translateY?: number;
|
|
scale?: number;
|
|
rotation?: number;
|
|
alpha?: number;
|
|
},
|
|
) {
|
|
const {
|
|
width,
|
|
height,
|
|
translateX = 0,
|
|
translateY = 0,
|
|
scale = 1,
|
|
rotation = 0,
|
|
alpha = 1,
|
|
} = options;
|
|
drawContainedSource(context, image, image.width, image.height, {
|
|
width,
|
|
height,
|
|
translateX,
|
|
translateY,
|
|
scale,
|
|
rotation,
|
|
alpha,
|
|
});
|
|
}
|
|
|
|
export async function buildVisualCandidatesFromSource(source: string) {
|
|
const image = await loadImageFromSource(source);
|
|
const variants: Array<{
|
|
id: string;
|
|
label: string;
|
|
scale: number;
|
|
translateY: number;
|
|
tint?: string;
|
|
}> = [
|
|
{ id: 'balanced', label: '平衡构图', scale: 1, translateY: 0 },
|
|
{ id: 'closer', label: '主体更近', scale: 1.08, translateY: 18 },
|
|
{
|
|
id: 'lighter',
|
|
label: '轻提主体',
|
|
scale: 0.96,
|
|
translateY: -22,
|
|
tint: 'rgba(16, 185, 129, 0.08)',
|
|
},
|
|
];
|
|
|
|
return variants.map((variant) => {
|
|
const { canvas, context } = createCanvas(
|
|
MASTER_VISUAL_WIDTH,
|
|
MASTER_VISUAL_HEIGHT,
|
|
);
|
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
|
drawContainedImage(context, image, {
|
|
width: canvas.width * 0.82,
|
|
height: canvas.height * 0.86,
|
|
translateY: variant.translateY,
|
|
scale: variant.scale,
|
|
});
|
|
|
|
if (variant.tint) {
|
|
context.save();
|
|
context.globalCompositeOperation = 'source-atop';
|
|
context.fillStyle = variant.tint;
|
|
context.fillRect(0, 0, canvas.width, canvas.height);
|
|
context.restore();
|
|
}
|
|
return {
|
|
id: variant.id,
|
|
label: variant.label,
|
|
dataUrl: canvas.toDataURL('image/png'),
|
|
width: canvas.width,
|
|
height: canvas.height,
|
|
} satisfies DraftVisualCandidate;
|
|
});
|
|
}
|
|
|
|
function drawShadow(
|
|
context: CanvasRenderingContext2D,
|
|
width: number,
|
|
height: number,
|
|
pose: PoseTransform,
|
|
) {
|
|
context.save();
|
|
context.fillStyle = 'rgba(0, 0, 0, 0.2)';
|
|
context.beginPath();
|
|
context.ellipse(
|
|
width / 2 + pose.offsetX * 0.15,
|
|
height * 0.92 + pose.offsetY * 0.05,
|
|
width * 0.18,
|
|
height * 0.04,
|
|
0,
|
|
0,
|
|
Math.PI * 2,
|
|
);
|
|
context.fill();
|
|
context.restore();
|
|
}
|
|
|
|
function drawTintOverlay(
|
|
context: CanvasRenderingContext2D,
|
|
tintColor: string,
|
|
width: number,
|
|
height: number,
|
|
) {
|
|
context.save();
|
|
context.globalCompositeOperation = 'source-atop';
|
|
context.fillStyle = tintColor;
|
|
context.fillRect(0, 0, width, height);
|
|
context.restore();
|
|
}
|
|
|
|
function renderPoseFrame(image: HTMLImageElement, pose: PoseTransform) {
|
|
const { canvas, context } = createCanvas(
|
|
GENERATED_FRAME_WIDTH,
|
|
GENERATED_FRAME_HEIGHT,
|
|
);
|
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
|
drawShadow(context, canvas.width, canvas.height, pose);
|
|
|
|
const naturalAspect = image.width / image.height;
|
|
const baseHeight = canvas.height * 0.82;
|
|
const drawWidth = baseHeight * naturalAspect * pose.scaleX;
|
|
const drawHeight = baseHeight * pose.scaleY;
|
|
const bottomY = canvas.height * 0.9 + pose.offsetY;
|
|
const centerX = canvas.width / 2 + pose.offsetX;
|
|
|
|
const drawSprite = (alpha: number, offsetX: number) => {
|
|
context.save();
|
|
context.globalAlpha = alpha;
|
|
context.translate(centerX + offsetX, bottomY);
|
|
context.rotate(pose.rotation);
|
|
context.drawImage(
|
|
image,
|
|
-drawWidth / 2,
|
|
-drawHeight,
|
|
drawWidth,
|
|
drawHeight,
|
|
);
|
|
context.restore();
|
|
};
|
|
|
|
if (pose.afterImage) {
|
|
drawSprite(0.18, -18);
|
|
drawSprite(0.1, -28);
|
|
}
|
|
|
|
drawSprite(pose.alpha ?? 1, 0);
|
|
|
|
if (pose.tintColor) {
|
|
drawTintOverlay(context, pose.tintColor, canvas.width, canvas.height);
|
|
}
|
|
|
|
return canvas.toDataURL('image/png');
|
|
}
|
|
|
|
export async function buildAnimationClipFromMaster(
|
|
masterSource: string,
|
|
animation: AnimationState,
|
|
) {
|
|
const image = await loadImageFromSource(masterSource);
|
|
const template = ACTION_TEMPLATES[animation];
|
|
const frames = Array.from({ length: template.frames }, (_, frameIndex) => {
|
|
const progress =
|
|
template.frames <= 1 ? 0 : frameIndex / Math.max(1, template.frames - 1);
|
|
return renderPoseFrame(
|
|
image,
|
|
template.poseAt(progress, frameIndex, template.frames),
|
|
);
|
|
});
|
|
|
|
return {
|
|
animation,
|
|
frames,
|
|
fps: template.fps,
|
|
loop: template.loop,
|
|
frameWidth: GENERATED_FRAME_WIDTH,
|
|
frameHeight: GENERATED_FRAME_HEIGHT,
|
|
} satisfies DraftAnimationClip;
|
|
}
|
|
|
|
function applyGreenScreenAlpha(
|
|
context: CanvasRenderingContext2D,
|
|
width: number,
|
|
height: number,
|
|
) {
|
|
const imageData = context.getImageData(0, 0, width, height);
|
|
removeBackgroundFromRgba(imageData.data, width, height);
|
|
|
|
context.putImageData(imageData, 0, 0);
|
|
}
|
|
|
|
async function normalizeFrameSourceToDataUrl(
|
|
frameSource: string,
|
|
options: {
|
|
frameWidth: number;
|
|
frameHeight: number;
|
|
applyChromaKey: boolean;
|
|
},
|
|
) {
|
|
const image = await loadImageFromSource(frameSource);
|
|
const { canvas, context } = createCanvas(
|
|
options.frameWidth,
|
|
options.frameHeight,
|
|
);
|
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
|
drawContainedImage(context, image, {
|
|
width: canvas.width,
|
|
height: canvas.height,
|
|
});
|
|
|
|
if (options.applyChromaKey) {
|
|
applyGreenScreenAlpha(context, canvas.width, canvas.height);
|
|
}
|
|
|
|
return canvas.toDataURL('image/png');
|
|
}
|
|
|
|
export async function normalizeMasterVisualSourceToDataUrl(
|
|
source: string,
|
|
options: {
|
|
applyChromaKey?: boolean;
|
|
} = {},
|
|
) {
|
|
const image = await loadImageFromSource(source);
|
|
const { canvas, context } = createCanvas(
|
|
MASTER_VISUAL_WIDTH,
|
|
MASTER_VISUAL_HEIGHT,
|
|
);
|
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
|
drawContainedImage(context, image, {
|
|
width: canvas.width,
|
|
height: canvas.height,
|
|
});
|
|
|
|
if (options.applyChromaKey !== false) {
|
|
applyGreenScreenAlpha(context, canvas.width, canvas.height);
|
|
}
|
|
|
|
return {
|
|
dataUrl: canvas.toDataURL('image/png'),
|
|
width: canvas.width,
|
|
height: canvas.height,
|
|
};
|
|
}
|
|
|
|
function seekVideo(video: HTMLVideoElement, targetTime: number) {
|
|
return new Promise<void>((resolve, reject) => {
|
|
if (Math.abs(video.currentTime - targetTime) < 0.001) {
|
|
window.requestAnimationFrame(() => resolve());
|
|
return;
|
|
}
|
|
|
|
const handleSeeked = () => {
|
|
cleanup();
|
|
resolve();
|
|
};
|
|
const handleError = () => {
|
|
cleanup();
|
|
reject(new Error('视频定位失败'));
|
|
};
|
|
const cleanup = () => {
|
|
video.removeEventListener('seeked', handleSeeked);
|
|
video.removeEventListener('error', handleError);
|
|
};
|
|
|
|
video.addEventListener('seeked', handleSeeked, { once: true });
|
|
video.addEventListener('error', handleError, { once: true });
|
|
video.currentTime = Math.max(0, targetTime);
|
|
});
|
|
}
|
|
|
|
export async function buildAnimationClipFromImageSources(
|
|
sources: string[],
|
|
options: {
|
|
animation: AnimationState;
|
|
fps: number;
|
|
loop: boolean;
|
|
frameWidth?: number;
|
|
frameHeight?: number;
|
|
applyChromaKey?: boolean;
|
|
},
|
|
) {
|
|
const frameWidth = options.frameWidth ?? GENERATED_FRAME_WIDTH;
|
|
const frameHeight = options.frameHeight ?? GENERATED_FRAME_HEIGHT;
|
|
const frames = await Promise.all(
|
|
sources.map((source) =>
|
|
normalizeFrameSourceToDataUrl(source, {
|
|
frameWidth,
|
|
frameHeight,
|
|
applyChromaKey: options.applyChromaKey ?? false,
|
|
}),
|
|
),
|
|
);
|
|
|
|
return {
|
|
animation: options.animation,
|
|
frames,
|
|
fps: Math.max(1, options.fps),
|
|
loop: options.loop,
|
|
frameWidth,
|
|
frameHeight,
|
|
} satisfies DraftAnimationClip;
|
|
}
|
|
|
|
export async function buildAnimationClipFromVideoSource(
|
|
videoSource: string,
|
|
options: {
|
|
animation: AnimationState;
|
|
fps: number;
|
|
loop: boolean;
|
|
frameCount?: number;
|
|
frameWidth?: number;
|
|
frameHeight?: number;
|
|
applyChromaKey?: boolean;
|
|
sampleStartRatio?: number;
|
|
sampleEndRatio?: number;
|
|
},
|
|
) {
|
|
const video = await loadVideoFromSource(videoSource);
|
|
const frameWidth = options.frameWidth ?? GENERATED_FRAME_WIDTH;
|
|
const frameHeight = options.frameHeight ?? GENERATED_FRAME_HEIGHT;
|
|
const duration =
|
|
Number.isFinite(video.duration) && video.duration > 0 ? video.duration : 1;
|
|
const derivedFrameCount = Math.max(
|
|
2,
|
|
options.frameCount ?? Math.round(duration * Math.max(1, options.fps)),
|
|
);
|
|
const sampleStartRatio = Math.min(
|
|
0.85,
|
|
Math.max(0, options.sampleStartRatio ?? 0),
|
|
);
|
|
const sampleEndRatio = Math.min(
|
|
1,
|
|
Math.max(sampleStartRatio + 0.05, options.sampleEndRatio ?? 1),
|
|
);
|
|
const sampleWindowDuration = duration * (sampleEndRatio - sampleStartRatio);
|
|
const { canvas, context } = createCanvas(frameWidth, frameHeight);
|
|
const frames: string[] = [];
|
|
|
|
for (let frameIndex = 0; frameIndex < derivedFrameCount; frameIndex += 1) {
|
|
const progress = options.loop
|
|
? frameIndex / derivedFrameCount
|
|
: frameIndex / Math.max(1, derivedFrameCount - 1);
|
|
const targetTime = Math.min(
|
|
duration - 0.001,
|
|
duration * sampleStartRatio + sampleWindowDuration * progress,
|
|
);
|
|
|
|
await seekVideo(video, targetTime);
|
|
|
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
|
drawContainedSource(context, video, video.videoWidth, video.videoHeight, {
|
|
width: canvas.width,
|
|
height: canvas.height,
|
|
});
|
|
|
|
if (options.applyChromaKey) {
|
|
applyGreenScreenAlpha(context, canvas.width, canvas.height);
|
|
}
|
|
|
|
frames.push(canvas.toDataURL('image/png'));
|
|
}
|
|
|
|
return {
|
|
animation: options.animation,
|
|
frames,
|
|
fps: Math.max(1, options.fps),
|
|
loop: options.loop,
|
|
frameWidth,
|
|
frameHeight,
|
|
previewVideoPath: videoSource,
|
|
} satisfies DraftAnimationClip;
|
|
}
|
|
|
|
async function buildReferenceVideoFromFrameSources(
|
|
frameSources: string[],
|
|
options: {
|
|
fps?: number;
|
|
width?: number;
|
|
height?: number;
|
|
repeatLoops?: number;
|
|
} = {},
|
|
) {
|
|
if (typeof MediaRecorder === 'undefined') {
|
|
throw new Error('当前浏览器不支持 MediaRecorder，无法生成参考视频。');
|
|
}
|
|
|
|
const images = await Promise.all(
|
|
frameSources.map((frameSource) => loadImageFromSource(frameSource)),
|
|
);
|
|
const width = options.width ?? GENERATED_FRAME_WIDTH;
|
|
const height = options.height ?? GENERATED_FRAME_HEIGHT;
|
|
const fps = Math.max(1, options.fps ?? 8);
|
|
const repeatLoops = Math.max(1, options.repeatLoops ?? 2);
|
|
const { canvas, context } = createCanvas(width, height);
|
|
const stream = canvas.captureStream(fps);
|
|
const mimeType = pickRecordMimeType();
|
|
const recorder = mimeType
|
|
? new MediaRecorder(stream, { mimeType })
|
|
: new MediaRecorder(stream);
|
|
const chunks: BlobPart[] = [];
|
|
|
|
recorder.ondataavailable = (event) => {
|
|
if (event.data.size > 0) {
|
|
chunks.push(event.data);
|
|
}
|
|
};
|
|
|
|
const stopPromise = new Promise<Blob>((resolve) => {
|
|
recorder.onstop = () => {
|
|
resolve(new Blob(chunks, { type: recorder.mimeType || 'video/webm' }));
|
|
};
|
|
});
|
|
|
|
recorder.start();
|
|
|
|
for (let loopIndex = 0; loopIndex < repeatLoops; loopIndex += 1) {
|
|
for (const image of images) {
|
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
|
drawContainedImage(context, image, {
|
|
width: canvas.width,
|
|
height: canvas.height,
|
|
});
|
|
await waitFrame(Math.max(40, Math.round(1000 / fps)));
|
|
}
|
|
}
|
|
|
|
await waitFrame(80);
|
|
recorder.stop();
|
|
const blob = await stopPromise;
|
|
return blobToDataUrl(blob);
|
|
}
|
|
|
|
export async function buildReferenceVideoFromMasterAnimation(
|
|
masterSource: string,
|
|
animation: AnimationState,
|
|
options: {
|
|
fps?: number;
|
|
repeatLoops?: number;
|
|
width?: number;
|
|
height?: number;
|
|
} = {},
|
|
) {
|
|
const clip = await buildAnimationClipFromMaster(masterSource, animation);
|
|
return buildReferenceVideoFromFrameSources(clip.frames, {
|
|
fps: options.fps ?? clip.fps,
|
|
repeatLoops: options.repeatLoops ?? 2,
|
|
width: options.width ?? clip.frameWidth,
|
|
height: options.height ?? clip.frameHeight,
|
|
});
|
|
}
|
|
|
|
function getCharacterAnimationConfig(
|
|
character: Character,
|
|
animation: AnimationState,
|
|
) {
|
|
return (
|
|
character.animationMap?.[animation] ??
|
|
DEFAULT_CHARACTER_ANIMATIONS[animation] ??
|
|
character.animationMap?.[AnimationState.IDLE] ??
|
|
DEFAULT_CHARACTER_ANIMATIONS[AnimationState.IDLE]
|
|
);
|
|
}
|
|
|
|
function getCharacterAnimationFrameSources(
|
|
character: Character,
|
|
animation: AnimationState,
|
|
) {
|
|
const config = getCharacterAnimationConfig(character, animation);
|
|
const startFrame = config.startFrame || 1;
|
|
const frameCount = Math.max(1, config.frames);
|
|
const normalizedBasePath = config.basePath?.replace(/\/+$/u, '');
|
|
|
|
return Array.from({ length: frameCount }, (_, index) => {
|
|
const frameNumber = String(startFrame + index).padStart(2, '0');
|
|
|
|
if (normalizedBasePath) {
|
|
return config.file
|
|
? `${normalizedBasePath}/${encodeURIComponent(config.file)}`
|
|
: `${normalizedBasePath}/${config.prefix}${frameNumber}.${config.extension ?? 'png'}`;
|
|
}
|
|
|
|
const folder = encodeURIComponent(character.assetFolder);
|
|
const variant = encodeURIComponent(character.assetVariant);
|
|
const animationFolder = encodeURIComponent(config.folder);
|
|
return config.file
|
|
? `/character/${folder}/${variant}/Hero/${animationFolder}/${encodeURIComponent(config.file)}`
|
|
: `/character/${folder}/${variant}/Hero/${animationFolder}/${config.prefix}${frameNumber}.${config.extension ?? 'png'}`;
|
|
});
|
|
}
|
|
|
|
function waitFrame(ms: number) {
|
|
return new Promise((resolve) => {
|
|
window.setTimeout(resolve, ms);
|
|
});
|
|
}
|
|
|
|
function blobToDataUrl(blob: Blob) {
|
|
return new Promise<string>((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.onload = () => resolve(String(reader.result ?? ''));
|
|
reader.onerror = () => reject(reader.error ?? new Error('读取 Blob 失败'));
|
|
reader.readAsDataURL(blob);
|
|
});
|
|
}
|
|
|
|
function pickRecordMimeType() {
|
|
const candidates = [
|
|
'video/webm;codecs=vp9',
|
|
'video/webm;codecs=vp8',
|
|
'video/webm',
|
|
];
|
|
|
|
if (typeof MediaRecorder === 'undefined') {
|
|
return '';
|
|
}
|
|
|
|
return (
|
|
candidates.find((candidate) => MediaRecorder.isTypeSupported(candidate)) ??
|
|
''
|
|
);
|
|
}
|
|
|
|
export async function buildReferenceVideoFromCharacterAnimation(
|
|
character: Character,
|
|
animation: AnimationState,
|
|
options: {
|
|
fps?: number;
|
|
width?: number;
|
|
height?: number;
|
|
repeatLoops?: number;
|
|
} = {},
|
|
) {
|
|
if (typeof MediaRecorder === 'undefined') {
|
|
throw new Error('当前浏览器不支持 MediaRecorder，无法生成内置模板视频。');
|
|
}
|
|
|
|
const frameSources = getCharacterAnimationFrameSources(character, animation);
|
|
const images = await Promise.all(
|
|
frameSources.map((frameSource) => loadImageFromSource(frameSource)),
|
|
);
|
|
const width = options.width ?? GENERATED_FRAME_WIDTH;
|
|
const height = options.height ?? GENERATED_FRAME_HEIGHT;
|
|
const fps = Math.max(1, options.fps ?? 8);
|
|
const repeatLoops = Math.max(1, options.repeatLoops ?? 2);
|
|
const { canvas, context } = createCanvas(width, height);
|
|
const stream = canvas.captureStream(fps);
|
|
const mimeType = pickRecordMimeType();
|
|
const recorder = mimeType
|
|
? new MediaRecorder(stream, { mimeType })
|
|
: new MediaRecorder(stream);
|
|
const chunks: BlobPart[] = [];
|
|
|
|
recorder.ondataavailable = (event) => {
|
|
if (event.data.size > 0) {
|
|
chunks.push(event.data);
|
|
}
|
|
};
|
|
|
|
const stopPromise = new Promise<Blob>((resolve) => {
|
|
recorder.onstop = () => {
|
|
resolve(new Blob(chunks, { type: recorder.mimeType || 'video/webm' }));
|
|
};
|
|
});
|
|
|
|
recorder.start();
|
|
|
|
for (let loopIndex = 0; loopIndex < repeatLoops; loopIndex += 1) {
|
|
for (const image of images) {
|
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
|
drawContainedImage(context, image, {
|
|
width: canvas.width,
|
|
height: canvas.height,
|
|
});
|
|
await waitFrame(Math.max(40, Math.round(1000 / fps)));
|
|
}
|
|
}
|
|
|
|
await waitFrame(80);
|
|
recorder.stop();
|
|
const blob = await stopPromise;
|
|
return blobToDataUrl(blob);
|
|
}
|