Collecting data

Phaser 3
1

Hi all,
I’m creating a simple drag and drop game.

Is there a way to record the positions of the objects after they have been dragged and dropped?thanks!

2

Super easy, check out the following:

this.input.on('dragend', function (pointer, gameObject) {
    console.log(gameObject.x, gameObject.y);
});
3

thank you so much,
once i have added that ^^ to my code, where can i access the data that has been recorded?

4

Maybe something like:

const history = [
    { id: "gameObject1", x: 100, y: 100 } // A position already recorded
];

this.input.on("dragstart", (pointer, gameObject) => {
    history.push({ id: gameObject.id, x: gameObject.x, y: gameObject.y });
});

gameObject.id in this case is just a custom field you inject onto gameObject so there a unique way of identifying that gameObject’s history in the array or map or however you decided to store position history.

Anyway given my example, what you can now do is keep an index of where in the history you’re viewing and reposition you gameObject with the position in your history data structure. This allows for undos and redos and instinctively where my mind goes due to projects I’ve worked on lol.

This might be more complicated than you need though… So alternatively you can have a variable that stores the last location before the drag began.

const lastPos = { x: 0, y: 0 }

this.input.on("dragstart", (pointer, gameObject) => {
    lastPos.x = gameObject.x;
    lastPos.y = gameObject.y;
});
5

Thank you so much for this.
In my game, I’m dragging and dropping images. At the end of the game, I want to be able to display the ids of the images in the order they were dragged.
So, I was thinking I could record their coordinates and then display accordingly.
However, could you help me out with how to record their id? That way, I can just store their ids and display that.

6

Alright, that should be easy enough. Something like:

const objectMap = {
    obj1: gameObject1
};
const droppedObjectIdList = [ ];

this.input.on("dragend", (pointer, gameObject) => {
    droppedObjectIdList.push(gameObject.id);
});

Then in your end condition, iterate through your droppedObjectIdList and use those recorded ids to pull the gameObject from the map and display them however you need to. This example isn’t prefect and you’ll probably have to tweak it you make it fit into you design.

7

Hi, this seems to work, but in my case, the ids are of images.
In the game, the player will drag and drop images and then I want to display the images on another page once the user clicks a link ‘Done’ (which I’ve added through a html link’.

Is there a way to print/display the droppedObjectList ?
I cannot seem to check whether the list is actually recording the ids.
Then I need to display the ids in order.

Thank you so much for your help