ttakei
August 22, 2019, 11:28am
#1
When switching to full screen, the appearance changes correctly, but the button click event does not work correctly. It seems that the buttons are placed in different places. What can I do to make the game work properly on full screen?
Full screen switching was done with the following code.
const canvas = document.getElementById ("GameCanvas");
cc.screen ['requestFullScreen'] (canvas, () => {});
The version is v2.1.2 and the platform is Web Mobile.
jare
August 27, 2019, 6:46am
#2
You should not switch to fullscreen in this way. Please use cc.view.enableAutoFullScreen(true)
ttakei
August 29, 2019, 10:13am
#3
It worked fine with enableAutoFullScreen, but this was not the cause.
If requestFullScreen is executed for the HTML element with id = “Cocos2dGameContainer”, and cc.view.setDesignResolutionSize and cc.view.setFrameSize are specified with appropriate arguments, they will work correctly!
The following code is excerpted for reference.
public static init(): void {
if (!this.isInitialized) {
this.containerElement = document.getElementById("Cocos2dGameContainer");
this.conainterInitialWidth = this.containerElement.clientWidth;
this.conainterInitialHeight = this.containerElement.clientHeight;
if (window.parent.screen.width / window.parent.screen.height < this.defaultCanvasWidth / this.defaultCanvasHeight) {
this.isPortrait = true;
this.frameWidth = window.parent.screen.width;
this.frameHeight = window.parent.screen.width * this.defaultCanvasHeight / this.defaultCanvasWidth;
} else {
this.isPortrait = false;
this.frameWidth = window.parent.screen.height * this.defaultCanvasWidth / this.defaultCanvasHeight;
this.frameHeight = window.parent.screen.height;
}
this.isInitialized = true;
}
}
public static requestFullScreen(): Observable<void> {
this.init();
return new Observable(observer => {
cc.screen["requestFullScreen"](this.containerElement, () => {
if (cc.screen["fullScreen"]()) {
cc.view.setDesignResolutionSize(this.conainterInitialWidth, this.conainterInitialHeight, cc.ResolutionPolicy.SHOW_ALL);
cc.view.setFrameSize(this.frameWidth, this.frameHeight);
this.changeCanvasStyleForFullScreen();
} else {
cc.view.setDesignResolutionSize(this.defaultCanvasWidth, this.defaultCanvasHeight, cc.ResolutionPolicy.SHOW_ALL);
cc.view.setFrameSize(this.defaultCanvasWidth, this.defaultCanvasHeight);
this.resetCanvasStyle();
}
});
});
}
Thank you for the advice.