284 lines
11 KiB
JavaScript
284 lines
11 KiB
JavaScript
// ==========================================
|
|
// Spine 3.8 渲染逻辑 (Timeline + DebugDraw)
|
|
// ==========================================
|
|
|
|
var canvas, gl, shader, batcher, mvp, skeletonRenderer;
|
|
var skeleton, animationState;
|
|
var lastTime = Date.now();
|
|
var camX=0, camY=0, camZoom=1.0;
|
|
// var rendererRequestId = 0; // 移除局部变量
|
|
|
|
function startSpine38(canvasElement, files) {
|
|
// 强制停止之前的循环 (双重保险，防止 index.html 没有清理干净)
|
|
if(window.viewerConfig.animRequestId) cancelAnimationFrame(window.viewerConfig.animRequestId);
|
|
|
|
canvas = canvasElement;
|
|
// 关键修改：开启 alpha 通道，并设置 premultipliedAlpha: false
|
|
// 这告诉浏览器：Canvas 的内容是 Straight Alpha 的（未预乘）。
|
|
// 即使我们画的是 PMA 数据，如果浏览器认为它是 PMA 并在合成时不再处理，就会导致透明边缘黑边。
|
|
// 这里设为 false，是为了让浏览器在合成到网页背景时，帮我们处理好边缘混合。
|
|
gl = canvas.getContext("webgl", { alpha: true, preserveDrawingBuffer: true, premultipliedAlpha: false });
|
|
|
|
// 如果 Context 丢失 (因为 Canvas 被移除)，直接返回
|
|
if(!gl) return;
|
|
|
|
// === 关键：全局禁用 WebGL 自动预乘 ===
|
|
// 我们的纹理已经是 PMA 的了，所以不能让 WebGL 再乘一次。
|
|
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
|
|
|
|
// 移除之前的 gl.blendFunc Hack，回归标准流程
|
|
|
|
shader = spine.webgl.Shader.newTwoColoredTextured(gl);
|
|
batcher = new spine.webgl.PolygonBatcher(gl);
|
|
mvp = new spine.webgl.Matrix4();
|
|
skeletonRenderer = new spine.webgl.SkeletonRenderer(gl);
|
|
|
|
// 恢复 PMA 模式 (Normal 混合无黑边)
|
|
skeletonRenderer.premultipliedAlpha = true;
|
|
addPmaToggle38();
|
|
loadFiles38(files);
|
|
}
|
|
|
|
function addPmaToggle38() {
|
|
const chk = document.getElementById('chk-pma');
|
|
if (chk) {
|
|
// 恢复默认勾选
|
|
chk.checked = true;
|
|
window.viewerConfig.pmaEnabled = true;
|
|
|
|
chk.onchange = (e) => {
|
|
window.viewerConfig.pmaEnabled = e.target.checked;
|
|
};
|
|
}
|
|
}
|
|
|
|
async function loadFiles38(files) {
|
|
let map = { atlas: null, png: null, main: null, type: null };
|
|
for(let f of files) {
|
|
let name = f.name.toLowerCase();
|
|
if(name.endsWith('.atlas') || name.endsWith('.atlas.txt')) map.atlas = f;
|
|
else if(name.endsWith('.png') || name.endsWith('.jpg')) map.png = f;
|
|
else if(name.endsWith('.skel') || name.endsWith('.skel.bytes')) { map.main = f; map.type = 'binary'; }
|
|
else if(name.endsWith('.json') || name.endsWith('.json.txt')) { map.main = f; map.type = 'json'; }
|
|
}
|
|
|
|
try {
|
|
const atlasText = await readFileAsText(map.atlas);
|
|
const imgUrl = await readFileAsDataURL(map.png);
|
|
|
|
const img = new Image();
|
|
img.onload = async () => {
|
|
// 确保不预乘 (防止黑边)
|
|
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
|
|
|
|
const texture = new spine.webgl.GLTexture(gl, img);
|
|
const spineAtlas = new spine.TextureAtlas(atlasText, (path) => texture);
|
|
const atlasLoader = new spine.AtlasAttachmentLoader(spineAtlas);
|
|
|
|
let skeletonData;
|
|
if(map.type === 'binary') {
|
|
const buffer = await readFileAsArrayBuffer(map.main);
|
|
const skeletonBinary = new spine.SkeletonBinary(atlasLoader);
|
|
skeletonBinary.scale = 1.0;
|
|
skeletonData = skeletonBinary.readSkeletonData(new Uint8Array(buffer));
|
|
} else {
|
|
const text = await readFileAsText(map.main);
|
|
const skeletonJson = new spine.SkeletonJson(atlasLoader);
|
|
skeletonJson.scale = 1.0;
|
|
skeletonData = skeletonJson.readSkeletonData(JSON.parse(text));
|
|
}
|
|
|
|
setupSkeleton38(skeletonData);
|
|
|
|
document.getElementById('ui').style.display = 'block';
|
|
document.getElementById('controls').style.display = 'flex';
|
|
document.getElementById('version-label').innerText = "Spine 3.8 (Binary/JSON)";
|
|
document.getElementById('version-label').style.color = "#ff0055";
|
|
|
|
if(window.viewerConfig.animRequestId) cancelAnimationFrame(window.viewerConfig.animRequestId);
|
|
render38();
|
|
};
|
|
img.src = imgUrl;
|
|
|
|
} catch(e) {
|
|
alert("3.8 加载错误: " + e);
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
function setupSkeleton38(skeletonData) {
|
|
skeleton = new spine.Skeleton(skeletonData);
|
|
skeleton.setToSetupPose();
|
|
skeleton.updateWorldTransform();
|
|
skeleton.x = 0; skeleton.y = 0;
|
|
|
|
// 暴露实例供导出使用
|
|
window.spineInstance = { skeleton: skeleton, state: animationState, gl: gl };
|
|
|
|
var stateData = new spine.AnimationStateData(skeleton.data);
|
|
animationState = new spine.AnimationState(stateData);
|
|
|
|
const animSelect = document.getElementById('anim-select');
|
|
animSelect.innerHTML = "";
|
|
skeleton.data.animations.forEach(a => {
|
|
const opt = document.createElement('option');
|
|
opt.value = a.name; opt.text = a.name; animSelect.appendChild(opt);
|
|
});
|
|
if(skeleton.data.animations.length > 0) animationState.setAnimation(0, skeleton.data.animations[0].name, true);
|
|
|
|
const skinSelect = document.getElementById('skin-select');
|
|
skinSelect.innerHTML = "";
|
|
skeleton.data.skins.forEach(s => {
|
|
const opt = document.createElement('option');
|
|
opt.value = s.name; opt.text = s.name; skinSelect.appendChild(opt);
|
|
});
|
|
if(skeleton.data.defaultSkin) skinSelect.value = skeleton.data.defaultSkin.name;
|
|
|
|
animSelect.onchange = () => animationState.setAnimation(0, animSelect.value, true);
|
|
skinSelect.onchange = () => { skeleton.setSkinByName(skinSelect.value); skeleton.setSlotsToSetupPose(); };
|
|
|
|
bindControls38();
|
|
updateControls38();
|
|
}
|
|
|
|
function render38() {
|
|
// 将 requestId 存储到全局配置中，以便其他地方可以取消
|
|
window.viewerConfig.animRequestId = requestAnimationFrame(render38);
|
|
|
|
// 检查 canvas 是否还存在于 DOM 中 (防止僵尸循环)
|
|
if(!canvas.parentElement) {
|
|
cancelAnimationFrame(window.viewerConfig.animRequestId);
|
|
return;
|
|
}
|
|
|
|
let now = Date.now();
|
|
const targetFps = window.viewerConfig.targetFps || 30;
|
|
const interval = 1000 / targetFps;
|
|
const elapsed = now - lastTime;
|
|
|
|
if (elapsed < interval) return;
|
|
|
|
lastTime = now - (elapsed % interval);
|
|
let delta = elapsed / 1000;
|
|
|
|
// 应用倍速
|
|
delta *= (window.viewerConfig.speed || 1.0);
|
|
|
|
// === 导出模式判断 ===
|
|
const isExporting = window.viewerConfig.isExporting;
|
|
|
|
if (!isExporting) {
|
|
// 只有非导出模式下才跟随窗口大小
|
|
if(canvas.width !== window.innerWidth) canvas.width = window.innerWidth;
|
|
if(canvas.height !== window.innerHeight) canvas.height = window.innerHeight;
|
|
}
|
|
|
|
let w = canvas.width;
|
|
let h = canvas.height;
|
|
gl.viewport(0, 0, w, h);
|
|
|
|
if (isExporting) {
|
|
gl.clearColor(0, 0, 0, 0); // 强制全透明
|
|
} else {
|
|
const bg = window.viewerConfig ? window.viewerConfig.bgColor : [0.2, 0.2, 0.2, 1];
|
|
gl.clearColor(bg[0], bg[1], bg[2], bg[3]);
|
|
}
|
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
|
|
// === 关键修复：同步 PMA 设置 ===
|
|
// 确保每一帧都从全局配置读取 PMA 状态，并应用到 skeletonRenderer
|
|
if (window.viewerConfig) {
|
|
skeletonRenderer.premultipliedAlpha = window.viewerConfig.pmaEnabled;
|
|
}
|
|
|
|
if (skeleton && animationState) {
|
|
const ctrl = window.animControl;
|
|
let track = animationState.tracks[0];
|
|
|
|
if (track) {
|
|
if (ctrl) ctrl.updateUI(track.trackTime, track.animation.duration);
|
|
if (ctrl && ctrl.isScrubbing && ctrl.targetTime >= 0) {
|
|
track.trackTime = ctrl.targetTime;
|
|
}
|
|
else if (ctrl && !ctrl.isPlaying) {
|
|
animationState.update(0);
|
|
}
|
|
else {
|
|
animationState.update(delta);
|
|
}
|
|
} else {
|
|
animationState.update(delta);
|
|
}
|
|
|
|
animationState.apply(skeleton);
|
|
skeleton.updateWorldTransform();
|
|
|
|
shader.bind();
|
|
mvp.ortho2d(camX - w/2/camZoom, camY - h/2/camZoom, w/camZoom, h/camZoom);
|
|
shader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, mvp.values);
|
|
shader.setUniformi(spine.webgl.Shader.SAMPLER, 0);
|
|
|
|
// 关键修复：不要手动调用 gl.blendFunc，因为 skeletonRenderer.draw 会根据 Slot 模式自己设置
|
|
// 我们只需要确保 skeletonRenderer.premultipliedAlpha 是对的
|
|
if (window.viewerConfig) {
|
|
skeletonRenderer.premultipliedAlpha = window.viewerConfig.pmaEnabled;
|
|
}
|
|
|
|
batcher.begin(shader);
|
|
skeletonRenderer.draw(batcher, skeleton);
|
|
batcher.end();
|
|
shader.unbind();
|
|
|
|
// === 绘制骨骼调试线 (导出时不绘制) ===
|
|
if(!isExporting) {
|
|
if(window.debugRenderer && window.viewerConfig.showBones) {
|
|
window.debugRenderer.drawBones(skeleton, camX, camY, camZoom, h);
|
|
} else if(window.debugRenderer) {
|
|
window.debugRenderer.drawBones(null, 0,0,1,0); // 清空
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function updateControls38() {
|
|
document.getElementById('posX').value = skeleton.x;
|
|
document.getElementById('posY').value = skeleton.y;
|
|
}
|
|
|
|
function bindControls38() {
|
|
const inputX = document.getElementById('posX');
|
|
const inputY = document.getElementById('posY');
|
|
inputX.oninput = () => { if(skeleton) skeleton.x = parseFloat(inputX.value); };
|
|
inputY.oninput = () => { if(skeleton) skeleton.y = parseFloat(inputY.value); };
|
|
|
|
window.resetView = function() {
|
|
skeleton.x = 0; skeleton.y = 0;
|
|
camX=0; camY=0; camZoom=1.0;
|
|
updateControls38();
|
|
};
|
|
|
|
let isDragging=false, startX, startY, isRightDrag=false;
|
|
canvas.oncontextmenu = e => e.preventDefault();
|
|
canvas.onmousedown = e => {
|
|
if(e.button === 2) isRightDrag = true; else isDragging = true;
|
|
startX = e.clientX; startY = e.clientY;
|
|
};
|
|
window.onmouseup = () => { isDragging=false; isRightDrag=false; };
|
|
window.onmousemove = e => {
|
|
if(isDragging) {
|
|
camX -= (e.clientX - startX) / camZoom;
|
|
camY += (e.clientY - startY) / camZoom;
|
|
startX = e.clientX; startY = e.clientY;
|
|
} else if(isRightDrag) {
|
|
let dy = e.clientY - startY;
|
|
let newZoom = camZoom * (1 + dy * 0.01);
|
|
if(newZoom > 0.1 && newZoom < 10) camZoom = newZoom;
|
|
startY = e.clientY;
|
|
}
|
|
};
|
|
canvas.onwheel = e => {
|
|
let newZoom = camZoom * (e.deltaY > 0 ? 0.9 : 1.1);
|
|
if(newZoom > 0.1 && newZoom < 10) camZoom = newZoom;
|
|
};
|
|
}
|