▓神来棋牌A9602点com ▓拥有多年专业标准化的网络服务的经验,神来棋牌凭借对互联网产品的深耕经验及对App的持续研究,神来棋牌app已成为国内最专业、服务最好的平台App,龙城棋牌平台欢迎您!神来棋牌,神来棋牌APP,神来棋牌平台,神来棋牌注册开户,神来棋牌官方಻
当前位置:主页 > Web前端 > 正文

Web前端胡文峰的技术博客

11-14 Web前端

Web前端最近都在跨界!!现在又伸手到游戏领域了。但是真的那么好跨界吗?请让我一一道来   Canvas和WebGL的出现其实让Web游戏有了实现的可能,但是让我们用ctx一个个画,效率还是低了点,所以需要游戏引擎。它帮助我们去动态渲染游戏每一帧的元素   业界比较著名的几个H5游戏引擎,有Egret(白鹭),Layabox,Three.js,coco2d-js等等,详情可以看知乎的回答   因为我们团队不是一开始做游戏的,我们是传统意义上的前端团队,从web发家的,起初做的是电商类的业务拍拍。所以这里我们综合几家游戏引擎,选择了Layabox   其实我们团队之前也是做得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网页来编写,这样才是物尽其用的做法   在这个背景下,游戏开发的前端需要掌握多好几种技能简单的游戏开发的技能、重构部分的构建技能(团队大前端的趋势下,去除重构岗位,重构工作由前端接管),可以说工作量翻了一倍。但是在业务侧来考虑,因为减少了相关的中间环节,需求迭代可以更快速的落地   LayaIDE提供一个组件库,如list列表,tab按钮切换等等简单的Web组件,可以直接拖拽使用而不用自己用代码再实现一次   但是IDE自带的很多组件有坑点,如list组件的selectHandler触发并不灵敏,数据源重新绑定后会出现点击无法响应的问题,这个时候要绑定mouseHanlder来代替点击事件等   IDE的使用对于不熟悉的人来说上手并不简单,熟练后可以提高效率。具体可以看官网的介绍   这个属性是IDE的一个配置属性,在引用的时候并不会起作用。可以理解为是一个IDE的背景色,可以让你在用IDE编辑的时候看的更清楚   一般组件view下不管嵌套的层级多深,只要有一个var属性的命名,都可以用this.xxx来获取到这个var属性得带组件的引用,并对其进行逻辑操作   而name在特定的组件内name有自己的命名规则,如list下的box,命名为render,可以自动识别该box为list内部渲染节点,设置list的repeat等值,直接简便的实现某些功能   再譬如dialog界面,我们设置btn的name为close、yes、no等值,可以直接实现关闭dialog窗口的功能等等。name在这个组件下面也是唯一的,可以用来区分不同的组件   解决方法: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里面设定的宽高,当然如果你害怕上面提到的点不到,也可以设定一个非常大的值   如果你抛弃了jQuery和Zepto等懒得写extend方法,又拥抱了ES6,那你可以像我这样找polyfill来兼容,这里babel官方有个模块   如图,下边是没有优化前的,锯齿严重。上边那个图是优化后的,明显边框清晰了很多   这里之前的思路是矩形头像和mask遮罩为一个整体在前面,然后内边框和外边框层级在后面,但是这样的话,mask遮罩部分现在laya还不会抗锯齿,所以这里对公共头像组件进行参数扩展,加了zOrder参数。让边框盖在头像上,就可以达到抗锯齿的作用   这个不用自己算了,Laya.Broswer现在可以获取得到了。简化了运算过程   Laya.class定义的时候会在原型定义.super方法,直接用就好。两种用法等价,但是看起来.super更简单把 神来棋牌 神来棋牌app 神来棋牌手机版官网 神来棋牌游戏大厅 神来棋牌官方下载 神来棋牌安卓免费下载 神来棋牌手机版 神来棋牌大全下载安装 神来棋牌手机免费下载 神来棋牌官网免费下载 手机版神来棋牌 神来棋牌安卓版下载安装 神来棋牌官方正版下载 神来棋牌app官网下载 神来棋牌安卓版 神来棋牌app最新版 神来棋牌旧版本 神来棋牌官网ios 神来棋牌我下载过的 神来棋牌官方最新 神来棋牌安卓 神来棋牌每个版本 神来棋牌下载app 神来棋牌手游官网下载 老版神来棋牌下载app 神来棋牌真人下载 神来棋牌软件大全 神来棋牌ios下载 神来棋牌ios苹果版 神来棋牌官网下载 神来棋牌下载老版本 最新版神来棋牌 神来棋牌二维码 老版神来棋牌 神来棋牌推荐 神来棋牌苹果版官方下载 神来棋牌苹果手机版下载安装 神来棋牌手机版 神来棋牌怎么下载



相关推荐:



版权保护: 本文由 主页 原创,转载请保留链接: http://www.furiku.comhttp://www.furiku.com/html/332.html

博客主人YeLongCu
男,文化程度不高性格有点犯二,已经20来岁至今未婚,闲着没事喜欢研究各种代码,资深技术宅。
  • 文章总数
  • 47255访问次数
  • 建站天数
  • 标签

    友情链接