Tilde Posted September 7, 2015 Share Posted September 7, 2015 This has been making playtesting a real P in the A, so I decided to thread it. Phaser 2.4.3 solves a lot of problems for me, but at the same time, when I render my game using the method described in this tutorial: http://www.photonstorm.com/phaser/pixel-perfect-scaling-a-phaser-game I get this squashed output. (game container is in the center, notice the FPS counter in the lower-left) The game is natively 320x320, scaled at 2x for 640x640. By tweaking the variables, I can un-squash the render, but it's still cropped to the squashed size. What's goin on? Link to comment Share on other sites More sharing options...
Tilde Posted September 8, 2015 Author Share Posted September 8, 2015 Can't let this die yet. Somebody else must be having this problem. Link to comment Share on other sites More sharing options...
MichaelD Posted September 8, 2015 Share Posted September 8, 2015 Are you doing something to scale or not-scale the viewport/canvas? Can you post the part where you do the scalling? Link to comment Share on other sites More sharing options...
Tilde Posted September 8, 2015 Author Share Posted September 8, 2015 Pretty much all my code relevant to that is taken verbatim from the example:(game.js)var game = new Phaser.Game(320, 320, Phaser.CANVAS, '', {preload: preload});var pixel = {scale: 2, canvas: null, context: null, width: 0, height: 0};function preload() { game.stage.disableVisibilityChange = false; game.canvas.style['display'] = 'none'; game.camera.roundPx = false; game.state.add('Boot', Slapspark.Boot); game.state.add('Preloader', Slapspark.Preloader); game.state.add('Title', Slapspark.Title); game.state.add('GameOver', Slapspark.GameOver); game.state.add('Menu', Slapspark.Menu); game.state.add('Level', Slapspark.Level); game.state.start('Boot');}(boot.js)Slapspark.Boot.prototype = { preload: function() { // Hide the un-scaled game canvas // Create our scaled canvas. It will be the size of the game * whatever scale value you've set pixel.canvas = Phaser.Canvas.create(game.width * pixel.scale, game.height * pixel.scale); // Store a reference to the Canvas Context pixel.context = pixel.canvas.getContext('2d'); // Add the scaled canvas to the DOM Phaser.Canvas.addToDOM(pixel.canvas, container); // Disable smoothing on the scaled canvas Phaser.Canvas.setSmoothingEnabled(pixel.context, false); // Cache the width/height to avoid looking it up every render pixel.width = pixel.canvas.width; pixel.height = pixel.canvas.height; game.time.advancedTiming = true; game.stage.backgroundColor = '#000000'; game.stage.smoothed = false; game.state.start('Preloader'); }, create: function() { }, update: function() { }};(all gamestates)render: function() { pixel.context.drawImage(game.canvas, 0, 0, game.width, game.height, 0, 0, pixel.width, pixel.height);}, Link to comment Share on other sites More sharing options...
drhayes Posted September 8, 2015 Share Posted September 8, 2015 Later versions of Phaser are "better" at scaling pixel art if you let it know that's what you want:Phaser.Canvas.setImageRenderingCrisp(this.game.canvas);Phaser.Canvas.setSmoothingEnabled(this.game.context, false);this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;Add this to your boot state and remove all that stuff Rich wrote about maintaining two canvases. You should be good. I was doing the same thing but I *think* that got fixed in 2.4.1 so I got to remove it from my game. Tilde 1 Link to comment Share on other sites More sharing options...
Tilde Posted September 10, 2015 Author Share Posted September 10, 2015 Sorry man, I'm confused. When you say "all that stuff Rich wrote", what are you referring to? Because it seems like all this code relates to the two-canvas structure.EDIT: I looked up the ScaleManager stuff and it seems to be way better at managing everything. I'll see if I can get rid of the two-canvas structure entirely and use ScaleManager to achieve what I want, but it's very important that my game still reads as 320x320, NOT the scaled-up size. Link to comment Share on other sites More sharing options...
drhayes Posted September 10, 2015 Share Posted September 10, 2015 Nope, I'm sorry! Your code looked a lot like code Rich posted for the GameBoy jam ages ago. I captured it in a gist here: https://gist.github.com/drhayes/ff53b78cceea1cc1b211 And hopefully it works for you. My game is 320x240 and scales up great using the CANVAS renderer to any sized browser window without losing crispness. And it's definitely still 320x240, as in my 16x16 tile worlds show on one screen if the level is 20x15 (yay math). Tilde 1 Link to comment Share on other sites More sharing options...
Recommended Posts