# Drop objects between different scenes?

**URL:** <https://phaser.discourse.group/t/drop-objects-between-different-scenes/6969>\
**Category:** Phaser 3\
**Created:** [July 19, 2020, 9:41am UTC](https://phaser.discourse.group/t/drop-objects-between-different-scenes/6969 "2020-07-19T09:41:52Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Maddogmaycry](https://avatars.discourse-cdn.com/v4/letter/m/b9bd4f/32.png) [@Maddogmaycry](https://phaser.discourse.group/u/Maddogmaycry)\
**Post date:** [July 19, 2020, 9:41am UTC](https://phaser.discourse.group/t/drop-objects-between-different-scenes/6969/1 "2020-07-19T09:41:52Z")

</div>

How would you handle dragging one object onto another if they are in different scenes?  
It is required to drop one object on another so that the event of ondrop can be called.

I need two scenes, because the phaser does not ignore the zooming of objects along with their scroll factor.

If I used two cameras, then I would have to seriously rework all the game logic, which I would like to avoid, since it would take a lot of time.

---

<div class="post-metadata">

**Author:** ![Jackolantern](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jackolantern/32/450_2.png) [@Jackolantern](https://phaser.discourse.group/u/Jackolantern)\
**Post date:** [July 19, 2020, 2:55pm UTC](https://phaser.discourse.group/t/drop-objects-between-different-scenes/6969/2 "2020-07-19T14:55:13Z")

</div>

I would think you may need to fake this because each game object lives in its scene. You can communicate across scenes ([Communicate between scenes](https://blog.ourcade.co/posts/2020/phaser3-how-to-communicate-between-scenes/) so you drag a game object across the scene and you destroy it when its middle touches the edge of the scene. Then you communicate the height level of where it was destroyed and what the game object was to the other scene, which immediately creates it and adds it right where the old game object was and continues the dragging to its final location. I am not sure if you will be able to use the actual drag-and-drop functionality as I don’t know if you can start and stop the process that way. You may have to code it all from scratch, sync the game object with the mouse/finger yourself and then test for a drop zone yourself.

There may be a better way to do this. Maybe there is some functionality I am not aware of that would allow you to use the actual drag-n-drop feature between scenes. Or maybe there is a better strategy all together. But this would be how I would approach this problem.

---

<div class="post-metadata">

**Author:** ![Maddogmaycry](https://avatars.discourse-cdn.com/v4/letter/m/b9bd4f/32.png) [@Maddogmaycry](https://phaser.discourse.group/u/Maddogmaycry)\
**Post date:** [July 19, 2020, 5:41pm UTC](https://phaser.discourse.group/t/drop-objects-between-different-scenes/6969/3 "2020-07-19T17:41:07Z")

</div>

Hey, thx for the Reply.

I don’t understand, why scrollFactor mean x and y factor, and does’nt mean z axis (see zooming). It’s so logicly - scrollFactor(x,y,z)… ok, nwm.

Why it’s so many traps with phaser…

---

<div class="post-metadata">

**Author:** ![Jackolantern](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jackolantern/32/450_2.png) [@Jackolantern](https://phaser.discourse.group/u/Jackolantern)\
**Post date:** [July 19, 2020, 5:45pm UTC](https://phaser.discourse.group/t/drop-objects-between-different-scenes/6969/4 "2020-07-19T17:45:52Z")

</div>

I think it works that way because in 2D games, “scrolling” typically means in the X and Y dimensions while movement through the Z axis is considered “zooming”. They typically have to be handled in entirely different ways in most traditional 2D games. In 3D games, even though it isn’t typically called “scrolling”, you do handle movement through all 3 axes in the same way.

---

<div class="post-metadata">

**Author:** ![Maddogmaycry](https://avatars.discourse-cdn.com/v4/letter/m/b9bd4f/32.png) [@Maddogmaycry](https://phaser.discourse.group/u/Maddogmaycry)\
**Post date:** [July 19, 2020, 6:00pm UTC](https://phaser.discourse.group/t/drop-objects-between-different-scenes/6969/5 "2020-07-19T18:00:54Z")

</div>

ok, scrollFactor(x,y,ZOOM).

---

<div class="post-metadata">

**Author:** ![Maddogmaycry](https://avatars.discourse-cdn.com/v4/letter/m/b9bd4f/32.png) [@Maddogmaycry](https://phaser.discourse.group/u/Maddogmaycry)\
**Post date:** [July 23, 2020, 8:44am UTC](https://phaser.discourse.group/t/drop-objects-between-different-scenes/6969/6 "2020-07-23T08:44:13Z")

</div>

Ok, i will try to realize this functionality, and what i think this moment.

I have a Pen, i have an apple… stop 🙂

I have SceneMain.input.activePointer.worldX  
SceneMain.input.activePointer.worldY  
cam.\_scrollX  
cam.\_scrollY  
cam.\_zoom  
object.width  
object.height  
object.x  
object.y

i think, when i drop object i can calculate a point of droping between scenes relying on all the above variables.  
When it;s works fine, i will report about this.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [July 23, 2020, 2:20pm UTC](https://phaser.discourse.group/t/drop-objects-between-different-scenes/6969/7 "2020-07-23T14:20:01Z")

</div>

I think using two cameras in one scene would be simpler than using two cameras in two scenes.

---

<div class="post-metadata">

**Author:** ![Maddogmaycry](https://avatars.discourse-cdn.com/v4/letter/m/b9bd4f/32.png) [@Maddogmaycry](https://phaser.discourse.group/u/Maddogmaycry)\
**Post date:** [July 23, 2020, 4:49pm UTC](https://phaser.discourse.group/t/drop-objects-between-different-scenes/6969/8 "2020-07-23T16:49:52Z")

</div>

The problematic stay in field of concept my game. When i will using two container, then i can’t controll object ordering!  
I move player around a scene, and they z-ordering is Grid Y coordinate!  
Container does not allow adjusting the order parameter, only globally moveback and moveontop.

Each object on the scene has its own group, of course I could make a function that, through iteration, would add ignore for a specific camera, but wouldn’t this result in a performance problem?

It turns out that every object on the scene that is outside the inventory will be ignored by camera 2, and everything that is inside the inventory will be ignored by camera 1.

Maybe emitter can help solve my problem?

---

<div class="post-metadata">

**Author:** ![Maddogmaycry](https://avatars.discourse-cdn.com/v4/letter/m/b9bd4f/32.png) [@Maddogmaycry](https://phaser.discourse.group/u/Maddogmaycry)\
**Post date:** [July 27, 2020, 12:28pm UTC](https://phaser.discourse.group/t/drop-objects-between-different-scenes/6969/9 "2020-07-27T12:28:21Z")

</div>

And so, after several days of trying in various ways to make the phaser work with an inventory from which you can drop objects to other objects that are on the stage, I came to the understanding that the phaser has fundamental problems in this regard.

Initially, my inventory was in a different scene, and when I tried to transfer objects from the inventory to the second scene, they simply did not lead to anything (another scene refuses to see the drop events, etc.).

Then I followed the advice to create two cameras, and separate objects by ignoring. But what is interesting, in this case, the drop events also do not work, that is, if your object is in the inventory and the scene camera ignores it, then in this case the objects that are on the scene simply do not see the objects that are in the inventory ( are ignored by the main camera).

At the same time, if I remove the ignoring of the object by the scene camera and the interface camera, everything will work, but this is simply not an option.

In general, all this is upsetting.

---

<div class="post-metadata">

**Author:** ![BlunT76](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/blunt76/32/1454_2.png) [@BlunT76](https://phaser.discourse.group/u/BlunT76)\
**Post date:** [July 27, 2020, 2:12pm UTC](https://phaser.discourse.group/t/drop-objects-between-different-scenes/6969/10 "2020-07-27T14:12:31Z")

</div>

Hi,  
If the sceneB refuses to detect the drop from sceneA, perhaps you can fake it with a tranparent image(or a zone, etc) that catch the drop, and then emit from sceneA to sceneB. It’s just an idea…

---

<div class="post-metadata">

**Author:** ![Maddogmaycry](https://avatars.discourse-cdn.com/v4/letter/m/b9bd4f/32.png) [@Maddogmaycry](https://phaser.discourse.group/u/Maddogmaycry)\
**Post date:** [July 29, 2020, 5:08pm UTC](https://phaser.discourse.group/t/drop-objects-between-different-scenes/6969/12 "2020-07-29T17:08:29Z")

</div>

Okay, okay, okay …  
I found a crutch method that can probably help solve this issue quite simply.

```
scene1.input.on ('dragend', function (pointer, obj) {
  scene2.input.once("gameobjectover",function(pointer,obj){
      console.log(obj.name);
   })
 scene2.time.addEvent({
delay: 0.1,
callback: function(){
	scene2.input.off("gameobjectover");
   }
});
})

```

You have to use timer then, to remove this once event in \<1ms, when no object over pointer jet, or this event will be triggered later, when pointer will be over an game object.

Stupid but workable method.

---

<div class="post-metadata">

**Author:** ![Maddogmaycry](https://avatars.discourse-cdn.com/v4/letter/m/b9bd4f/32.png) [@Maddogmaycry](https://phaser.discourse.group/u/Maddogmaycry)\
**Post date:** [August 4, 2020, 8:43am UTC](https://phaser.discourse.group/t/drop-objects-between-different-scenes/6969/13 "2020-08-04T08:43:31Z")

</div>

Some time after I found what I thought was a working method, I noticed that it does not always work.

As a result, I spent some more time, and came to the most correct solution in my opinion.

The fact is that the engine processes the active pointer based on the object under it. If you have any object that is tied to any scene, then at the moment this object is under the pointer, it will return the coordinates of the scene to which this object belongs.

(scene\_game.input.activePointer.worldX) - will not return the cursor position of the “scene\_game” located under the object from “scene\_inventory”, even if you pass a link to this “scene\_game”. As long as the cursor is over an object of a “scene\_inventory”, it always returns the active pointer to the coordinates of this active scene!

Let’s say you move an object to the “scene\_game” from the “scene\_inventory”.  
The object you are moving the cursor is in scene\_inventory, and you need to move it to “scene\_game”.

First, I define the position of the inventory, and if the object goes beyond its scope, then I transfer the certain variable to the scene / inventory mode.

Further, after we release the object and the “dragend” function is triggered.

1 - then “drag\_object” must be destroyed (after which “scene\_game” will appear under the pointer).  
2 - Next, I create a timer that is triggered immediately after the object is deleted, which creates an event for “scene\_game”.  
3 - This timer will work approximately 10ms after the destruction of the object. You can iniziate a user trigger ON\_OBJECT\_DESTROY, but i suspect - it’s does’nt work.

Now in the coordinates of the cursor there will be “scene\_game” with a real “worldX” coordinate.

Next, we need a simple rectangle collision math function.

```
   drag_obj.destroy();
    game_scene.time.addEvent({
    	delay: 10,
    	callback: function(){
    		var a={
    			x:game_scene.input.activePointer.worldX,
    			y:game_scene.input.activePointer.worldY,
                //it's cane be drag_obj.width and height (don't forgeth about origin like below)
    			width:5,
    			height:5						
            }
    		var b = {
    			//game_scene obj origin_x 0.5
    			x:game_scene_ob.x-game_scene_obj.displayWidth/2,
    			//game_scene obj origin_y 1
    			y:game_scene_obj.y-game_scene_obj.displayHeight,
    			//we have to consider a scale of object
                width:game_scene_obj.displayWidth,
    			height:game_scene_obj.displayHeight
    		}
    		if (a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y) {
    			console.log("Collision");
    		}
    	}
    });

```

But before the function starts detecting collisions, we need to place the objects in a group that will show which objects require collision handling.

I put the game objects in the drag group.  
Then you have to search for the objects from group “drag”, and using collision function to detect collision of dropped “inventory\_objects” with a “game\_scene” objects.

Now, every time an object falls on the scene, I iterate over the objects in the drop group, and check for collisions.

This method allows you to catch the intersection of even those objects that are behind other objects. There can be an unlimited number of them. Next, you need a function that will determine what to do if this or that object has intersected.

---

<div class="post-metadata">

**Author:** ![Maddogmaycry](https://avatars.discourse-cdn.com/v4/letter/m/b9bd4f/32.png) [@Maddogmaycry](https://phaser.discourse.group/u/Maddogmaycry)\
**Post date:** [September 27, 2020, 8:25pm UTC](https://phaser.discourse.group/t/drop-objects-between-different-scenes/6969/14 "2020-09-27T20:25:55Z")

</div>

Ok, after more time i found out, that this method not works in Firefox! So, i try to found much better way this moment 🙂

UPDATE  
Ok. All we need to do, it;s calculating offset between the current pointer that is in focus of the current scene (inventory) and the scene where you drop the object (scene below inventory).  
1 - game.input.activePointer.x/y - current cursor/touch position.  
2 - Camera.worldView.x/y - camera offset.  
3 - Camera.zoom - if zooming in use.

For X coordinate it’s looks like this.  
`console.log((game.input.activePointer.x/cam._zoom)+(cam.worldView.x/cam._zoom)*cam._zoom);`

What its does. You become an X coordinate of pointer of SceneA when your pointer focused on SceneB!

**`When camera will be rotated, it's will stop working and i have no idea how to calculate this too!`**

Next step it’s a detection overlaping (see post above).  
A litle bit later i’ll post a code and live preview.

UPDATE.  
What are the thoughts. Let’s say we don’t use camera rotation and everything suits us. I think that after we get the coordinates of the second scene on which we drop the object, we will create an object there.  
… add.sprite (x, y, name);  
Now, in order not to use the handicraft function that determines the overlaping of two rectangles, maybe it would be possible to call some function built into the phaser to determine that the object overlap some another object (object’s shape)!?

I know this function exists for physical objects. And it can be called at any time.

Now we need to find out if there is a similar function without using a physics engine.

---

<div class="post-metadata">

**Author:** ![Maddogmaycry](https://avatars.discourse-cdn.com/v4/letter/m/b9bd4f/32.png) [@Maddogmaycry](https://phaser.discourse.group/u/Maddogmaycry)\
**Post date:** [October 3, 2020, 6:06pm UTC](https://phaser.discourse.group/t/drop-objects-between-different-scenes/6969/15 "2020-10-03T18:06:41Z")

</div>

Ok, i think answer on my question inside a getWorldPoint(x, y [, output]) field. I think I’m almost there.

But it would also be nice to try to calculate this point based on zoom, offset, as well as camera rotation.

(game.input.activePointer.x/cam.\_zoom)+(cam.worldView.x/cam.\_zoom)\*cam.\_zoom  
and now, we have to calculate CAM.ROTATION too. I really have no experiance to calculate COSINUS and another tregonometry things.

---

<div class="post-metadata">

**Author:** ![Maddogmaycry](https://avatars.discourse-cdn.com/v4/letter/m/b9bd4f/32.png) [@Maddogmaycry](https://phaser.discourse.group/u/Maddogmaycry)\
**Post date:** [October 4, 2020, 10:43am UTC](https://phaser.discourse.group/t/drop-objects-between-different-scenes/6969/16 "2020-10-04T10:43:32Z")

</div>

I found a solution 🙂 and i do not why noone know this answer you can found in camera class.  
So, you have two diffitent Scenes.

SceneGame  
SceneUI.

Now, if you wanna every time have worldX and worldY relatively to SceneGame even if you did focused on SceneUI (do draging some object) then you have to use getWorldPoint function.

SceneMain.cameras.main.getWorldPoint(pointer.x,pointer.y);

Thats it, - this is a ground for drops between scenes  
Next step is do whatever you need to do (recreate objects in this coordinate, or something else).

UPDATE  
It’s works for multi cameras, when you use one scene and two cameras.
