有关微信的小程序和小游戏的区别

小游戏是小程序的一个类目,小游戏是微信开放给小程序的更多的能力,让小程序开发者有了开发游戏的能力。小游戏没有WXSS、WXML、多页面等内容,但加了一些渲染、文件系统以及后台多线程的功能。

小游戏的运行环境是小程序环境的扩展,基本思路也是封装必要的 WEB 接口提供给用户,尽可能追求和 WEB 同样的开发体验。小游戏在小程序环境的基础上提供了 WebGL 接口的封装,使得渲染能力和性能有了大幅度提升。不过由于这些接口都是微信团队通过自研的原生实现封装的,所以并不可以等同为浏览器环境。

小游戏的运行环境在 iOS 上是 JavaScriptCore(注:webkit的一个重要组成部分,主要是对JS进行解析和提供执行环境。),在 Android 上是 V8 (这个不用多说Node.js目前使用的就是V8)。但是两个都没有 BOM 和 DOM 的运行环境,没有全局的document和window对象。

第三方代码适配(Adapter)

主要目的提供 BOM 和 DOM 的运行环境。

由上图可以看出,因为没有 BOM 和 DOM 的运行环境,没有全局的document和window对象。为了让基于浏览器环境(上图的H5游戏)的第三方代码更快地适配小游戏运行环境,所以就有了适配器(Adapter)。它是用微信 API 模拟 BOM 和 DOM 的代码组成的库,抽象的代码层,可以根据自己的需要去实现相关方法。

例如,简单实现document.creatElement方法:

var document = {
createElement: function (tagName) {
tagName = tagName.toLowerCase()
if (tagName === ‘canvas') {
return wx.createCanvas()
}
else if (tagName === ‘image') {
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(‘./weapp-adapter');
var context = canvas.getContext(‘2d');
context.fillStyle = ‘red';
context.fillRect(0, 0, 100, 100); 

weapp-adapter 适配器提供了以下对象和方法:

document.createElement

canvas.addEventListener

localStorage

Audio

Image

WebSocket

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(‘2d')
context.drawImage(image, x, y)
}
image.src = ‘res/image/logo.png'
} 

所以小游戏对编码方面的基础能力还是很友善的。

小游戏能力

这里列出部分已提供的 API 能力,更详细的能力及官方实例可访问API文档。

小游戏引擎

游戏引擎是指一些已编写好的可编辑电脑游戏系统或者一些交互式实时图像应用程序的核心组件。这些系统为游戏设计者提供各种编写游戏所需的各种工具,其目的在于让游戏设计者能容易和快速地做出游戏程式而不用由零开始。

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开发,而小游戏版并不能支持所有的引擎,只能通过上面的几个引擎改造适配。

小游戏优化

为什么要优化?其实为了提高页面加载速度,减少游戏运行中的卡顿,使动画看起来更流畅,游戏的流畅程度及画面直接影响了用户体验。

以下提供了几个优化方案。

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构造函数的参数不能为字符串。

总结

到此这篇关于有关微信的小程序和小游戏的区别的文章就介绍到这了,更多相关微信的小程序和小游戏的区别内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 纯javascript模仿微信打飞机小游戏

    七夕情人节也不要忘了打游戏喔喔-,下面小编为大家准备的情人节礼物之纯javascript模仿微信打飞机小游戏分享给天下的情人们. 首先给大家展示效果图: 查看演示      源码下载 纯JavaScript模仿微信打飞机游戏,做网页小游戏的借鉴下,界面设计是竖长形仿手机屏幕风格,游戏效果流畅.具有分数统计,里面的JS封装类中包括有创建飞机类.飞机移动行为控制,创建子弹类,产生min到max之间的随机数,判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemov

  • 微信跳一跳小游戏python脚本

    Python编写微信小游戏"跳一跳"的运行脚本,分享给大家. 更新了微信后发现了一款小游戏跳一跳,但是玩了一下午最高才达到200,每次差点破纪录后总是手抖就挂掉了,气的想要砸手机.闲来无事刷微博的时候正好看到有人分析如何编写脚本自动运行游戏破了3000多分,细看后觉得原理并不复杂,就索性花了一个晚上,参考大神的实现方法,在他的基础上删减了一些代码,也用Python写了个脚本.接下来进行原理和代码分析. 图1.跳一跳启动界面 原理 配置adb环境变量,在我的电脑–>属性–>高

  • 微信小程序版翻牌小游戏

    本文实例为大家分享了微信小程序翻牌游戏的具体代码,供大家参考,具体内容如下 一.新建一个quick start项目看看结构 在微信开发工具点击添加项目,选择 无appid,勾上"在当前目录中创建quick start 项目". 可以看到一共有两个目录 pages和utils,和根目录下的3个app文件.pages存放的是小程序的页面,每个也面都有自己独立的文件夹. 一个页面由4文件构成,js文件是程序逻辑:wxss是微信定义的样式文件,语法跟css一样,支持的样式要少一些:wxml文件

  • Android版微信跳一跳小游戏利用技术手段达到高分的操作方法

    本文主要来讲个个好玩的东西,近来微信刚出的跳一跳微信小程序的游戏很火,看到很多人都达到了二三百分就各种刷朋友圈了. 甩手一个表情 最终我们达到的分数却是这样的: 羡慕吧 一定会有人拍手叫好,"黄金右手"!说真的,我已经不用右手好多年,而且我玩这个游戏压根就没用手,而是意念!哈哈,别喷我,开个玩笑而已,肯定是利用技术手段啦,什么技术?python喽-哈哈,不过不是我写的,我自己是做Android开发的,我对于python从来没有接触,只是恰好在蛋哥公众号看到关于这个游戏的文章,觉得有意思

  • 有关微信的小程序和小游戏的区别

    小游戏是小程序的一个类目,小游戏是微信开放给小程序的更多的能力,让小程序开发者有了开发游戏的能力.小游戏没有WXSS.WXML.多页面等内容,但加了一些渲染.文件系统以及后台多线程的功能. 小游戏的运行环境是小程序环境的扩展,基本思路也是封装必要的 WEB 接口提供给用户,尽可能追求和 WEB 同样的开发体验.小游戏在小程序环境的基础上提供了 WebGL 接口的封装,使得渲染能力和性能有了大幅度提升.不过由于这些接口都是微信团队通过自研的原生实现封装的,所以并不可以等同为浏览器环境. 小游戏的运

  • 微信小程序实现拼图游戏

    本文实例为大家分享了微信小程序实现拼图游戏的具体代码,供大家参考,具体内容如下 页面展示 项目链接 微信小程序实现拼图游戏 项目设计 首页面 wxml <!--index.wxml--> <view class="container"> <!-- 标题 --> <view class="title">游戏选关</view> <!-- 关卡列表 --> <view class="l

  • 微信小程序实现五子棋游戏

    本文实例为大家分享了微信小程序实现五子棋游戏的具体代码,供大家参考,具体内容如下 效果图 .wxml <view class="title">   <view wx:if="{{currindex < 324 || defeat}}">   {{defeat?'胜出方:'+(outindex?'黑棋':'白棋'):'轮到了:'+(outindex?'白棋':'黑棋')}}   </view>   <view wx:el

  • 微信小程序实现弹球游戏

    本文实例为大家分享了微信小程序实现弹球游戏的具体代码,供大家参考,具体内容如下 实验内容: 小球按照随机的角度直线运动,如果碰到四壁则反弹.你们不需要做游戏计时.设置小球及背景颜色等,只完成小球在方框内反弹运动的功能.这里主要考查绘图知识,数学计算能力,以及对定时器的应用. 实验效果(最简单版本): 实验代码: index.js // index.js Page({     data:{       cx:200,       cy:50,       destinaX:3,       des

  • 微信小程序bindinput与bindsubmit的区别实例分析

    本文实例讲述了微信小程序bindinput与bindsubmit的区别.分享给大家供大家参考,具体如下: 实际上的话,bindinput还有bindsubmit是没有任何的可比性的,但是两者还是常常被人一起比较,为啥? 比如一个简单的搜索框,你是愿意选择使用bindinput还是使用bindsubmit?,虽然一个是表单,一个是文本输入框,但是两者都有一个共同点,就是可以去获取到用户的输入信息.这个时候,问题来了,区别在哪儿? 最简单的一段代码在下面: <form bindsubmit='inp

  • 微信小程序分享小程序码的生成(带参数)以及参数的获取

    1.小程序码介绍 从微信小程序开发文档上我们可以了解到,目前微信支持两种二维码(左),小程序码和小程序二维码(右).官方推荐使用小程序码,因为小程序码具有更好的辨识度. 官方提供生成小程序码的两种方式 一种适用于需要的码的数量相对较少的业务场景:接口地址 https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN access_token是公众号的全局唯一接口调用凭据. 获取access_token方法详见:https:/

  • 小程序通过小程序云实现微信支付功能实例

    目录 一.开通微信支付 1.1 关联商户号 1.2 添加商户号 1.3 管理员授权 二.云函数开发 2.1 新建云函数 2.2 云函数代码 2.3 云函数上传并部署 三.小程序调用 3.1 统一下单 3.2 支付成功回调 一.开通微信支付 1.1 关联商户号 \微信公众号平台\功能\微信支付\商户号管理\关联商户号 1.2 添加商户号 \云开发平台\设置\其他设置\微信支付配置\添加商户号 1.3 管理员授权 1.2那张图上,点击授权.管理员的微信就会跳出提示,点击确定授权即可. 否则使用的时候

  • 微信小程序bindtap与catchtap的区别详解

    目录 1.什么是事件 2.如何使用事件 3.bindtap和catchtap的区别 4.小程序中事件分为冒泡事件和非冒泡事件. 事件之target&&currentTarget区别 5.例子 1.什么是事件 (1) 事件是视图层到逻辑层的通讯方式. (2) 事件可以将用户的行为反馈到逻辑层进行处理. (3) 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. (4) 事件对象可以携带额外信息,如 id,dataset,touches 2.如何使用事件 (1) 简单来

  • 如何实现小程序与小程序之间的跳转

    前言 小程序与小程序之间互相可以跳转,形成流量的循环.在小程序中怎么实现的呢 小程序中提供了两种方式实现小程序与小程序之间的跳转 方式1-使用 API 方式跳转 如下示例代码所示 <<view class="container"> <view bindtap="onJumpMin">打开跳转到其他小程序方式1</view> </view> 如下是逻辑代码 onJumpMin() { wx.navigateToMi

  • 微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧

    前言 小程序跳一跳最近很火,之前爆出微信游戏小程序漏洞,网上也不乏大神.这里就用一大神的python脚本来刷下高分. 跳一跳python脚本传送门 配置过程 注: 电脑环境未配置python环境,请自行谷歌或者百度配置,这里不再做叙述. 1. 将上述传送门整个项目拷贝到本地(用git命令,或者直接压缩包下载,这里大家随意).比如我这里下载压缩包,解压我电脑以下的目录. 2. 楼主用的是 ios , 操作起来比较繁琐,也懒得找测试要 Android 测试机,所有就下了模拟器测试,首推雷电模拟器,安

随机推荐