Jump to content

CocoonJS + Phaser fullscreen problems


Recommended Posts

Hi all,


I have an app I am working on that almost done and looks nice on my phone (Samsung Note 4). However, my scaling technique is not working on all phones, leaving some screens looking like this pic attached (hope you can see the white border around the off-white screen! The pic is HTC One X. Similar issues on tablets).


My code setup is pretty simple:

index.html file:


<!DOCTYPE html>
    <meta charset="utf-8">
    <script src="js/phaser.min.js"></script>
    <script src="js/main.js"></script>
<center><div id="game"></div></center>


Sizing inside of main.js:


var w = window.innerWidth * window.devicePixelRatio;
var h = window.innerHeight * window.devicePixelRatio;
var game = new Phaser.Game(
                                w, h,           // Width, height of game in px
                                Phaser.AUTO,        // Graphic rendering
                                { preload: preload, // Preload function
                                  create: create,   // Creation function
                                  update: update }  // Update function

I'm resizing screen elements according to w and h, so everything is designed to respond to w/h. Is this a problem with my div structure? I tried completely removing the html file... using canvas introduces a whole new host of problems though, with scale still unresolved (in canvas either does not show up or appears too large). Also tried changing the div name, using other techniques like:


w = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) * window.devicePixelRatio;


I can't seem to figure out how to get this to fullscreen.


I am using WebView+ (not canvas), and min android version is 2.3. Help appreciated :)



Link to comment
Share on other sites


  • Recently Browsing   0 members

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