I、 minigame 概述
小游戏的运行环境在 iOS 上是 JavaScriptCore.
在引擎和游戏逻辑代码之间加一层模拟 BOM 和 DOM API 的适配层,使引擎感受不到环境的差异。
微信小游戏平台
微信小游戏是微信小程序下的游戏产品平台，它不仅提供了强大的游戏能力，还和小程序一样，提供了大量的原生接口，比如支付，社交，文件系统，照片，NFC 等。相当于同时结合了 WEB 易于传播以及 Native 功能丰富的优势。
- 小游戏在小程序环境的基础上提供了 WebGL 接口的封装，使得渲染能力和性能有了大幅度提升。
目前小游戏环境提供了 Canvas 以及 WebGL 的渲染接口
II、文件结构
devzkndeMacBook-Pro:KNgame devzkn$ tree -L 10
.
├── README.md
├── audio
│ ├── bgm.mp3
│ ├── boom.mp3
│ └── bullet.mp3
├── game.js
├── game.json
├── images
│ ├── Common.png
│ ├── bg.jpg
│ ├── bullet.png
│ ├── enemy.png
│ ├── explosion1.png
│ ├── explosion10.png
│ ├── explosion11.png
│ ├── explosion12.png
│ ├── explosion13.png
│ ├── explosion14.png
│ ├── explosion15.png
│ ├── explosion16.png
│ ├── explosion17.png
│ ├── explosion18.png
│ ├── explosion19.png
│ ├── explosion2.png
│ ├── explosion3.png
│ ├── explosion4.png
│ ├── explosion5.png
│ ├── explosion6.png
│ ├── explosion7.png
│ ├── explosion8.png
│ ├── explosion9.png
│ └── hero.png
├── js
│ ├── base
│ │ ├── animation.js
│ │ ├── pool.js
│ │ └── sprite.js
│ ├── databus.js
│ ├── libs
│ │ ├── symbol.js
│ │ └── weapp-adapter.js
│ ├── main.js
│ ├── npc
│ │ └── enemy.js
│ ├── player
│ │ ├── bullet.js
│ │ └── index.js
│ └── runtime
│ ├── background.js
│ ├── gameinfo.js
│ └── music.js
└── project.config.json
两个必要文件
├── game.js 小游戏入口文件
└── game.json 配置文件
III、 配置
IV、 创建 Canvas
首次调用 wx.createCanvas() 创建的是上屏 Canvas，之后调用则创建的是离屏 Canvas。
- 官方提供的
Adapter即 weapp-adapter.js（关于什么是 Adpater 请参考官方教程 Adapter），那么你此时创建的会是一个离屏 Canvas。因为在 weapp-adapter.js 已经调用了一次 wx.createCanvas()，并把返回的 canvas 作为全局变量暴露出来。
function Canvas() {
var canvas = wx.createCanvas()
canvas.type = 'canvas'
canvas.__proto__.__proto__ = new _HTMLElement2.default('canvas')
var _getContext = canvas.getContext
canvas.getBoundingClientRect = function () {
var ret = {
top: 0,
left: 0,
width: window.innerWidth,
height: window.innerHeight
}
return ret
}
return canvas
}
在 Canvas 上进行绘制
使用 2d 渲染上下文 RenderingContext的进行简单的绘制
let ctx = canvas.getContext('2d')
var context = canvas.getContext('2d')
context.fillStyle = 'red'
context.fillRect(0, 0, 100, 100)
显示图片
通过 wx.createImage() 接口，可以创建一个 Image 对象。Image 对象可以加载图片。当 Image 对象被绘制到 Canvas 上时，图片才会显示在屏幕上。
全局对象 GameGlobal
提供了全局对象 GameGlobal，所有全局定义的变量都是 GameGlobal 的属性。
V、 Adapter
这些使用 wx API 模拟 BOM 和 DOM 的代码组成的库称之为 Adapter;这是对基于浏览器环境的游戏引擎在小游戏运行环境下的一层适配层.
- 官方实现了一个 Adapter 名为 weapp-adapter
- 开发者可以根据需要在 weapp-adapter 的基础上进行扩展，以适配自己项目使用的游戏引擎
weapp-adapter 不是小游戏基础库的一部分
- 将 weapp-adapter 视为和游戏引擎都视为第三方库，需要开发者在小游戏项目中自行引入
import './js/libs/weapp-adapter'
import './js/libs/symbol'
VI 、对引擎的支持
基于 HTML5 的游戏引擎都是依赖浏览器提供的 BOM 和 DOM API 的;然而,小游戏是一个不同于浏览器的 JavaScript 运行环境，没有 BOM 和 DOM API。所以需要对引擎进行改造。
Cocos、Egret、Laya 已经完成了自身引擎及其工具对小游戏的适配和支持
- Cocos：http://docs.cocos.com/creator/manual/zh/publish/publish-wechatgame.html
- Egret：http://developer.egret.com/cn/github/egret-docs/Engine2D/minigame/introduction/index.html
- Laya：https://ldc.layabox.com/doc/?nav=zh-as-3-4-5
小游戏是一个不同于浏览器的运行环境
- 引擎所做的事情:
随着用户的交互更新画面和播放声音小游戏的开发语言是 JavaScript，那么在引擎的底层就需要通过 JavaScript 调用绘制 API 和音频 API。
- 一段 JavaScript 代码在运行时可以调用的 API 是依赖于 宿主环境 的。
1) 我们最常用的 console.log 甚至都不是 JavaScript 语言核心的一部分，而是浏览器这个宿主环境提供的。常见的宿主环境有浏览器、Node.js 等。 2) 浏览器有 BOM 和 DOM API，而 Node.js 则没有；Node.js 有 fs、net 等 Node.js 核心模块提供的文件、网络 API，而浏览器则不具备这些模块。 3) 小游戏这个宿主环境根本没有提供 document 和 window 这两个在浏览器中内置的全局变量
在引擎和游戏逻辑代码之间加一层模拟 BOM 和 DOM API 的适配层,使引擎感受不到环境的差异。
See Also
/Users/devzkn/bin/knpost game 小游戏 -t minigame #原来""的参数，需要自己加上""
