0

我正在寻找一种更简单的方法来重复这个过程并完成它，这样我就不必单独完成每个部分。也许我应该将这些部分存储在一个对象中，并告诉它连接到哪个其他部分。

我想我的问题必须是： 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();
};
4

1 回答 1

2

基本上你会有一系列像这样的关节或骨骼

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);
}
于 2012-08-08T08:47:20.987 回答