Jump to content

Scaling the whole game to twice the size


Ahmed Khalifa
 Share

Recommended Posts

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?

 

WeirdBug.gif

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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
    }
}

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

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