Sizing issue on Chrome & Firefox for MBPr

[itsOgden]

Up until now, I had been essentially disabling the camera movement and resizing code (I think) so that it is stationary and always stays the same size (see config_user code below). I just use CSS to scale the game in the window.

I do most of my testing in Chrome, but about a week or two ago the game started scaling improperly. Instead of being the full size in the canvas, it is now 1/4 of the canvas size (or scaled to .5). The issue is apparent in Chrome and in Firefox (screenshots below) on retina devices (for example, my Mac Book Pro Retina). It does not appear that the issue is found on non-retina devices, nor on Retina Safari, and I have no way of testing on Windows at the moment.

All of that being said, I did not change any camera code or sizing code of any kind when this started occurring and the issue affects old versions of my game (I keep archived versions), so I know it's nothing I did.

@collinhover I am pretty sure it's something in impact++ that is playing badly with the browsers, but I honestly don't know. Any ideas?

Chrome:

Firefox:

Safari (What it should be showing):

Config_User Code:

ig.CONFIG_USER = {

            PATH_TO_MEDIA: (ig.ua.mobile || window.ejecta) ? 'half/' : 'media/',
            AUTO_CRISP_SCALING: true,
            GAMESCALE: (ig.ua.mobile || window.ejecta) ? .5 : 1,
            GAME_WIDTH: (ig.ua.mobile || window.ejecta) ? 960 : 1920,
            GAME_HEIGHT: (ig.ua.mobile || window.ejecta) ? 540 : 1080,

            FONT:{
                IGNORE_SYSTEM_SCALE: true,
                SCALE: (ig.ua.mobile || window.ejecta) ? 1 : 2,
            },

            TOP_DOWN: true,
            HOLD_TO_MOVE: false,

            PLAYER_MANAGER:{
                HOLD_TO_MOVE: false,
                AUTO_MANAGE_PLAYER: false,
            },

            CAMERA: {
                AUTO_FOLLOW_PLAYER: false,
                KEEP_CENTERED: false,
                KEEP_INSIDE_LEVEL: true,
            }

        };

[Pattentrick]

Hi there @itsOgden,

cool to hear that you still work on your game! Can you please provide a working demo of the problem? I am on a windows machine right now and could confirm that it's some kind of retina only problem. By the way, @aroth is our expert here on retina and ++ as far as I know.

Do I get you right .. you changed nothing at the code and suddenly that bug is happening?! No upgrade to the latest ++ version or something like that?

[itsOgden]

Hey @Pattentrick,

You understand me correctly. I was working with memory storage with localHost when it appeared and hadn't really touched anything else for days. I also found that it happened on my artist's computer a few days later and he wasn't even using the working copy. As I mentioned, it also has affected old versions that haven't been modified in months.

A working (albeit sloppy) demo of it can be found here: http://www.itsogden.com/kcDemo/

[collinhover]

Retina games have been a long standing issue. Every time we fix it (2 or 3 times now), seems like it crops up somewhere else. I don't have a Retina device so it is really difficult for me to help here. The relevant methods are the core game and system resize methods. You should experiment with those on your retina device. Let us know what you find and we'll try to help find a fix.

[itsOgden]

Well, here are a few things that I have noticed, maybe they will supply food for thought.

My game is 1920x1080, but if I set the following then the level matches the canvas:

GAME_WIDTH: 960
GAME_HEIGHT: 540

Best I can figure it, the canvas is setting to the GAME_WIDTH and GAME_HEIGHT, but the game/level/entities are half sized for retina?

[aroth]

I'll see what I can dig up tomorrow for you. Any excuse to get back game development at this point.

On Aug 8, 2014, at 12:10 AM, itsOgden notifications@github.com wrote:

Well, here are a few things that I have noticed, maybe they will supply food for thought.

My game is 1920x1080, but if I set the following then the level matches the canvas:

GAME_WIDTH: 960 GAME_HEIGHT: 540 Best I can figure it, the canvas is setting to the GAME_WIDTH and GAME_HEIGHT, but the game/level/entities are half sized for retina?

— Reply to this email directly or view it on GitHub.

[Pattentrick]

@itsOgden

I can at least assure that this is an problem only existing on retina devices. I can't reproduce this issue on every windows machines I tested on. I tested it on one android mobile device (Samsung Galaxy S4) though, but there the game won't start. The preloader got stuck at around 80% - so no guarantee that this is a problem only existing on retina devices, but I would bet on it.

I don't have a good understanding about retina, nor have I the devices to help with bug fixing, but if I understand the whole thing correctly retina basically blows up pixels x 2. So if your game is just half of the size that it should have, chances are high that ++ fails with recalculating exactly that part.

As @collinhover suggested you could play around with that code:

https://github.com/collinhover/impactplusplus/blob/dev/lib/plusplus/core/plusplus.js#L234

But maybe @aroth will come up with a solution. He did the initial retina fix back then.

Why are you using CSS to scale your game? Because you want to work around some limitations? Does this problem also occur when you stop scaling the game with CSS?

Off topic: The animations in your game are looking veeeeery smooth. hot stuff!

[itsOgden]

@Pattentrick There were some missing files in our half sized art (used for mobile), so it couldn't load on your S4. I have put those in there now, so it should work. That being said, I tried it on my iPhone 5s and it works just fine, so apparently it's not universal Retina. I'm wondering if it's something specific to how the OSX versions of Firefox and Chrome are dealing with the retina elements since Safari works just fine on OSX Retina.

I'm using CSS to scale the game because we are developing it at 1080p, but I want to be able to always see the full game, so CSS brings it back down to the size I need without slowing down the game at all.

And thanks for the compliment on the animations :) We're having fun with it!

@aroth Have you been able to figure anything out? I'm thinking this may be a bug with limited reach, so I'm not sure if you'd even be able to reproduce it on your machine(s).

[itsOgden]

UPDATE: Let me clarify the following by saying that i don't fully understand how the resize code at https://github.com/collinhover/impactplusplus/blob/dev/lib/plusplus/core/plusplus.js#L234 works. If I change ig.ua.pixelRatio > 1 from the first IF statement to ig.ua.pixelRatio > 2 (thus nullifying it), the game goes back to working properly. Any idea why that would be??

[collinhover]

@itsOgden am I understanding you right in that you're doing some custom scaling on the canvas through css externally? If that is the case, I'd either override the resize method in your game and copy/paste/edit whatever code you need to get it working with your custom setup, or just rewrite the core resize method as you suggested. I'm fairly certain the current resize code works if you don't mess around with the css scaling externally.

[itsOgden]

@collinhover If I remove the CSS styles, it does the exact same thing, just on a bigger scale. The game is still 1/2 the size of the canvas. It is just harder to see because 1920x1080 doesn't fit so well into browsers lol

I can definitely adjust the code on my end, I'm just a little concerned that I might be shooting myself in the foot. I assume the original retina code is there for a reason?

[collinhover]

The hope is that the resize code will ensure correct scaling for all devices, but if it doesn't work for you I'd disable it for now and revisit once you're done with everything else. We can continue to discuss the issue and maybe someone will find the key in the meantime.

[leoportilho]

Hi there guys,

@itsOgden did you find any solution to this problem?

I have the same problem.

thx!

[itsOgden]

So sorry I never saw this - I hope you've found a way around it. I did find a workaround, but not a satisfactory solution I"m afraid.