JM_KA/assets/Script/Engine/Component/UIPanel/ScreenResize.ts

import { CoroutineV2 } from "../../CatanEngine/CoroutineV2/CoroutineV2";
import { UIManager } from "./UIManager";

/**畫面自適應(換場景手動呼叫) */
export default class ScreenResize {
	private static _instance: ScreenResize = null;
	public static get Instance(): ScreenResize { return this._instance; }
	/**直橫式的製作尺寸 */
	public static readonly CanvasSize: cc.Vec2[] = [cc.v2(1422, 800), cc.v2(800, 1422)];
	/**是否直式機台 */
	public static IsPortrait: number = 0;
	/**固定橫直判斷(null=通用.0=固定橫.1=固定直) */
	public static PL: number = null;

	constructor() {
		cc.log("creat ScreenResize");
		ScreenResize._instance = this;
		ScreenResize._instance.CallManual();
	}

	public AddEven(): void {
		ScreenResize._instance.AddResizeEvent();
	}

	/**手動呼叫 */
	public CallManual(): void {
		ScreenResize.Instance.GameResize("inGameResize");
	}

	public AddResizeEvent() {
		this.GameResize("inGameResize");
		window.onresize = () => {
			this.GameResize("window.onresize");
		};
		cc.view.setResizeCallback(() => {
			this.GameResize("cc.view.setResizeCallback");
		});
	}

	public GameResize(resizeType: string) {
		if (ScreenResize.PL == null) {
			//自適應
			ScreenResize.IsPortrait = this._isPortraitMode();
		} else {
			//固定直橫
			ScreenResize.IsPortrait = ScreenResize.PL;
		}
		cc.log("resizeType:" + resizeType);
		cc.log("ScreenResize.IsPortrait:" + ScreenResize.IsPortrait);
		if (cc.sys.isBrowser) {
			//網頁版的修正顯示範圍判斷
			this._browserAutoScreenSetting(resizeType);
		} else {
			this._appAutoScreenSetting();
		}
		this._alignWithScreen();
		CoroutineV2.Single(this._delayChangeDir()).Start();
		this._alignWithGameUI();
	}
	private _browserAutoScreenSetting(resizeType: string) {
		let frameSize = cc.view.getFrameSize();
		if (ScreenResize.IsPortrait) {
			cc.view.setOrientation(cc.macro.ORIENTATION_PORTRAIT);
			if (resizeType === "inGameResize") {
				//只需要進遊戲設定一次，避免第一次進入場景時萬一跟設計分辨率不同會導致世界座標跑掉(cocos engine底層沒處理好)
				if (frameSize.width > frameSize.height) {
					cc.view.setFrameSize(frameSize.height, frameSize.width)
				} else {
					cc.view.setFrameSize(frameSize.width, frameSize.height)
				}
			}
		} else {
			cc.view.setOrientation(cc.macro.ORIENTATION_LANDSCAPE);
			if (resizeType === "inGameResize") {
				//只需要進遊戲設定一次，避免第一次進入場景時萬一跟設計分辨率不同會導致世界座標跑掉(cocos engine底層沒處理好)
				if (frameSize.height > frameSize.width) {
					cc.view.setFrameSize(frameSize.height, frameSize.width)
				} else {
					cc.view.setFrameSize(frameSize.width, frameSize.height)
				}
			}
		}
		cc.view.setDesignResolutionSize(ScreenResize.CanvasSize[ScreenResize.IsPortrait].x, ScreenResize.CanvasSize[ScreenResize.IsPortrait].y, new cc.ResolutionPolicy(cc.ContainerStrategy["PROPORTION_TO_FRAME"], cc.ContentStrategy["NO_BORDER"]));
		if (document.getElementById("GameCanvas")["width"] % 2 != 0) {
			document.getElementById("GameCanvas")["width"] -= 1;
		}
		if (document.getElementById("GameCanvas")["height"] % 2 != 0) {
			document.getElementById("GameCanvas")["height"] -= 1;
		}
		document.body.style.width = "100%";
		document.body.style.height = "100%";
	}

	private _appAutoScreenSetting() {
		cc.view.setDesignResolutionSize(ScreenResize.CanvasSize[ScreenResize.IsPortrait].x, ScreenResize.CanvasSize[ScreenResize.IsPortrait].y, cc.ResolutionPolicy.SHOW_ALL);
	}

	/**舊版COCOS引擎內的座標對齊 */
	private _alignWithScreen(): void {
		var designSize, nodeSize;
		if (CC_EDITOR) {
			nodeSize = designSize = cc["engine"]["getDesignResolutionSize"]();
			cc.Canvas.instance.node.setPosition(designSize.width * 0.5, designSize.height * 0.5);
		}
		else {
			var canvasSize = nodeSize = cc.visibleRect;
			designSize = cc.view.getDesignResolutionSize();
			var clipTopRight = !cc.Canvas.instance.fitHeight && !cc.Canvas.instance.fitWidth;
			var offsetX = 0;
			var offsetY = 0;
			if (clipTopRight) {
				// offset the canvas to make it in the center of screen
				offsetX = (designSize.width - canvasSize.width) * 0.5;
				offsetY = (designSize.height - canvasSize.height) * 0.5;
			}
			cc.Canvas.instance.node.setPosition(canvasSize.width * 0.5 + offsetX, canvasSize.height * 0.5 + offsetY);
		}
		cc.Canvas.instance.node.width = nodeSize.width;
		cc.Canvas.instance.node.height = nodeSize.height;
	}
	private *_delayChangeDir() {
		yield CoroutineV2.WaitTime(0.2);
		this._alignWithScreen();
		this._alignWithGameUI();
	}
	private _alignWithGameUI() {
		UIManager.DireEvent.DispatchCallback([]);
	}
	private _isPortraitMode(): number {
		let sw = window.screen.width;
		let sh = window.screen.height;
		let _Width = sw < sh ? sw : sh;
		let _Height = sw >= sh ? sw : sh;
		if (cc.sys.isBrowser) {
			//網頁版的顯示範圍判斷
			let w = document.documentElement.clientWidth;
			let h = document.documentElement.clientHeight;
			let w2 = window.innerWidth;
			let h2 = window.innerHeight;
			let containerW = Number.parseInt(document.getElementById("Cocos2dGameContainer").style.width) + Number.parseInt(document.getElementById("Cocos2dGameContainer").style.paddingRight) + Number.parseInt(document.getElementById("Cocos2dGameContainer").style.paddingLeft);
			let containerH = Number.parseInt(document.getElementById("Cocos2dGameContainer").style.height) + Number.parseInt(document.getElementById("Cocos2dGameContainer").style.paddingTop) + Number.parseInt(document.getElementById("Cocos2dGameContainer").style.paddingBottom);
			let rotate = Number.parseInt(document.getElementById("Cocos2dGameContainer").style.transform.replace("rotate(", "").replace("deg)", ""));
			/*cc.log(
				"w:" + w + ",h:" + h +
				"\n,w2:" + w2 + ",h2:" + h2 +
				"\n,sw:" + sw + ",sh:" + sh +
				"\n,_Width:" + _Width + ",_Height:" + _Height +
				"\n,frameW:" + cc.view.getFrameSize().width + ",frameH:" + cc.view.getFrameSize().height +
				"\n,containerW:" + containerW + ",containerH:" + containerH + ",rotate:" + rotate +
				"\n,canvasW:" + cc.game.canvas.width + ",canvasrH:" + cc.game.canvas.height
			);*/
			if (w == _Width) {
				return 1;
			} else if (w == _Height) {
				if (!CC_DEV) {
					return 0;
				} else {
					if (containerW >= containerH) {
						return rotate == 0 ? 0 : 1;
					} else {
						return rotate == 0 ? 1 : 0;
					}
				}
			} else if (w == w2) {
				if (containerW >= containerH) {
					return rotate == 0 ? 0 : 1;
				} else {
					return rotate == 0 ? 1 : 0;
				}
			} else {
				if (containerW >= containerH) {
					return rotate == 0 ? 0 : 1;
				} else {
					return rotate == 0 ? 1 : 0;
				}
			}
		} else {
			if (sw == _Width) {
				return 1;
			} else if (sw == _Height) {
				return 0;
			} else {
				cc.log("XXXXXXXXXXXXXXXXXX");
				return 1;
			}
		}
	}
}