PRSoluções Posted March 29, 2016 Share Posted March 29, 2016 Hi, I have a small problem on understand how i can work with retina in Phaser. On my mac with retina, the images are so blured. A 48x48 image represent my multiplayer game latency. If i put an image with 96x96, the image is bigger and the game size is the same, only this image is bigger. What is the correct way to do it? thanks. Link to comment Share on other sites More sharing options...
VitaZheltyakov Posted March 29, 2016 Share Posted March 29, 2016 Create a large enough image and use the following code: this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.refresh(); canvas_width = window.innerWidth * window.devicePixelRatio; canvas_height = window.innerHeight * window.devicePixelRatio; aspect_ratio = canvas_width / canvas_height; if (aspect_ratio > 1) scale_ratio = canvas_height / canvas_height_max; else scale_ratio = canvas_width / canvas_width_max; this.ball = game.add.sprite((game.world.centerX), game.world.centerY, 'ball'); this.ball.scale.set(scale_ratio); Link to comment Share on other sites More sharing options...
PRSoluções Posted March 29, 2016 Author Share Posted March 29, 2016 Hi, Thanks for the tips. The game now is correct scaled, but i dont need do: this.ball.scale.set(scale_ratio); The sprite is scale automatic. The only problem that still is when i resize the browser or show/hide the chrome inspector, the game is streched or not resized. Look on image when i open the game with inspector: Look on image when i resize the browser or chrome inspector (show black parts and streched): Could you help me? Link to comment Share on other sites More sharing options...
VitaZheltyakov Posted March 29, 2016 Share Posted March 29, 2016 this.ball.scale.set(scale_ratio); It is necessary to image the same size on all screens in any position. Reload game on resize Link to comment Share on other sites More sharing options...
PRSoluções Posted March 29, 2016 Author Share Posted March 29, 2016 Aff...as i say the sprite when added, assume the correct scale. Look: If i put your code, look: Dont make any sense. Scale all sprites if the engine already be scaled correct. The problem now is reload without reset the game. I dont know how to do it. Thanks. Link to comment Share on other sites More sharing options...
VitaZheltyakov Posted March 30, 2016 Share Posted March 30, 2016 Use this code for all elements (sprites, images, ..) .scale.set(scale_ratio); Add to index.html this code: <body onResize="window.location.href = window.location.href"> Link to comment Share on other sites More sharing options...
mattstyles Posted March 30, 2016 Share Posted March 30, 2016 Reload on window resize? That is totally crazy. `window.devicePixelRatio` will give you the dpi, you just need to upscale the raw size of the canvas, then use css to resize it back down to the size you want, then add scale to each sprite equal to the dpi. There is an extremely messy example here. The example uses only pixi but I'm pretty sure Phaser exposes the scale mode so it should be fairly trivial to do the same thing in Phaser. Add a resize handler that recalculates the size of the canvas element and let your next render tick handle the re-render with the new canvas size. Quick and easy to hack into any project using canvas. If you're feeling super lazy (which is often a good thing in a programmer) then canvas-fit does all the heavy lifting for you, just pass that canvas instance to Phaser to render into and I think you will be good to go. Link to comment Share on other sites More sharing options...
VitaZheltyakov Posted March 30, 2016 Share Posted March 30, 2016 5 hours ago, mattstyles said: Reload on window resize? That is totally crazy. `window.devicePixelRatio` will give you the dpi, you just need to upscale the raw size of the canvas, then use css to resize it back down to the size you want, then add scale to each sprite equal to the dpi. There is an extremely messy example here. The example uses only pixi but I'm pretty sure Phaser exposes the scale mode so it should be fairly trivial to do the same thing in Phaser. Add a resize handler that recalculates the size of the canvas element and let your next render tick handle the re-render with the new canvas size. Quick and easy to hack into any project using canvas. If you're feeling super lazy (which is often a good thing in a programmer) then canvas-fit does all the heavy lifting for you, just pass that canvas instance to Phaser to render into and I think you will be good to go. You proposes to change the scale of all images. This is easily done only if all images have the same scale. Otherwise, it is a problem. Link to comment Share on other sites More sharing options...
mattstyles Posted March 30, 2016 Share Posted March 30, 2016 2 hours ago, VitaZheltyakov said: You proposes to change the scale of all images. This is easily done only if all images have the same scale. Otherwise, it is a problem. Not at all, dpi is a constant. You set the scale of each sprite/image/whatever only once, when they instantiate. If they have their own scaling then you simply multiply that by the dpi (rather than 1 * dpi). When the window resizes it is only the canvas that resizes itself. This resizes either reveals or hides more or less of the game world, or just scales the exterior (or master) container, often called a stage, if you want to show a consistent amount of the game world—of these two options the first is often by far the more attractive (although that is dependent upon the type of game). Things get even better if you throttle the resize handler so it fires consistently and less frequently cross-browser. Usually you only want to re-render when resizing has finished, but there is no event for that so you have to ignore most of the events, throttling the resize event to every 100-200ms is more than quick enough for a screen refresh after a resize. WombatTurkey 1 Link to comment Share on other sites More sharing options...
VitaZheltyakov Posted March 30, 2016 Share Posted March 30, 2016 Quote If they have their own scaling then you simply multiply that by the dpi (rather than 1 * dpi). This is the problem. For example, in the game, which I'm doing now, nearly a hundred images. Many of them have own scale. From this scale depends on many variables (distance and speed). You propose to write a great function and it is constantly updated. Link to comment Share on other sites More sharing options...
mattstyles Posted March 31, 2016 Share Posted March 31, 2016 10 hours ago, VitaZheltyakov said: This is the problem. For example, in the game, which I'm doing now, nearly a hundred images. Many of them have own scale. From this scale depends on many variables (distance and speed). You propose to write a great function and it is constantly updated. It certainly is not. I'll repeat, DPI does not change. DPI does not change. When you create your images, you set their own individual scale, at that point simply multiply by the dpi. That's it. That's all you have to do. If you have a factory function to create those sprites/images, which you almost certainly will have, you do this once and it is executed by the code once for each object. This adds one multiplication to whatever you are doing currently. It is not repeated on resize as dpi does not change, it is a constant. Upscaling does create artifacts, for pixel art the nearest neighbour scaling solves this, but for everything else upscaling is an issue. But this is where serving separate images based on dpi comes in. This is separate to your concern of individual scale. Usually no scaling for an image is the best solution, the next best is a constant scale, only if you really have requirement to scale individually should you. Link to comment Share on other sites More sharing options...
PRSoluções Posted April 8, 2016 Author Share Posted April 8, 2016 Im my example, i think the problem only happen because i use tileset for the player and tileset for the map. I think is impossible use another image in case of tileset, because all tiles are 32x32. Any suggestions? Link to comment Share on other sites More sharing options...
Recommended Posts