Method and system for realizing differentiated adaptation of interface control positions on screens with different sizes

Abstract

The invention discloses a method and a system for realizing differentiated adaptation of interface control positions on screens with different sizes, an embedded splicing component is constructed in a unity engine, splicing parameters and screen resolution of a target model are input through the embedded splicing component, adaptation parameters of a control under an original size are automatically converted, and the interface control positions are matched with the screen resolution of the target model. Compared with the prior art, the method has the advantages that the adaptive parameters are quickly set, complex calculation in the splicing process, particularly more complex adaptive calculation under the nested state of multiple adaptive rules is avoided, after the adaptive parameters are calculated and set, the adaptive parameters are applied to the adaptive process of screens of various sizes in a parameter fixing mode, the controls appear at expected positions, and the adaptive parameters can be quickly set. The flexible adaptation of the control in the screens with different proportions or different characteristics is realized, and the flexible setting of the position of the control in the long and short screen state becomes possible.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a method and system for achieving differentiated adaptation of interface control positions on screens of different sizes. Background Art

[0002] In current mobile game development, conventional game engines have only three general adaptation methods for control positions: edge adaptation (the control position remains at a distance from a single edge of the parent resource), proportional adaptation (the control anchor point is associated with the percentage position of the parent resource), and stretch adaptation (the control position is associated with changes in the width or height of the parent resource).

[0003] These general adaptation methods still have great limitations. For example, suppose you want to have a 100x100 pixel size control with a 10 pixel spacing on a 1920x1080 screen and a 40 pixel spacing on a 2400x1080 mobile screen, and the two controls as a whole need to be adapted at a fixed distance from the bottom edge. Since conventional game engines only have the three general adaptation methods mentioned above, and since the percentage position of the control relative to the parent resource will change on screens of different sizes, it is difficult to use simple proportional adaptation to meet the above two different spacing distance adaptations. Summary of the invention

[0004] In view of the problems existing in the prior art, the purpose of the present invention is to provide a method and system for achieving differentiated adaptation of the position of interface controls on screens of different sizes, so as to achieve flexible adaptation of the position of interface controls on screens of different proportions or different characteristics.

[0005] The present invention provides a method for achieving differentiated adaptation of interface control positions on different terminals. The program development size is called the native size, the target size to be adapted is called the adaptation standard size, an embedded splicing component is constructed in the unity engine, splicing parameters are input through the splicing component, adaptation parameters of the control under the native size are converted, and adaptation parameters are set. The adaptation parameters are applied to the adaptation process of screens of various sizes in a fixed parameter manner to achieve differentiated adaptation, so that the control appears in the expected position, specifically: Step S1, with the native size as the reference system, the size of the adaptation standard is proportionally scaled so that the short sides of the native size and the size of the adaptation standard are equal and the long sides are different sizes, and the interface effect design is performed under the native size and the proportionally scaled adaptation standard size, and the position of each control under the native size and the adaptation standard size is determined respectively, and the interface effect diagram under the two screen sizes is obtained, and the center of the control is used as the control anchor point, and the distance L from each control anchor point to the bottom edge of the native size and the distance L1 from each control anchor point to the bottom edge of the target adaptation size are obtained; Step S2, before calculating the adaptation parameters, the user first creates a new interface according to the native size, the interface includes a canvas node and a control node, and first sets the canvas node as the parent node of the control node that needs to be flexibly adapted, selects the control node that needs to be flexibly adapted and mounts a splicing component for the node, and enters the splicing parameters in the splicing component, the parameters include the native size, the size of the adaptation standard, the adaptation direction, the bottom edge distance L from the control anchor point to the native size, and the bottom edge distance L1 from the control anchor point to the target adaptation size, wherein the native size includes the long side C and the short side D, the size of the adaptation standard includes the long side A and the short side B, and the adaptation direction is Top or Bottom; Step S3: After inputting the splicing parameters, the splicing component performs the steps of calculating and setting the adaptation parameters: A. Using the input splicing parameters, the adaptation parameters of the control at the native size are obtained through the following conversion formula. The adaptation parameters include the full-screen adaptation ratio parameter S and the control anchor point offset :

[0006] ; B. Automatically insert a new node between the parent node and the control node as an avatar node, set the adaptation mode in the Rect Transform component of the avatar node to hang up, down, left, and right, and set the avatar node as a child node of the canvas node; C. Translate the avatar node according to the control anchor offset O. If the adaptation direction of the splicing component input is Top, set the control anchor offset O to the Top value in the Rect transform component of the avatar node, and set the opposite number of the control anchor offset O to the Bottom value in the Rect transform component; D. Use the control node as a child node of the canvas node, and set the adaptation mode in the Rect transform component of the control node according to the adaptation direction input by the stitching component. If the docking edge is the bottom edge, the distance L from the control anchor point to the bottom edge of the native size input by the stitching component is used as the value of PosY in the Rect transform component. If the docking edge is the top edge, the opposite of the L value is used as the value of PosY in the Rect transform component. E. Set the control node as the child node of the avatar node, and then set the adaptation mode to center adaptation in the Rect Transform component of the control node, and assign the two Y-axis parameters in the Anchors item in the Rect Transform component according to the full-screen adaptation ratio parameter S value. If the adaptation direction of the splicing component input is bottom, directly set the above two Y-axis parameters with the full-screen adaptation ratio parameter S value, and calculate the correction parameter at the same time. , and the correction parameter As an increment, it is added to the original PosY value to correct the position offset of the control. If the adaptation direction of the splicing component input is Bottom, Calculated scale parameter Set the two Y-axis parameters mentioned above and calculate the correction parameters at the same time , and the correction parameter It is added to the original PosY value as a decrement to correct the position offset of the control; F. The calculation and setting steps of the adaptation parameters are completed.

[0007] The interface of the stitching component is provided with input boxes for the native size and the adaptation standard size, an adaptation direction option box and a confirmation button, wherein the Native resolution input box is used to input the native size; the Target resolution input box is used to input the adaptation standard size, and there is an input item of Anchors To Bottom or Anchors ToTop under the two input boxes, which is used to input the distance between the control anchor and the hanging edge of the native size or the adaptation standard size; the adaptation direction Adaptation direction option box is used to select the adaptation direction, selecting bottom is for hanging bottom edge adaptation, and selecting top is for hanging top edge adaptation. When bottom is selected in the adaptation direction option box, the text under the above two input boxes is displayed as Anchors To Bottom, and when top is selected in the adaptation direction option box, the text under the above two input boxes is displayed as Anchors To Top.

[0008] A system for achieving differentiated adaptation of interface control positions on different terminals, comprising a memory, a processor and a computer program stored in the memory, wherein the processor is used to execute the computer program to implement the above-mentioned method for achieving differentiated adaptation of interface control positions on different terminals.

[0009] A computer-readable storage medium stores a computer program / instruction thereon, and when the computer program / instruction is executed by a processor, the method for achieving differentiated adaptation of the position of an interface control on different terminals is implemented. A computer program product includes a computer program / instruction, and when the computer program / instruction is executed by a processor, the method for achieving differentiated adaptation of the position of an interface control on different terminals is implemented. After adopting the above scheme, the present invention constructs an embedded splicing component in the unity engine, inputs the splicing parameters and the screen resolution of the target model through the splicing component, and automatically converts the adaptation parameters of the control at the native size, and quickly sets the adaptation parameters, thereby avoiding complex calculations in the splicing process, especially the more complex adaptation calculations under the nested state of multiple adaptation rules. After the present invention calculates and sets the adaptation parameters, it will be applied to the adaptation process of screens of various sizes in a fixed parameter manner, so that the control appears in the desired position, realizing flexible adaptation of the control in screens of different proportions or different characteristics, and making it possible to flexibly set the control position in the long and short screen states. BRIEF DESCRIPTION OF THE DRAWINGS

[0010] Figure 1 This is a schematic diagram of the interface of the splicing assembly of the present invention; Figure 2 The present invention is a setting interface in which the adaptation mode in the Rect Transform component of the avatar node during splicing is suspended up, down, left, and right; Figure 3 It is a setting interface for the Top value and the Bottom value in the Rect Transform component of the incarnation node during splicing of the present invention; Figure 4 It is the setting interface of PosY in the Rect transform component of the bottom edge control node when splicing according to the present invention; Figure 5 It is the setting interface of PosY in the Rect transform component of the top edge control node when splicing; Figure 6 It is a setting interface for two Y-axis parameters in the Anchors item in the Rect Transform component of the control node during splicing of the present invention; Figure 7 The present invention provides a setting interface for correcting the position offset of the control caused by the modification of the Y-axis parameters during splicing; Figure 8 The adaptation display effect of the present invention Figure 1 ; Fig. 9 The adaptation display effect of the present invention Figure 2 ; Fig.10 The adaptation display effect of the present invention Figure 3 . DETAILED DESCRIPTION

[0011] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of this application.

[0012] It should be noted that the terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or server that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0013] In the embodiments of the present application, words such as "exemplary" or "for example" are used to indicate examples, illustrations or descriptions. Any embodiment or scheme described as "exemplary" or "for example" in the embodiments of the present application should not be interpreted as being more preferred or more advantageous than other embodiments or schemes. Specifically, the use of words such as "exemplary" or "for example" is intended to present related concepts in a specific way. The principle of the technical implementation of the present invention is described as follows: (1) About the meaning of splicing: Splicing is a term used exclusively in the gaming industry, which refers to the process of reassembling various controls and interface resources in the design draft into the game engine during software development. (2) Taking the example of achieving differentiated adaptation of a single control position on screens of different sizes, the principle of the present invention is explained: For ease of understanding, the present invention is explained using the Unity engine as an example, but is not limited to the Unity engine. The adaptation method and constructed splicing components of the present invention are applicable to various other game development engines.

[0014] The present invention refers to the program development size as the native size, and usually selects the commonly used screen size; the target size that needs to be adapted is called the adaptation standard size. First, a certain commonly used screen size is selected as a reference system, and the interface effect design is performed under the native size and the adaptation standard size respectively. Then, the control positions designed under the two screen sizes are reversed to convert the adaptation parameters of the controls under the native size. The adaptation parameters are applied to the adaptation process of screens of various sizes in the form of fixed parameters, so that the controls appear in the desired positions, thereby achieving differentiated adaptation.

[0015] For the sake of convenience, the interface adaptation rule is defined as the short side does not adapt, and only the long side adapts.

[0016] A. Assuming that the screen size of iPhone 13 is used as the adaptation standard, the resolution of the screen is 828x1792; B. Design the interface effects at both the native size and the adapted size: According to the adaptation rule that the short side does not fit and only the long side fits, the adapted size 828x1792 is scaled to 1080x2338 with the native size 1080x1920 as the reference system and then the effect design is performed. In this way, the short sides of the native size and the adapted size are equal, and the long sides are different sizes. The positions of the controls at the native size and the adapted size are determined respectively, and the interface effect diagrams at the two screen sizes are obtained, specifically: Use the center point of the control as the control anchor point, and determine the distance between the control anchor point and the bottom edge of the screen in the native size and the adapted size respectively; C. Based on the designed control positions under the two screen sizes, reverse inference is performed to calculate the adaptation parameters of the control under the native size, which include full-screen adaptation ratio parameters and control anchor position parameters (i.e., control anchor offset), and adaptation parameters are set. The adaptation parameters are applied to the adaptation process of screens of various sizes in the form of fixed parameters, so that the control appears in the desired position and differentiated adaptation is achieved, specifically: Assume that the full screen adaptation ratio parameter in the splicing parameters is S, and the control anchor point offset is , the long side of the adapted size is A and the short side is B, the long side of the native size is C and the short side is D, the distance from the control anchor point to the bottom edge of the native size is L, and the distance from the control anchor point to the bottom edge of the adapted size is L1. Use the following conversion formula to get the adaptation parameters:

[0017] ; The control anchor offset It may be a negative number, which means that the control anchor position may be located below the native size range. The control anchor position in the transform property of the Unity engine is a value between 0-1. The default control anchor is located inside the control. If the control anchor position is set to a value outside 0-1, the control anchor position will be affected by the control size. When the control size changes, this value will be very uncontrollable and will cause numerical errors due to proportional conversion. Therefore, it is necessary to avoid using a value outside 0-1 for the control anchor position, that is, to ensure that the control anchor position is not set outside the control.

[0018] In order to solve the problem that the control anchor point is set outside the control, the user first creates a new interface according to the native size. The interface includes a canvas node and a control node, and first sets the canvas node as the parent node of the control node that needs to be flexibly adapted. Then, an avatar node of the canvas node is added between the canvas node and the control node. Specifically, the position and size parameters of the canvas node are first completely copied to the avatar node, and then the docking relationship of the avatar node relative to the canvas node is modified to be docked up, down, left, and right (refer to Figure 2 ), ensure that the sizes of the two nodes remain exactly the same when they are on screens of different sizes, and then translate the avatar node according to the control anchor point offset O, so as to achieve the anchor point offset of the control corresponding to the child node in disguise; then set the adaptation mode of the control node to "proportionally adapt the avatar node according to the full-screen adaptation ratio parameter S", thereby completing the adaptation parameter setting; According to the adaptation parameters set above, the control can not only meet the position of the native size, but also be located at the position expected by the designer when the size of the adaptation standard is adjusted.

[0019] (3) In order to obtain simplified and reliable calculation results, a Unity component tool is developed to implement the calculation process in (2) above. That is, an embedded stitching component is built in the Unity engine. By inputting stitching parameters and parameters such as the resolution of the target model into the stitching component, the adaptation parameters of the control at the native size are calculated. After the adaptation parameters are set, they can be applied to the adaptation process of screens of various sizes in a fixed parameter manner to achieve differentiated adaptation and make the control appear in the desired position: like Figure 1As shown, the interface of the stitching component is provided with input boxes for the native size and the adaptation standard size, an adaptation direction option box and a confirmation button, wherein the Native resolution input box is used to input the native size (that is, the development size, at which UI stitching is performed); the Target resolution input box is used to input the adaptation standard size, and there is an Anchors To Bottom or Anchors To Top input item under the two input boxes, which is used to input the distance between the control anchor and the hanging edge of the native size or the adaptation standard size; the adaptation direction option box is used to select the adaptation direction, selecting bottom is for hanging bottom edge adaptation, and selecting top is for hanging top edge adaptation. When the adaptation direction option box selects bottom, the text under the above two input boxes is displayed as Anchors To Bottom, and when the adaptation direction option box selects top, the text under the above two input boxes is displayed as Anchors To Top.

[0020] Before calculating the adaptation parameters, the user needs to create a new interface according to the native size, and create a new canvas node as the parent node of the interface element node (i.e., control node) that needs to be flexibly adapted, select the control node that needs to be flexibly adapted and mount the splicing component for the node. After entering all the parameters in the splicing component, click the OK button, and the splicing component will perform the calculation and setting of the adaptation parameters: Automatically insert a new node between the parent node and the control node as the avatar node, and set the adaptation mode in the Rect Transform component of the avatar node to hang up, down, left, and right (reference Figure 2 ), and set the avatar node as a child node of the canvas node; Using the parameters input in the splicing component, the control anchor offset O is obtained according to the conversion formula, and the avatar node is translated according to the control anchor offset O. If the adaptation direction input in the splicing component is top, the control anchor offset O is set to the Top value in the Rect transform component of the avatar node, and the opposite number of the control anchor offset O is set to the Bottom value in the Rect transform component (reference Figure 3 ); First, make the control node a child node of the canvas node, and set the docking mode in the Rect transform component of the control node according to the adaptation direction input by the splicing component. If the docking edge is the bottom edge, the distance L from the control anchor point input by the splicing component to the docking edge of the native size is used as the value of PosY in the Rect transform component (refer to Figure 4), if the docking edge is the top edge, the opposite of the L value is used as the value of PosY in the Rect transform component (refer to Figure 5 ); Then set the control node as the child node of the avatar node, and then set the adaptation mode to center adaptation in the Rect Transform component of the control node, and assign the two Y-axis parameters (Min Y parameter and Max Y parameter) in the Anchors item of the Rect Transform component according to the full-screen adaptation ratio parameter S value obtained by the conversion formula. If the adaptation direction of the splicing component input is bottom, directly set the above two Y-axis parameters with the full-screen adaptation ratio parameter S value (refer to Figure 6 ), and in order to correct the control position offset caused by the Y-axis parameter modification, the correction parameter is calculated by supplementing the offset formula , and the correction parameter As an increment, it is added to the original PosY value (ref. Figure 7 ); If the adaptation direction of the splicing component input is Bottom, use Calculated scale parameter Set the above two Y-axis parameters. At the same time, in order to correct the control position offset caused by the Y-axis parameter modification, calculate the correction parameter by supplementing the offset formula , and the correction parameter Added as a decrement to the original PosY value (i.e. the original value of pos Y minus the correction parameter ).

[0021] The present invention can apply the conversion formula of the adaptation parameter to the local control adaptation within the interface. It only needs to replace the native size with the parent canvas size in the initial state, and then replace the adaptation target size with the parent canvas size in the target state, and then execute the above steps to realize a very complex and flexible adaptation mechanism.

[0022] The method of the present invention calculates the adaptation parameters of the control in the native size. After setting the adaptation parameters, it can be applied to the adaptation process of screens of various sizes in a fixed parameter manner to achieve differentiated adaptation and make the control appear in the desired position. For example, multiple controls are set as a control group. The control group is displayed in the lower left corner in the native size (iphone8) and in the upper left corner in the adapted size (iphone13). Figure 8 Set the controls in the control group as separate controls, and operate the separate controls independently. The positions of each control can be customized in the standard size (iphone13), and the controls can have different intervals, such as Fig. 9As shown. By constraining the component frame to be proportional to the size, the same set of controls can be hidden or displayed, such as Fig.10 As shown, the control width critical point threshold is used to control the hiding or display of controls on iPhone 8 and iPhone 13 phones, thereby achieving the switching of the control arrangement state.

[0023] Embodiment 1 Embodiment 1 of the present invention provides a method for achieving differentiated adaptation of interface control positions on different terminals, wherein the program development size is referred to as the native size, and the target size to be adapted is referred to as the adaptation standard size. An embedded splicing component is constructed in the unity engine, and splicing parameters are input through the splicing component to convert the adaptation parameters of the control at the native size, and the adaptation parameters are set. The adaptation parameters are applied to the adaptation process of screens of various sizes in a fixed parameter manner to achieve differentiated adaptation, so that the control appears at the desired position, specifically: Step S1, with the native size as the reference system, the size of the adaptation standard is proportionally scaled so that the short sides of the native size and the size of the adaptation standard are equal and the long sides are different sizes, and the interface effect design is performed under the native size and the proportionally scaled adaptation standard size, and the position of each control under the native size and the adaptation standard size is determined respectively, and the interface effect diagram under the two screen sizes is obtained, and the center of the control is used as the control anchor point, and the distance L from each control anchor point to the bottom edge of the native size and the distance L1 from each control anchor point to the bottom edge of the target adaptation size are obtained; Step S2, before calculating the adaptation parameters, the user first creates a new interface according to the native size, the interface includes a canvas node and a control node, and first sets the canvas node as the parent node of the control node that needs to be flexibly adapted, selects the control node that needs to be flexibly adapted and mounts a splicing component for the node, and enters the splicing parameters in the splicing component, the parameters include the native size, the size of the adaptation standard, the adaptation direction, the bottom edge distance L from the control anchor point to the native size, and the bottom edge distance L1 from the control anchor point to the target adaptation size, wherein the native size includes the long side C and the short side D, the size of the adaptation standard includes the long side A and the short side B, and the adaptation direction is Top or Bottom; Step S3: After inputting the splicing parameters, the splicing component performs the steps of calculating and setting the adaptation parameters: A. Using the input splicing parameters, the adaptation parameters of the control at the native size are obtained through the following conversion formula. The adaptation parameters include the full-screen adaptation ratio parameter S and the control anchor point offset :

[0024] ; B. Automatically insert a new node between the parent node and the control node as an avatar node, set the adaptation mode in the Rect Transform component of the avatar node to hang up, down, left, and right, and set the avatar node as a child node of the canvas node; C. Translate the avatar node according to the control anchor offset O. If the adaptation direction of the splicing component input is Top, set the control anchor offset O to the Top value in the Rect transform component of the avatar node, and set the opposite number of the control anchor offset O to the Bottom value in the Rect transform component; D. Use the control node as a child node of the canvas node, and set the adaptation mode in the Rect transform component of the control node according to the adaptation direction input by the stitching component. If the docking edge is the bottom edge, the distance L from the control anchor point to the bottom edge of the native size input by the stitching component is used as the value of PosY in the Rect transform component. If the docking edge is the top edge, the opposite of the L value is used as the value of PosY in the Rect transform component. E. Set the control node as the child node of the avatar node, and then set the adaptation mode to center adaptation in the Rect Transform component of the control node, and assign the two Y-axis parameters in the Anchors item in the Rect Transform component according to the full-screen adaptation ratio parameter S value. If the adaptation direction of the splicing component input is bottom, directly set the above two Y-axis parameters with the full-screen adaptation ratio parameter S value, and calculate the correction parameter at the same time. , and the correction parameter As an increment, it is added to the original PosY value to correct the position offset of the control. If the adaptation direction of the splicing component input is Bottom, Calculated scale parameter Set the two Y-axis parameters mentioned above and calculate the correction parameters at the same time , and the correction parameter It is added to the original PosY value as a decrement to correct the position offset of the control; F. The calculation and setting steps of the adaptation parameters are completed.

[0025] Embodiment 2 Embodiment 2 of the present invention provides a system for achieving differentiated adaptation of the position of interface controls on screens of different sizes, and the system may include: a memory, a processor, and the memory is used to store a computer program and transmit the program code to the processor. In other words, the processor can call and run the computer program from the memory to implement the method of embodiment 1 of the present application. For example, the processor can be used to execute the method of embodiment 1 according to the instructions in the computer program. In some embodiments of the present application, the processor may include but is not limited to: General-purpose processor, digital signal processor (DSP), application-specific integrated circuit (ASIC), field programmable gate array (FPGA) or other programmable logic device, discrete gate or transistor logic device, discrete hardware components, etc.

[0026] In some embodiments of the present application, the memory 710 includes, but is not limited to, volatile memory and / or non-volatile memory. Among them, the non-volatile memory may be a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), or a flash memory. The volatile memory may be a random access memory (RAM), which is used as an external cache. By way of example and not limitation, many forms of RAM are available, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate synchronous dynamic random access memory (DDR SDRAM), enhanced synchronous dynamic random access memory (ESDRAM), synchronous link DRAM (SLDRAM), and direct RAMbus RAM (DRRAM).

[0027] In some embodiments of the present application, the computer program may be divided into one or more modules, which are stored in the memory and executed by the processor to complete the method of Embodiment 1 provided by the present application. The one or more modules may be a series of computer program instruction segments capable of completing specific functions, and the instruction segments are used to describe the execution process of the computer program in the system.

[0028] Embodiment 3 Embodiment 3 of the present invention further provides a computer storage medium on which a computer program is stored. When the computer program is executed by a computer, the computer is enabled to execute the method of embodiment 1 above.

[0029] Embodiment 4 Embodiment 4 of the present invention further provides a computer program product, including a computer program / instruction, wherein the computer program / instruction implements the method of embodiment 1 above when executed by a processor.

[0030] The specific implementation methods described above further illustrate the objectives, technical solutions and beneficial effects of the present invention in detail. It should be understood that the above description is only a specific implementation method of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present invention should be included in the scope of protection of the present invention.

Claims

1. A method for achieving differentiated adaptation of interface control positions on different terminals, wherein the program development size is referred to as the native size, and the target size to be adapted is referred to as the adaptation target size, and the characteristics are: Build an embedded splicing component in the unity engine, input splicing parameters through the splicing component, convert the adaptation parameters of the control in the native size, and set the adaptation parameters. The adaptation parameters will be applied to the adaptation process of screens of various sizes in the form of fixed parameters to achieve differentiated adaptation and make the control appear in the expected position. Specifically: Step S1, with the native size as the reference system, the size of the adaptation standard is proportionally scaled so that the short sides of the native size and the size of the adaptation standard are equal and the long sides are different sizes, and the interface effect design is performed under the native size and the proportionally scaled adaptation standard size, and the position of each control under the native size and the adaptation standard size is determined respectively, and the interface effect diagram under the two screen sizes is obtained, and the center of the control is used as the control anchor point, and the distance L from each control anchor point to the bottom edge of the native size and the distance L1 from each control anchor point to the bottom edge of the target adaptation size are obtained; Step S2, before calculating the adaptation parameters, the user first creates a new interface according to the native size, the interface includes a canvas node and a control node, and first sets the canvas node as the parent node of the control node that needs to be flexibly adapted, selects the control node that needs to be flexibly adapted and mounts a splicing component for the node, and enters the splicing parameters in the splicing component, the parameters include the native size, the size of the adaptation standard, the adaptation direction, the bottom edge distance L from the control anchor point to the native size, and the bottom edge distance L1 from the control anchor point to the target adaptation size, wherein the native size includes the long side C and the short side D, the size of the adaptation standard includes the long side A and the short side B, and the adaptation direction is Top or Bottom; Step S3: After inputting the splicing parameters, the splicing component performs the steps of calculating and setting the adaptation parameters: A. Using the input splicing parameters, the adaptation parameters of the control at the native size are obtained through the following conversion formula. The adaptation parameters include the full-screen adaptation ratio parameter S and the control anchor point offset : ； B. Automatically insert a new node between the parent node and the control node as an avatar node, set the adaptation mode in the Rect Transform component of the avatar node to hang up, down, left, and right, and set the avatar node as a child node of the canvas node; C. Translate the avatar node according to the control anchor offset O. If the adaptation direction of the splicing component input is Top, set the control anchor offset O to the Top value in the Rect transform component of the avatar node, and set the opposite number of the control anchor offset O to the Bottom value in the Rect transform component; D. Use the control node as a child node of the canvas node, and set the adaptation mode in the Rect transform component of the control node according to the adaptation direction input by the stitching component. If the docking edge is the bottom edge, the distance L from the control anchor point to the bottom edge of the native size input by the stitching component is used as the value of PosY in the Rect transform component. If the docking edge is the top edge, the opposite of the L value is used as the value of PosY in the Rect transform component. E. Set the control node as the child node of the avatar node, and then set the adaptation mode to center adaptation in the Rect Transform component of the control node, and assign the two Y-axis parameters in the Anchors item in the Rect Transform component according to the full-screen adaptation ratio parameter S value. If the adaptation direction of the splicing component input is bottom, directly set the above two Y-axis parameters with the full-screen adaptation ratio parameter S value, and calculate the correction parameter at the same time. , and the correction parameter As an increment, it is added to the original PosY value to correct the position offset of the control. If the adaptation direction of the splicing component input is Bottom, Calculated scale parameter Set the two Y-axis parameters mentioned above and calculate the correction parameters at the same time , and the correction parameter It is added to the original PosY value as a decrement to correct the position offset of the control; F. The calculation and setting steps of the adaptation parameters are completed.

2. A method for achieving differentiated adaptation of interface control positions on different terminals according to claim 1, characterized in that: The interface of the stitching component is provided with input boxes for the native size and the adaptation standard size, an adaptation direction option box and a confirmation button, wherein the Native resolution input box is used to input the native size; the Target resolution input box is used to input the adaptation standard size, and there is an input item of Anchors To Bottom or Anchors ToTop under the two input boxes, which is used to input the distance between the control anchor and the hanging edge of the native size or the adaptation standard size; the adaptation direction Adaptation direction option box is used to select the adaptation direction, selecting bottom is for hanging bottom edge adaptation, and selecting top is for hanging top edge adaptation. When bottom is selected in the adaptation direction option box, the text under the above two input boxes is displayed as Anchors To Bottom, and when top is selected in the adaptation direction option box, the text under the above two input boxes is displayed as Anchors To Top.

3. A system for achieving differentiated adaptation of interface control positions on different terminals, comprising a memory, a processor, and a computer program stored in the memory, characterized in that: The processor is used to execute the computer program to implement any one of the methods of claims 1 to 2 for achieving differentiated adaptation of the position of interface controls in different terminals.

4. A computer-readable storage medium having a computer program / instruction stored thereon, characterized in that: When the computer program / instructions are executed by a processor, the method of any one of claims 1 to 2 is implemented to achieve differentiated adaptation of the position of interface controls on different terminals.

5. A computer program product comprising a computer program / instructions, characterized in that When the computer program / instructions are executed by a processor, the method of any one of claims 1 to 2 is implemented to achieve differentiated adaptation of the position of interface controls on different terminals.

Images