微信小程序如何开发一款小游戏?(实战教程)

如何快速开发一款火爆的小游戏?“火爆”是一个偏运营的词,今天介绍的内容可能更倾向于技术方面,即如何利用微信的开放能力开发一款小游戏。小游戏上线120天时发布了几个重要的消息,其中有几个数字可以用来描述“火爆”这个词。微信小游戏正式允许第三方开发者发布的时间是在3月3日,而现在几款小游戏的用户已经过亿,安卓月流水过千万的也有数款小游戏,大家应该已经体会到了微信小游戏的火爆程度。

与火爆相关的两个知识,一个就是如何开发?首先要利用好微信的社交相关性,微信去中心化的情景下社交分享互动是非常重要的,因为没有传统流量分发的总入口。第二个是操作的简便性,我们根据游戏成为爆款游戏后的数据才能推出这两个结论,并不是说具备这两个特性就一定能开发出一款火爆的游戏。

什么是小游戏?

首先为大家介绍一下什么是小游戏:小游戏特指微信小游戏,是小程序的一个子类目,可在微信内被便捷地获取和传播,即点即玩,具备出色的用户体验。在开发的视角来看,小游戏是一个基于Canvas/WebGL + 微信社交开放能力的新平台。在框架上看分为三层,是一个典型的分层架构。微信中有一个小游戏的Runtime去运行小游戏,而OS本身可能会涉及到不同类的设备。

1.png

如果放大小游戏的Runtime可以看到很多的细节,第一就是游戏逻辑,也就是与平台无关的游戏逻辑的开发。第二部分是游戏引擎,大部分会用到一些引擎的工作流、一些各种系统封装好的高层的API。第三部分是weapp,小游戏的框架是参考了webview的框架,但其实它的底层不是webview,而是webview精简优化过的平台,小游戏有的只是与核心相关的一些渲染的API。这里的weapp-adaper是把小游戏的能力适配到与webview更接近的环境,让更上层的游戏或引擎本身能够更快速地集入到平台中。

2.png

微信的Runtime对外暴露的都是微信的API,所有的能力都是通过微信API发布出去的。底层最基本的能力是渲染相关的,即Canvas 2d和WebGL。其他一些微信相关的能力是另外一部,所以小游戏在架构上和小程序是有差别的,但用户体验起来没有太大的区别。小游戏是没有页面概念的,在实现上也不完全是webview,其中不必要的部分已经被去掉了。

总的来说小游戏的入口为game.js,游戏可以利用底层的一些能力将游戏的整个界面绘制出来。配置文件为game.json主要用来配置小游戏是横屏还是竖屏,小游戏的全局对象game Gobal类似于webview中的window对象,同时支持javascript语言。但是小游戏有一个重要的一个限制是禁止动态执行代码,开发者必须先提交审核,在审核通过后才可以上架给普通用户。另外,小游戏包括引擎的代码量比较大,所以限制大小比小程序要大,首包限制大小为4M。

下面来说一下Webview Adapter,它的初衷是为了让游戏开发者更好地熟悉我们的平台,所以我们的平台在能力上会尽可能地与webview做一些适配,其实这个适配也是很简单的一层。比如说我们在浏览器里面使用image对象创建一个图片,而在小游戏里是通过wx.createimage来创建的,在代码中需要做一个简单的适配。比如说Canvas、Document都是在Adapter中实现的,大家可以研究链接中的代码。其中有一些优化的版本,之后官方不会继续维系这个Adapter,因为我们会更专注于底层能力的建设。如果大家已经比较熟悉这个平台的话,就会比较容易地开发游戏。比如Document这个对象在小游戏框架本身中跟普通对象是没有区别的,它是Adapter做的一个简单的适配。

3.png

下图是小游戏能力的概览,最近小游戏能力的迭代比较快,部分能力还没有罗列出来。比如最近刚发布的游戏圈、健康系统相关的一些接口,都还没有列进去。我们先看一下基础能力,在渲染这部分WebGL1.0和Canvas 2D都是支持的,这里的Canvas更接近于浏览器里面的标准。同时,这里提到的可控帧率的概念,如果小游戏在后台运行的话,可以尽量将帧率降低。在多媒体部分,小游戏还不能像小程序一样实现实时的音频视频流,这是我们在后续要进一步支持的。网络IO的部分与小程序也是类似的,我们也提供了一些UI的组件,比如说拉起键盘,模态对话框等。

4.png

小游戏的社交开放能力现在已经对外开放了。其中最重要的一个能力是开放域,将微信的好友关系列开放出去,给开发者一起使用,但也存在着一些限制。因为小游戏去中心化的特点,分享这一部分也是非常重要的,开发者要考虑如何将这个能力利用起来。在代码方面,因为首包限制是4兆,但部分小游戏的代码量可能比较大。我们最近也在规划一个分包的能力,异步加载代码,但这个代码是一定要经过我们审核的。

如何开发一款小游戏?

那么如何开发一款小游戏?因为我本人也只是开发过一些简单的游戏,并不是专业进行游戏开发,所以接下来我会更多地介绍一下如何利用微信的能力来开发小游戏。

选择小游戏引擎

首先在开发游戏时要选择引擎,我们与引擎商也有着比较密切的合作,开发小游戏的引擎一定要是适配的。比如在底层,一开始引擎可能只支持原生的游戏,在微信小游戏上就要做一些适配,依赖浏览器特有的能力。Cocos Creator、Egret Engine、LayaAir Engine这三个引擎已经支持了小游戏的开发,网上也有相应的文章介绍如何发布到微信小游戏的平台。

设备/环境适配

有关设备管理的适配,小游戏会有API提供获取屏幕的宽高、设备像素比等能力。在小游戏开发完成后,在开发者工具也可以发起真机测试的请求,微信提供了不同设备的测试集群,帮助开发者提前去发现问题。基础库提供的wx API本身是一个不断迭代更新的过程,对于使用了新能力的小游戏,需要做低版本兼容。比如在检测到不支持新 API的低版本允许有损服务用户。同时,如果某个低版本的用户占比较少,可以考虑在管理后台直接配置小游戏要求的基础库最低版本,当然也意味着这一部分用户在接触到这个小游戏时,微信客户端会弹出一个要求用户更新到微信新版本才可使用该小游戏的提示,如果不更新可能就会失去这个用户。

5.png

微信登录

小游戏的登陆过程与小程序类似,需要用户自定义登录状态。appsecret/session_key代表的是小游戏开发者和微信平台之间的一种信任约定,比如支付、上报托管数据,平台方需要验证 access_token,和用户相关的还要验证session_key的签名,才能保证请求来自于小游戏开发者或用户。access_token是一种应用态的 access_token,与用户无关,需要保证全局维护一份,应该有一个中控的模块去保证 access_token有效,同时在有效期内直接使用本地 cache的 access_token,而不是每次使用都去生成新的 access_token,否则可能遇到调用频率限制的错误而影响服务。切记 appsecret/session_key不要放到前端代码中去,否则可能会被恶意利用从而损坏小游戏开发者或用户的权益。

6.png

缓存

缓存类型包括数据缓存和文件缓存两种。数据缓存即key-value存储,适合结构化类型的小数据存储,上限为 10MB。文件缓存提供了一个完整的文件系统 API,包括目录 /文件的增删改读,适合针对经常使用的网络资源做本地缓存,上限是50MB。

和浏览器不同的是,微信只提供了基本的存储管理能力,并不对存储什么以及存储满时删除什么做一些操作。开发者自行灵活定义缓存及淘汰策略,比如对经常访问的资源存储到文件系统以及在文件存储满时,清理一些最近不常访问的文件。

7.png

开放数据域

我们来说一下开发数据域,也就是在保护用户隐私的前提下把用户的数据开放给小游戏。这是一个封闭、独立的javascript作用域,开放数据域是一个独立的目录,其入口文件是index.js。目前的限制在于仅支持2d渲染模式,数据只进不出。比如说一个排行榜,它的目的肯定是用来给用户看的。

我们简单看一下它的实现方案,左边是主域。用户拿到这些数据后实现排行榜其实也是一个Canvas。它的区别在于Canvas不能把数据取出来,无法分析其中的数据是什么。主域里面有一个Canvas,在微信里上屏Canvas跟屏幕关联,后面都是离线的Canvas,离线的Canvas可以自己根据需求使用的。一旦开放数据以后,上屏Canvas不能把里面的数据取出来,下一个Canvas也不能取出来,保证了数据的安全性。

8.png

因为我们的数据在开发数据域中,用户没有办法进行开发。所以要求开发者在开发时将需要的数据托管到我们这里,与用户关联起来。这样就可以在开发数据域里面取到相关数据,其应用场景有好友排行、群排行榜、超越好友提示等。用户在输入的时候,重复用户的所有操作,在上屏的Canvas和离屏的Canvas上就得到了用户的所有输入,不会有开放数据渗透进去。

9.png

分享

如果用户在游戏中达到了很高的分数,可以与好友PK一下。在自定义转发的窗口,标题和图片都可以自定义。但是现在有很多小游戏非常骚扰用户,他们做了很多一定需要分享,才能允许玩游戏的设定。这是大家需要思考的部分,如何既不影响用户的体验,又能够促进小游戏的互动,在这里需要找到一个合适的平衡点。同时,在分享数据后将小游戏与这个群聊关联起来,我们就可以看到一个小游戏平台。

10.png

支付

小游戏是支持虚拟支付的,但目前仅适用于安卓系统中。且它的方式目前只有一种,即货币托管的方式。主要分为两个流程,一是用户花钱购买游戏币,这与游戏的服务端是没有关系的。发起支付时微信客户端会生成一个订单,让用户确认支付,这是异步的。平台负责把用户RMB兑换成对应的游戏币,存储到用户对应的游戏帐号上。二是使用游戏币购买道具,开发者可以扣除对应的游戏币,给用户发放游戏内道具,扣除游戏币的过程需要有一定的事务机制,保证在网络异常的情况下交易正常。扣除游戏币的接口支持根据订单ID去重,意味着在网络超时等情况下,开发者可用同样的订单ID去重试扣除,直至返回明确的响应。

11.png

性能

小游戏常见的性能问题,一般是内存造成的。如果内存占用太多会被微信客户端主动关闭,因此开发者在用户游戏过程中要及时释放不再使用的内存,特别是Canvas和Image类的大型对象,同时可以主动调用wx.triggerGC触发底层回收对应资源。对于和游戏逻辑相对独立的工作,可以考虑在worker中去实现,小游戏提供了独立的worker线程执行js逻辑的能力。

12.png

版本更新机制

小游戏有热启动和冷启动之分,冷启动是指内存中无该小游戏的运行实例的情况下,启动小游戏的过程;热启动是指小游戏的运行实例在内存中还存在,只是暂时切换到了后台,这时用户再次触发小游戏回到前台的过程。在如果用户点击启动之后,游戏运行时会加载出来这款游戏。在点击右上角的菜单时,按纽只是挂后台,在一定的时间内再启动时,它会立即恢复,这时内存将会释放。

小游戏会在冷启动时检查小游戏的版本,如有新版本,在下载回本地后,下一次冷启动即可使用最新版。当然,我们也提供了 API可以供开发者决策在有版本可用时,是否需要强制更新,应用最新的版本。

13.png

运维

管理端提供了发布、回滚、停服等能力,开发者可以充分利用平台的能力。比如在后台操作中,js可能会报错。脚本错误主要由运行过程中未捕获的异常触发,该类异常可能会导致用户小游戏前端的js逻辑暂停执行。同时,平台也提供了完善的数据分析服务,可以通过小游戏使用助手进行数据分析。

14.png

推荐:《小程序开发教程

以上就是微信小程序如何开发一款小游戏?(实战教程)的详细内容,更多请关注编程之家其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


概述 消息能力是小程序能力中的重要组成,我们为开发者提供了订阅消息能力,以便实现服务的闭环和更优的体验。 订阅消息推送位置:服务通知 订阅消息下发条件:用户自主订阅 订阅消息卡片跳转能力:点击查看详情可提爱转至该小程序的页面 消息类型 一次性订阅消息 一次性订阅消息用于解决用户使用小程序后,后续服务
判断H5页面环境在微信中还是小程序中 用小程序提供的wx.miniProgram.getEnv可以获取环境参数 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.
wx.reLaunch和wx.navigateTo,wx.navigateTo的区别 2019-03-23 11:18:05 wx.navigateTo 用于保留当前页面、跳转到应用内的某个页面,使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序,通常推荐使用 wx.n
微信小程序如何从数组里取值_微信小程序 传值取值的几种方法总结 小程序里常见的取值有以下几种,一个完整的项目写下来,用到的概率几乎是100%。 列表index下标取值 页面传值 form表单取值 1. 列表index下标取值 实现方式是:data-index="{{index}}&quot
H5项目接入微信授权登录,通过 UA 区分微信还是普通浏览器: let ua = navigator.userAgent.toLowerCase(); let isWeixin = ua.indexOf('micromessenge
微信小程序获取data-xx=""属性的值,自定义属性设置和获取(data-) 微信小程序<view class="details-btn" data-taskId="111" bindtap='taskdetails&#39
小程序报错:TypeError: Cannot read property ‘addEventListener‘ of undefined 解决办法 将调试基础库由2.16.0(或者当前的) -> 2.14.1 解决问题
H5跳转微信小程序-成功案例(VUE)(踩坑无数) TuoMei 已于 2022-07-29 09:52:22 修改 准备工作 根据官方提供的资料需准备以下几点: 1、已认证的服务号 2、绑定JS接口安全域名 (在微信公众平台设置) 3、IP白名单 (在微信公众平台设置) 4、将小程序和H5公众号进
微信小程序 页面跳转和数据传递实例详解 这篇文章主要介绍了微信小程序 页面跳转和数据传递实例详解的相关资料,这里附有实例代码帮助到家学习理解,需要的朋友可以参考下 微信小程序 页面跳转和数据传递 1.先导 在Android中,我们Activity和Fragment都有栈的概念在里面,微信小程序页面也
情景1.拉取公司代码演示: 因为github有墙,这里我们以gitee(码云)为例作为演示 (其实就是国产github,也非常好用~) 步骤一:打开Git界面 先在一个空文件夹右击Git Bash Here,打开git界面 步骤二:输入克隆远程仓库指令 别人复制的链接在这里获取 拿到别人赋值的链接自
如何开发微信小程序? 作为一名10多年一直从事互联网平台开发的从业者,我来回答下这个问题吧。 微信小程序开发流程总体可以归纳为4个步骤, 老张带您捋一捋整个环节,小白用户可以收藏了。 好了废话不多说,开始! 一、开发前小程序需要准备的资料 我们在开发微信小程序前,需要准备下相关资料。这个资料主要是后
原生小程序开发优化方案 为了更好的制定优化方案,我们 有必要先了解下小程序的底层架构、以及与普通网页开发的差异 小程序最终渲染载体与当下一些热门的技术 Flutter、React Native等不同,依然是浏览器内核,而不是原生客户端。 而对于传统的网页来说,UI 渲染和 JS 脚本是在同一个线程中
1,不要下两倍尺寸的图片, 小程序本身自己就会对元素缩小两倍,设计图片的一杯就已经很清晰了。 2,图片压缩,(主要是压缩静态资源,ps 可以压缩,然后有一些在线压缩工具,保持600-800kb 的静态) 3,通用的代码组件化 4,是在工程量太大可以分包,分包现在最大支持20m(一般都不会去分包的)
文章浏览阅读189次。人工智能研究实验室OpenAI在2022年11月30日发布了自然语言生成模型ChatGPT,上线两个月就已经超过一亿用户,成为了人工智能界当之无愧的超级大网红。ChatGPT凭借着自身强大的拟人化及时应答能力迅速破圈,引起了各行各业的热烈讨论。简单来说ChatGPT就是可以基于用户文本输入自动生成回答的人工智能聊天机器人。那肯定会有人说这不就是Siri嘛,虽然都是交互机器人但是两者的差别可老大了。那么ChatGPT在人机交互时为什么会有这么出色的表现?它到底会不会取代搜索引擎?90%的人真的会因为ChatG
文章浏览阅读193次。8. 导航和路由管理:掌握小程序的导航方式,如使用wx.navigateTo跳转页面、使用wx.redirect重定向页面等,学会实现页面之间的跳转和传参。1. 小程序的基本概念和架构:了解小程序的定义、特点以及与传统APP的区别,掌握小程序的运行环境、组件和API等基本概念。10. 支付功能:学习小程序的支付方式,如微信支付、支付宝支付等,了解支付流程和注意事项,学会实现小程序的支付功能。9. 用户授权和登录:了解小程序的用户授权机制,如获取用户信息、调用微信API等,学会实现用户的登录和注册功能。_微信小程序开发知识点总结
文章浏览阅读4.8k次,点赞7次,收藏18次。一、准备工作1. 安装微信开发者工具,并登录微信小程序账号;2. 准备斗地主游戏的图片资源;3. 准备斗地主游戏的音效资源;二、创建小程序1. 打开微信开发者工具,点击“新建小程序”,输入小程序名称,选择小程序的项目目录,点击“创建”;2. 在小程序的项目目录中,新建文件夹“images”,将准备好的斗地主游戏的图片资源放入“images”文件夹中;3. 在小程序的项目目录中,新建文件夹“sounds”,将准备好的斗地主游戏的音效资源放入“sounds”文件夹中;三、编写代码1. 在小程_扑克牌微信小程序代码
文章浏览阅读3.9k次,点赞3次,收藏7次。一、准备工作:1. 安装微信开发者工具,创建小程序项目;2. 准备游戏角色图片;3. 准备游戏背景音乐;二、实现步骤:1. 创建游戏页面,添加游戏角色图片,添加游戏背景音乐;2. 创建游戏角色类,定义游戏角色属性,如角色名称、角色图片、角色能力等;3. 创建游戏类,定义游戏属性,如游戏人数、游戏角色、游戏规则等;4. 创建游戏控制类,定义游戏流程,如游戏开始、游戏结束、游戏角色分配等;5. 创建游戏界面,实现游戏流程,如游戏开始、游戏结束、游戏角色分配等;6. 创建游戏结果页面,显示游戏_微信小程序游戏代码
文章浏览阅读1.7k次。1. 创建小程序项目:使用微信开发者工具创建一个小程序项目,并在项目中添加一个页面,用于模拟聊天。 2. 定义数据结构:定义一个数据结构,用于存储聊天记录,包括发送者、接收者、消息内容等信息。 3. 实现聊天功能:实现聊天功能,包括发送消息、接收消息、显示消息等功能。 4. 实现界面:使用微信小程序的界面框架,实现聊天界面,包括聊天记录列表、输入框等。代码示例:// 定义数据结构var chatData = { sender: '', receiver: '', message: '' };_制作聊天对话小程序代码
文章浏览阅读2.1k次。1、创建小程序项目:使用微信开发者工具,新建一个小程序项目,输入项目名称,选择项目目录,点击“创建”按钮,即可创建小程序项目。2、添加页面:在小程序项目中,可以添加多个页面,每个页面都有自己的页面文件,比如首页、分类页、购物车页、我的页面等。3、添加组件:在小程序项目中,可以添加多个组件,比如商品列表组件、购物车组件、订单组件等,用于在页面中显示商品信息、购物车信息、订单信息等。4、添加接口:在小程序项目中,可以添加多个接口,用于获取商品信息、购物车信息、订单信息等,以便在页面中显示。5、_微信开发者工具做一个我的商城