簡單的骨骼Javascript系統

Question

我正在尋找一種更簡單的方法來重複這個過程，並使它，所以我不必單獨通過每個部分。也許我應該將這些部分存儲在一個對象中，並告訴它連接到哪個部分。

我想我的問題必須是： What would an easy way to make a skeletal system be?

var drawPlayer = function() { 
    ctx.strokeStyle = '#FFF'; 
    ctx.lineWidth = 3; 
    ctx.beginPath(); 
    //body 
    var temp = p2c(player.bodyLength/2, player.body); 
    ctx.moveTo(player.pos.x + temp[0], player.pos.y - temp[1]); 
    ctx.lineTo(player.pos.x - temp[0], player.pos.y + temp[1]); 
    var humorusAnchor = [player.pos.x + temp[0], player.pos.y - temp[1]]; 
    var thighAnchor = [player.pos.x - temp[0], player.pos.y + temp[1]]; 
    //left humorus 
    var temp = p2c(player.arms.humorusLength, player.arms.leftHumorus); 
    ctx.moveTo(humorusAnchor[0], humorusAnchor[1]); 
    ctx.lineTo(humorusAnchor[0] - temp[0], humorusAnchor[1] + temp[1]); 
    var leftForearmAnchor = [humorusAnchor[0] - temp[0], humorusAnchor[1] + temp[1]]; 
    //right humorus 
    var temp = p2c(player.arms.humorusLength, player.arms.rightHumorus); 
    ctx.moveTo(humorusAnchor[0], humorusAnchor[1]); 
    ctx.lineTo(humorusAnchor[0] - temp[0], humorusAnchor[1] + temp[1]); 
    var rightForearmAnchor = [humorusAnchor[0] - temp[0], humorusAnchor[1] + temp[1]]; 
    //left forearm 
    var temp = p2c(player.arms.forearmLength, player.arms.leftForearm); 
    ctx.moveTo(leftForearmAnchor[0], leftForearmAnchor[1]); 
    ctx.lineTo(leftForearmAnchor[0] - temp[0], leftForearmAnchor[1] + temp[1]); 
    //right forearm 
    var temp = p2c(player.arms.forearmLength, player.arms.rightForearm); 
    ctx.moveTo(rightForearmAnchor[0], rightForearmAnchor[1]); 
    ctx.lineTo(rightForearmAnchor[0] - temp[0], rightForearmAnchor[1] + temp[1]); 
    //left thigh 
    var temp = p2c(player.legs.thighLength, player.legs.leftThigh); 
    ctx.moveTo(thighAnchor[0], thighAnchor[1]); 
    ctx.lineTo(thighAnchor[0] - temp[0], thighAnchor[1] + temp[1]); 
    var leftCalveAnchor = [thighAnchor[0] - temp[0], thighAnchor[1] + temp[1]]; 
    //right thigh 
    var temp = p2c(player.legs.thighLength, player.legs.rightThigh); 
    ctx.moveTo(thighAnchor[0], thighAnchor[1]); 
    ctx.lineTo(thighAnchor[0] - temp[0], thighAnchor[1] + temp[1]); 
    var rightCalveAnchor = [thighAnchor[0] - temp[0], thighAnchor[1] + temp[1]]; 
    //left calve 
    var temp = p2c(player.legs.calveLength, player.legs.leftCalve); 
    ctx.moveTo(leftCalveAnchor[0], leftCalveAnchor[1]); 
    ctx.lineTo(leftCalveAnchor[0] - temp[0], leftCalveAnchor[1] + temp[1]); 
    //right calve 
    var temp = p2c(player.legs.calveLength, player.legs.rightCalve); 
    ctx.moveTo(rightCalveAnchor[0], rightCalveAnchor[1]); 
    ctx.lineTo(rightCalveAnchor[0] - temp[0], rightCalveAnchor[1] + temp[1]); 
    ctx.stroke(); 
}; 

Answer 1

基本上，你會有關節或骨骼像這樣

class Bone { 
    Bone parent; 
    Vector tail; // Translation from the parent node's tail 
    public: 
     Bone(Vector tail, Bone parent); 
}; 

那麼你所定義的身體像這樣

數組

Bone bones[] = /* Array sizing */ 
Bone root = Bone(Vector(0,0), null); // I think this is called the rhomboid, Not sure, area between the shoulders 
Bone leftShoulder = Bone(Vector(-10,0), root); 
Bone rightShoulder= Bone(Vector(10,0), root); 
Bone leftElbow = Bone(Vector(-10, 0), leftShoulder); 
Bone rightElbow = Bone(Vector(10,0), rightShoulder); 
// and so on... 
bones = [root, leftShoulder, rightShoulder, ...]; 

然後畫出來，你會做到這一點：

foreach(bone in bones){ 
    Vector offset = bone.tail; 
    Bone p = bone.parent; 
    while(p.parent != null){ p = p.parent;offset+=bone.tail; } 
    Vector parentOffset = offset - bone.tail; 
    drawBone(offset, parentOffset); 
}