零基础Unity做一个中秋诗词鉴赏网页,提前祝您中秋快乐!(DoTween动画 | WebGL视频 | 大文件上传GitHub)
零基础Unity做一个中秋诗词鉴赏网页,提前祝您中秋快乐!
- 前言
- 一,环境搭建
- 1.1 安装Unity
- 1.2 添加WebGl模块
- 二,开发项目
- 2.1 导入插件
- 2.2 项目搭建
- 2.3 逻辑处理
- 三,打包WebGl
- 3.1 打包WebGL设置
- 3.2 打开本地文件问题
- 四,将仓库转为网页
- 4.1 上传GitHub
- 4.2 设置Pages
- 五,遇到的问题
- 5.1 单个文件太大上传失败问题
- 5.2 视频在WebGl不显示问题
前言
本文你将学会,安装一个版本Unity(本文2019.4.19)并且添加WebGl模块。使用DoTween插件用于动画展示。将GitHub仓库变成外部可访问的网页。
效果展示:
发布链接:https://czhenya.github.io/Mid-Autumn/
一,环境搭建
1.1 安装Unity
打开UnityHub,左侧栏选择安装,点击右侧安装按钮:
点击后会弹出如下面板,可以选择一个版本或者点击上面蓝字官方发布网站
找到指定版本进行下载即可:
1.2 添加WebGl模块
新安装版本:选择“WebGL Build Support”,点击完成,等待安装完成即可。
若是已安装版本:
打开“Unity Hub”,左侧安装目录,找到需要打WebGL包的已安装版本Unity,点击三个点“…”,选择添加模块:
选择“WebGL Build Support”,点击完成,等待安装完成即可。
二,开发项目
2.1 导入插件
将下载的DoTween插件导入到Unity(直接拖拽到工程目录即可),勾选下图画框的文件夹,然后点击Import
按钮导入即可:
2.2 项目搭建
在Asset右键 --> Create
--> Render Texture
命名为"MoveRenderTexture":
设置尺寸:
在Hierarchy面板右键创建Camera
--> 设置TargetTexture
为创建的“MoveRenderTexture”:
右键创建RawImage
并添加Video Player
面板设置如下:
右键创建Text
内容、字体、字号设置如下:(有几首诗词,就复制几份)
2.3 逻辑处理
播放视频逻辑:
使用DoTween插件处理文本动画:
PS:项目中使用诗句和视频素材找自己喜欢的就好~
三,打包WebGl
3.1 打包WebGL设置
打开“Build Settings…” 面板,禁用压缩格式,Compression Format设置为Disable
然后回到点击“Build Settings…” 面板,”Build“,选择打包路径,然后等待打包完成即可:
打包成功后,会在刚刚指定的目录得到如下文件:
此时双击”index.html“就可以在浏览器中玩耍了。
3.2 打开本地文件问题
打开提示:
释义:
看起来你的浏览器不支持运行Unity WebGL内容从文件:// url。请将它上传到http服务器,或尝试不同的浏览器。
PS:若你的浏览器可以打开”index.html“这个本地网页,那么可以忽略这个问题,若不能打开,推荐使用”火狐浏览器“试试,不过即使打不开也没有关系,反正我们后面要传到GitHub上面。
四,将仓库转为网页
4.1 上传GitHub
步骤:创建远程仓库 (要设置为Public哦~)–> 将上打包出的WebGl文件上传 --> 刷新网页验证创建完成即可:
4.2 设置Pages
在GitHub上选择“Settings” --> 左侧标签栏选择“Pages” --> 然后将"Source"设置为“master” --> 最后点击右侧“Save”保存,等网页刷新完成,即可看到下图带颜色背景框部分的URL,点击此URL,即可访问。
设置成功后即可进行访问了。
PS:有时候会有些延时,刷新不出来就稍等会再试下(一般不会超过3分钟)。
五,遇到的问题
5.1 单个文件太大上传失败问题
报错信息:
remote: error: File unityweb is 176.17 MB; this exceeds GitHub’s file size limit of 100.00 MB
解决方案:
- 先运行如下命令,将本地需要上传的大文件删除:
git rm --cached YOR-GIANT-FILE
git commit --amend -CHEAD
下载:Git Large Filehttps://git-lfs.github.com/
打开git-bash,在项目目录下,执行以下命令:
git lfs install
- 然后添加选择您希望Git LFS管理的文件类型,这一步成功后会生成一个gitattributes文件,之后也可以选择在这个文件内部直接进行编辑。
git lfs track "*.大文件的扩展名"
- 添加.gitattributes文件并commit,之后单独push这个文件到到远程端。(如果之前已经添加过大型文件,可以撤销或者回退)
git add .gitattributes
git commit -m "add the .gitattributes"
git push origin main
最后就可以上传成功了!
5.2 视频在WebGl不显示问题
问题描述:
在编辑器下运行正常的VideoPlayer视频,发布WebGl之后在网页上显示不出来。
问题原因:
Unity2019自带的VideoPlayer组件,如果在WebGL下,只可以直接通过URL地址播放视频,如果用clip的方式会报错,无法播放视频。
解决方案:
将视频放置在StreamingAssets目录下,StreamingAssets目录和在安卓平台一样,不会被打包。
在需要播放视频视频时,进行URL初始化,然后Play,即可解决。具体参考代码如下:
videoPlayer.url = Application.streamingAssetsPath + "shipin.mp4";
videoPlayer.Play();
本文制作后效果链接:https://czhenya.github.io/Mid-Autumn/ 欢迎大家观看。
最后,提前祝愿大家中秋快乐!
零基础Unity做一个中秋诗词鉴赏网页,提前祝您中秋快乐!(DoTween动画 | WebGL视频 | 大文件上传GitHub)相关推荐
- 【云开发】10分钟零基础学会做一个快递查询微信小程序,快速掌握微信小程序开发技能(轮播图、API请求)
大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...
- vue 文件及描述信息一起上传_用Vue实现一个大文件上传和断点续传
前言 这段时间面试官都挺忙的,频频出现在博客文章标题,虽然我不是特别想蹭热度,但是实在想不到好的标题了-.-,蹭蹭就蹭蹭 :) 事实上我在面试的时候确实被问到了这个问题,而且是一道在线 coding ...
- 推荐一个Silverlight多文件(大文件)上传的开源项目(转载)
在Silverlight上实现文件上传的例子在网上的还不多,特别是多文件上传和大文件上传的例子就更少了.当然 那些商品软件公司的产品除外. 目前的CodePlex上就有这样一个项目,其链接:http: ...
- Nginx的安装基础配置(windows、linux)以及搭建图片服务器(windows、阿里云),文件上传
Nginx的安装基础配置(windows.linux)以及搭建图片服务器(windows.阿里云),文件上传 本文目录 文章目录 Nginx的安装基础配置(windows.linux)以及搭建图片服务 ...
- 面试官:大文件上传如何做断点续传?
一.是什么 不管怎样简单的需求,在量级达到一定层次时,都会变得异常复杂 文件上传简单,文件变大就复杂 上传大文件时,以下几个变量会影响我们的用户体验 服务器处理数据的能力 请求超时 网络波动 上传时间 ...
- 判断大文件是否上传成功(一个大文件上传到ftp,判断是否上传完成)
大文件上传ftp,不知道有没有上传完成,如果没有上传完成另一个程序去下载这个文件,导致下载不完整. 判断一个文件是否上传完成的方法: /*** 间隔一段时间去计算文件的长度来判断文件是否写入完成* @ ...
- 分享基于silverlight的一个大文件上传控件
虽然codeplex已经有一些多文件,带进度条的上传控件,但是觉得都不是很好用,所以基于上面的控件重新设计了一个上传控件,更好的交互,属性绑定和管理文件. 1. 客户端使用: <mycontro ...
- 字节跳动面试官:请你实现一个大文件上传和断点续传
前言 这段时间面试官都挺忙的,频频出现在博客文章标题,虽然我不是特别想蹭热度,但是实在想不到好的标题了-.-,蹭蹭就蹭蹭
- element文件上传有文件但是后台接收为空_程序员提高篇:大规格文件(G)是如何做分片优化的?...
作者:凹凸实验室 链接:https://juejin.im/post/5ebb4346e51d451ef53793ad 整体思路 第一步是结合项目背景,调研比较优化的解决方案. 文件上传失败是老生常谈 ...
最新文章
- mfc 开启指定服务器,用MFC实现消息的发送和接收(含服务器)
- hung-yi lee_p12_深度学习简介
- 公式没有编号_知乎公式编辑器的一些小技巧 amp; 使用规范
- python的库在哪_你知道python常见的库有哪些吗?五大python库
- Scala数据类型按精度(容量)大小排序
- 【线性变换/矩阵及乘法】- 图解线性代数 03
- Linux操作系统下Sudo命令的使用方法说明
- Struts2_模块包含 及Action总结
- 区块链应用@纸贵科技:基于阿里云容器服务护航内容版权
- 设计一个应用程序,以在C#中的按钮单击事件上在MessageBox中显示TextBox中的文本...
- Spring核心系列之ApplicationContext
- 公司组织框架以及人员信息同步到钉钉相关解决方案
- 明略数据是谁?为何能拿下腾讯在行业AI的高额投资
- 用户名登陆时如何在后面加一个小红*_最后一个登陆框引起的血案
- 计算机网络基础(一)
- PyQt在qrc文件中添加自定义字体并使用
- w10需要计算机管理员才能删除,如何解决删除文件需要管理员权限win10_win10你需要提供管理员权限才能删除的解决方法...
- 七夕告白html网页,html5+CSS3+JS七夕告白功能实现详解
- [编程题]漂流船问题
- 粉笔网页端资料分析仿ipad分屏插件开发完成总结
热门文章
- python连乘函数_python 连乘
- OpenCV图像旋转(cv::rotate)与镜像(cv::flip)
- 微服务架构-高性能Netty服务器-064:Netty实战与反序列化与序列化协议
- 使用微信小程序扫码登录系统PC端web的功能
- 小程序支付后台实现(服务商)
- 零知识证明:Sigma协议
- Java LTS版本——Java 11新特性
- flink+mysql+connector_Flink SQL中connector的定义和实现
- Python做游戏很难吗—来看看我做的多有趣
- 你听过“易语言”吗?