xionglijia/18xchat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update 音效 - 主题图

Browse Source
This commit is contained in:
xionglijia
2025-09-11 18:49:27 +08:00
parent 0f9690b0e1
commit 49f4d21c56
27 changed files with 1130 additions and 983 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/Scripts/Sub/UI/SceneBgVideoLayer.ts
+109 -163
View File
@@ -25,6 +25,13 @@ export class SceneBgVideoLayer extends li_BaseView {
private isPlaying: boolean = false;
private currentVideoData: any = null;
// 待处理的视频配置（用于在视频准备好后应用）
private pendingVideoConfig: {
size?: { width: number; height: number } | Size;
position?: { x: number; y: number; z?: number } | Vec3;
scale?: number | Vec3;
} | null = null;
//----重写父类接口---------------------------------------
onLoadCT() {
Utils.parseNode(this.node, this._nodeTab);
@@ -93,11 +100,18 @@ export class SceneBgVideoLayer extends li_BaseView {
position: options?.position,
};
// 先停止当前视频
// 先停止当前视频并清理状态
if (this.isPlaying) {
this.pause();
this.stop();
}
// 存储待处理的配置，在视频准备好后应用
this.pendingVideoConfig = {
size: config.size,
position: config.position,
scale: options?.scale
};
// 加载本地视频资源
ResManager.I.changeBundleVideo(
this.videoPlayer,
@@ -113,138 +127,10 @@ export class SceneBgVideoLayer extends li_BaseView {
console.log("SceneBgVideoLayer: 设置视频锚点为 (0.5, 0.5)");
}
// 应用位置设置（先尝试本地坐标，再尝试世界坐标）
if (config.position) {
const pos = config.position;
let targetWorldPos: Vec3;
if (pos instanceof Vec3) {
targetWorldPos = pos;
} else {
targetWorldPos = new Vec3(pos.x, pos.y, pos.z || 0);
}
// 获取 videoPlayer 的父节点信息
const parent = this.videoPlayer.node.parent;
if (parent) {
const parentWorldPos = parent.getWorldPosition();
const parentWorldScale = parent.getWorldScale();
console.log(`SceneBgVideoLayer: VideoPlayer 父节点世界位置: (${parentWorldPos.x}, ${parentWorldPos.y}, ${parentWorldPos.z})`);
console.log(`SceneBgVideoLayer: VideoPlayer 父节点世界缩放: (${parentWorldScale.x}, ${parentWorldScale.y}, ${parentWorldScale.z})`);
// 尝试方法1：计算相对于父节点的本地位置
const localPos = new Vec3();
localPos.x = (targetWorldPos.x - parentWorldPos.x) / parentWorldScale.x;
localPos.y = (targetWorldPos.y - parentWorldPos.y) / parentWorldScale.y;
localPos.z = (targetWorldPos.z - parentWorldPos.z) / parentWorldScale.z;
this.videoPlayer.node.setPosition(localPos);
console.log(`SceneBgVideoLayer: 设置本地位置: (${localPos.x.toFixed(2)}, ${localPos.y.toFixed(2)}, ${localPos.z.toFixed(2)})`);
} else {
// 如果没有父节点，直接使用世界坐标
this.videoPlayer.node.setWorldPosition(targetWorldPos);
console.log(`SceneBgVideoLayer: 无父节点，使用世界坐标: (${targetWorldPos.x}, ${targetWorldPos.y}, ${targetWorldPos.z})`);
}
// 验证位置是否设置正确
const actualWorldPos = this.videoPlayer.node.getWorldPosition();
const actualLocalPos = this.videoPlayer.node.getPosition();
console.log(`SceneBgVideoLayer: 目标世界位置: (${targetWorldPos.x}, ${targetWorldPos.y}, ${targetWorldPos.z})`);
console.log(`SceneBgVideoLayer: 实际世界位置: (${actualWorldPos.x}, ${actualWorldPos.y}, ${actualWorldPos.z})`);
console.log(`SceneBgVideoLayer: 实际本地位置: (${actualLocalPos.x.toFixed(2)}, ${actualLocalPos.y.toFixed(2)}, ${actualLocalPos.z.toFixed(2)})`);
}
// 如果传入了目标尺寸，计算并应用缩放
if (config.size && uiTransform) {
// 获取视频的原始尺寸
const videoWidth = uiTransform.contentSize.width;
const videoHeight = uiTransform.contentSize.height;
if (videoWidth > 0 && videoHeight > 0) {
const targetWidth =
config.size instanceof Size
? config.size.width
: config.size.width;
const targetHeight =
config.size instanceof Size
? config.size.height
: config.size.height;
// 计算缩放比例（填满整个区域）
const scaleX = targetWidth / videoWidth;
const scaleY = targetHeight / videoHeight;
const scale = Math.max(scaleX, scaleY);
this.videoPlayer.node.setScale(new Vec3(scale, scale, 1));
console.log(
`SceneBgVideoLayer: 视频原始尺寸: ${videoWidth}x${videoHeight}, 目标尺寸: ${targetWidth}x${targetHeight}`
);
console.log(
`SceneBgVideoLayer: 缩放比例 - X: ${scaleX.toFixed(3)}, Y: ${scaleY.toFixed(3)}, 最终: ${scale.toFixed(3)}`
);
} else {
// 如果视频尺寸还未准备好，延迟重试
this.scheduleOnce(() => {
if (config.size && uiTransform) {
const videoWidth = uiTransform.contentSize.width;
const videoHeight = uiTransform.contentSize.height;
if (videoWidth > 0 && videoHeight > 0) {
const targetWidth =
config.size instanceof Size
? config.size.width
: config.size.width;
const targetHeight =
config.size instanceof Size
? config.size.height
: config.size.height;
const scaleX = targetWidth / videoWidth;
const scaleY = targetHeight / videoHeight;
const scale = Math.max(scaleX, scaleY);
this.videoPlayer.node.setScale(new Vec3(scale, scale, 1));
console.log(
`SceneBgVideoLayer: (延迟) 视频原始尺寸: ${videoWidth}x${videoHeight}, 目标尺寸: ${targetWidth}x${targetHeight}`
);
console.log(
`SceneBgVideoLayer: (延迟) 缩放比例 - X: ${scaleX.toFixed(3)}, Y: ${scaleY.toFixed(3)}, 最终: ${scale.toFixed(3)}`
);
}
}
}, 0.1);
}
} else {
// 没有指定尺寸，保持原始缩放
this.videoPlayer.node.setScale(Vec3.ONE);
console.log("SceneBgVideoLayer: 未指定尺寸，保持默认缩放 (1, 1, 1)");
}
// 如果显式传入了 scale 参数，覆盖自动计算的缩放
// 立即开始播放，尺寸和位置将在 READY_TO_PLAY 事件中设置
this.videoPlayer.play();
this.isPlaying = true;
console.log(`SceneBgVideoLayer: 播放视频 ${path}, 配置:`, config);
// 最终验证：确保视频节点的状态正确
setTimeout(() => {
const finalWorldPos = this.videoPlayer.node.getWorldPosition();
const finalLocalPos = this.videoPlayer.node.getPosition();
const finalScale = this.videoPlayer.node.getScale();
const finalTransform = this.videoPlayer.node.getComponent(UITransform);
if (finalTransform) {
console.log(`SceneBgVideoLayer: === 最终状态验证 ===`);
console.log(`SceneBgVideoLayer: 最终世界位置: (${finalWorldPos.x.toFixed(2)}, ${finalWorldPos.y.toFixed(2)}, ${finalWorldPos.z.toFixed(2)})`);
console.log(`SceneBgVideoLayer: 最终本地位置: (${finalLocalPos.x.toFixed(2)}, ${finalLocalPos.y.toFixed(2)}, ${finalLocalPos.z.toFixed(2)})`);
console.log(`SceneBgVideoLayer: 最终缩放: (${finalScale.x.toFixed(3)}, ${finalScale.y.toFixed(3)}, ${finalScale.z.toFixed(3)})`);
console.log(`SceneBgVideoLayer: 最终锚点: (${finalTransform.anchorX.toFixed(2)}, ${finalTransform.anchorY.toFixed(2)})`);
console.log(`SceneBgVideoLayer: 最终内容尺寸: ${finalTransform.contentSize.width.toFixed(0)}x${finalTransform.contentSize.height.toFixed(0)}`);
// 计算实际渲染尺寸（内容尺寸 * 缩放）
const renderWidth = finalTransform.contentSize.width * finalScale.x;
const renderHeight = finalTransform.contentSize.height * finalScale.y;
console.log(`SceneBgVideoLayer: 计算的渲染尺寸: ${renderWidth.toFixed(0)}x${renderHeight.toFixed(0)}`);
console.log(`SceneBgVideoLayer: === 验证结束 ===`);
}
}, 200);
console.log(`SceneBgVideoLayer: 开始加载视频 ${path}, 配置:`, config);
}
);
}
@@ -275,7 +161,7 @@ export class SceneBgVideoLayer extends li_BaseView {
stop() {
if (this.videoPlayer) {
this.videoPlayer.stop();
this.isPlaying = false;
this.clearVideoState();
console.log("SceneBgVideoLayer: 停止视频");
}
}
@@ -306,42 +192,92 @@ export class SceneBgVideoLayer extends li_BaseView {
adjustToFillArea(targetSize: Size, position?: Vec3) {
if (!this.videoPlayer) return;
const tryAdjust = () => {
const uiTransform = this.videoPlayer.node.getComponent(UITransform);
if (!uiTransform) return false;
// 如果视频正在播放，直接应用配置
if (this.isPlaying && this.videoPlayer.isPlaying) {
this.applyVideoConfiguration({
size: targetSize,
position: position
});
} else {
// 如果视频还未准备好，存储配置等待应用
this.pendingVideoConfig = {
size: targetSize,
position: position
};
console.log("SceneBgVideoLayer: 视频未准备好，配置已存储等待应用");
}
}
/**
* 清除视频状态和待处理配置
*/
private clearVideoState() {
this.isPlaying = false;
this.pendingVideoConfig = null;
this.currentVideoData = null;
}
//================== 内部辅助方法 ==================
/**
* 应用视频配置（位置、尺寸、缩放）
* @param config 视频配置对象
*/
private applyVideoConfiguration(config: {
size?: { width: number; height: number } | Size;
position?: { x: number; y: number; z?: number } | Vec3;
scale?: number | Vec3;
}) {
if (!this.videoPlayer) return;
const uiTransform = this.videoPlayer.node.getComponent(UITransform);
if (!uiTransform) return;
// 应用位置设置
if (config.position) {
const pos = config.position;
let targetWorldPos: Vec3;
if (pos instanceof Vec3) {
targetWorldPos = pos;
} else {
targetWorldPos = new Vec3(pos.x, pos.y, pos.z || 0);
}
this.videoPlayer.node.setWorldPosition(targetWorldPos);
console.log(`SceneBgVideoLayer: 设置视频位置 (${targetWorldPos.x}, ${targetWorldPos.y}, ${targetWorldPos.z})`);
}
// 应用尺寸和缩放设置
if (config.size) {
// 获取视频的原始尺寸（此时应该是准确的）
const videoSize = uiTransform.contentSize;
if (videoSize.width > 0 && videoSize.height > 0) {
// 计算宽度和高度的缩放比例
const scaleX = targetSize.width / videoSize.width;
const scaleY = targetSize.height / videoSize.height;
const targetWidth = config.size instanceof Size ? config.size.width : config.size.width;
const targetHeight = config.size instanceof Size ? config.size.height : config.size.height;
// 选择较大的缩放比例以填满整个区域
// 计算缩放比例（填满整个区域）
const scaleX = targetWidth / videoSize.width;
const scaleY = targetHeight / videoSize.height;
const scale = Math.max(scaleX, scaleY);
this.videoPlayer.node.setScale(new Vec3(scale, scale, 1));
if (position) {
this.videoPlayer.node.setWorldPosition(position);
}
console.log(`SceneBgVideoLayer: 自适应填充区域，缩放: ${scale}`);
return true;
console.log(`SceneBgVideoLayer: 设置视频缩放 ${scale} (原始尺寸: ${videoSize.width}x${videoSize.height}, 目标尺寸: ${targetWidth}x${targetHeight})`);
} else {
console.warn("SceneBgVideoLayer: 无法获取视频尺寸，跳过缩放设置");
}
return false;
};
// 立即尝试一次
if (!tryAdjust()) {
// 如果失败，延迟尝试
this.scheduleOnce(() => {
if (!tryAdjust()) {
this.scheduleOnce(() => {
tryAdjust();
}, 0.5);
}
}, 0.1);
} else if (config.scale) {
// 如果显式传入了 scale 参数，直接应用
if (typeof config.scale === "number") {
this.videoPlayer.node.setScale(new Vec3(config.scale, config.scale, 1));
console.log(`SceneBgVideoLayer: 设置显式缩放 ${config.scale}`);
} else {
this.videoPlayer.node.setScale(config.scale);
console.log(`SceneBgVideoLayer: 设置显式缩放 (${config.scale.x}, ${config.scale.y}, ${config.scale.z})`);
}
} else {
// 没有指定尺寸或缩放，保持原始缩放
this.videoPlayer.node.setScale(Vec3.ONE);
console.log("SceneBgVideoLayer: 保持默认缩放 (1, 1, 1)");
}
}
@@ -349,6 +285,14 @@ export class SceneBgVideoLayer extends li_BaseView {
private onVideoReadyToPlay = () => {
console.log("SceneBgVideoLayer: 视频准备完成");
// 应用待处理的视频配置
if (this.pendingVideoConfig) {
this.applyVideoConfiguration(this.pendingVideoConfig);
// 清空待处理配置
this.pendingVideoConfig = null;
}
this.onVideoReady();
};
@@ -356,12 +300,12 @@ export class SceneBgVideoLayer extends li_BaseView {
switch (eventType) {
case "completed":
console.log("SceneBgVideoLayer: 视频播放完成");
this.isPlaying = false;
this.clearVideoState();
this.onVideoEnd();
break;
case "error":
console.error("SceneBgVideoLayer: 视频播放错误");
this.isPlaying = false;
this.clearVideoState();
this.onVideoError();
break;
}
@@ -409,6 +353,7 @@ export class SceneBgVideoLayer extends li_BaseView {
*/
onDestroy() {
if (this.videoPlayer) {
this.videoPlayer.stop();
this.videoPlayer.node.off(
VideoPlayer.EventType.READY_TO_PLAY,
this.onVideoReadyToPlay,
@@ -416,6 +361,7 @@ export class SceneBgVideoLayer extends li_BaseView {
);
//this.videoPlayer.node.off(VideoPlayer.EventType.VIDEO_PLAYER_EVENT, this.onVideoEvent, this);
}
this.clearVideoState();
SceneBgVideoLayer.handle = null;
}
}