Web前端可以转行做游戏吗?
作者:ManfredHu
链接:http://www.manfredhu.com/2018/03/15/31-laya-game-tips/index.html
声明:版权所有,转载请保留本段信息,谢谢大家
LayaBox
Web前端最近都在跨界!!现在又伸手到游戏领域了。但是真的那么好跨界吗?请让我一一道来。
Canvas和WebGL的出现其实让Web游戏有了实现的可能,但是让我们用ctx一个个画,效率还是低了点,所以需要游戏引擎。它帮助我们去动态渲染游戏每一帧的元素。
业界比较著名的几个H5游戏引擎,有Egret(白鹭),Layabox,Three.js,coco2d-js等等,详情可以看知乎的回答。
因为我们团队不是一开始做游戏的,我们是传统意义上的前端团队,从web发家的,起初做的是电商类的业务——拍拍。所以这里我们综合几家游戏引擎,选择了Layabox。
有如下有点吧:
- LayaAir是一个优秀的适用于多端的游戏引擎,配备有丰富的组件,有自己的IDE可以快速构建布局等,不需要写类似CSS的代码
- 支持html的页面渲染,就是说你可以让游戏引擎跟web页面,混用(这在一些类似文本的页面非常有用)
- 支持2D、3D甚至VR方面的开发。性能也足够优秀
- 对Web前端普遍的上手难度也较其他引擎框架简单很多
- 不需要写重构(CSS)代码
其实我们团队之前也是做得H5竞猜小游戏,不过是基于DOM的,用CSS3做动画。但是发现CSS3操作复杂动画,有很多缺点:
- 复杂动画支持度非常差
- 页面元素太多,渲染性能差
- 很多复杂的需求做起来很耗时
- 玩家手机容易发烫(页面元素多,动画复杂)
因此,我们经过预研和讨论,果断走出传统Web的开发模式,拥抱传统的游戏开发!!当然这里肯定不是一帆风顺的,从Web前端转向游戏开发,还是有非常多的坑点的。
首先需要摆脱HTML和CSS,你不是在做页面,你是在做一个游戏!!游戏的逻辑占据了一个游戏80%的工作量,所以你很多时候是在写JavaScript代码,这不是问题,其次,你需要拥有面向对象编程的思想。这可能是很多老前端欠缺的,因为JavaScirpt说到底是一门面向函数、面向过程的语言。大家知道模块化,但是却还是习惯写function
而不是ES6的class
。
这里因为平台也在转型向ES6靠近,所以大胆采用了ES6+Babel+Webpack
的模式,甚至于在做Weex、小程序、Web三端融合。即一份代码,可以在三个平台跑。扯的有点远哈,下面开始正文,我们不说用法,具体是说一些坑点,和优缺点对比。
游戏引擎不适用的地方
游戏引擎这东西在动画一块是真心好用,可以高度还原设计师的动画,可是其没有网页的排版布局,更多的布局应该是通过x、y、更改pivot、anchor属性来实现。
CSS可以很快速的通过代码进行相关布局(flex、float、position等属性),网页那种自上而下的内容排版可以自动适应内容,对文字处理十分便捷。
针对各自的优缺点,从实现的便捷性来说,游戏主场景(动画极多)的情况下,为了提高用户的体验,应该用游戏引擎来写。
而对一些活动浮层、投注记录、游戏规则等有大量图片文本的页面,应该用传统的Web网页来编写,这样才是物尽其用的做法。
在这个背景下,游戏开发的前端需要掌握多好几种技能——简单的游戏开发的技能、重构部分的构建技能(团队大前端的趋势下,去除重构岗位,重构工作由前端接管),可以说工作量翻了一倍。但是在业务侧来考虑,因为减少了相关的中间环节,需求迭代可以更快速的落地。
Laya的IDE使用要注意的地方
LayaIDE提供一个组件库,如list列表,tab按钮切换等等简单的Web组件,可以直接拖拽使用而不用自己用代码再实现一次。
但是IDE自带的很多组件有坑点,如list组件的selectHandler触发并不灵敏,数据源重新绑定后会出现点击无法响应的问题,这个时候要绑定mouseHanlder来代替点击事件等。
IDE的使用对于不熟悉的人来说上手并不简单,熟练后可以提高效率。具体可以看官网的介绍。
sceneColor并不起作用
这个属性是IDE的一个配置属性,在引用的时候并不会起作用。可以理解为是一个IDE的背景色,可以让你在用IDE编辑的时候看的更清楚。sceneColor并不起作用
如果你需要更换背景色,应该通过绘制一个底部的矩形来实现。
1
|
this.graphics.drawRect(0, 0, this.stage.width, this.stage.height, '#404d6f'); //设置背景颜色
|
var和name
var
一般组件view下不管嵌套的层级多深,只要有一个var属性的命名,都可以用this.xxx
来获取到这个var属性得带组件的引用,并对其进行逻辑操作。
name
而name在特定的组件内name有自己的命名规则,如list下的box,命名为render,可以自动识别该box为list内部渲染节点,设置list的repeat等值,直接简便的实现某些功能。
再譬如dialog界面,我们设置btn的name为close、yes、no等值,可以直接实现关闭dialog窗口的功能等等。name在这个组件下面也是唯一的,可以用来区分不同的组件。
top、right对x,y的影响
如果组件设置了top、right等值,在对其进行x,y变化是无效的。
解决方法:IDE通过这些属性设置好布局要取消掉,会转化为对应的x、y值,此时可以操作
图集图片过大导致图片加载失败
之前按照引擎官方人员的建议设置最大合集图片为2048乘以2048,后面经过我们的测试发现1024宽高比较适配大部分机型,即图片最大不能超过1024,否则微信手Q会有图片load时间过长导致失败的问题。
这里可能是部分合并的大图片下载失败,也可能是全部下载失败。然后引擎会单独去下载每个碎片文件,而服务器是没有这些文件的,导致下载全部返回404。应该尽量避免这种情况发生。
显示区域与点击区域并不完全相等
用一句话来说就是:你看到的并不一定是真实的。如我要完成收起按钮,然后隐藏整个浮层。
但是你明明可以看到,绑定的点击事件却没有触发。
这是因为这个层级的高度或者宽度太小,被遮挡这部分是不会触发的。但是是可见的
分离代码和工程
起初是因为不想在LayaIDE下写代码,所以分成了两部分,后面发现这种形式还是非常OK的,因为Laya工作人员不是传统前端开发,他们的IDE是类似Atom的Electron做的,所以其实运行起来编码体验并不是太好。其次是因为IDE会生成图片(png)和图集(atlas)文件,这些图片类的静态资源,更新频率还是非常高的。如果你只需要修改代码,或者只要修改图片图集,发布一次就好了,不需要同时发布两种。
这样的分离,代码你可以按照你喜欢的方式来写,比如webpack配置工程,比如文件摆放,该怎么放怎么放。再把Laya生成的东西拷贝进来就好了。
设计稿和工程大小
这里我们设计稿和IDE的宽度高度是完全对应的,所以不存在换算的问题。也不需要类似CSS的做REM兼容等等操作。你设定宽度是750,高度会自动拉伸,但是显示的页面层级,需要在初始化的时候拉伸一下,不然还是IDE里面设定的宽高,当然如果你害怕上面提到的点不到,也可以设定一个非常大的值。
Object.assign兼容
Object.assign是ECMAScript标准的合并对象属性的方法,类似有jQuery的extend等等。
如果你抛弃了jQuery和Zepto等懒得写extend方法,又拥抱了ES6,那你可以像我这样找polyfill来兼容,这里babel官方有个模块
也可以自己选择做兼容,在入口开始的时候载入兼容文件就好。
抗锯齿问题
这个问题是在WebGL下(Canvas不会),会出现graphics.drawCircle
绘制的圆环有锯齿问题。如下图:锯齿问题
左边为没有设置抗锯齿,右边设置了抗锯齿。
1
2
|
Laya.Config.isAntialias=true; //开启抗锯齿,会消耗一些性能
Laya.init(Browser.clientWidth, Browser.clientHeight, WebGL);
|
mask遮罩不支持抗锯齿
有无锯齿处理的区别
如图,下边是没有优化前的,锯齿严重。上边那个图是优化后的,明显边框清晰了很多。
这里之前的思路是矩形头像和mask遮罩为一个整体在前面,然后内边框和外边框层级在后面,但是这样的话,mask遮罩部分现在laya还不会抗锯齿,所以这里对公共头像组件进行参数扩展,加了zOrder参数。让边框盖在头像上,就可以达到抗锯齿的作用。
最后实现的思路如下图层级所示。头像层级
Laya几种优化的写法
用Laya自带的属性获取像素比
1
2
3
|
//var browserHeight = document.body.scrollHeight * window.devicePixelRatio;
var browserHeight = Laya.Browser.height;//会考虑设备像素比,而且会针对特定机型调整补全
`
|
这个不用自己算了,Laya.Broswer
现在可以获取得到了。简化了运算过程
用.super()方法继承父类
Laya.class定义的时候会在原型定义.super方法,直接用就好。两种用法等价,但是看起来.super更简单把?
可能有一些例子是通过xxx._super.call(this)
继承父类的,其实直接xxx.super(this)
就好了。_super
还是看成私有属性好了。
Web前端可以转行做游戏吗?的更多相关文章
- WEB前端工程师如何做职业规划?
对于一个WEB前端的职业规划,其实是有各种的答案,没有哪种答案是完全正确的,全凭自己的选择,只要是自己选定了,坚持去认真走,就好.在这里, 我只是 简要说一下自己对于这块儿内容的理解.有一个观点想要分 ...
- web前端工程师在移动互联网时代里的地位问题
支付宝十周年推出了一个新产品:支付宝的十年账单,我也赶个时髦查看了一下我的支付宝十年账单,哎,感慨自己真是太屌丝了,不过这只是说明我使用淘宝少了,当我大规模网上购物时候,我很讨厌慢速的快递,所以我大部 ...
- 什么是web前端开发?
Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发.完成客户端程序(也就是浏览器端)的开发,开发JavaScript以及F ...
- web前端工程师在移动互联网时代里的地位问题 为啥C/S系统在PC端没有流行起来,却在移动互联网下流行了起来 为啥移动端的浏览器在很多应用里都是靠边站,人们更加倾向于先麻烦自己一下,下载安装个客户端APP
web前端工程师在移动互联网时代里的地位问题 支付宝十周年推出了一个新产品:支付宝的十年账单,我也赶个时髦查看了一下我的支付宝十年账单,哎,感慨自己真是太屌丝了,不过这只是说明我使用淘宝少了,当我大规 ...
- 转 WEB前端性能分析--工具篇
在线网站类: WebPageTest 说明: 在线的站点性能评测网站,地址http://www.webpagetest.org/ 补充: 其实这网站也是个开源项目,所以支持自己搭建一个内部的测试站点 ...
- 如何正确学习web前端流程以及如何找工作
解释一下web前端工作是做啥的,Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发.完成客户端程序(也就是浏览器端)的开发 ...
- 范仁义web前端介绍课程---2、web前端是干嘛的
范仁义web前端介绍课程---2.web前端是干嘛的 一.总结 一句话总结: 前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技 ...
- 转行做web前端,该如何进行短期快速自学,达到高新就业水平
就目前来说,毕业生如果想毕业就找到高薪的工作,互联网成为了第一个选择,在所有的职业中,不靠任何关系,全凭自己的能力就业,就是程序开发,而web前端开发是目最很热门的行业,在未来五年之内,web前端开发 ...
- 想转行做web前端工程师,必学这6大技能
web前端工程师是近几年才发展出来的新兴职业,也是目前火爆且高薪的职业.大需求的市场环境下,出现了越来越多的人群转行做web前端工程师,如设计师.后台程序员.网虫.大学其他专业.策划.编辑等等. 要学 ...
随机推荐
- Linux上安装pip以及setuptools
毕竟丰富的第三方库是python的优势所在,为了更加方便的安装第三方库,使用pip命令,我们需要进行相应的安装. 1.安装pip前需要前置安装setuptools 命令如下: wget --no-ch ...
- 【Django错误】OSError: raw write() returned invalid length 14 (should have been between 0 and 7)
错误环境 使用Django框架创建完models类的之后,用python manage.py migrate命令来生成数据库表的时候出错 错误代码 Operations to perform: App ...
- mysql删除重复数据,保留最新的那一条
因为数据库没键外键,在关联查询的时候,会碰到查询条数多余数据库实际条数,这因为关联字段在表中有重复值而导致的. 解决方案: 1.数据库脚本删除重复数据,保留最新的一条 2.对关联字段增加唯一约束 例如 ...
- linux系统压缩\解压命令详解
转自:http://www.cnblogs.com/qq78292959/archive/2011/07/06/2099427.html. tar -c: 建立压缩档案-x:解压-t:查看内容-r:向 ...
- Linux的日志管理
Linux日志的管理 日志:记录了你几乎所有的操作记录,用于系统的审核,故障的排除.日志文件永久存放在日志目录中,系统日志保存在/var/log中 rsyslog 按照日志类型分类,把所有日志记录到/ ...
- jsonp解决跨域问题
日常开发网页中,时常遇到跨域问题,通常解决办法:后端提供的接口支持jsonp格式,前端采用dataType:jsonp. 一:Jquery封装的AJAX,dataType:jsonp格式的方法: $. ...
- oracle 查看隐藏参数
隐藏参数 (hidden parameters) ,由oracle内部使用,以 '_' 开头. 可以通过以下两种方式查看所有隐藏参数: SELECT i.ksppinm name, i.ksppd ...
- jenkins slave启动报错:hudson.util.IOException2: Slave JVM has terminated. Exit code=126
添加mac slave节点报错如下:Expanded the channel window size to 4MB [11/07/14 19:11:54] [SSH] Starting slave p ...
- URAL - 1091 Tmutarakan Exams (简单容斥原理)
题意:K个不同数组成的集合,每个数都不超过S且它们的gcd>1.求这样的数的个数 分析:从2开始枚举gcd,但这样会发生重复.譬如,枚举gcd=2的集合个数和gcd=3的集合个数,枚举6的时候就 ...
- MVC[xml]页面传值
MVC 各种传值方式 ViewData传值.HomeController.cs Co de: public ActionResult Index(){ ViewData["Titl ...