如何为你的手游做快速测试：Unity 5和WebGL移植指南
作者：今日头条 来源：互联网
(点击上方“GameLook”↑↑↑,订阅微信)对于手游开发者来说，更新版本往往意味着非常复杂的过程，你需要根据反馈做更新、测试、提交然后等待审核，而由于不'...
(点击上方“GameLook”↑↑↑,订阅微信)对于手游开发者来说，更新版本往往意味着非常复杂的过程，你需要根据反馈做更新、测试、提交然后等待审核，而由于不需要客户端依赖，页游往往是快速测试游戏版本的最佳途径，很多人可能都知道Unity 5可以再不用Unity Web Player的情况下把手游移植到页游平台测试，再加上谷歌决定放弃对NPAPI的支持，未来WebGL对于页游移植是非常重要的。最近，海外开发者Leandro Gonzalez在博客中提供了详细的移植指南：很多人长期以来都用Unity研发手游，那么你们可能都听说过使用过Unity 5可以在不使用Unity Web Player的情况下把游戏移植成页游。听起来很不错对吗？但是，在使用WebGL做你的页游之前，有一些事情是有必要知道的，接下来我们就逐个回答以下的几个问题：1.WebGL对于游戏研发如此重要？对于新手开发者来说，网页游戏是一个拥有固定玩家数量的强大平台，在写本稿件的时候，WebGL可以在所有带有现代浏览器的桌面平台不用安装任何额外插件就能让你的游戏运行。但除此之外，做页游版本最重要的优势在于，你可以控制游戏的分销。别想着把你的版本送去审核或者通过后台上传并等待几个小时测试，网页技术需要的只是让你通过FTP上传文件并且能够实时看到游戏的改变。这对于快速调整游戏并且测试最新版本来说是很大的优势，还有一点值得提到的是，Google Chrome最近放弃了对（Flash Player）NPAPI的支持，意味着用Unity Web Player之类插件研发的游戏可能都不会在网页游戏平台留存太久，未来其他的浏览器也很可能做出这种决定，所以作为开发者最好是早作准备。但是，介绍就到此结束，我们不妨探讨更有趣的话题。和所有的平台一样，当你用Unity 5为WebGL做游戏的时候，还是需要考虑一些事情。以下是我们的首款游戏从安卓/iOS平台移植到Facebook Unity文档的时候遇到的问题：重要的事情先说：不支持的命名空间（Unsupported Namespaces）所有在System.Net（特别是System.Net.Socket）命名空间下的东西都无法在WebGL中使用。据Unity文档，这种原因是：由于安全问题，JavaScript代码无法直接通过IP Sockets进行网络连接。如果你需要在WebGL里使用网络，目前可以选择使用WWW或者Unity引擎里的UnityWebRequest classes，或者使用新的Unity Networking功能。这可能会因为CORS（也就是跨域资源共享）而带来一些让人头疼的问题，因为这基本上意味着只要没有和你的游戏的服务器在同一个域名内，就没办法登上其他的URL。这或许是你在把游戏移植到WebGL的时候遇到最大的问题如果你想要知道的话：同样的问题也适用于UnityEngine.Network classes，也不能在WebGL里使用。我们需要澄清的是，这并非Unity的错，毕竟网页平台本来就不是这么工作的。WebGL是一个AOT（ahead of time）平台，所以是不允许使用System.Reflection.Emit生成动态代码的。基本来说，System.Threading命名空间里的所有东西都是不被支持的。目前我们已经解决了不支持命名空间的问题，对我们来说，解决这个问题的方法就是使用Visual Studio 2015的搜索工具在我们文件的的Entire Solutions，随后我们会直接给!UNITY_WEBGL增加一个预处理器，并且找到解决所有在命名空间冲突而被移除的时候解决所有错误。比如:#if !UNITY_WEBGLusing System.T#endif第二：资源包在WebGL平台使用AssetBundles的时候需要考虑以下这些问题：当你要在AssetBundle里使用主版本没有用过的class类型的时候，这可能会让Unity直接把这些代码从版本中移除，所以从AssetBundle里加载资源的时候就会失败，你可以在这里找到英文版的解决办法。由于WebGL并不支持Threading，而且http下载只有在完成的时候才能使用，当下载完成的时候，Unity WebGL版本需要在主线程上解压缩AssetBundle，所以要屏蔽主线程。为了避免这种问题，你可能想要避免为你的AssetBundle使用默认的LZMA格式，转而使用LZ4进行压缩，该工具解压缩的效率比较高。如果你需要比LZ4更小的压缩尺寸，可以把网页服务器设置成在http协议层面用gzip压缩文件。第三：Building与测试这或许是使用WebGL最糟糕的一部分，还不清楚每个设置对于最终版本的影响，也无法确定如何对游戏进行测试和debug，你可以通过这里的链接（英文）找到答案（拿好不谢）。在大多数的浏览器里，你都可以通过直接打开index.html文件的方式浏览WebGL播放器。出于安全考虑，Chrome对于从本地文件://URLs打开的脚本都设了限制，所以该技术也是不能使用的。如果你使用Unity的Build&Run指令（menu:File&Build & Run），随后文件会被暂时放在本地网页服务器上，并且从localhost URL打开（这样可以避开安全限制）。你还可以运行Chrome并且执行—disable-web-security命令选择允许从file:urls加载内容。在我们的案例中，我们创作了一个简单的*.bat脚本并且只用了下面这一行代码（如果你的Chrome安装路径不同可以做修改）：“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –disable-web-security至少在Windows系统下，你可以在桌面系统运行脚本并且双击打开一个允许CORS的Chrome窗口，我们发现这是随时测试版本最简单的方式并且在我们研发过程中使用了该方法，它甚至对于在服务器上的版本也可以运用。building建议：这些都是从Unity文档里引用的话，但我们标记了在最终版本大小和表现方面最有效的部分。根据项目的不同，在Texture Importer里给所有压缩纹理定义Crunch纹理压缩格式；不要调用Development版本，它们是未经压缩或者最小化的，所以它们的文件会大很多；把优化等级（Optimization Level）设置成最快；如果你的版本不需要例外情况的话，在玩家设置中把Enable Exceptions（允许例外）设置成None；在玩家设置中把Strip Engine Code设置为启用（对于版本大小很重要）；当使用第三方dll的时候要小心谨慎，因为者可能会带来大量的dependency并且明显增加代码大小（对我们没有什么影响），需要补充的是，如果你的代码需要取决于Exceptions才能正常执行，把例外设置成none就可能带来不少的问题，不如调用服务器，你必须亲自测试并且找到适合你游戏的最佳方法。Profiling WebGL你可以在WebGL里使用Unity profiler，就像和其他平台一样。不过一个重要的区别之处在于，WebGL里你不能链接运行的播放器，因为WebGL使用WEbSockets作为通信方式，所以不会允许来自浏览器方面的链接。相反，你应该在版本设置里使用Autoconnect profile复选框，还需要注意的是，目前draw call还不能为WebGL做profile。Debugging WebGL这方面就祝你好运了。目前WebGL版本还没办法做debug，我们在做的时候采取了旧式的方法，并且为所有遇到问题的地方增加了Debug.log calls，每个浏览器都有自己的开发者后台，通常按F12就可以开启。浏览器兼容性也就是说，最好是考虑一些不兼容WebGL的老浏览器，比如IE，这时候最好使用Unity Web Player并且加载一个或者根据浏览器的支持程度选择另外一个。另一方面，Google Chrome完全放弃了Unity Web Player支持，所以唯一的选择就是为IE之外的所有浏览器使用WebGL。需要注明的是，这种方式非常适合Edge浏览器，据我的体验，Chrome浏览器用起来还行，火狐浏览器是使用WebGL效果最差的。内存问题这是另一个大问题，如果你分配了太多的内存，浏览器就会出问题，但如果你分配的内存不足，它又会直接崩溃，所以基本上来说，找到合适的内存分配量是靠实践的，但与此同时我们还不能在run-time期间导致崩溃。在启动的时候，有两种方式可以改变游戏内存：第一种方法是使用Unity编辑器里的玩家设定。在WebGL设定中，选择发行设定并且输入内存大小，默认是256MB，在我们的案例中，这对于发布版本已经足够了（90MB），但对于开发版本来说还不够用（大约需要300MB左右）。这时候火狐对我们来说就是最难用的，所有其他的浏览器都可以在研发版本中为研发版分配512MB的内存。当然，也并不是那么差，不过如果你的游戏比我们的还大，那么很可能你的发布版本都没办法运行。我们目前在这方面还在研究，如果有新发行会更新文章。更新：据有人在Reddit评论中提到，这是因为火狐在其他标签中已经使用了太多的内存，而不是因为它不能分配512MB的内存，关闭并重新开启火狐浏览器就可以解决了。第二种方式就是通过打开Unity生成的index.html文件内存大小的方式进行。代码如下：TOTAL_MEMORY的值来反映你的游戏内存的需求（以字节为单位），比如意味着256MB。第四，Facebook Canvas如果你希望FB登录像在iOS和安卓平台的那样，你就需要进入FB应用里的高级设置，激活Web OAuth Login设置。然后你需要增加一个Valid OAuth更改URL（可以喝你的安全URL相同），否则Facebook不会允许你保存更改的。Canvas.Pay：Bigfoot Games的小伙伴们专门发博客讲述了这个问题，你们可以。对于你希望销售的产品，一定要投入特别的注意力确定*.html文件配置。当你再次使用Unity的时候，需要记住的是自他们发布了博客之后，FB sdk已经做了些许改动，结果中不会再出现一个response.txt field参考Facebook更新指南：/docs/unity/upgrading-7.x简单总结一下：现在Method callback已经输入，而且有差异明显的result classes。比如：FB.API将会返回一个IGraphResult，而FB.Canvas.Pay则会返回一个IPayResult。在7.X SDK中，你将必须替换所有反response.txt串行序列化的代码，然后进入status field，使用更简单的方式：response.ResultDictionary[“status”]这是处理Buy按钮点击活动的method里的C#代码：这份博客中还有些没提到的是，你需要进入Facebook开发者便携版的应用配置页面，在Canvas Payments左边菜单选项创造一个新的公司，遵循这些步骤，你很快就可以掌握。有用的资源：Unity文档: /Manual/webgl.htmlFacebook文档：/docs/unity/getting-started/canvas
1.条目头条网遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.条目头条网的原创文章，请转载时务必注明文章作者和"来源：条目头条网"，不尊重原创的行为条目网或将追究责任；3.作者投稿可能会经条目头条网编辑修改或补充。
关注微信公众号，了解最新精彩内容有人用U3D的webGL吗，今天试了一下感觉好牛【unity3d吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：74,549贴子：
有人用U3D的webGL吗，今天试了一下感觉好牛收藏
我是工作做手机h5的，主要是广告推广那种专题，但一直有一颗做游戏的心，久仰unity大名，今天试了一下弄了个小球碰撞的小游戏，几行代码，加个刚体和碰撞。导出了一下webGl，用火狐打开竟然真的能用！网页3d啊！没有插件！而且超级简单！就是兼容性和稳定性还不行，一会儿就蹦出个脚本崩溃。我查看了一下导出的网页，用的是canvas，js文件里好多看不太明白的函数，不知道unity用的什么原理。我用js，canvas写一个2d的类似于弹球的小游戏，碰撞检测完全是自己写的啊，计算物体是否交叠，碰撞时的受力作用线，力分解，动量守恒，摩擦力损失。虽然都是高中的数学物理，但我也为此花了好几个小时。这还是在我会js，canvas的基础上（但只是会，水平很菜，我写动画比较多，游戏逻辑完全不懂，而且只限2d），而unity刚接触，菜单都认不全，添加个组件，调用个api，一键导出web3d。虽然现在还不能商用（不容性，老崩溃），但这个功能刚刚出来而已，一旦完善感觉会是个很牛的功能。js+canvas虽然也能写3d效果出来，但并不能使用模型素材（也许可以，但我才疏学浅不知道），这就大大限制了表现力，有高人可以js纯手写一块布料，但应用上不现实，而且我也不会。可是unity可以使用各种模型素材，如果可以无障碍的完全导出到网页，感觉天地一下就广阔了。啰啰嗦嗦这么多，就是表达一下我被shock到的感觉，感觉打开了新大门，如果有大神看来比较白痴的看法，原谅一下我这个有颗编程心的美工吧。
达内unity3d培训全程&实战教学&,unity3d金牌讲师授课.免费unity3d课程试听中!到达内unity3d学院学习unity3d,只需4个月速成unity3d游戏工程师.
我只能说，欢迎加入unitor大军欢迎入吧
郁闷了一天了都，刚有点入门又卡在webgl上了
你是怎么导出的..为什么我导出的时候会报错呢??
楼主成功的引诱了我,我也有一颗开发自己想法的游戏的心,然后给小伙伴们玩,装逼
说实话unity的网页版加载太慢了，相对于安卓版或win版等
不用插件？　　　--来自采用六颗钻石、通过工作台打造、附魔台附魔，拥有水下呼吸附魔的一副能水帖的手机。
支持楼主！
楼主能教我一下么。我打包遇到了插件冲突的问题
来火星时代学习unity3d,强大美术资源,多年游戏教学实力,20000家合作企业,毕业=就业,火星时代unity3d,业界精英一对一辅导,参与游戏实训项目,工作经验不再是零.
你好。我在苹果手机上出不来，请问什么原因？
其实用底层的方法实现更有意思，就好像孩子一样，从零开始搭建框架，最后做成游戏。
登录百度帐号推荐应用2017年3月 .NET技术大版内专家分月排行榜第三2017年2月 .NET技术大版内专家分月排行榜第三2016年9月 .NET技术大版内专家分月排行榜第三2016年8月 .NET技术大版内专家分月排行榜第三2016年7月 .NET技术大版内专家分月排行榜第三2016年3月 .NET技术大版内专家分月排行榜第三2016年1月 .NET技术大版内专家分月排行榜第三2015年12月 .NET技术大版内专家分月排行榜第三2015年11月 .NET技术大版内专家分月排行榜第三
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。技术方案（53）
WebGL关于网页端与U3D互动的传值方法
本帖最后由 sconi 于
09:47 编辑
因工作需要，所以对WEBGL进行了研究，期间遇到了挺多坑。所以针对我所遇到的坑，来做个总结。
这是我第一次发布教程类文章，所以如果有遗漏或没说清楚的地方，请留言告诉我。我也是刚刚研究，所以我无法讲清楚其中原理，所以只能写一些解决的方法，和心得体会。
测试环境：
系统：Windows7旗舰版SP1
HTTP服务器：Nodejs //可选服务器,浏览器也可直接运行。
版本：.5.0f3
浏览器：火狐51.0.1 (32 位)
语言：c# javascript html
一个DEMO：
http://hecom.in/lab/webgl-chat/
实现方法：
首先发布Webgl，需要下载的支持组件，自动下载。
123.gif (90.54 KB, 下载次数: 0)
18:22 上传
安装完毕后，即可发布WebGL版本了。
我第一次发布的时候遇到了错误，没有查询到有用的资料，后来翻墙谷歌也无果。无奈，就将所有脚本剪切出项目，排除脚本，发现可以发布，于是再将脚本分批导入，排查。发现在原项目中使用了Forms控件，应该是Windows控件造成的。using System.Windows.F//控件本身没有问题，注释相关函数即可生成WebGL。
这是遇到第一个问题，原因应该是U3D的WebGL不支持Forms控件，想想也对。
发布是很简单的，但原项目Mysql不能读取,国内无法获取到有用的信息，翻墙谷歌查找资料，发现WEBGL不支持直连数据库，这耗费了我一天的时间。
查找资料的结果是要通过WEB端获取数据库的值，传值给U3D执行。
大致的流程是 Mysql-&Web-&Javascript-& 。
通过翻墙谷歌找到一个日本开发者的博客，非常详实的介绍了WebGL
博客地址：
解决的办法：
这是WEB端的代码，通过JavaScript传值给U3D。
在U3D生成的index.html复制一份，改个名字，这样新生成的就不会覆盖修改后的了。
WEB端代码（基本是最小WEBGL框架了）：
[HTML] 纯文本查看 复制代码&01020304050607080910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182&!DOCTYPE html&&html&&&&&&&head&&&&&&&&&&meta charset="UTF-8"&&&&&&&&&&title&测试Uweb&/title&&&&&&&&&&script src="TemplateData/UnityProgress.js"&&/script&&&&&&&&&&link rel="stylesheet" href="TemplateData/style.css"&&&&&&&&&&link rel="shortcut icon" href="TemplateData/favicon.ico" /&&&&&&&&&&style type="text/css"&&&&&&&&&&&&&.Main {&&&&&&&&&&&&&&&&width: 100%;&&&&&&&&&&&&&&&&height: 100%;&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&&&&&&.MainLeft {&&&&&&&&&&&&&&&&width: 200&&&&&&&&&&&&&&&&float:&&&&&&&&&&&&}&&&&&&&&&&&&&&&&&&&&&&&&&.MainRight {&&&&&&&&&&&&&&&&width: 800&&&&&&&&&&&&&&&&height: 600&&&&&&&&&&&&&&&&float:&&&&&&&&&&&&}&&&&&&&&&/style&&&&&&/head&&&&&&&body&&&&&&&&&&&&&&&&&&div class="Main"&&&&&&&&&&&&&&div style="font-size: 18text-align:"&&&&&&&&&&&&&&&&&&h3&WebGL-测试&/h3&&&&&&&&&&&&&&/div&&&&&&&&&&&&&&div class="MainLeft"&&&&&&&&&&&&&&&&&&div&&&&&&&&&&&&&&&&&&&&&&form&&&&&&&&&&&&&&&&&&&&&&&&&&div&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&label&字符串数据&/label&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&input type="text" value="1" id="storeID" placeholder="测试数据"&&&&&&&&&&&&&&&&&&&&&&&&&&/div& &&&&&&&&&&&&&&&&&&&&&&&&&button type="button" &提交&/button&&&&&&&&&&&&&&&&&&&&&&/form&&&&&&&&&&&&&&&&&&/div&&&&&&&&&&&&&&/div&&&&&&&&&&&&&&div class="MainRight"&&&&&&&&&&&&&&&&&&canvas class="emscripten" id="canvas" style=" height: 500width: 600margin: 0;padding: 0;display:"&&/canvas&&&&&&&&&&&&&&/div&&&&&&&&&&/div&&&&&&&&&&div style="font-size: 18text-align:"&&&&&&&&&&&&&&h3&By Code Sconi&/h3&&&&&&&&&&/div&&&&&&&&&&/div&&&&&&/body&&&&&&&&&&script type="text/javascript"&&&&&&&&&//按钮点击事件id为print()&&&&&&&&function print() {&&&&&&&&&&&&//获取ID名为storeID的Value的值，赋值给sID&&&&&&&&&&&&var sID = document.getElementById("storeID"). &&&&&&&&&&&&console.log(sID);&&&&&&&&&&&&//传参到U3D场景内Button挂载脚本的OnClickText函数，参数为一个字符串&&&&&&&&&&&&SendMessage("Button", "OnClickText", sID);&&&&&&&&}&&&&&/script&&&&&&&&&&script type='text/javascript'&&&&&&&&&var Module = {&&&&&&&&&&&&TOTAL_MEMORY: ,&&&&&&&&&&&&errorhandler: null, // arguments: err, url, line. This function must return 'true' if the error is handled, otherwise 'false'&&&&&&&&&&&&compatibilitycheck: null,&&&&&&&&&&&&backgroundColor: "#ffffff",&&&&&&&&&&&&splashStyle: "Light",&&&&&&&&&&&&dataUrl: "Development/public.data",&&&&&&&&&&&&codeUrl: "Development/public.js",&&&&&&&&&&&&asmUrl: "Development/public.asm.js",&&&&&&&&&&&&memUrl: "Development/public.mem",&&&&&&&&};&&&&&/script&&&&&&&&&&script src="Development/UnityLoader.js"&&/script&&&/html&
SendMessage是WEBGL的通信方法，其结构为：SendMessage(“场景内物体名”,”挂载脚本内函数名”,参数);。
这样就将Input输入的内容传值到，U3D场景内的一个名称为“Button”的游戏物体，挂载的脚本内名为“OnClickText”函数，其参数为Input的值。
如果不写参数，那么会直接执行指定的函数。
Html和JavaScript的教程可以到： 菜鸟教程网站获取。
接下来是U3D端的代码：
[C#] 纯文本查看 复制代码&0102030405060708091011using System.Cusing System.Collections.Gusing UnityEusing UnityEngine.UI; &public class TestClickShell : MonoBehaviour { &&&&public Text WebT&&&&public void OnClickText(string abc)&&&&{ &&&&&&&&WebText.text =& &&&&}}
这样就将abc的值传递到U3D的函数内，并执行函数了。就可以通过WEB端的按钮来控制场景的变化。
但我要做到的是要传递多个参数到U3D，所以这个方法要扩展一下，不假思索我首先尝试了这个：
[JavaScript] 纯文本查看 复制代码&SendMessage("Button", "OnClickText",abc,12);
[JavaScript] 纯文本查看 复制代码&SendMessage("Button", "OnClickText",abc+12);
[C#] 纯文本查看 复制代码&public void OnClickText(string abc,int number);
提示如下错误：
Failed to call function OnClickText of class TestClickShell Calling function OnClickText With1 parameter but the function requires 2.
函数需要2个参数，只传递了一个参数，错误；
又试了好多方法，都不行。
如果成功就见鬼了，所以我没搞清原理，就想当然了，于是翻山越岭找到一篇美帝的博客：-communication-and-back-again/
文章说，U3D只接受一个字符串（我试了Int也行），但只接收一个。
该博文还介绍了如何用分隔符来获取多个数值，找到宝藏了，于是修改为：
Javascript的传值方法：(替换HTML内的js代码，值的获取对照复制即可) [JavaScript] 纯文本查看 复制代码&SendMessage("Button","OnClickText",abc+'~'+abc+'~'+abc);通过建立分割符来分割不同参数，用连接串将不同参数连接起来。
U3D的接收方法：U3D的c#函数只能接收一个字符串参数。通过建立数组，使用自建分隔符str.Split(‘~’); 来，获取到多个数值。
[C#] 纯文本查看 复制代码&01020304050607080910111213141516using System.Cusing System.Collections.Gusing UnityEusing UnityEngine.UI; &public class TestClickShell : MonoBehaviour {public Text textGo;public Text intGo;public Text floatGo;public void OnClickText(string str)&&&{&&&&&string[] words = str.Split('~');&&&&&textGo.text = words[0];&&&&&intGo.text = words[1];&&&&&floatGo.text = words[2];&&&}}
OK这样，多值传递也可以了，这的确用了我几天的时间，也是非常有乐趣的几天。
这实现起来是很简单的，只是官方手册和国内资料，不够详尽，始终无法理解透彻，所以我翻山越岭总算解决了这些小问题。
这是我的第一篇，希望是个好的开端，我认为我说的一些可能不那么专业，但我尽力了。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：6661次
排名：千里之外
原创：43篇
转载：20篇
(5)(22)(7)(29)