Scaling the whole game to twice the size

[Ahmed Khalifa]

Hello everyone,

I wanted to scale my game up in Phaser. So I used world.scale.set(2, 2). Yup everything is scaled up but Not everything is working as expected when I move the camera.

The tilemap is file it moves with the camera correctly while any other object added to the world normal sprite or a group with a fixedToCamera = true;

Here is a gif that shows the problem I move the camera with 1 tile each time, the red banner is the HUD.

Anyone know why this is happening?

Here is the code for constructing the objects

var dungeonWidth:number = 30;
var dungeonHeight:number = 25;

this.pcgTiles = new PCGTilemap(this.game, "graphics", 16, 16, dungeonWidth, dungeonHeight);
this.pcgTiles.generateCellularMap(0.55, [[1, 1, 1], [1, 0, 1], [1, 1, 1]], 3, 6, 5);
        
this.game.world.setBounds(0, 0, this.game.width * (1 - 1/ Global.scale) + Global.tileSize * dungeonWidth, 
    this.game.height * (1 - 1/ Global.scale) + Global.tileSize * dungeonHeight + Global.hudSize * Global.tileSize);

var test:Phaser.Sprite = this.game.add.sprite(100, 100, "graphics");
test.animations.add("default", [0]);
test.play("default")

this.hudObject = new HUDObject(this.game);
this.hudObject.fixedToCamera = true;
this.add.existing(this.hudObject);

Here is the code for moving the camera:

if(this.game.input.keyboard.isDown(Phaser.Keyboard.UP)){
    this.camera.y -= Global.tileSize;
    this.game.input.keyboard.reset();
}
if(this.game.input.keyboard.isDown(Phaser.Keyboard.DOWN)){
    this.camera.y += Global.tileSize;
    this.game.input.keyboard.reset();
}
if(this.game.input.keyboard.isDown(Phaser.Keyboard.LEFT)){
    this.camera.x -= Global.tileSize;
    this.game.input.keyboard.reset();
}
if(this.game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)){
    this.camera.x += Global.tileSize;
    this.game.input.keyboard.reset();
}

Anyone can help with this?

 

[Ahmed Khalifa]

I solved the problem but not from Phaser

I changed the canvas outside in the index.html

#content{
    zoom: 2;
}
canvas{
    image-rendering: optimizeSpeed;             /* Older versions of FF          */
    image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
    image-rendering: -webkit-optimize-contrast; /* Safari                        */
    image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
    image-rendering: pixelated;                 /* Awesome future-browsers       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE                            */
}

It does the same thing I want without any problems but there is still a bug in Phaser or something I don't understand.

[carystanley]

Yes, I found the CSS approach to be the best solution. Even better you can use media queries to resize it to 3x3 to 4x4 based on how big the browser window is. I had not used the zoom parameter before though. I explicitly set the width instead. I don't think "zoom" is well supported yet: http://caniuse.com/#feat=css-zoom

 

canvas {
    margin: 0 auto;
    image-rendering: pixelated
}
@media screen and (min-width: 260px) and (min-height: 230px) {
    canvas {
        width: 256px !important;
        height: 224px !important
    }
}
@media screen and (min-width: 520px) and (min-height: 450px) {
    canvas {
        width: 512px !important;
        height: 448px !important
    }
}
@media screen and (min-width: 770px) and (min-height: 680px) {
    canvas {
        width: 768px !important;
        height: 672px !important
    }
}