beancoder Posted April 13, 2016 Share Posted April 13, 2016 <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>M N B</title> <script src="js/phaser.js"></script> </head> <body> <script type="text/javascript"> window.onload = function() { var width = window.screen.width; var availwidth = window.screen.availWidth; var height = window.screen.height; var availheight = window.screen.availHeight; var textStyle = { font: "20px Arial", fill: "#ffffff"}; var game = new Phaser.Game(availwidth , availheight, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload () { //game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.load.image('red','assets/red.png'); game.load.image('green','assets/green.png'); } function create () { game.stage.backgroundColor = "000000"; var graphics = game.add.graphics(0,0); graphics.lineStyle(1,0xffffff,1); var box_width = (availwidth/10)-5; var box_height = (availheight/10)-5; last_start = box_width*10; last_end = box_height*10; //draw vertical lines for(var i=0;i<=last_start;i+=box_width){ graphics.moveTo(i,0); graphics.lineTo(i,last_end); } //draw horizontal lines for(var j=0;j<=last_end;j+=box_height){ graphics.moveTo(0,j); graphics.lineTo(last_start,j); } } function update(){ } }; </script> </body> </html> When I run the above code, and emulate it in Google Nexus 7 using Intel XDK, it does not show the last horizontal line (image below) On the other hand, when I emulate it in Apple Ipad (image below), it shows the complete grid perfectly (even though I need to scroll down to see the last line) Ques 1: Why is the above difference coming? Ques 2: Why is there a scrollbar coming when I am scaling the content properly? Thanks in advance. Link to comment Share on other sites More sharing options...
drhayes Posted April 13, 2016 Share Posted April 13, 2016 A couple of things: you don't need to put this code in an onload; Phaser handles that for you. Also, if your script is at the end of the document any element in the DOM that you depend on is definitely there by that point. You're depending on the browser to tell you the size of your game world. There's a difference between the size of the window into your world and the size of your world. What kind of game are you making? Is that what you want? If you're okay with that, take 8 pixels off the height and you'll probably be okay. If you don't scroll off the bottom you won't have a vertical scrollbar. If you don't have a vertical scrollbar, then you'll have enough horizontal space and you won't have a horizontal scrollbar. You'll still manage to cover the client area and the surfaces of those devices are black; no one's gonna notice 8 pixels on the bottom. Link to comment Share on other sites More sharing options...
Recommended Posts