How to avoid screen flicker when embedding responsive Phaser game in Bootstrap site

Phaser games can be responsive and will fit in the available space which makes it easy to embed in variety of devices with different sizes. When Phaser games are embeded in a Bootstrap site which is responsive, there can be some flickering on the web page when game is initially loaded. When Phaser games are loaded, it loads in the actual size it was created in and afterwards CANVAS is resized to fit in the available space. The example below is a bootstrap template in which Phaser game is embeded in half of the screen and remaining half screen has some other content. Click the link to load the page to see how the game is being resized to fit in the available space. To make the game load in a nice manner without visible resizing, we need to intially hide the div in which game is loaded. In Phaser boot method we can[…]

Mobile Apps

Responsive Bootstrap and JQuery Game Template for Mobile

For mobile web app templates, Jquery Mobile has been a popular choice but it comes with its own set of issues when we have multiple pages in the game since it makes ajax calls to load the pages and if there are specific things which are required to be handled on each page then it becomes even more complex to handle those scenarios. The alternate is to have a simple Bootstrap and JQuery based template with multiple pages which is simple and works just like a website. The problem here is that the pages are loaded again and again whenever we navigate from one page to another. This is not an ideal scenario for mobile web apps since all external libraries are required to be initialized on all pages which is not required and unnecessary work for processor. For example, if you compiled your web app using PhoneGap and are using a plugin to play audio.[…]