Quick Tip

Resize external website to fit in the iFrame

I recently had to publish a game on my website which was written by another developer and was in public domain. My website was responsive and worked great for PC, tablet and mobile but this game came in a fixed size and was not responsive. It was using canvas which could not be resized inside an iFrame to fit in the available space so I looked for options to fit this game in my website layout and make it work for all devices (PC, tablet, mobile). The idea was to use something which would work similar to how mobile devices use viewport to fit the content in its browser. CSS3 comes with the support for scaling of iFrame content which works perfectly in my scenario so the embeded game/page is scaled down to fit in the iFrame. There is some computation required to scale the embeded page correctly. The article[…]

Quick Tip

Add borders in Puzzle games in Phaser 3

In puzzle games where we need to add borders to our puzzles and mark various zones, we can use Phase Path to draw those lines. For this example we are going to draw something like the image below Let us start by creating our html file and including Phaser 3 js and our game js in it. Now our JS code for would be Try running this locally in your web server and you will see the result as shown in the screenshot.