Egret開發《消滅方塊》後記(三)點選事件那點事
阿新 • • 發佈:2019-01-29
追求好的效能就要對程式碼很苛刻,效率都是一點一點擠出來的,蚊子肉也是肉,但是這一點點的積累就會帶來一個很流暢的遊戲。本篇說的是關於點選事件的優化,對效率的提升可能不是那麼明顯,只是為你提供一種用更高效的方式解決問題的思路,希望能對你有所啟發。
從點選座標計算點選方塊索引的程式碼:
這其實是我想偷懶的結果…這樣就不用切圖再做按鈕再拼UI了,對嗎? 實現程式碼:
怎麼來減少事件偵聽
對於《消滅方塊》這個遊戲,怎麼判斷玩家點選的是那個方塊呢?假如讓你來實現你會怎麼做呢?是給每個方塊新增一個點選事件嗎?如果你想到的是這一種之外的方式,那麼恭喜你,你已經是個注重效率的程式設計師了。 那麼講一下《消滅方塊》的點選判斷吧。方塊不接受任何事件,但是在方塊下面放一個接受點選的互動層,長和寬和方塊總體的寬高保持一致,玩家點選其實是點選的互動層,這樣的話我捕獲互動層點選事件的localX和localY,數學運算一下就可以知道點選的是那個方塊,具體看下圖:從點選座標計算點選方塊索引的程式碼:
這樣我只需要一個點選事件就很好地實現點選方塊的判斷。這種方法的好處:首先執行效率高,做一點數學運算的消耗可以忽略不計了,其次玩家永遠都不會點錯方塊(比如方塊下落的時候被點選也不會被誤判)。突然有種感覺,玩家玩遊戲只是在玩數組裡的資料而已。 如果你還有更好的方式,請留言一起討論。private getTouchIndexByPos(localX, localY):number { return Math.floor(localX / (GameConfig.BLOCK_WIDTH + GameConfig.BLOCK_MARGIN)) + Math.floor(localY / (GameConfig.BLOCK_WIDTH + GameConfig.BLOCK_MARGIN)) * GameSettings.COLUMN; }
點選事件還可以這麼用
做過網頁的朋友一定會記得HTML有個“熱點圖片”,這很好用啊,當然要借鑑過來啊。“熱點圖片”就是一張圖片,點選不同的區域觸發不同的事件而已。《消滅方塊》最後結算介面就是個“熱點圖片”,左右兩邊的“按鈕”是和背景圖在一起的。這其實是我想偷懶的結果…這樣就不用切圖再做按鈕再拼UI了,對嗎? 實現程式碼:
class HotspotBitmap extends egret.Bitmap { private _hotspot:any[]; public constructor() { super(); this._hotspot = []; this.touchEnabled = true; this.addEventListener(egret.TouchEvent.TOUCH_BEGIN, this.onTouch, this); } public addHotspotArea(rect:egret.Rectangle, callBack:Function, thisObj:any, para?:any):void { this._hotspot.push({"rect":rect, "callBack":callBack, "thisObj":thisObj, "para":para}); } private onTouch(e:egret.TouchEvent):void { var x:number = e.localX; var y:number = e.localY; var tempObj:any; for(var i:number = 0;i < this._hotspot.length;i ++) { tempObj = this._hotspot[i]; if(tempObj.rect.contains(x, y)) { if(tempObj.para) tempObj.callBack.call(tempObj.thisObj, tempObj.para); else tempObj.callBack.call(tempObj.thisObj); } } } }