微信小游戏开发入门: 示例代码介绍

什么是微信小游戏?

看前几天的科技新闻,微信中的“跳一跳”小游戏从去年12月发布,截至到今年3月份已经积累了3.9亿玩家,这是一个多么恐怖的数字,“跳一跳”游戏带火了整个微信小游戏开发圈。微信小游戏是个什么东西呢?

参考一下万能的百度百科:

微信小游戏是基于微信客户端的游戏,它即点即玩,无需下载安装,体验轻便,可以和微信内的好友一起玩,比如PK、围观等,享受小游戏带来的乐趣。微信小游戏不是一场革命,过去传统的重度手机游戏依然有其生存空间,微信小游戏既不需要下载安装包,又有合格的流畅性,是更适合休闲类游戏生长的土壤。

关于发展前景:未来的微信小游戏将是广告(高活跃)和虚拟道具(高收入)齐头并进的局面,在前期主要先做高活跃,等小游戏这个平台发展壮大,再发力高收入的游戏。

技术架构

微信小程序技术架构

上面这张图说明微信小游戏的技术架构,通俗的说微信在自己App里做了一个支持H5的浏览器内核(也可以叫一种容器),但是功能受到了一些限制。不支持 HTML 标签的解析、及 CSS 和 DOM 的解析。H5容器做的最主要事情,就是从操作系统的 Objective-C, Java, C++ API 上开始写起,里面实现自己的逻辑,然后架上安卓 v8、苹果 JavaScriptCore 等 JavaScript 虚拟机(JSVM),进而把这些操作系统 API 都绑定到 JavaScript 上。

小游戏的运行环境其实是微信的原生环境,游戏的 JavaScript 代码并不是通过浏览器来执行的,而是通过图中 JS VM 层独立的 JavaScript 引擎来执行的。 在 Android 平台使用 Google 的 v8 引擎,而在 iOS 上则使用苹果的 JavaScript Core 引擎。

从技术角度来说,微信小游戏是微信小程序的基础上添加了游戏库 API。小游戏只能运行在小程序环境中,所以小游戏既不是原生游戏,也不完全等同于 HTML5 游戏。但实际上小游戏面向的就是 HTML5 游戏开发者,为了能够让 HTML5 游戏可以尽可能低成本得移植,小游戏尽可能复用了 WebGL、JavaScript 等源自浏览器的 HTML5 技术。

可以说小游戏是使用 HTML5 技术搭建,具有原生体验的微信内游戏产品。小游戏保留了H5中游戏相关的技术,而在此基础上又追加了小程序部分特性能力。

这样出来的游戏,技术更专注、特点更微信。

与普通页面上运行H5游戏有什么不同

微信中H5浏览器内核容器的方案和 HTML5 标准是两码事,但又有共通之处。比如小游戏封装出的 OpenGL JavaScript API,和 WebGL 是一模一样的,这就让游戏的移植工作量大幅降低。只是覆盖掉了这些差异性,让开发者「感觉」自己就是用普通的游戏引擎在开发一款 HTML5 游戏,确实也能在 Chrome 里面做调试。但如果你一旦使用了既超出引擎 API、又超出微信游戏容器 API,但是符合 HTML5 标准的代码,比如来个 CSS,来个 DOM,那么就无法运行在小游戏里面啦。

微信小游戏不是纯H5环境,可以理解为定制修改过的浏览器,把延伸功能、渲染、存储用JS脚本绑定上来,所以说小游戏实际运行在Runtime环境中,而开发中的调试环境主要是网页浏览器,它们的内存和性能限制不一样,所以要尽早跑在手机上,尽量暴露潜在问题。

微信小游戏只支持JavaScript语言,当然可以编译为JS的TypeScript和CoffeeScript也可以作为开发语言使用

与普通小程序开发一样吗?

申请账号的流程,开发工具和发布的流程都是一样的。

普通小程序的设计模式是“单向”绑定的模式,入口在app.js,通过定义各个页面,然后在页面中给回调事件定义逻辑代码实现数据呈现。

而“小游戏”更加自由,入口在game.js,没有page的概念,通过weapp-adapter.js引进canvas实例,无设计模式要求。

综上所述,小游戏和小程序都是存在于微信生态环境内,但是两者的设计开发模式截然不同。

小游戏开发需要学习哪些内容

JavaScript开发语言

首先是开发语言,微信小游戏只支持 JavaScript,当然可以编译为 JS 的 TypeScript 以及 CoffeeScript 都可以作为开发语言使用。

HTML5游戏引擎

游戏引擎封装出的高层接口可以大大降低开发者的开发门槛,缩短项目周期。国内的三家主流引擎 Cocos Creator、Egret、Laya 均已支持微信小游戏开发。

掌握微信开发 API

微信小游戏还提供了丰富的微信内部 SDK 供开发者调用,使用这些接口可以完成用户登陆、转发、排行榜等常规的社交功能。

入门示例讲解

申请帐号

首先去申请微信小游戏账号,跟小程序申请的流程基本相同。为了顺利通过审核,请选择填写好游戏类别。

然后,获取到小游戏appId。

安装开发工具

前往 微信开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装。

创建小游戏项目

用微信开发工具创建一个小游戏项目,输入上面保存下来的AppId,最后,勾选“建立游戏快速启动模板”,点击确定,你就得到了你的第一个小游戏了。

真机预览

点击工具上的编译按钮,可以在工具的左侧模拟器界面看到这个小游戏的表现。点击预览按钮,通过微信的扫一扫在手机上体验你的第一个小游戏。

文件结构

主要文件有:

  1. game.js 小游戏入口文件
  2. game.json 配置文件

配置

小游戏开发者通过在根目录编写一个 game.json 文件进行配置,开发者工具和客户端需要读取这个配置,完成相关界面渲染和属性设置。

key

数据类型

说明

默认值

deviceOrientation

String

支持的屏幕方向

portrait

showStatusBar

Boolean

是否显示状态栏

false

networkTimeout

Number

网络请求的超时时间,单位:毫秒

60000

networkTimeout.request

Number

wx.request 的超时时间,单位:毫秒

60000

networkTimeout.connectSocket

Number

wx.connectSocket 的超时时间,单位:毫秒

60000

networkTimeout.uploadFile

Number

wx.uploadFile 的超时时间,单位:毫秒

60000

networkTimeout.downloadFile

Number

wx.downloadFile 的超时时间,单位:毫秒

60000

workers

String

多线程 Worker 配置项,详细请参考 Worker文档

deviceOrientation

说明

portrait

竖屏

landscape

横屏

示例配置

{ "deviceOrientation": "portrait", "networkTimeout": { "request": 5000, "connectSocket": 5000, "uploadFile": 5000, "downloadFile": 5000 } }

game.js入口文件很简单,代码如下:

import './js/libs/weapp-adapter'

import './js/libs/symbol'

import Main from './js/main'

new Main()

weapp-adapter是默认的游戏适配器文件。

Adapter游戏适配器:

小游戏的运行环境在 iOS 上是 JavaScriptCore,在 Android 上是 V8,都是没有 BOM 和 DOM 的运行环境,没有全局的 document 和 window 对象。因此当你希望使用 DOM API 来创建 Canvas 和 Image 等元素的时候,会引发错误。

var canvas = document.createElement('canvas')

但是我们可以使用 wx.createCanvas 和 wx.createImage 来封装一个 document。

var document = { createElement: function (tagName) { tagName = tagName.toLowerCase()

if (tagName === 'canvas') { return wx.createCanvas() } else if (tagName === 'image') {

return wx.createImage() } } }

这时代码就可以像在浏览器中创建元素一样创建 Canvas 和 Image 了。

var canvas = document.createElement('canvas')var image = document.createImage('image')

同样,如果想实现 new Image() 的方式创建 Image 对象,只须添加如下代码。

function Image () { return wx.createImage() }

这些使用 wx API 模拟 BOM 和 DOM 的代码组成的库称之为 Adapter。顾名思义,这是对基于浏览器环境的游戏引擎在小游戏运行环境下的一层适配层,使游戏引擎在调用 DOM API 和访问 DOM 属性时不会产生错误。Adapter 是一个抽象的代码层,并不特指某一个适配小游戏的第三方库,每位开发者都可以根据自己的项目需要实现相应的 Adapter。官方实现了一个 Adapter 名为 weapp-adapter, 并提供了完整的源码,供开发者使用和参考。

runtime目录下有:

main文件和databus文件,main.js里有程序的主函数,包括游戏开始、敌人产生、游戏侦循环、图像绘制、碰撞检测等。游戏结束后重新开始的按钮及事件处理也在这个文件中。

databus是个全局状态管理器,可以回收敌人,回收子弹,被回收的内容,不会进行侦循环,就不会绘制到屏幕上。

npc目录下:是敌机类,从类Animation继承而来,有属性可以设置敌机飞行速度、敌机图像、预订的敌机被击中时爆炸的动画。

player目录下有两个类:玩家战机,和子弹类。都是从Sprite类继承而来。其中玩家战机中有手指控制战机位置的事件处理。子弹类中有子弹速度参数,及子弹超出屏幕回收的处理逻辑,当然这两个类都有绘制图像的资源定义。

base目录下有对象池类,游戏基础的精灵Sprite类,和从精灵类继承而来的简易的帧动画类Animation。

pool类用于对象回收,Sprite类中声明的宽度、高度、坐标、图像,调用适配器中cavans绘制图像(战机)。还有简单的精灵碰撞(中心点碰撞)的定义。

Animation类提供了让精灵播放预定的帧动画的功能。

lib目录下是游戏适配器代码。

weapp-adapter 不是小游戏基础库的一部分,今后官方也将不再对 weapp-adapter 进行更新和维护。开发者应该根据自己使用的游戏引擎,实现自己的 Adapter 来使所用的游戏引擎适配小游戏的运行环境。

有这些代码一个简单的打飞机的小游戏就完成了。

改造:

世界杯期间,我们改造一下这个入门游戏。

背景可以换成一个足球场的图片,把移动背景换成固定背景。

把敌机改成足球,可以使用各种不同类型的足球图片。生成足球的逻辑也修改,不同类型的足球生成的概率不同。珍惜级别的足球,降低概率。不同的足球,设置不同的权重,击落后奖励的分数不同,修改计分逻辑。

子弹也进行改造。

很简单这个游戏改造完成了。

上传到服务器,开始试玩吧。

钱景

根据 12 月初伽马数据的行业报告,国内 2017 年手机原生游戏 1162 亿,PC 端游 648 亿,PC 页游 156 亿,所以按比例简单计算的话,手机页游的市场空间 = 1162 ÷ 648 x 156 = 每年 280 亿人民币。

如果进一步考虑 Flash 宣布 2020 年停更,市面大量 PC 页游都开始转用 HTML5 技术制作,而手机原生上也出现了大量的微端产品,那么如果不考虑此消彼长的制约, HTML5 技术可以支撑的游戏市场规模应该 = 280 亿 手机页游 + 156 亿 PC 页游 + 部分手机原生游戏 ≈ 每年 500 亿人民币。

500 亿人民币还只是计算国内的规模。根据国外 Newzoo 在年中的数据,中国游戏产业规模占全球 25%,那么 HTML5 技术理论上可以支撑的全球手机页游、手机原生、PC 页游市场容量上限可达每年 2000 亿人民币。

原文发布于微信公众号 - 程序你好(codinghello)

原文发表时间:2018-06-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网杂技

20个为前端开发者准备的文档和指南4

1.I want to use 基于的数据和功能都在Can I use网站上列出来了,这个app可以给你选择很多前端开发功能的能力和获得全世界用户看到你选择的功...

34010
来自专栏生信宝典

你和PPT高手之间,就只差一个iSlide

做幻灯展示是我们日常工作中不可缺少的一部分,有的人喜欢用代码如Latex, markdown+pandoc+revealjs 或 bookdown。这些都是自动...

3049
来自专栏Python绿色通道

Python爬虫:使用Python动态爬取冯大辉老师微博,再用词云分析

冯大辉老师在程序员圈子中还是比较出名的,大部分都知道他这个人,性格很鲜明。他现在正在创业,公司叫无码科技,他有一个公众号叫小道消息,新榜给的活跃粉丝是30多万数...

1791
来自专栏编程微刊

提高工作效率的几个小技巧

1554
来自专栏程序员宝库

刚开始学编程?这几款小工具能让你事半功倍

2177
来自专栏SAP最佳业务实践

SAP最佳业务实践:MM–有JIT交货计划的采购(230)-3收货&开票

4.5 MIGO收货 收货是指实际货物和物料的入库过程。收货通常来自于外部供应商或内部生产部门。所有收货都会增加库存。 此步骤仅用于物料H20,H21,看板物料...

4426
来自专栏极乐技术社区

【微信小程序】从入门到放弃

前言 关于微信小程序是什么,能做什么的问题,草民在此不在罗列了,随着小程序的天天刷屏,想必您也是来吃一些干货,本篇博文和大家走进微信小程序的从入门到放弃~ 微信...

3597
来自专栏腾讯社交用户体验设计

玩转HTML5移动页面(优化篇)- 腾讯ISUX

1983
来自专栏用户2442861的专栏

前端开发介绍(包含调试什么的)

http://www.cnblogs.com/jikey/p/4259360.html

2792
来自专栏HTML5学堂

HBuilder的基本介绍

工具 - HBuilder 起因 HTML最开始其实不是一个编程语言,确实用不着什么ide。 但是发展到现在,7w多个语法,js越来越庞大,真开发一个达到原生水...

81710

扫码关注云+社区