qdrj Posted September 22, 2014 Share Posted September 22, 2014 Hey, I'm trying new scaleMode.RESIZE. When I try to set game height as percentage value like "100%" or "50%" height of canvas DOM element always 0.<div id="gameContainer"><canvas width="1075" height="0" style="display: block; touch-action: none; -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: inherit;"></canvas></div>Width with percentage value works great. // Main.tsvar config:Object = {width: "100%",height: "100%",renderer: Phaser.CANVAS,parent: "gameContainer",transparent: false,antialias: true,enableDebug: Main.development};// Boot.tsvar scale:Phaser.ScaleManager = this.game.scale;scale.scaleMode = Phaser.ScaleManager.RESIZE;scale.pageAlignHorizontally = true;scale.pageAlignVertically = true;if (!this.game.device.desktop) scale.forceOrientation(false, true);scale.enterIncorrectOrientation.add(this.onEnterIncorrectOrientation, this);scale.leaveIncorrectOrientation.add(this.onLeaveIncorrectOrientation, this); Link to comment Share on other sites More sharing options...
qdrj Posted September 22, 2014 Author Share Posted September 22, 2014 If we get rid of canvas parent element (#gameContainer) everything is working as expected. Canvas will be added directly to body.<body style="margin-bottom: 100px;"> <div id="orientation" style="display: none;"></div> <canvas width="536" height="550" style="display: block; touch-action: none; -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: inherit;"></canvas></body> Link to comment Share on other sites More sharing options...
rich Posted September 22, 2014 Share Posted September 22, 2014 RESIZE works by querying the parent container and asking it what height it has. In your case it appears to have none, hence the zero. Have you defined a height for it in the CSS of the page? If not, you need to Link to comment Share on other sites More sharing options...
Recommended Posts