Create a Huawei Quick Game packaged from a Laya game with support for different screen sizes

After a Laya game is packaged into a Huawei runtime quick game, the game screen cannot be displayed in full-screen mode, as shown in the following figure.

The possible cause was that the screen adaptation code was not modified before packaging or the adaptation mode was not modified correctly based on the screen size of the device.

To solve this, modify the screen adaptation code or mode based on the methods provided by Huawei or LayaAir.

Check the scaling mode of the game, which is specified by scaleMode. Currently, the most common scaling modes are exactfit, fixedwidth and fixedheight. Before packaging a web-based or client-based game, you need to perform full-screen adaptation according to the chosen scaling mode.

The advantages and disadvantages of the three scaling modes are as follows:
exactfit: In this mode, the game screen is simply made to fill the device screen without consideration for preserving aspect ratio. If you select this mode, you do not need to perform additional adaptation and can ensure full-screen display on any device. However, if the aspect ratio of the device screen is different from the aspect ratio of the game, the game will appear warped.
fixedwidth: In this mode, the game fills the screen horizontally while preserving the original aspect ratio. This may cause the top and bottom of the game screen to be cut off or not reach the edge of the screen if the aspect ratio of the game and device are different. Adjust the values of top and bottom until the game fits the whole screen vertically. This mode is often used for games that are played on a vertical screen.
fixedheight: In this mode, the game fills the screen vertically while preserving the original aspect ratio. This may cause the left and right sides of the game screen to be cut off or not reach the edge of the screen if the aspect ratio of the game and device are different. Adjust the values of left and right until the game fits the whole screen horizontally. This mode is often used for games that are played on a horizontal screen.

For the preceding scaling modes, Huawei provides different screen adaptation methods for different versions of Laya Engine.

For laya.1.x, the adaptation method is provided in the huawei-adapter.js file. You only need to import the huawei-adapter.js file and add the screen adaptation code after Laya.init at the game entry in the code.js file to redefine the width and height of the game.

	window.getAdapterInfo = function (config) {
	let scaleX = 1;
	let scaleY = 1;
	let vw = window.innerWidth;
	let vh = window.innerHeight;
	let w = config.width;
	let h = config.height;
	config.scaleMode = config.scaleMode.toLowerCase();
	switch (config.scaleMode) {
	case "exactfit":
	scaleX = vw / w;
	scaleY = vh / h;
	break;
	case "fixedwidth":
	scaleX = scaleY = vw / w;
	break;
	}
	return {
	scaleX: scaleX,
	scaleY: scaleY,
	w: w,
	h: h,
	vw: vw,
	vh: vh,
	rw: w * scaleX,
	rh: h * scaleY
	};
	};
	Laya.init(600, 400, WebGL);// Replace 600 and 400 with your game's width and height.
	Laya.stage.scaleMode = "exactfit";// exactfit is used as an example only. Replace it with the actual value in your game.
	// Screen adaptation starts.
	if(typeof getAdapterInfo !== "undefined"){
	var stage = Laya.stage;
	var info = getAdapterInfo({width:600, height:400, scaleMode:"exactfit"});// Replace 600 and 400 with your game's width and height.
	stage.designWidth = info.w;
	stage.designHeight = info.h;
	stage.width = info.rw;
	stage.height = info.rh;
	stage.scale(info.scaleX, info.scaleY);
	}
	// Screen adaptation ends.

view raw code.js hosted with ❤ by GitHub

For laya.2.0 to laya2.8.0, add the screen adaptation code following the program entry in the bundle.js file. Sample code:

	/ Entry.
	// Initialize the engine based on the IDE.
	if (window["Laya3D"]) Laya3D.init(GameConfig.width, GameConfig.height);
	else Laya.init(GameConfig.width, GameConfig.height, Laya["WebGL"]);
	Laya["Physics"] && Laya["Physics"].enable();
	Laya["DebugPanel"] && Laya["DebugPanel"].enable();
	Laya.stage.scaleMode = GameConfig.scaleMode;
	Laya.stage.screenMode = GameConfig.screenMode;
	Laya.stage.alignV = GameConfig.alignV;
	Laya.stage.alignH = GameConfig.alignH;
	// Screen adaptation starts.
	if (typeof getAdapterInfo !== "undefined") {
	var stage = Laya.stage;
	var info = getAdapterInfo({ width: GameConfig.width, height: GameConfig.height, scaleMode: GameConfig.scaleMode });
	// Note: GameConfig.width and GameConfig.height indicate the width and height of the quick game in the demo, respectively. Set them based on your needs.
	stage.designWidth = info.w;
	stage.designHeight = info.h;
	stage.width = info.rw;
	stage.height = info.rh;
	stage.scale(info.scaleX, info.scaleY);
	}
	// Screen adaptation ends.

view raw bundle.js hosted with ❤ by GitHub

Once the adaptation is complete, the game will be displayed in full-screen mode, as shown in the following figure.

Reference:
Developing a Runtime Quick Game

Comments

[MUHAMMAD ADIL RAZA]

Hey Zachary what a Great Peace of Tutorial you are writing .
i want to invite you to My medium Publication to Write your Blogs There and kickstart your Journey There .
medium.com/marsec-developers
this is the Link to our Medium Publication
either you can mail me directly at [e-mail]
hope to see you soon