Switching processing method and device in game and electronic equipment
By extracting and processing the scenes and UI element pictures of virtual games, adapting to the resolution changes of terminal devices, the problem of high switching costs of virtual games in the prior art is solved, and more efficient game iteration and maintenance is achieved.
Patent Information
- Application Number
- CN202411895712.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-20
- Publication Date
- 2025-02-28
AI Technical Summary
In the prior art, virtual games are costly when switching between horizontal and vertical modes, and maintenance work is cumbersome, which hinders the rapid iteration and innovation efficiency of game products.
By extracting the game scene and UI elements when the terminal device is in the first placement position, and scaling and cropping according to the resolution of the terminal device, the scene and element screen adapted to the second placement position is obtained. Finally, these screens are displayed through the graphical user interface to ensure that the UI elements are always at the top level.
It reduces the cost of switching between horizontal and vertical modes of virtual games, simplifies maintenance work, and improves the rapid iteration and innovative efficiency of game products.
Smart Images

Figure CN119524401A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of computer technology, and in particular to a method, device, electronic device and computer-readable storage medium for switching processing in a game. Background Art
[0002] With the booming development of virtual games and the continuous advancement of mobile terminal technology, the game industry is undergoing unprecedented changes, especially in terms of user experience. In order to meet the diversified gaming needs of users, more and more game development projects are no longer limited to a single screen display mode, but are committed to developing game applications that can switch freely between horizontal and vertical screens.
[0003] In the related technologies, the horizontal and vertical screen switching in virtual games mostly relies on the rearrangement of the underlying layout of the game engineering files. This process not only requires a comprehensive reconstruction of the client code, but also means double the workload and resource investment for each interface adjustment or update. It can be seen that the related technologies have the following problems: on the one hand, the development cost is too high; on the other hand, when the game interface is iterated, both the horizontal and vertical screens need to be adjusted and maintained, and the maintenance work is extremely cumbersome, which seriously hinders the rapid iteration and innovation efficiency of game products.
[0004] Therefore, how to reduce the cost of switching between horizontal screen games and vertical screen games has become an urgent problem to be solved. Summary of the invention
[0005] The present application provides a switching processing method, device, electronic device and computer-readable storage medium in a game, which can reduce the cost of switching between horizontal screen mode and vertical screen mode of a virtual game. The specific scheme is as follows:
[0006] In a first aspect, an embodiment of the present application provides a method for switching processing in a game, wherein a terminal device in a first placement posture provides a graphical user interface, wherein the graphical user interface includes at least part of a game scene and at least one UI element; the method includes:
[0007] In response to the terminal device switching from the first placement posture to the second placement posture, extracting a first scene screen corresponding to the game scene and a first element screen including the UI element;
[0008] Scaling and cropping the first scene picture according to the first resolution when the terminal device is in the first placement posture and the second resolution when the terminal device is in the second placement posture to obtain a second scene picture, wherein the aspect ratio of the second scene picture is the same as the aspect ratio of the second resolution;
[0009] Splitting the UI element in the first element screen, and changing the display mode of the split UI elements to obtain a second element screen, wherein the aspect ratio of the second element screen is the same as the aspect ratio of the second resolution;
[0010] The second scene screen and the second element screen are displayed through the graphical user interface of the terminal device, wherein the level of the second element screen is higher than the level of the second scene screen.
[0011] In a second aspect, an embodiment of the present application provides a switching processing device in a game, which provides a graphical user interface through a terminal device in a first placement posture, wherein the graphical user interface includes at least part of a game scene and at least one UI element; the device includes:
[0012] an extracting unit, configured to extract a first scene screen corresponding to the game scene and a first element screen including the UI element in response to the terminal device switching from the first placement posture to a second placement posture, wherein the first placement posture is a posture in which layout information of each element is pre-set;
[0013] A first processing unit is configured to scale and crop the first scene picture according to a first resolution when the terminal device is in the first placement posture and a second resolution when the terminal device is in the second placement posture, so as to obtain a second scene picture, wherein an aspect ratio of the second scene picture is the same as an aspect ratio of the second resolution;
[0014] a second processing unit, configured to split the UI element in the first element screen, and transform the display mode of the split UI elements to obtain a second element screen, wherein the aspect ratio of the second element screen is the same as the aspect ratio of the second resolution;
[0015] A display unit is used to display the second scene screen and the second element screen through the graphical user interface of the terminal device, wherein the level of the second element screen is higher than the level of the second scene screen.
[0016] In a third aspect, the present application further provides an electronic device, including:
[0017] Processor; and
[0018] The memory is used to store a data processing program. After the electronic device is powered on and the program is run by the processor, the method described in the first aspect is executed.
[0019] In a fourth aspect, an embodiment of the present application further provides a computer-readable storage medium storing a data processing program, which is executed by a processor to perform the method described in the first aspect.
[0020] Compared with the prior art, this application has the following advantages:
[0021] The switching processing method in the game provided by the embodiment of the present application provides a graphical user interface through a terminal device in a first placement position, wherein the graphical user interface includes at least part of the game scene and at least one UI element, and includes the following steps: in response to the terminal device switching from the first placement position to the second placement position, extracting a first scene screen corresponding to the game scene and a first element screen including the UI element; scaling and cropping the first scene screen according to a first resolution when the terminal device is in the first placement position and a second resolution when the terminal device is in the second placement position to obtain a second scene screen, wherein the aspect ratio of the second scene screen is the same as the aspect ratio of the second resolution; splitting the UI element in the first element screen, and transforming the display mode of the split UI elements to obtain a second element screen, wherein the aspect ratio of the second element screen is the same as the aspect ratio of the second resolution; displaying the second scene screen and the second element screen through the graphical user interface of the terminal device, wherein the level of the second element screen is higher than the level of the second scene screen. In this way, when the terminal device switches from the first placement position to the second placement position, it is only necessary to extract the first scene screen and the first element screen in the graphical user interface, and adjust the size of the scene screen to obtain a second scene screen that matches the resolution of the screen in the second placement position, split the UI elements in the element screen and reset the display mode to obtain a second element screen that matches the screen size in the second placement position, and finally, superimpose the second element screen and the second scene screen on the screen of the terminal device in the second placement position, and the level of the second element screen is higher than the level of the second scene screen. In this way, the UI elements are always displayed on the top layer, with the highest visual priority and user interactivity. For interactive UI elements, they can accept user inputs such as keyboard tapping, mouse clicking, and finger touching, and directly interact with the user.
[0022] It can be seen that the switching processing method in the game provided by the embodiment of the present application does not require any design, engineering, or code-level modifications when the terminal device switches from a first placement position to a second placement position. Only the size of the scene screen at the first placement position needs to be corrected, and the display mode of the UI elements at the first placement position needs to be changed. This can achieve the switching of the graphical user interface when the terminal device switches from the first placement position to the second placement position. Therefore, the embodiment of the present application can reduce the cost of switching the virtual game between the horizontal screen mode and the vertical screen mode. BRIEF DESCRIPTION OF THE DRAWINGS
[0023] Figure 1 is a game system diagram for implementing a switching processing method in a game provided by an embodiment of the present application;
[0024] Figure 2 is a flowchart of a switching processing method in a game provided by an embodiment of the present application;
[0025] Figure 3 This is an example of an interface diagram when the terminal device is in a first placement position in the switching processing method in the game provided by the embodiment of the present application;
[0026] Figure 4 It is a schematic diagram of a first scene screen and a second scene screen in a switching processing method in a game provided in an embodiment of the present application;
[0027] Figure 5 It is a schematic diagram of a first element screen and a second element screen in a switching processing method in a game provided in an embodiment of the present application;
[0028] Figure 6 It is an interface diagram after the terminal device switches from the first placement posture to the second placement posture in the switching processing method in the game provided by the embodiment of the present application;
[0029] Figure 7 It is a schematic diagram of interface switching of a switching processing method in a game provided by an embodiment of the present application;
[0030] Figure 8 is a structural block diagram of an example of a switching processing device in a game provided by an embodiment of the present application;
[0031] Fig. 9 It is a structural block diagram of an example of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION
[0032] Many specific details are described in the following description to facilitate a full understanding of the present application. However, the present application can be implemented in many other ways than those described herein, and those skilled in the art can make similar generalizations without violating the connotation of the present application, so the present application is not limited by the specific implementation disclosed below.
[0033] It should be noted that the terms "first", "second", "third", etc. in the claims, description and drawings of the present application are used to distinguish similar objects and are not used to describe a specific order or sequence. The data used in this way are interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than that illustrated or described herein. In addition, the terms "including", "having" and their variants are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.
[0034] It should be understood that in the embodiments of the present application, "at least one" refers to one or more, and "more than one" refers to two or more. "And / or" is merely a way to describe the association relationship of associated objects, indicating that three relationships may exist. For example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone. The character " / " generally indicates that the previous and subsequent associated objects are in an "or" relationship. "Including A, B and / or C" means including any one, any two, or any three of A, B, and C.
[0035] It should be understood that in the embodiments of the present application, "B corresponding to A", "B corresponding to A", "A corresponds to B", or "B corresponds to A" means that B is associated with A, and B can be determined according to A. Determining B according to A does not mean determining B only according to A, and B can also be determined according to A and / or other information.
[0036] It should be noted that the instructions or operations that appear in the subsequent detailed introduction of the switching processing method in the game provided by the embodiment of the present application can be regarded as instructions or operations triggered by the player through fingers or controlling the mouse, keyboard, game controller or stylus or voice. The specific triggering operation can be determined according to the type of electronic device. For example, when the electronic device is a touch screen device such as a mobile phone, a tablet computer, a game console, etc., the player can trigger instructions or operations on the touch screen through any suitable object or accessory such as a finger or stylus, or can trigger instructions or operations through voice. When the terminal device is a non-touch screen terminal device such as a desktop computer or a laptop computer, the player can trigger instructions or operations through external devices such as a mouse, keyboard, and game controller.
[0037] Based on the reasons mentioned in the background technology, in order to reduce the cost of switching between horizontal screen mode and vertical screen mode of a virtual game, the first embodiment of the present application provides a switching processing method in a game, which is applied to an electronic device, which may be a desktop computer, a laptop computer, a mobile phone, a tablet computer, an electronic watch, etc., or other electronic devices capable of switching in a game, which is not specifically limited in the embodiments of the present application.
[0038] In an optional embodiment, when the switching processing method in the game is run on a terminal device, the terminal device may include a display screen and a processor, the display screen is used to present the game screen and receive instructions generated by the player acting on the game screen. The game screen may include a portion of a virtual game scene, which is a virtual world where virtual characters perform activities. The processor is used to store game applications, run the game, generate game screens, respond to instructions, and control the display of the game screen on the display screen. When the player operates the game screen through the display screen, the game screen can control the local content of the terminal device by responding to the received operation instructions. The terminal device may provide the graphical user interface to the player in a variety of ways, for example, it may be rendered and displayed on the display screen of the terminal device, or the graphical user interface may be presented through holographic projection.
[0039] In an optional embodiment, when the switching processing method in the game runs on the server, the method can be implemented and executed based on the cloud gaming system. The cloud gaming system refers to a gaming method based on cloud computing. The cloud gaming system includes a server and a client device. The running body of the game application and the game screen presentation body are separated, and the storage and operation of the switching processing method in the game are completed on the server. The game screen presentation is completed on the client, and the client is mainly used for receiving and sending game data and presenting the game screen. For example, the client can be a display device with data transmission function close to the player side, such as a mobile terminal, a TV, a computer, a handheld computer, a personal digital assistant, a head-mounted display device, etc., but the terminal device for processing game data is a server in the cloud. When playing the game, the player instructs the client to send instructions to the server, and the server controls the running of the game according to the instructions, encodes and compresses the game screen and other data, and returns it to the client through the network. Finally, the client decodes and outputs the game screen.
[0040] It should be noted that in the embodiments of the present application, the execution subject of the switching processing method in the game can be a terminal device or a server, wherein the terminal device can be a local terminal device or a client device in the aforementioned cloud game. The embodiments of the present application do not limit the type of the execution subject.
[0041] For example, in combination with the above introduction, Figure 1 A game system 100 for implementing a switching processing method in a game provided by an embodiment of the present application is shown, and the game system 100 may include at least one terminal 101, at least one server 102, and a network. The terminal 101 held by the player can be connected to the server 102 of different games through the network. The terminal is any device with computing hardware that can support and execute software application tools corresponding to the game.
[0042] In the above-mentioned game system 100, the terminal 101 is used to install and run the game application. In some cases, the game application may not be installed in advance in the terminal 101, and the player can directly access the game through a client such as a browser. The player uses the registered game account to log in to the game application, and can control the virtual character corresponding to the game account to participate in the game. When the player logs in to the game application, the terminal 101 will send a login request to the server 102, and the server 102 will verify the game account used by the player. At the same time, the server 102 determines the game mechanism corresponding to the game account according to the login request, and returns a login success notification to the terminal 101 after the verification is passed. In the process of the player participating in the game through the game application, the terminal 101 and the server 102 interact with each other, and the terminal 101 sends various information to the server 102. The server 102 determines the display data of the terminal 101 according to the stored game mechanism and the received information, and sends the display data to the terminal 101, so that the display data sent by the server 102 can be displayed to the player through the terminal 101.
[0043] In a possible application scenario, different terminals 101 may be served by different servers 102 , and the servers 102 corresponding to different terminals 101 may be the same server.
[0044] In addition, when the game system 100 includes multiple terminals, multiple servers, and multiple networks, different terminals can be connected to each other through different networks and different servers.
[0045] Among them, the terminal 101 can have one or more multi-touch screens for sensing and obtaining the input of the user through touch or sliding operations performed at multiple points on one or more touch display screens. The terminal 101 can also be connected to a keyboard and / or a mouse and / or a game controller, so that the user can perform interface operations through the keyboard and / or mouse and / or a game controller.
[0046] The network may be a wireless network or a wired network, such as a wireless network such as a wireless local area network (WLAN), a local area network (LAN), a cellular network, a 2G network, a 3G network, a 4G network, a 5G network, etc. In addition, different terminals may also use their own Bluetooth network or hotspot network to connect to other terminals or to a server, etc. In addition, the system 100 may include multiple databases, which are coupled to different servers, and game-related information may be continuously stored in the database when different players play a multi-player game online.
[0047] It should be noted that Figure 1 The game system diagram shown is only an example. The game system 100 described in the embodiment of the present application is to more clearly illustrate the technical solution of the embodiment of the present application, and does not constitute a limitation on the technical solution provided in the embodiment of the present application. A person of ordinary skill in the art can know that with the evolution of the game system and the emergence of new business scenarios, the technical solution provided in the embodiment of the present application is also applicable to similar technical problems.
[0048] The technical solution of the present application is described in detail below through specific embodiments. It should be noted that the following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described in detail in some embodiments.
[0049] The following, combined Figure 2 to Figure 7 The switching processing method in the game provided by the embodiment of the present application is introduced.
[0050] The switching processing method in the game provided by the present application provides a graphical user interface through a terminal device in a first placement position, and the graphical user interface includes at least part of the game scene and at least one UI element. Figure 2 As shown, the switching processing method in the game provided by the embodiment of the present application includes the following steps S101 to S104.
[0051] Step S101: In response to the terminal device switching from the first placement posture to the second placement posture, extracting a first scene screen corresponding to the game scene and a first element screen including the UI element.
[0052] The first placement posture is a posture in which layout information of each element is pre-set. That is, in the game development stage, layout information such as the position and size of each element has been set based on the first placement posture, and in the first placement posture, each element can be correctly displayed according to the layout information.
[0053] It can be understood that virtual games refer to applications developed according to the needs of game applications, and the types of games may include but are not limited to at least one of the following: two-dimensional (Two Dimension) game applications, three-dimensional (Three Dimension) game applications, virtual reality (Virtual Reality, VR) game applications, augmented reality (Augmented Reality, AR) game applications, and mixed reality (Mixed Reality, MR) game applications.
[0054] The game scene refers to a virtual environment provided for a virtual character to perform game behaviors. In the embodiment of the present application, the game scene may include a virtual character, which may be a virtual character controlled by a player holding the terminal device, or a virtual character controlled by other players, or a non-player character (NPC) not controlled by the player, etc. The virtual character is not limited to at least one of a virtual person and a virtual animal. The game behaviors may include but are not limited to at least one of adjusting body posture, crawling, walking, running, jumping, driving, picking up, shooting, attacking, throwing, moving, sprinting, and defending.
[0055] It should be noted that UI (User Interface) elements refer to various types of controls on the object-oriented programming platform, which are any visual elements that can be seen in the application. For example, common UI elements may include but are not limited to one or more of display boxes, buttons, words, text boxes, pictures, labels, etc. In the embodiment of the present application, the UI elements in the game refer to all visual and interactive design components in the game, which constitute the bridge of communication between players and the game. These elements not only involve visual presentation, but also directly affect how players control game characters, obtain information, and interact with the game world.
[0056] Specifically, UI elements in the game can be classified according to the frequency of use, and can be specifically divided into a first element with a frequency of use lower than a preset frequency and a second element with a frequency of use not lower than a preset frequency. The first element may include but is not limited to at least one of the following: a tab page, a progress bar, etc. Among them, the tab page may include but is not limited to a settlement page, a points display page, etc., and the tab page is used to provide game information to the player. The progress bar may include but is not limited to a progress bar for displaying the degree of task completion, a progress bar for displaying the progress of character growth, etc. The second element may include but is not limited to at least one of the following: a control, a slider, an input box, etc. Among them, the control may include, for example, an attack control, a movement control, a jump control, etc., so as to respond to the player's operation to control the virtual character in the game scene to perform corresponding game behaviors. The slider may be, for example, a slider set in the graphical user interface for adjusting the volume or brightness in response to the player's sliding operation. The input box may be, for example, an input box for the player to communicate with friends and customize input information.
[0057] In an embodiment of the present application, the first placement posture may be a posture in which the layout information of each element is pre-set, and correspondingly, the second placement posture may be a posture in which the layout information of each element is not set. For example, the first placement posture may be a horizontal screen posture, and the second placement posture may be a vertical screen posture. It should be understood that in some embodiments, the first placement posture may be a vertical screen posture, and the second placement posture may be a horizontal screen posture.
[0058] In a specific implementation, a gravity sensor can be used to detect whether the terminal device switches from the first placement posture to the second placement posture, and whether the resolution changes can also be used to determine whether the terminal device switches from the first placement posture to the second placement posture. Specifically, when the gravity sensor detects that the terminal device switches from a horizontal screen posture to a vertical screen posture, it can be determined that the terminal device switches from the first placement posture to the second placement posture, and when the resolution of the screen of the terminal device is detected to change from the first resolution to the second resolution, it can be determined that the terminal device switches from the first placement posture to the second placement posture.
[0059] In a specific implementation method, in response to the terminal device switching from the first placement position to the second placement position, the current interface data of the terminal device in the first placement position can be saved, so as to perform screen extraction based on the current interface data to obtain the first scene screen corresponding to the game scene and the first element screen containing the UI element.
[0060] It is understandable that the first scene screen and the first element screen extracted are based on the screen extracted when the terminal device is in the first placement position. The first scene screen may include information of each scene element in the game scene when the terminal device is in the first placement position. The information of each scene element may include, but is not limited to, at least one of the following: location information of the virtual character, virtual props currently held by the virtual character or virtual equipment equipped, and current arrangement information of virtual buildings or virtual obstacles. The first element screen may include the position of the UI element in the graphical user interface when the terminal device is in the first placement position.
[0061] Through this technical means, when the terminal device switches from a first placement position to a second placement position (for example, the terminal device switches from a horizontal screen position to a vertical screen position), the game scene included in the graphical user interface can be separated from the UI elements included in the graphical user interface, and the scene screen corresponding to the game scene and the element screen corresponding to the UI element can be extracted respectively, providing a basis for the terminal device in the second placement position to restore the information contained in the graphical user interface in the first placement position as much as possible.
[0062] Step S102: Scale and crop the first scene image according to the first resolution when the terminal device is in the first placement position and the second resolution when the terminal device is in the second placement position to obtain a second scene image, wherein the aspect ratio of the second scene image is the same as the aspect ratio of the second resolution.
[0063] Resolution refers to the density and distribution of pixels or dots in electronic displays, images, printouts or scanned documents, which determines the clarity and level of detail of the displayed or printed content. Resolution includes display resolution and image resolution. Display resolution refers to the number of pixels that a monitor can display, usually expressed as the number of horizontal pixels on the screen * the number of vertical pixels (for example, 1920*1080). Higher display resolution means more details can be displayed on the screen and the image is clearer. Image resolution refers to the number of pixels per unit length in a digital image. The higher the image resolution, the clearer the image.
[0064] In the embodiment of the present application, the first resolution refers to the display resolution of the screen when the terminal device is in the first placement position, and the second resolution refers to the display resolution of the screen when the terminal device is in the second placement position. The aspect ratio of the first scene picture extracted in step S101 is the same as the aspect ratio of the first resolution, that is, the size of the extracted first scene picture just matches the screen resolution requirement of the terminal device in the first placement position, there is no redundant content, and there is no missing content. The extracted first scene picture can be fully displayed on the screen of the terminal device in the first placement position, and covers the screen of the terminal device in the first placement position. For example, the aspect ratio of the first resolution and the aspect ratio of the extracted scene picture are both 16:9.
[0065] In a specific implementation, the extracted first scene picture can be scaled and cropped according to the first resolution and the second resolution to obtain a second scene picture having the same aspect ratio as the second resolution, that is, the second scene picture can be fully displayed on the screen of the terminal device in the second placement position and fill the screen of the terminal device in the second placement position.
[0066] In an optional specific implementation method, "scaling and cropping the first scene picture to obtain a second scene picture" may be: based on a scaling strategy in which the deformation degree of each scene element in the scaled scene picture is less than a preset deformation degree, scaling the first scene picture to obtain a scaled scene picture, and then cropping the scaled scene picture to obtain a second scene picture.
[0067] In an embodiment of the present application, the scaled scene image may be cropped based on a cropping strategy that retains a core scene, wherein the core scene includes at least a focal position at which the virtual camera is aimed.
[0068] It should be noted that cropping the scaled scene picture may be cropping part of the picture on the width of the scaled scene picture, or cropping part of the picture on the height of the scaled scene picture, so that the aspect ratio of the second scene picture is the same as the aspect ratio of the second resolution, so that the second scene picture can be fully displayed on the screen of the terminal device in the second placement position.
[0069] For example, the aspect ratio of the screen corresponding to the first placement posture is 16:9, and the aspect ratio of the screen corresponding to the second placement posture is 9:16. The aspect ratio of the extracted first scene picture is also 16:9. The width of the first scene picture can be reduced by a certain proportion, and the height of the first scene picture can be enlarged by a certain proportion to obtain a scaled scene picture with an aspect ratio of 10:16. Afterwards, part of the picture on the width of the scaled scene picture is cut off to obtain a second scene picture with an aspect ratio of 9:16.
[0070] Through this technical means, the first scene image corresponding to the game scene when the terminal device is in the first placement position is scaled and cropped, so that the second scene image can adapt to the screen size and direction requirements of the terminal device in the second placement position, thereby ensuring that when the terminal device switches from the first placement position to the second placement position, the scene image can present a good visual effect and restore the game scene in the first placement position as much as possible.
[0071] Step S103: split the UI element in the first element screen, and change the display mode of the split UI elements to obtain a second element screen, wherein the aspect ratio of the second element screen is the same as the aspect ratio of the second resolution.
[0072] The aspect ratio of the first element picture extracted in the aforementioned step S101 is the same as the aspect ratio of the first resolution, and the aspect ratio of the second element picture is the same as the aspect ratio of the second resolution.
[0073] In an optional implementation, the "split the UI elements in the element screen and change the display mode of the split UI elements" in step S103 can specifically be: split the UI elements according to the functional modules, and put the UI elements belonging to the same functional module together, for example, divide the UI elements in the navigation bar and put them together, divide the UI elements belonging to the same UI interface and put them together, divide the controls used to control the game behavior of the virtual characters in the game scene and put them together, and the UI interface may include but is not limited to the settlement page, backpack page, points display page, chat page, friend page, etc. This implementation has the following advantages: the relevant functional elements are concentrated together to facilitate players to quickly understand and remember the functions of each functional module, reduce learning costs, and improve usage efficiency; after the UI elements are grouped, the visual presentation of the interface is more organized, avoiding information overload, and enabling players to quickly locate the required functions; the aggregation of related functions helps to form a natural navigation path, guiding players to smoothly proceed with the game process.
[0074] In another optional implementation, "split the UI elements in the element screen, and transform the display mode of the split UI elements" in step S103 can also be specifically: split the UI elements into interactive first target elements and non-interactive second target elements according to their interactive properties, hide the second target elements, and adjust the position of the first target elements. The non-interactive second target elements may include, for example, avatars of each virtual character, the current growth status of each virtual character, etc. This implementation has the following advantages: hiding non-interactive elements can reduce interface clutter, allowing players to focus on operable UI elements, and improve operational accuracy and speed; by adjusting the position of interactive UI elements, the player's operation path can be optimized, the finger movement distance can be reduced, and the operational fluency can be improved; in addition, hiding secondary information and highlighting primary operating elements can help establish clear information priorities and guide user attention.
[0075] In another optional implementation, "splitting the UI elements in the element screen and transforming the display mode of the split UI elements" in step S103 may also specifically be: merging the functional controls for viewing at least one aspect of game information in the UI elements into a combined control, and adjusting the position of the combined control and other UI elements. This implementation has the following advantages: merging functional controls can effectively utilize limited screen space, especially on small-screen devices, which is crucial for keeping the interface simple; reducing the number of separate controls, making the interface more refreshing, and reducing the player's learning curve and operation complexity; combined controls may support more diverse interaction methods, such as sliding, expanding, etc., to increase the interactive fun between players and the interface; repositioning the combined control and other UI elements can create a more balanced visual center of gravity and enhance the overall harmony of the interface.
[0076] In another optional implementation, "split the UI elements in the element screen and change the display mode of the split UI elements" in step S103 can also be specifically: split the UI elements in the element screen and change the position of the split UI elements. This implementation has the following advantages: by changing the position of the UI elements, it can ensure that key information or common functions are in the position that is most easily accessible to the user, thereby reducing the time for searching and operating and improving work efficiency; after switching from the first placement posture to the second placement posture, reasonably changing the position of the UI elements can guide the user's line of sight, emphasize important information, and avoid visual fatigue.
[0077] For the convenience of introduction, in the embodiments of the present application, “changing the display mode of the split UI element” specifically refers to changing the position of the split UI element as an example for introduction.
[0078] It should be noted that, in the embodiment of the present application, the arrangement position of each UI element in the second element screen is adapted to the screen of the terminal device when it is in the second placement position, that is, each UI element in the second element screen can be displayed completely and without omission on the screen of the terminal device when it is in the second placement position.
[0079] Through this technical means, the UI elements in the element screen are split when the terminal device is in the first placement position, and the display mode is reset, so that the distribution position of the UI elements in the second element screen can adapt to the screen size and direction requirements of the terminal device in the second placement position, thereby ensuring that when the terminal device switches from the first placement position to the second placement position, the UI elements can be fully displayed on the screen, thereby ensuring that the player can perform normal game operations through the terminal device in the second placement position.
[0080] Step S104: displaying the second scene screen and the second element screen through the graphical user interface of the terminal device, wherein the level of the second element screen is higher than the level of the second scene screen.
[0081] After obtaining the second scene image and the second element image, the second scene image and the second element image can be displayed through the graphical user interface of the terminal device in the second placement position. The resolution of the graphical user interface in this step is the second resolution.
[0082] In digital image processing and user interface design, layer refers to the position of an image or interface element in the stacking order. The layer of elements also determines their stacking order and visibility. For example, a button or text on the top layer will block the bottom layer of the picture or background, so that users will first notice the top layer elements. Elements with higher layers will be visually in front, blocking the lower layer elements, so that they are more directly presented to the audience.
[0083] In an embodiment of the present application, the level of the second element screen is higher than the level of the second scene screen, that is, the level of the UI element is higher than the level of the game scene. In this way, in the graphical user interface provided by the terminal device in the second placement position, the UI element is always covered on the game scene. The UI element enjoys the highest visual priority and user interactivity. For the second element whose usage frequency is not less than the preset frequency, it can accept user input such as keyboard tapping, mouse clicking, finger touching, etc., and directly interact with the user.
[0084] The following Figure 3 to Figure 6 The switching processing method in the game provided in the embodiment of the present application is introduced:
[0085] like Figure 3 As shown, it is an interface diagram of an example when the terminal device is in the first placement position in the switching processing method in the game provided by an embodiment of the present application, the graphical user interface includes at least part of the game scene, the game scene includes virtual character 10 and virtual character 11, the graphical user interface also includes multiple UI elements, namely UI element 12, UI element 13, UI element 14, UI element 15, UI element 16, UI element 17, UI element 18 and UI element 19, wherein UI element 12 is the avatar corresponding to player 1 and its growth progress, UI element 13 is the avatar corresponding to player 2 and its growth progress, UI element 14 is a chat interface, the chat information on the chat interface is the chat information currently corresponding to the world channel in the virtual game, UI element 15 is a control for viewing gang information in the virtual game, UI element 16 is a control for viewing friend information in the virtual game, UI element 17 is a control for viewing team information in the virtual game, UI element 18 is a control for viewing prop information in the virtual game, and UI element 19 is a control for viewing more information in the virtual game.
[0086] like Figure 4 2 is a schematic diagram of a first scene screen and a second scene screen in a switching processing method in a game provided by an embodiment of the present application, wherein the first scene screen 20 is obtained from the attached Figure 3 The scene picture is extracted from the graphical user interface shown in the figure, and then the first scene picture 20 is scaled and cropped to retain the core scene to obtain the second scene picture 21.
[0087] like Figure 5 1 is a schematic diagram of a first element screen and a second element screen in a switching processing method in a game provided by an embodiment of the present application, wherein the first element screen 30 is a first element screen 30 obtained from the attached Figure 3 The element screen is extracted from the graphical user interface shown, and the first element screen 30 includes the distribution of each UI element when the terminal device is in a first placement position. Afterwards, each UI element in the first element screen 30 is split, and the split UI elements are position-changed to obtain the second element screen 31.
[0088] like Figure 6 , is an interface diagram after the terminal device switches from the first placement posture to the second placement posture in the switching processing method in the game provided by the embodiment of the present application, and Figure 6 In the embodiment, the second scene screen 21 and the second element screen 31 are displayed by the terminal device in the second placement position, and the level of the second element screen 31 is higher than the level of the second scene screen 21.
[0089] It should be noted that in the embodiment of the present application, the size of each element displayed by the terminal device in the second placement posture may be different from the size of each element displayed by the terminal device in the first placement posture, and the size of each element is adapted to the corresponding placement posture, wherein each element includes scene elements in the game scene and UI elements in the graphical user interface. It should be noted that in the case where the interactive mode of the interactive UI elements among the UI elements is click, the size of the interactive UI elements displayed by the terminal device in the second placement posture is the size that can be clicked by the player, so that the original interactivity between the player and the element is guaranteed before and after the posture switch.
[0090] The switching processing method in the game provided by the embodiment of the present application provides a graphical user interface through a terminal device in a first placement position, wherein the graphical user interface includes at least part of the game scene and at least one UI element, and includes the following steps: in response to the terminal device switching from the first placement position to the second placement position, extracting a first scene screen corresponding to the game scene and a first element screen including the UI element; scaling and cropping the first scene screen according to a first resolution when the terminal device is in the first placement position and a second resolution when the terminal device is in the second placement position to obtain a second scene screen, wherein the aspect ratio of the second scene screen is the same as the aspect ratio of the second resolution; splitting the UI element in the first element screen, and transforming the display mode of the split UI elements to obtain a second element screen, wherein the aspect ratio of the second element screen is the same as the aspect ratio of the second resolution; displaying the second scene screen and the second element screen through the graphical user interface of the terminal device, wherein the level of the second element screen is higher than the level of the second scene screen. In this way, when the terminal device switches from the first placement position to the second placement position, it is only necessary to extract the first scene screen and the first element screen in the graphical user interface, and adjust the size of the scene screen to obtain a second scene screen that matches the resolution of the screen in the second placement position, split the UI elements in the element screen and reset the display mode to obtain a second element screen that matches the screen size in the second placement position, and finally, superimpose the second element screen and the second scene screen on the screen of the terminal device in the second placement position, and the level of the second element screen is higher than the level of the second scene screen. In this way, the UI elements are always displayed on the top layer, with the highest visual priority and user interactivity. For interactive UI elements, they can accept user inputs such as keyboard tapping, mouse clicking, and finger touching, and directly interact with the user.
[0091] It can be seen that the switching processing method in the game provided by the embodiment of the present application does not require any design, engineering, or code-level modifications when the terminal device switches from a first placement position to a second placement position. Only the size of the scene screen at the first placement position needs to be corrected, and the display mode of the UI elements at the first placement position needs to be changed. This can achieve the switching of the graphical user interface when the terminal device switches from the first placement position to the second placement position. Therefore, the embodiment of the present application can reduce the cost of switching the virtual game between the horizontal screen mode and the vertical screen mode.
[0092] In an optional implementation, step S102 may be implemented by the following steps:
[0093] Acquire the first resolution and the second resolution;
[0094] Determining a first scaling ratio of the first scene image according to the first resolution and the second resolution;
[0095] Scaling the first scene picture according to the first scaling ratio to obtain a scaled scene picture;
[0096] Based on a preset cropping strategy, the scaled scene picture is cropped according to the second resolution to obtain a second scene picture, wherein the preset cropping strategy includes retaining the focus position of the virtual camera in the graphical user interface provided by the terminal device in the first placement position in the second scene picture.
[0097] It should be noted that the first resolution corresponding to the first placement posture and the second resolution corresponding to the second placement posture are not the same, that is, the resolutions of the horizontal screen and the vertical screen are different, which mainly depends on the design and screen size of the terminal device. When the terminal device is rotated, the pixel values of the width and height will be interchanged, resulting in a change in the resolution expression.
[0098] For example, the resolution of a mobile terminal device in landscape orientation is 1080*1920 pixels, which means that the width of the screen is 1080 pixels and the height is 1920 pixels. When the phone is rotated to portrait orientation, the resolution may become 1920*1080 pixels. Although the total number of pixels does not change (all 2073600 pixels), the way the resolution is expressed changes with the direction of the screen.
[0099] In the embodiment of the present application, first, a first resolution corresponding to the screen in the first placement position and a second resolution corresponding to the screen in the second placement position can be obtained respectively.
[0100] For example, the first resolution at the first placement position is w1*h1, and the second resolution at the second placement position is w2*h2.
[0101] Afterwards, a first scaling ratio of the first scene image is determined based on the first resolution and the second resolution. Specifically, the ratio of the component of the second resolution in the target dimension to the component of the first resolution in the target dimension can be determined as the first scaling ratio, where the target dimension is one of the width and height of the resolution.
[0102] For example, if the ratio of the width component of the second resolution w2*h2 to the width component of the first resolution w1*h1 is determined as the first scaling ratio, the first scaling ratio is w2 / w1; if the ratio of the height component of the second resolution w2*h2 to the height component of the first resolution w1*h1 is determined as the first scaling ratio, the first scaling ratio is h2 / h1.
[0103] Thereafter, the first scene picture is scaled according to the first scaling ratio to obtain the scaled scene picture. Specifically, the width and height of the first scene picture are respectively multiplied by the first scaling ratio to obtain the scaled scene picture.
[0104] For example, consistent with the first resolution w1*h1, the size of the scene picture is also w1*h1. If the first scaling ratio is w2 / w1, the size of the scaled scene picture is: width w2, height h1*w2 / w1; if the first scaling ratio is h2 / h1, the size of the scaled scene picture is: width w1*h2 / h1, height h2.
[0105] Finally, based on a preset cropping strategy, the scaled scene image is cropped according to the second resolution to obtain a second scene image, wherein the preset cropping strategy includes retaining the focus position of the virtual camera in the graphical user interface provided by the terminal device in the first placement position in the second scene image. Specifically, the target size to be cropped can be calculated based on the second resolution as the reference size, and the area of the target size can be cropped from the scaled scene image based on the preset cropping strategy to obtain the second scene image, so as to ensure that the second scene image fits the screen of the second resolution.
[0106] It should be noted that a virtual camera is set up in a virtual game. A virtual camera refers to a camera assumed in the software of an electronic device. It is a tool for expressing viewpoints in a three-dimensional virtual environment. During the game, the game scene displayed is the picture taken by the virtual camera. The focus position of the virtual camera is often located in the center of the picture, which is usually also the visual focus of the player.
[0107] For example, if the size of the scene picture after scaling is: width w2, height h1*w2 / w1, then it is necessary to crop the target area with size h1*w2 / w1-h2 from the height; if the size of the scene picture after scaling is: width w1*h2 / h1, height h2, then it is necessary to crop the target area with size w1*h2 / h1-w2 from the width, so as to obtain a second scene picture with size w2*h2.
[0108] In an optional implementation, when cropping the scaled scene image, the cropping may be performed from the edge of the image, so that the center of the cropped scene image is consistent with the center of the scaled scene image as much as possible. For example, if the scaled scene image exceeds in width, the cropping may be performed from the left and right sides respectively, and if the scaled scene image exceeds in height, the cropping may be performed from the top and bottom ends respectively.
[0109] Through the above steps, the first scene screen on the terminal device in the first placement position can be accurately and efficiently adjusted to the second scene screen that is adapted to the screen of the terminal device in the second placement position, thereby ensuring that the game scene can be correctly filled and adapted to the new screen size and screen orientation.
[0110] In an optional implementation, the first placement posture is a horizontal screen posture, and the second placement posture is a vertical screen posture. The above step of "cropping the scaled scene image according to the second resolution to obtain a second scene image" can be implemented by the following steps:
[0111] Cropping the scaled scene picture according to the second resolution to obtain a cropped scene picture;
[0112] The position of the virtual camera in the cropped scene picture is moved so that the focus position is located in a target area to obtain a second scene picture, wherein the target area is one of the upper half area and the lower half area of the cropped scene picture.
[0113] It should be noted that the aspect ratio of the cropped scene image is the same as the aspect ratio of the second resolution, that is, the cropped scene image can be displayed completely without loss on the screen of the terminal device in the second placement position, and the cropped scene image can cover the entire screen of the terminal device in the second placement position.
[0114] When the second placement posture is a vertical screen posture, in the embodiment of the present application, after the zoomed scene screen is cropped to obtain a cropped scene screen, the position of the virtual camera can be moved so that the focus position corresponding to the virtual camera moves from the center of the screen to the upper half area, or to the lower half area. When the focus position of the virtual camera is a virtual character, the virtual camera can be moved based on the principle of moving the virtual character to the target area.
[0115] In a specific implementation, the virtual camera can be controlled to move based on a movement strategy of moving the focus position to the center of the target area. In this way, when the second scene is displayed on the screen of the terminal device in a vertical position, the focus position of the virtual camera can be displayed in the center of the target area, thereby improving the player's gaming experience in the vertical screen.
[0116] The following are specific steps for an optional way to move the virtual camera:
[0117] First, determine the regional center of the target area;
[0118] Secondly, modify the position attributes of the camera to change its position in the three-dimensional space so that the focus position in the cropped scene image moves to the center of the area; specifically, modifying the position attributes of the camera to change its position in the three-dimensional space may include: adjusting the coordinate data of the virtual camera on the three-dimensional coordinate axis and the shooting angle of the virtual camera.
[0119] In an optional implementation, the first placement posture is a horizontal screen posture, and the second placement posture is a vertical screen posture. The "splitting the UI element in the first element screen" in step S103 can be implemented by the following steps:
[0120] The UI element is divided into a first element whose usage frequency is lower than a preset frequency and a second element whose usage frequency is not lower than the preset frequency.
[0121] The step of "changing the position of the split UI element to obtain a second element screen" can be implemented by the following steps S103-1:
[0122] Step S103 - 1 : placing the first element in the upper half of the target canvas, and placing the second element in the lower half of the target canvas, to obtain a second element picture, wherein the aspect ratio of the target canvas is the same as the aspect ratio of the second resolution.
[0123] As can be seen from the above introduction, the UI element can be divided into a first element with a usage frequency lower than a preset frequency and a second element with a usage frequency not lower than the preset frequency. In the embodiment of the present application, the UI element can be split into the first element and the second element according to the historical usage frequency data. Afterwards, the positions of the first element and the second element are transformed respectively, wherein the first element is transformed to the upper half of the target canvas having the same aspect ratio as the aspect ratio of the second resolution, and the second element is transformed to the lower half of the target canvas.
[0124] It should be noted that the aspect ratio of the target canvas is the same as the aspect ratio of the second resolution, which means that the target canvas can be displayed completely without loss on the screen of the terminal device in the second placement position, and the target canvas can cover the screen of the terminal device in the second placement position. The target canvas is an original blank canvas without any elements added, with a specific width and height. If the aspect ratio of the second resolution is 9:16, then the aspect ratio of the target canvas is also 9:16.
[0125] After the first element and the second element are placed on the target canvas respectively, a second element screen can be obtained, that is, the size of the second element screen is consistent with the size of the screen of the terminal device in the second placement position. In other words, the second element screen is a screen obtained by placing the first element and the second element on the target canvas, which retains the aspect ratio of the target canvas and contains specific visual content (i.e., the first element and the second element).
[0126] The upper half of the target canvas is the same size as the upper half of the first scene screen, and both correspond to the upper half of the vertical screen. The lower half of the target canvas is the same size as the lower half of the first scene screen, and both correspond to the lower half of the vertical screen. That is to say, when the target canvas and the scene screen are simultaneously displayed on the screen of the terminal device in the second placement position, the upper half of the target canvas overlaps with the upper half of the first scene screen, and the first element in the upper half of the target canvas will block the scene element in the same position of the first scene screen. The lower half of the target canvas overlaps with the lower half of the first scene screen, and the second element in the lower half of the target canvas will also block the scene element in the same position of the first scene screen.
[0127] In an embodiment of the present application, a first element whose usage frequency is lower than a preset frequency is placed in the upper half of the target canvas whose aspect ratio is the same as that of the vertical screen, and a second element whose usage frequency is not lower than the preset frequency is placed in the lower half of the target canvas. In this way, when the second scene image is displayed on the screen of the terminal device in the second placement position, the first element with a lower usage frequency will be presented in the upper half of the vertical screen, and the second element with a higher usage frequency will be presented in the lower half of the vertical screen.
[0128] This setting has the following advantages: on the one hand, the visual presentation is separated. The upper half of the vertical screen usually has a wider field of view, and the lower half of the vertical screen is convenient for players to operate. The first element, which is used less frequently and mainly used to display game information, is displayed in the upper half of the vertical screen. While ensuring the basic interactive operation of the player, the upper half of the vertical screen can be fully utilized to attract the player's attention and enhance the visual impact. The second element, which is used more frequently, is displayed in the lower half of the vertical screen to facilitate the player's input operation and improve the convenience of operation. On the other hand, the display positions of the first element, which is used less frequently, and the second element, which is used more frequently, are separated from each other. This layout helps to clearly distinguish the primary and secondary relationship of information. The upper half of the vertical screen is mainly used as a display area to transmit game information while ensuring the basic operation of the player. The lower half of the vertical screen is used as the main interactive area to ensure that the player can quickly understand and operate. It can be seen that this setting can take into account both the user experience and the presentation of the game content. While reducing the cost of switching between horizontal and vertical screens of virtual games, it can effectively improve the usability and user appeal of virtual games in the vertical screen position.
[0129] The following describes in detail placing the first element in the upper half of the target canvas and placing the second element in the lower half of the target canvas:
[0130] In an optional implementation, "placing the first element in the upper half of the target canvas" in step S103-1 may be implemented in the following manner:
[0131] Scaling the first element according to the size of the upper half area of the target canvas and the original size of the first element to obtain a scaled first element, wherein the scaled first element can be completely presented in the upper half area;
[0132] The scaled first element is placed in the upper half of the target canvas.
[0133] In a specific implementation, when the first element is placed in the upper half of the target canvas, in addition to changing the position of the first element, the size of the first element may also be changed so that the appearance of the first element is more compatible with the upper half of the vertical screen. Specifically, according to the size of the upper half of the target canvas and the original size of the first element, the first element may be scaled based on the size adjustment strategy that the changed size of the first element can be accommodated in the upper half of the target canvas to obtain the scaled first element.
[0134] In this way, when the original size of the first element in the horizontal screen interface is too large, it can effectively avoid the problem that the first element of the original size in the upper half of the target canvas is too abrupt or the upper half of the target canvas cannot accommodate the first element of the original size.
[0135] In an optional implementation, the first element includes a window panel and a window element in the window panel, and the above step of "scaling the first element according to the size of the upper half of the target canvas and the original size of the first element to obtain the scaled first element" can be implemented in the following manner:
[0136] Determining a second scaling ratio of the first element according to a size of an upper half area of the target canvas and a size of the window panel when the terminal device is in the first placement posture;
[0137] According to the second scaling ratio, the window panel and the window element are scaled respectively to obtain a scaled first element, wherein the scaled first element includes the scaled window panel and the scaled window element in the scaled window panel.
[0138] The window panel refers to a container for accommodating the game information to be displayed, and the game information to be displayed is the window element. The window element and the window panel are combined to form the aforementioned tab page, which can be, for example, a settlement page, a points display page, and other pages. In other words, the window panel can be a panel for accommodating settlement information, or the window panel can be a panel for accommodating points information, and so on.
[0139] In an embodiment of the present application, when the first element includes the window panel and the window element contained therein, the second scaling ratio of the first element can be determined according to the size of the upper half area of the target canvas and the size of the window panel when the terminal device is in the first placement position. Specifically, the ratio of the width of the upper half area of the target canvas to the width of the window panel when the terminal device is in the first placement position can be determined as the scaling ratio of the first element in width, the ratio of the height of the upper half area of the target canvas to the height of the window panel when the terminal device is in the first placement position can be determined as the scaling ratio of the first element in height, and the scaling ratio of the first element in width and the scaling ratio of the first element in height can be determined as the second scaling ratio of the first element.
[0140] For example, the size of the upper half of the target canvas is 9 cm in width and 8 cm in height, and when the terminal device is in the first placement position, the size of the window panel is 12 cm in width and 7 cm in height. It can be determined that the scaling ratio of the first element in width is 3 / 4, and the scaling ratio of the first element in height is 8 / 7.
[0141] In a specific implementation, the size of the window panel and the size of the window element contained in the window panel can be scaled according to the second scaling ratio to obtain a scaled window panel and a scaled window element. Furthermore, the scaled window element can be placed in the scaled window panel, and the scaled window panel with the scaled window element can be placed in the upper half of the target canvas.
[0142] With this setting method, the second scaling ratio of the first element is first determined by the original size of the window panel and the size of the upper half of the target canvas. Then, the window panel and the window elements contained in the window panel are scaled proportionally according to the second scaling ratio, so that visual consistency can be maintained between switching between horizontal and vertical screens. In addition, data calculation during switching is simplified, and there is no need to calculate the corresponding scaling ratio for each window element. Each window element can be adaptively scaled proportionally only by the original size of the window panel and the size of the upper half of the target canvas, thereby reducing the cost of page reconstruction.
[0143] In an optional implementation, the second element includes a first chat interface and a functional control for viewing at least one aspect of game information, and the "placing the second element in the lower half of the target canvas" in step S103-1 can be implemented according to the following steps:
[0144] Obtaining chat information currently contained in the first chat interface;
[0145] Dividing the lower half of the target canvas into a first sub-area and a second sub-area;
[0146] A second chat interface including the chat information is displayed in the first sub-area, and the function controls are arranged in the second sub-area.
[0147] The first chat interface is an interface set up in the virtual game to support players to conduct instant messaging in the game or application. The first chat interface usually includes chat elements such as an input box, a message sending control, a history message display area, and optional quick reply content. These chat elements are used to support the interactive communication function in the game and are also key components in UI design to promote social interaction.
[0148] The functional control refers to a control set in the graphical user interface for viewing at least one aspect of game information. Figure 3 The functional controls are introduced, and may include but are not limited to controls for viewing gang information in a virtual game, controls for viewing friend information in a virtual game, controls for viewing team information in a virtual game, controls for viewing prop information in a virtual game, controls for viewing more information in a virtual game, etc.
[0149] In a specific implementation, when the terminal device switches from a first placement position to a second placement position, the interface data in the first chat interface can be saved. The interface data in the first chat interface can feedback the chat information currently contained in the first chat interface. The chat information can be the corresponding chat information on the world channel, the corresponding chat information on the current battle channel, or the chat information between the player and his friends. This application does not limit the specific content of the chat information.
[0150] In an embodiment of the present application, the lower half of the target canvas can be divided into a first sub-area and a second sub-area, and a second chat interface containing the chat information is displayed in the first sub-area, and the function controls are arranged in the second sub-area. The second sub-area can be an area with a smaller height at the bottom of the lower half of the target canvas, and the first sub-area is an area in the lower half of the target canvas except the second sub-area, so that the function controls are arranged at the bottom of the interface of the vertical screen, and the chat interface is displayed in the area of the lower half of the vertical screen except the bottom of the interface. Exemplarily, the first sub-area can be the upper 3 / 4 area in the lower half of the target canvas, and the second sub-area can be the lower 1 / 4 area in the lower half of the target canvas, so that the chat interface is displayed in the upper 3 / 4 area in the lower half of the vertical screen, and the function controls are displayed in the lower 1 / 4 area in the lower half of the vertical screen.
[0151] In this way, the chat interface and function controls are separated and displayed in different positions in the lower half of the vertical screen, which allows players to quickly identify and understand the functions of each area in the lower half of the vertical screen, reducing the cost of players looking for specific functions and facilitating intuitive operation. In addition, this setting method also helps to establish a clear interface hierarchy, enhance the aesthetics of the interface, and avoid an overly cluttered interface.
[0152] Further, in the embodiment of the present application, when the second element includes a chat control and a functional control for viewing at least one aspect of game information, placing the second element in the lower half of the target canvas may also be implemented according to the following steps:
[0153] Obtain n chat messages corresponding to the chat control at the current moment;
[0154] Dividing the lower half of the target canvas into a first sub-area and a second sub-area;
[0155] A chat interface including the n chat messages is displayed in the first sub-area, and the function controls are arranged in the second sub-area.
[0156] With this setting, when only the chat control is displayed in the horizontal screen position without displaying the corresponding chat window, n chat messages corresponding to the chat control at the current moment are obtained, and the chat interface containing n chat messages is directly displayed in the vertical screen position. This fully utilizes the convenience of vertical screen input, allowing players to control virtual characters to perform game behaviors while chatting, making the chat experience more convenient.
[0157] In an optional implementation, the step of "displaying the second chat interface containing the chat information in the first sub-area" can be implemented by the following steps:
[0158] generating a second chat interface having the same size as that of the first sub-area and at least including the chat information;
[0159] Place the second chat interface in the first sub-area.
[0160] In an embodiment of the present application, the second chat interface can be generated according to the size of the first sub-area, and the second chat interface contains at least the chat information currently contained in the first chat interface, that is, the chat information contained in the second chat interface (hereinafter referred to as the second chat information) can be more than the chat information currently contained in the first chat interface (hereinafter referred to as the first chat information), and the size ratio of the second chat information to the second chat interface can be the same as the size ratio of the first chat information to the first chat interface. Afterwards, the generated second chat interface is placed in the first sub-area, so that when the second element screen is displayed on the screen of the terminal device in a vertical screen posture, the second chat interface containing the chat information with a size adapted will be displayed in the corresponding area of the vertical screen, giving full play to the convenience of vertical screen input, making it convenient for players to communicate with other players in the vertical screen interface, and ensuring the sociality in the virtual game.
[0161] like Figure 7 , which is a schematic diagram of interface switching of a switching processing method in a game provided by an embodiment of the present application, Figure 7 Including (7-a), (7-b), (7-c) and (7-d). Among them, (7-a) is the game screen under the window panel, and the game screen is in the attached Figure 3It has been explained in the introduction of , and will not be repeated here; (7-b) is an interface diagram in which a window panel is superimposed on the game screen, and a window panel 40 with virtual items is superimposed in the graphical user interface, and the window panel 40 contains multiple window elements, and the multiple window elements include suits, costumes, props and other elements in the virtual game; then, the first scene screen corresponding to the game scene is extracted and scaled and cropped, and further, the virtual camera is moved to obtain the second scene screen (7-c), (7-c) includes an upper half area 50 and a lower half area 51. After moving the virtual camera, the virtual character 11 aimed at by the virtual camera is located in the upper half area 50; then, the first element screen containing the UI element is extracted and the position and size of the UI element are transformed to place the UI element in the target canvas with the same size as the vertical screen, and the second element screen (7-d) is obtained. The second element screen (7-d) includes The upper area 50 and the lower area 51 are enclosed, and the lower area 51 includes a first sub-area 52 and a second sub-area 53. The window panel 41, UI element 12 and UI element 13, which are less frequently used, are placed in the upper area 50, and the chat interface 54, which is more frequently used, is placed in the first sub-area 52. The function controls (UI element 15, UI element 16, UI element 17, UI element 18 and UI element 19) are placed in the second sub-area 53; finally, the second scene screen (7-c) and the second element screen (7-d) are superimposed and displayed in the vertical screen interface. The level of the second scene screen (7-c) is lower than that of the second element screen (7-d). The window panel 41, UI element 12 and UI element 13 displayed in the upper area 50 of the vertical screen interface block the scene elements in the upper area 50, and the blocked scene elements include virtual characters 10 and 11.
[0162] It should be noted that, in the horizontal screen state, the window panel and window elements usually occupy most of the area of the graphical user interface, and the chat interface usually occupies a small area in the graphical user interface. The method provided in the embodiment of the present application, if the interaction between the player and the UI element in this scheme is a click operation, then when the horizontal screen is converted to the vertical screen, the window panel and window elements can be reduced in size to have a certain clickability at the reduced size to adapt to the upper half of the vertical screen. In this way, the window panels and window elements with less frequent use displayed in the upper half of the vertical screen are smaller in size after being reduced, and are used to display game information while meeting the basic operations of the players; and the chat interface and the chat elements contained therein are enlarged to adapt to other areas in the lower half of the vertical screen except the bottom of the interface. In this way, the enlarged and highlighted chat interface and chat elements are convenient for players to operate, thereby making full use of the characteristics of the vertical screen.
[0163] In an optional implementation manner, the switching processing method in the game provided in the embodiment of the present application may also include the following steps:
[0164] In response to an instruction to exit the game, saving current interface data of the terminal device;
[0165] In response to an instruction to re-log in to the game within a preset time period, when the placement position of the terminal device when re-logging in to the game is the same as the placement position of the terminal device when exiting the game, the interface indicated by the interface data is displayed on the terminal device.
[0166] In an embodiment of the present application, when the game is exited on the terminal device, the current interface data of the terminal device can be saved, and the interface data includes information of each element, specifically including but not limited to the status of the game-related interface, the chat information in the chat interface, and the position of each scene element in the game scene.
[0167] When the terminal device logs back into the game within the preset period, the interface indicated by the interface data is rendered and displayed on the terminal device while the screen orientation remains unchanged, that is, the same interface is displayed before and after the re-login. It should be noted that the terminal device re-logging into the game within the preset period includes the following two situations: the player controls the game account on the terminal device to exit the game and re-login the game account on the terminal device within the preset period, and the game account logged in on the terminal device is disconnected and reconnects to the game within the preset period.
[0168] With this setting, when the screen orientation remains unchanged, the interface data before re-login is used to render and display the interface after re-login. On the one hand, the interface after re-login can be displayed quickly, and on the other hand, the same interface before and after re-login can bring a good visual experience.
[0169] Corresponding to the switching processing method in the game provided in the first embodiment of the present application, the second embodiment of the present application further provides a switching processing device in the game, which provides a graphical user interface through a terminal device in a first placement position, wherein the graphical user interface includes at least part of the game scene and at least one UI element; Figure 8 As shown, the switching processing device 800 in the game includes:
[0170] An extraction unit 801 is used for extracting a first scene screen corresponding to the game scene and a first element screen including the UI element in response to the terminal device switching from the first placement posture to the second placement posture;
[0171] A first processing unit 802 is configured to scale and crop the first scene image according to a first resolution when the terminal device is in the first placement position and a second resolution when the terminal device is in the second placement position, so as to obtain a second scene image, wherein an aspect ratio of the second scene image is the same as an aspect ratio of the second resolution;
[0172] The second processing unit 803 is used to split the UI element in the first element screen, and transform the display mode of the split UI elements to obtain a second element screen, wherein the aspect ratio of the second element screen is the same as the aspect ratio of the second resolution;
[0173] The display unit 804 is used to display the second scene screen and the second element screen through the graphical user interface of the terminal device, wherein the level of the second element screen is higher than the level of the second scene screen.
[0174] Optionally, the first processing unit 802 is specifically configured to:
[0175] Acquire the first resolution and the second resolution;
[0176] Determining a first scaling ratio of the first scene image according to the first resolution and the second resolution;
[0177] Scaling the first scene picture according to the first scaling ratio to obtain a scaled scene picture;
[0178] Based on a preset cropping strategy, the scaled scene picture is cropped according to the second resolution to obtain a second scene picture, wherein the preset cropping strategy includes retaining the focus position of the virtual camera in the graphical user interface provided by the terminal device in the first placement position in the second scene picture.
[0179] Optionally, the first placement posture is a horizontal screen posture, and the second placement posture is a vertical screen posture, and the first processing unit 802 is specifically used to:
[0180] Cropping the scaled scene picture according to the second resolution to obtain a cropped scene picture;
[0181] The position of the virtual camera in the cropped scene picture is moved so that the focus position is located in a target area to obtain a second scene picture, wherein the target area is one of the upper half area and the lower half area of the cropped scene picture.
[0182] Optionally, the second processing unit 803 is specifically configured to:
[0183] Transform the positions of the split UI elements.
[0184] Optionally, the second processing unit 803 is specifically configured to:
[0185] Splitting the UI element into a first element with a usage frequency lower than a preset frequency and a second element with a usage frequency not lower than the preset frequency;
[0186] The first element is placed in the upper half of the target canvas, and the second element is placed in the lower half of the target canvas to obtain a second element picture, wherein the aspect ratio of the target canvas is the same as the aspect ratio of the second resolution.
[0187] Optionally, the second processing unit 803 is specifically configured to:
[0188] Scaling the first element according to the size of the upper half area of the target canvas and the original size of the first element to obtain a scaled first element, wherein the scaled first element can be completely presented in the upper half area;
[0189] The scaled first element is placed in the upper half of the target canvas.
[0190] Optionally, the first element includes a window panel and a window element in the window panel, and the second processing unit 803 is specifically configured to:
[0191] Determining a second scaling ratio of the first element according to a size of an upper half area of the target canvas and a size of the window panel when the terminal device is in the first placement posture;
[0192] According to the second scaling ratio, the window panel and the window element are scaled respectively to obtain a scaled first element, wherein the scaled first element includes the scaled window panel and the scaled window element in the scaled window panel.
[0193] Optionally, the second element includes a first chat interface and a functional control for viewing at least one aspect of game information, and the second processing unit 803 is specifically configured to:
[0194] Obtaining chat information currently contained in the first chat interface;
[0195] Dividing the lower half of the target canvas into a first sub-area and a second sub-area;
[0196] A second chat interface including the chat information is displayed in the first sub-area, and the function controls are arranged in the second sub-area.
[0197] Optionally, the second processing unit 803 is specifically configured to:
[0198] generating a second chat interface having the same size as that of the first sub-area and including the chat information;
[0199] Place the second chat interface in the first sub-area.
[0200] Optionally, the display unit 804 is further used for:
[0201] In response to an instruction to exit the game, saving current interface data of the terminal device;
[0202] In response to an instruction to re-log in to the game within a preset time period, when the placement position of the terminal device when re-logging in to the game is the same as the placement position of the terminal device when exiting the game, the interface indicated by the interface data is displayed on the terminal device.
[0203] Corresponding to the switching processing method in the game provided in the first embodiment of the present application, the third embodiment of the present application further provides an electronic device for switching processing in the game. Fig. 9 As shown, the electronic device 900 includes: a processor 901; and a memory 902, which is used to store a program of a switching processing method in a game. After the device is powered on and the program of the switching processing method in the game is run by the processor, the following steps are performed:
[0204] In response to the terminal device switching from the first placement posture to the second placement posture, extracting a first scene screen corresponding to the game scene and a first element screen including the UI element;
[0205] Scaling and cropping the first scene picture according to the first resolution when the terminal device is in the first placement posture and the second resolution when the terminal device is in the second placement posture to obtain a second scene picture, wherein the aspect ratio of the second scene picture is the same as the aspect ratio of the second resolution;
[0206] Splitting the UI element in the first element screen, and changing the display mode of the split UI elements to obtain a second element screen, wherein the aspect ratio of the second element screen is the same as the aspect ratio of the second resolution;
[0207] The second scene screen and the second element screen are displayed through the graphical user interface of the terminal device, wherein the level of the second element screen is higher than the level of the second scene screen.
[0208] Corresponding to the switching processing method in the game provided in the first embodiment of the present application, the fourth embodiment of the present application provides a computer-readable storage medium storing a program of the switching processing method in the game, the program is executed by a processor to perform the following steps:
[0209] In response to the terminal device switching from the first placement posture to the second placement posture, extracting a first scene screen corresponding to the game scene and a first element screen including the UI element;
[0210] Scaling and cropping the first scene picture according to the first resolution when the terminal device is in the first placement posture and the second resolution when the terminal device is in the second placement posture to obtain a second scene picture, wherein the aspect ratio of the second scene picture is the same as the aspect ratio of the second resolution;
[0211] Splitting the UI element in the first element screen, and changing the display mode of the split UI elements to obtain a second element screen, wherein the aspect ratio of the second element screen is the same as the aspect ratio of the second resolution;
[0212] The second scene screen and the second element screen are displayed through the graphical user interface of the terminal device, wherein the level of the second element screen is higher than the level of the second scene screen.
[0213] It should be noted that for the detailed description of the devices, electronic devices and computer-readable storage media provided in the second, third and fourth embodiments of the present application, reference can be made to the relevant description of the first embodiment of the present application, and no further details will be given here.
[0214] Although the present application is disclosed as above in the form of a preferred embodiment, it is not intended to limit the present application. Any technical personnel in this field may make possible changes and modifications without departing from the spirit and scope of the present application. Therefore, the scope of protection of the present application shall be based on the scope defined by the claims of the present application.
[0215] In a typical configuration, a node device in a blockchain includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.
[0216] The memory may include non-permanent storage in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.
[0217] 1. Computer-readable media includes permanent and non-permanent, removable and non-removable media that can be used to store information by any method or technology. Information can be computer-readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), random access memory (RAM) of other attributes, read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage media or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined in this article, computer-readable media does not include non-transitory media such as modulated data signals and carrier waves.
[0218] 2. Those skilled in the art should understand that the embodiments of the present application can be provided as methods, systems or computer program products. Therefore, the present application can take the form of a complete hardware embodiment, a complete software embodiment or an embodiment combining software and hardware. Moreover, the present application can take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.
[0219] Although the present application is disclosed as above in the form of a preferred embodiment, it is not intended to limit the present application. Any technical personnel in this field may make possible changes and modifications without departing from the spirit and scope of the present application. Therefore, the scope of protection of the present application shall be based on the scope defined by the claims of the present application.
Claims
1. A switching processing method in a game, characterized in that: Providing a graphical user interface through a terminal device in a first placement posture, wherein the graphical user interface includes at least a portion of a game scene and at least one UI element; the method includes: In response to the terminal device switching from the first placement posture to the second placement posture, extracting a first scene screen corresponding to the game scene and a first element screen including the UI element; Scaling and cropping the first scene picture according to the first resolution when the terminal device is in the first placement posture and the second resolution when the terminal device is in the second placement posture to obtain a second scene picture, wherein the aspect ratio of the second scene picture is the same as the aspect ratio of the second resolution; Splitting the UI element in the first element screen, and changing the display mode of the split UI elements to obtain a second element screen, wherein the aspect ratio of the second element screen is the same as the aspect ratio of the second resolution; The second scene screen and the second element screen are displayed through the graphical user interface of the terminal device, wherein the level of the second element screen is higher than the level of the second scene screen.
2. The method according to claim 1, characterized in that The step of scaling and cropping the first scene image according to the first resolution when the terminal device is in the first placement position and the second resolution when the terminal device is in the second placement position to obtain the second scene image includes: Acquire the first resolution and the second resolution; Determining a first scaling ratio of the first scene image according to the first resolution and the second resolution; Scaling the first scene picture according to the first scaling ratio to obtain a scaled scene picture; Based on a preset cropping strategy, the scaled scene picture is cropped according to the second resolution to obtain a second scene picture, wherein the preset cropping strategy includes retaining the focus position of the virtual camera in the graphical user interface provided by the terminal device in the first placement position in the second scene picture.
3. The method according to claim 2, characterized in that The first placement posture is a horizontal screen posture, the second placement posture is a vertical screen posture, and the scaling the scene picture is cropped according to the second resolution to obtain a second scene picture, including: Cropping the scaled scene picture according to the second resolution to obtain a cropped scene picture; The position of the virtual camera in the cropped scene picture is moved so that the focus position is located in a target area to obtain a second scene picture, wherein the target area is one of the upper half area and the lower half area of the cropped scene picture.
4. The method according to claim 1, characterized in that: The changing of the display mode of the split UI elements includes: Transform the positions of the split UI elements.
5. The method according to claim 4, characterized in that The splitting of the UI element in the first element screen includes: Splitting the UI element into a first element with a usage frequency lower than a preset frequency and a second element with a usage frequency not lower than the preset frequency; The step of changing the position of the split UI element to obtain a second element screen includes: The first element is placed in the upper half of the target canvas, and the second element is placed in the lower half of the target canvas to obtain a second element picture, wherein the aspect ratio of the target canvas is the same as the aspect ratio of the second resolution.
6. The method according to claim 5, characterized in that Placing the first element in the upper half of the target canvas includes: Scaling the first element according to the size of the upper half area of the target canvas and the original size of the first element to obtain a scaled first element, wherein the scaled first element can be completely presented in the upper half area; The scaled first element is placed in the upper half of the target canvas.
7. The method according to claim 6, characterized in that The first element includes a window panel and a window element in the window panel, and scaling the first element according to the size of the upper half area of the target canvas and the original size of the first element to obtain the scaled first element includes: Determining a second scaling ratio of the first element according to a size of an upper half area of the target canvas and a size of the window panel when the terminal device is in the first placement posture; According to the second scaling ratio, the window panel and the window element are scaled respectively to obtain a scaled first element, wherein the scaled first element includes the scaled window panel and the scaled window element in the scaled window panel.
8. The method according to claim 5, characterized in that The second element includes a first chat interface and a functional control for viewing at least one aspect of game information, and placing the second element in the lower half area of the target canvas includes: Obtaining chat information currently contained in the first chat interface; Dividing the lower half of the target canvas into a first sub-area and a second sub-area; A second chat interface including the chat information is displayed in the first sub-area, and the function controls are arranged in the second sub-area.
9. The method according to claim 8, characterized in that The displaying the second chat interface including the chat information in the first sub-area includes: generating a second chat interface having the same size as that of the first sub-area and including the chat information; Place the second chat interface in the first sub-area.
10. The method according to claim 1, characterized in that The method further comprises: In response to an instruction to exit the game, saving current interface data of the terminal device; In response to an instruction to re-log in to the game within a preset time period, when the placement position of the terminal device when re-logging in to the game is the same as the placement position of the terminal device when exiting the game, the interface indicated by the interface data is displayed on the terminal device.
11. A switching processing device in a game, characterized in that: Providing a graphical user interface through a terminal device in a first placement posture, wherein the graphical user interface includes at least a portion of a game scene and at least one UI element; the apparatus includes: an extraction unit, configured to extract a first scene screen corresponding to the game scene and a first element screen including the UI element in response to the terminal device switching from the first placement posture to a second placement posture; A first processing unit is configured to scale and crop the first scene picture according to a first resolution when the terminal device is in the first placement position and a second resolution when the terminal device is in the second placement position to obtain a second scene picture, wherein an aspect ratio of the second scene picture is the same as an aspect ratio of the second resolution; a second processing unit, configured to split the UI element in the first element screen, and transform the display mode of the split UI elements to obtain a second element screen, wherein the aspect ratio of the second element screen is the same as the aspect ratio of the second resolution; A display unit is used to display the second scene screen and the second element screen through the graphical user interface of the terminal device, wherein the level of the second element screen is higher than the level of the second scene screen.
12. An electronic device, characterized in that: include: processor; as well as The memory is used to store a data processing program. After the electronic device is powered on and the program is run by the processor, the method according to any one of claims 1 to 10 is executed.
13. A computer-readable storage medium, characterized in that: A data processing program is stored, and the program is run by a processor to execute the method according to any one of claims 1 to 10.