CreateJS - updating children coordinates with parent

Question

I'd like to change the coordinates of 2 children containers within a parent container. Originally, I was looping through the children of the parent container and changing their x,y individually... but then it made more sense to just change the parent container's x,y...

The issue with that is... I need to get the individual altered coordinates of each child... But changing the parent container's coordinates doesn't seem to change the children's coordinates in relation to the stage...

The question is... how can I get the changing x,y of the children when I alter their parent's x,y?

Thanks

So if I'm moving the container of children around as such:

function NPCMove() {
if (pointA) {
    if (ContainerOfAnimals.x < 400) {
        ContainerOfAnimals.x +=2;
    }
    else {
        pointA = false;
        pointB = true;
    }
}
else if (pointB) {
    if (ContainerOfAnimals.x > 100) {
        ContainerOfAnimals.x-=2;
    }
    else {
        pointB = false;
        pointA = true;                  
    }
}
}

I can check the distance of the player to each child in the Parent Container as such using localToGlobal? (NPC_Array contains Parent Containers)

for (var i = 0; i < NPC_Array.length; i++) {
//get children containers of each big Container
for (var j = 0; j < NPC_Array[i].children.length; j++) {
    //need child.x's global location now...
    var pt =  NPC_Array[i].localToGlobal(NPC_Array[i].children[j].x, NPC_Array[i].children[j].y);

    var distX = Math.abs(players_Array[0].x - pt.x);
    var distY = Math.abs(players_Array[0].y - pt.y);

    if (distX < 50 && distY < 50) {
        //Player is near child...

score 3 · Accepted Answer · answered Aug 16 '13 at 17:57

3

You would do a localToGlobal:

var stage = new createjs.Stage("test");

var p = new createjs.Container();
p.x = 200;
p.y = 200;

var c1 = new createjs.Shape();
c1.graphics.beginFill("#FF0000");
c1.graphics.drawRect(0, 0, 100, 100);
c1.graphics.endFill();

var c2 = new createjs.Shape();
c2.graphics.beginFill("#00FF00");
c2.graphics.drawRect(0, 0, 100, 100);
c2.graphics.endFill();
c2.x = 100;

p.addChild(c1);
p.addChild(c2);

stage.addChild(p);

stage.update();

var pt = p.localToGlobal(c2.x, c2.y);
alert("Stage x of c2: " + pt.x);

See it in action

answered Aug 16 '13 at 17:57

Andrew

1,030
13
24

Thanks Andrew. Please see above edit... am I using it correctly? – user3871 Aug 16 '13 at 18:14
Andrew, the problem with this is though... Now what if I alter the child's x directly... and not the Parent? I tested doing `ContainerOfAnimals.children[0].x-=2;` to move the child... and now the distance checker will not work... In that case, when I do the distance check... do I have to check both `localToLocal` and `localToGlobal` coordinates? – user3871 Aug 16 '13 at 18:31
Is the object player_Arr[0] a immediate child of the stage? You want to make sure you are comparing the items in the same coordinate space. If the players are indeed direct children of the stage, you would first do a localToGlobal to get the animals x/y in the global (stage) coordinate space and then compare them. I've updated the fiddle to be more applicable to your project. [Check it out](http://jsfiddle.net/dR7Ur/1/). It is worth noting however this doesn't factor in the actual width of the shapes. You might want to look into a good collision algorithm unless this is purely a learning exp. – Andrew Aug 16 '13 at 18:45
Yes, I've taken the width's into account; and it is a learning experience. Anyway, the player_Arr[0] is a direct child container of the stage. The children that need to be compared to the player_Arr[0] container have been added to the stage like this: `stage <-- worldContainer <-- ContainerOfAnimals <-- child1 and child2` – user3871 Aug 16 '13 at 18:52
Here's more of [live action example](http://jsfiddle.net/dR7Ur/2/) that might help. – Andrew Aug 16 '13 at 19:04
I completely got it now. I'm able to reach a couple levels deep by doing something like this, right? `var pt = NPC_Array[i].localToGlobal(NPC_Array[i].children[j].x, NPC_Array[i].children[j].y);` and still use `localToGlobal` to compare? – user3871 Aug 16 '13 at 19:06

CreateJS - updating children coordinates with parent

1 Answers1