網絡遊戲開發-客戶端4 關於Egret的本地座標和舞臺座標

時間 2019-12-13

原文原文鏈接

由於最近公司事情比較多，因此沒怎麼更新博客。html

不過我們這個遊戲仍是在繼續往下寫。編輯器

今天晚上打算寫鬥地主的出牌動畫，遇到一個問題，就是關於本地座標和舞臺座標的計算問題動畫

在Egret官網的解釋是：x 和 y 屬性始終是指顯示對象相對於其父顯示對象座標軸的 (0,0) 座標的位置。所以，對於包含在 DisplayObjectContainer 實例內的 Shape 實例（如圓），若是將 Shape 對象的 x 和 y 屬性設置爲 0，會將圓放在 DisplayObjectContainer 的左上角，但該位置不必定是舞臺的左上角。若要肯定對象相對於全局舞臺座標的位置，可使用任何顯示對象的 globalToLocal() 方法將座標從全局（相對於舞臺）座標轉換爲本地（相對於顯示對象容器）ui

在我正在寫的遊戲中的應用場景是this

我須要把手上的牌，選中，而後出牌移動到出牌的位置去。spa

在Wing編輯器裏面能夠看到手牌是放在紅色的框中，手牌的座標是相對紅框的相對座標。可是出牌的位置是在最外面容器中的一個點上。code

若是直接移動手牌到出牌點的座標，運行程序，你會發現你的牌和你想象的移動的位置徹底不同。。。xml

這裏就須要把出牌點的座標換算爲手牌父節點的本地座標，而後進行移動htm

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="QcSkin" width="720" height="1280" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing" >
	<w:Config id="163a761854a" ></w:Config>
	<e:Group id="Mygroup" width="482" height="574" x="136" y="378" anchorOffsetX="0" anchorOffsetY="0">
		<e:Button id="btnOk0" label="手上的牌" x="290" y="56" anchorOffsetX="0" width="146"/>
	</e:Group>
	<e:Button label="出牌的位置" x="360" y="640"/>
</e:Skin>

    btnOk0: eui.Button;
    Mygroup:eui.Group;
    protected childrenCreated(): void {
        super.childrenCreated();

        this.btnOk0.addEventListener(egret.TouchEvent.TOUCH_TAP, () => {
            var point =  this.Mygroup.globalToLocal(360,640)
            console.log(point);
            
            egret.Tween.get(this.btnOk0).to({ x: point.x, y: point.y }, 2000, egret.Ease.backInOut);

        }, this)
    }