Segmentで多関節 / CreateJS


CreateJS使って多関節やってみます。
サンプルのSegment参考にしてます。

多関節は描画が簡単なので円にします。
Shape だと親子階層出来ないので、Container 使います。

1
2
3
4
var container = new createjs.Container();
var shape = new createjs.Shape();
shape.graphics.f(color).dc(0, 0,radius);
container.addChild(shape);

CreateJS のサンプルでは下記のように Container クラスを継承して使ってました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Segment(){
    this.r = radius;
    this.color = 'yellow';
    this.init();
}
Segment.prototype = new createjs.Container();
Segment.prototype.r;
Segment.prototype.color;
Segment.prototype.Container_initialize = Segment.prototype.initialize;
Segment.prototype.init = function(){
    this.Container_initialize();
    this.addChild(this.getSprite());
};
Segment.prototype.getSprite = function(){
    var s = new createjs.Shape();
    s.graphics.f(this.color).dc(0, 0, this.r);
    return s;
};

あとはいくつか親子階層にしてみます。

1
2
3
4
5
6
7
8
9
10
var seg = [];
seg[0] = new Segment;
var parent = seg[0];

for (var i = 1; i < SEGMENT_NUM; i++){
    seg.push(new Segment);
    seg[i].setTransform(seg[i].r * 2.5, 0);
    parent.addChild(seg[i]);
    parent = seg[i];
}

あとは CreateJS の Ticker でアニメーションをつければ完成。

1
2
3
4
5
6
function tick(){
    for (var i = 1; i < SEGMENT_NUM; i++){
        // 動きをつける
    }
    stage.update();
}

Error: Suspended

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です