Unity 之 发布WebGL并部署到GitHub供外部访问 (Unity | WebGL | GitHub | 内嵌网页)

简介: 一文教你Unity发布WebGl并上传到GitHub提供外部访问,开启页游之旅~

前言

自己发布游戏到网页是什么体验?本文教你发布自己的网页游戏,还不赶紧试试,让好友也能在浏览器上玩到自己的游戏

点击试玩:2048化学元素版

效果展示:

PS:分辨率是根据打包设置来的哦~ ,我这个为什么把分辨率做这么小,后面会说~


一,准备工作

1.1 Unity环境配置

打开“Unity Hub”,左侧安装目录,找到需要打WebGL包的已安装版本Unity,点击三个点“...”,选择添加模块:

选择“WebGL Build Support”,点击完成,等待安装完成即可。

1.2 GitHub相关操作

  1. 在GitHub上创建远程仓库

    登陆GitHub官网(打不开的话需要Fan墙),点击右上角“+”,选择“New repository” 然后弹出如下界面,进行创建项目配置,图中红框分别表示:项目名称,设置为共开(这样别人才能访问到),带描述文件,最后点击下面的创建按钮:

  1. 将远程仓库克隆到本地

    这就不多说了,使用你的习惯的任何方式都可以,我用的是“Source Tree“,操作如下:在网页中复制1中创建好的URL,“Source Tree“中点击”新建“ 弹窗如下图,按图填写完成,点击克隆即可:

  1. 克隆成功

    克隆成功后会在你填写的目录中看到有一个”README.md“的文件,若你的电脑设置开启了”显示隐藏文件“,应该还有”.git“这样的文件。


二,发布WebGL

2.1 切换目标平台

两种方式:1是打开时切换平台,2是打开后在工程中切换

PS:若你还没有预发布项目,只想测试发布WebGl功能,那么就新建工程然后跟着操作即可。

  1. 打开时切换目标平台

    若你已经有了预发布的项目那么就直接把目标平台修改为”WebGL“ 然后打开项目即可;

  1. 打开后切换目标平台

    若你的项目没有按照第一步的方式使用”WebGL”平台打开,那么需要在工程中“Build Settings...” --> 弹出面板选择“WebGL” --> 点击“Switch Platform” 等待切换平台完成即可:

2.2 发布配置

打开"Project Settings"面板 --> 左侧选项栏选择”Player“:

  1. 基础信息配置

    公司名,项目名,版本号。(没有特殊需求的话默认也行)

  1. 分辨率和显示

    找到下面”Resolution and Presentation“面板,设置分辨率。若在不想再后台运行,取消勾选”Run in Background“

PS:其他配置和发布其他平台基本一致,没特殊需求也不需要修改。

2.3 打包WebGL

打开“Build Settings...” 面板,点击”Build“,选择打包路径,然后等待打包完成即可:

打包成功后,会在刚刚指定的目录下得到两个文件:

此时双击”index.html“就可以在浏览器中玩耍了。

2.4 打开本地文件问题

打开提示

看起来你的浏览器不支持运行Unity WebGL内容从文件:// url。请将它上传到http服务器,或尝试不同的浏览器。

若你的浏览器可以打开”index.html“这个本地网页,那么可以忽略这个问题,若不能打开,推荐使用”火狐浏览器“试试,不过即使打不开也没有关系,反正我们后面要传到GitHub上面。


三,设置静态网页

3.1 上传GitHub

还是和1.2一样,使用你习惯的方式进行推送即可

将Unity打包出来WebGL文件放到本地仓库(1.2克隆的那个文件夹)中,然后推送到远程仓库即可:

推送成功后,在网站上可以看到如下目录:

3.2 设置Pages

在GitHub上选择“Settings” --> 左侧标签栏选择“Pages” --> 然后将"Source"设置为“master” --> 最后点击右侧“Save”保存,等网页刷新完成,即可看到下图带颜色背景框部分的URL,点击此URL,即可访问。

3.3 成功访问

本文示例的URL:https://czhenya.github.io/2048.github.io/ 点击即可在线玩耍「2048化学元素版


相关拓展:内嵌到网站

先说说在“前言”留下的问题,做所以做这么下,是为了... 看下图吧,一图胜千言

没错,是为了在这自定义区域可以玩耍。

不过好像官方并不允许这么做(第二天自定义模块被清空了),所以我现在的主页上也就没有这个效果了,不过知识还是要学习的,有个人网站的小伙伴,可以尝试下,将小游戏嵌入到自己的网站。

代码如下:

<div align="center">
frameLabelStart-https://czhenya.github.io/2048.github.io/-frameLabelEnd 
</div>

上面代码的“width”和“height”都可以根据游戏的宽高进行修改,而“src” 你可以在各种小游戏网站上找到后缀名是.html都可以。

相关文章
|
2月前
|
Windows
如何访问GitHub快的飞起?两步解决访问超时GitHub,无法访问GitHub的问题
这篇文章提供了几种方法来解决访问GitHub时速度慢或超时的问题,包括使用代理服务器、下载加速工具,以及考虑使用国内代码管理网站如码云(gitee)来加速下载GitHub上的资源。
如何访问GitHub快的飞起?两步解决访问超时GitHub,无法访问GitHub的问题
|
2月前
|
Windows
github图床链接打开提示raw.githubusercontent.com无法访问解决
picgo上传图片不显示,到GitHub打开也不显示图片,粘贴链接访问提示“raw.githubusercontent.com无法访问”,百度搜索后修改了下hosts解决了。
484 2
github图床链接打开提示raw.githubusercontent.com无法访问解决
|
15天前
|
Windows
github图床链接打开提示raw.githubusercontent.com无法访问解决
github图床链接打开提示raw.githubusercontent.com无法访问解决
26 0
|
2月前
|
网络协议 开发工具 git
hexo github部署,通过域名访问你的博客
本文介绍了如何使用Hexo命令部署博客到GitHub,并详细说明了如何通过自定义域名访问GitHub上部署的博客。
hexo github部署,通过域名访问你的博客
|
3月前
|
搜索推荐 前端开发
使用VitePress创建个人网站并部署到GitHub
该网站使用 VitePress 构建,记录了前端开发相关的笔记和教程,涵盖 Vue2 和 Vue3 等内容。网站支持暗黑模式和 Algolia 搜索服务,提供了详细的导航和侧边栏配置。通过自动化脚本进行部署,托管于 GitHub Pages。
使用VitePress创建个人网站并部署到GitHub
|
3月前
|
资源调度 搜索推荐 Shell
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
本文介绍了如何使用 Vue3、TypeScript 和 Vite 开发组件库并将其发布到 npm。文章详细描述了安装依赖、配置项目、创建文档网站以及编写组件文档的步骤。通过使用 VitePress,可以轻松搭建组件库的文档站点,并实现 Algolia 搜索功能。此外,还提供了自动化脚本用于部署静态网站至 GitHub 以及发布组件库到 npm。最后,展示了完整的目录结构和网站效果。
使用VitePress静态网站生成器创建组件库文档网站并部署到GitHub
|
3月前
|
存储 安全 API
GitHub主要仓库泄露访问令牌,代码与云环境面临风险
GitHub主要仓库泄露访问令牌,代码与云环境面临风险
GitHub主要仓库泄露访问令牌,代码与云环境面临风险
|
3月前
|
开发者 图形学 iOS开发
掌握Unity的跨平台部署与发布秘籍,让你的游戏作品在多个平台上大放异彩——从基础设置到高级优化,深入解析一站式游戏开发解决方案的每一个细节,带你领略高效发布流程的魅力所在
【8月更文挑战第31天】跨平台游戏开发是当今游戏产业的热点,尤其在移动设备普及的背景下更为重要。作为领先的游戏开发引擎,Unity以其卓越的跨平台支持能力脱颖而出,能够将游戏轻松部署至iOS、Android、PC、Mac、Web及游戏主机等多个平台。本文通过杂文形式探讨Unity在各平台的部署与发布策略,并提供具体实例,涵盖项目设置、性能优化、打包流程及发布前准备等关键环节,助力开发者充分利用Unity的强大功能,实现多平台游戏开发。
94 0
|
3月前
|
Linux C++ Docker
【Azure Developer】在Github Action中使用Azure/functions-container-action@v1配置Function App并成功部署Function Image
【Azure Developer】在Github Action中使用Azure/functions-container-action@v1配置Function App并成功部署Function Image
|
3月前
|
存储
【Azure Developer】Github Action部署资源(ARM模板)到Azure中国区时,遇见登录问题的解决办法
【Azure Developer】Github Action部署资源(ARM模板)到Azure中国区时,遇见登录问题的解决办法