发布到 WEB

1,160次阅读
没有评论

共计 4236 个字符,预计需要花费 11 分钟才能阅读完成。

发布到 WEB

Construct 项目基于 HTML5,这使得它们非常适合 Web 发布。本指南包括一些在在线发布 Construct 游戏时需要了解的有用信息。

要发布到 Web,请在导出时使用 Web(HTML5)选项。导出完成后,您将获得一个 zip 文件,其中包含要上传的所有文件。

在您上传导出的游戏之前,它们将无法运行。

如果您从磁盘运行游戏,游戏将无法运行。如果您将导出的压缩文件解压缩到计算机并双击 index.html 以运行它,则游戏将开始使用 file:/// URL,而不是 http:// 或 https:// URL,因为游戏在磁盘上而不是在服务器上。出于安全原因,浏览器对从 file:/// URL 在网页中可以执行的操作有一些严格的限制,这些通常会阻止 Construct 游戏运行。最好的工作流程是在开发过程中通过在 Construct 中预览进行测试,然后在导出后立即将游戏发布到 Web。如果您从磁盘运行游戏,您可能会看到一个消息框提醒您这一点(“在您上传它们之前,导出的游戏将无法运行”)。

如果您确实需要从桌面运行游戏,请改用桌面导出选项。如果您需要在移动设备上进行测试,则可以使用远程预览,而不必重复导出。

本地托管

高级用户可能需要考虑使用 nginx 或 Caddy 等服务器运行本地 HTTP 服务器。这些相对容易设置,以在计算机上以 URL(如 http://localhost:8080)提供文件夹的内容。然后,您只需将导出的项目复制到服务器的文件夹中,并将其加载到浏览器中即可。该游戏将运行,因为它在 HTTP URL 上运行。

上传到网络

您将需要一个 Web 服务器来将您的游戏上传到其中。如果您没有,有许多服务可以租用便宜的静态文件主机。将文件上传到服务器的具体步骤取决于您的主机。如果您需要帮助了解如何执行此操作,请联系您的房东。该过程有时涉及 FTP、远程桌面或主机网站上的工具等工具。或者,您可以导出到 Scirra Arcade,该街机为您托管您的游戏。

Google Drive、Dropbox 和 OneDrive 等存储服务不是 Web 服务器。它们只是文件存储服务。您不能使用它们来发布您的游戏。
您可以使用许多可能的服务。两种可能性是 Netlify 掉落和 Static.app,两者都允许您拖放一些文件以进行即时托管。

上传后,您应该有一个可以分享并开始宣传您的游戏的链接!如果你设计了带有触摸控件的游戏,那么它应该在移动浏览器上也能很好地运行。

上传文件时犯错误是很常见的。如果您忘记上传文件或文件夹,游戏可能会中断。如果您的游戏在上传后似乎无法运行,检查浏览器错误希望会有一条有用的消息(例如“myfile.png 返回了 404 未找到”,表明您忘记上传 myfile.png)。

设置 MIME 类型

为了使所有功能都能正常工作,您的 Web 服务器应设置正确的 MIME 类型。这是一种将文件扩展名(如 .png)与内容类型(如 image/png)相关联的方法。如果服务器不知道 Construct 使用的某些文件扩展名,它可能会为文件返回 404 Not Found,或者错误地解释文件并损坏它。有关更多信息,请参阅手册条目 MIME 类型.

使用安全托管

许多 Construct 功能需要安全托管才能运行。这意味着在 HTTPS(URL 中带有 https://)上托管您的网站,而不是不安全的 HTTP(URL 中带有 http://)。例如离线支持、全屏、地理位置访问、摄像头 / 麦克风访问以及其他一些功能都需要 HTTPS 托管才能正常工作。将来可能会有更多功能需要安全托管。

如今,您设置的任何新服务器都应该从一开始就是安全的。如果您已有不安全的网站,则应开始更新它们以确保安全。

如果您的网站尚未安全,请联系您的主机寻求支持,以确保其安全。您可能需要付费才能购买证书。或者,让我们加密该服务允许您免费获得证书。

可安装的 WEB 应用程序

从 Construct 导出的所有 Web 都是渐进式 Web 应用或 PWA。这意味着在某些浏览器和平台上,它们可以像应用商店中的应用程序一样安装,在设备上创建应用程序图标,像其他应用程序一样显示,没有典型的浏览器界面元素(如地址栏),并离线工作(如果在导出时启用了离线支持)。

此外,一些浏览器允许提示用户鼓励他们安装您的 Web 应用程序。这可以通过 Browser 对象. 它提供了检测安装是否可用的条件。如果是,则可以使用“请求安装”操作来提示用户进行安装。请注意,为防止滥用,通常只允许在用户输入触发器(例如鼠标单击或触摸)中执行此操作。但是,这使您可以执行诸如添加标题屏幕菜单选项以安装 Web 应用程序之类的操作。

更丰富的安装 UI

标准的安装提示非常基本。只要您提供必要的信息,就可以获得更详细的安装提示,其中包括项目的屏幕截图。这包括确保为项目输入描述,并至少添加一个屏幕截图,其中包含窄形和宽形规格(请参阅图标 & splash). 有关更多信息,包括对屏幕截图的其他要求和限制,请参阅在 web.dev 上安装 UI 更丰富.

域名锁定

如果您想将游戏限制为仅在某些网站上运行,则只需比较 Browser 对象中的表达式即可。例如,如果在 https://www.mywebsite.com/mygame/ 上托管,则将 www.mywebsite.com Domain 表达式。如果此值不是来自您控制的网站,您可以让游戏拒绝播放。(请注意,预览模式在 preview.construct.net 上运行,因此您可能也应该允许此域!这使得某人复制您的游戏的难度稍微大一些。请注意,此检查 – 您实施的任何其他类型的检查 – 仍然可以规避。与许多安全问题一样,目标主要是使复制更加困难,而不是使其完全不可能(这通常是不可行的)。Browser.Domain

跨域请求

如果您的游戏从另一个域加载内容,这称为跨域请求,某些安全限制可能会影响是否允许该请求。例如,如果您的游戏托管在 mywebsite.com 上,并尝试从 otherwebsite.com 加载内容,则请求可能会被阻止,并且加载可能会失败。这可能会影响 AJAX 请求、将图像加载到 Sprite 等对象中、播放视频或从 URL 加载内容的任何其他时间。

浏览器根据其域、方案和端口限制请求。它们统称为原点。对其他来源的请求需要跨域资源共享(CORS)进行设置,否则浏览器可能会被阻止。通常,这涉及在托管内容的服务器的响应中发送 HTTP 标头。如果此标头允许该请求,则它可以成功。可以将请求限制为某些源,也可以使用以下标头来允许来自任何服务器的请求:Access-Control-Allow-Origin

Access-Control-Allow-Origin: *

不要对任何安全敏感的东西(如个人资料信息)这样做,因为它允许 Internet 上的任何网站访问内容!但是,对于您只想跨域共享的静态文件,这通常是安全的。

Construct 的预览版在 preview.construct.net 上运行。如果希望跨域请求在预览模式下成功,则应确保也允许此源。

嵌入

如果要将游戏嵌入到另一个网页中,可以使用 iframe 元素来显示它。只需将 iframe 指向您游戏的网址即可。例如:

iframe src="https://www.mywebsite.com/mygame/" width="600" height="400" scrolling="no" noresize="noresize" /

这将创建一个固定大小的 iframe(600×400),游戏将在其中显示。默认情况下,游戏将自动缩放以填充 iframe 设置的任何大小。但是,如果它是一个固定大小的游戏,请确保 iframe 标签的宽度和高度属性与游戏的视口大小匹配。

和属性是必需的,以确保 iframe 在某些版本的 iOS 上以正确的大小显示。scrollingnoresize

允许全屏显示

iframe 中的游戏仍然可以切换到全屏模式,在该模式下它占据了整个显示屏。为此,您的游戏大小不得固定(全屏模式不得关闭)。然后使用 Browser 对象的 请求在游戏中全屏操作。

大多数浏览器将“请求全屏”限制为仅在用户输入触发器中起作用,例如“单击按钮时”、“鼠标单击时”、“触摸对象时”等。这是为了防止网页在用户不需要时将其设置为全屏。
最后,您必须将属性添加到 iframe 标记中,如下所示:allowfullscreen

iframe src="https://www.mywebsite.com/mygame/" allowfullscreen="true" width="600" height="400" scrolling="no" noresize="noresize" /

有了所有这些,您的 iframed 游戏现在应该能够“突围”到全屏模式!

沙盒

如果您运行游戏街机或以其他方式想要确保游戏与父页面隔离,那么最重要的一点是在与父页面不同的源上运行游戏。例如,如果父页面位于 https://www.myarcadesite.com 上,则 iframe 应指向托管在另一个源(如 https://games.myarcadesite.com)上的游戏。浏览器的同源安全策略将阻止游戏访问域 www.myarcadesite.com 上的任何存储或内容。

为了进一步隔离,您可以使用 iframe 标记的属性。这允许进一步锁定功能,例如打开弹出窗口、导航顶部框架等。有关更多信息,请参阅 sandboxMDN 上的 iframe 标签. 至少必须包含 sandbox 属性,游戏的 JavaScript 才能运行。如果游戏与父页面位于不同的源位置,则还可以使用 .allow-scriptsallow-same-origin

如果 iframe 内容与父页面位于同一源上,请不要将沙箱属性与 allow-scripts 和 allow-same-origin 一起使用。在这种情况下,iframe 有权简单地删除沙盒属性,因此它根本不会提高安全性。但是,如果 iframe 内容位于不同的源上,它仍然是安全的。

控制取景

您可能希望限制允许哪些网站在 iframe 中展示您的游戏。或者,您可能希望完全阻止在 iframe 中显示您的游戏,确保它只能在直接访问其 URL 时播放。

在现代浏览器中,您可以通过发送带有 Content-Security-Policy 帧祖先命令。例如,您可以将其设置为完全阻止框架,或指定一个源以仅允许该页面在框架中显示内容。’none’

对于较旧的浏览器,您可以使用 X -Frame- 选项 HTTP 标头。

正文完
 0
评论(没有评论)