cocos小游戏开发总结

最近接到一个任务要开发消消乐小游戏，当然首先就想到乐cocosCreator来作为开发工具。开发本身倒没有多少难点。消消乐的开发官网发行的书上有专门讲到。下面主要总结一下开发中遇到的问题以及解决方法

屏幕适配

由于设计尺寸是750*1336，如果适应高度，则在iphonX下，内容会超出屏幕宽度。按宽适应，iphon4下内容会超出屏幕高度。所以就需要根据屏幕比例来动态设置适配策略。

 onLoad() {var canvas = this.canvasvar designResolution = canvas.designResolutionvar viewSize = cc.view.getFrameSize()if (viewSize.width/viewSize.height > designResolution.width/designResolution.height){canvas.fitHeight = true}else{canvas.fitWidth = true}}
复制代码

显示微信头像

由于微信头像显示涉及到跨域问题，所以我在我们游戏所在服务器上用nginx设置了反向代理来解决跨域问题，并把获取到的微信头像地址域名替换成服务器所在域名

 let url = userObj.headimgurl.replace('http://thirdwx.qlogo.cn','我们的服务器域名');cc.loader.load({ url, type: 'png' }, (err, res) => {Message.hide();this.node.getComponent(cc.Sprite).spriteFrame = new cc.SpriteFrame(res);});
复制代码

生成二维码

由于要根据动态地址生成二维码这里用到QR.js+graphics来实现。首先引入QR.js（npm上可以找到）并设置为插件引入。在所在节点上添加Graphics。然后用如下代码生成二维码

//生成二维码createrQR() {const urlString = 'http://xxxxxx';const graphics = this.qrNode.getComponent(cc.Graphics);// returngraphics.clear();//背景色graphics.fillColor = cc.Color.WHITE;//let rect = this.node.getBoundingBox();let width = this.qrNode.width;graphics.rect(0 - width * 0.5, 0 - width * 0.5, width, width);graphics.fill();graphics.close();//生成二维码数据let qrcode = new QRCode(-1, 2);qrcode.addData(urlString);qrcode.make();graphics.fillColor = cc.Color.BLACK;let size = width - 10 * 2;let num = qrcode.getModuleCount();let tileW = size / num;let tileH = size / num;let w = Math.ceil(tileW);let h = Math.ceil(tileH);for (let row = 0; row < num; row++) {for (let col = 0; col < num; col++) {if (qrcode.isDark(row, col)) {graphics.rect(10 + col * tileW - width * 0.5, size - tileH - Math.round(row * tileH) + 10 - width * 0.5, w, h);graphics.fill();}}}}
复制代码

截取屏幕

//截屏capture() {cc.director.on(cc.Director.EVENT_AFTER_DRAW, this.callback.bind(this));}callback() {let canvas = document.getElementById("GameCanvas") as HTMLCanvasElement;let baseUrl = canvas.toDataURL("imagea/png");cc.director.off(cc.Director.EVENT_AFTER_DRAW);this.showImgDiv(baseUrl)}
复制代码

开关背景音乐

在初始场景上添加一个节点，节点的层级要比场景的canvas高才能看的到音乐图标。然后在节点上添加一个Sprite，把音乐图标加入上面。在该节点上添加如下代码将该节点设置为常驻节点，并控制其播放暂停。

@ccclass
export default class NewClass extends cc.Component {@property({type: cc.AudioClip})bgAudio: cc.AudioClip;audioid;playState: boolean = true;action;onEnable() {cc.game.addPersistRootNode(this.node);this.autoAudioPlay();}autoAudioPlay = () => {if(typeof this.audioid ==="undefined"){this.audioid = cc.audioEngine.play(this.bgAudio, true, 1)}this.action = cc.repeatForever(cc.rotateBy(3, 360));this.node.runAction(this.action);}playSwitch = () => {console.log(this.playState)if (this.playState) {this.playState = false;// 停止一个动作this.node.stopAction(this.action);cc.audioEngine.pause(this.audioid)} else {this.playState = true;// 执行动作this.node.runAction(this.action);cc.audioEngine.resume(this.audioid);}}onDestroy() {}
}
复制代码