[SOLVED] Irregularity while shifting entities

Help & Support
1

Hey everyone,

I have two 2D arrays in my project, one containing the initial order of image elements and the other containing their respective initial positions. While swapping the entities, only the first array should change, because the image elements must go to preset positions. The arrays are as follows.

this.grid = [
        ["Image1", "Image2", "Image3", "Image4"],
        ["Image5", "Image6", "Image7", "Image8"],
        ["Image9", "Image10", "Image11", "Image12"],
        ["Image13", "Image14", "Image15", "Image16"]
    ];

this.posGrid = [
        [new pc.Vec3(-399.573, 271.648, -87.801), new pc.Vec3(-227.361, 271.648, -87.801), new pc.Vec3(-56.617, 271.648, -87.801), new pc.Vec3(109.018, 271.648, -87.801)],
        [new pc.Vec3(-399.573, 105.57, -87.801), new pc.Vec3(-227.361, 105.57, -87.801), new pc.Vec3(-56.617, 105.57, -87.801), new pc.Vec3(109.018, 105.57, -87.801)],
        [new pc.Vec3(-399.573, -67.952, -87.801), new pc.Vec3(-227.361, -67.952, -87.801), new pc.Vec3(-56.617, -67.952, -87.801), new pc.Vec3(109.018, -67.952, -87.801)],
        [new pc.Vec3(-399.573, -235.868, -87.801), new pc.Vec3(-227.361, -235.868, -87.801), new pc.Vec3(-56.617, -235.868, -87.801), new pc.Vec3(109.018, -235.868, -87.801)]
 ];

I have an array containing currently the first and third images and their boundaries. It only contains them for Image1 and Image3 as I was testing with just these two.
let arr2 = [this.grid[0][0], this.s1xmax, this.s1xmin, this.s1ymax, this.s1ymin, this.grid[0][2], this.s3xmax, this.s3xmin, this.s3ymax, this.s3ymin];

I then check upon the mouseup event whether the entity being clicked is within the boundaries of it’s nearby images. If it is, then I swap them in the grid, and then attempt to swap their positions.

this.entity.element.on('mouseup', function (event) {
        let len = (this.getNearOnes(this.entity.name).length);
        rt = 0;
        
        while (rt < len) {
            if (this.getNearOnes(this.entity.name)[rt] !== null && this.getNearOnes(this.entity.name)[rt] !== undefined) {
                for (let i=0; i<arr2.length; i++) {
                    if (arr2[i] === this.getNearOnes(this.entity.name)[rt]) {
                        //alert(i);
                        let xmax = arr2[i+1];
                        let xmin = arr2[i+2];
                        let ymax = arr2[i+3];
                        let ymin = arr2[i+4];
                        let myPos = this.entity.getLocalPosition();
                        if ((myPos.x <= xmax && myPos.x >= xmin) && (myPos.y <= ymax && myPos.y >= ymin)) {
                            //alert("check");
                            this.yourIndex = this.getIndex(arr2[i]);
                            this.myIndex = this.getIndex(this.entity.name);
                            this.x = this.yourIndex[0];
                            this.y = this.yourIndex[1];
                            this.grid[this.myIndex[0]][this.myIndex[1]] = this.grid[this.yourIndex[0]][this.yourIndex[1]];
                            this.grid[this.x][this.y] = this.entity.name;
                            alert(this.posGrid[this.x][this.y]);
                            this.app.root.findByName(arr2[i]).setLocalPosition(this.posGrid[this.myIndex[0]][this.myIndex[1]]);
                            this.entity.setLocalPosition(this.posGrid[this.x][this.y]);
                        }
                    }
                }
            }
            rt++;
        }
        
}, this);

My error is this. Although Image2 and Image1 switch perfectly, when I switch Image2 and Image3, Image2 returns back to its original position. I can guess why this happens - since their array indexes change, the position also remains the same. However, I am baffled as to why the same doesn’t happen for Image1. I haven’t hardcoded much, so it’s very odd.

Could someone please help me out here?

1 Like
2

Is there any way to solve this? I’d really like to know the solution.

3

Hi @XKRS-GT,

This logic is quite complex, not easy to debug without taking it apart. I see that you do a lot of hard coding of positions. I’d say in general that’s not good practice, since it’s very easy to get it wrong and very hard to debug.

What is your goal with this? Maybe there is an easier solution to your problem.

1 Like
4

Hey @Leonidas,

I am on the team for this as well. Essentially, the positions do remain constant, hence they are hardcoded. The purpose of the code is basically to swap two entities if one is dragged and released on top of another. Is there an easier solution for that?

5

Well I think you could do it easily then by having each entity contain a child entity that holds the sprite/image.

So when you want to swap their graphics you can do so like this:

var spriteA = childEntityA.element.sprite;
var spriteB = childEntityB.element.sprite;

childEntityA.element.sprite = spriteB;
childEntityB.element.sprite = spriteA;

So their graphics will be swapped, but their positions (parent entity) will remain the same.

6

Thanks a lot. Will definitely try this. One thing @Leonidas, should the parent entities return to their positions, before or after swapping images?

1 Like
7

I think that depends on your visual style and animations. For the graphics swapping it doesn’t matter where the parent entities are.

1 Like
8

@Leonidas, thanks a lot for your insights, I’m going to start coding this right now. One last thing. Is there a way to check whether three images in a row have the same texture?

9

Yes sure, just compare the asset IDs like this:

var spriteA = childEntityA.element.sprite;
var spriteB = childEntityB.element.sprite;
var spriteC = childEntityC.element.sprite;

if( spriteA.id === spriteB.id = spriteC.id){
   // same sprite
}
1 Like
10

Thanks a ton @Leonidas.

1 Like