專欄概述及目錄：笑蒼天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));

}

參考

總結

以上是生活随笔為你收集整理的tilemap 菱形_使用Cocos creator制作【治愈七夕】-音乐游戏图形api绘制跳舞的线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。