Shex

Members
  • Content Count

    9
  • Joined

  • Last visited

  1. Shex

    Image is pixelated

    I've managed to fix the issue. The problem is I was misunderstanding the way a high DPI screen work on a mobile device. For people like me who have this problem, here's the solution: In short terms, a high dpi screen (like the Galaxy S6 I was testing) means that there will be more pixels crammed into 1 inch of the screen than another normal screen. This means that if the canvas is set to be the same size as the window.innerWidth/Height then it will be smaller than is should be because it won't be taking the dpi of the screen into account. Canvas can have two width and two height. One is from the attribute (width="9999px") and the other is from the CSS. On my side what I had to do is to set the Canvas width and height attributes to the size of the screen multiplied by the devicePixelRatio. Then I had to set the CSS width and height to the size of the screen. This would set the canvas as a giant canvas and scale it down to the size of the window. The last thing I had to do is to take that scaling difference and scale every sprite in my canvas by this number (in the case of my Galaxy S6 it was 4). Now everythings looks very good on the device. Here are some links with very good intel on this situation that explains a bit better what I'm trying to say: https://www.html5rocks.com/en/tutorials/canvas/hidpi/ https://stackoverflow.com/questions/14488849/higher-dpi-graphics-with-html5-canvas
  2. Shex

    Image is pixelated

    Sorry I've misread your post. Here's the index.html file. There's also the Facebook code that dynamically loads scripts for the loader progression status (and the Sentry.io script for debugging inside the Facebook Player) : <!DOCTYPE html> <html> <head> <script src="https://connect.facebook.net/en_US/fbinstant.6.0.js"></script> </head> <body style="margin:0px;overflow: hidden;"> <div id="uiContainer"></div> <script> var totalFiles = 37; var loadedFileCount = 0; function loadScript(url, callback){ var script = document.createElement("script") script.type = "text/javascript"; if (script.readyState){ script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } }; } else { script.onload = function(){ callback(); }; } script.src = url; document.getElementsByTagName("head")[0].appendChild(script); } function UpdateFBLoad() { FBInstant.setLoadingProgress(loadedFileCount/totalFiles*100); } loadScript('raven.min.js', function(params) { Raven.config('https://14aa40fe299449c8a0e06dd9327107ef@sentry.io/1008732').install(); FBInstant.initializeAsync() .then(function() { loadScript('dist/phaser-arcade-physics.min.js', function(params) { loadedFileCount++; UpdateFBLoad(); loadScript('dist/scripts.min.js', function(params) { loadedFileCount++; UpdateFBLoad(); Raven.context(function () { GameManager.Boot(); }); }); }); }); }); </script> </body> </html>
  3. Shex

    Image is pixelated

    var gameConfig= { type: Phaser.CANVAS, width: this.canvasWidth * window.devicePixelRatio, height: this.canvasHeight * window.devicePixelRatio, physics: { default: 'arcade', arcade: { gravity: { y: 0 } } }, scene: [ HomeScene, InGameScene, ModeScene, SkinsScene, TricksScene, MiddleScene, TutorialScene ] }; return new Phaser.Game(gameConfig); That's my boot function and the this.canvasWidth and height are only window.innerWidth and window.innerHeight When I draw stuff in the canvas that is related to the size of the screen (ex: the current level view) I have to use the plain window.innerWidth/height otherwise the view is way too big and goes out of the screen.
  4. Shex

    Image is pixelated

    Hi I'm trying to run my game on a mobile device with the Phaser 3 framework and sprites are rendered as very pixelated images. I'm running the game through the Facebook web player. I'm using a Samsung Galaxy S6 device which the resolution is 1440x2560 with a device pixel ratio of 4. I have setup the same configuration on my PC through the Chrome mobile debug view (1440/2560 with pixel ratio of 4) and the images look way better. I have attached two screenshot of the PC (good) and mobile (bad) devices to show the difference. The game is rendered as CANVAS and I'm using the window.innerWidth and window.innerHeight to define the sizes. Does anyone have any insight about what's going on?
  5. Shex

    Scale a tilesprite

    I tried the scale methods but it doesn't seem to work. Is it a bug?
  6. Shex

    Scale a tilesprite

    Hi Vincent As I understand, the TileSprite works like a frame. You set a size (width, height) and you set a position on screen, then the framework will render a sprite inside that frame until it fills it (a bit like a background image in CSS). What I'm trying to do is being able to scale the sprite it is using to fill the frame. For exemple, using a 128x128 image and scale it to 256x256 before using it to fill the frame. On the project I am working on, I have a constraint about the base image file so it would save me a lot of trouble to be able to scale it to a certain size.
  7. Shex

    Scale a tilesprite

    Hi In Phaser2, it was possible to scale a TileSprite so the sprite inside was scaled while being tiled. It doesn't seem to be there anymore in Phase3. Is there a way to achieve this? Thanks!
  8. Shex

    Particle system

    There is a special category where you can target "poor devices" with a lightweight game. They ask for no WebGL and no functionnalities that uses hardware acceleration (like usually in most engines).
  9. Shex

    Particle system

    Hi I am building a new game for facebook Instant games and they ask for a lightweight game that doesn't use hardware acceleration. Does the particles().createEmitter() uses some sort of hardware acceleration? Usually its a yes when we talk about particles systems, but on the website it says its lightweight so I was wondering. Thank you!