Failed to Set a Huawei Runtime Quick Game Packaged from a Laya Game to Full Screen

Search This thread

shikkerimath

Senior Member
Nov 30, 2020
65
21

Symptom​

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

1617001470055.png


Cause Analysis​



The possible cause is that the screen adaptation code is not modified before packaging or the adaptation mode is not flexibly modified based on the screen.



Solution​


Check the screen design mode specified by scallMode of the current game. Generally, before packaging, you need to perform full-screen adaptation for different modes. Currently, there are three mainstream design modes: exactfit, fixedwidth, and fixedheight.



l Exactfit: Forcibly stretch the screen in full mode. In this mode, the width and height of the canvas and stage are equal to those of the game design. The screen is forcibly scaled to the full-screen mode without considering the design. In this way, you do not need to perform additional adaptation and can ensure full-screen display in any model. However, when the rate of the physical width and height of the mobile phone is different from the designed value, the screen will be stretched and deformed.



l Fixedwidth: height-adaptive mode, which is applicable to portrait screen games. Canvas width and stage width are equal to the designed values. However, the canvas height and stage height are scaled based on the rate of the physical width to the designed width. The width is fully proportional, and you only need to adjust the height. You can drag the background to the full screen by setting the relative layout attributes top and bottom.



l Fixedheight: width-adaptative mode, which is applicable to landscape screen games. In this mode, the canvas height and stage height are equal to the designed values. The canvas width and stage width are scaled based on the rate of the physical height to the designed height. The height is fully proportional, and you only need to adjust the width. You can drag the background to the full screen by setting the relative layout attributes left and right.



For the preceding values of scallMode, you can use different screen adaptation methods for different Laya versions when you pack Huawei quick games.



● laya.1.x

The adaptation method is provided in huawei-adapater.js. You only need to introduce huawei-adapater.js and add the screen adaptation code after Laya.init at the game entrance in the code.js file to redefine the stage width and height and designed width and height.

Code:
1.  window.getAdapterInfo = function (config) {
2.      let scaleX = 1;
3.      let scaleY = 1;
4.      let vw = window.innerWidth;
5.      let vh = window.innerHeight;
6.      let w = config.width;
7.      let h = config.height
8.      config.scaleMode = config.scaleMode.toLowerCase();
9.      switch (config.scaleMode) {
10.        case "exactfit":
11.            scaleX = vw / w;
12.            scaleY = vh / h;
13.            break;
14.        case "fixedwidth":
15.            scaleX = scaleY = vw / w;
16.            break;
17.    }
18.    return {
19.        scaleX: scaleX,
20.        scaleY: scaleY,
21.        w: w,
22.        h: h,
23.        vw: vw,
24.        vh: vh,
25.        rw: w * scaleX,
26.        rh: h * scaleY
27.    };
28.};
29.Laya.init(600, 400, WebGL);// Here, 600 and 400 need to be changed to the designed width and height.
30.Laya.stage.scaleMode = "exactfit";//exactfit is used as an example only. You need to replace it with that in your game.
31.// Screen adaptation.
32.if(typeof getAdapterInfo !== "undefined"){
33.   var stage = Laya.stage;
34.   var info = getAdapterInfo({width:600, height:400, scaleMode:"exactfit"});// Change 600 and 400 to the values designed for the quick game.
35.   stage.designWidth = info.w;
36.   stage.designHeight = info.h;
37.   stage.width = info.rw;
38.   stage.height = info.rh;
39.   stage.scale(info.scaleX, info.scaleY);
40. }
41.// Screen adaptation ends.

laya.2.0~~laya2.8.0

Add screen adaptation code following the program entry in the bundle.js file. Sample code:

Code:
1.  // Entry.
2.  // Initialize the loader based on the IDE.
3.  if (window["Laya3D"]) Laya3D.init(GameConfig.width, GameConfig.height);
4.  else Laya.init(GameConfig.width, GameConfig.height, Laya["WebGL"]);
5.  Laya["Physics"] && Laya["Physics"].enable();
6.  Laya["DebugPanel"] && Laya["DebugPanel"].enable();
7.  Laya.stage.scaleMode = GameConfig.scaleMode;
8.  Laya.stage.screenMode = GameConfig.screenMode;
9.  Laya.stage.alignV = GameConfig.alignV;
10.Laya.stage.alignH = GameConfig.alignH;
11.// Screen adaptation.
12.if (typeof getAdapterInfo !== "undefined") {
13.var stage = Laya.stage;
14.var info = getAdapterInfo({ width: GameConfig.width, height: GameConfig.height, scaleMode: GameConfig.scaleMode });
15.  // Note: GameConfig.width and GameConfig.height are the width and height of the quick game in the demo, respectively. Set them based on your needs.
16.stage.designWidth = info.w;
17.stage.designHeight = info.h;
18.stage.width = info.rw;
19.stage.height = info.rh;
20.stage.scale(info.scaleX, info.scaleY);
21.}
22.// Screen adaptation ends.

If the preceding methods cannot take effect, you can enable the retina canvas adaptation mode in versions later than Laya 2.0 to adjust the game screen adaptation. Sample code:

Code:
1.  // Entry.
2.  // Initialize the loader based on the IDE.
3.  if (window["Laya3D"]) Laya3D.init(GameConfig.width, GameConfig.height);
4.  else Laya.init(GameConfig.width, GameConfig.height, Laya["WebGL"]);
5.  Laya["Physics"] && Laya["Physics"].enable();
6.  Laya["DebugPanel"] && Laya["DebugPanel"].enable();
7.  Laya.stage.scaleMode = GameConfig.scaleMode;
8.  Laya.stage.screenMode = GameConfig.screenMode;
9.  Laya.stage.alignV = GameConfig.alignV;
10.Laya.stage.alignH = GameConfig.alignH;
11.// Screen adaptation.
12.if(typeof hbs !== 'undefined'){
13.    Laya.stage.useRetinalCanvas = true;
14.}
15.// Screen adaptation ends.

After the adaptation, the game is displayed in full-screen mode, as shown in the following figure.

1617001586962.png


Checkout in forum
 
Our Apps
Get our official app!
The best way to access XDA on your phone
Nav Gestures
Add swipe gestures to any Android
One Handed Mode
Eases uses one hand with your phone