⼩游戏开发总结
者有了开发游戏的能⼒。⼩游戏没有WXSS、WXML、多页⾯等内容,但加了⼀些渲染、⽂件系统以及后台多线程的功能。
⼩游戏的运⾏环境是⼩程序环境的扩展,基本思路也是封装必要的 WEB 接⼝提供给⽤户,尽可能追求和 WEB 同样的开发体验。⼩游戏在⼩程序环境的基础上提供了 WebGL 接⼝的封装,使得渲染能⼒和性能有了⼤幅度提升。不过由于这些接⼝都是团队通过⾃研的原⽣实现封装的,所以并不可以等同为浏览器环境。
⼩游戏的运⾏环境在 iOS 上是 JavaScriptCore(注:webkit的⼀个重要组成部分,主要是对JS进⾏解析和提供执⾏环境。),在 Android
上是 V8 (这个不⽤多说Node.js⽬前使⽤的就是V8)。但是两个都没有 BOM 和 DOM 的运⾏环境,没有全局的document和window对象。
⼩游戏 VS H5游戏 VS ⼩程序对⽐图
第三⽅代码适配(Adapter)
主要⽬的提供 BOM 和 DOM 的运⾏环境。
由上图可以看出,因为没有 BOM 和 DOM 的运⾏环境,没有全局的document和window对象。为了让基于浏览器环境(上图的H5游戏)的第三⽅代码更快地适配⼩游戏运⾏环境,所以就有了适配器(Adapter)。它是⽤ API 模拟 BOM 和 DOM 的代码组成的库,抽象的代码层,可以根据⾃⼰的需要去实现相关⽅法。
例如,简单实现atElement⽅法:
var document = {
createElement: function (tagName) {
tagName = LowerCase()
if (tagName === 'canvas') {
ateCanvas()
}
else if (tagName === 'image') {
ateImage()
}
}
}
Adapter是否使⽤由开发者⾃⼰决定。不使⽤Adapter时,可以通过提供的API实现相应的⽅法,但不能使⽤ DOM API 来创建 Canvas 和Image 等元素。
有的游戏引擎是直接调⽤DOM API,和访问DOM属性,所以记得使⽤Adapter让游戏引擎适配⼩游戏的运⾏环境,保证游戏引擎在调⽤DOM API 和访问 DOM 属性时不会产⽣错误。
官⽅实现了⼀个⼩游戏适配器,但仅仅只针对游戏引擎可能访问的属性和调⽤的⽅法进⾏了模拟,也不保证所有游戏引擎都能通过weapp-adapter 能顺利⽆缝接⼊⼩游戏。这⾥将 weapp-adapter 适配器提供给开发者,更多地是让开发者作为参考,让开发者可以根据需要在 weapp-adapter 的基础上进⾏扩展,以适配⾃⼰项⽬使⽤的游戏引擎。weapp-adapter 会预先调⽤wx.createCanvas()创建⼀个上屏Canvas,并暴露为⼀个全局变量canvas。
require('./weapp-adapter');
var context = Context('2d');
context.fillStyle = 'red';
context.fillRect(0, 0, 100, 100);
weapp-adapter 适配器提供了以下对象和⽅法:
canvas.addEventListener
localStorage
Audio
Image
WebSocket
XMLHttpRequest
其实官⽅⽂档⾥⾯还有很多,感兴趣可以查看官⽅。
⼩游戏的模块化
⼩游戏提供了 CommonJS 风格的模块 API,可以通过ports和exports导出模块,通过require引⼊模块。这⾥就不⽤多解释了,其实⼤家按正常的编码习惯编码就可以了。
var image = new Image()
var context = Context('2d')
context.drawImage(image, x, y)
}
image.src = 'res/image/logo.png'
}
所以⼩游戏对编码⽅⾯的基础能⼒还是很友善的。
⼩游戏能⼒
这⾥列出部分已提供的 API 能⼒,更详细的能⼒及官⽅实例可访问。
⼤家对 Canvas 的优化或者对离屏画布不了解的可以看这篇⽂章。
⼩游戏引擎
游戏引擎是指⼀些已编写好的可编辑电脑游戏系统或者⼀些交互式实时图像应⽤程序的核⼼组件。这些系统为游戏设计者提供各种编写游戏所需的各种⼯具,其⽬的在于让游戏设计者能容易和快速地做出游戏程式⽽不⽤由零开始。
Cocos、Egret、Laya 已经完成了⾃⾝引擎及其⼯具对⼩游戏的适配和⽀持:
Three.js 是⼀款运⾏在浏览器中的 3D 引擎,你可以⽤它创建各种三维场景,包括了摄影机、光影、材质等各种对象
2D、3D、VR的⽀持
性能
从开发者的反馈来说,Layabox本来就是⾯向⼤型游戏的H5游戏引擎,性能优势是⽏庸质疑的。
设计理念与定位
⼯作流⽀持⼒度
⼯具链的提供与⽀持也是⼀种选择考量要素,⽐如UI编辑器、粒⼦编辑器、⾻骼编辑器、场景编辑器等等,如果引擎⽅直接提供或⽀持,那么将会较⼤的提升研发效率。Egret、Layabox、Cocos2d-JS这三个引擎在⼯具链⽅⾯提供⾜够全⾯的⽀撑。
引擎的应⽤⼴度
Egret成名⽐较早,发展得⽐较快,各⽅⾯的资源⽽⽐较多,提供了全套开发流⼯具。
⽤游戏引擎的优点:开发快,可维护性⾼
⽤游戏引擎的缺点:牺牲⼀些性能,⼩游戏⽤不⽤引擎⼏乎感受不到性能差异。⼤游戏为了开发效率和可维护性,⼀般都会使⽤游戏引擎。
⼩游戏实战总结
本次主要实现的是跳⼀跳⼩游戏。游戏⼤概如下:
跳⼀跳如何技术实现可以参考:
层级划分
景物层:负责两侧树叶装饰的渲染,实现其⽆限循环滑动的动画效果;
阶梯层:负责阶梯和机器⼈的渲染,实现阶梯的随机⽣成与⾃动掉落阶砖、机器⼈的操控;
背景层:负责背景底⾊的渲染,以及开始结束⾯板渲染。
通过requestAnimationFrame循环调⽤⼀定次数来实现动画效果。游戏的逻辑通过监听全局的canvas对象实现。
分层按顺序叠加绘⾄画布,先将背景绘上,通过算法计算出台阶位置,结合上⼀次的位置⽤requestAnimationFrame实现移位⽣成新的台阶,机器⼈单独抽离出来的,没有和台阶⼀起实现,通过位置计算,得到机器⼈的位置,绘制字台阶上,最后将顶层的树叶绘制上。
⼩游戏开发难点
⾸先,⼩游戏使⽤JavaScript语⾔开发,不存在HTML,CSS,所以需要对JavaScript语⾔,Canvas对象操作熟练。
其次,和H5版游戏开发区别并不⼤,但是⼩游戏⽀持的库较少,并且⼤部分H5版开发所使⽤的到的库是不⽀持的。
还有,就是H5版游戏的实现⽅式选择性更多,⽐如跳⼀跳原版是使⽤createjs开发,⽽⼩游戏版并不能⽀持所有的引擎,只能通过上⾯的⼏个引擎改造适配。
⼩游戏优化
为什么要优化?其实为了提⾼页⾯加载速度,减少游戏运⾏中的卡顿,使动画看起来更流畅,游戏的流畅程度及画⾯直接影响了⽤户体验。以下提供了⼏个优化⽅案。
javascript游戏引擎GC优化
⼩游戏的优化⽂档并未指出,在api中提供⼀个性能管理器,通过获取性能管理器能够调⽤ API 加快触发 GC ,GC 时机是由JavaScrpitCore / V8 来控制的,不能保证调⽤后马上触发 GC。
setData调⽤次数优化
⼩程序端,官⽅不建议频繁调⽤setData,⼤图⽚和长列表图⽚,都有可能导致 iOS 客户端内存占⽤上升,从⽽触发系统回收⼩程序页⾯。
减⼩代码包
尽量减⼩代码包的⼤⼩,代码包直接影响了下载速度,从⽽影响⽤户的⾸次打开体验。
控制图⽚资源
控制代码包内图⽚资源,⼩程序代码包经过编译后,会放在的 CDN 上供⽤户下载,CDN 开启了 GZIP 压缩,所以⽤户下载的是压缩后的 GZIP 包,其⼤⼩⽐代码包原体积会更⼩。但我们分析数据发现,不同⼩程序之间的代码包压缩⽐差异也挺⼤的,部分可以达到 30%,⽽部分只有 80%,⽽造成这部分差异的⼀个原因,就是图⽚资源的使⽤。GZIP 对基于⽂本资源的压缩效果最好,在压缩较⼤⽂件时往往可⾼达 70%-80% 的压缩率,⽽如果对已经压缩的资源(例如⼤多数的图⽚格式)则效果甚微。
清除⽆⽤资源
及时清理没有使⽤到的代码和资源,⼩程序打包是会将⼯程下所有⽂件都打⼊代码包内,也就是说,这些没有被实际使⽤到的库⽂件和资源也会被打⼊到代码包⾥,从⽽影响到整体代码包的⼤⼩。
fps调优
使⽤requestAnimationFrame实现动画时,调整到合适的渲染fps(帧率)。
遇到的问题
图⽚尺⼨问题?
⼩游戏中图⽚对尺⼨限制在2048像素,长宽要⼩于等于2048像素。
对外开放?
⼩游戏对外没有开放注册⼊⼝,现在能使⽤的是前两天在⼩程序中开放的游戏类⽬,将⼩程序类别设定为游戏类⽬可开发⼩游戏,不确定以后是否以这种⽅式注册,或者是单独开放⼩游戏的注册⼊⼝,两者⽬前没发现有什么区别。
官⽅⽬前没有提供对外发布,登录后台能够点击发布,但是需要上传软件著作权证书等⼀系列,所以没有进⾏下去,不确定能否对外发布成功。
关于⼩游戏代码体积⼤⼩?
关于⼩游戏体积问题,⼩游戏的体积不得⼤于 4M,缓存不得⼤于 50M。
具体的解释为:本地的代码和资源不得超过 4M。单个⼩游戏项⽬缓存的⽂件不能超过 50M,⽬前当缓存超过 50M 时后续的资源将不会缓存,未来新版的 AssetsManager 将会允许开发者⾃定义哪些资源需要缓存的机制。不允许从服务器下载脚本⽂件。
不允许动态执⾏代码?
不允许动态执⾏代码的能⼒,eval、setTimeout和setInterval函数的第⼀个参数不能为字符串,Function构造函数的参数不能为字符串。
开发问题
游戏逻辑没处理好,动画有点不流畅,有延时问题。
作者:
链接:
著作权归作者所有。商业转载请联系作者获得授权,⾮商业转载请注明出处。
作者:⼀只奇妙的⼩猪
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论