Search the Community

Hi, I want my game to be always in 16:9 with letterboxing when neccessary. I'm using this code in the very first state: this.game.scale.aspectRatio = 1.77; this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.align(true, true); When I now start the game after I resized the browser to a quadratic format the aspect ratio is different, close to 1. As if the aspect ratio I set is just being ignored and the canvas is scaled to the complete window. I'm not in the browser full screen mode. When I start in a format close to 16:9 everything works as expected, thus I guess only at startup something goes wrong. Am I missing something?

Hello all, I'm working on a personal project and im facing a small problem with canvas resizing, Here the initial state: You can see that the scene is well centered, the problem happens when i close a panel (the right or the left panels) then the canvas will be scaled and the scene will be like here: Please note that im creating the canvas like the following: <canvas id="renderCanvas" style="width:100%;height:100%;" touch-action="none"></canvas> Any help will be appreciated Thxs in advance guys Regards DarkLight

Hi all, I'm new to these forums, but really want to share what I've made with everyone. Not for my own sake but to help all those other game developers out there that have trouble deciding what resolutions/aspect ratios to target. I built this utility to help me visualize how common aspect ratios display on any screen size when stretched to fill the screen as much as possible. All you have to do is deploy the URL on any device to see how a game of size 4:3, 3:2, or 16:9 will display. You can even just use your browser and stretch the window to the target size so you can do all your planning from the PC. however I recommend loading it up on the device as there are software bars and URL bars to consider! In any case, please take a look - I feel we all have something to gain from having a visual aid when planning our target resolutions. Just click the banner below! You can also see an augmented version of this scaling logic in action in our upcoming title, Dragonfly Zero. Click the banner below and stretch the window to whatever size you want. The game will scale and implement extra filler as is appropriate for the aspect ratio - regardless of how tall or wide you make it! --------------------------------- UPDATE (5/7/14): Made changes requested by turnA, designated v2.0 This version includes both portrait and landscape in the same utility for ease of testing New screenshots as well Notes: There may be minor discrepancies of 1-2px either visually, or represented in the information panel. Each box includes it’s border as a representation of it’s aspect ratio. This means the game screen box will overlap the borders when matching aspect ratios. The utility will automatically switch between portrait and landscape orientations (if height exceeds width in landscape, or width exceeds height in portrait). The orientation label also works as a button. Portrait mode is somewhat restricted on landscape displays (text size reduction), works best on flipped monitors and portrait displays. SCREENSHOTS Landscape - iPhone 5S, safari (iOS) Portrait - iPhone 5S, Safari (iOS) Landscape - PC, Google Chrome (windows)

I'd like to scale in SHOW_ALL mode and once the game fits the width of the screen then use RESIZE mode to eliminate letter-boxing. I've been reading "Guide to the Phaser Scale Manager" but I'm still not entirely sure about how to implement it. Maybe something involving USER_SCALE or resize callbacks? Has anyone already implemented something similar?

When game goes fullscren it alwas stretch the game to width: 100% and height 100% and I don't think that this always sutes the needs: So I tried some changes to: fullScreenChange /** * Called automatically when the browser enters of leaves full screen mode. * @method Phaser.StageScaleMode#fullScreenChange * @param {Event} event - The fullscreenchange event * @protected */ fullScreenChange: function (event) { if (this.isFullScreen) { //this.game.stage.canvas.style['width'] = '100%'; //this.game.stage.canvas.style['height'] = '100%'; //this.game.stage.canvas.style['width'] = screen.width + 'px'; //this.game.stage.canvas.style['height'] = screen.height + 'px'; if(this.game.stage.scaleMode == Phaser.StageScaleMode.EXACT_FIT) { //what was default till now this.game.stage.canvas.style['width'] = '100%'; this.game.stage.canvas.style['height'] = '100%'; this.setMaximum(); this.game.input.scale.setTo(this.game.width / this.width, this.game.height / this.height); this.aspectRatio = this.width / this.height; this.scaleFactor.x = this.game.width / this.width; this.scaleFactor.y = this.game.height / this.height; } else if (this.game.stage.scaleMode == Phaser.StageScaleMode.NO_SCALE) { //no scale black strips around the display //if the screen size is bigger than the game size //do nothing } else if (this.game.stage.scaleMode == Phaser.StageScaleMode.SHOW_ALL) { //preserve aspect ratio, horizontal black lines or vertical black lines this.game.stage.scale.setShowAll(); this.game.stage.scale.refresh(); } } else { this.game.stage.canvas.style['width'] = this.game.width + 'px'; this.game.stage.canvas.style['height'] = this.game.height + 'px'; this.width = this._width; this.height = this._height; this.game.input.scale.setTo(this.game.width / this.width, this.game.height / this.height); this.aspectRatio = this.width / this.height; this.scaleFactor.x = this.game.width / this.width; this.scaleFactor.y = this.game.height / this.height; } }With this code there are checks and when you go fullscreen you can still preserve you game aspect ratio: for example a 800 x 600 game and maximize visible area. Also you can choose NO_SCALE and if the game size is lower than the screen resolution for example 400 x 600 game on almost any display will be centered in the full screen. So what is your vision about how the full screen should work... and is there other way of going full screen a preserving aspect ratio ?