Swapping Position Of Two Entities

Help & Support
1

Basically I require the position of two image elements to be switched. Here is my code, with the onPosSwap function being the important one.

Swapper.prototype.onGetSwap = function(getName2) {
    this.two = (getName2);
    this.onPosSwap();
    this.app.fire("get:reset");
};

Swapper.prototype.onPosSwap = function(getName2) {
    let onePos = this.app.root.findByName(this.one).getLocalPosition();
    let twoPos = this.app.root.findByName(this.two).getLocalPosition();
    
    this.app.root.findByName(this.one).setLocalPosition(twoPos);
    this.app.root.findByName(this.two).setLocalPosition(onePos);
};

However, if the game is played, then one entity simply goes behind the other. The way to repro the bug is to click one image and then click another one two switch them. However, it does what I said above, one image going behind the other. How to fix it?

2

I have figured it out, no worries. @moderators should I share my solution or delete the topic?

3

I would recommend posting your solution.

1 Like
4

OK. Basically, I’m not sure why, but when I individually entered the x, y and z values, it seemed to work as intended.

5

I see. Perhaps, I can explain why it didn’t work:

    // So, what actually happens in this code:
    var position1 = image1.getLocalPosition();
    var position2 = image2.getLocalPosition();
    image1.setLocalPosition(position2);
    image2.setLocalPosition(position1);
    
    // Lets break down:
    var position1 = image1.getLocalPosition();  // for example, Vec3(0, 0, 0)
    var position2 = image2.getLocalPosition();  // for example, Vec3(1, 1, 1)
    // Both position1 and position2 do not hold the actual positions of the image1 and image2.
    // Instead, they only hold a reference to the actual positions.
    
    image1.setLocalPosition(position2);
    // Here, because the position2 is not a value, but a reference,
    // the code first needs to evaluate it and find the value that it points to. 
    // After code evaluates, we find that it points to image2 position Vec3(1, 1, 1).
    // So, we set the actual position of image1 to Vec3(1, 1, 1)
    
    image2.setLocalPosition(position1);
    // Here, again, position1 is a reference, so the code must evaluate it to a value.
    // It looks where the reference points to and finds that it points to image1 position,
    // which is now Vec3(1, 1, 1), since we changed it in a previous step. So it sets it to Vec3(1, 1, 1).
    
    // As a result, both elements now have the same position. How can we fix this?
     
    // One option is the way you impelmented it: assign X, Y and Z values individually. In this case,
    // you are setting the coordinates by value, and not by reference.
    
    // Another option would be to copy the positions to new vectors:
    var position1 = image1.getLocalPosition().clone();  // for example, Vec3(0, 0, 0)
    var position2 = image2.getLocalPosition().clone();  // for example, Vec3(1, 1, 1)
    
    // This way, when you change the position in image1, you are not changing the cloned position1.
    // In this case position1 will not be affected and will still contain a copy of the image1 position
    // before it was changed. Then the following will work as expected: 
    image1.setLocalPosition(position2);
    image2.setLocalPosition(position1);
2 Likes
6

Thank you for posting this @LeXXik, saved me the time to post it myself :joy:. Absolutely flawless explanation. @XKRS-GT, regardless of whether you still require it or not, I’d recommend taking a look at this.

2 Likes