Jump to content

blurring tileset image in mobile devices problem


Recommended Posts


Hello, as you can see i have blur problem in tileset image in mobile devices.  i try in pc but this problem never happens. And it isn't happening in sprites but only tileset image. When i open my game in mobile, Tilesets are blurring. I cannot find a solution. i try following codes:

             game.renderer.renderSession.roundPixels = true;
             game.stage.smoothed = false;
            Phaser.Canvas.setSmoothingEnabled(game.canvas, false);
            PIXI.scaleModes.DEFAULT = PIXI.scaleModes.NEAREST;

i'm using phaser 2.8.2

Link to comment
Share on other sites

i removed the tilesprite and background in this example. Like i mention canvas size is 430x192

All of my game images are small like 416x352,  320x320, 256x128 

and some small atlas images. 

but there is a code that adjust game size to device size. Can this code cause that problem?

  var w = window.innerWidth ;//* pixelRatio,
    h = window.innerHeight ;//* pixelRatio;
    var lw, lh; //landscape width/height in pixels
    if ( h > w ) {
        lw = h;
        lh = w;
    } else {
        lw = w;
        lh = h;
    var aspectRatioDevice = lw/lh;
    var aspectRatioSafeZone = SAFE_ZONE_WIDTH / SAFE_ZONE_HEIGHT;
    var extraWidth = 0, extraHeight = 0;
    if (aspectRatioSafeZone < aspectRatioDevice) {
        // have to add game pixels horizontally in order to fill the device screen
        extraWidth = aspectRatioDevice * SAFE_ZONE_HEIGHT - SAFE_ZONE_WIDTH;
    } else {
        // have to add game pixels vertically
        extraHeight = SAFE_ZONE_WIDTH / aspectRatioDevice - SAFE_ZONE_HEIGHT;
    game = new Phaser.Game(SAFE_ZONE_WIDTH+extraWidth, SAFE_ZONE_HEIGHT+extraHeight+1, Phaser.CANVAS, '', null, false, false);

Link to comment
Share on other sites

  • 2 months later...

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...