怎么做H5微信小游戏?需要学习或准备些什么?

|||||||||||||||||
当前位置:&>>&&&&&正文
如何做好一款微信小游戏?
  在今天举办的2018微信公开课PRO上,官方披露了小游戏的一些相关数据,在微信9.8亿月活用户的体量下,累计已有3.1亿用户使用小游戏。从数据来看,男女不限,老少咸宜。
  具体到游戏,“跳一跳”DAU突破一亿,次日留存为 65%,三日留存为 60%,七日留存为 52%。腾讯微信团队自研的星途,DAU达到500万。
  微信团队还宣布已经与育碧就小游戏领域展开全面战略合作。育碧旗下Ketchapp将在微信平台上线数款小游戏。双方将发挥各自优势,为用户提供玩法有趣、内容丰富、体验优质的小游戏产品。
  结合今天的公开课,我们就来聊聊,如何做好一款小游戏?
  小游戏与H5、小程序的区别
  从技术层面来看,底层都是依赖于手机系统最基本能力。通过强化社交和文件系统能力(群分享、好友排行榜),小游戏优势在于磨平了平台差异性,基础能力都是双平台对齐的,降低开发成本。
  概括的说,对比H5,小游戏增加微信社交能力、文件系统、工具链等功能,去除了一些对游戏侧不重要的技术点。
  小游戏是小程序类目,但两者还有一些细微的差别。其中小游戏集成了小程序所有接口,并完善渲染、文件系统、多线程的能力,但去除了多页面等功能。
  从技术角度来说,H5转小游戏开发很简单,同时成本更低。星途团队,1个前端,0.5个后端,一周完成第一个demo。跳一跳团队,五个核心开发人员,耗费两个多月时间,前端3人,后端2人。
  从项目表现来看,同样品质的 H5 游戏,做成小游戏,留存率有 10% 的提升。斗地主团队分享,小游戏留存率甚至比H5增长了一倍多。目前团队已经在把把H5用户导入小游戏。
  微信游戏产品总监孙春光认为,对于开发者而言,在微信这个平台上小游戏比起 H5 主要有三个优势:更便捷的访问、更强大的功能、更简单的开发。
  此外,小游戏和传统 APP 游戏也不是竞争关系,而是要合作共赢。未来小游戏将和 App 游戏打通,可以在 APP 游戏中分享给微信好友小游戏及小程序,也可以通过小游戏来唤醒 App 游戏,并且这一能力将开放给所有的厂商。其中可挖掘的玩法还有很多,比如容量超过 1G 的大作,可以用小游戏来制作“试玩版”降低门槛,得到初期的曝光,培养粉丝;一些游戏内的模块也可以拆分成小游戏(比如签到、抽卡等)来维持活跃。
  由于“即点即玩”的特点,小游戏和微信其他业务完全打通以后,会有更大的想象空间。比如公众号文章下边附上小游戏,看完以后点进去就能玩;小游戏在朋友圈信息流投放广告,也能最有效的获取新用户。
  影响小游戏成败的关键
  1.分享是小游戏流量的最主要来源
  30%新用户来自分享,最优产品超过70%。平均DAU 20%用户来自分享,最优产品超50%。注册游戏用户主动分享超过10%,最优产品超20%。例如坦克大战55%新增用户是由分享带来,DAU 30%用户由分享转发带来。
  好友排行、群排行是最直接激励用户反复游戏的分享方式。另一个有效社交的设计是加入围观模式,用户实时观看好友游戏的状况。在斗地主小游戏围观模式中,好友打了一手烂牌可以丢番茄来增加互动性和趣味性。
  据官方透露,开发者们关注的关系链功能,目前已经在测试中,后续会推出。
  2.接近原生的游戏体验
  加载速度直接影响用户的第一体验。基于用户体验,微信团队规定,游戏首包4M,可支配50M,临时空间200M。4M的情况下,iOS下载4秒以内,安卓5秒以内。最核心代码应该放在首包,禁止动态更新。其他内容放在可支配50M空间中。此外临时200M需要慎用,作为共享空间,只在当前生命周期有效。据斗地主团队介绍,其首包大小在700K左右。
  通过带参数二维码分享,开发者将游戏场景进行“切片”,玩家在分享时可以具体到某个场景,无需从头开始。同时通过技术手段可以简化调用,进一步缩短加载时间。未来小游戏还将推出分包下载的功能。
  此外,迎合社交化碎片化娱乐,是几位开发者分享时共同提到的。
  3.充实内容
  无论是跳一跳还是星途(包括斗地主的经典玩法)都是非常简单,符合轻而有趣的理念。用户轻松,无需学习、结束简单、成就简单,三点造成了用户门槛极低。
  在简单之后,如何让用户不觉得腻?玩耍的同时,需要让用户产生更多情感的投入。星途的做法是查阅大量文献资料,给用户以内容,玩游戏收获知识。斗地主则是在经典玩法的基础上,还结合人工智能开发了残局玩法,用户一个人也可以游玩。跳一跳则是将游戏中的盒子变为现实中的造型,增加亲切感。
  4.产品类型的选择
  目前微信推荐了6大类、24小类是已经被验证和磨合的品类,需要通过不断迭代,在未来实现支持全品类的游戏。
  值得一提的是,目前分享的《跳一跳》、《欢乐斗地主》、《星途》都是玩法极其休闲,属于轻度游戏。MMO、MOBA、FPS等高营收的重度玩法与目前总结的轻度、有趣、碎片化相矛盾。
责任编辑:翊然
48小时点击排行
共青团中央主办 共青团中央网络影视中心承办 版权所有:中国青年网H5页面小游戏怎么做的? - 知乎524被浏览<strong class="NumberBoard-itemValue" title="5,685分享邀请回答Phaser.io,这个极力推荐,虽然国内用的人不多。2、第三工具另外就是通过一些第三方工具来实现游戏的生成与定制。这里也可以分为两类A 套模版有简单的直接套模版,替换素材,游戏音乐音效即可直接完成的,例如我们做的24好玩平台即是其中之一,类似的还有极点互动、微播盈趣、凡科互动等等。B 工具编辑器也有一些高级的工具类似于H5互动编辑器MAKA,我知道的有国外的Construct,如果你想学,不想从0开始学代码,这个是一个略微高级的学法。希望能够帮到你。524 条评论分享收藏感谢收起ih5.cn/idea/qlNd7hO如果要自己做游戏效果,或者有一点交互的h5网站,可以用iH5,基本上各种效果都可以自己做,是免费的呢,首页里右下角就有学习使用,里面都是比较易学易用的视频。122 条评论分享收藏感谢收起如何入门微信小程序开发,有哪些学习资料?
我的图书馆
如何入门微信小程序开发,有哪些学习资料?
微信小程序正式公测, 前言:新人第一坑,跳坑指南:修改后,必须保存;ctrl+S;1:官方工具:2:简易教程:3:设计指南:4:设计资源下载:资源下载5:微信小程序公测接入指南:6:微信小程序支付文档:7:新手入门宝典:8:免费视频:9:实战宝典:10:从注册到上线系列:11:精品合集:导航系列:1-6月7月8月9月10月11月特别说明:1:不了解微信小程序的同学,请先搜索一下微信小程序究竟是什么,有哪些特性;2:有htmlcssjs基础者可以直接进入实践,边实践边学习,尤其是有react与vue基础的;3:微信小程序不需要特别申请(认证或账号)即可开始使用工具开发;4:微信小程序是需要后台的,不限定任何语言,提供小程序接口要求的json格式即可;5:初次开发者,推荐阅读新手跳坑系列,有几个坑,先了解一下,遇到时便可以查阅了;6:如有作者不希望自己的作品被放置在这里,请联系我删除;7:如果遇到问题,推荐多使用搜索,对帖子及文章进行搜索;微信小程序大事记编年史:旨在让大家独立去思考变化的意义:(日期非精确,仅为大致日期)12月21日:微信小程序开放新增功能:分享,自定义模板消息,客服消息,扫一扫;12月30日:微信开放带参数二维码,允许已上线的小程序制作进入任意页面的二维码;1月9日:微信开放微信小程序;1月22日:微信增加社交分类,允许提交社交类小程序,但是必须具备社交相关的资质证书;1月25日:微信开始允许直播类小程序上线,上线的有腾讯now直播,企鹅电竞等;2月1日:微信开放微信搜索,在微信搜索结果内将可以直接展示小程序,并且位置是第一位;但是仍需全名搜搜方可显示;2月10日,微信开放部分关键词的模糊搜索显示,包括表情、美食、音乐、电影、读书、日记、计算、股票、日历、电商、酒店、出行、汽车、旅行、快递等领域;2月19日:微信开发者社区从封闭状态,改为开放状态,任何人均可浏览;2月23日:摩拜单车宣布原二维码也可以适用于小程序,使用微信扫一扫扫描摩拜单车二维码将直接打开小程序;3月2日:微信公开课征集小程序案例3月5日:马化腾回记者问中提出:小程序是面向未来的产品:马化腾:微信为什么力推小程序?微信公众号会推付费内容吗? ...3月27日,微信官方宣传六大变化:3月27日:微信官方宣传支持个人注册:3月30日:附近的小程序:4月14日:微信开放长按识别小程序二维码功能;4月17 日:4月18日:4月20日:4月21日:4月25日:4月27日:4月28日:5月8日:开放群ID接口,可获取群ID和群名称5月10日:开放“附近小程序”5月12日:上线“小程序数据助手”,支持实时查询小程序数据5月19日:新增页面内转发功能;支持接入微信运动步数数据等5月27日:小程序码生成数量无限制;用户画像支持分析小程序数据6月1日:公众号群发文章通过文字或图片链接打开小程序功能6月3日:小程序新增推广功能,支持自定义关键词6月14日:6月21日:7月6日:7月12日:7月21日:7月26日:8月3日:8月5日:8月18日:8月19日:8月25日:8月31日:9月9日:10月13日:11月3日:1月19日小程序资讯集合 1月19日小程序Demo集合 1月5日小程序资讯集合 1月5日小程序Demo集合 12月29日小程序资讯集合 12月29日小程序Demo集合12月15日小程序资讯集合 12月15日小程序Demo集合 12月1日小程序资讯集合 12月1日小程序Demo集合11月6日小程序资讯集合 11月6日小程序Demo集合 10月24日小程序Demo集合10月14日小程序资讯集合 9月22小程序Demo集合 9月15日小程序资讯集合 9月15日小程序Demo集合9月8日小程序资讯集合 9月8日小程序Demo集合 插件/工具更新:
--------5月4日更新:--------特殊合集:
微信小程序项目总结系列:作者:Tong_T,博客地址:Tong_T的博客 - 博客频道 -
--------跳坑系列更新:
--------开发前必读简要 基于大量无效开发,无法上线的案例,所以开发前部分知识十分重要;|
微信小程序个人注册简单步骤 打开,点击右上角立即注册,进入小程序注册|
微信开发者工具【项目】详解 为什么我的小程序通过审核,但是搜索不到呢?原因是必须在后台内点击发布,才会发布;|
小程序开发上线(发布)步骤 这篇帖子将简单的介绍基本的步骤,以便新手们建立一个基本的印象;|
从零开始:微信小程序新手入门宝典 为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里; |
安卓或ios开发者学习小程序指南 我发现很多安卓或是ios开发者,学习了小程序的开发,并且很顺利。 |
WXSS/CSS相关知识说明 为了更适合开发微信小程序,WXSS对 CSS 进行了扩充以及修改。|
使用官方WEUI-WXSS相关知识 使用官方 UI 简化设计开发流程,如果你的项目对 UI 定制要求不是很高的话。| 常用api域名配置列表及免费API集合 免费API大全以及后台配置域名的方法|
一键添加小程序所有文件jswxmlwxssjson升级到新版后可以“一键”新建小程序4个常用文件,不用一个一个的去建,方便多了!|
常用快捷键总结 (mac系统/win系统)1: opt + shift + f : 代码格式化2: cmd + [, cmd+ ]代码行缩进。。。|
让他人体验自己的小程序 怎么让别人体验自己的小程序啊,我认为这个将是很多朋友即将遇到的问题|
官方社区使用指南 为了让大家解决问题更有效率,官方社区是必不可缺的。|
如何让微信小程序更容易审核通过 微信小程序审核不通过,有很多原因,其中最明显的一点就是:服务类目问题;|
审核提供测试账号 自有账号体系 提交审核怎么提供测试账号|
关于如何将大神demo应用于自己项目 把大神们造轮子的逻辑应用于我们项目的相应组件上,这就是基本思路,有思路才能优雅 |
使用本地服务器进行调试 怎么请求本地网络啊 IP形式的网络?怎么访问本地架设的服务器?|
开发者工具无法登录账号 最近开始频发无法登录账号的问题,诸如request https 404报错 登录态失效等 |
小程序敏感词汇过滤问题 用户需要发表内容的小程序,需要设定关键词过滤,屏蔽掉政策不允许的内容:|
公众号关联微信小程序简单方法 很多人可能会问,公众号如何添加微信小程序呢?步骤很简单: 1: |
无法长按识别及无法分享到朋友圈的替代方法 看到 同学发了一个花样二维码,我看了之后,顿时来了一个灵感。。。 |
使用PHP/thinkphp后端问题 后端部分跟小程序的前端部分是分离的 |
使用java后端问题说明 请求数据方面没有区别,只需要提供json格式的数据接口即可;但是因为小程序方面对其他|
使用nodeJS作为小程序后端node用的人很多啊。。稍微聚集一下相关的知识|
使用C#解密用户信息 由于官方没有提供C#的解密demo,所以大家只能八仙过海各显神通了。。。 |
使用第三方SDK及服务及扩展库及框架 目前已经为小程序开发了SDK及可以辅助开发的库或框架或SDK|
使用第三方库(第三方js) 小程序怎样引用第三方js呢?第三方js是封装好的类库 想引用进来实例化使用|
使用第三方编辑器(IDE开发小程序,并非一定要使用官方的编辑器,你也可以任意选择自己喜欢的编辑器;|
模块化、组件化及封装 开发过程中要学会不断的重构代码,尽量提高代码的可重用性,尽量不要复制相同的代码。|
参数传递,跨页面传值或通讯相关知识 这个东西,是开发小程序必备神器,越深入了解,越可以有效的帮助自己| 图表类:折线图,柱状图,K线,分时图 各类图表功能,小程序自带API并没有提供,所以很多人就用了其他方法来实现。|
模版template使用,import及include template是小程序中的一个重要应用;WXML 提供两种文件引用方式import和include。 |
富文本解析:将html转为为wxml富文本解析是一个困扰无数人的问题,目前网上的解决方案已经比较多了 |
自定义字体/自定义图标相关 自定义图标及自定义字体,一直是很多小程序开发者的心病|
微信小程序真机预览跟本地不同的问题 本地可以看到数据,打开调试也可以看到数据,关闭调试则看不到数据;或是开发版可以看|
常见错误及基本排除方法 也接触了不少人解决问题的过程里,有一些比较难以排查的可能性列举在这 |
ios苹果真机相关问题 此问题只在ios上出现,而安卓没有问题;或是这个问题同时在安卓和ios上出现;|
Android安卓真机相关问题 本帖特别针对以下两个情况:情况一:此问题只在安卓上出现,而ios没有问题;|
Javascript 标准库兼容性及ES6支持度说明iOS、Android 和 开发者工具。三端的脚本执行及用于渲染非原生组件的环境是各不相同的|
ssl证书相关问题errMsg: 'request: fail ssl hand shake error'等错误及免费证书申请地址|
小程序1024K限制及代码压缩相关 为了提升小程序体验流畅度,编译后的代码包大小需小于 1MB ,大于 1MB 的代码包将上传|
微信小程序支付(微信支付签名错误 发起支付时的签名需要有appId(不是appid,大小写)|
微信支付(微信小程序支付) 小程序仅支持微信支付;而微信支付需要认证后才可以使用,需要花费300元认证费用;|
微信登录问题 有个登录功能,为什么小程序在别的手机上无法登录?|
Session、session_key及checkSession checkSession 就是用来检测 session_key 是否过期|
用户未授权获取登录信息的替代方法 用户如果拒绝授权,需要10分钟等待后才可以再次申请授权;|
授权获取用户信息的弹窗 授权获取用户信息窗口在开发工具可以多次提示,在手机上测试的时候只弹出一次,这是正|
openid与unionid微信登录必备|
解密获取unionid问题unionid,需要 先在微信开放平台内绑定小程序;,方可解密出unioni|
带参数二维码,返回数据保存为图片php,java,node,C#等保存为图片的方法|
带参数二维码相关知识 生成的数量有限制,总共只有10万个;另外,扫码访问次数没有限制。|
MD5加密使用说明 聚集一下md5加密在小程序中的使用相关的内容: |
页面路径五层限制 官方规定页面路径只能是五层,请尽量避免多层级的交互方式。|
并发数及连接数限制及promise/async/await request 的最大并发数是 5;upload/download最大并发限制是 5 个|
wx.downloadFile问题downloadFile,需要在小程序公众后台配置相应的downloadFile域名,否则会无法正常使用| wx.uploadFile(上传文件)相关问题 特别提示一:upload必须在小程序公众后台配置上传域名,才可以在真机使用。|
图片上传问题 域名检测全部是正确的,并且后台也配置了域名,但是安卓就是无法上传图片:|
wx.openDocument打开文件 新开页面打开文档,支持格式:doc, xls, ppt, pdf, docx, xlsx, pptx|
wx.saveFile文件保存API文件保存API是很多人懵逼的。。。|
模板消息相关问题说明 当用户在小程序内完成过支付行为,可允许开发者向用户在7天内推送有限条数的模板消息|
客服消息相关(客服按钮修改 客服按钮能自己定义吗?可以的|
swiper轮播图组件1:如何上下滚动;2:如何点击;3:如何自定义指示点|
button按钮组件使用button用来配合form或者单独点击|
分享相关 知识onShareAppMessage只有定义了此事件处理函数,右上角菜单才会显示“分享”按钮|
image图片组件使用background-image:可以使用网络图片,或者 base64,或者使用标签|
模态弹窗wx.showModal及遮罩层 带有输入框的弹窗|
微信小程序缓存API相关知识 关于数据缓存,怎么能获取到本地缓存使用了多少,还剩多少|
map组件,地图使用相关问题 包括百度地图,腾讯地图,高德地图api及各种地图相关demo|
WebSocket相关问题说明 请保证wss域名符合https的要求;比如备案,不得带有端口等;|
canvas相关问题说明canvas、textarea、video层级最高的变通方法|
音频相关问题:播放,录音等相关 包括语音识别类demo及教程|
录音文件格式为silk(silk转mp3) 暂不支持模拟录音,手机上录音目前是silk格式。如何转为mp3困住了不少人| 语音搜索及语音识别相关 这属于小程序框架体系之外的功能,可以将语言传给第三方服务器进行识别|
progress进度条及slider凑合看吧,比如自定义圆形进度条。。。|
radio单选(单项选择器 文章及demo可能并非是radio的使用说明,而是实现了自定义了单选等;|
switch开关选择器使用 自定义switch方法说明|
组件系列:scroll-view实现滑动及锚点功能|
组件系列:textarea textarea可能出现的问题五花八门,请做好心理准备|
input组件 坑点较多。。。|
重力感应及罗盘API开始搞摇一摇了。。。|
计时器/倒计时相关 倒计时,计时器等组件使用说明|
视频播放相关(video组件)video标签认宽度300px、高度225px,设置宽高需要通过wxss设置width和height。|
text组件,文本换行及空格 总结一下text组件,以及文本换行,文本溢出及空格,复制问题;|
animation动画相关问题 本帖主要是针对animation的使用相关的教程及问题说明|
toast吐司组件问题说明(自定义toast) 包括自定义toast等问题说明|
picker及picker-view组 用途广泛的联动选择器,目前已经比较实用了;|
tabbar相关问题说明 包括tabbar不显示,自定义tabbar等问题的说明|
喜欢该文的人也喜欢微信小游戏开发总结及实战教程
小游戏是小程序的一个类目,小游戏是微信开放给小程序的更多的能力,让小者有了开发游戏的能力。小游戏没有WXSS、WXML、多页面等内容,但加了一些渲染、文件以及后台多线程的功能。
小游戏的运行环境是小程序环境的扩展,基本思路也是封装必要的 WEB 接口提供给用户,尽可能追求和 WEB 同样的开发体验。小游戏在小程序环境的基础上提供了 WebGL 接口的封装,使得渲染能力和性能有了大幅度提升。不过由于这些接口都是微信团队通过自研的原生实现封装的,所以并不可以等同为环境。
小游戏的运行环境在 iOS 上是 ScriptCore(注:webkit的一个重要组成部分,主要是对JS进行解析和提供执行环境。),在
上是 V8 (这个不用多说Node.js目前使用的就是V8)。但是两个都没有 BOM 和 DOM 的运行环境,没有全局的document和window对象。
小游戏 VS H5游戏 VS 小程序对比图
第三方代码适配(Adapter)
主要目的提供 BOM 和 DOM 的运行环境。
由上图可以看出,因为没有 BOM 和 DOM 的运行环境,没有全局的document和window对象。为了让基于浏览器环境(上图的H5游戏)的第三方代码更快地适配小游戏运行环境,所以就有了适配器(Adapter)。它是用微信 API 模拟 BOM 和 DOM 的代码组成的库,抽象的代码层,可以根据自己的需要去实现相关方法。
例如,简单实现document.creatElement方法:
var document = {
createElement: function (tagName) {
tagName = tagName.toLowerCase()
if (tagName === &#39;canvas&#39;) {
return wx.createCanvas()
else if (tagName === &#39;image&#39;) {
return wx.createImage()
Adapter是否使用由开发者自己决定。不使用Adapter时,可以通过微信提供的API实现相应的方法,但不能使用 DOM API 来创建 Canvas 和 Image 等元素。
有的游戏引擎是直接调用DOM API,和访问DOM属性 ,所以记得使用Adapter让游戏引擎适配小游戏的运行环境,保证游戏引擎在调用 DOM API 和访问 DOM 属性时不会产生错误。
微信官方实现了一个weapp-adapter小游戏适配器,但仅仅只针对游戏引擎可能访问的属性和调用的方法进行了模拟,也不保证所有游戏引擎都能通过 weapp-adapter 能顺利无缝接入小游戏。这里将 weapp-adapter 适配器提供给开发者,更多地是让开发者作为参考,让开发者可以根据需要在 weapp-adapter 的基础上进行扩展,以适配自己项目使用的游戏引擎。weapp-adapter 会预先调用wx.createCanvas()创建一个上屏 Canvas,并暴露为一个全局变量canvas。
require(&#39;./weapp-adapter&#39;);
var context = canvas.getContext(&#39;2d&#39;);
context.fillStyle = &#39;red&#39;;
context.fillRect(0, 0, 100, 100);
weapp-adapter 适配器提供了以下对象和方法:
document.createElement
canvas.addEventListener
localStorage
XMLHttpRequest
其实官方文档里面还有很多 ,感兴趣可以查看官方API文档。
小游戏的模块化
小游戏提供了 CommonJS 风格的模块 API,可以通过module.exports和exports导出模块,通过require引入模块。这里就不用多解释了,其实大家按正常的编码习惯编码就可以了。
module.exports = function (canvas, x, y) {
var image = new Image()
image.onload = function () {
var context = canvas.getContext(&#39;2d&#39;)
context.drawImage(image, x, y)
image.src = &#39;res/image/logo.png&#39;
所以小游戏对编码方面的基础能力还是很友善的。
小游戏能力
这里列出部分已提供的 API 能力,更详细的能力及官方实例可访问API文档。
小游戏引擎
游戏引擎是指一些已编写好的可编辑电脑游戏系统或者一些交互式实时图像应用程序的核心。这些系统为游戏设计者提供各种编写游戏所需的各种工具,其目的在于让游戏设计者能容易和快速地做出游戏程式而不用由零开始。
Cocos、Egret、Laya 已经完成了自身引擎及其工具对小游戏的适配和支持:
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象
2D、3D、VR的支持
从开发者的反馈来说,Layabox本来就是面向大型游戏的H5游戏引擎,性能优势是毋庸质疑的。
设计理念与定位
工作流支持力度
工具链的提供与支持也是一种选择考量要素,比如UI编辑器、粒子编辑器、骨骼编辑器、场景编辑器等等,如果引擎方直接提供或支持,那么将会较大的提升研发效率。Egret、Layabox、Cocos2d-JS这三个引擎在工具链方面提供足够全面的支撑。
引擎的应用广度
Egret成名比较早,发展得比较快,各方面的资源而比较多,提供了全套开发流工具。
用游戏引擎的优点:开发快,可维护性高
用游戏引擎的缺点:牺牲一些性能,小游戏用不用引擎几乎感受不到性能差异。大游戏为了开发效率和可维护性,一般都会使用游戏引擎。
小游戏实战总结
本次主要实现的是跳一跳小游戏。游戏大概如下:
景物层:负责两侧树叶装饰的渲染,实现其无限循环滑动的动画效果;
阶梯层:负责阶梯和机器人的渲染,实现阶梯的随机生成与自动掉落阶砖、机器人的操控;
背景层:负责背景底色的渲染,以及开始结束面板渲染。
通过requestAnimationFrame循环调用一定次数来实现动画效果。游戏的逻辑通过监听全局的canvas对象实现。
分层按顺序叠加绘至画布,先将背景绘上,通过算法计算出台阶位置,结合上一次的位置用requestAnimationFrame实现移位生成新的台阶,机器人单独抽离出来的,没有和台阶一起实现,通过位置计算,得到机器人的位置,绘制字台阶上,最后将顶层的树叶绘制上。
小游戏开发难点
首先,小游戏使用语言开发,不存在HTML,,所以需要对JavaScript语言,Canvas对象操作熟练。
其次,和H5版游戏开发区别并不大,但是小游戏支持的库较少,并且大部分H5版开发所使用的到的库是不支持的。
还有,就是H5版游戏的实现方式选择性更多,比如跳一跳原版是使用createjs开发,而小游戏版并不能支持所有的引擎,只能通过上面的几个引擎改造适配。
小游戏优化
为什么要优化?其实为了提高页面加载速度,减少游戏运行中的卡顿,使动画看起来更流畅,游戏的流畅程度及画面直接影响了用户体验。
以下提供了几个优化方案。
小游戏的优化文档并未指出,在api中提供一个性能管理器,通过获取性能管理器能够调用 API 加快触发 GC ,GC 时机是由 JavaScrpitCore / V8 来控制的,不能保证调用后马上触发 GC。
setData调用次数优化
小程序端,官方不建议频繁调用setData,大图片和长列表图片,都有可能导致 iOS 客户端内存占用上升,从而触发系统回收小程序页面。
减小代码包
尽量减小代码包的大小,代码包直接影响了下载速度,从而影响用户的首次打开体验。
控制图片资源
控制代码包内图片资源,小程序代码包经过编译后,会放在微信的 CDN 上供用户下载,CDN 开启了 GZIP 压缩,所以用户下载的是压缩后的 GZIP 包,其大小比代码包原体积会更小。 但我们分析数据发现,不同小程序之间的代码包压缩比差异也挺大的,部分可以达到 30%,而部分只有 80%,而造成这部分差异的一个原因,就是图片资源的使用。GZIP 对基于文本资源的压缩效果最好,在压缩较大文件时往往可高达 70%-80% 的压缩率,而如果对已经压缩的资源(例如大多数的图片格式)则效果甚微。
清除无用资源
及时清理没有使用到的代码和资源,小程序打包是会将工程下所有文件都打入代码包内,也就是说,这些没有被实际使用到的库文件和资源也会被打入到代码包里,从而影响到整体代码包的大小。
使用requestAnimationFrame实现动画时,调整到合适的渲染fps(帧率)。
遇到的问题
图片尺寸问题?
小游戏中图片对尺寸限制在2048像素,长宽要小于等于2048像素。
对外开放?
小游戏对外没有开放注册入口,现在能使用的是前两天在小程序中开放的游戏类目,将小程序类别设定为游戏类目可开发小游戏,不确定以后是否以这种方式注册,或者是单独开放小游戏的注册入口,两者目前没发现有什么区别。
官方目前没有提供对外发布,登录后台能够点击发布,但是需要上传软件著作权证书等一系列,所以没有进行下去,不确定能否对外发布成功。
关于小游戏代码体积大小?
关于小游戏体积问题,小游戏的体积不得大于 4M,缓存不得大于 50M。
具体的解释为:本地的代码和资源不得超过 4M。单个小游戏项目缓存的文件不能超过 50M,目前当缓存超过 50M 时后续的资源将不会缓存,未来新版的 AssetsManager 将会允许开发者自定义哪些资源需要缓存的机制。不允许从服务器下载脚本文件。
不允许动态执行代码?
不允许动态执行代码的能力,eval、setTimeout和setInterval函数的第一个参数不能为字符串,Function构造函数的参数不能为字符串。

我要回帖

 

随机推荐