loading请求处理中...
广告位招商×

微信小游戏开发框架

2019-05-23 14:35:19 阅读 28619次 0 标签: 微信小游戏开发 作者: 陈先生12121
微信自从有了 “跳一跳” 后微信小游戏就开始迅速火爆起来,为跟上这股潮流,相信很多开发者都想探一探微信小游戏是如何开发的。下面我就从技术的角度说说一下微信小游戏如何开发的。

附:本文适合有开发经验的人,关于如何创建微信小游戏账号和使用微信小游戏开发工具就不再赘述,不了解的可以到微信小游戏开发者后台阅读相关文档。

相关技能
抛开表面看本质,揭开微信小程序这件外套,从代码层面上来看,其实质就是一些 HTML5、css3 和 JavaScript 代码。所以微信小游戏既不是原生游戏(只能运行在微信中),也不完全等同H5游戏。其实质确是面向的H5游戏的开发者。可以说小游戏是使用HTML5技术搭建,具有原生体验的微信内游戏产品。

实现一个单人版的微信小游戏,比如俄罗斯方块这种,主要的技术就是用jQuery原生JavaScript(实现游戏逻辑)、CSS3(控制游戏画面)、加上一点DOM操作;

比如HTML5版本的传奇世界。是基于H5游戏引擎实现的。其主要技术:JavaScript 、H5游戏引擎、浏览器API、网络通信等。

- 开发语言

微信小游戏只支持 JavaScript,所以游戏逻辑相关的开发那就是JavaScript, 不过也可以使用可以编译成JavaScript的TypeScript。

- 游戏库API

主要包含 HTML5的 Canvas 2D API和 WebGL API 使用任何一种API都可以完成游戏最重要的渲染功能。

- 网络模块

实现网络对战是需要一定的网络编程基础,熟悉网络通信相关协议,同时还要自己搭建联网的服务器来维护小游戏客户端之间的通信。

游戏开发
总的来说开发一款小游戏分为两种情况,第一种是不引用游戏渲染引擎,游戏联网引擎,使用常规的开发方法,自己实现场景渲染和网络对战开发。第二种是使用游戏渲染引擎和游戏联网引擎。

完全自主研发

第一步:拟定游戏开发方案,设计游戏UI图片。游戏开发方案就是确定要开发什么样的游戏,达到什么样的效果。设计游戏UI图片可以使用相关软件如PS/CAD等。

第二步:搭建游戏前端框架游戏场景画面渲染架构设计。使用HTML5和CSS3设计游戏场景的架构,封装好UI层处理的接口,待游戏逻辑开发时,只需要调用接口即可操作UI显示效果。

第三步:游戏逻辑处理架构设计和实现。常用的软件设计模式都是MVC模式,就是UI、业务逻辑和数据控制都是分开来的,使用JavaScript实现游的逻辑控制和游戏数据存储。设计一套框架,同样以接口的形式调用,在设计一套把UI和游戏逻辑联系在一起的程序。

第四步:游戏网络对战服务器搭建和服务器程序架构设计与实现。上一步把基本游戏逻辑都实现了,但是毕竟是互动游戏,要实现网络通信那还得设计一套服务器通信程序,用于游戏实现网络对战功能。服务器程序开发有多重选择,这里就根据开发者自己决定。

第五步:游戏客户端与服务端联调。开发好服务模块,要确保游戏运行的稳定性和逻辑的正确性,需要花一定的时间进行联调工作。

使用引擎工具

第一步:拟定游戏开发方案,设计游戏UI图片,这里和前面的一样。

第二步:使用游戏渲染引擎开发工具开发游戏逻辑。不需要开发者关心游戏的界面是如何渲染的,开发者只要关心游戏实现的逻辑,对应游戏画面渲染可直接调用引擎接口来实现画面效果。

第三步:游戏联网联调。

以Matchvs为例,开发者不需要自己搭建服务器和编写服务器网络通信程序,直接调用联网引擎的接口,简单易用。下面举例说明:

先调用注册接口registerUser获取用户信息。

登录用户:一个login 请求接口,一个loginResponse回调接口检查是否登录成功。

加入房间只要调用JoinRoom接口,然后就会返回JoinRoomResponse 回调,接口参数会告诉你现在有哪些人在房间和一些房间的信息等。还包括主动创建房间、踢人、断线重连功能。所有接口使用方式都是一样的。


微信小游戏开发初体验


注意:先搭建环境,在下载官方开发工具包

1.环境搭建
(1)百度搜索nodejs,选择官网按需下载安装包,
nodejs。安装的过程一路next就可以了,安装后将nodejs设置为环境变量。
(2)打开cmd,测试是否安装成功,在命令行输入node -v,如下:
D:>node -v
v6.10.1
(3)npm的安装,由于新版的Nodejs已经集成了npm,所以一并安装好了,在命令行中输入npm -v查看
D:>npm -v
(4)新建目录,配置环境变量

其次在cmd中输入:
npm config set prefix “C:Program Filesnodejsnode_global”;
npm config set cache “C:Program Filesnodejsnode_cache”;

2.注册账号下载下微信官方工具集启动demo体验
3.重点来了:正常版本无问题,云开发版本各种错误。
云开发的版本会提示报错

云开发版本项目配置:打开project.config.json将以下条目正确配置

  ”projectname”: “WXTestDemo/miniprogram”,

  ”miniprogramRoot”: “miniprogram/“,

  ”cloudfunctionRoot”: “cloudfunction/“,

点击 云开发 开通云服务 并创建score数据库

如果有类似下面这些报错:

(1).upload score failed Error: errCode: -404011 cloud function execution error

(2).VM960:1 db get score catch error Error: errCode: -1

(3).cloud function service error code -504002, error message wx is not defined

原因:

(1).wx-server-sdk 没有安装,需要在云函数下指定安装node.js 环境 (云函数路径下执行命令行 npm install)

(2).由于问题1和问题3所引起。

(3).将uploadScore 云函数中的wx.clond=false 注释掉即可

清理数据重新运行即可


扫码,回复【创业】领取

免费送您一份创业礼包!

从0到1,解锁创业全套秘籍

帮你避开创业那些坑

设计、开发、营销需求

扫描左边二维码

免费获取咨询和方案报价

公司推荐

成为一品威客服务商,百万订单等您来有奖注册中

留言(0 展开评论

您需要注册登录才能发表言论

快速发任务

开发价格是多少?怎样找到合适的开发人才?

官方顾问免费为您解答

 
微信小游戏开发相关任务
DESIGN TASK 更多
捕鱼达人app开发(安卓 苹果)

¥40000 已有2人投标

人才培训管理软件开发

¥50000 已有12人投标

门户网站前后台页面开发

¥1500 已有0人投标

求职APP开发

¥100000 已有18人投标

3dsMax ,UE4 导模插件开发

¥25000 已有0人投标

直播商城小程序+app双端开发

¥20000 已有15人投标

租车平台小程序开发

¥20000 已有15人投标