Rocker control display method and device, electronic equipment and computer program product

Abstract

The invention relates to a rocker control display method and device, electronic equipment and a computer program product, and belongs to the technical field of computers. The method comprises the following steps: providing a rocker control in a graphical user interface, wherein the rocker control comprises a first graph and a second graph; in response to a first operation acting on the graphical user interface, displaying a first graph at a first position corresponding to the first operation in the graphical user interface; in response to a second operation continuous with the first operation, displaying a second graph in the graphical user interface based on the display position of the first graph, so that the first graph is located in the second graph; and in response to the change of the operation position of the second operation, the second graph is controlled to deform based on the real-time change position of the operation position, and the deformation direction of the second graph corresponds to the direction of the operation position relative to the first graph. According to the invention, an interaction mode of the rocker control simulating pulling and springing of the rubber band can be provided, and resource occupation in a rocker display process is reduced.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, and in particular to a method for displaying a joystick control, a display device for a joystick control, an electronic device, and a computer program product. Background Art

[0002] Currently, in various games, the implementation technology of joysticks is single, and most of them use static joystick controls, and the operation process often does not include the dynamic performance of the joystick itself. In addition, the technology of joystick packaging mostly adopts the conventional UI (User Interface) landing method, and the animation technology in the UI is mostly sequence frame or UI attribute frame animation.

[0003] Sequence frame animation is composed of continuous images. When running, each frame of these images is played to form an animation effect. However, UI animation is relatively complex, and sequence frames occupy a large package space. In addition, the animation amplitude of the joystick is large, which requires a higher frame number, which will bring greater package overhead.

[0004] In view of this, there is an urgent need in the art for a display method of a joystick control that can reduce the resource usage during the joystick display process while providing a dynamic joystick display effect.

[0005] It should be noted that the information disclosed in the above background technology section is only used to enhance the understanding of the background of the present disclosure, and therefore may include information that does not constitute the prior art known to ordinary technicians in the field. Summary of the invention

[0006] The purpose of the present disclosure is to provide a display method of a joystick control, a display device of a joystick control, an electronic device and a computer program product, so as to reduce the resource occupation during the joystick display process while providing a dynamic joystick display effect to a certain extent at least.

[0007] According to a first aspect of the present disclosure, a method for displaying a joystick control is provided, wherein a graphical user interface is provided through a terminal device, and the method comprises:

[0008] providing a joystick control in the graphical user interface, wherein the joystick control includes a first graphic and a second graphic;

[0009] In response to a first operation performed on the graphical user interface, displaying the first graphic at a first position corresponding to the first operation in the graphical user interface;

[0010] In response to a second operation that is continuous with the first operation, displaying the second graphic in the graphical user interface based on the display position of the first graphic so that the first graphic is located inside the second graphic;

[0011] In response to a change in the operation position of the second operation on the graphical user interface, the second graphic is controlled to deform based on the real-time change in the operation position, wherein the deformation direction of the second graphic corresponds to the direction of the operation position relative to the first graphic.

[0012] According to a second aspect of the present disclosure, a display device for a joystick control is provided, which provides a graphical user interface through a terminal device, and the device includes:

[0013] A joystick control providing module, configured to provide a joystick control in the graphical user interface, wherein the joystick control includes a first graphic and a second graphic;

[0014] A first graphic display module, configured to respond to a first operation applied to the graphical user interface and display the first graphic at a first position corresponding to the first operation in the graphical user interface;

[0015] A second graphic display module, configured to respond to a second operation that is continuous with the first operation, and display the second graphic in the graphical user interface based on a display position of the first graphic, so that the first graphic is located inside the second graphic;

[0016] A second graphic deformation module is used to respond to the change of the operation position of the second operation on the graphical user interface, and control the deformation of the second graphic based on the real-time change of the operation position, wherein the deformation direction of the second graphic corresponds to the direction of the operation position relative to the first graphic.

[0017] According to a third aspect of the present disclosure, there is provided an electronic device, comprising: a processor; and a memory for storing executable instructions of the processor; wherein the processor is configured to execute any one of the above-described methods for displaying a joystick control by executing the executable instructions.

[0018] According to a fourth aspect of the present disclosure, a computer program product is provided, including a computer program, wherein when the computer program is executed by a processor, the method for displaying a joystick control described in any one of the above is implemented.

[0019] The exemplary embodiments of the present disclosure may have the following beneficial effects:

[0020] In the display method of the joystick control of the exemplary embodiment of the present disclosure, a joystick control is provided in a graphical user interface, wherein the joystick control includes a first graphic and a second graphic. In response to a first operation acting on the graphical user interface, the first graphic is displayed at a first position corresponding to the first operation, and in response to a second operation continuous with the first operation, the second graphic is displayed in the graphical user interface based on the display position of the first graphic so that the first graphic is located inside the second graphic, and in response to the operation position of the second operation changing on the graphical user interface, the second graphic is controlled to deform based on the real-time change position of the operation position, wherein the deformation direction of the second graphic corresponds to the direction of the operation position relative to the first graphic. The display method of the joystick control in the example implementation of the present disclosure can, on the one hand, provide an innovative interaction mode of the joystick control that simulates the pulling and bouncing of a rubber band, and provide control deformation performance of corresponding strength for pulling operations of different strengths, thereby ensuring a smooth transition performance in each state of the joystick, restoring dynamic effects similar to the pulling and bouncing of a rubber band, and greatly improving the user's interactive experience; on the other hand, compared with the conventional sequence frame approach, it can reduce the resource usage during the joystick display process and greatly improve the resource usage ratio, thereby improving the operation smoothness and reducing the operation jam.

[0021] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] The accompanying drawings herein are incorporated into the specification and constitute a part of the specification, illustrate embodiments consistent with the present disclosure, and together with the specification are used to explain the principles of the present disclosure. Obviously, the accompanying drawings described below are only some embodiments of the present disclosure, and for ordinary technicians in this field, other accompanying drawings can be obtained based on these accompanying drawings without creative work.

[0023] Figure 1 A schematic diagram showing an exemplary system architecture of a method and device for displaying a joystick control to which the embodiments of the present disclosure can be applied;

[0024] Figure 2 A schematic diagram showing a flow chart of a method for displaying a joystick control according to an exemplary embodiment of the present disclosure;

[0025] Figure 3 A schematic diagram of a process of controlling the deformation of a second graphic according to an exemplary embodiment of the present disclosure is shown;

[0026] Figure 4 A schematic diagram showing a flow chart of determining an auxiliary circle for controlling the display shape of a second graphic according to an exemplary embodiment of the present disclosure;

[0027] Figure 5A schematic diagram of an input map in accordance with a specific embodiment of the present disclosure is schematically shown;

[0028] Figure 6 A schematic diagram of a process flow of second graphics input texture sampling according to a specific embodiment of the present disclosure is shown;

[0029] Figure 7 A schematic diagram of a process of displaying a deformation animation preset for a second graphic according to an exemplary embodiment of the present disclosure is shown;

[0030] Figure 8 A schematic diagram showing a flow chart of a method for displaying the outer ring portion of a joystick control according to a specific implementation of the present disclosure is shown;

[0031] Fig. 9 A schematic diagram of a joystick control in accordance with a specific embodiment of the present disclosure is schematically shown;

[0032] Fig.10 A block diagram showing a display device of a joystick control according to an exemplary embodiment of the present disclosure;

[0033] Fig.11 A schematic diagram of the structure of a computer system suitable for implementing the electronic device of the embodiment of the present disclosure is shown. DETAILED DESCRIPTION

[0034] Example embodiments will now be described more fully with reference to the accompanying drawings. However, example embodiments can be implemented in a variety of forms and should not be construed as being limited to the examples set forth herein; on the contrary, these embodiments are provided so that the present disclosure will be more comprehensive and complete, and the concepts of the example embodiments are fully conveyed to those skilled in the art. The described features, structures, or characteristics may be combined in one or more embodiments in any suitable manner. In the following description, many specific details are provided to provide a full understanding of the embodiments of the present disclosure. However, those skilled in the art will appreciate that the technical solutions of the present disclosure may be practiced while omitting one or more of the specific details, or other methods, components, devices, steps, etc. may be adopted. In other cases, known technical solutions are not shown or described in detail to avoid obscuring various aspects of the present disclosure.

[0035] In addition, the accompanying drawings are only schematic illustrations of the present disclosure and are not necessarily drawn to scale. The same reference numerals in the figures represent the same or similar parts, and their repeated description will be omitted. Some of the block diagrams shown in the accompanying drawings are functional entities and do not necessarily correspond to physically or logically independent entities. These functional entities can be implemented in software form, or implemented in one or more hardware modules or integrated circuits, or implemented in different networks and / or processor devices and / or microcontroller devices.

[0036] Figure 1 A schematic diagram of a system architecture of an exemplary application environment to which a method and apparatus for displaying a joystick control according to an embodiment of the present disclosure can be applied is shown.

[0037] like Figure 1 As shown, the system architecture 100 may include multiple terminal devices 101, 102, 103, a network 104, and a server 105. The network 104 is used to provide a medium for communication links between the terminal devices 101, 102, 103 and the server 105. The network 104 may include various connection types, such as wireless communication links, etc.

[0038] It should be understood that Figure 1 The number of terminal devices, networks and servers in the embodiment is only for illustration. According to the implementation requirements, there may be any number of terminal devices, networks and servers. For example, the server 105 may be a server cluster composed of multiple servers.

[0039] The terminal devices 101, 102, and 103 may be various electronic devices with processors, including but not limited to smart phones, tablet computers, portable computers, and the like. The server 105 may be a server that provides various services. For example, the terminal devices 101, 102, and 103 may provide a joystick control in a graphical user interface through a processor, and in response to a first operation acting on the graphical user interface, display a first graphic at a first position corresponding to the first operation in the graphical user interface; in response to a second operation continuous with the first operation, display a second graphic in the graphical user interface based on the display position of the first graphic. The server 105 may control the second graphic to deform based on the real-time change position of the operation position. The terminal devices 101, 102, and 103 may also complete the entire process from providing a joystick control in the graphical user interface to changing the operation position on the graphical user interface in response to the second operation, and controlling the second graphic to deform based on the real-time change position of the operation position through a processor.

[0040] The display method of the joystick control in one embodiment of the present disclosure can be run on a local terminal device or a server. When the display method of the joystick control is run on a server, the method can be implemented and executed based on a cloud interaction system, wherein the cloud interaction system includes a server and a client device.

[0041] In an optional embodiment, various cloud applications can be run under the cloud interaction system, such as cloud games. Taking cloud games as an example, cloud games refer to a game method based on cloud computing. In the operation mode of cloud games, the operating body of the game program and the main body of the game screen presentation are separated. The storage and operation of the display method of the joystick control are completed on the cloud game server. The role of the client device is used for receiving and sending data and presenting the game screen. For example, the client device can be a display device with data transmission function close to the user side, such as a mobile terminal, a TV, a computer, a handheld computer, etc.; but the cloud game server in the cloud is used for information processing. When playing the game, the user operates the client device to send an operation instruction to the cloud game server. The cloud game server runs the game according to the operation instruction, encodes and compresses the game screen and other data, and returns it to the client device through the network. Finally, the client device decodes and outputs the game screen.

[0042] In an optional embodiment, taking a game as an example, a local terminal device stores a game program and is used to present a game screen. The local terminal device is used to interact with the user through a graphical user interface, that is, the game program is downloaded and installed by an electronic device and run conventionally. The local terminal device may provide the graphical user interface to the user in a variety of ways, for example, it may be rendered and displayed on a display screen of the terminal, or provided to the user through a holographic projection. For example, the local terminal device may include a display screen and a processor, the display screen is used to present a graphical user interface, the graphical user interface includes a game screen, and the processor is used to run the game, generate a graphical user interface, and control the display of the graphical user interface on the display screen.

[0043] In a possible implementation, an embodiment of the present disclosure provides a method for displaying a joystick control, providing a graphical user interface through a terminal device, wherein the terminal device may be the local terminal device mentioned above, or may be a client device in the cloud interaction system mentioned above.

[0044] This example implementation first provides a method for displaying a joystick control, which provides a graphical user interface through a terminal device. Figure 2 As shown, the above-mentioned method for displaying the joystick control may include the following steps:

[0045] Step S210: Provide a joystick control in the graphical user interface, wherein the joystick control includes a first graphic and a second graphic.

[0046] Step S220: In response to a first operation performed on the graphical user interface, a first graphic is displayed at a first position in the graphical user interface corresponding to the first operation.

[0047] Step S230. In response to a second operation that is continuous with the first operation, display a second graphic in the graphical user interface based on the display position of the first graphic, so that the first graphic is located inside the second graphic.

[0048] Step S240: In response to a change in the operation position of the second operation on the graphical user interface, the second graphic is controlled to deform based on the real-time change in the operation position.

[0049] The deformation direction of the second figure corresponds to the direction of the operation position relative to the first figure.

[0050] The display method of the joystick control in the example implementation of the present disclosure can, on the one hand, provide an innovative interactive mode of the joystick control that simulates the pulling and bouncing of a rubber band, and provide corresponding control deformation performance for pulling operations of different strengths, ensuring smooth transition performance in each state of the joystick, restoring dynamic effects similar to the pulling and bouncing of a rubber band, and greatly improving the user's interactive experience; on the other hand, compared with the conventional sequence frame method, it can reduce the resource usage during the joystick display process, greatly improve the resource usage ratio, thereby improving the operation smoothness and reducing the operation jam. Next, combined with Figures 3 to 9 The above steps of this exemplary embodiment are described in more detail.

[0051] In step S210, a joystick control is provided in a graphical user interface, wherein the joystick control includes a first graphic and a second graphic.

[0052] In this example implementation, the joystick control refers to an operation control used to control the operation direction in the game, such as a moving joystick or a skill joystick, and the joystick control can be used to control the movement direction of the game object or the direction of skill release. The user can control the game object to move in the corresponding direction or control the game skill to be released in the corresponding direction by pressing the joystick control and dragging it in different directions.

[0053] In this example implementation, the joystick control may include a first graphic and a second graphic, wherein the first graphic refers to an inner circle graphic of the joystick control, and the second graphic refers to an outer circle graphic of the joystick control. Before the user touches the joystick control, the joystick control may be in a transparent state to avoid blocking the game screen.

[0054] In step S220, in response to a first operation performed on the graphical user interface, a first graphic is displayed at a first position corresponding to the first operation in the graphical user interface.

[0055] In this example implementation, the first position is a specified position in the graphical user interface, and the first graphic is a specified shape.

[0056] The first operation refers to a touch operation acting on the graphical user interface. When the user's finger touches the graphical user interface, the first graphic of the joystick control, i.e., the inner circle graphic, is displayed at the first position corresponding to the first operation in the graphical user interface, wherein the first graphic is a specified shape, such as a circular shape.

[0057] In this example implementation, the transparency parameter of the first graphic can be determined based on the distance between the operation position corresponding to the first operation and the center of the joystick control, and the first graphic can be displayed at the first position corresponding to the first operation in the graphical user interface based on the transparency parameter.

[0058] The inner circle graphics of the joystick control can gradually reduce the transparency as the operation position corresponding to the first operation moves away from the center of the joystick control. Therefore, the transparency parameter of the first graphic can be determined based on the distance between the operation position corresponding to the first operation and the center of the joystick control, and then the first graphic can be displayed at the first position corresponding to the first operation in the graphical user interface based on the transparency parameter. The farther the distance between the operation position corresponding to the first operation and the center of the joystick control is, the higher the transparency of the first graphic.

[0059] In step S230, in response to a second operation that is continuous with the first operation, a second graphic is displayed in the graphical user interface based on the display position of the first graphic, so that the first graphic is located inside the second graphic.

[0060] In this example implementation, the second operation refers to a sliding operation continuous with the first operation. When the user's finger begins to slide on the graphical user interface, the second graphic of the joystick control, that is, the outer circle graphic, can be displayed based on the display position of the first graphic. The original shape of the outer circle graphic is a circular ring shape. At this time, the first graphic and the second graphic are displayed at the same time, and the first graphic is located inside the second graphic. Specifically, the first graphic is located at the geometric center of the second graphic.

[0061] In step S240, in response to the operation position of the second operation changing on the graphical user interface, the second graphic is controlled to deform based on the real-time change of the operation position.

[0062] The deformation direction of the second figure corresponds to the direction of the operation position relative to the first figure.

[0063] In this example implementation, when the second operation reaches a certain position, the outer ring graphic of the joystick control will deform according to the real-time change position of the operation position, producing a dynamic shape change similar to the elasticity of a rubber band. The real-time change position of the operation position of the second operation can be determined according to the touch coordinates of the touch point. The touch coordinates x, y input by the user will be mapped to the local space of the UI space, and then mapped to the interval of [-1, 1] and passed to the shader.

[0064] In this example implementation, in response to the deformation of the second graphic, the first graphic is cancelled from being displayed in the graphical user interface. When the outer circle graphic begins to deform, the inner circle graphic is cancelled from being displayed, and only the deformed second graphic is displayed on the graphical user interface.

[0065] In this example implementation, Figure 3 As shown, the second graphic is controlled to deform based on the real-time change position of the operation position, which may specifically include the following steps:

[0066] Step S310: Determine the positional relationship between the operation position and a critical circle preset in the joystick control, and determine an auxiliary circle for controlling the display shape of the second graphic according to the positional relationship.

[0067] In the joystick control, a joystick radius threshold can be preset, and a critical circle preset in the joystick control can be determined according to the geometric center of the joystick control and the joystick radius threshold. According to the positional relationship between the operation position and the critical circle, an auxiliary circle for controlling the display shape of the second graphic can be determined, wherein the auxiliary circle is used to merge with the original shape of the outer circle graphic to assist in generating the deformed outer circle graphic.

[0068] In this example implementation, Figure 4 As shown, determining the auxiliary circle for controlling the display shape of the second graphic according to the positional relationship may specifically include the following steps:

[0069] Step S410. Determine the auxiliary circle radius of an auxiliary circle for controlling the display shape of the second graphic according to the distance between the operation position and the critical circle, wherein the auxiliary circle radius is proportional to the distance.

[0070] The farther the distance between the operating position and the critical circle is, the greater the pulling degree of the outer circle shape of the rocker is, and therefore, the larger the radius of the auxiliary circle is.

[0071] Step S420: Determine the type of the auxiliary circle according to the positional relationship between the operation position and the critical circle.

[0072] In this exemplary implementation, if the operation position is within the critical circle, the auxiliary circle is a subtraction circle outside the second figure; if the operation position is outside the critical circle, the auxiliary circle is a fusion circle inside the second figure.

[0073] If the operation position is within the critical circle, a subtraction circle is provided on the outside of the second figure to subtract from the outer circle figure to achieve a rebound effect; if the operation position is outside the critical circle, a fusion circle is provided on the inside of the second figure to merge with the outer circle figure to achieve a pulling effect.

[0074] Step S320: Determine the signed distance field corresponding to each pixel point on the second graphic according to the auxiliary circle, and obtain the output color value of each pixel point according to the signed distance field.

[0075] In this example implementation, the outer ring graphics of the joystick control can be drawn using SDF (signed distance field). In the fragment shader, the smooth fusion characteristics of the signed distance field function are used to simulate the elastic effect like a rubber band.

[0076] In this example implementation, if the auxiliary circle is a subtraction circle outside the second figure, a signed distance field subtraction operation is performed on the pixels on the second figure and the subtraction circle according to the first fusion factor to obtain a signed distance field corresponding to each pixel on the second figure.

[0077] Through the sdf subtract (signed distance field subtraction) operation, the subtraction circle located outside the second shape is subtracted from the original shape of the outer circle to achieve the rebound effect. As the operation position moves further away, the fusion factor and the radius of the subtraction circle will also increase.

[0078] In this example implementation, if the auxiliary circle is a fusion circle inside the second graphic, a signed distance field fusion operation is performed on the pixels on the second graphic and the fusion circle according to the second fusion factor to obtain a signed distance field corresponding to each pixel on the second graphic.

[0079] Through the sdf union (signed distance field union) operation, the fusion circle located inside the second shape is merged with the original shape of the outer circle to achieve a pulling effect. As the operation position moves further away, the fusion factor and the radius of the fusion circle will also increase.

[0080] When the operating position is pulled back and forth inside and outside the critical circle over time, the effect of rubber band pulling and rebounding can be simulated.

[0081] In this example implementation, if the signed distance field corresponding to the pixel point is less than or equal to the display threshold, the input map is sampled according to the distance between the pixel point and the center of the joystick control to obtain the output color value of the pixel point;

[0082] Figure 5The schematic diagram of the input map in a specific embodiment of the present disclosure is schematically shown. In this example embodiment, the input texture of the shader has only one image. The upper half of the image is a long strip from left to right, which is the style of the outer ring of the joystick at different radii, and the lower half is the style of the inner ring solid joystick. The input texture and style conform to the visual interactive packaging like a rubber band. Figure 5 The lower half of the image is the style of the solid inner circle joystick. The image style can be drawn by sampling the lower half of the input texture in the shader.

[0083] In order to control the style of the outer circle, the upper half of the input texture from left to right can be understood as the style of the outer circle drawn at different radii. According to the output of the SDF function, the upper half of the texture is sampled to obtain the output of the outer circle.

[0084] Step S330: Display the second graphic on the graphical user interface according to the output color value of each pixel point to control the second graphic to deform.

[0085] Finally, according to the output color value of each pixel point, a second graphic of the joystick control is drawn on the graphical user interface to control the deformation of the second graphic.

[0086] In this example implementation, if the signed distance field corresponding to a pixel point is greater than a display threshold, the pixel point does not output a color.

[0087] Figure 6 The schematic diagram of the process of sampling the second graphic input texture according to a specific embodiment of the present disclosure is schematically shown. Figure 601 is a schematic diagram of subtracting the subtraction circle outside the second graphic from the original shape of the second graphic, and Figure 602 is a schematic diagram of fusing the fusion circle inside the second graphic with the original shape of the second graphic. After fusion, the outer circle input map of Figure 603 is sampled to obtain the output color value of the pixel point, and the outer circle part of the joystick is obtained, thereby obtaining a complete joystick control 604.

[0088] In this example implementation, in response to the second operation ending, a deformation animation preset for the second graphic may be displayed on the graphical user interface.

[0089] In this example implementation, Figure 7 As shown, displaying the deformation animation preset for the second graphic on the graphical user interface may specifically include the following steps:

[0090] Step S710: Obtain the end time of the second operation and the touch point coordinates corresponding to the end time.

[0091] When the user's finger leaves the touch interface, the joystick control is in a non-touch state. At this time, the time when the user's finger leaves the screen is obtained, that is, the state transition moment when the joystick control changes from the touch state to the non-touch state. The time when the user's finger leaves the screen and the touch coordinates at the time of leaving are passed to the shader as parameters.

[0092] Step S720: Determine the control point coordinates corresponding to the control point of the second graphic according to the touch point coordinates corresponding to the end time, the end time and the current time.

[0093] The control point of the second figure refers to a virtual control point of the outer circle shape of the control stick. When the joystick is converted from a touch state to a non-touch state, the control point coordinates corresponding to the control point can be determined according to the touch point coordinates corresponding to the touch end moment.

[0094] In this example implementation, the touch point coordinates corresponding to the end time, the end time and the current time may be input into a preset oscillation function to obtain the control point coordinates corresponding to the control point of the second graphic.

[0095] When the user's finger leaves the screen, the joystick will enter an oscillation state. A preset oscillation function, such as t / sin(t), can be used in the shader. Through the signal of the oscillation function, an oscillation control point is generated based on the last input point to control the oscillation state of the outer circle shape.

[0096] Step S730: Determine the positional relationship between the control point and a critical circle preset in the joystick control according to the coordinates of the control point, and determine an auxiliary circle for controlling the display shape of the second graphic according to the positional relationship.

[0097] According to the distance between the operation position and the critical circle, the auxiliary circle radius of the auxiliary circle used to control the display shape of the second graphic is determined, wherein the auxiliary circle radius is proportional to the distance. According to the positional relationship between the operation position and the critical circle, the type of the auxiliary circle is determined. If the operation position is within the critical circle, the auxiliary circle is a subtraction circle outside the second graphic; if the operation position is outside the critical circle, the auxiliary circle is a fusion circle inside the second graphic.

[0098] Step S740: Displaying a preset deformation animation for the second graphic on the graphical user interface according to the auxiliary circle.

[0099] The signed distance field corresponding to each pixel point on the second graphic is determined according to the auxiliary circle, and the output color value of each pixel point is obtained according to the signed distance field, and then the deformation animation preset for the second graphic is displayed on the graphical user interface according to the output color value of each pixel point. The specific steps are similar to the above method and will not be repeated here.

[0100] like Figure 8The figure is a complete flow chart of a method for displaying the outer ring part of a joystick control in a specific implementation mode of the present disclosure, which is an example of the above steps in this example implementation mode. The specific steps of the flow chart are as follows:

[0101] Step S802: Receive input coordinates.

[0102] Step S804: Determine the joystick pressing state.

[0103] If the finger is released at the current moment, go to step S806; if the finger is already in the state of being released at the current moment, go to step S808; if the finger is in the state of being pressed at the current moment, go to step S810.

[0104] Step S806: Record the timestamp and coordinates of finger release.

[0105] Step S808: Calculate the coordinates of the control point according to the current time and the finger release time.

[0106] Use a preset oscillation function, such as t / sin(t), to generate an oscillation control point based on the last input point to control the oscillation state of the outer ring joystick.

[0107] Step S810: The control point moves to the finger touch coordinates.

[0108] Step S812: Radius threshold determination.

[0109] If the control point is within the radius threshold, the process proceeds to step S814; if the control point is outside the radius threshold, the process proceeds to step S818.

[0110] Step S814: Calculate the radius of the subtraction circle according to the control point's radius threshold.

[0111] Step S816: Use SDF subtraction operation to obtain the SDF value of the pixel point.

[0112] Step S818: Calculate the radius of the fusion circle based on the control point to the radius threshold.

[0113] Step S820: Use the SDF fusion operation to obtain the SDF value of the pixel point.

[0114] Step S822: SDF threshold determination.

[0115] If the SDF value is within the threshold, proceed to step S824; if the SDF value is outside the threshold, proceed to step S826.

[0116] Step S824: Sample the input map output color according to the distance of the pixel from the center.

[0117] Step S826: Skip coloring of this pixel.

[0118] Step S828: Display the outer ring of the joystick.

[0119] Fig. 9 The schematic diagram of a joystick control in a specific embodiment of the present disclosure is schematically shown, and the drawing of the joystick is divided into inner and outer solid parts and the rubber band part of the outer circle. Figure 901 is a schematic diagram of the joystick being pulled outward, and Figure 902 is a schematic diagram of rebounding. The inner circle fixes the overall shape, and the outer circle serves as the main body of the rubber band pulling and bouncing interaction.

[0120] During the display process of the joystick control, the adjustable parameters include: the offset of the entire output, the mouse input, the maximum distance of the control point, the touch release time, the width of the inner circle, the attenuation coefficient of the simulated bounce function, the touch start time, the radius threshold at which the control point starts to have a fading effect, the attenuation start time, the radius threshold at which the outer circle starts to enlarge, the radius threshold at which the outer circle starts to pull, the inner circle radius, the radius threshold at which the middle circle can transition to the outer circle, the position of the inner circle sampling, the farthest distance controlled by the control point under the bounce function, the attenuation speed, the radius of the fusion circle, the radius of the subtraction circle, the coefficient of the fusion function, the frequency of the bounce function, whether to display debugging, the output amplification coefficient, the width coefficient of the outer circle, the bounce strength, the distance control parameter of the subtraction circle, the inner sampling width of the inner circle, the outer sampling width of the inner circle, the width of the inner circle, the sampling width of the outer circle, etc. Other adjustable parameters can also be set according to actual needs, and are not specifically limited in the present example implementation.

[0121] It should be noted that although the steps of the method in the present disclosure are described in a specific order in the drawings, this does not require or imply that the steps must be performed in this specific order, or that all the steps shown must be performed to achieve the desired results. Additionally or alternatively, some steps may be omitted, multiple steps may be combined into one step, and / or one step may be decomposed into multiple steps, etc.

[0122] Furthermore, the present disclosure also provides a display device for a joystick control. Fig.10 As shown, the display device of the joystick control may include a joystick control providing module 1010, a first graphic display module 1020, a second graphic display module 1030 and a second graphic deformation module 1040. Among them:

[0123] The joystick control providing 1010 may be used to provide a joystick control in a graphical user interface, wherein the joystick control includes a first graphic and a second graphic;

[0124] The first graphic display module 1020 may be configured to respond to a first operation on the graphical user interface and display a first graphic at a first position in the graphical user interface corresponding to the first operation;

[0125] The second graphic display module 1030 may be used to respond to a second operation that is continuous with the first operation, and display the second graphic in the graphical user interface based on the display position of the first graphic so that the first graphic is located inside the second graphic;

[0126] The second graphic deformation module 1040 can be used to respond to changes in the operation position of the second operation on the graphical user interface, and control the second graphic to deform based on the real-time change of the operation position, wherein the deformation direction of the second graphic corresponds to the direction of the operation position relative to the first graphic.

[0127] In some exemplary embodiments of the present disclosure, a display device for a joystick control provided by the present disclosure may further include a deformation animation display module, which may be used to display a deformation animation preset for the second graphic in a graphical user interface in response to the completion of the second operation.

[0128] In some exemplary embodiments of the present disclosure, a display device of a joystick control provided by the present disclosure may further include a first graphic display cancellation module, which may be used to cancel display of the first graphic in the graphical user interface in response to deformation of the second graphic.

[0129] In some exemplary embodiments of the present disclosure, the first position is a designated position in a graphical user interface, and the first graphic is a designated shape.

[0130] In some exemplary embodiments of the present disclosure, the second graphic deformation module 1040 may include an auxiliary circle determination unit, an output color value determination unit, and a deformation control unit.

[0131] The auxiliary circle determination unit may be used to determine a positional relationship between the operation position and a critical circle preset in the joystick control, and determine an auxiliary circle for controlling a display shape of the second graphic according to the positional relationship;

[0132] The output color value determination unit may be used to determine the signed distance field corresponding to each pixel point on the second graphic according to the auxiliary circle, and obtain the output color value of each pixel point according to the signed distance field;

[0133] The deformation control unit can be used to display the second graphic on the graphical user interface according to the output color value of each pixel point, so as to control the deformation of the second graphic.

[0134] In some exemplary embodiments of the present disclosure, the auxiliary circle determination unit may include an auxiliary circle radius determination unit and an auxiliary circle type determination unit.

[0135] The auxiliary circle radius determination unit may be used to determine the auxiliary circle radius of the auxiliary circle used to control the display shape of the second graphic according to the distance between the operation position and the critical circle, wherein the auxiliary circle radius is proportional to the distance;

[0136] The auxiliary circle type determination unit may be configured to determine the type of the auxiliary circle according to a positional relationship between the operating position and the critical circle.

[0137] In some exemplary embodiments of the present disclosure, the auxiliary circle type determination unit may include a subtraction circle determination unit and a fusion circle determination unit.

[0138] The subtraction circle determination unit may be used to determine that if the operation position is within the critical circle, the auxiliary circle is a subtraction circle outside the second figure;

[0139] The fusion circle determination unit may be used to determine that if the operation position is outside the critical circle, the auxiliary circle is the fusion circle inside the second figure.

[0140] In some exemplary embodiments of the present disclosure, the output color value determination unit may include a distance field subtraction unit and a distance field fusion unit.

[0141] The distance field subtraction unit may be used to perform a signed distance field subtraction operation on the second graphic and the pixel points on the subtraction circle according to the first fusion factor if the auxiliary circle is a subtraction circle outside the second graphic, so as to obtain a signed distance field corresponding to each pixel point on the second graphic;

[0142] The distance field fusion unit can be used to perform a signed distance field fusion operation on the pixels on the second graphic and the fusion circle according to a second fusion factor if the auxiliary circle is a fusion circle inside the second graphic, so as to obtain a signed distance field corresponding to each pixel on the second graphic.

[0143] In some exemplary embodiments of the present disclosure, the output color value determination unit may further include an input map sampling unit and a pixel point skipping unit.

[0144] The input texture sampling unit may be used to sample the input texture according to the distance between the pixel and the center of the joystick control to obtain the output color value of the pixel if the signed distance field corresponding to the pixel is less than or equal to the display threshold;

[0145] The pixel skipping unit can be used to prevent the pixel from outputting color if the signed distance field corresponding to the pixel is greater than a display threshold.

[0146] In some exemplary embodiments of the present disclosure, the deformation animation display module may include an end time determination unit, a control point coordinate determination unit, a second auxiliary circle determination unit, and a deformation animation display unit.

[0147] The end time determination unit may be used to obtain the end time of the second operation and the touch point coordinates corresponding to the end time;

[0148] The control point coordinate determination unit may be used to determine the control point coordinates corresponding to the control point of the second graphic according to the touch point coordinates corresponding to the end time, the end time and the current time;

[0149] The second auxiliary circle determination unit may be used to determine the positional relationship between the control point and a critical circle preset in the joystick control according to the coordinates of the control point, and determine the auxiliary circle for controlling the display shape of the second graphic according to the positional relationship;

[0150] The deformation animation display unit can be used to display a deformation animation preset for the second graphic on the graphical user interface according to the auxiliary circle.

[0151] In some exemplary embodiments of the present disclosure, the control point coordinate determination unit may include an oscillation function calculation unit, which can be used to input the touch point coordinates corresponding to the end time as well as the end time and the current time into a preset oscillation function to obtain the control point coordinates corresponding to the control point of the second graphic.

[0152] In some exemplary embodiments of the present disclosure, the first graphic display module 1020 may include a transparency parameter determination unit and a first graphic display unit.

[0153] The transparency parameter determination unit may be used to determine the transparency parameter of the first graphic according to the distance between the operation position corresponding to the first operation and the center of the joystick control;

[0154] The first graphic display unit may be configured to display a first graphic at a first position corresponding to the first operation in the graphical user interface according to the transparency parameter.

[0155] The specific details of each module / unit in the display device of the above-mentioned joystick control have been described in detail in the corresponding method embodiment part, and will not be repeated here.

[0156] It should be noted that, although several modules or units of the device for action execution are mentioned in the above detailed description, this division is not mandatory. In fact, according to the exemplary embodiments of the present disclosure, the features and functions of two or more modules or units described above can be embodied in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided into multiple modules or units to be embodied.

[0157] Fig.11 A schematic diagram of the structure of a computer system suitable for implementing an electronic device of an embodiment of the present disclosure is shown.

[0158] It should be noted that Fig.11 The computer system 1100 of the electronic device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present disclosure.

[0159] like Fig.11 As shown, the computer system 1100 includes a central processing unit (CPU) 1101, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 1102 or a program loaded from a storage part 1108 into a random access memory (RAM) 1103. Various programs and data required for system operation are also stored in the RAM 1103. The CPU 1101, the ROM 1102, and the RAM 1103 are connected to each other via a bus 1104. An input / output (I / O) interface 1105 is also connected to the bus 1104.

[0160] The following components are connected to the I / O interface 1105: an input section 1106 including a keyboard, a mouse, etc.; an output section 1107 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 1108 including a hard disk, etc.; and a communication section 1109 including a network interface card such as a LAN card, a modem, etc. The communication section 1109 performs communication processing via a network such as the Internet. A drive 1110 is also connected to the I / O interface 1105 as needed. A removable medium 1111, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 1110 as needed, so that a computer program read therefrom is installed into the storage section 1108 as needed.

[0161] In particular, according to an embodiment of the present disclosure, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present disclosure includes a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program contains a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication part 1109, and / or installed from a removable medium 1111. When the computer program is executed by a central processing unit (CPU) 1101, various functions defined in the system of the present disclosure are executed.

[0162] The exemplary embodiments of the present disclosure also provide a computer program product, which includes a computer program, and when the computer program is executed by a processor, the display method of the joystick control is implemented.

[0163] In one embodiment, the computer program product may be a tangible product containing a computer program, such as a computer-readable storage medium storing a computer program. The readable storage medium may be a storage medium based on electrical, magnetic, optical, electromagnetic, infrared, or other signals, including but not limited to: random access memory (RAM), read-only memory (ROM), magnetic tape, floppy disk, flash memory (Flash), mechanical hard disk (HDD), solid-state drive (SSD), and the like. Exemplarily, the computer program product may be implemented as a non-volatile storage medium storing a computer program, such as a read-only memory, a NAND flash memory, and the like.

[0164] In one embodiment, the computer program product may be an intangible product including a computer program. Exemplarily, the computer program product may be implemented as a virtual digital product, such as a digital file storing an executable file, an installation package, etc. of the computer program.

[0165] The code of the computer program can be written in one or more programming languages. Programming languages ​​such as C language, Java, C++, etc. The program code can be executed entirely on the user computing device, or partially on the user computing device, or as a separate software package, or partially on the user computing device and partially on a remote computing device, or entirely on a remote computing device or server. In the case of a remote computing device, the remote computing device can be connected to the user computing device through any type of network, such as a local area network (LAN), a wide area network (WAN), etc., or can be connected to an external computing device (e.g., an Internet connection provided by an operator).

[0166] The computer program may be carried or transmitted via electrical, magnetic, optical, electromagnetic, infrared, or other signals. The electronic device may convert the signal carrying the computer program into a digital signal, thereby running the computer program. When the computer program is run on an electronic device, its code is used to enable the electronic device to execute (more specifically, the processor of the electronic device may execute) the method steps of various exemplary embodiments of the present disclosure, such as the display method of the above-mentioned joystick control.

[0167] The flow charts and block diagrams in the accompanying drawings illustrate the possible architecture, functions and operations of the systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each box in the flow chart or block diagram can represent a module, a program segment, or a part of a code, and the above-mentioned module, program segment, or a part of a code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flow chart, and the combination of the boxes in the block diagram or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0168] It should be noted that, although several modules of the device for action execution are mentioned in the above detailed description, this division is not mandatory. In fact, according to the embodiments of the present disclosure, the features and functions of two or more modules described above can be concretized in one module. Conversely, the features and functions of one module described above can be further divided into multiple modules to be concretized.

[0169] Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing the invention disclosed herein. The present disclosure is intended to cover any variations, uses or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary technical means in the art that are not disclosed in the present disclosure.

[0170] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A method for displaying a joystick control, characterized in that: Providing a graphical user interface through a terminal device, the method comprising: providing a joystick control in the graphical user interface, wherein the joystick control includes a first graphic and a second graphic; In response to a first operation performed on the graphical user interface, displaying the first graphic at a first position corresponding to the first operation in the graphical user interface; In response to a second operation that is continuous with the first operation, displaying the second graphic in the graphical user interface based on the display position of the first graphic so that the first graphic is located inside the second graphic; In response to a change in the operation position of the second operation on the graphical user interface, the second graphic is controlled to deform based on the real-time change in the operation position, wherein the deformation direction of the second graphic corresponds to the direction of the operation position relative to the first graphic.

2. The method for displaying a joystick control according to claim 1, characterized in that: The method further comprises: In response to the second operation being completed, a deformation animation preset for the second graphic is displayed on the graphical user interface.

3. The method for displaying a joystick control according to claim 1, characterized in that: The method further comprises: In response to the second graphic being deformed, the first graphic is cancelled from being displayed in the graphical user interface.

4. The method for displaying a joystick control according to claim 1, characterized in that: The first position is a specified position in the graphical user interface, and the first graphic is a specified shape.

5. The method for displaying a joystick control according to claim 1, characterized in that: The controlling the second graphic to deform based on the real-time position change of the operation position includes: Determining a positional relationship between the operation position and a critical circle preset in the joystick control, and determining an auxiliary circle for controlling a display shape of the second graphic according to the positional relationship; Determine a signed distance field corresponding to each pixel point on the second graphic according to the auxiliary circle, and obtain an output color value of each pixel point according to the signed distance field; The second graphic is displayed on the graphical user interface according to the output color value of each of the pixel points, so as to control the deformation of the second graphic.

6. The method for displaying a joystick control according to claim 5, characterized in that: The step of determining the auxiliary circle for controlling the display shape of the second graphic according to the positional relationship includes: Determining, according to the distance between the operation position and the critical circle, an auxiliary circle radius of an auxiliary circle for controlling the display shape of the second graphic, wherein the auxiliary circle radius is proportional to the distance; The type of the auxiliary circle is determined according to the positional relationship between the operating position and the critical circle.

7. The method for displaying a joystick control according to claim 6, characterized in that: The step of determining the type of the auxiliary circle according to the positional relationship between the operating position and the critical circle includes: If the operation position is within the critical circle, the auxiliary circle is a subtraction circle outside the second figure; If the operation position is outside the critical circle, the auxiliary circle is a fused circle inside the second figure.

8. The method for displaying a joystick control according to claim 7, characterized in that: The step of determining the signed distance field corresponding to each pixel point on the second graphic according to the auxiliary circle includes: If the auxiliary circle is a subtraction circle outside the second graphic, performing a signed distance field subtraction operation on the pixel points on the second graphic and the subtraction circle according to the first fusion factor to obtain a signed distance field corresponding to each pixel point on the second graphic; If the auxiliary circle is a fusion circle inside the second graphic, a signed distance field fusion operation is performed on the second graphic and the pixel points on the fusion circle according to a second fusion factor to obtain a signed distance field corresponding to each pixel point on the second graphic.

9. The method for displaying a joystick control according to claim 5, characterized in that: The obtaining the output color value of each pixel point according to the signed distance field comprises: If the signed distance field corresponding to the pixel point is less than or equal to the display threshold, sampling the input map according to the distance between the pixel point and the center of the joystick control to obtain the output color value of the pixel point; If the signed distance field corresponding to the pixel point is greater than the display threshold, the pixel point does not output color.

10. The method for displaying a joystick control according to claim 2, characterized in that: The step of displaying a deformation animation preset for the second graphic in the graphical user interface includes: Acquire the end time of the second operation and the touch point coordinates corresponding to the end time; Determine the control point coordinates corresponding to the control point of the second graphic according to the touch point coordinates corresponding to the end time, the end time and the current time; Determining a positional relationship between the control point and a critical circle preset in the joystick control according to the control point coordinates, and determining an auxiliary circle for controlling a display shape of the second graphic according to the positional relationship; A deformation animation preset for the second graphic is displayed in the graphical user interface according to the auxiliary circle.

11. The method for displaying a joystick control according to claim 10, characterized in that: The step of determining the control point coordinates corresponding to the control point of the second graphic according to the touch point coordinates corresponding to the end time, the end time and the current time includes: The touch point coordinates corresponding to the end time, the end time and the current time are input into a preset oscillation function to obtain the control point coordinates corresponding to the control point of the second graphic.

12. The method for displaying a joystick control according to claim 1, characterized in that: The step of displaying the first graphic at a first position corresponding to the first operation in the graphical user interface in response to the first operation comprises: determining a transparency parameter of the first graphic according to a distance between an operation position corresponding to the first operation and a center of the joystick control; The first graphic is displayed at a first position corresponding to the first operation in the graphical user interface according to the transparency parameter.

13. A display device for a joystick control, characterized in that: Providing a graphical user interface through a terminal device, the device comprises: A joystick control providing module, configured to provide a joystick control in the graphical user interface, wherein the joystick control includes a first graphic and a second graphic; A first graphic display module, configured to respond to a first operation applied to the graphical user interface and display the first graphic at a first position corresponding to the first operation in the graphical user interface; A second graphic display module, configured to respond to a second operation that is continuous with the first operation and display the second graphic in the graphical user interface based on a display position of the first graphic so that the first graphic is located inside the second graphic; A second graphic deformation module is used to respond to the change of the operation position of the second operation on the graphical user interface, and control the deformation of the second graphic based on the real-time change of the operation position, wherein the deformation direction of the second graphic corresponds to the direction of the operation position relative to the first graphic.

14. An electronic device, characterized in that: include: processor; as well as A memory for storing one or more programs, which, when executed by the processor, enables the processor to implement the display method of the joystick control as described in any one of claims 1 to 12.

15. A computer program product comprising a computer program, characterized in that When the computer program is executed by a processor, the method for displaying a joystick control according to any one of claims 1 to 12 is implemented.

Images