Proper way to update array

Phaser 3
1

Here’s the scenario -

preload:
var newdecor = { name: ‘’, url: ‘’, locked: 0, x: 0, y: 0, width: 0, height: 0, frames: 0, depth: 0 } /// data gets assigned right after
decorArray.push(newdecor);

	decorArray.forEach(loadSprites);

function loadSprites(item,index,arr) {
scene.load.spritesheet(arr[index].name, arr[index].url, { frameWidth: arr[index].width, frameHeight: arr[index].height, endFrame: arr[index].frames });
}

create:

decorArray.forEach(animateDecor);

function animateDecor(item,index,arr) {
var decorobject;

if (arr[index].frames==1) {
decorobject = scene.add.image(arr[index].x,arr[index].y,arr[index].name);
} else {
decorobject = scene.physics.add.sprite
// more sprite stuff
}
decorobject.setInteractive().on(‘pointerdown’, function(pointer, localx, localy, event) {
this.setDepth(this.depth-20);
});
scene.input.setDraggable(decorobject);
decorobjects.push(decorobject);
}

update:
scene.input.on(‘drag’, function (pointer, gameObject, dragX, dragY) {
gameObject.x = dragX;
gameObject.y = dragY;
gameObject.setDepth (dragY+(gameObject.height/2));
});

Here is the question:
Everything works, BUT, what is the proper way to update the array info? Right now, the image gets updated and set correctly, but I need to have the array data (decorarray[item].x = …) updated as well.

2

Hi,
Did you checked the array after moving a sprite?

3

Yes - array doesn’t update

4

Hi @powerpets ,
In your code you keep a reference to the objects in an array called decorobjects, however that array is not declared.
On the other hand, you may want to check these Phaser classes created to manage groups of objects:
Group
Physics.Arcade.Group
Group examples
Physics examples( some about groups)

Regards.

5

Hi @jjcapellan -
I didn’t include all the code, the array is declared. Everything works well.

The problem is that I get data from server (what fish/decor to load), create my array, load up the images. The images are setDraggable(true);
The drag listener function updates the image x y

scene.input.on('drag', function (pointer, gameObject, dragX, dragY) {

    gameObject.x = dragX;
    gameObject.y = dragY;
    gameObject.setDepth (dragY+(gameObject.height/2));

});

How do I “link” the image to the actual array? (What’s the proper way)
Right now they are separate entities (An array with image name, x, y, depth, etc…) (actual images that have the drag event linked to them)

So far the only way I can think of is getting
gameObject.texture.key and cycling through the decorobjects array to find the matching key and update it that way. Is that the correct way or is there something easier?

6

Hi @powerpets ,
To avoid search in the array by name, you can add a new property to the created objects. Something like:

function loadSprites(item,index,arr) {
 // ........
if (arr[index].frames==1) {
    decorobject = scene.add.image(arr[index].x,arr[index].y,arr[index].name);
} else {
    decorobject = scene.physics.add.sprite;
    // more sprite stuff
}
decorobject.indexInArray = index; // <------

Another posibility, perhaps not easier but more general, would be extend the Image and Arcade.Sprite classes and add setters for x and y properties (custom class). This custom object could receive the reference to the array, and change it from the x and y setters.