如何将HTML5 Godot导出文件嵌入React应用程序中。

Question

如何将HTML5 Godot导出文件嵌入React应用程序中。

3

我将解释情况：

这些是在HTML5中导出我的Godot游戏后得到的文件：导出文件最相关的文件是"WYS 0.1.js"，因为它导入并使用其他有用的文件，比如.pck文件，在HTML文件中执行应用程序。

简而言之，如果我理解正确，它是一个非常庞大的文件，其范围是创建一个名为“Engine”的类，从该类可以执行一些方法，例如startEngine()，有助于启动游戏，遵循作为类参数传递的特定配置。如果您想检查此文件，请单击以下链接： https://drive.google.com/file/d/12JYPd5ItYFFelcJcpIX3eU7kr42Y36up/view?usp=sharing （只需跳过初始文本即可查看有意义的代码）。

HTML文件如何执行游戏？

只需使用指向"WYS 0.1.js"路径的src属性的

- Sawy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sawy · Answer 1

我成功地在ReactApp中执行了游戏，虽然我不知道这是否是最好的方法，但它似乎可以工作。以下是我的解决方案：

godot导出文件必须放置在public文件夹中，而不是public文件夹中的子文件夹中，主JS文件"WYS 0.1.js"必须与index.html位于同一目录下。某些文件可以被排除，但"WYS 0.1.js"、.wasm和.pck必须位于该目录中，即使没有它们似乎也可以正常工作，我也会把.worklet.js放在那里。

话虽如此，要执行游戏，您需要复制 "WYS 0.1.js" 中的<script>标签，并将它们插入由 npx create-react-app name-app 命令生成的 index.html 文件中。事实上，在这种状态下，您需要复制整个 <body> 标签并将其放入 index.html 中，因为第二个 <script> 标签中的内联 JavaScript 代码需要访问 <body> 中的某些元素以动画加载并在 <canvas> 标签中执行游戏。

因此，我们现在将转向可重用性部分。

为了将游戏的执行封装在一个ReactComponent中，我首先将内联JS移动到一个单独的JS文件init_godot_game.js中，并在同一个<script>标签中导入它，将路径放在src属性中。然后，我稍微修改了这个移动到新JS文件中的代码，只是将它放在一个可以调用的函数init_game()中。

现在，对于React部分，只需创建一个新组件并使其返回我们粘贴在index.html中的"WYS 0.1.html"文件的所有主体内容，现在您可以从那里删除该内容（在开始之前，您必须稍微更改此代码以适应JSX语法）。

从这里开始，要执行游戏，您只需要在body中添加一个新的<script>标签，并调用init_game()函数，如下所示：

let script = document.createElement("script");
script.type = "text/javascript"
script.innerHTML = "init_game()"
document.body.appendChild(script)

你可以将这段代码放在 useEffect(() => { ... }, []) 中或者一个函数中，需要时再调用。我试图通过 export 暴露 init_game() 函数，并在 React 组件中使用 import { init_game } from "path" 导入它，但是在 src 文件夹之外的东西无法导入。将 init_godot_game.js 移动到 src 文件夹中会导致与之前方法类似的错误。看起来这些文件必须与 index.html 在同一路径下。

无论如何，这部分的可重用性和游戏加载方式都取决于你。如果我理解正确，只需要几个东西：

你需要在处理加载和初始化游戏的JS文件中执行engine.startGame()方法，例如我的示例中：init_godot_game()。其余部分可以忽略。
在ReactApp中，无论是组件还是任何你想运行游戏的地方，都必须有<canvas id="canvas">标签，因为这是主JS文件想要作为游戏容器的内容。

如果你有更好的解决方案，请告诉我你的想法 :)