Jump to content

Combining HTML DOM elements with Phaser 3 (transparent background)


kollehel
 Share

Recommended Posts

Hi!

I am about to start creating a new RPG card game, which will have a lot of visual effects, for which the particle emitter of the Phaser 3 will be perfect.
But since I need to rotate the cards in perspective, as you can see on the following video, and since the perspective is not (yet) implemented in Phaser 3, I thought to combine Phaser 3's canvas with regular HTML DOM elements. More specific what I thought to do is to create most of the game using HTML DOM elements and JavaScript, and to place the Phaser 3-s div and canvas somewhere inbetween them with transparent background, which will hold all the particle emitters needed. 
Eventually might use 2 Phaser instances and canvases on 2 different layers.

What do you think about this combination? Can it work smoothly on mobile devices? Would it have any drawbacks?

perspective.PNG.efac60eba2e4b89bd622756aa15720df.PNG

https://drive.google.com/file/d/1clkc0OW2OdHUS6iPVZdzS60pklAEPkcf/view?usp=sharing

Thank you!
Lehel Kolumban

Link to comment
Share on other sites

I have tried really hard to find it, but without any success. I would be very grateful if somebody could show me how to do it. I also would very gladly take any advice and any pro/cons regarding the above mentioned combination.

Thanks!

Link to comment
Share on other sites

15 hours ago, samme said:

There's probably a way to apply the perspective transformation in Phaser, if you know the formula. Might be simpler that way.

Hm, there was transformCallback for this in Phaser 2 but I don't see anything like that for 3. Maybe something with Containers.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...