DEV Community

Zachary Powell
Zachary Powell

Posted on

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.

image

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.

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

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

image

Reference:
Developing a Runtime Quick Game

Top comments (1)

Collapse
 
madilraza profile image
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 founder@marsecdev.com
hope to see you soon