关于截屏时实现游戏暂停以及本地和上线不同步问题

目录

需求:在点击截屏时需要自动暂停游戏运行,并在关闭弹窗后游戏自动恢复

问题:本地测试通过但是部署上线报错


代码仓地址https://github.com/ceilf6/Xbuilder

需求:在点击截屏时需要自动暂停游戏运行,并在关闭弹窗后游戏自动恢复

需要从游戏引擎角度实现,否则游戏都不会完全停止

TypeScript 复制代码
// 在 spx-gui/public/spx_2.0.0-beta9/runner.html 中添加
window.pauseGame = async () => {
  // 使用时间缩放来暂停游戏
  if (typeof window.gdspx_platform_set_time_scale === 'function') {
    window.gdspx_platform_set_time_scale(0.0);  // 时间缩放为0,游戏完全停止
    console.log("游戏已通过时间缩放暂停 (time_scale = 0.0)")
  }
}

window.resumeGame = async () => {
  // 使用时间缩放来恢复游戏
  if (typeof window.gdspx_platform_set_time_scale === 'function') {
    window.gdspx_platform_set_time_scale(1.0);  // 时间缩放为1,游戏正常速度
    console.log("游戏已通过时间缩放恢复 (time_scale = 1.0)")
  }
}

接着通过在引擎组件中通过 defineExpose 来暴露方法

TypeScript 复制代码
defineExpose({
  async pauseGame() {
    const iframeWindow = iframeWindowRef.value
    await iframeWindow.pauseGame()  // 调用iframe中的方法
  },
  async resumeGame() {
    const iframeWindow = iframeWindowRef.value
    await iframeWindow.resumeGame()
  }
})

(且由于 XBuilder 上有两个引擎,需要在两个组件中构建完方法后还得去顶层组件中统一暴露)

然后就是去截屏组件中应用

TypeScript 复制代码
const handleScreenshot = async () => {
  // 1. 暂停游戏
  await projectRunner.pauseGame()
  
  // 2. 截图
  const screenshot = await projectRunner.takeScreenshot()
  
  // 3. 显示截图弹窗
  isScreenshotModalVisible.value = true
}

// 关闭截图弹窗时恢复游戏
const handleCloseScreenshotModal = async () => {
  await projectRunner.resumeGame()
}

录屏加上了观察者模式,因为录屏弹窗的调用是截屏的两倍

TypeScript 复制代码
// 弹窗打开时暂停游戏
watch(() => props.visible, async (newVisible) => {
  if (newVisible) {
    await props.projectRunner.pauseGame()
  }
})

// 开始录屏时恢复游戏
const startGameCanvasRecording = async () => {
  await props.projectRunner.resumeGame()  // 让录屏能录制到游戏画面
}

// 停止录屏时暂停游戏
const handleStopRecording = async () => {
  await props.projectRunner.pauseGame()
}

// 关闭弹窗时恢复游戏
const handleModalClose = async () => {
  await props.projectRunner.resumeGame()
}

问题:本地测试通过但是部署上线报错

通过 vercel 部署上去后报错 找不到新定义的方法

于是我去 vercel 上看了 public 中的 runner.html 文件,发现未和本地同步,于是我去看了 runner 的更新逻辑,发现 install-spx.sh 脚本在构建时会从 GitHub 下载 spx_web.zip 并解压,覆盖我们修改的 runner.html 且 Vite 配置中 spx_* 文件被设置了1年的缓存时间

于是我在脚本文件中重新应用更改

相关推荐
高山有多高2 小时前
C语言实战项目:贪吃蛇(1)
c语言·开发语言·数据结构·c++·算法·游戏
wanhengidc3 小时前
云手机:云计算的灵动化身
运维·服务器·人工智能·游戏·智能手机·云计算
da_vinci_x3 小时前
告别手动“拼图”:AI+自动化游戏UI雪碧图(Sprite Sheet)工作流
人工智能·游戏·设计模式·prompt·aigc·技术美术·游戏美术
Hello123网站5 小时前
Whispers from the Star:Anuttacon推出的以AI智能体语音交互为核心的太空生存游戏
人工智能·游戏·交互·ai工具
特立独行的猫a15 小时前
梦回童年,将JSNES 游戏模拟器移植到 HarmonyOS 移植指南
游戏·华为·harmonyos
wanhengidc18 小时前
云手机远程控制的作用
网络·游戏·智能手机·架构·云计算
HELLOMILI1 天前
[UnrealEngine] 虚幻引擎UE5下载及安装(UE4、UE5)
游戏·ue5·游戏引擎·ue4·虚幻·软件需求
gopyer1 天前
180课时吃透Go语言游戏后端开发2:Go语言中的变量
开发语言·游戏·golang·游戏后端开发
mon_star°1 天前
基于微信小程序高仿背单词消除游戏
游戏·微信小程序·小程序
软件黑马王子1 天前
2025Unity超详细《坦克大战3D》项目实战案例(上篇)——UI搭建并使用和数据持久化(附资源和源代码)
游戏·ui·unity·c#