How to move sprite from box A inside box B?

Hello everybody!
I have a small problem with advanced (I think) positioning.
I added image what shows what I mean (because one image is more than thousand words ;)) as asset to this post.

So, what I have:
I have background-parent layer that has two sprites: box A and box B. Box A has sprite called “item”. Box B ha sprite called “front wall of Box B”. Front wall of Box B has the highest Z value (is on the front of everything what is in box B).

What I want to have:
I want to move with animation sprite “item” from box A to box B so that “front wall of Box B” will cover “item”.

What I think can help:

  1. RemoveChild “item” from “box A”.
  2. AddChild “item” to “background” and set position on the same that “item” had in “box A” (so visually nothing will change, but under the hood “item” will have new parent).
  3. Move “item” from previous position to desired position in “box B”.
  4. RemoveChild “item” from “background”.
  5. AddChild “item” to “box B” with Z order lower than “front wall of box B” (after changing parent, position of “item” will change).
  6. Set position of “item” to proper position inside “box B”.

But I have problem with changing position after change parent. You know, this things with convertToNodeSpace, convertToWorldSpace, etc.
This seems would help but little bit complicated. What do you thing about it?
I would like to mention that “item” at start has to be in “box A”.


trouble.png (45.6 KB)

Ok. It seems I did it :slight_smile:
Here is my code:

function rearrangeItem(item) {
    item.getParent().removeChild(item);
    boxB.addChild(item,1);
    item.setPosition(cc.p(boxB.convertToNodeSpace(boxB.getPosition()).x+boxB.getContentSize().width/2, boxB.convertToNodeSpace(boxB.getPosition()).y+boxB.getContentSize().height));
    boxB.reorderChild(frontBoxBWall, 2);
}

function throwToBoxB(item) {
    var targetX = boxB.convertToWorldSpace(cc.p(0,0)).x+boxB.getContentSize().width/2;
    var targetY = boxB.convertToWorldSpace(cc.p(0,0)).y+boxB.getContentSize().height;

    item.runAction(
        cc.Sequence.create(
            cc.Spawn.create(
                cc.MoveTo.create(0.5, item.getParent().convertToNodeSpace(cc.p(targetX, targetY)))
                ,cc.ScaleTo.create(0.5, 0.5, 0.5)
            ),
            cc.CallFunc.create(rearrangeItem, this)
        )
    );
}

What I did:

  1. Move “item” to “boxB” position. (without changing parent to background etc.)
  2. RemoveChild “item” from parent “boxA”
  3. AddChild “item” to “boxB”
  4. Set position of “item” to proper position inside “boxB”
  5. Correct Z values of sprites in “boxB”

What do U think about it?