Jump to content

Set canvas Orgin to center


Recommended Posts


First of all let me say i am really new with Phaser 3, I also never worked with Phaser 2 so things are all very new for me.

I was wondering since you can set the orgin of sprites and images and they are 0,5 per default.
Can you also set the canvas drawing to 0,5 so that i can draw on x = 0 and then i will draw it on the middle in the canvas?

I looked through all the settings but could not find anything.
Or maybe i can make a container that works like that?

Link to comment
Share on other sites

Starting in 3.11 you'll be able to use a Phaser-provided this.cameras.main.centerOn(0, 0). However, if you are using a currently released version (or are for some reason bound to something <3.11) you can use the following:

function centerCameraOn(cam, x, y) {
    // figure out what the "center" of the camera is based
    // on its width/height
    var cx = cam.width / 2;
    var cy = cam.height / 2;

    // now update the camera scrollX/Y based on offset from
    // it's computed center
    cam.scrollX = -cx + x;
    cam.scrollY = -cy + y;

And then in your create method you'd call centerCameraOn(this.cameras.main, 0, 0).

The working principle here is that the camera's relative position is controlled by changing how it is scrolled from its original location (scrollX / scrollY).

Link to comment
Share on other sites


  • Recently Browsing   0 members

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