Why is my game scaling itself 133%?

[Jordan Roher]

Hello Excalibur devs! Really enjoying using your engine (have you considered a Patreon?), but I'm running into a weird issue around the scaling of my game.

I'm using a 800x600 canvas element, specifying those numbers in my constructor, setting the displayMode to Fixed, turning off antialiasing, but for some reason my game is rendering larger than 1:1.

Here in Tiled you can see the blocks are 64px, but the game renders them at 96px.

I am using a custom camera class that inherits from LockedCamera, but I'm not making any zoom calls (just overriding getFocus and getPos).

What could I be doing wrong?

Tiled, as expected

In-game, 33% larger

[Kamran Ayub]

Thanks Jordan, do you think you could provide a sample standalone either on GitHub or CodePen? We'll take a look soon and get back to you.

--
You received this message because you are subscribed to the Google Groups "excaliburjs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to excaliburjs...@googlegroups.com.
To post to this group, send email to excal...@googlegroups.com.
Visit this group at https://groups.google.com/group/excaliburjs.
To view this discussion on the web visit https://groups.google.com/d/msgid/excaliburjs/97097e72-304e-4703-b139-b53a8c5d7f1e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Jordan Roher]

That would be great, thank you!

My repo is here: https://github.com/jordanroher/saras-flare

I'm using React to handle interactivity. You can see the game constructor at play.tsx and the game files in the game folder. I only have one CSS declaration so I don't think it's a styling issue.

[Kamran Ayub]

Hi Jordan,

I took a cursory look through the source and nothing jumped out at me.

Before I have time to actually try to run and debug the code, could you try a few things and see what happens?

1. What happens if you don't change the scene camera, is it scaled correctly?

2. What is the "z" property value on the scene camera when the game is running? It should be 1.

3. What happens when not using Fixed display mode (I think that's the default, but just in case)?

Without knowing too much, it feels like a camera z issue, the question is why and what could be causing it. Knowing the value of z will help find that out I think.

We have a team meeting tomorrow, so we can take a deeper look then.

Thanks and appreciate the use!

-Kamran

[Kamran Ayub]

One more thing related to my hunch, what happens if you set the game width/height to the same number (800x800 or 600x600)? Just a funny feeling that 800/600 is exactly 133% :)

--

You received this message because you are subscribed to the Google Groups "excaliburjs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to excaliburjs...@googlegroups.com.
To post to this group, send email to excal...@googlegroups.com.
Visit this group at https://groups.google.com/group/excaliburjs.

To view this discussion on the web visit https://groups.google.com/d/msgid/excaliburjs/d381ca35-167e-4465-8f9b-c5aad9258b92%40googlegroups.com.

[Jordan Roher]

Hi Kamran,

Thanks for the ideas! I did some investigating, here's what I found:

1. I reverted the flare-scene camera to use LockedCamera, to no effect. I have a few overrides that clamp the camera to the map, but otherwise it's still 133%.
2. The z property on the camera is always 1. I thought this was an issue early so I checked it. Can confirm. When I set it to e.g. 0.75 it pulls out and I can see the canvas background color
3. Leaving out fixed display mode doesn't change anything
4. And, neat hunch, but going to 800x800 doesn't change anything. It's a bit taller, but the sprites are still 133%.

Thanks so much for your help. If you want to see this running without building it, you can go to https://sarasflare.com/play. The code is minified, but it's something.

[Jordan Roher]

Something I just noticed: the start screen is also scaled 133%. There's no camera or anything there, just a couple draw calls on sprites.

I wonder if it's happening deeper in the engine?

[Kamran Ayub]

Hi Jordan,

I am not seeing any scaling issues when running the game.

See this screenshot of the downloaded PNG texture vs. the game rendered in my browser, and measured the tiles and they are 64px.

Are you sure your browser isn't zoomed in? If you press Ctrl-0 it should reset zoom level.

Also, are you on a high DPI display? Maybe it's a retina issue.

[Jordan Roher]

Ah! I think you're right. I am running a Windows 10 machine with a 4K display with scaling set at 150%. When I set scaling back to 100% I do get smaller blocks.

Thanks for your help! I'll investigate retina canvas drawing and see what I can find.

[Kamran Ayub]

This is a use case we haven't run into yet (none of us have 4K displays or anything different than 100% DPI). Let us know what you find!

[Erik Onarheim]

I've opened an issue for this, we'll take a look at some ways to repro locally 

https://github.com/excaliburjs/Excalibur/issues/861

[Kamran Ayub]

Sorry, looks like Jordan sent his last message only to me. Including here for the record:

I did a bit of research and some experimentation. I found a manual scaling fix, and a polyfill, but both of them mucked with the way the engine displays things.

Jordan

On Friday, August 4, 2017 at 9:04:48 PM UTC-5, Jordan Roher wrote:

[Erik Onarheim]

@Jordan Based on the HTML5 rocks article, it may be fairly simple to fix this be taking devicePixelRatio and backingStoreRatio into account and scaling accordingly. Right now excalibur does some manual pixel calculations, which would definitely fail in the HiDPI case. 

Currenlty I don't have a HiDPI screen, let me know if you'd be open to a google hangouts call to troubleshoot and repro to make a fix. I should have some availability this weekend to discuss Saturday and Sunday. If so I'll prepare a beta build with a potential fix for our meeting

[Jordan Roher]

Yeah, that would be great! Sunday would work best for me. I'm on the Pacific coast, so 10AM-10PM PST.