Rectangle width = window.innerWidth is only half the screen

Phaser 3
1

I’m trying to create a simple rectangle object, with the witdh of the entire window (my game object is also window.innerWidth).

but for some reason the rectangle is only half the width.

help?

2

Hello @maoritzio

you can use somethink like this:

    create() {
        let rect = Phaser.Geom.Rectangle.Clone(this.cameras.main);
        let { x, y, width, height } = rect;
        this.add.rectangle(x, y, width, height);                
    }

You should create the rectangle by camera’s width height, not window.innerWidth If i understand your question correctly :slight_smile:

3

thanks @hcakar !
I tried what u suggested, but I’m still getting a rectangle with half the width (and half the height).
Could this be related to the devicePixelRatio?

4

BTW - if I log the rect object I can see it has the correct with and height - but on the screen it still looks half the size

5

Hey @maoritzio

Maybe about that and also can you try

this.add.rectangle(x, y, width, height).setOrigin(0);

Maybe the rectange staying out of bounds of ur canvas. If this also wont work, can you please share ur code if it’s possible so I try to check from there :slight_smile:

6

thank you! that was it :smiley:

7

is there a good way to debug so I wouldnt miss stuff like this anymore? like a simple flag that will add borders to the containers , rectangles, etc.?

8

Hey @maoritzio I’m glad that’s worked!
And yes there is!

@samme created a phaser3-plugin that called phaser-plugin-debug-draw which i also used it. And it’s working pretty nice.

Also as far as i know, beside text in phaser3 everything have an origin with 0.5 (it was anchor on phaser-2) so you can always use GameObject’s middle points as pivot points. :slight_smile:

2 Likes
9

thanks a lot @hcakar, I’ll give it a try.
although I’m starting to think that Phaser is not the right solution for my game. I have a very simple “connect the dots” game I’m developing, and it’s starting to look like it will be easier to accomplish this with non-canvas elements. It seems like Phaser is very good for drawing 2d games, but the UI work is too time-consuming for me

10

Well @maoritzio it’s really not my call, i’ve been using phaser since v-2.3 i guess and i’m really confident that be developt with phaser. I think it’s about, preparing senario and then act on it :slight_smile:

Please let me know if i can do anything to help. :slight_smile: