Adob​​e Animate CCで複数の矩形を作成するとループが機能しません

Question

Adob​​e Animate CC（旧称：Flash Professional CC）を使用していますが、次のコードスニペットを調整して複数の矩形を作成しようとしています。

var shape = new createjs.Shape(new createjs.Graphics().beginFill("#ff0000").drawRect(5,5,100,100)); 
this.addChild(shape); 

これを調整して、オブジェクトを複製する際にはうまくいくと思ったforループに入れました。次のコードは1つの矩形を作成するだけですか？

for (i = 0; i < 10; i++) { 
    var i = new createjs.Shape(new createjs.Graphics().beginFill("#ff0000").drawRect(5,5,30,30)); 
    this.addChild(i); 

    // Move object so that they don't lie on top of each other 
    this.x += 50; 
} 

Answer 1

コードにはいくつか問題があります。

Containerを拡張しているので、子供を追加することができます。このため、stage.addChild()の代わりにthis.addChild()を使用するのはなぜですか？

1. シェイプの作成時にイテレータ変数iを上書きしています。 squareまたはchildのような別の名前を使用することをおすすめします。

2. xの位置はthisであるため、すべての四角形を同じ位置に追加してから、コンテナを50ピクセルだけ移動します。すべての子供たちはまだお互いの上にいます。これをchild.xに変更する必要があります。

3. あなたがそれを行うならば、あなたは0から50に各形状をインクリメントしているので、それはまだ動作しません - ので、それらはすべて、まだ互いの上になります。これをchild.x = i * 50のように変更します。

ここにコードスニペットがあります。 http://jsfiddle.net/lannymcnie/vphj9qL0/

乾杯：

for (i = 0; i < 10; i++) { 
    var child = new createjs.Shape(new createjs.Graphics().beginFill("#ff0000").drawRect(5,5,30,30)); 
    this.addChild(child); 

    // Move object so that they don't lie on top of each other 
    child.x = i * 50; 
} 

は、ここでは簡単フィドルです。