tilemap 菱形_使用Cocos creator制作【治愈七夕】-音乐游戏图形api绘制跳舞的线

专栏概述及目录：笑苍天Smile：专栏概述及目录​zhuanlan.zhihu.com

游戏截图：

游戏地址：微信扫一扫

游戏源码

游戏技术：前端引擎-Cocos creator，语言-Ts。

写作目的：自我总结，游戏引流，经验分享。

游戏分成Cocos creator引擎的通用技术，微信的第三方接入，治愈七夕共3个部分。前面两部分可参考wind扫雷

治愈七夕商业模式

音乐加载

微信前后台切换声音处理

地形图tilemap动态加载

角色坐标转换成timemap的菱形坐标

图形api绘制跳舞的线

商业模式：卖关卡，通过视频广告开启关卡。结算、等待界面的横屏以及插屏广告。

音乐加载：因为微信代码包有大小限制

var self = this;

var downTask = wx.downloadFile({

url: remoteUrl,

success(res){

console.log("res = ", res);

if (res.statusCode == 200){

let audio = wx.createInnerAudioContext();

audio.src = res.tempFilePath;

self.loadLvScene(audio);

}

}

})

downTask.onProgressUpdate((res)=>{

this.labTime.string = res.progress.toString()+"%";

})

微信前后台切换声音处理：

onAudioEvent(){

if (CC_WECHATGAME){

var self = this;

wx.onAudioInterruptionBegin(()=>{

console.log("self.audioTask.paused Begin = " + (self.audioTask && self.audioTask.paused));

self._gameStatus = 4;

});

wx.onAudioInterruptionEnd(()=>{

console.log("self.audioTask.paused End = " + (self.audioTask && self.audioTask.paused));

self._gameStatus = 1;

if (self.audioTask && self.audioTask.paused)

self.audioTask.play();

});

self.audioTask.onEnded(()=>{

self.gameOver();

});

// if (cc.sys.os === cc.sys.OS_ANDROID){

wx.onShow(()=>{

console.log("self.audioTask.paused onShow = " + (self.audioTask && self.audioTask.paused));

if (self.audioTask && self.audioTask.paused)

self.audioTask.play();

});

// }

}

}

地形图tilemap动态加载：

onCreateTileMap (url) {

cc.loader.loadRes(url, cc.TiledMapAsset, (err, tmxAsset) => {

if (err) {

cc.error(err);

return;

}

// this.mapRoot.destroyAllChildren();

var node = new cc.Node();

this.mapRoot.addChild(node);

var tileMap = node.addComponent(cc.TiledMap);

tileMap.tmxAsset = tmxAsset;

this._tiledMap = tileMap;

this._layerFloor = this._tiledMap.getLayer("floor");

this._ndMap = node;

node.active = false;

this._ndMap.active = false;

this.showBg();

var mapSize = this._ndMap.getContentSize();

var tileSize = this._tiledMap.getTileSize();

this.mapRoot.y = mapSize.height/2;

this.ndPlayer.y = -mapSize.height/2 + tileSize.height/2;

this.ndLine.y = this.ndPlayer.y;

if (this.iLv == 3 || this.iLv == 4){

this.ndPlayer.getComponent(cc.Sprite).spriteFrame = this.sptGirl;

}else if (this.iLv == 5 || this.iLv == 6){

this.ndPlayer.getComponent(cc.Sprite).spriteFrame = this.sptBoth;

}

this.onAudioEvent();

});

}

角色坐标转换成timemap的菱形坐标(这里有个简单的矩形坐标到菱形坐标的转换公式，推导过程网上一搜就有，大体是在此基础上又进行了一些处理)：

_getTilePos(posInPixel) {

var mapSize = this._ndMap.getContentSize();

var tileSize = this._tiledMap.getTileSize();

var multi = tileSize.width/tileSize.height;

posInPixel.x += mapSize.width/2;

posInPixel.y += mapSize.height/2;

var x = Math.floor(posInPixel.x / tileSize.width)*tileSize.width;

var y = Math.floor((mapSize.height - posInPixel.y) / tileSize.height)*tileSize.height;

var px = 0, py = 0; //将坐标转换成所在菱形的中点

var nx = posInPixel.x-x;

var ny = mapSize.height-posInPixel.y-y;

if (ny <= tileSize.height-1/multi*nx){

if (ny <= 1/multi*nx){

px = x+tileSize.width/2;

py = y;

}else{

px = x;

py = y+tileSize.height/2;

}

}else{

if (ny <= 1/multi*nx){

px = x+tileSize.width;

py = y+tileSize.height/2;

}else{

px = x+tileSize.width/2;

py = y+tileSize.height;

}

}

var m = (px+multi*py-mapSize.width/2-multi*tileSize.height/2)/(multi*tileSize.height);

var n = (multi*py-px+mapSize.width/2-multi*tileSize.height/2)/(multi*tileSize.height);

// cc.log(posInPixel.x, posInPixel.y, x, y, px, py, m, n);

return cc.v2(m, n);

}

图形api绘制跳舞的线：游戏中并没有展现这个功能，所以这里放个gif动画，或者自行下载源码运行查看。

//思路：记录要连接的坐标点，然后用图形api逐个连接这些坐标点

//在需要记录坐标点的地方调用this.record，在update中调用this.drawLine(cc.v2(dx, dy))

drawLine(v2){

this.line.clear();

var tileSize = this._tiledMap.getTileSize();

this.line.moveTo(this._vPos.x, this._vPos.y+tileSize.height/2);

for (let l = this._tPoint.length, i = l-1; i >= 0; i--) {

var p = this._tPoint[i];

p.x -= v2.x;

p.y -= v2.y;

this.line.lineTo(p.x, p.y);

if (p.y < 0) break;

}

this.line.stroke();

}

record(){

var tileSize = this._tiledMap.getTileSize();

this._tPoint.push(cc.v2(this._vPos.x, this._vPos.y+tileSize.height/2));

}

参考