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

目录

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

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


代码仓地址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年的缓存时间

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

相关推荐
wanhengidc6 小时前
云手机的空间会占用本地内存吗
科技·游戏·智能手机
wanhengidc7 小时前
网页版的云手机都有哪些优势?
运维·网络·安全·游戏·智能手机
wanhengidc1 天前
云手机运行是否消耗自身流量?
运维·科技·安全·游戏·智能手机
wanhengidc1 天前
云手机将要面临的挑战有哪些?
运维·网络·安全·游戏·智能手机
gou123412341 天前
Golang之GoWorld深度解析:基于Go语言的分布式游戏服务器框架
分布式·游戏·golang
金山电脑医生1 天前
DirectX修复必备指南:解决DLL缺失与游戏崩溃的5种方法
游戏·dll丢失·dll缺失
BlackQid1 天前
基于C的扫雷小游戏
游戏·c
yingxiao8882 天前
日本移动应用市场营销分析:娱乐和金融应用增长强劲,游戏类广告支出最高!
游戏·动画·业界资讯
wanhengidc2 天前
云手机中的三大核心技术主要是指什么?
运维·科技·安全·游戏·智能手机
wanhengidc2 天前
使用云手机进行游戏搬砖划算吗?
运维·服务器·网络·安全·游戏·智能手机