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.
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 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.
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…
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.
ok, scrollFactor(x,y,ZOOM).
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.
I think using two cameras in one scene would be simpler than using two cameras in two scenes.
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?
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.
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…
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.
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.
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.
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.
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.