yunqueai/ai_game
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(client): 前端场景和HTTP工具优化

Browse Source
This commit is contained in:
liangguodong
2026-03-13 17:48:22 +08:00
parent 0da6f210a6
commit 5f94129236
4 changed files with 272 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
client/js/scenes/StoryScene.js
View File

@@ -2,6 +2,7 @@
* 故事播放场景 - 视觉小说风格
*/
import BaseScene from './BaseScene';
import { getNodeBackground, getNodeCharacter, getDraftNodeBackground, getStaticUrl } from '../utils/http';
export default class StoryScene extends BaseScene {
constructor(main, params) {
@@ -31,6 +32,11 @@ export default class StoryScene extends BaseScene {
// 场景图相关
this.sceneImage = null;
this.sceneColors = this.generateSceneColors();
// 节点图片相关
this.nodeBackgroundImages = {}; // 缓存背景图 {nodeKey: Image}
this.nodeCharacterImages = {}; // 缓存立绘 {nodeKey: Image}
this.currentBackgroundImg = null;
this.currentCharacterImg = null;
// AI改写相关
this.isAIRewriting = false;
// 剧情回顾模式
@@ -638,6 +644,77 @@ export default class StoryScene extends BaseScene {
// 重置滚动
this.textScrollY = 0;
this.maxScrollY = 0;
// 加载当前节点的背景图和立绘
this.loadNodeImages();
}
// 加载当前节点的背景图和立绘
loadNodeImages() {
if (!this.currentNode || !this.storyId) return;
const nodeKey = this.currentNode.nodeKey || this.main.storyManager.currentNodeKey;
if (!nodeKey) return;
// 判断是否是草稿模式
const isDraftMode = !!this.draftId;
// 获取背景图 URL
let bgUrl;
if (isDraftMode) {
// 草稿模式：优先使用节点中的 background_url（需要转成完整URL），否则用草稿路径
if (this.currentNode.background_url) {
bgUrl = getStaticUrl(this.currentNode.background_url);
} else {
bgUrl = getDraftNodeBackground(this.storyId, this.draftId, nodeKey);
}
} else {
// 普通模式：使用故事节点路径
bgUrl = getNodeBackground(this.storyId, nodeKey);
}
console.log('[loadNodeImages] nodeKey:', nodeKey, ', isDraftMode:', isDraftMode, ', bgUrl:', bgUrl);
// 加载背景图
if (!this.nodeBackgroundImages[nodeKey]) {
const bgImg = wx.createImage();
bgImg.onload = () => {
this.nodeBackgroundImages[nodeKey] = bgImg;
if (this.main.storyManager.currentNodeKey === nodeKey || isDraftMode) {
this.currentBackgroundImg = bgImg;
}
};
bgImg.onerror = () => {
// 图片加载失败，使用默认渐变
this.nodeBackgroundImages[nodeKey] = null;
};
bgImg.src = bgUrl;
} else {
this.currentBackgroundImg = this.nodeBackgroundImages[nodeKey];
}
// 加载角色立绘（只在后端返回了 character_image 时才加载）
if (!isDraftMode && this.currentNode.character_image) {
if (!this.nodeCharacterImages[nodeKey]) {
const charImg = wx.createImage();
charImg.onload = () => {
this.nodeCharacterImages[nodeKey] = charImg;
if (this.main.storyManager.currentNodeKey === nodeKey) {
this.currentCharacterImg = charImg;
}
};
charImg.onerror = () => {
// 图片加载失败，不显示立绘
this.nodeCharacterImages[nodeKey] = null;
};
// 优先使用后端返回的路径，否则用默认路径
charImg.src = this.currentNode.character_image.startsWith('http')
? this.currentNode.character_image
: getStaticUrl(this.currentNode.character_image);
} else {
this.currentCharacterImg = this.nodeCharacterImages[nodeKey];
}
}
}
update() {
@@ -695,15 +772,45 @@ export default class StoryScene extends BaseScene {
}
renderSceneBackground(ctx) {
// 场景区域（上方45%）
// 场景区域（上方42%）
const sceneHeight = this.screenHeight * 0.42;
// 渐变背景
const gradient = ctx.createLinearGradient(0, 0, 0, sceneHeight);
gradient.addColorStop(0, this.sceneColors.bg1);
gradient.addColorStop(1, this.sceneColors.bg2);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, this.screenWidth, sceneHeight);
// 优先显示背景图
if (this.currentBackgroundImg) {
// 绘制背景图（等比例覆盖）
const img = this.currentBackgroundImg;
const imgRatio = img.width / img.height;
const areaRatio = this.screenWidth / sceneHeight;
let drawW, drawH, drawX, drawY;
if (imgRatio > areaRatio) {
// 图片更宽，按高度适配
drawH = sceneHeight;
drawW = drawH * imgRatio;
drawX = (this.screenWidth - drawW) / 2;
drawY = 0;
} else {
// 图片更高，按宽度适配
drawW = this.screenWidth;
drawH = drawW / imgRatio;
drawX = 0;
drawY = (sceneHeight - drawH) / 2;
}
ctx.save();
ctx.beginPath();
ctx.rect(0, 0, this.screenWidth, sceneHeight);
ctx.clip();
ctx.drawImage(img, drawX, drawY, drawW, drawH);
ctx.restore();
} else {
// 无背景图，使用渐变背景
const gradient = ctx.createLinearGradient(0, 0, 0, sceneHeight);
gradient.addColorStop(0, this.sceneColors.bg1);
gradient.addColorStop(1, this.sceneColors.bg2);
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, this.screenWidth, sceneHeight);
}
// 底部渐变过渡到对话框
const fadeGradient = ctx.createLinearGradient(0, sceneHeight - 60, 0, sceneHeight);
@@ -721,21 +828,34 @@ export default class StoryScene extends BaseScene {
const sceneHeight = this.screenHeight * 0.42;
const centerX = this.screenWidth / 2;
// 场景氛围光效
const glowGradient = ctx.createRadialGradient(centerX, sceneHeight * 0.5, 0, centerX, sceneHeight * 0.5, 200);
glowGradient.addColorStop(0, this.sceneColors.accent + '30');
glowGradient.addColorStop(1, 'transparent');
ctx.fillStyle = glowGradient;
ctx.fillRect(0, 0, this.screenWidth, sceneHeight);
// 绘制角色立绘（如果有）
if (this.currentCharacterImg) {
const img = this.currentCharacterImg;
// 立绘高度占场景区域80%，保持比例
const charH = sceneHeight * 0.8;
const charW = charH * (img.width / img.height);
const charX = centerX - charW / 2;
const charY = sceneHeight - charH;
ctx.drawImage(img, charX, charY, charW, charH);
} else {
// 无立绘时显示装饰效果
// 场景氛围光效
const glowGradient = ctx.createRadialGradient(centerX, sceneHeight * 0.5, 0, centerX, sceneHeight * 0.5, 200);
glowGradient.addColorStop(0, this.sceneColors.accent + '30');
glowGradient.addColorStop(1, 'transparent');
ctx.fillStyle = glowGradient;
ctx.fillRect(0, 0, this.screenWidth, sceneHeight);
// 装饰粒子
ctx.fillStyle = this.sceneColors.accent + '40';
const particles = [[50, 100], [120, 180], [200, 80], [280, 150], [320, 60], [80, 250], [250, 220]];
particles.forEach(([x, y]) => {
ctx.beginPath();
ctx.arc(x, y, 2, 0, Math.PI * 2);
ctx.fill();
});
// 装饰粒子
ctx.fillStyle = this.sceneColors.accent + '40';
const particles = [[50, 100], [120, 180], [200, 80], [280, 150], [320, 60], [80, 250], [250, 220]];
particles.forEach(([x, y]) => {
ctx.beginPath();
ctx.arc(x, y, 2, 0, Math.PI * 2);
ctx.fill();
});
}
// 场景提示文字（中央）
ctx.fillStyle = 'rgba(255,255,255,0.15)';