pageAlignHorizontally and pageAlignVertically set too late: game jumps to center

[Friksel]

Even if you set pageAlignHorizontally/pageAlignVertically inside the very first function of the first state (boot state, init function) there is always an ugly visible jump of the game going from left to center.
I think this is a bug; it seems like scaleManagers 'pageAlignHorizontally' and 'pageAlignVertically' are set too late (somewhere after puting the canvas inside the dom and/or rendering the canvas for the first time).

(There is also a visible scaling of elements at initial state by the way)

When looking inside phaser-2.4.4.js it seems like it's going wrong inside the 'boot'-function. Because when I set the align-values just before this.setUpRenderer(): (line 34330 in phaser-2.4.4.js) it's not jumping anymore:

this.scale.pageAlignHorizontally = true; 
this.scale.pageAlignVertically = true;
this.setUpRenderer();`

As said above it seems like there is also something going wrong with scaling at initialisation. But can't find the time at the moment to look at that more closely now.

---

But my preference would be to be able to set the alignment-values next to the scaling mode from inside the gameconfig. That would be great!

Example code where the game 'jumps' from left to center:

var gameConfig: {
    width: 1920,
    height: 1080,
    renderer: phs.AUTO,
    parent: 'gameWrapper',
    scaleMode: Phaser.ScaleManager.SHOW_ALL,
    fullScreenScaleMode: Phaser.ScaleManager.SHOW_ALL,
    transparent: false,
    antialias: false
}  

var bootState = {
    init: function() {
        // STAGE BACKGROUND
        game.stage.backgroundColor = 0x34495f;

        // PREVENT PHASER FROM STOP WHEN IFRAME IS OUT OF FOCUS
        game.stage.disableVisibilityChange = true; 

        // SMOOTH GRAPHICS
        game.stage.smoothed = true;

        // CENTER GAME ON SCREEN
        game.scale.pageAlignHorizontally = true;
        game.scale.pageAlignVertically = true;
    },

    create: function() {
        // CALL LOAD STATE
        game.state.start('load');
    }
}; 


game = new Phaser.Game(gameConfig);

// ADD STATES
game.state.add('boot', bootState); 
game.state.add('load', loadState);
game.state.add('menu', menuState);
game.state.add('play', playState);

// START BOOT STATE
game.state.start('boot');

...

[Friksel]

Nice to see this is marked as 'feature request', but to me this is also an issue/bug and I was hoping this was fixed in the next Phaser, but unfortunately it isn't. This bug looks like a difficult thing to avoid/work around without changing the Phaser code, even if I do my own resizing. Will this be in the pipeline to fix anytime soon in Phaser?

[photonstorm]

It has worked in this manner for a long time now. You've the ability to
ignore it entirely, and align the game yourself with css if you don't like
when it happens.

On Saturday, 26 March 2016, Friksel notifications@github.com wrote:

Nice to see this is marked as 'feature request', but to me this is also an
issue/bug and I was hoping this was fixed in the next Phaser, but
unfortunately it isn't. This bug looks like a difficult thing to avoid/work
around, even if I do my own resizing, so will this be in the pipeline to
fix anytime soon in Phaser?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub
#2311 (comment)

Photon Storm Ltd.
http://www.photonstorm.com

Skype: richard.davey
Twitter: @photonstorm

Registered in England and Wales.
Company ID: 8036404
VAT Number: 136 4333 27

[Friksel]

Thanks for your reaction @photonstorm . I guess we have a misunderstanding here.
First of all I didn't mean to offend you, so I'm sorry if that happened. I'll try to pick my words more carefully. I'm happy to use your framework with lots of fun, because it's really set up nicely and making games is much more efficient. In fact, that's also the reason why I posted this issue, 'cause I like to keep using Phaser for more projects in the future.

You wrote that it has worked in this manner for a long time. I wish that was the case, but unfortunately according to the forum there seems to be more people facing this issue.
So far I couldn't manage to avoid the 'resize-jumping' by switching the scaling off in phaser and using my own scaling function (that I use in other canvas-projects), because Phaser is creating the canvas element in javascript instead of using an exising one, so my resize function will always be too late to prevent jumping while scaling/centering. I also tried other things without good result, so unfortunately in my project this is a problem at the moment I have to fix.

An alternative option for me would be to be able to set an existing canvas as a destination for Phaser. But I can't find any documentation/code on that, so it looks like Phaser always creates its own canvas by javascript. In short: I can't find a way to fix this without changing Phaser itself.
Please let me know if I'm missing something here.

Anyway, I can understand you have a lot on your mind right now and that you are really busy. You have your company, the upcoming Lazer project, newsletters, your website, forum, issues, your book and so on. So I can understand if you have other priorities on the moment, but if you can find a minute someday in the future to look at this that would mean the world to me!

[anthonysapp]

Hey @Friksel, in reference to @photonstorm's post, this is a really easy fix if you just write your own CSS to center your game container.
Couldn't you just do something like this in your page's css:

#gameWrapper { width: 1920px; height:1080px; margin: 0 auto; }

[Friksel]

@anthonysapp Please read my posts.

[photonstorm]

Using your own canvas element is now supported in the dev branch.

[rjungemann]

@anthonysapp is right. The fourth argument when creating a new Phaser.Game object is a "parent" DOM element. If it is "phaser-example", then you can use #phaser-example canvas as your CSS selector. This is how I've always solved this.

If it's jumping for some reason, you can default it to display: none; in CSS and then show it when it's ready.

[anthonysapp]

@rjungemann It's all good, this is closed. Rich enabled passing your own canvas element now, even though this issue could have been solved by writing some custom CSS and setting the game's "width" and "height" properties to "100%" in the gameConfig and using some custom Phaser ScaleManager settings.

[Friksel]

I posted this issue to help you guys make Phaser better, but I didn't expect this. This is getting ridiculous by now.

Lots of users are using Phaser to not have to invent the wheel again. Ofcoarse it's open source and free and I'm happy that you guys put so much efford in this.
But in the end, if issues like this doesn't even get acknoledged, this issue gets closed without fixing it, I have to create my own workarounds for core-functionality that is just not working...
then what's the use of a game-lib if I just cannot rely on developers even taking issues seriously and me taking this more and more time?
The result for users is not only dirty workaround-projects and conflicting code, but also lots of double code.

I wonder if you guys even looked in the code to fix it, 'cause to me it seems to be only a matter of sequencial order that is going wrong inside the lib, like I wrote before.
I'm not the developer of this lib, and don't have the overview of the whole lib like you guys to fix this, but I can see it's going wrong in the lib. And I was hoping for a closer look by you guys, 'cause you know the framework inside out. To you this would probabably be a matter of minutes to fix.

It's really nice Phaser has a scalemanager and it seems to be well thought through. But what's the use of having a scalemanager if it's not working correctly? And I have to switch it off and create my own functions/css on a wrapper?
Yes, I can fix everything myself with workarounds and workarounds on top of that, but is that really the goal of a structured gamelib like Phaser?

Building in the option to be able to use an already existing canvas-object could have been a workaround I could be more satisfied with. But even with that canvas option available, I hate to tell you it's still not working. The ResetCanvas function (in the latest DEV) of Phaser is ALWAYS resetting canvas width, height and margins (lines 77103 to 77121), no matter how I setup the gameconfig object (even on NO_SCALE and not setting alignments).
so there's no way I can align and size the canvas myself, because it's always flickering back to phasers styling on resize. So the problem remains even WITH this workaround.

Yes, I could put another wrapper around the canvas to even avoid this issue and all build in phaser code. But I do everything to optimize my code on projects where I can and write clean code and this just doesn't feel right.

With chosing Phaser I thought I could rely on a lib where issues at least are taken seriously.
If it really is not important to you guys that the base functionality is working as it should then maybe I made a mistake. Maybe it's wrong of me to expect this from you, because it's open source and free. And maybe I made the wrong choice in using Phaser for my projects.
And maybe then I have to look for another (paid) solution or create my own lib.
Too bad, 'cause I really like Phaser for the rest.

[anthonysapp]

Neither myself or @rjungemann actually work on this project, we're just users like you. From what I have seen, issues are taken extremely seriously and Rich and team do their best to be active in the community and fix issues. I definitely don't think threatening to use another library is going to make a difference in the long run.

Before, I was simply trying to point out that there are methods to get around this issue using CSS. It is, after all, a game framework for web games, so I don't think it's "dirty" or reinventing the wheel to use other web technologies to achieve what you want to. I wasn't trying to offend but clearly I have. The issue is closed now so this'll be my last reply. See you on the Slack channel and the forums.