Jump to content

Combining HTML DOM elements with Phaser 3 (transparent background)


Recommended Posts


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?



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.


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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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