blameMike Posted May 23, 2015 Share Posted May 23, 2015 I'm trying to make my game take up the full width and height of mobile safari. On my iPhone 5s I still see black bars. I'm using this code in my boot state based on the full screen mobile template: create: function () { this.game.time.advancedTiming = true; this.game.input.maxPointers = 1; this.game.physics.startSystem(Phaser.Physics.ARCADE); if (this.game.device.desktop) { this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.setMinMax(480, 260, 1024, 768); this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; } else { this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.setMinMax(480, 260, 1024, 768); this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.scale.forceOrientation(true, false); this.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this); this.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this); }Is there something else I have to do to get rid of the borders and have the game assume the full browser size? Cheers. Link to comment Share on other sites More sharing options...
Tom Atom Posted May 23, 2015 Share Posted May 23, 2015 Hi, with SHOW_ALL you wll always have black bars if your screen aspect is different from game aspect. It fits game into view, so it is seen whole while preserving aspect. Scaling on different devices is not as easy if you want to: 1) prevent black bars, 2) avoid stretching as much as possible. I wrote article on this topic on my blog: http://sbcgamesdev.blogspot.com/2015/04/phaser-tutorial-manage-different-screen.html It uses USER_SCALE for calculation of scale factors for x and y. Basicly, my background assets have some extra space that is sometimes visible and sometimes not. Depends on aspect of target device. This helps me to avoid stretching to some point. If aspect of taget device is beyond what I can handle with it then comes stretching. I can handle aspects from iPhone to iPad without stretching. Link to comment Share on other sites More sharing options...
blameMike Posted May 23, 2015 Author Share Posted May 23, 2015 Great response, and article! Thanks for taking the time to respond. Link to comment Share on other sites More sharing options...
threedollarbill Posted October 6, 2016 Share Posted October 6, 2016 On 5/24/2015 at 1:04 AM, Tom Atom said: Hi, with SHOW_ALL you wll always have black bars if your screen aspect is different from game aspect. It fits game into view, so it is seen whole while preserving aspect. Hi, I know this thread is old, but is it possible to at least change the color of those black bars? I tried this.stage.backgroundColor but it does not do the trick.. Link to comment Share on other sites More sharing options...
Tom Atom Posted October 7, 2016 Share Posted October 7, 2016 Yes, you can either set it in css for your page: <body style="background-color:#E6E6FA"> Or you can do it from code. Below is more complicated example how to set repeating background image and make some nice shadow around game canvas: // add styles var bodyStyle = document.getElementById("body").style; bodyStyle.backgroundImage = "url('assets/pattern.png')"; bodyStyle.backgroundRepeat = "repeat"; this.game.canvas.style.boxShadow = "0 0 40px black"; If you want just to set color, set it with backgroundColor property. Link to comment Share on other sites More sharing options...
Recommended Posts