Display method and device of rocker control, electronic equipment and computer program product

Abstract

The present disclosure relates to a display method and device of a joystick control, electronic equipment and computer program product, and belongs to the technical field of computers. The method comprises: providing a joystick control in a graphical user interface, the joystick control comprising a first graphic and a second graphic; in response to a first operation applied to 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 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, controlling the second graphic 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 present disclosure can provide an interactive mode of the joystick control simulating the rubber band pulling and bouncing, and reduce the resource occupation in the joystick display process.

Description

TECHNICAL FIELD

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

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

[0003] The sequence frame animation is spliced by continuous pictures, and when these pictures are played out every frame in the running time, the effect of the animation can be formed. However, the animation of the UI is relatively complex, the package body space occupied by the sequence frame is large, and the animation amplitude of the joystick is large, which requires a high frame number, and will bring greater package body overhead.

[0004] In view of this, there is an urgent need in the art for a display method of a joystick control, which can provide a dynamic joystick display effect while reducing the resource occupation in the joystick display process.

[0005] It should be noted that the information disclosed in the above background section is only used to strengthen the understanding of the background of the present disclosure, and therefore can include information that does not constitute prior art known to those of ordinary skill in the art. SUMMARY

[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, which can at least to some extent provide a dynamic joystick display effect while reducing the resource occupation in the joystick display process.

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

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

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

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

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

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

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

[0014] a first graphic displaying module configured to display the first graphic at a first position in the graphical user interface corresponding to a first operation acting on the graphical user interface in response to the first operation;

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

[0016] a second graphic deforming module configured to control the second graphic to deform based on a real-time change position of an operation position of the second operation in response to a change in the operation position of the second operation on the graphical user interface, wherein a deformation direction of the second graphic corresponds to a 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 storing executable instructions of the processor; wherein the processor is configured to execute the display method of the joystick control via execution of the executable instructions.

[0018] According to a fourth aspect of the present disclosure, there is provided a computer program product comprising a computer program which, when executed by a processor, implements the display method of the joystick control.

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

[0020] In the display method of the rocker control of the example embodiment of the present disclosure, the rocker control is provided in a graphical user interface, where the rocker control includes a first graphic and a second graphic. In response to a first operation 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. 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 position of the operation position, where 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 rocker control in the example embodiment of the present disclosure can provide an innovative interactive way of the rocker control simulating the elastic pulling and bouncing of a rubber band, and provide a control deformation performance corresponding to the pulling operation of different intensity, so as to ensure smooth transition performance in each state of the rocker, restore the dynamic effect similar to the elastic pulling and bouncing of a rubber band, and greatly improve the interactive experience of the user. On the other hand, compared with the conventional sequence frame method, the resource occupation in the display process of the rocker can be reduced, the resource occupation ratio is greatly improved, the operation fluency is improved, and the operation lag is reduced.

[0021] It should be understood that the foregoing general description and the following detailed description are only exemplary and explanatory, and are not limiting to the present disclosure. BRIEF DESCRIPTION OF DRAWINGS

[0022] The drawings incorporated in the specification and constituting a part of the specification illustrate embodiments consistent with the present disclosure and, together with the specification, serve to explain the principles of the present disclosure. Obviously, the drawings in the following description are only some embodiments of the present disclosure, and other drawings can be obtained by those skilled in the art without creative labor on the basis of these drawings.

[0023] Figure 1 A schematic diagram of an example system architecture of a display method and device of a rocker control to which the embodiments of the present disclosure can be applied is shown;

[0024] Figure 2 A flowchart of the display method of the rocker control of the example embodiment of the present disclosure is shown;

[0025] Figure 3 A flowchart of the control of the deformation of the second graphic of the example embodiment of the present disclosure is shown;

[0026] Figure 4 A flowchart of the determination of the auxiliary circle for controlling the display shape of the second graphic of the example embodiment of the present disclosure is shown;

[0027] Figure 5A schematic diagram of input mapping is shown schematically according to one embodiment of the present disclosure;

[0028] Figure 6 A flowchart of a second graphical input texture sampling is shown schematically according to one embodiment of the present disclosure;

[0029] Figure 7 A flowchart of displaying a morph animation for a second graphical preset is shown according to an example embodiment of the present disclosure;

[0030] Figure 8 A flowchart of a display method for a rocker control outer ring portion is shown according to one embodiment of the present disclosure;

[0031] Figure 9 A schematic diagram of a rocker control is shown schematically according to one embodiment of the present disclosure;

[0032] Figure 10 A block diagram of a display device for a rocker control is shown according to an example embodiment of the present disclosure;

[0033] Figure 11 A structural diagram of a computer system suitable for implementing an electronic device according to an embodiment of the present disclosure is shown. DETAILED DESCRIPTION

[0034] Example embodiments now will be described more fully hereinafter with reference to the accompanying drawings. Example embodiments, however, can be implemented in many different forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of example embodiments to those skilled in the art. The features, structures, or characteristics described in connection with the embodiments can be combined in any suitable manner in one or more embodiments. In the following description, numerous specific details are provided to give a thorough understanding of example embodiments. One skilled in the relevant art, however, will recognize that the techniques described can be practiced without one or more of the specific details, or with other methods, components, materials, and so forth. In other instances, well-known structures have not been described in detail to avoid obscuring the understanding of this description.

[0035] In addition, the accompanying drawings are included to provide a further understanding of the present disclosure and are incorporated in and constitute a part of this specification. The drawings are not necessarily to scale, the same or analogous reference numerals in the drawings represent the same or similar parts and the drawings illustrate embodiments of the present disclosure for purposes of simplification and explanation only. Some of the illustrated box diagrams are functional entities that do not necessarily have to correspond to physically or logically independent entities. These functional entities can be implemented in the form of software, or in one or more hardware modules or integrated circuits, or in different network and / or processor devices and / or microcontroller devices.

[0036] Figure 1 A schematic diagram of a system architecture of an exemplary application environment of a display method and device of a rocker control to which embodiments of the present disclosure can be applied is shown.

[0037] As shown in Figure 1 , the system architecture 100 can include a plurality of terminal devices 101, 102, 103, a network 104, and a server 105. The network 104 is a medium for providing a communication link between the terminal devices 101, 102, 103 and the server 105. The network 104 can include various connection types, such as a wireless communication link, etc.

[0038] It should be understood that Figure 1 the number of terminal devices, networks, and servers in the system architecture 100 is merely illustrative. Depending on the implementation needs, there can be any number of terminal devices, networks, and servers. For example, the server 105 can be a server cluster composed of multiple servers, etc.

[0039] The terminal devices 101, 102, 103 can be various electronic devices with processors, including but not limited to smart phones, tablet computers, portable computers, etc. The server 105 can be a server that provides various services. For example, the terminal devices 101, 102, 103 can provide a rocker control in a graphical user interface through a processor, and in response to a first operation on the graphical user interface, display a first figure 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 figure in the graphical user interface based on the display position of the first figure. The server 105 can control the second figure to deform based on the real-time change of the operation position. The terminal devices 101, 102, 103 can also complete the entire process from providing a rocker control in a graphical user interface through a processor, to controlling the second figure to deform based on the real-time change of the operation position in response to the change of the operation position on the graphical user interface in response to the second operation.

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

[0041] In an optional embodiment, various cloud applications can run under the cloud interaction system, such as cloud games. Taking cloud games as an example, cloud games refer to a game mode based on cloud computing. In the running mode of cloud games, the running subject of the game program and the presentation subject of the game picture are separated, and the storage and running of the display method of the joystick control are completed on the cloud game server. The client device is used for receiving and sending data and presenting the game picture. For example, the client device can be a display device close to the user side with data transmission function, such as a mobile terminal, a television, a computer, a palm computer, etc. However, the cloud game server in the cloud end performs information processing. When playing the game, the user operates the client device to send operation instructions to the cloud game server, the cloud game server runs the game according to the operation instructions, encodes and compresses the game picture and other data, returns the data to the client device through the network, and finally decodes and outputs the game picture through the client device.

[0042] In an optional embodiment, taking games as an example, the local terminal device stores a game program and is used for presenting a game picture. The local terminal device is used for interacting with the user through a graphical user interface, that is, the conventional game program is downloaded and installed through an electronic device and is run. The local terminal device can provide the graphical user interface to the user in various ways, for example, the graphical user interface can be rendered and displayed on the display screen of the terminal, or the graphical user interface can be provided to the user through holographic projection. For example, the local terminal device can include a display screen for presenting a graphical user interface including a game picture, and a processor for running the game, generating the graphical user interface, and controlling the display of the graphical user interface on the display screen.

[0043] In a possible embodiment, the present disclosure provides a display method of a joystick control, which provides a graphical user interface through a terminal device. The terminal device can be the aforementioned local terminal device or the aforementioned client device in the cloud interaction system.

[0044] The present example embodiment first provides a display method of a joystick control, which provides a graphical user interface through a terminal device. Referring to Figure 2 As shown in the figure, the display method of the joystick control can include the following steps:

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

[0046] Step S220. In response to a first operation acting on the graphical user interface, a first graph 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 continuous to the first operation, a second graph is displayed in the graphical user interface based on the display position of the first graph, so that the first graph is located inside the second graph.

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

[0049] Wherein, the deformation direction of the second graph corresponds to the direction of the operation position relative to the first graph.

[0050] The display method of the rocker control in the example embodiment of the present disclosure, on the one hand, can provide an innovative interaction way of the rocker control simulating the rubber band pulling and bouncing, and provide the control deformation performance of the corresponding force for the pulling operation of different force, ensure smooth transition performance in each state of the rocker, restore the dynamic effect similar to the rubber band pulling and bouncing, greatly improve the user's interaction experience; on the other hand, compared with the conventional sequence frame method, it can reduce the resource occupation in the display process of the rocker, greatly improve the resource occupation ratio, thereby improving the operation fluency and reducing the operation lag. Next, combined with Figures 3 to 9 The above steps of the example embodiment will be described in more detail.

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

[0052] In the example embodiment, the rocker control refers to an operation control used to control the operation direction in the game, such as a moving rocker or a skill rocker, which can control the moving direction of the game object or the skill release direction through the rocker control. The user can control the game object to move in the corresponding direction or control the game skill to release in the corresponding direction by pressing the rocker control and dragging in different directions.

[0053] In the example embodiment, the rocker control can include a first graph and a second graph, wherein the first graph refers to the inner circle graph of the rocker control, and the second graph refers to the outer circle graph of the rocker control. Before the user touches the rocker control, the rocker control can be in a transparent state to avoid blocking the game picture.

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

[0055] In the example embodiment, the first position is a specified position in the graphical user interface, and the first figure is a specified shape.

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

[0057] In the example embodiment, the transparency parameter of the first figure can be determined according to the distance between the operation position corresponding to the first operation and the center of the joystick control, and the first figure is displayed at the first position corresponding to the first operation in the graphical user interface according to the transparency parameter.

[0058] The inner circle figure 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 figure can be determined according to the distance between the operation position corresponding to the first operation and the center of the joystick control, and the first figure is displayed at the first position corresponding to the first operation in the graphical user interface according to the transparency parameter. The farther the distance between the operation position corresponding to the first operation and the center of the joystick control, the higher the transparency of the first figure.

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

[0060] In the example embodiment, the second operation refers to a sliding operation continuous to the first operation. When the user's finger starts to slide on the graphical user interface, the second figure of the joystick control, i.e. the outer circle figure, can be displayed based on the display position of the first figure. The original shape of the outer circle figure is a circular ring shape. At this time, the first figure and the second figure are displayed simultaneously, and the first figure is located inside the second figure, specifically, the first figure is located at the geometric center of the second figure.

[0061] In step S240, in response to the change of the operation position of the second operation on the graphical user interface, the second figure is controlled to deform based on the real-time change position 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 the example embodiment, when the second operation reaches a certain position, the outer ring pattern of the rocker control deforms according to the real-time changing position of the operation position, generating a dynamic shape change similar to the elastic bouncing. The real-time changing 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 are mapped to the local space of the UI space, and then mapped to the interval [-1, 1] and delivered to the shader.

[0064] In the example embodiment, in response to the deformation of the second pattern, the first pattern is removed from the display in the graphical user interface. When the outer ring pattern starts to deform, the inner ring pattern is removed from the display, and at this time, only the deformed second pattern is displayed on the graphical user interface.

[0065] In the example embodiment, as shown in Figure 3 , the deformation of the second pattern is controlled based on the real-time changing position of the operation position, which can include the following steps:

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

[0067] In the rocker control, a rocker radius threshold can be preset. According to the geometric center of the rocker control and the rocker radius threshold, the preset critical circle in the rocker control is determined. According to the positional relationship between the operation position and the critical circle, the auxiliary circle for controlling the display shape of the second pattern can be determined, wherein the auxiliary circle is used to fuse with the original shape of the outer ring pattern, and the deformed outer ring pattern is generated.

[0068] In the example embodiment, as shown in Figure 4 , the auxiliary circle for controlling the display shape of the second pattern is determined according to the positional relationship, which can include the following steps:

[0069] Step S410. Determine the auxiliary circle radius of the auxiliary circle for controlling the display shape of the second pattern 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 operation position and the critical circle, the greater the degree of stretching of the outer ring shape of the rocker, and therefore, the greater the auxiliary circle radius.

[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 the example embodiment, if the operation position is within the critical circle, the auxiliary circle is a subtractive circle outside the second graph; if the operation position is outside the critical circle, the auxiliary circle is a fusion circle inside the second graph.

[0073] If the operation position is within the critical circle, a subtractive circle outside the second graph is provided to subtract from the outer ring graph, achieving a rebound effect; if the operation position is outside the critical circle, a fusion circle inside the second graph is provided to fuse with the outer ring graph, achieving a pulling effect.

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

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

[0076] In the example embodiment, if the auxiliary circle is a subtractive circle outside the second graph, a directed distance field subtraction operation is performed on the pixel points on the second graph and the subtractive circle according to the first fusion factor, to obtain the directed distance field corresponding to each pixel point on the second graph.

[0077] Through the sdf subtract (directed distance field subtraction) operation, the subtractive circle outside the second graph is subtracted from the original shape of the outer ring graph, achieving a rebound effect. As the operation position becomes more distant, the fusion factor and the radius of the subtractive circle will also be larger.

[0078] In the example embodiment, if the auxiliary circle is a fusion circle inside the second graph, a directed distance field fusion operation is performed on the pixel points on the second graph and the fusion circle according to the second fusion factor, to obtain the directed distance field corresponding to each pixel point on the second graph.

[0079] Through the sdf union (directed distance field fusion) operation, the fusion circle inside the second graph is fused with the original shape of the outer ring graph, achieving a pulling effect. As the operation position becomes more distant, the fusion factor and the radius of the fusion circle will also be larger.

[0080] When the operation position is pulled back and forth within and outside the critical circle over time, the effect of a rubber band being pulled and rebounding can be simulated.

[0081] In the example embodiment, if the directed 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 rocker control to obtain the output color value of the pixel point.

[0082] Figure 5Fig. 6 shows a schematic diagram of input map in one embodiment of the present disclosure. 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 pattern of the outer ring of the rocker at different radii. The lower half of the image is the pattern of the inner ring of the rocker. The input texture and the pattern conform to the visual interactive package like a rubber band. Figure 5 The lower half of the image is the pattern of the inner ring of the rocker. The pattern of the image can be sampled in the lower half of the input texture in the shader to draw.

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

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

[0085] Finally, the second graphic of the rocker control is drawn on the graphical user interface according to the output color value of each pixel point, so as to control the second graphic to deform.

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

[0087] Figure 6 Fig. 6 shows a schematic diagram of input map in one embodiment of the present disclosure. 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 pattern of the outer ring of the rocker at different radii. The lower half of the image is the pattern of the inner ring of the rocker. The input texture and the pattern conform to the visual interactive package like a rubber band.

[0088] In this example embodiment, the second operation can also be ended in response to the second operation. The preset deformation animation of the second graphic can be displayed on the graphical user interface.

[0089] In this example embodiment, as shown in Fig. 6, the preset deformation animation of the second graphic can be displayed on the graphical user interface, which can include the following steps: Figure 7

[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 rocker control is in a non-touch state, at which time the time at which the user's finger leaves the screen, i.e., the state transition time when the rocker control is transitioned from the touch state to the non-touch state, is obtained, and the time at which 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. The control point coordinates corresponding to the control point of the second graph are determined according to the touch point coordinates corresponding to the end time, and the end time and the current time.

[0093] The control point of the second graph refers to a virtual control point that controls the shape of the outer circle of the rocker. When the rocker is transitioned from the touch state to the non-touch state, the control point coordinates corresponding to the control point can be determined according to the touch point coordinates corresponding to the end time of touch.

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

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

[0096] Step S730. The positional relationship between the control point and a preset critical circle in the rocker control is determined according to the control point coordinates, and an auxiliary circle for controlling the display shape of the second graph is determined according to the positional relationship.

[0097] The auxiliary circle radius of the auxiliary circle for controlling the display shape of the second graph is determined according to the distance between the operation position and the critical circle, 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 operation position and the critical circle. If the operation position is within the critical circle, the auxiliary circle is a subtraction circle outside the second graph. If the operation position is outside the critical circle, the auxiliary circle is a fusion circle inside the second graph.

[0098] Step S740. A preset morphing animation for the second graph is displayed on the graphical user interface according to the auxiliary circle.

[0099] The directional distance field corresponding to each pixel point on the second graph is determined according to the auxiliary circle, and the output color value of each pixel point is obtained according to the directional distance field. A preset morphing animation for the second graph is displayed on the graphical user interface according to the output color value of each pixel point. The specific steps are similar to the foregoing method and will not be described here.

[0100] As Figure 8The complete flow chart of the display method of the outer ring part of the rocker control in one embodiment of the present disclosure is shown, which is an example of the above steps in the present example embodiment, and the specific steps of the flow chart are as follows:

[0101] Step S802. Receive input coordinates.

[0102] Step S804. Determine the rocker pressing state.

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

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

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

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

[0107] Step S810. Move the control point to the finger touch coordinates.

[0108] Step S812. Radius threshold judgment.

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

[0110] Step S814. Calculate the subtracted circle radius according to the control point from the radius threshold.

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

[0112] Step S818. Calculate the fusion circle radius according to 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 judgment.

[0115] If the SDF value is within the threshold, go to step S824; if the SDF value is outside the threshold, go 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 the pixel shading.

[0118] Step S828. Display the outer ring of the rocker.

[0119] Figure 9 The schematic diagram of the rocker control according to one embodiment of the present disclosure is shown schematically, the drawing of the rocker is divided into the inner and outer solid parts and the rubber band part of the outer ring. Fig. 901 is a schematic diagram of the rocker being pulled outward, and Fig. 902 is a schematic diagram of rebound. The inner ring fixes the overall shape, and the outer ring is the main body of the elastic interaction of the rubber band pulling.

[0120] In the display process of the rocker control, the adjustable parameters include: the offset of the entire output, the mouse input, the maximum distance of the control point, the touch-off time, the width of the inner ring, the decay coefficient of the simulated bounce function, the touch-on time, the radius threshold at which the control point starts to have a fade-out effect, the decay start time, the radius threshold at which the outer ring starts to have an enlargement effect, the radius threshold at which the outer ring starts to have a pulling effect, the inner ring radius, the radius threshold at which the middle ring can exceed the outer ring, the position of the inner ring sampling, the farthest distance of the control point under the control of the bounce function, the decay 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 coefficient of the output enlargement, the width coefficient of the outer ring, the strength of the bounce, the distance control parameter of the subtraction circle, the inner sampling width of the inner ring, the outer sampling width of the inner ring, the width of the inner ring, the sampling width of the outer ring, and the like. Other adjustable parameters can also be set according to actual needs, which are not specifically limited in the present embodiment.

[0121] It should be noted that although the various steps of the methods of the present disclosure are described in a particular order in the accompanying drawings, this does not require or imply that the steps must be performed in this particular order, or that all of the steps shown must be performed to achieve the desired results. In addition or alternatively, certain steps can be omitted, a plurality of steps can be combined into one step, and / or one step can be divided into a plurality of steps, etc.

[0122] Further, the present disclosure also provides a display device of a rocker control. Referring to Figure 10 As shown, the display device of the rocker control can include a rocker control providing 1010, a first graphical display module 1020, a second graphical display module 1030, and a second graphical deformation module 1040. Wherein:

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

[0124] The first graphical display module 1020 can be used to display the first graph at a first position corresponding to a first operation in the graphical user interface in response to the first operation acting on the graphical user interface;

[0125] The second graphical display module 1030 can be configured to display, in response to a second operation continuous with the first operation, a second graph in the graphical user interface based on a display position of the first graph, so that the first graph is inside the second graph;

[0126] The second graph deformation module 1040 can be configured to control deformation of the second graph based on a real-time change position of the operation position on the graphical user interface, in response to a change in the operation position, wherein a deformation direction of the second graph corresponds to a direction of the operation position relative to the first graph.

[0127] In some example embodiments of the present disclosure, the display device of the rocker control provided by the present disclosure can further include a deformation animation display module, which can be configured to display, in response to the end of the second operation, a preset deformation animation of the second graph on the graphical user interface.

[0128] In some example embodiments of the present disclosure, the display device of the rocker control provided by the present disclosure can further include a first graph cancel display module, which can be configured to cancel display of the first graph in the graphical user interface, in response to the deformation of the second graph.

[0129] In some example embodiments of the present disclosure, the first position is a specified position in the graphical user interface, and the first graph is a specified shape.

[0130] In some example embodiments of the present disclosure, the second graph deformation module 1040 can include an auxiliary circle determination unit, an output color value determination unit, and a deformation control unit. Wherein:

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

[0132] The output color value determination unit can be configured to determine a directed distance field corresponding to each pixel point on the second graph according to the auxiliary circle, and obtain an output color value of each pixel point according to the directed distance field;

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

[0134] In some example embodiments of the present disclosure, the auxiliary circle determination unit can include an auxiliary circle radius determination unit and an auxiliary circle type determination unit. Wherein:

[0135] The auxiliary circle radius determination unit can be configured to determine an auxiliary circle radius of the auxiliary circle for controlling the display shape of the second graph according to a 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 can be configured to determine the type of the auxiliary circle according to the positional relationship between the operation position and the critical circle.

[0137] In some example embodiments of the present disclosure, the auxiliary circle type determination unit can include a subtractive circle determination unit and a blending circle determination unit. Wherein:

[0138] The subtractive circle determination unit can be configured to determine that the auxiliary circle is a subtractive circle outside the second graphic if the operation position is within the critical circle.

[0139] The blending circle determination unit can be configured to determine that the auxiliary circle is a blending circle inside the second graphic if the operation position is outside the critical circle.

[0140] In some example embodiments of the present disclosure, the output color value determination unit can include a distance field subtraction unit and a distance field blending unit. Wherein:

[0141] The distance field subtraction unit can be configured to perform a directed distance field subtraction operation on the pixel points on the second graphic and the subtractive circle according to a first blending factor to obtain a directed distance field corresponding to each pixel point on the second graphic if the auxiliary circle is a subtractive circle outside the second graphic.

[0142] The distance field blending unit can be configured to perform a directed distance field blending operation on the pixel points on the second graphic and the blending circle according to a second blending factor to obtain a directed distance field corresponding to each pixel point on the second graphic if the auxiliary circle is a blending circle inside the second graphic.

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

[0144] The input map sampling unit can be configured to sample 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 directed distance field corresponding to the pixel point is less than or equal to the display threshold.

[0145] The pixel point skipping unit can be configured to skip the output of color by the pixel point if the directed distance field corresponding to the pixel point is greater than the display threshold.

[0146] In some example embodiments of the present disclosure, the morphing animation display module can include an end time determination unit, a control point coordinate determination unit, a second auxiliary circle determination unit, and a morphing animation display unit. Wherein:

[0147] The end time determination unit can be configured to obtain the end time of the second operation and the touch point coordinate corresponding to the end time.

[0148] The control point coordinate determination unit can be configured to determine the control point coordinate corresponding to the control point of the second graphic according to the touch control point coordinate corresponding to the end moment, and the end moment and the current moment;

[0149] The second auxiliary circle determination unit can be configured to determine the position relationship between the control point and a preset critical circle in the rocker control according to the control point coordinate, and determine the auxiliary circle used for controlling the display shape of the second graphic according to the position relationship;

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

[0151] In some example embodiments of the present disclosure, the control point coordinate determination unit can include an oscillation function calculation unit, which can be configured to input the touch control point coordinate corresponding to the end moment, and the end moment and the current moment into a preset oscillation function, to obtain the control point coordinate corresponding to the control point of the second graphic.

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

[0153] The transparency parameter determination unit can be configured 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 rocker control;

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

[0155] The specific details of the modules / units in the display device of the rocker control described above 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, such division is not mandatory. In fact, according to the example 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 several modules or units.

[0157] Figure 11 The structure schematic diagram of the computer system of the electronic device suitable for implementing the embodiments of the present disclosure is shown.

[0158] It should be noted that, Figure 11 The computer system 1100 of the electronic device shown is only an example, and should not impose any limitation on the functions and use range of the embodiments of the present disclosure.

[0159] like Figure 11 As shown, the computer system 1100 includes a central processing unit (CPU) 1101, which can perform various appropriate actions and processes based on programs stored in read-only memory (ROM) 1102 or programs loaded from storage section 1108 into random access memory (RAM) 1103. The RAM 1103 also stores various programs and data required for system operation. The CPU 1101, ROM 1102, and RAM 1103 are interconnected 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 I / O interface 1105: an input section 1106 including a keyboard, mouse, etc.; an output section 1107 including a cathode ray tube (CRT), liquid crystal display (LCD), etc., and speakers, 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, modem, etc. The communication section 1109 performs communication processing via a network such as the Internet. A drive 1110 is also connected to I / O interface 1105 as needed. Removable media 1111, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., are installed on drive 1110 as needed so that computer programs read from them can be installed into storage section 1108 as needed.

[0161] In particular, according to embodiments of this disclosure, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this disclosure include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication section 1109, and / or installed from removable medium 1111. When the computer program is executed by central processing unit (CPU) 1101, it performs various functions defined in the system of this disclosure.

[0162] Exemplary embodiments of this disclosure also provide a computer program product. The computer program product includes a computer program that, when executed by a processor, implements the above-described method for displaying the joystick control.

[0163] In an embodiment, the computer program product can be a tangible product that contains the computer program, such as a computer-readable storage medium having the computer program stored therein. The computer-readable storage medium can be a storage medium based on electric, magnetic, optical, electromagnetic, infrared, or the like, including but not limited to random access memory (RAM), read-only memory (ROM), magnetic tape, floppy disks, flash memory (Flash), mechanical hard disks (HDD), solid-state hard disks (SSD), and the like. For example, the computer program product can be implemented as a non-volatile storage medium, such as a read-only memory (ROM), a Nand Flash, or the like, having the computer program stored therein.

[0164] In an embodiment, the computer program product can be an intangible product that contains the computer program. For example, the computer program product can be implemented as a virtual digital product, such as an executable file, an installation package, or the like, having the computer program stored therein.

[0165] The code of the computer program can be written in one or more programming languages. Programming languages include, for example, C, Java, C++, and the like. The program code can be executed entirely on the user computing device, or executed partly on the user computing device and partly on a remote computing device, or executed as a standalone software package, or partly on the user computing device and partly 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 kind of network, such as a local area network (LAN), a wide area network (WAN), or the like, or can be connected to an external computing device (for example, through an Internet connection provided by an operator).

[0166] The computer program can be carried or transmitted by an electronic device through electric, magnetic, optical, electromagnetic, infrared, or the like signals. The electronic device can convert the signals carrying the computer program into digital signals, and then run the computer program. When the computer program is run on the electronic device, its code is used to make the electronic device perform (more specifically, can make the processor of the electronic device perform) the method steps of various exemplary embodiments of the present disclosure, such as the display method of the rocker control described above.

[0167] The computer program product of the first aspect of the present disclosure can include a computer readable storage medium. The computer readable storage medium can be a tangible medium that can retain, store, or maintain the program code for use by a machine. The computer readable storage medium can be based on any suitable technology for programmable processing, including both numerous embodiments of memory media and processing mediums suitable for use with a computer. In this context, a "computer readable storage medium" can include tablets computers, memory cards, ROM, RAM, DVD, Blu-ray, hard drives, or any other suitable medium upon which a program can be maintained or stored.

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

[0169] Other embodiments of the present disclosure will be apparent to those skilled in the art from consideration of the specification and practice of the features of the present disclosure disclosed herein. It is intended that the present disclosure cover any and all variations of the present disclosure that come within the scope of the present disclosure, including custom and practice of the art of the present disclosure. It is intended that the scope of the present disclosure be defined by the following claims.

[0170] It is to be understood that the present disclosure is not limited to the precise construction described above and shown in the drawings, and that various modifications and changes can be effected therein by those skilled in the art without departing from the scope of the present disclosure. The scope of the present disclosure is to be limited only by the appended claims.

Claims

1. A display method of a rocker control, characterized by, The method comprises the following steps: providing a graphical user interface by a terminal device, the method comprising: providing a joystick control in the graphical user interface, wherein the joystick control comprises a first graphic and a second graphic; displaying the first graphic at a first position corresponding to a first operation in the graphical user interface in response to the first operation on the graphical user interface; displaying the second graphic in the graphical user interface based on the display position of the first graphic so that the first graphic is inside the second graphic in response to a second operation continuous to the first operation; controlling the second graphic to deform based on the real-time change position of the operation position in response to the change of the operation position on the graphical user interface, wherein the deformation direction of the second graphic corresponds to the direction of the operation position relative to the first graphic; 2. The display method of a rocker control according to claim 1, wherein, the controlling the second graphic to deform based on the real-time change position of the operation position comprises: determining the positional relationship between the operation position and a preset critical circle in the joystick control, determining the auxiliary circle radius of an 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; determining the type of the auxiliary circle according to the positional relationship between the operation position and the critical circle; determining the directed distance field corresponding to each pixel point on the second graphic according to the auxiliary circle, and obtaining the output color value of each pixel point according to the directed distance field; and displaying 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. The method further comprises:

3. The display method of a rocker control according to claim 1, wherein, displaying a preset deformation animation of the second graphic on the graphical user interface in response to the end of the second operation. The method further comprises:

4. The display method of a rocker control according to claim 1, wherein, canceling the display of the first graphic in the graphical user interface in response to the deformation of the second graphic.

5. The display method of a rocker control according to claim 1, wherein, The first position is a specified position in the graphical user interface, and the first graphic is a specified shape. The determining the type of the auxiliary circle according to the positional relationship between the operation position and the critical circle comprises: if the operation position is within the critical circle, the auxiliary circle is a subtraction circle outside the second graphic; 6. The display method of a rocker control according to claim 5, wherein, if the operation position is outside the critical circle, the auxiliary circle is a fusion circle inside the second graphic. The determining the directed distance field corresponding to each pixel point on the second graphic according to the auxiliary circle comprises: if the auxiliary circle is a subtraction circle outside the second graphic, performing a directed distance field subtraction operation on the pixel points on the second graphic and the subtraction circle according to a first fusion factor to obtain the directed distance field corresponding to each pixel point on the second graphic; if the auxiliary circle is a fusion circle inside the second graphic, performing a directed distance field fusion operation on the pixel points on the second graphic and the fusion circle according to a second fusion factor to obtain the directed distance field corresponding to each pixel point on the second graphic.

7. The display method of a rocker control according to claim 1, wherein, The output color value of each pixel point is obtained according to the directional distance field, and the output color value of each pixel point is obtained according to the directional distance field, comprising: If the directional 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; If the directional distance field corresponding to the pixel point is greater than the display threshold, the pixel point does not output color.

8. The display method of a rocker control according to claim 2, wherein, The deformation animation preset for the second graph is displayed on the graphical user interface, comprising: obtaining the end time of the second operation and the touch point coordinates corresponding to the end time; determining the control point coordinates corresponding to the control points of the second graph according to the touch point coordinates corresponding to the end time and the end time and the current time; determining the position relationship between the control points and the preset critical circle in the joystick control according to the control point coordinates, and determining the auxiliary circle for controlling the display shape of the second graph according to the position relationship; The deformation animation preset for the second graph is displayed on the graphical user interface according to the auxiliary circle.

9. The display method of a rocker control according to claim 8, wherein, The control point coordinates corresponding to the control points of the second graph are determined according to the touch point coordinates corresponding to the end time and the end time and the current time, comprising: inputting the touch point coordinates corresponding to the end time and the end time and the current time into the preset oscillation function to obtain the control point coordinates corresponding to the control points of the second graph.

10. The display method of a rocker control according to claim 1, wherein, In response to the first operation acting on the graphical user interface, the first position corresponding to the first operation in the graphical user interface displays the first graph, comprising: determining the transparency parameter of the first graph according to the distance between the operation position corresponding to the first operation and the center of the joystick control; displaying the first graph at the first position corresponding to the first operation in the graphical user interface according to the transparency parameter.

11. A display device of a rocker control, characterized by, The terminal device provides a graphical user interface, and the device comprises: The joystick control providing module is used for providing a joystick control in the graphical user interface, wherein the joystick control comprises a first graph and a second graph; The first graph display module is used for displaying the first graph at the first position corresponding to the first operation in the graphical user interface in response to the first operation acting on the graphical user interface; The second graph display module is used for displaying the second graph in the graphical user interface based on the display position of the first graph in response to the second operation continuous with the first operation, so that the first graph is located inside the second graph; The second graph deformation module is used for controlling the second graph to deform based on the real-time change position of the operation position in response to the change of the operation position of the second operation on the graphical user interface, wherein the deformation direction of the second graph corresponds to the direction of the operation position relative to the first graph. The second graphic is controlled to deform based on the real-time change of the operation position, including: determining the positional relationship between the operation position and a preset critical circle in the rocker control, determining an 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 directly proportional to the distance; determining the type of the auxiliary circle according to the positional relationship between the operation position and the critical circle; determining a directed distance field corresponding to each pixel point on the second graphic according to the auxiliary circle, and obtaining an output color value of each pixel point according to the directed distance field; and displaying the second graphic on the graphical user interface according to the output color value of each pixel point, so as to control the second graphic to deform.

12. An electronic device, comprising: Comprise: a processor; and a memory for storing one or more programs, which, when executed by the processor, cause the processor to implement the display method of the rocker control according to any one of claims 1 to 10.

13. A computer program product comprising a computer program, characterized in that, The computer program is executed by the processor to implement the display method of the rocker control according to any one of claims 1 to 10.

Images