新建项目选择小程序项目,选择代码存放的硬盘路径。目前小游戏不提供公开注册,可点击体验小游戏使用无AppID模式。给你的项目起一个好听的名字,最后,勾选“建立游戏快速启动模板”(注意:你要选择一个空的目录才会有这个选项),点击确定,你就得到了你的第一个小游戏了。
点击顶部菜单编译就可以在IDE预览你的第一个小游戏。
小游戏只有以下两个必要文件:
{"deviceOrientation":"portrait","networkTimeout":{"request":5000,"connectSocket":5000,"uploadFile":5000,"downloadFile":5000}}wxAPI你只能使用JavaScript来编写小游戏。小游戏的运行环境是一个绑定了一些方法的JavaScriptVM。不同于浏览器,这个运行环境没有BOM和DOMAPI,只有wxAPI。接下来我们将介绍如何用wxAPI来完成创建画布、绘制图形、显示图片以及响应用户交互等基础功能。
varcanvas=wx.createCanvas()此时创建的canvas是一个上屏Canvas,已经显示在了屏幕上,且与屏幕等宽等高。
├──game.js├──weapp-adapter.js└──game.json在weapp-adapter.js中已经调用了一次wx.createCanvas(),并把返回的canvas作为全局变量暴露出来。
//weapp-adaptercanvas=wx.createCanvas()如果你在requireweapp-adapter.js之后再调用wx.createCanvas(),那么创建的Canvas会是一个离屏的Canvas,因为此时已经不是对该API的首次调用。
require('./weapp-adapter')varmyCanvas=wx.createCanvas()在Canvas上进行绘制但是由于没有在canvas上进行绘制,所以canvas是透明的。使用2d渲染上下文的进行简单的绘制,可以在屏幕左上角看到一个100x100的红色矩形。
通过设置width和height属性可以改变Canvas对象的宽高,但这也会导致Canvas内容的清空和渲染上下文的重置。
varimage=wx.createImage()设置Image对象的src属性可以加载一张本地图片或网络图片,当图片加载完毕时会执行注册的onload回调函数,此时可以将Image对象绘制到Canvas上。
image.onload=function(){console.log(image.width,image.height)context.drawImage(image,0,0)}image.src='logo.png'创建多个Canvas在整个小游戏运行期间,首次调用wx.createCanvas接口创建的是一个上屏Canvas。在这个canvas上绘制的内容都将显示在屏幕上。而第二次、第三次等后几次调用wx.createCanvas创建的都会是离屏Canvas。在离屏Canvas上绘制的内容仅仅只是绘制到了这个离屏Canvas上,并不会显示在屏幕上。
以如下代码为例,运行后会发现屏幕上并没有在(0,0)的位置显示100x100的红色矩形。因为我们是在一个离屏的Canvas绘制的。
varscreenCanvas=wx.createCanvas()varoffScreenCanvas=wx.createCanvas()varoffContext=offScreenCanvas.getContext('2d')offContext.fillStyle='red'offContext.fillRect(0,0,100,100)为了让这个红色矩形显示在屏幕上,我们需要把离屏的offScreenCanvas绘制到上屏的screenCanvas上。
varscreenContext=screenCanvas.getContext('2d')screenContext.drawImage(offScreenCanvas,0,0)动画在JavaScript中,一般通过setInterval/setTimeout/requestAnimationFrame来实现动画效果。小游戏对这些API提供了支持:
响应用户与屏幕的交互是游戏中必不可少的部分,小游戏参照DOM中的TouchEvent提供了以下监听触摸事件的API:
wx.onTouchStart(function(e){console.log(e.touches)})wx.onTouchMove(function(e){console.log(e.touches)})wx.onTouchEnd(function(e){console.log(e.touches)})wx.onTouchCancel(function(e){console.log(e.touches)})全局对象window对象是浏览器环境下的全局对象。小游戏的运行环境中没有BOMAPI,因此没有window对象。但是提供了全局对象GameGlobal,所有全局定义的变量都是GameGlobal的属性。
console.log(GameGlobal.setTimeout===setTimeout)console.log(GameGlobal.requestAnimationFrame===requestAnimationFrame)//true开发者可以根据需要把自己封装的类和函数挂载到GameGlobal上。
GameGlobal.render=function(){//省略方法的具体实现...}render()GameGlobal是一个全局对象,本身也是一个存在循环引用的对象。
console.log(GameGlobal===GameGlobal.GameGlobal)console.log无法在真机上将存在循环引用的对象输出到vConsole中。因此真机调试时请注释console.log(GameGlobal)这样的代码,否则将会产生这样的错误