要點(diǎn)
- UI界面重構(gòu)：可以把設(shè)計(jì)稿作為最底層節(jié)點(diǎn)，逐步把節(jié)點(diǎn)對(duì)齊設(shè)計(jì)稿明棍，這樣可以免計(jì)算節(jié)點(diǎn)位置。
- 使用 VS Code 激活腳本編譯（快捷鍵ctrl+p）:配置地址
- 少使用
active屬性妨马，使用其會(huì)觸發(fā)遞歸遍歷場景枕稀，開銷較大捐名，可以通過設(shè)置opacity旦万，scale，或者修改位移達(dá)到隱藏和顯示的效果 - Label文字組件添加描邊：LabelOutline組件
- 對(duì)象淺拷貝與深拷貝：
淺拷貝：
var obj1 = {name:'lily',age:12}
var obj2 = obj1
obj2.age = 13 //obj1,obj2的age都變成13
深拷貝：
function copy(obj){
var newObj = {}
for(var attr in obj){
newObj[attr] = obj[attr]
}
return newObj
}
var obj1 = {name:'lily',age:12}
var obj2 = copy(obj1)
obj2.age = 13
- loading的制作：
1.將`cc.Sprite`組件的`type`屬性改成`FILLED`
橫向loading：
fillType: HORIZONTAL
fillStart:0 //從左邊開始
fillRange:0 //填充的百分比成艘，0~1
扇形loading：
fillType: RIDICAL //扇形
fillCenter：（0.5贺归，0.5）//中心點(diǎn)開始
fillStart:0.25 //最上邊
fillRange:0 //填充的百分比，負(fù)為順時(shí)針拂酣，正為逆時(shí)針
扇形講解圖：
^y
0.25|
0.375 ----|---0.125
| | |
0.5---|---|---|0----->x
| | |
0.625----|---0.875
0.75
2.通過腳本修改`fillRange`屬性即可
cc.loader.onProgress = (completedCount, totalCount, item) => {
const progress = (completedCount / totalCount).toFixed(2)
// 順時(shí)針
this.loading.getComponent('cc.Sprite').fillRange = -progress
}
}
錨點(diǎn)anchor：左下角是（0秋冰，0），右上角是（1剑勾，1）
當(dāng)在對(duì)戰(zhàn)游戲中出現(xiàn)各種動(dòng)畫時(shí)，譬如：2s后根據(jù)對(duì)方或者自己開始某個(gè)動(dòng)畫虽另，倘若一開始回合屬于對(duì)手，該動(dòng)畫不應(yīng)該在自己回合出現(xiàn)饺谬。但在2s的時(shí)間內(nèi)對(duì)手已經(jīng)完成自己的回合捂刺，此時(shí)回合到自己，這時(shí)2s后這個(gè)動(dòng)畫就認(rèn)為一開始是自己的回合募寨，導(dǎo)致動(dòng)畫執(zhí)行錯(cuò)誤，此時(shí)苛谷，需要添加一些判斷條件格郁，是否開始了一回合，以防止在某段時(shí)間內(nèi)參數(shù)改變導(dǎo)致動(dòng)畫出錯(cuò)例书。
隨著新場景的切換，內(nèi)存占用就會(huì)不斷上升自沧。除了使用
cc.loader.release等API來精確釋放不使用的資源，我們還可以使用場景的自動(dòng)釋放功能拇厢，在場景屬性管理器中設(shè)置自動(dòng)釋放資源選項(xiàng)。判斷是在小游戲內(nèi)還是app的webview內(nèi)：
cc.sys.isBrowser-
谷歌瀏覽器跨域調(diào)試：要完全退出chrome瀏覽器后访敌，新建一個(gè)目錄用來存放谷歌調(diào)試文件衣盾，在終端輸入命令：
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/${你的用戶名}/${新建的目錄路徑及名稱}
跨域調(diào)試成功標(biāo)識(shí)
- 對(duì)于打包web以及其他平臺(tái)后，修改頁面loading時(shí)出現(xiàn)的cocos creator官方的loading樣式阻塑，修改該樣式的方法（mac中果复，windows原理一樣）：
1.右鍵點(diǎn)擊cocos creator軟件選擇“打開包內(nèi)容”
2.去到文件路徑路徑：Contents/Resources/static/build-templates/shares/下修改style-mobile.css對(duì)應(yīng)樣式
新建資源和刪除資源要從cocos creator中進(jìn)行操作，不要在vs code編輯器中操作走搁，因?yàn)樵趘s code中操作刪除只是刪除了一個(gè)文件，沒有把相應(yīng)的.meta文件刪掉极颓。
碰撞檢測
a.在編輯器中添加Collider，根據(jù)物體形狀進(jìn)行選擇兵琳，使用矩形骇径，圓形還是多邊形碰撞
b.在 項(xiàng)目-項(xiàng)目設(shè)置-分組管理 中添加分組，然后勾選會(huì)進(jìn)行碰撞的組破衔，例如 燈 和 人，然后在編輯器中的Node中的Group中選擇相對(duì)應(yīng)的碰撞分組
c.給碰撞對(duì)象綁定組件嫡丙，并在組件中添加碰撞檢測代碼读第，并做相應(yīng)碰撞效果處理：
onCollisionEnter (other, self) {
console.log('on collision enter')
},
onCollisionStay (other, self) {
console.log('on collision stay')
},
onCollisionExit (other, self) {
console.log('on collision exit')
}
d.并開啟碰撞檢測：
this.manager = cc.director.getCollisionManager()
// 開啟碰撞檢測
this.manager.enabled = true
// 開啟碰撞邊緣繪制調(diào)試
manager.enabledDebugDraw = true
// 開啟包圍盒繪制調(diào)試
manager.enabledDrawBoundingBox = true
e.如果需要去掉相同預(yù)制節(jié)點(diǎn)中不需要進(jìn)行碰撞檢測的節(jié)點(diǎn)，可以指定節(jié)點(diǎn)關(guān)閉
node.getComponent(cc.CircleCollider).enabled = false
- 兩人賽跑之間的位移差視覺處理：對(duì)不同物體選擇不同的參照物
a.當(dāng)我停止對(duì)手在跑的時(shí)候父泳，我與背景相對(duì)靜止?fàn)顟B(tài)，對(duì)手向前跑
b.當(dāng)我跑的并且對(duì)手也在跑的時(shí)候惠窄，我和對(duì)手相對(duì)靜止
c.當(dāng)我跑，對(duì)手停止的時(shí)候楞卡，對(duì)手和背景相對(duì)靜止
難點(diǎn)
- 幾個(gè)場景公用一條websocket連接：建立ws模塊擒贸，在游戲邏輯模塊進(jìn)行托管處理
// ws模塊：
const WS = {
ws: null,
wsUrl: null
},
_setWsCloseFunc: function () {},
_setOpenFunc: function () {},
_setMessageFunc: function () {}
}
// 連接websocket
WS._createWebSocket = function (url) {
try {
this.ws = new WebSocket(url)
this._initEventHandle()
}
catch (e) {
console.log('catch', e)
}
}
// websocket事件
WS._initEventHandle = function () {
this.ws.onclose = () => {
this._setWsCloseFunc()
}
this.ws.onerror = (err) => {
}
this.ws.onopen = () => {
this._setOpenFunc()
}
this.ws.onmessage = (event) => {
this._setMessageFunc()
}
}
module.exports = WS
// 游戲邏輯模塊
import WS from './ws'
cc.Class({
extends: cc.Component,
properties: {
},
onLoad () {
},
start () {
WS._setOpenFunc = this._setOpenFunc.bind(this)
WS._setMessageFunc = this._setMessageFunc.bind(this)
WS._setWsCloseFunc = this._setWsCloseFunc.bind(this)
},
// onclose
_setWsCloseFunc () {
},
// onopen
_setOpenFunc () {
},
// onmessage
_setMessageFunc () {
},
})
- 彈窗事件穿透：對(duì)遮罩層添加默認(rèn)事件
node.on(cc.Node.EventType.TOUCH_START, () => { })
ios web中不能自動(dòng)播放音頻（瀏覽器的限制策略）介劫，必須手動(dòng)觸發(fā)事件播放案淋，解決此問題，在微信中踢京，需要用WeixinJSBridge:
WeixinJSBridge.invoke('getNetworkType', {}, (e)=> {這里執(zhí)行播放音樂});creator中開啟音樂的時(shí)候默認(rèn)場景間會(huì)共享這個(gè)音樂瓣距，如果需要跨場景關(guān)閉音樂，可全局保存一個(gè)audioId蹈丸，用來關(guān)閉
解決多次點(diǎn)擊動(dòng)畫顯示問題：例如：動(dòng)物彈起和坐下是兩個(gè)位置變化的動(dòng)畫，彈起顯示可移動(dòng)方向箭頭奋岁，如果多次點(diǎn)擊荸百，可能會(huì)造成動(dòng)畫錯(cuò)亂現(xiàn)象，可以定義好在某個(gè)動(dòng)作在進(jìn)行時(shí)够话，stop其他動(dòng)畫。
對(duì)于棋盤類游戲畜份，一般分別定義一個(gè)
二維數(shù)組存儲(chǔ)棋盤信息澡为，一個(gè)二維數(shù)組保存棋盤UI信息，通過更新二維數(shù)組信息顶别，以更新界面UIiphoneX以及高屏適配問題：在設(shè)計(jì)分辨率使用
FIT HEIGHT模式的前提下，采用整體縮放根節(jié)點(diǎn)的方式適配：（設(shè)計(jì)分辨率在720*1280前提下驯绎，在各種設(shè)備下，高始終是1280屈尼，寬度小于720時(shí)縮放canvas）
this.windowRatio = this.node.width / 720
if (this.node.width < 720) {
this.node.scale = this.windowRatio
}
- h5壓后臺(tái)游戲停止導(dǎo)致時(shí)間停滯問題：
a.在自己回合的時(shí)候壓后臺(tái)拴孤，利用setTimeout遞歸控制時(shí)間，每一秒進(jìn)行時(shí)間設(shè)置的時(shí)候都記錄兩個(gè)時(shí)間戳演熟，對(duì)這兩個(gè)時(shí)間戳進(jìn)行相減，如果為1兄纺，則時(shí)間正確化漆，否則用realTime=timer - timeStamp
...
this._controlTime(turn, timer)
...
_controlTime (turn, timer) {
timer--
const timeStamp1 = Date.parse(new Date()) / 1000
setTimeout(() => {
const timeStamp2 = Date.parse(new Date()) / 1000
const timeStamp = parseInt(timeStamp2 - timeStamp1)
let realTime = 0
if (timeStamp === 1) {
realTime = timer
}
else {
realTime = timer - timeStamp
}
console.log(timeStamp, realTime)
this._controlTime(turn, realTime)
}, 1000)
}
b.在對(duì)方回合壓后臺(tái)，一開始記錄連接ws的時(shí)候用后臺(tái)的時(shí)間戳與本地時(shí)間戳做一個(gè)校準(zhǔn)疙赠，表示服務(wù)器與客戶端相差多少時(shí)間deltaTimer疙教，在每個(gè)回合變換時(shí)間的時(shí)候，用后臺(tái)的時(shí)間戳與本地時(shí)間戳和矯正時(shí)間戳做比較限佩，設(shè)置正確的timer裸弦。
timer = serviceTimer - localTimer - deltaTimer
