laya的skeleton骨骼動畫事件響應問題


    創建skeleton節點並綁定MOUSE_DOWN事件后,卻始終無法響應。經測試發現如下:

    skeleton節點在load結束后,其bounds反映了總體的寬高,但是width與height卻為0,而sprite(skeleton繼承自sprite)卻是以width與height來作為事件響應區域的。而單純的sprite結點是沒有這個問題的。因此將bounds.width與bounds.height重新賦值給skeleton節點,但是又出現了新的問題。

    調用nodeSkeleton.graphics.drawRect(0, 0, bounds.width, bounds.height, "#ff00ee"),繪制顯示區域可以看到,Rect的左上角位置為(bounds.width/2, bounds.height),即在人物腳下中心線的位置。打開dragonbones編輯器,載入對應的動畫,發現人物的root節點正是在腳下中心線的位置。也就是說,skeleton節點的動畫區域是按照動畫編輯器來設定的,與其Laya中的響應區域有很大的偏移。

    為了解決這個問題,創建了一個父節點proxy來響應事件:

var node = new Laya.Skeleton();
var proxy = new Laya.Sprite();
proxy.addChild(node);                
node.load(SkeletonConfigs["NuTao"], Laya.Handler.create(this, function() {
    var bound = node.getBounds(); // 加載完畢之后才能拿到有效的bounds
    var W = bound.width, H = bound.height;
    node.width = W;   // 若不設置的話, node.width與node.height均為0
    node.height = H;
    node.pos(W/2, H); // 骨骼節點偏移(W/2,H),使動畫區域的左上角與proxy節點的位置(左上角)重合

    proxy.width = W;
    proxy.height = H;
    proxy.graphics.drawRect(0, 0, proxy.width, proxy.height, "#ff00ffee");
    proxy.on(Laya.Event.MOUSE_DOWN, this, function() {
        console.log("MouseDown Event");
    });
}));


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM