euipment gui in phaser

[P4nch0]

Hello everyone,

 

In my project i want to do equipment. I made a phaser game and i want to do equipment but dont know how.

I want be abble to drag element from equipment,drop it on my phaser game and use it.

For example player have in equipment bed, he drag this bed from equipment and drop it on game, then he is abble to collide with this bed and induce function.

I have two ideas:

One is to keep elements in dive other than game's div and do it drag and drop, but i dont know how to get drop event on phaser game screen. I done equipment which is saving on MYSQL data base and i want to get elements from this div and drop it on screen, then use it in game.

 

Two is to make equipment gui in game screen phaser, and them do drag and drop, but anyone have ideas/examples how to do equipment gui in phaser?

 

 

You can see my project on www.lifetime.cba.pl

login : test password test,

and then click "graj" button.

 

I will be very gratefull for help and examples.

Greets.

[Pooya72]

You can make two diffrent divs and then by clicking on bed, javascript event helps app to understand what user wants to add, then you can add the bed to game screen and let user to drag it in the game screen

[P4nch0]

Thanks for answer. This is the way what can be good. I can do div where player can chose element, and show it on game screen where it will be draggable . But i dont have idea what can i do in phaser screen (canvas) that container like div on html where i can place equipment icon or any other. Anyone have idea? Maybe someone know other solution? Thanks!

[ForgeableSum]

You could keep everything inside HTML elements and use something like jQuery UI for the dragging functionality:

https://jqueryui.com/draggable/

 

So your items GUI is an HTML DIV outside the game canvas. When you drag an item, the item being dragged follows the cursor and is a separate HTML element positioned on top of the canvas. When it is released on the canvas, the item is removed from the DOM and an input handler on Phaser.input.activePointer fires a function to add the real game object to the game. That's one way to do it. Advantage of that is building a GUI is a lot easier to do in HTML/CSS because HTML/CSS was designed just for that. 

 

Another way is to keep everything inside canvas and create the displayObject (sprite, image, whatever) when the mouse is pressed down on the item in the GUI. Then the object is set to follow the x/y of game.input.activePointer in your updates loop. When the mouse is released, a callback places the object in the game world and the function which causes it to follow activePointer is removed. 

[P4nch0]

Thanks for answer

1st solution is fine, but how i can check about element was released on cansvas element?

2nd solution have adnevntages too, but can U tell me some more how i can do container where i can keep images of equipment? its can be image in which i hold other equipment image?