Visual programming method, apparatus, device, medium and program product

Abstract

The application discloses a visual programming method and device, equipment, medium and program product, and relates to the field of human-computer interaction. The method comprises the following steps: displaying a visual programming interface; in response to receiving a type creation operation on the visual programming interface, creating a custom data type; and in response to receiving a variable creation operation based on the custom data type, displaying a first variable code block. The visual programming interface allows a user to create a custom data type and create a variable code block based on the custom data type containing multiple attributes, so that data associated with the multiple attributes respectively can be operated as a whole through the variable code block, the operation steps of creating and using multiple variables one by one when multiple attribute data is needed are avoided, and the operation process is simplified, thereby improving the development efficiency in visual programming.

Description

Technical Field

[0001] This application relates to the field of human-computer interaction, and in particular to a visual programming method, apparatus, device, medium, and program product. Background Technology

[0002] In visual programming, users can use graphical elements (such as programming blocks) to build complex logical processes. These graphical elements usually represent various programming concepts, such as variables and functions. Among the graphical elements representing variables, data types are an indispensable part.

[0003] In related technologies, when a user creates a programming block representing a variable, they can select the target data type from multiple preset data types provided by the visual programming platform and create a variable block. This variable block is used to represent a variable of the target data type. For example, if the data type is selected as string, then the variable block represents a string type variable.

[0004] However, the variable types represented by variable blocks in related technologies are relatively limited. When users need to use multi-dimensional data to implement program functions, they need to set multiple variables, which increases the number of steps in creating and using variables and reduces development efficiency. Summary of the Invention

[0005] This application provides a visual programming method, apparatus, device, medium, and program product, which can improve the development efficiency of visual programming. The technical solution is as follows:

[0006] On the one hand, a visual programming method is provided, the method comprising:

[0007] Display a visual programming interface, which provides the ability to customize and create program content through graphical code blocks;

[0008] In response to receiving a type creation operation in the visual programming interface, a custom data type is created, which includes multiple attributes, each of which corresponds to a preset data type.

[0009] In response to receiving a variable creation operation based on the custom data type, a first variable code block is displayed. The first variable code block is a code block obtained by defining custom variables for multiple attributes in the custom data type. The first variable code block is used to implement the program function of the first program content in the program.

[0010] On the other hand, a visual programming apparatus is provided, the apparatus comprising:

[0011] The display module is used to display a visual programming interface, which provides the function of customizing program content through graphical code blocks;

[0012] A creation module is used to create a custom data type in response to receiving a type creation operation on the visual programming interface. The custom data type includes multiple attributes, each of which corresponds to a preset data type.

[0013] The display module is further configured to display a first variable code block in response to receiving a variable creation operation based on the custom data type. The first variable code block is a code block obtained by defining custom variables for multiple attributes in the custom data type. The first variable code block is used to implement the program function of the first program content in the program.

[0014] In some embodiments, the creation module is configured to, in response to receiving the type creation operation in the visual programming interface, display a type editing area, the type editing area including an attribute addition control corresponding to the preset data type; display at least two attribute editing messages in the type editing area based on at least two trigger operations on the attribute addition control, wherein the at least two trigger operations are operations triggered for the same or different attribute addition controls; and create the custom data type based on the at least two attribute editing messages displayed in the type editing area.

[0015] In some embodiments, the creation module is configured to display a type display area in the visual programming interface, the type display area including a type creation control; and to display the type editing area in response to receiving a trigger operation on the type creation control.

[0016] In some embodiments, the visual programming interface includes a run preview area, which is used to display the graphical result obtained by running the program content in the visual programming interface; in some embodiments, the creation module is used to display the type editing area in response to receiving an object type creation operation in the run preview area, the object type creation operation being used to create the custom data type corresponding to the custom object, the custom object being used to represent the custom variable containing the object's appearance; wherein, the custom object is used to display a graphical object containing the object's appearance in the run preview area when the first program content is run.

[0017] In some embodiments, the attribute editing information includes attribute names; in some embodiments, the creation module is configured to, in response to receiving at least two trigger operations for adding controls to the attribute, display at least two attribute name input boxes in the type editing area; and display at least two attribute names based on the input operations corresponding to the at least two attribute name input boxes respectively.

[0018] In some embodiments, the type editing area includes a type name input box; in some embodiments, the creation module is configured to, in response to receiving an input operation in the type name input box, display a custom type name; generate recommended attribute information based on the custom type name, the recommended attribute information being automatically generated based on the custom type name, the recommended attribute information including multiple preset data types and attribute names corresponding to the multiple preset data types; and, based on the recommended attribute information, display at least two pieces of attribute editing information in the type editing area when at least two trigger operations for adding controls to the attribute are received.

[0019] In some embodiments, the recommended attribute information includes an attribute fill control; in some embodiments, the creation module is configured to receive a trigger operation on the attribute fill control as at least two trigger operations on the attribute add control; in response to the trigger operation on the attribute fill control, at least two attribute editing information pieces are automatically displayed in the type editing area based on the recommended attribute information.

[0020] In some embodiments, the creation module is configured to display a list of preset data types on the visual programming interface; in response to receiving a trigger operation on a target data type in the list of preset data types, display a type editing area, the type editing area including at least one attribute corresponding to the target data type; and in response to receiving a type editing operation on the target data type in the type editing area, obtain the edited target data type as the custom data type.

[0021] In some embodiments, the display module is configured to display a variable array creation control; in response to receiving a trigger operation on the variable array creation control, it displays a variable array code block as the first variable code block, wherein the variable array code block is a code block obtained by defining a custom variable array for the custom data type, and the custom variable array includes multiple custom variables of the same data type.

[0022] In some embodiments, the visual programming interface includes a canvas area and an editing area, the editing area being used to display code blocks to be used in creating program content; the display module is configured to, in response to receiving a variable creation operation based on the custom data type, display a first variable code block in the editing area; display a first code block in the canvas area; and, in response to receiving a trigger operation on the first variable code block in the editing area, display a second code block in the canvas area, the second code block being a code block obtained by combining the first code block and the first variable code block; wherein, the second code block is used to call the custom variable in the first variable code block at runtime.

[0023] In some embodiments, the first code block is implemented as an assignment code block; in some embodiments, the display module is configured to, in response to receiving a trigger operation on the first variable code block in the editing area, display the first variable code block at a first position of the assignment code block displayed in the canvas area; based on the assignment operation on the first variable code block displayed at the first position, display the assignment result at a second position of the assignment code block, and use the assigned assignment code block as the second code block; wherein, the second code block is configured to assign the assignment result to the custom variable at runtime.

[0024] In some embodiments, the first code block is implemented as a value retrieval code block; in some embodiments, the creation module is configured to, in response to receiving a trigger operation on the first variable code block in the editing area, display the first variable code block at the object position of the value retrieval code block displayed in the canvas area; based on the value retrieval operation on the first variable code block displayed at the object position, display the value retrieval result at the attribute position of the value retrieval code block, and use the value retrieval code block after value retrieval as the second code block, wherein the value retrieval result includes the target attribute among the plurality of attributes; wherein the second code block is configured to extract the variable associated with the target attribute in the custom variable as calling data at runtime.

[0025] In some embodiments, the first code block is implemented as a custom function code block, which is a code block obtained by defining at least one custom parameter based on a candidate data type, wherein the at least one custom parameter includes a parameter defined based on the custom data type; in some embodiments, the creation module is used to display the first variable code block at the call position of the custom function code block in response to receiving a trigger operation on the first variable code block in the editing area, thereby obtaining the custom function code block with the first variable code block displayed as the second code block; wherein the second code block is used to call the custom variable at runtime to execute the custom logic corresponding to the custom function code block.

[0026] On the other hand, a computer device is provided, the computer device including a processor and a memory, the memory storing at least one instruction, at least one program, code set or instruction set, the at least one instruction, the at least one program, the code set or instruction set being loaded and executed by the processor to implement any of the above-described visual programming methods.

[0027] On the other hand, a computer-readable storage medium is provided, wherein at least one instruction, at least one program, code set, or instruction set is stored therein, wherein the at least one instruction, the at least one program, the code set, or the instruction set is loaded and executed by a processor to implement any of the visual programming methods described above.

[0028] On the other hand, a computer program product or computer program is provided, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform any of the visual programming methods described above.

[0029] The beneficial effects of the technical solutions provided in this application include at least the following:

[0030] On the one hand, the visual programming interface allows users to create custom data types and variable code blocks based on these custom data types that contain multiple attributes. These variable code blocks allow data associated with multiple attributes to be manipulated as a whole, avoiding the need to create and use multiple variables individually when multi-attribute data is required. This simplifies the workflow and improves development efficiency in visual programming. On the other hand, custom data types encapsulate multiple attributes into a single data type, allowing users to represent multi-attribute data with a single variable code block. This reduces the number of variable code blocks that need to be manipulated during visual programming, thereby lowering programming complexity, reducing the possibility of programming errors, and saving computer resources. Attached Figure Description

[0031] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0032] Figure 1 This is a schematic diagram of a computer system provided in an exemplary embodiment of this application;

[0033] Figure 2 This is a schematic diagram of a visual programming method provided in an exemplary embodiment of this application;

[0034] Figure 3 This is a flowchart of a visual programming method provided in an exemplary embodiment of this application;

[0035] Figure 4 This is a schematic diagram of an interface for creating custom data types provided in an exemplary embodiment of this application;

[0036] Figure 5 This is a schematic diagram of an interface for creating custom variables provided in an exemplary embodiment of this application;

[0037] Figure 6 This is a flowchart of a visual programming method provided in another exemplary embodiment of this application;

[0038] Figure 7 This is a schematic diagram of an interface for creating custom data types provided in another exemplary embodiment of this application;

[0039] Figure 8 This is a flowchart illustrating the creation of a custom data type, provided in an exemplary embodiment of this application.

[0040] Figure 9This is a flowchart of creating a variable provided in an exemplary embodiment of this application;

[0041] Figure 10 This is a flowchart of a visual programming method provided in yet another exemplary embodiment of this application;

[0042] Figure 11 This is a schematic diagram of the interface for assigning values ​​to variables provided in an exemplary embodiment of this application;

[0043] Figure 12 This is a flowchart of a visual programming method provided in another exemplary embodiment of this application;

[0044] Figure 13 This is a schematic diagram of the interface for obtaining variable values ​​provided in an exemplary embodiment of this application;

[0045] Figure 14 This is a flowchart illustrating the variable value taking process provided in an exemplary embodiment of this application;

[0046] Figure 15 This is a flowchart of a visual programming method provided in another exemplary embodiment of this application;

[0047] Figure 16 This is a schematic diagram of the interface of a custom function provided in an exemplary embodiment of this application;

[0048] Figure 17 This is a flowchart of a custom function provided in an exemplary embodiment of this application;

[0049] Figure 18 This is a structural block diagram of a visual programming apparatus provided in an exemplary embodiment of this application;

[0050] Figure 19 This is a structural block diagram of a computer device provided in an exemplary embodiment of this application. Detailed Implementation

[0051] To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be described in further detail below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments in this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0052] In this application, the terms "first" and "second" are used to distinguish between identical or similar items that have essentially the same function. It should be understood that there is no logical or temporal dependency between "first" and "second", nor is there any limitation on the quantity or execution order.

[0053] It should be noted that this application may display prompt interfaces, pop-ups, or output voice prompts before and during the collection of user data. These prompt interfaces, pop-ups, or voice prompts are used to inform the user that their data is being collected. This ensures that the application only begins the steps for collecting user data after receiving confirmation from the user regarding the prompt interface or pop-up; otherwise (i.e., without user confirmation), the steps for collecting user data end, meaning no user data is collected. In other words, all user data collected in this application is collected with the user's consent and authorization, and the collection, use, and processing of related user data must comply with the relevant laws, regulations, and standards of the relevant countries and regions.

[0054] Figure 1 A structural block diagram of a computer system 100 provided in an exemplary embodiment of this application is shown. The computer system 100 can be implemented as a system architecture for a visual programming method. The computer system 100 includes a terminal 110 and a server 120.

[0055] Terminal 110 can be an electronic device such as a mobile phone, tablet computer, vehicle terminal (vehicle system), wearable device, or PC (Personal Computer). A client application for the target application can be installed and run on Terminal 110. This target application can be any of the following: Virtual Reality (VR) application, Augmented Reality (AR) application, 3D mapping program, Virtual Reality game, Augmented Reality game, First-Person Shooter (FPS) game, Third-Person Shooter (TPS) game, Multiplayer Online Battle Arena (MOBA) game, Simulation Game (SLG) game, Party / Casual Game, Building Game, Programming Learning Application, or Online Learning Platform. Furthermore, this application does not limit the form of the target application, including but not limited to Apps or mini-programs installed on Terminal 110, and can also be in web page form.

[0056] In some embodiments, terminal 110 has a visual programming function. Illustratively, terminal 110 itself has a visual programming function; or, terminal 110 has a visual programming function based on a downloaded visual programming application, etc.

[0057] Visual programming provides an intuitive interface that allows users to build programs by dragging and connecting various code blocks (such as programming blocks). Each code block represents a programming concept or operation, such as loops, conditional statements, mathematical operations, and variables. Visual programming typically supports multiple programming languages, such as JavaScript and Python.

[0058] Optionally, visual programming functionality is a feature built into an application, such as a user-generated content (UGC) editor provided within a game application. The UGC editor supports creating, adjusting, and sharing custom content (such as virtual maps, virtual scenes, virtual characters, etc.) using objects. The UGC editor aims to lower the barrier to creation while maintaining high-quality output; among them, the UGC editor has visual programming functionality.

[0059] As an illustration, terminal 110 displays a UGC editor within a game application. This UGC editor provides a visual programming interface with multiple interactive functions. Users can perform the visual programming process through these interactive functions. These interactive functions include at least one of several, such as selection, zoom in, zoom out, delete, and move. Users can select programming blocks in the visual programming interface using the selection function, adjust the size of programming blocks using the zoom in and zoom out functions, and adjust the state of programming blocks in the programming interface using the delete and move functions. The specific interactive functions are not limited here.

[0060] Terminal 110 is connected to server 120 via wireless or wired network.

[0061] Server 120 can be a standalone physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN (Content Delivery Network), and big data and artificial intelligence platforms.

[0062] Cloud technology refers to a hosting technology that unifies hardware, software, and network resources within a wide area network (WAN) or local area network (LAN) to achieve data computation, storage, processing, and sharing. Cloud technology is a general term encompassing network technology, information technology, integration technology, management platform technology, and application technology applied based on the cloud computing business model. It can form resource pools, providing flexible and convenient on-demand access. Cloud computing technology will become a crucial support. Backend services of technical network systems require substantial computing and storage resources, such as video websites, image websites, and many portal websites. With the rapid development and application of the internet industry, every item may have its own identification mark in the future, requiring transmission to a backend system for logical processing. Data at different levels will be processed separately, and various industry data will require robust system support, which can only be achieved through cloud computing. Optionally, server 120 can also function as a node in a blockchain system.

[0063] For example, server 120 includes processor 124 and memory 122. Memory 122 further includes receiving module 1221, control module 1222, and sending module 1223. Receiving module 1221 is used to receive requests sent by terminal 110; control module 1222 is used to control screen rendering; and sending module 1223 is used to send responses to terminal 110. Server 120 is used to provide background services for terminal 110.

[0064] Optionally, server 120 undertakes the main computing work and terminal 110 undertakes the secondary computing work; or, server 120 undertakes the secondary computing work and terminal 110 undertakes the main computing work; or, server 120 and terminal 110 adopt a distributed computing architecture for collaborative computing.

[0065] The visual programming method provided in this application embodiment can be executed by a computer device, which refers to an electronic device with data computing, processing, and storage capabilities. Figure 1 Taking the implementation environment of the scheme shown as an example, the visual programming method can be executed by the terminal 110 (for example, the target application installed and running in the terminal 110 executes the visual programming method), or the visual programming method can be executed by the server 120, or the terminal 110 and the server 120 can interact and cooperate to execute it. This application does not limit this.

[0066] Those skilled in the art will understand that the number of terminals 110 described above can be more or less. For example, there may be only one terminal 110, or there may be dozens or hundreds of terminals 110, or even more. This application does not limit the number or type of terminals 110 in its embodiments.

[0067] In visual programming, users can utilize graphical elements (such as programming blocks) to construct complex logical flows. These graphical elements typically represent various programming concepts, such as variables and functions. Among the graphical elements representing variables, data types are an indispensable component. In related technologies, when users create programming blocks representing variables, they can select a target data type from multiple preset data types provided by the visual programming platform and create a variable block. This variable block is used to represent variables of the target data type. For example, if the data type is selected as string, the variable block represents a string variable. However, the variable types represented by variable blocks in related technologies are relatively limited. When users need to use multi-dimensional data to implement complex program functions, they need to set multiple variables, which increases the number of steps in creating and using variables and reduces development efficiency.

[0068] Based on this, embodiments of this application provide a visual programming method, such as... Figure 2 The diagram illustrates a visual programming method provided in an exemplary embodiment of this application. The method is described using an example of its application to a computer device, which may be... Figure 1 The terminal 110 shown below, the method includes the following steps 1 to 3.

[0069] Step 1: Display the visual programming interface 200.

[0070] The visual programming interface 200 includes a "New Type" control 211, which is used to create custom data types.

[0071] Step 2: In response to the received trigger operation on the "New Type" control 211, create a custom data type.

[0072] Indicative, such as Figure 2 As shown, after triggering the "New Type" control 211, a type name input box 212 and multiple type addition controls 213 are displayed. The name of the currently created custom data type can be entered in the type name input box 212, such as "Monster". Multiple attributes in the custom data type can be created using the multiple type addition controls 213. For example, triggering the "+Number" control adds a numeric attribute 214 to the "Monster" type, where the name of attribute 214 can be entered in the type name input box 215, such as "Health".

[0073] After creating multiple attributes in the custom data type, you get the custom data type. For example, you get a "monster" type with three attributes: "health", "energy", and "speed".

[0074] Step 3: In response to receiving a trigger operation on the "+Monster" control 216 corresponding to the "Monster" type, display the Monster variable code block.

[0075] Indicative, such as Figure 2 As shown, after creating the "Monster" type, the variable list will display a list item 217 of the "Monster" type. Clicking the list item 217 of the "Monster" type will display a "+Monster" control 216. This "+Monster" control 216 is used to create a monster variable code block that represents a variable of the "Monster" type. For example, it creates a "Monster1" variable code block 218, which is used to represent a "Monster1" variable of the "Monster" type.

[0076] The "Monster1" variable code block 218 is created. This "Monster1" variable code block 218 can be used to implement various programming operations in visual programming. For example, the assignment code block and the "Monster1" variable code block 218 can be used to assign values ​​to the three elements "health", "energy" and "speed" in the Monster1 variable.

[0077] Next, the process of the visual programming method provided in this application will be introduced.

[0078] Figure 3 A flowchart illustrating a visual programming method provided in an exemplary embodiment of this application is shown, with the method applied to a computer device as an example. The computer device may be... Figure 1 The terminal 110 shown includes steps 310 to 330.

[0079] Step 310: Display the visual programming interface.

[0080] Optionally, the visual programming interface is a web page interface; or, the visual programming interface is a built-in interface of the target application, etc. The target application can be at least one of a game application, a programming learning application, etc., and this application embodiment does not limit this.

[0081] The visual programming interface provides the ability to create custom program content using graphical code blocks. Illustratively, each code block represents a portion of the program content; for example, an addition code block represents addition operations, and a variable code block represents variables. Custom program content can be created by combining multiple code blocks, and when this combination is run, the corresponding program functionality is achieved.

[0082] Optionally, code blocks can be implemented as programming blocks. Illustratively, a programming block is a graphical element in visual programming, allowing users to create custom program content by connecting multiple programming blocks. Programming with programming blocks differs from traditional text-based programming, making programming more intuitive and easier to learn.

[0083] Optionally, the visual programming interface provides programming functions for various application scenarios, such as programming game programs, text reading programs, or social media programs. Optionally, different types of code blocks are displayed in the editing interface for different application scenarios; the types of code blocks displayed may be the same or different in different application scenarios.

[0084] To illustrate, using a game scene as an example, the displayed code blocks are of types related to game programming. Optionally, the code block type includes at least one of the following: event code block, control code block, action code block, condition code block, value-getting code block, function code block, and variable code block.

[0085] Event-based code blocks are associated with specific events (such as starting or stopping the game). When the event occurs, the code in this block is executed. Control-based code blocks control the program flow, such as loops (for, while) and selection (switch, if-else), determining the execution order and logic of the code. Action-based code blocks perform specific operations or actions, typically used to implement specific program functions, such as controlling the actions and postures of virtual objects in a game. Conditional code blocks are similar to the if-else structure in control-based code blocks, but focus more on condition judgment, executing different code blocks based on whether the condition is true or false, used to set conditions during the game. Value-retrieval code blocks retrieve data or values, such as from user input, and are usually used in conjunction with assignment operations. Function-based code blocks define functions, can be called multiple times, and execute the code within each call; they are typically used to encapsulate reusable code segments. Variable-based code blocks store data, which can be assigned, read, and manipulated in other code blocks.

[0086] Optionally, the code blocks in the visual programming interface can be preset code blocks provided by the system or user-defined code blocks; this application embodiment does not limit this.

[0087] Step 320: In response to receiving a type creation operation in the visual programming interface, create a custom data type.

[0088] To illustrate, in the field of programming, data type refers to the type of data that a variable can store, and different data types determine the operations that a variable can perform.

[0089] Optionally, the data types in the visual programming interface include at least one of platform data types, basic data types, and custom data types, which are described below.

[0090] 1. Platform Data Types

[0091] Platform data types refer to the data types set by the platform provider that offers the visual programming interface.

[0092] To illustrate, let's take the UGC editor provided in the game application as an example. You can use the visual programming interface provided by the UGC editor to create game maps. The platform data types provided in the visual programming interface include: component type, timer type, special effect type, sound effect type, player type, etc.

[0093] The component type is used to represent virtual components in the virtual map, such as: various basic geometric shapes, gameplay-related virtual components (such as conveyor belts, acceleration zones, etc.), nature-related virtual components (such as plants, animals, weather, etc.), and building-related virtual components (such as roofs, walls, doors, and windows); the timer type is used to represent timers in the game map; the special effects type is used to represent special effects in the game map; the sound effects type is used to represent sound effects in the game map; and the player type is used to represent players, that is, users of the game application.

[0094] Platform variables can be defined using platform data types, allowing for manipulation of these variables. For example, a component variable can be created using a component type and bound to a virtual component in the virtual map. If parameters of this component variable are adjusted, the virtual component displayed in the virtual map will also be adjusted accordingly. Similarly, a player variable can be created using a player type. If this player variable represents all players entering the virtual map, assigning it to an event, such as transforming into a monster upon entering the game, will cause the virtual character representing that player to transform into a virtual monster character when another player enters the virtual map.

[0095] 2. Basic Data Types

[0096] Basic data types are data types defined based on common programming languages ​​(such as Java, C++, Python, etc.). Examples include: numeric, string, vector, and boolean values.

[0097] Numeric types represent integers, decimals, and other numbers; string types are used to represent a single character or a series of characters (such as text); vector types are used to represent physical quantities such as position, direction, velocity, and acceleration; and boolean types are used to represent logical values, typically with only two states: true and false.

[0098] 3. Custom data types

[0099] The custom data type is used to indicate the data type defined by the user in the visual programming interface. If a first account is logged into the visual programming interface, the custom data type can be created by the first account in the visual programming interface, or it can be created by another account in the visual programming interface; this embodiment does not limit this.

[0100] This application primarily describes the process of users creating custom data types. Illustratively, users can create custom data types through type creation operations within a visual programming interface. These custom data types include multiple attributes, each corresponding to a preset data type.

[0101] In this embodiment, as an illustration, a custom data type refers to a combined data type containing multiple attributes, used to represent data with multiple attributes. For example, a custom data type can be implemented as a non-player character (NPC) type, which includes multiple attributes such as name, level, and health. Each attribute corresponds to a separate data type, such as the data type for the name being a string, and the data types for the level and health being numerical. A custom data type can also be implemented as an item type, which includes multiple attributes such as name, damage value, and triggered effect. The data type for the name is a string, the data type for the damage value is a numerical value, and the data type for the triggered effect is an effect type.

[0102] In some embodiments, the method for creating a custom data type further includes the following steps:

[0103] Step 1: In response to receiving a type creation operation in the visual programming interface, display the type editing area.

[0104] Optionally, the above-mentioned method for displaying type editing areas includes at least one of the following methods:

[0105] 1. Display a type display area in the visual programming interface, which includes type creation controls; In response to a triggered operation on the type creation control, the type editing area is displayed.

[0106] The type display area is used to display the data types already present in the visual programming interface. Optionally, the type display area can be implemented as a custom data type display area, that is, the type display area is used to display user-created custom data types in the visual programming interface.

[0107] The type editing area is used to create and edit custom data types. Editing operations that can be performed in the type editing area include, but are not limited to: adding attributes, deleting attributes, editing custom type names, and editing attribute names.

[0108] Optionally, the triggering operation includes at least one of the following: click operation, long press operation, swipe operation, gesture command operation, voice command operation, etc., and the embodiments of this application do not limit this.

[0109] This is illustrative; please refer to it. Figure 4 After clicking the custom option 401 in the visual programming interface 400, the type list area 410 corresponding to the custom data type is displayed. The type creation control 411 is displayed in the type list area 410. After clicking the type creation control 411, the type editing area 420 is displayed.

[0110] In the above embodiments, by providing a control directly on the visual programming interface, users can enter the type editing area by triggering this control. The operation of triggering entry into the type editing area is more intuitive and simple, avoiding the possibility of accidental operation.

[0111] 2. The visual programming interface includes a run preview area, which is used to display the runtime preview. The graphical result obtained from the program content in the preview area. In response to receiving an object type creation operation in the runtime preview area, Display type editing area.

[0112] In illustrative terms, the run preview area is used to display programming results in real time during the visual programming process. In this embodiment, in addition to viewing the running results, users can also interact directly with objects in the run preview area, such as adding objects, modifying objects, copying objects, etc.

[0113] The object type creation operation is used to create custom data types corresponding to custom objects. Custom objects are used to represent custom variables that include the object's appearance. Custom objects are used to display graphical objects containing the object's appearance in the runtime preview area when the first program content is run.

[0114] As an illustration, when a user wants to add an object of a target data type to the run preview area, but the current visual programming interface does not contain that target data type, an object type creation operation can be triggered in the run preview area. For example, right-clicking on a blank area in the run preview area will display the object type creation control, which receives trigger operations on the object type creation control as object type creation operations. The object type creation control allows the user to create the target data type (i.e., a custom data type), and then create an object of that target data type (i.e., a custom object) based on that target data type.

[0115] This custom object is a custom variable that includes the object's appearance. In other words, when creating this custom data type in the type editor, you need to set the object's appearance. For example, adding an image type attribute to the custom data type allows you to pass in an image containing the object's appearance when running a program associated with that custom object, thus displaying a graphical object containing the object's appearance in the runtime preview area. For instance, after creating a "Monster" type, you can add a monster character with the target monster's image to the runtime preview area based on this "Monster" type.

[0116] In the above embodiments, by displaying a running preview area, users can trigger object type creation operations in the running preview area. The object type creation operation is directly related to the content displayed in the running preview area, making the object type creation operation more intuitive, saving the process of finding the object type creation entry point, and improving the efficiency of human-computer interaction.

[0117] It should be noted that the above examples of type creation operations are merely illustrative and are not intended to limit the scope of this application.

[0118] After the type creation operation is triggered, a type editing area will be displayed, which includes property addition controls corresponding to the preset data types. These property addition controls are used to create properties corresponding to the preset data types associated with the property addition controls.

[0119] Optionally, the preset data type includes at least one of platform data type, basic data type and created custom data type. If a first account is logged in in the visual programming interface, the created custom data type can be created by the first account in the visual programming interface or by other accounts in the visual programming interface. This application embodiment does not limit this.

[0120] Optionally, the type editing area can have one or more attribute addition controls corresponding to preset data types. When there are multiple attribute addition controls corresponding to preset data types, the preset data types corresponding to different attribute addition controls are different.

[0121] This is illustrative; please refer to it. Figure 4 Click on the type to create control 411, and the type editing area 420 will be displayed. The type editing area 420 includes multiple attribute addition controls 421 corresponding to preset data types. Among them, the "+Number" control is used to add attributes of the number type, the "+String" control is used to add attributes of the string type, the "+Player" control is used to add attributes of the player type, etc., which will not be described in detail here.

[0122] Step 2: Based on at least two trigger operations of adding controls to attributes, display at least two attribute editing messages in the type editing area.

[0123] At least two of these triggering operations are triggered when controls are added for the same or different properties. Optionally, the property editing information includes at least one of the following: property name, property data type, etc.

[0124] Optionally, in response to receiving at least two trigger operations on the property addition control, at least two property name input boxes are displayed in the type editing area; based on the input operations corresponding to the at least two property name input boxes, at least two property names are displayed.

[0125] This is illustrative; please refer to it. Figure 4 Clicking the "+Value" control 422 displays the attribute name input box 423 corresponding to the value type in the type editing area. Enter "Attribute 1" in the attribute name input box 423 as the attribute name for that value type. After adding "Attribute 1", you can continue to add attributes using the attribute addition control 421. For example, clicking the "+String" control displays the attribute name input box corresponding to the string type in the type editing area. Enter "Attribute 2" in the attribute name input box as the attribute name for that string type. Clicking the "+Player" control displays the attribute name input box corresponding to the player type in the type editing area. Enter "Attribute 3" in the attribute name input box as the attribute name for that player type. This input method allows users to directly enter attribute names without needing to go through other complex steps to confirm the attribute name, improving the efficiency of attribute input. Furthermore, this solution is relatively simple, easy to implement, and saves computer computing resources.

[0126] In some embodiments, the type editing area also includes a type name input box, which is used to input the type name of the custom data type to be created. For example, after the user inputs the custom type name in the type editing area, the system can automatically analyze the custom type name to obtain a set of recommended attributes, and the user can create a custom data type based on the recommended data.

[0127] Optionally, in response to receiving an input operation in the type name input box, a custom type name is displayed; recommended attribute information is generated based on the custom type name, the recommended attribute information is automatically generated based on the custom type name, and the recommended attribute information includes multiple preset data types and attribute names corresponding to the multiple preset data types; based on the recommended attribute information, if at least two trigger operations for adding an attribute control are received, at least two attribute editing information pieces are displayed in the type editing area.

[0128] Optionally, the recommended attribute information is obtained by predicting custom type names based on the attribute recommendation model. Illustratively, the training data for the attribute recommendation model consists of sample type names and corresponding reference attribute combinations. Each reference attribute combination contains multiple reference data types and their corresponding reference attribute names, which are manually labeled. The custom type names are input into the sample recommendation model, and the semantic feature representations corresponding to these names are extracted. By analyzing these semantic feature representations, the model obtains predicted attribute combinations corresponding to the custom type names. These combinations contain multiple predicted data types and their corresponding predicted attribute names. Based on the difference between the preset attribute combinations and the reference attribute combinations, a target loss is calculated. This target loss is then used to train the sample recommendation model, thus obtaining the attribute recommendation model.

[0129] As an illustration, after the user inputs a custom type name, the system will automatically generate recommended attribute information based on the user's input. For example, if the user inputs "product information," the system may recommend attributes such as "product name" (string), "product price" (floating-point number), and "product release date" (date). After generating the recommended attribute information, it will be displayed in the prompt information display area of ​​the visual programming interface, for example, through a prompt floating window.

[0130] Users can refer to the attribute combinations displayed in the recommended attribute information to create custom data types. Alternatively, users can directly create attribute editing information based on the recommended attribute information. Optionally, the recommended attribute information includes an attribute fill control; receiving a trigger operation on the attribute fill control serves as at least two trigger operations for adding the attribute control; in response to the trigger operation on the attribute fill control, at least two attribute editing information pieces are automatically displayed in the type editing area based on the recommended attribute information.

[0131] As an illustration, assuming a floating prompt window displays the recommended attribute information, an attribute fill control is displayed within this window. Clicking the attribute fill control will automatically display at least two attribute editing pieces of information in the type editing area based on the recommended attribute information. For example, it may automatically create multiple preset data types included in the recommended attribute information and display their respective attribute names in the attribute name input boxes corresponding to each preset data type. Optionally, for the at least two attribute editing pieces of information displayed automatically based on the recommended attribute information, the user can directly use these at least two attribute editing pieces of information to create a custom data type, or the user can modify them to obtain the final at least two attribute editing pieces of information used to create the custom data type. This application embodiment does not limit this aspect.

[0132] In the above embodiments, after the user enters a custom type name in the type editing area, the system can automatically analyze the custom type name to obtain a set of recommended attributes. The user can create a custom data type based on the recommended data. By automatically recommending attribute information, the time for the user to conceive a custom data type is reduced, and the creation efficiency of the custom data type is improved.

[0133] Users can also directly use recommended attribute combinations. In this position, users do not need to manually enter each attribute and its data type, which greatly reduces the workload of input and configuration, reduces input errors caused by manual input, and further improves the efficiency of creating custom data types.

[0134] Step 3: Create a custom data type based on the at least two attribute editing information displayed in the type editing area.

[0135] In illustrative terms, in this embodiment of the application, the custom data type is a combined data structure composed of multiple attributes. Then, multiple attribute editing information can be added in the type editing area through the attribute adding control. The data types corresponding to the multiple attribute editing information can be the same or different.

[0136] In some embodiments, the type editing area further includes a type name input box. Optionally, in response to receiving an input operation in the type name input box, a custom type name is displayed; a custom data type is created based on at least two attribute editing information displayed in the type editing area and the custom type name.

[0137] This is illustrative; please refer to it. Figure 4The type editing area 420 also includes a type name input box 424. Enter "Custom Data Type 1" in the type name input box 424 as the type name of the custom data type to be created. After determining the type name and attribute information of the custom data type to be created, the custom data type can be created. For example, a "Confirm" control will be displayed in the type editing area 420; clicking the "Confirm" control will create the custom data type.

[0138] Optionally, after creating a custom data type, a list of items corresponding to the custom data type can be displayed in the type list area. For an illustrative example, please refer to [link / reference]. Figure 4 After successfully creating a custom data type 1, the list item 412 corresponding to the custom data type 1 is displayed in the type list area 410. Optionally, clicking the list item 412 can display the edit control and the delete control. Clicking the edit model can trigger the display of the type editing area 420, thereby modifying the type name, attributes and other information of the custom data type 1. Clicking the delete control can delete the custom data type 1.

[0139] In the above embodiments, on the one hand, the visual programming interface allows users to customize data types according to their needs, including adding different attributes and setting the type and name of the attributes. Users can add controls to the same or different attributes and trigger operations multiple times to add multiple attributes, thereby constructing complex data structures. This allows users to represent multi-attribute data using a single variable code block, which to some extent reduces the number of variable code blocks that need to be manipulated during visual programming, thereby reducing programming complexity, reducing the possibility of programming errors, and saving computer resources. On the other hand, through the attribute adding control, users can easily add multiple attributes to custom data types without writing complex code, thus simplifying the steps of type creation and improving the efficiency of type creation.

[0140] Step 330: In response to receiving a variable creation operation based on a custom data type, the first variable code block is displayed.

[0141] The first variable code block is a code block that defines custom variables for multiple attributes in a custom data type.

[0142] Optionally, a custom variable may include variables associated with multiple attributes. For example, if the custom data type "Monster" includes the attributes "Health" and "Energy", then the resulting custom variable may include the "Health" variable and the "Energy" variable, where the "Health" variable is used to store health data and the "Energy" variable is used to store energy data.

[0143] As an illustration, after creating a custom data type, a first variable code block corresponding to that custom data type can be created in the visual programming interface, thereby representing the custom variable through this first variable code block. Optionally, the above variable creation operation includes at least one of the following operations:

[0144] 1. Display a variable creation control in the visual programming interface, and receive trigger operations on the variable creation control as variables. Quantity creation operation.

[0145] This example illustrates the concept of a custom data type implemented as a monster. Please refer to [link / reference]. Figure 5 After clicking the variable option 501 in the visual programming interface 500, a sub-option list 520 is displayed. This sub-option list 520 displays all data types contained in the current visual programming interface, where the monster type is a custom data type. After clicking the monster type option 502, the variable list area 510 corresponding to the monster type is displayed. In the variable list area 510, either variable creation control 511 or variable creation control 512 is displayed. Clicking variable creation control 511 or variable creation control 512 triggers the variable creation operation.

[0146] 2. The visual programming interface includes a run preview area, which is used to display the running of the visual programming. The graphical result obtained from the program content in the interface; receiving object creation operations in the running preview area as variable creation. operate.

[0147] As an illustration, when a user wants to add an object of a target data type (such as a custom data type) to the runtime preview area, they can trigger an object creation operation in the runtime preview area. For example, right-clicking on a blank area of ​​the runtime preview area will display an object creation control, which will then receive trigger operations on the object creation control as object creation operations. The object creation control allows the user to create objects (i.e., variables) of the target data type they need. For example, adding a monster object to the runtime preview area based on the monster type.

[0148] It should be noted that the above examples of variable creation operations are merely illustrative and are not intended to limit the scope of this application.

[0149] After the variable creation operation is triggered, a custom variable of a custom data type will be defined and the first variable code block representing the custom variable will be displayed in the visual coding interface.

[0150] In some embodiments, a variable creation control is displayed; in response to receiving a trigger operation on the variable creation control, a variable code block is displayed as the first variable code block, which is a code block obtained by defining a single custom variable for a custom data type.

[0151] This is illustrative; please refer to it. Figure 5Clicking the variable creation control 511 displays the monster variable code block 513 in the variable list area 510. This monster variable code block 513 represents a single monster variable. Clicking the monster variable code block 513 displays edit and delete controls. The monster variable code block 513 can be edited using the edit controls, for example, by editing the variable name corresponding to the monster variable code block 513 (the current variable name is...). Figure 5 The "Monster 1" and variable types (e.g., global or local variables) displayed in the code block can be deleted by deleting the control in code block 513.

[0152] In some embodiments, a variable array creation control is displayed; in response to receiving a trigger operation on the variable array creation control, a variable array code block is displayed as the first variable code block. The variable array code block is a code block obtained by defining a custom variable array for a custom data type. The custom variable array includes multiple custom variables of the same data type.

[0153] This is illustrative; please refer to it. Figure 5 Clicking the variable creation control 512 displays the monster variable code block 514 in the variable list area 510. This monster variable code block 514 represents the monster variable array 1. Clicking the monster variable code block 514 displays edit and delete controls. The edit control allows you to edit the monster variable code block 514, for example, by editing the variable name corresponding to the monster variable code block 514 (the current variable name is...). Figure 5 The code block displays "Monster Array 1" and variable types (e.g., global or local variables), as well as the variables set in the array (e.g., Monster 1 and Monster 2 variables as variables in its array). The monster variable can be deleted using the delete control. (Code block 514)

[0154] In the above embodiments, by triggering the variable array creation control, a custom variable array including multiple custom variables of the same data type can be created, thereby realizing the batch creation of custom variables and improving the creation efficiency of custom variables.

[0155] The first variable code block is used to implement the program function of the first program content in the program.

[0156] This is illustrative; the first part of the program content is the program content that requires the use of user-defined variables.

[0157] In some embodiments, the first variable code block can be combined with other code blocks provided by the visual programming interface to implement the program functionality of the first program content in the program. The first program content is used to indicate the program content represented by the second code block below.

[0158] In some embodiments, the visual programming interface includes a canvas area and an editing area, the editing area being used to display code blocks that will be used to create program content.

[0159] Optionally, in response to receiving a variable creation operation based on a custom data type, a first variable code block is displayed in the editing area; a first code block is displayed in the canvas area; in response to receiving a trigger operation on the first variable code block in the editing area, a second code block is displayed in the canvas area, the second code block being a code block obtained by combining the first code block and the first variable code block; wherein, the second code block is used to call the custom variable in the first variable code block at runtime.

[0160] Indicatively, the first code block is a pre-generated code block in the canvas area that needs to call variables. The first code block can be implemented as at least one of an assignment code block, a getter code block, or a function code block. Combining the first code block and the first variable code block generates a new code block (the second code block), which contains the logic for calling the custom variables defined in the first variable code block.

[0161] For example, the second code block reads a number input by the user, stores this number in a variable, and then outputs the value of this variable. The first variable code block is responsible for reading the user input and storing it in the variable. It should be noted that the above example of the second code block is merely illustrative and is not intended to limit the scope of this application. Optionally, the triggering operation of the first variable code block in the editing area can be implemented as a sliding operation, a clicking operation, etc., on the first variable code block.

[0162] In the above embodiments, in the visual programming interface, users can create and edit programs in a more intuitive and convenient way by combining code blocks, thereby reducing the threshold and difficulty of programming.

[0163] In summary, the visual programming method provided in this application has two advantages. First, it allows users to create custom data types in the visual programming interface and create variable code blocks representing multiple attributes based on these custom data types. These variable code blocks allow multiple attributes to be operated on as a whole, avoiding the need to create and use multiple variables one by one when setting multiple attribute variables, thus simplifying the operation process and improving development efficiency in visual programming. Second, the custom data type encapsulates multiple attributes into a single data type, allowing users to represent multiple attribute variables using a single variable code block. This reduces the number of variable code blocks that need to be operated on during visual programming, thereby reducing programming complexity, decreasing the possibility of programming errors, and saving computer resources.

[0164] In some embodiments, the above-described type creation operation can also be implemented as a modification operation of a preset data type, thereby creating a custom data type by modifying the preset data type. For illustrative purposes, please refer to [reference needed]. Figure 6 The above Figure 3 The illustrated embodiment can also be implemented as steps 610 to 630.

[0165] Step 610: Display the visual programming interface.

[0166] The visual programming interface provides the ability to customize and create program content using graphical code blocks. Illustratively, each code block represents a portion of the program's functionality. Custom program content can be created by combining multiple code blocks, and when this combination is run, the corresponding program function is implemented.

[0167] Step 621: Display the list of preset data types in the visual programming interface.

[0168] The list of preset data types includes multiple preset data types.

[0169] Optionally, the preset data type includes at least one of platform data type, basic data type and created custom data type. If a first account is logged in in the visual programming interface, the created custom data type can be created by the first account in the visual programming interface or by other accounts in the visual programming interface. This application embodiment does not limit this.

[0170] This is illustrative; please refer to it. Figure 7 When you click the variable option 701 in the visual programming interface 700, a sub-option list 702 is displayed. This sub-option list 702 will display all data types contained in the current visual programming interface. This sub-option list 702 is used as the default data type list.

[0171] In sub-option list 702, any data type displayed can be modified to obtain the modified data type as a user-defined data type.

[0172] Step 622: In response to receiving a trigger operation for the target data type in the preset data type list, display the type editing area.

[0173] The type editing area includes at least one attribute corresponding to the target data type.

[0174] Optionally, the triggering operation includes at least one of the following: click operation, long press operation, swipe operation, gesture command operation, voice command operation, etc., and the embodiments of this application do not limit this.

[0175] Indicative, such as Figure 7 As shown, right-clicking the Player option 703 in the sub-option list 702 will trigger the display of a custom control 704 for the player data type. After triggering the custom control 704, a type editing area 720 will be displayed. This type editing area 720 will display the type information corresponding to the original player data type, such as: type name (i.e.,...) Figure 7 The "player" shown), attributes (such as Figure 7 The values ​​shown include "health points", "speed", and "physical condition".

[0176] Step 623: In response to receiving an edit operation on the target data type in the type editing area, the edited target data type is obtained as a custom data type.

[0177] The custom data type includes multiple attributes, each of which corresponds to a preset data type.

[0178] Optionally, the editing operations for the target data type can be referred to the description of the type creation operation in step 320, which will not be repeated here.

[0179] Optionally, after editing the target data type, a list of items corresponding to the edited target data type can be displayed in the type list area. For illustration, please refer to [reference needed]. Figure 7 After editing the target data type, the edited list item 731 corresponding to the target data type is displayed in the type list area 730 corresponding to the custom data type. Optionally, clicking the list item 731 can trigger the display of the delete control and edit control corresponding to the list item 731. Clicking the delete control can delete the list item 731, and clicking the edit control will display the type editing area 720.

[0180] Step 630: In response to receiving a variable creation operation based on a custom data type, the first variable code block is displayed.

[0181] The first variable code block is used to represent a custom variable of a custom data type. The custom variable includes multiple attributes. The first variable code block is used to implement the program function of the first program content in the program.

[0182] As an illustration, after creating a custom data type, variables of that custom data type can be created in the visual programming interface. In this embodiment, the custom variable of the custom data type is represented by creating a first variable code block.

[0183] Optionally, a variable creation control is displayed in the visual programming interface, and trigger operations on the variable creation control are received as variable creation operations. After the variable creation operation is triggered, a custom variable of a custom data type is created, and the first variable code block representing the custom variable is displayed in the visual coding interface.

[0184] In summary, the visual programming method provided in this application has two advantages. First, it allows users to create custom data types in the visual programming interface and create variable code blocks based on custom data types containing multiple attributes. Through these variable code blocks, data associated with multiple attributes can be operated on as a whole, avoiding the need to create and use multiple variables one by one when multi-attribute data is required. This simplifies the operation process and improves development efficiency in visual programming. Second, custom data types can be created by modifying preset data types, reusing existing data types, and adding custom attributes and methods, thus improving the efficiency of user type creation.

[0185] The next step is to discuss the flow of creating custom data types and custom variable blocks in the visual programming interface. The process will be explained.

[0186] This is illustrative; please refer to it. Figure 8 It shows a flowchart for creating a custom data type, which includes the following steps:

[0187] Step 801, Begin.

[0188] The process of creating a custom data type begins. Illustratively, the visual programming method (including creating custom data types and creating custom variable code blocks) provided in this application embodiment can run on computer devices such as personal computers, tablets, and smartphones. Users can access applications that provide visual programming capabilities through these computer devices, thereby implementing the visual programming method.

[0189] Step 802: Switch the menu to Custom - Type.

[0190] This is illustrative and can be used as a reference. Figure 4 After clicking the custom option 401 in the visual programming interface 400, the type list area 410 corresponding to the custom data type is displayed, and the type creation control 411 is displayed in the type list area 410.

[0191] Step 803: Click "New Type" and enter a name.

[0192] Indicative, such as Figure 4As shown, after creating the click type control 411, the type editing area 420 is displayed. The type editing area 420 also includes a type name input box 424. Enter "Custom Data Type 1" in the type name input box 424 as the type name of the custom data type to be created. Here, taking the implementation of "Custom Data Type 1" as "monster" as an example for illustration.

[0193] Step 804, the platform allocates an id and generates a TypeInfo structure.

[0194] Schematically, after creating a custom data type, the platform generates a TypeInfo structure corresponding to the custom data type, which is used to store the information contained in the custom data type, such as: id, name, etc. Optionally, the code representation of the TypeInfo structure is as follows:

[0195] class UserDefinedTypeInfo{

[0196] string id / / Unique id, used to distinguish different custom data types

[0197] string name / / The name of the custom data type, such as "monster"

[0198] UserDefinedTypePropertyInfo[] propertyList / / Property array

[0199] }

[0200] Among them, the unique id is generated by the UUID algorithm. The UUID algorithm is used to generate identifiers that uniquely identify entities or objects in a computing system. By the UUID algorithm, the global uniqueness of the generated id is guaranteed. The unique id generated by the UUID algorithm is in the form of: 9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d. The unique id is used as the unique identifier of the data type. When the user modifies the display name (i.e., the above name) or properties of the custom data type, the id will not change. To prevent problems from occurring in other code blocks that use this data type. For example: when the display name of the custom data type is changed from "monster" to "monster beast", the "monster" in other code blocks that reference "monster" will be automatically replaced with "monster beast" because its id has not changed. name is the display name, which can be in Chinese or English and can be modified by the user. propertyList is an array of properties. The definition of the properties is as follows in the generated PropertyInfo structure and will not be elaborated here.

[0201] Step 805, select the property type and add properties.

[0202] A custom data type can contain multiple attributes. The attribute type indicates the data type of the attribute. Selecting "Add Data Type" means adding new data. (For illustration purposes, please refer to the provided text.) Figure 4 Clicking on the type creates a control 411, which displays the type editing area 420. The type editing area 420 includes multiple attribute addition controls 421 corresponding to preset data types. Among them, the "+Number" control is used to add attributes of the number type, the "+String" control is used to add attributes of the string type, and the "+Player" control is used to add attributes of the player type, etc.

[0203] Step 806: Generate the PropertyInfo structure and fill it into the TypeInfo structure.

[0204] As an example, after adding a new attribute, the platform generates a corresponding PropertyInfo structure to store the information contained in the attribute, such as its name and data type. Optionally, the code representation of the PropertyInfo structure is shown below:

[0205] Class UserDefinedTypePropertyInfo{

[0206] String name / / Property name

[0207] String dataType / / Data type

[0208] }

[0209] After obtaining the PropertyInfo structure, it is populated into the propertyList of the TypeInfo structure. For example, using the custom data type "Monster," the code representation of the TypeInfo structure for "Monster" is shown below:

[0210] {id:'9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d',

[0211] name: 'Monster'

[0212] propertyList:[

[0213] {name:'Health Points', dataType:'Number'},

[0214] {name:'Energy', dataType:'Number'}

[0215] {name:'Speed', dataType:'Number'} ]

[0217] }

[0218] In the PropertyInfo structure, the name attribute is entered by the user, such as "health points". The dataType attribute is selected from a preset range of data types, including basic data types, platform data types, and custom data types. The type identifier for custom data types is their id (see the TypeInfo structure above). The id of a custom data type is automatically generated by the UUID algorithm when the custom data type is created, and it does not conflict with the preceding type identifier (e.g., Number).

[0219] For example, let's add another attribute to "Monster", with the type also being the user-defined "Item" type. Assume the code representation of the "Item" type's TypeInfo structure is as follows:

[0220] {id:'6ec0bd7f-11c0-43da-975e-2a8ad9ebae0b',

[0221] name:'Props',

[0222] propertyList:[

[0223] name:'name', dataType:'String' ]

[0225] }

[0226] The new code representation of the "monster" type TypeInfo structure is as follows:

[0227] {id:'9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d',

[0228] name: 'Monster'

[0229] propertyList:[

[0230] {name:'Health Points', dataType:'Number'},

[0231] {name:'Energy', dataType:'Number'}

[0232] {name:'Speed', dataType:'Number'}

[0233] {name:'props',dataType:'6ec0bd7f-11c0-43da-975e-2a8ad9ebae0b'}, ]

[0235] }

[0236] Step 807, End.

[0237] As illustrated in the steps above, after the user selects and fills in the attribute information and type name, a `TypeInfo` structure for the custom data type is generated. Newly created custom data types are added to the global custom data type dictionary `UserDefinedTypeDict`. The key of the dictionary structure is `dataType`, and the value is the value of the aforementioned `UserDefinedTypeInfo`. Simultaneously, the IDs of the custom data types are stored in the string array `UserDefinedTypeIdList` in chronological order of creation.

[0238] After the above process is completed, the process of creating a custom data type ends.

[0239] This is illustrative; please refer to it. Figure 9 It shows a flowchart of creating a code block for a custom variable, which includes the following steps:

[0240] Step 901, Begin.

[0241] The process of starting to create a code block with custom variables.

[0242] Step 902, switch the menu to Variables.

[0243] This is illustrative; please refer to it. Figure 5 After clicking the variable option 501 in the visual programming interface 500, the sub-option list 520 is displayed.

[0244] Step 903: Collect the custom data types, basic data types, and platform data types and add them to the secondary menu.

[0245] in, Figure 5 The sub-option list 520 shown represents the second-level menu. This sub-option list 520 will display all data types contained in the current visual programming interface, including basic data types such as Boolean values, numbers, strings, vectors, etc., as well as platform data types such as players, components, props, particles, sound effects, logic components, modules, motion units, counters, special effects, tasks, trigger boxes, characters, animations, creatures, etc., and also custom data types such as monsters.

[0246] Step 904: Select the variable type to be created from the secondary menu.

[0247] To illustrate, let's take the example of selecting to create a variable of a custom data type. Clicking the monster type option 502 in the sub-option list 520 will display the variable list area 510 corresponding to the monster type.

[0248] Step 905: Click "+ Variable Type" and enter the variable name.

[0249] To illustrate, variable creation control 511 or variable creation control 512 is displayed in the variable list area 510. Clicking variable creation control 511 or variable creation control 512 will trigger the variable creation operation.

[0250] Clicking the variable creation control 511 displays the monster variable code block 513 in the variable list area 510. This monster variable code block 513 represents a single monster variable. Clicking the monster variable code block 513 displays an editing control, which allows you to edit the monster variable code block 513. For example, you can edit the variable name corresponding to the monster variable code block 513 (the current variable name is...). Figure 5 (The code block shows "Monster 1").

[0251] Clicking the variable creation control 512 displays the monster variable code block 514 in the variable list area 510. This monster variable code block 514 represents the monster variable array 1. Clicking the monster variable code block 514 displays an editing control, which allows editing of the monster variable code block 514. For example, editing the variable name corresponding to the monster variable code block 514 (the current variable name is...) Figure 5 The code block shows "Monster array 1" and sets variables in the array (e.g., Monster 1 and Monster 2 as variables in its array).

[0252] Step 906: Generate the VariableInfo structure.

[0253] As an illustration, triggering the variable creation control corresponding to a custom data type indicates the creation of a custom variable of that data type. The platform will generate a VariableInfo structure corresponding to this custom variable to store information contained in the custom variable, such as its id and name. Optionally, the code representation of the VariableInfo structure corresponding to this custom variable is as follows:

[0254] class VariableInfo{

[0255] string id / / Unique ID, also generated by the UUID algorithm

[0256] string dataType / / Data type, values ​​are as described in step 806 above.

[0257] string name / / The name of the variable

[0258] any value / / The value of the variable

[0259] }

[0260] Here, `id` is the unique identifier of this custom variable, and `dataType` is the id of this type.

[0261] To illustrate, let's take the variable "Monster1" as an example. The code representation of the VariableInfo structure of the variable "Monster1" is shown below:

[0262] {id:'6ec0bd7f-11c0-43da-975e-2a8ad9ebae0asss',

[0263] dataType:'9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

[0264] name:'Variable1'

[0265] value:undefined ]

[0267] }

[0268] Here, undefined means that the variable is not defined, and its value can be defined later according to the actual needs of using the variable.

[0269] Step 907, End.

[0270] Optionally, after creating a custom variable, the custom variable is stored in the target variable array. This custom variable can then be used in various variable usage scenarios. The target variable array is used to store all user-created variables, including custom variables of custom data types, basic variables of basic data types, platform variables of platform data types, etc.

[0271] After the above process is completed, the process of creating the custom variable code block ends.

[0272] The following section introduces the usage scenarios for various variables.

[0273] In some embodiments, the first variable code block can be combined with other code blocks provided by the visual programming interface to implement the program functionality of the first program content in the program. The various program functionalities implemented by the first variable code block and other types of code blocks are described below.

[0274] 1. Variable assignment.

[0275] This is illustrative; please refer to it. Figure 10 The above Figure 3 or Figure 6 The illustrated embodiments may also include steps 1001 to 1006.

[0276] Step 1001: Display the visual programming interface.

[0277] The visual programming interface provides the ability to customize and create program content through graphical code blocks. The visual programming interface includes a canvas area and an editing area. The editing area is used to display the code blocks to be used to create program content, and the canvas area is used to visually represent the creation process of program content based on the code blocks.

[0278] Step 1002: In response to receiving a type creation operation in the visual programming interface, create a custom data type.

[0279] The custom data type includes multiple attributes, each of which corresponds to a preset data type.

[0280] Step 1003: In response to receiving a variable creation operation based on a custom data type, display the first variable code block in the editing area.

[0281] The first variable code block is used to represent a custom variable of a custom data type. The custom variable includes multiple attributes. The first variable code block is used to implement the program function of the first program content in the program.

[0282] Step 1004: In response to receiving a trigger operation on the assignment code block in the editing area, display the assignment code block in the canvas area.

[0283] The assignment block includes a first position and a second position.

[0284] This is illustrative; please refer to it. Figure 11In the visual programming interface 1100, clicking the "Action" option 1101 displays a list of sub-options corresponding to "Action" option 1101. This list includes assignment options. Clicking an assignment option displays a list of code blocks corresponding to that option, including a "Set Variable" code block. The "Set Variable" code block 1102 (i.e., the assignment code block) can be dragged into the canvas 1130. The "Set Variable" code block 1102 includes a first position 1103 and a second position 1104.

[0285] Step 1005: In response to receiving a trigger operation on the first variable code block in the editing area, the first variable code block is displayed at the first position of the assignment code block displayed in the canvas area.

[0286] This is illustrative; please refer to it. Figure 11 After clicking the variable option 1105 in the visual programming interface 1100, the sub-option list 1106 corresponding to the variable option 1105 is displayed. The sub-option list 1106 will display all data types contained in the current visual programming interface. Clicking the monster option in the sub-option list 1106 will display the variable list area 1110 corresponding to the monster option. Drag the variable code block 1107 into the first position 1103 of the "Set Variable" code block 1102 to assign values ​​to the various attributes in the variable code block 1107.

[0287] Step 1006: Based on the assignment operation of the first variable code block displayed in the first position, display the assignment result in the second position of the assignment code block, and use the assigned code block as the second code block.

[0288] The second code block is used to assign the result of the assignment to a custom variable at runtime.

[0289] In some embodiments, in response to receiving a trigger operation on a second variable code block in the editing area, the second variable code block is displayed at a second position of the assignment code block displayed in the canvas area, and the assigned code block is used as the second code block.

[0290] Indicative, such as Figure 11 As shown, dragging variable code block 1108 into the second position 1104 of "Set Variable" code block 1102 will set the values ​​of each attribute in variable code block 1107 to the values ​​of each attribute in variable code block 1108.

[0291] In other embodiments, in response to receiving a trigger operation on a variable value setting control in the editing area, the assignment result is displayed at a second position of the assignment code block displayed in the canvas area, and the assigned code block is used as the second code block.

[0292] The property setting control is used to set the value of the custom variable corresponding to the first variable code block.

[0293] To illustrate, taking the monster variable as an example, after dragging the monster variable into the first position of the assignment code block, the value input boxes corresponding to the "health", "energy" and "speed" of the monster variable can be displayed in the editing area. The value of health, energy and speed are entered into the value input boxes corresponding to the "health", "energy" and "speed" respectively, and the monster variable is assigned a value. At this time, an identifier of the monster variable value can be displayed in the second position as the assignment result, such as: monster value 1, etc. This application embodiment does not limit this.

[0294] In summary, the visual programming method provided in this application simplifies the assignment operation in the programming process by using the assigned code block as a second code block and using it at runtime to assign the assignment result to a custom variable. Users do not need to manually write or modify the code; they can complete the variable assignment simply by dragging and dropping and assigning the value, which greatly improves programming efficiency.

[0295] II. Variable values.

[0296] This is illustrative; please refer to it. Figure 12 The above Figure 3 or Figure 6 The illustrated embodiments may also include steps 1201 to 1206.

[0297] Step 1201: Display the visual programming interface.

[0298] The visual programming interface provides the ability to customize and create program content through graphical code blocks. The visual programming interface includes a canvas area and an editing area.

[0299] Step 1202: In response to receiving a type creation operation in the visual programming interface, create a custom data type.

[0300] The custom data type includes multiple attributes, each of which corresponds to a preset data type.

[0301] Step 1203: In response to receiving a variable creation operation based on a custom data type, display the first variable code block in the editing area.

[0302] The first variable code block is used to represent a custom variable of a custom data type. The custom variable includes multiple attributes. The first variable code block is used to implement the program function of the first program content in the program.

[0303] Step 1204: In response to receiving a trigger operation on the value-getting code block in the editing area, display the value-getting code block in the canvas area.

[0304] Among them, the object position and property position in the value retrieval code block.

[0305] This is illustrative; please refer to it. Figure 13 In the visual programming interface 1300, clicking the "Get Value" option 1301 displays a list of sub-options corresponding to "Get Value" option 1301. This list includes global options. Clicking a global option displays a list of code blocks corresponding to that global option. This list includes the "Get Object Custom Property" code block 1302, which can be dragged into the canvas 1310. The "Get Object Custom Property" code block 1302 includes the object position 1303 and the property position 1304.

[0306] Step 1205: In response to receiving a trigger operation on the first variable code block in the editing area, display the first variable code block at the object position of the value code block displayed in the canvas area.

[0307] In some embodiments, multiple attributes corresponding to the value-taking code block are displayed in the editing area. Optionally, in response to receiving a trigger operation on the first variable code block in the editing area, the first variable code block is displayed at the object position of the value-taking code block displayed in the canvas area, while multiple attributes corresponding to the value-taking code block are displayed in the editing area; or, in response to receiving a trigger operation on the attribute position in the value-taking code block, multiple attributes corresponding to the value-taking code block are displayed in the editing area.

[0308] This is illustrative; please refer to it. Figure 13 Drag variable code block 1305 into object location 1303 of "Get Object Custom Properties" code block 1302, and then click on property location 1304. The right panel 1320 will then display multiple properties corresponding to variable code block 1305, such as displaying three properties of the custom data type "Monster": health, energy, and speed.

[0309] Step 1206: Based on the value retrieval operation of the first variable code block displayed at the object location, display the value retrieval result at the attribute location of the value retrieval code block, and use the value retrieval code block after retrieval as the second code block.

[0310] The result includes the target attribute from multiple properties. The second code block is used to extract the variable associated with the target attribute from the custom variable at runtime as the calling data.

[0311] Indicatively, in response to receiving a trigger operation on the target attribute among multiple attributes, the target attribute is displayed at the attribute position in the value code block displayed in the canvas area.

[0312] Please refer to Figure 13 After clicking to select the "Energy" attribute among the multiple attributes corresponding to variable code block 1305, it can be automatically filled into the "Get Object Custom Attributes" code block 1302, thus obtaining the second code block 1306. The second code block 1306 is used to obtain the "Energy" attribute in the "Monster 1" variable at runtime. This second code block 1306 can be used as the "Energy" attribute value in the "Monster 1" variable and placed in other code blocks.

[0313] In summary, the visual programming method provided in this application simplifies the value retrieval process by using the value-retrieval code block after value retrieval as a second code block and applying it to other code blocks that need to call the target attribute in the custom variable. Users do not need to manually write or modify code; they can complete variable value retrieval simply by dragging and dropping and retrieving values, thereby greatly improving programming efficiency.

[0314] Please refer to Figure 14 It shows a flowchart of a variable taking values, which includes the following steps:

[0315] Step 1401, Begin.

[0316] That is, the process of starting to get the value of the variable.

[0317] Step 1402: Switch the menu to Value Retrieval - Global.

[0318] This is illustrative; please refer to it. Figure 13 In the visual programming interface 1300, clicking the "Get Value" option 1301 displays a list of sub-options corresponding to the "Get Value" option 1301. This list includes global options. Clicking a global option displays a list of code blocks corresponding to that global option, which includes the "Get Object Custom Properties" code block 1302.

[0319] Step 1403: Drag the "Get Object Custom Properties" block into the canvas.

[0320] To illustrate, the "Get Object Custom Properties" code block 1302 can be dragged into canvas 1310. The "Get Object Custom Properties" code block 1302 includes the object position 1303 and the property position 1304.

[0321] Step 1404: Drag the variable into the first placeholder of the block.

[0322] This is illustrative; please refer to it. Figure 13 Drag the variable code block 1305 into the object position 1303 (i.e. the first placeholder) of the "Get Object Custom Properties" code block 1302.

[0323] Step 1405: Click the second placeholder and fill in the attributes.

[0324] As an illustration, clicking on attribute position 1304 (i.e., the second placeholder) will fill in the corresponding attribute of the variable in the code block 1302 of "Get Object Custom Attributes".

[0325] Step 1406: Is the variable type a custom data type?

[0326] This is an example of determining whether the data type corresponding to the variable code block 1305 at position 1303 of the dragged-in object is a custom data type.

[0327] Step 1407: If it is a custom data type, retrieve the corresponding TypeInfo structure from the dictionary and display all the attributes in the right panel.

[0328] For illustration, if the data type corresponding to variable code block 1305 is a custom data type, then the corresponding TypeInfo structure is obtained from the custom data type dictionary UserDefinedTypeDict, such as the TypeInfo structure of the "monster" type. The attributes in the TypeInfo structure are displayed as attribute names in the right panel, i.e., the editing area.

[0329] like Figure 13 As shown, clicking on attribute position 1304 (i.e., the second placeholder) will display multiple attributes corresponding to variable code block 1305 in the right panel 1320, such as displaying the three attributes of the custom data type "Monster": health, energy, and speed.

[0330] Step 1408: Select attributes.

[0331] Please refer to Figure 13 After clicking to select the "Energy" attribute among the multiple attributes corresponding to variable code block 1305, it will be automatically filled into the "Get Object Custom Attributes" code block 1302, thus obtaining the second code block 1306.

[0332] Step 1409: The "Get Object Custom Properties" block after setting is used to retrieve values.

[0333] like Figure 13As shown, the second code block 1306 is the "Get Object Custom Attributes" block after being set, which is used to get the "Energy" attribute in the "Monster 1" variable. This second code block 1306 can be put into other code blocks as the "Energy" attribute value in the "Monster 1" variable. When the second code block 1306 runs, it will get the value corresponding to "Energy" from the value in the VariableInfo structure corresponding to the "Monster 1" variable.

[0334] Step 1410: If it is not a custom data type, execute the original process for other types.

[0335] For illustrative purposes only, if the data type corresponding to variable code block 1305 is a custom data type, then the original process for other types will be executed. This process can be designed by the developers themselves according to the original type and user requirements, and is not limited here.

[0336] Step 1411, End.

[0337] That is, the process of retrieving variable values ​​ends.

[0338] III. Variable function calls.

[0339] This is illustrative; please refer to it. Figure 15 The above Figure 3 or Figure 6 The illustrated embodiment may also include steps 1501 to 1505.

[0340] Step 1501: Display the visual programming interface.

[0341] The visual programming interface provides the ability to customize and create program content through graphical code blocks. The visual programming interface includes a canvas area and an editing area.

[0342] Step 1502: In response to receiving a type creation operation in the visual programming interface, create a custom data type.

[0343] The custom data type includes multiple attributes, each of which corresponds to a preset data type.

[0344] Step 1503: In response to receiving a variable creation operation based on a custom data type, display the first variable code block in the editing area.

[0345] The first variable code block is used to represent a custom variable of a custom data type. The custom variable includes multiple attributes. The first variable code block is used to implement the program function of the first program content in the program.

[0346] Step 1504: In response to receiving a trigger operation on a function code block in the editing area, display the function code block in the canvas area.

[0347] Optionally, the function code block includes at least one of the platform function code block provided by the platform and the custom function code block.

[0348] The platform function code blocks provided by the platform include, but are not limited to:

[0349] 1. Operation code blocks: These are used to perform mathematical operations, such as addition, subtraction, multiplication, and division. These code blocks can be viewed as mathematical functions provided by the system. Users do not need to worry about the specific implementation details of the operations; they only need to drag the values ​​or variables to be operated on into the corresponding operation code block.

[0350] 2. Conditional code blocks: These are used to execute different code blocks based on the result of a conditional statement. These blocks are similar to conditional statements in programming languages ​​(such as if-else statements), encapsulating the logic of the conditional statement and allowing the user to perform different operations based on the condition.

[0351] 3. Looping code blocks: These are used to repeatedly execute a block of code until a certain condition is met. Looping code blocks can be viewed as system-provided loop functions or subroutines that allow users to repeatedly execute specific blocks of code by configuring the number of iterations or the condition.

[0352] 4. Input / output code blocks: These are used to obtain input from the user or other devices, or to output information to devices such as the screen and speakers. Input / output code blocks are similar to input / output functions in programming languages.

[0353] 5. Event Handling Blocks: These blocks trigger the execution of corresponding code when a specific event occurs. Event handling blocks are similar to callback functions in programming languages, allowing users to define actions that should be performed when a specific event occurs.

[0354] Among them, the custom function code block is a code block obtained by defining at least one custom parameter based on the candidate data type, and the at least one custom parameter includes the parameter obtained by defining the custom data type.

[0355] In illustrative terms, a custom function code block refers to a function class code block defined by the user in the visual programming interface. The following explanation primarily uses the implementation of a custom function code block as an example. Optionally, the method for displaying a function code block in the canvas area also includes the following steps:

[0356] Step 1: In response to receiving a function creation operation in the editing area, display the function editing area.

[0357] The function editing area includes controls for adding parameters corresponding to preset data types.

[0358] Optionally, the preset data type includes at least one of platform data type, basic data type and created custom data type. If a first account is logged in in the visual programming interface, the created custom data type can be created by the first account in the visual programming interface or by other accounts in the visual programming interface. This application embodiment does not limit this.

[0359] Optionally, there can be one or more parameter adding controls corresponding to preset data types in the function editing area. When there are multiple parameter adding controls corresponding to preset data types, the preset data types corresponding to different parameter adding controls are different; that is, the data types of the target parameters added by different parameter adding controls are different.

[0360] This is illustrative; please refer to it. Figure 16 After the function creation operation is triggered, the function editing area 1610 is displayed. The function editing area 1610 includes multiple parameter addition controls 1601 corresponding to preset data types. Among them, the "+value" control is used to add parameters of the value type, the "+string" control is used to add parameters of the string type, the "+player" control is used to add parameters of the player type, the "+monster" control is used to add parameters of the monster type, etc., which will not be described in detail here.

[0361] Step 2: Based on the trigger operation of adding controls to parameters, display parameter editing information in the function editing area.

[0362] Optionally, the parameter editing information includes the parameter name of the target parameter. In response to receiving a trigger operation to add a control to the parameter, the parameter name input box corresponding to the target parameter is displayed in the function editing area; in response to receiving an input operation in the parameter name input box, the parameter name of the target parameter is displayed.

[0363] This is illustrative; please refer to it. Figure 16 Click the "+Monster" control 1602, and the parameter name input box 1603 will be displayed in the function editing area. Enter "Monster" as the parameter name in the parameter name input box 1603.

[0364] Step 3: Based on the parameter editing information displayed in the function editing area, display the custom function code in the canvas area. piece.

[0365] The custom function code block is used to represent a custom function, whose parameters include custom parameters corresponding to custom data types.

[0366] In illustrative terms, in this embodiment of the application, multiple parameter editing information can be added to the function editing area via a parameter adding control. The data types corresponding to the multiple parameter editing information can be the same or different.

[0367] In some embodiments, the function editing area further includes a function name input box. Optionally, in response to receiving input in the function name input box, a custom function name is displayed; a custom function is created based on the parameter editing information displayed in the function editing area and the custom function name.

[0368] This is illustrative; please refer to it. Figure 16 The function editing area 1610 also includes a function name input box 1604. Enter "Custom Code 1" as the custom function name in the function name input box 1604. After determining the custom function name and parameters, the custom function can be created, and the function definition code block 1605 and function value retrieval code block 1606 representing the custom function will be displayed in the canvas area 1620. The function definition code block 1605 and function value retrieval code block 1606 are used as the custom function code block.

[0369] Step 1505: In response to receiving a trigger operation on the first variable code block in the editing area, the first variable code block is displayed at the call position of the custom function code block, and the custom function code block with the first variable code block displayed is obtained as the second code block.

[0370] The second code block is used to execute the custom logic corresponding to the custom function code block by calling the custom variable at runtime.

[0371] Optionally, the call location of the custom function code block includes at least one of the following locations:

[0372] 1. Parameter call location: The parameter call location is used to call custom variables to participate in the execution process of custom function code blocks.

[0373] Optionally, the custom function code block includes a function value retrieval code block, which contains the parameter call location. In response to receiving a trigger operation on the first variable code block in the editing area, the first variable code block is displayed at the parameter value location corresponding to the custom parameter in the function value retrieval code block displayed in the canvas area, and the function value retrieval code block displaying the first variable code block is obtained as the second code block.

[0374] This is illustrative; please refer to it. Figure 16 Drag variable code block 1606 into the parameter call location of function value call block 1608 (i.e., the current...). Figure 16If the variable code block 1606 is located at the position shown, then the value of the custom parameter in the custom function represented by the function value code block 1608 is the value of the variable represented by the variable code block 1606.

[0375] 2. Return value call location: The return value call location is used to store the execution result of the custom function code block into a custom variable.

[0376] Optionally, the custom function code block includes a function definition code block, which contains the return value call location. In response to receiving a trigger operation on the first variable code block in the editing area, the first variable code block is displayed at the return value call location of the function definition code block displayed in the canvas area, and the function definition code block displaying the first variable code block is obtained as the second code block.

[0377] This is illustrative; please refer to it. Figure 16 If you drag variable code block 1606 into the return value position 1607 of function definition code block 1605, the return value of function definition code block 1605 will be stored in the variable corresponding to variable code block 1606.

[0378] This is illustrative; please refer to it. Figure 17 It shows a flowchart of a variable function call, which includes the following steps:

[0379] Step 1701, Begin.

[0380] This refers to the process of starting to create a new custom function.

[0381] Step 1702: Switch the menu to Custom - Function.

[0382] As an illustration, after clicking the "Custom" option in the visual programming interface, a function list area corresponding to the custom function is displayed, and a function creation control is displayed in the function list area.

[0383] Step 1703: Click "New Function" and enter the function name.

[0384] Indicative, such as Figure 16 As shown, after clicking the function creation control, the function editing area 1610 is opened. The function editing area 1610 also includes a function name input box 1604. "Custom code 1" is entered in the function name input box 1604 as the custom function name.

[0385] Step 1704, add parameters, click "More" below.

[0386] As an illustration, the function editing area 1610 includes multiple parameter addition controls 1601 corresponding to preset data types, among which the "+Number" control is used to add parameters of the number type, the "+String" control is used to add parameters of the string type, the "+Player" control is used to add parameters of the player type, the "+Monster" control is used to add parameters of the monster type, and so on.

[0387] The function editing area 1610 includes a "More" control.

[0388] Step 1705: Retrieve all custom data types, basic types, and platform types and display them together in the Type panel.

[0389] As an illustration, clicking the "More" control will display all the parameter addition controls corresponding to custom data types, basic data types, and platform data types in the function editing area 1610 (including the aforementioned type panel).

[0390] Step 1706: Select a custom data type.

[0391] As an illustration, if you click on the parameter corresponding to the custom data type in the function editing area 1610 to add a control, for example: Figure 16 The “+Monster” control 1602 shown selects a parameter of a custom data type (i.e., a custom parameter) as the parameter of the function.

[0392] Step 1707: Fill in the parameter type in the function definition with the custom data type id.

[0393] As an example, after selecting a parameter of a custom data type (i.e., a custom parameter) as a parameter of a function, the parameter type corresponding to that parameter in the definition of the custom function is filled in as the id of the custom data type.

[0394] As an illustration, when a custom function is created, the platform generates a corresponding FunctionInfo structure to store the information contained in the custom function. Optionally, the code representation of the FunctionInfo structure corresponding to the custom function is shown below:

[0395] class FunctionInfo{

[0396] string name / / Function name

[0397] ParamInfo[] paramList / / Parameter list

[0398] }

[0399] Where `name` is the function name, which can be in Chinese or English and can be modified by the user. `paramList` is an array of parameters, each with a corresponding `ParamInfo` structure. The `ParamInfo` structure stores information contained in the parameters. Optionally, the code representation of the `ParamInfo` structure is shown below:

[0400] class ParamInfo{

[0401] string name / / Parameter name

[0402] string dataType / / Data type of the parameter

[0403] }

[0404] The `dataType` in the `ParamInfo` structure can be referenced in step 804. For custom data types, the value of `dataType` in the `ParamInfo` structure is its unique identifier, `id`, for example: `9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d`. During the call, for formal parameters of custom data types, only variables of the same type are allowed as actual parameters. The platform checks the `dataType` in the `VariableInfo` structure and the `dataType` in the `ParamInfo` structure; they must match before being allowed to be filled in.

[0405] Step 1708, End.

[0406] This is illustrative; after the above process, the process of creating a new custom function ends.

[0407] It should be noted that the above examples of combining the first variable code block with various other code blocks to implement various program functions are merely illustrative and are not intended to limit the scope of this application.

[0408] In summary, this application provides a technical implementation scheme for custom data types in code block (building block) programming. The scheme includes: defining a custom data type, setting attributes in the custom data type, creating variables of the custom data type, using the custom data type as the parameter and return type of a function, and using code blocks (building blocks) to assign and retrieve values ​​of the attributes in the variables of the custom data type. This application provides at least the following beneficial effects:

[0409] 1. It provides a visual programming solution for custom data types, enabling creators to define and manage their own unique data types, making custom variables for non-general needs feasible.

[0410] 2. It reduces the time and dependence on platform customization. Creators can create and manage custom data types through a visual programming interface without waiting for the platform to release a new version, thus improving the flexibility and efficiency of customization.

[0411] 3. It simplifies the process for visual programming developers to find the data types they need. By defining custom data types, developers can more easily find and use the types they want, improving development efficiency and user experience.

[0412] 4. With support for visual programming, developers can more easily handle complex data structures and scenarios by defining custom data types. For example, in the monster example, developers only need to define a "monster type" and use a "monster array" to store multiple monsters. The function only needs to pass in "monster" as a parameter. When the monster type changes, the function definition and function call do not need to be modified, improving code maintainability and extensibility.

[0413] The visual programming method provided in this application can be applied to various usage scenarios such as programming enlightenment, product development, business process automation, robot programming, audio synthesis, and game UGC. This application does not limit the application in this regard.

[0414] In some embodiments, the application of visual programming methods to programming enlightenment scenarios is illustrated by example.

[0415] To illustrate, a company has launched a visual programming application aimed at programming beginners. Users can use the application online or download it. Taking user A downloading and using the application via a terminal as an example, after downloading and opening the application, a visual programming interface is displayed. This interface includes an editing area and a canvas area. The editing area displays multiple programming blocks representing basic units of programming logic, while the canvas area visually represents the program's construction process based on these blocks. This visual programming interface supports user-defined data types. When user A triggers a type creation operation within the interface, it creates a custom data type with multiple attributes. User A can then create multi-attribute custom variables corresponding to this custom data type.

[0416] In some embodiments, the application of visual programming methods to game UGC scenarios is illustrated as an example.

[0417] In illustrative terms, in some games (e.g., party casual games), users can design custom maps using a UGC editor. To further enhance user freedom in using the UGC editor, this embodiment introduces visual programming functionality into the UGC editor to support more personalized design of the custom maps users edit. With the introduction of visual programming functionality, users can design various gameplay elements within the virtual map. For example, the UGC editor includes a timer A, which only has a basic countdown function. Users can design gameplay elements for timer A in the visual programming interface, such as designing the appearance of timer A, designing an emergency animation effect when the countdown reaches 3 seconds, or designing the timer to appear above the virtual character representing the target player when they enter. This greatly enhances the user's freedom in designing custom maps. The visual programming interface in the UGC editor also supports user-defined data types. When a user triggers a type creation operation in the visual programming interface, the interface creates a custom data type, which includes multiple attributes. Users can create multi-attribute custom variables corresponding to this custom data type. For example, a user can create a monster type, thus creating a monster variable. Based on this monster variable, the user can create a virtual character of the monster type in the custom map.

[0418] This is illustrative; please refer to it. Figure 18 The diagram illustrates a structural block diagram of a visual programming device, which includes the following modules:

[0419] Display module 1810 is used to display a visual programming interface, which provides the function of customizing program content through graphical code blocks;

[0420] A creation module 1820 is used to create a custom data type in response to receiving a type creation operation on the visual programming interface. The custom data type includes multiple attributes, and each of the multiple attributes corresponds to a preset data type.

[0421] The display module 1810 is further configured to display a first variable code block in response to receiving a variable creation operation based on the custom data type. The first variable code block is a code block obtained by defining custom variables for multiple attributes in the custom data type. The first variable code block is used to implement the program function of the first program content in the program.

[0422] In some embodiments, the creation module 1820 is configured to:

[0423] In response to receiving the type creation operation in the visual programming interface, a type editing area is displayed, which includes an attribute addition control corresponding to the preset data type;

[0424] Based on at least two triggering operations of adding controls to the attribute, at least two attribute editing messages are displayed in the type editing area, wherein the at least two triggering operations are operations triggered for adding controls to the same or different attributes;

[0425] The custom data type is created based on the at least two attribute editing information displayed in the type editing area.

[0426] In some embodiments, the display module 1810 is further configured to:

[0427] The visual programming interface displays a type display area, which includes type creation controls.

[0428] In response to receiving a trigger operation for creating a control of the type, the type editing area is displayed.

[0429] In some embodiments, the visual programming interface includes a run preview area, which is used to display the graphical result obtained by running the program content in the visual programming interface; the display module 1810 is further used for:

[0430] In response to receiving an object type creation operation in the running preview area, the type editing area is displayed. The object type creation operation is used to create the custom data type corresponding to the custom object. The custom object is used to represent the custom variable containing the object's appearance.

[0431] The custom object is used to display a graphical object containing the appearance of the object in the running preview area when the first program content is running.

[0432] In some embodiments, the attribute editing information includes an attribute name; the display module 1810 is further configured to:

[0433] In response to receiving at least two trigger operations to add controls to the attribute, at least two attribute name input boxes are displayed in the type editing area;

[0434] Based on the input operations corresponding to the at least two attribute name input boxes, display at least two attribute names.

[0435] In some embodiments, the type editing area includes a type name input box; the display module 1810 is further configured to:

[0436] In response to receiving input in the type name input box, display the custom type name;

[0437] Recommended attribute information is generated based on the custom type name. The recommended attribute information is automatically generated based on the custom type name. The recommended attribute information includes multiple preset data types and attribute names corresponding to the multiple preset data types.

[0438] Based on the recommended attribute information, when at least two trigger operations are received to add controls to the attribute, at least two attribute editing messages are displayed in the type editing area.

[0439] In some embodiments, the recommended attribute information includes an attribute fill control; the display module 1810 is further configured to:

[0440] Receive a trigger operation on the property-filling control as at least two trigger operations on the property-adding control;

[0441] In response to a trigger operation on the attribute fill control, at least two attribute editing information entries are automatically displayed in the type editing area based on the recommended attribute information.

[0442] In some embodiments, the creation module 1820 is further configured to:

[0443] The visual programming interface displays a list of preset data types.

[0444] In response to receiving a trigger operation on a target data type in the preset data type list, a type editing area is displayed, the type editing area including at least one attribute corresponding to the target data type;

[0445] In response to receiving a type editing operation on the target data type in the type editing area, the edited target data type is obtained as the custom data type.

[0446] In some embodiments, the display module 1810 is further configured to:

[0447] Display control for creating array of variables;

[0448] In response to receiving a trigger operation on the variable array creation control, a variable array code block is displayed as the first variable code block. The variable array code block is a code block obtained by defining a custom variable array for the custom data type. The custom variable array includes multiple custom variables of the same data type.

[0449] In some embodiments, the visual programming interface includes a canvas area and an editing area, the editing area being used to display code blocks to be used in creating program content; the display module 1810 is further used for:

[0450] In response to receiving a variable creation operation based on the custom data type, the first variable code block is displayed in the editing area;

[0451] After displaying the first variable code block in response to receiving a variable creation operation based on the custom data type, the method further includes:

[0452] A first code block is displayed in the canvas area; in response to receiving a trigger operation on the first variable code block in the editing area, a second code block is displayed in the canvas area, the second code block being a code block obtained by combining the first code block and the first variable code block; wherein, the second code block is used to call the custom variable in the first variable code block at runtime.

[0453] In some embodiments, the first code block is implemented as an assignment code block; the display module 1810 is further configured to:

[0454] In response to receiving a trigger operation on the first variable code block in the editing area, the first variable code block is displayed at the first position of the assignment code block displayed in the canvas area;

[0455] Based on the assignment operation of the first variable code block displayed at the first position, the assignment result is displayed at the second position of the assignment code block, and the assigned code block is used as the second code block;

[0456] The second code block is used to assign the assignment result to the custom variable at runtime.

[0457] In some embodiments, the first code block is implemented as a value retrieval code block; the display module 1810 is further configured to:

[0458] In response to receiving a trigger operation on the first variable code block in the editing area, the first variable code block is displayed at the object position of the value code block displayed in the canvas area;

[0459] Based on the value retrieval operation of the first variable code block displayed at the object location, the value retrieval result is displayed at the attribute location of the value retrieval code block, and the value retrieval code block after retrieval is used as the second code block. The value retrieval result includes the target attribute among the plurality of attributes.

[0460] The second code block is used to extract the variable associated with the target attribute from the custom variable at runtime as the calling data.

[0461] In some embodiments, the first code block is implemented as a custom function code block, the custom function code block being a code block obtained by defining at least one custom parameter based on a candidate data type, the at least one custom parameter including a parameter defined based on the custom data type; the display module 1810 is further configured to:

[0462] In response to receiving a trigger operation on the first variable code block in the editing area, the first variable code block is displayed at the call position of the custom function code block, and the custom function code block displaying the first variable code block is obtained as the second code block;

[0463] The second code block is used to execute the custom logic corresponding to the custom function code block by calling the custom variable at runtime.

[0464] In summary, the visual programming device provided in this application embodiment allows users to create custom data types in the visual programming interface and create variable code blocks representing multiple attributes based on these custom data types. These variable code blocks allow multiple attributes to be operated on as a whole, avoiding the need to create and use multiple variables one by one when setting multiple attribute variables, thus simplifying the operation process and improving development efficiency in visual programming. Furthermore, the custom data type encapsulates multiple attributes into a single data type, enabling users to represent multiple attribute variables using a single variable code block. This reduces the number of variable code blocks that need to be operated on during visual programming, thereby reducing programming complexity, decreasing the possibility of programming errors, and saving computer resources.

[0465] It should be noted that the visual programming device provided in the above embodiments is only an example of the division of the above functional modules. In practical applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above. In addition, the visual programming device and visual programming method embodiments provided in the above embodiments belong to the same concept, and the specific implementation process can be found in the method embodiments, which will not be repeated here.

[0466] Figure 19 A structural block diagram of a computer device provided in an exemplary embodiment of this application is shown.

[0467] The computer device 1900 can be a portable mobile terminal, such as a smartphone, tablet, MP3 player (Moving Picture Experts Group Audio Layer III), or MP4 player (Moving Picture Experts Group Audio Layer IV). The computer device 1900 may also be referred to as a user device, portable terminal, or other names.

[0468] Typically, computer device 1900 includes a processor 1901 and a memory 1902.

[0469] Processor 1901 may include one or more processing cores, such as a quad-core processor, an octa-core processor, etc. Processor 1901 may be implemented using at least one hardware form selected from DSP (Digital Signal Processing), FPGA (Field Programmable Gate Array), and PLA (Programmable Logic Array). Processor 1901 may also include a main processor and a coprocessor. The main processor, also known as a CPU (Central Processing Unit), is used to process data in the wake-up state; the coprocessor is a low-power processor used to process data in the standby state. In some embodiments, processor 1901 may integrate a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content required to be displayed on the screen. In some embodiments, processor 1901 may also include an AI (Artificial Intelligence) processor, which is used to handle computational operations related to machine learning.

[0470] The memory 1902 may include one or more computer-readable storage media, which may be tangible and non-transitory. The memory 1902 may also include high-speed random access memory and non-volatile memory, such as one or more disk storage devices or flash memory devices. In some embodiments, the non-transitory computer-readable storage media in the memory 1902 are used to store at least one instruction, which is executed by the processor 1901 to implement the visual programming method provided in the embodiments of this application.

[0471] In some embodiments, the computer device 1900 may also optionally include: a peripheral device interface 1903 and at least one peripheral device. Specifically, the peripheral device includes at least one of: a radio frequency circuit 1904, a touch display screen 1905, a camera 1906, an audio circuit 1907, and a power supply 1908.

[0472] Peripheral interface 1903 can be used to connect at least one I / O (Input / Output) related peripheral device to processor 1901 and memory 1902. In some embodiments, processor 1901, memory 1902 and peripheral interface 1903 are integrated on the same chip or circuit board; in some other embodiments, any one or two of processor 1901, memory 1902 and peripheral interface 1903 can be implemented on separate chips or circuit boards, which is not limited in this embodiment.

[0473] The radio frequency (RF) circuit 1904 is used to receive and transmit RF (Radio Frequency) signals, also known as electromagnetic signals. The RF circuit 1904 communicates with communication networks and other communication devices via electromagnetic signals. The RF circuit 1904 converts electrical signals into electromagnetic signals for transmission, or converts received electromagnetic signals back into electrical signals. Optionally, the RF circuit 1904 includes: an antenna system, an RF transceiver, one or more amplifiers, a tuner, an oscillator, a digital signal processor, a codec chipset, a user identity module card, etc. The RF circuit 1904 can communicate with other terminals through at least one wireless communication protocol. This wireless communication protocol includes, but is not limited to: the World Wide Web, metropolitan area networks, intranets, various generations of mobile communication networks (2G, 3G, 4G, and 5G), wireless local area networks, and / or WiFi (Wireless Fidelity) networks. In some embodiments, the RF circuit 1904 may also include circuitry related to NFC (Near Field Communication), which is not limited in this application.

[0474] The touch display screen 1905 is used to display a user interface (UI). This UI may include graphics, text, icons, videos, and any combination thereof. The touch display screen 1905 also has the ability to collect touch signals on or above its surface. These touch signals can be input as control signals to the processor 1901 for processing. The touch display screen 1905 is used to provide virtual buttons and / or a virtual keyboard, also known as soft buttons and / or a soft keyboard. In some embodiments, there may be one touch display screen 1905, located on the front panel of the computer device 1900; in other embodiments, there may be at least two touch display screens, respectively located on different surfaces of the computer device 1900 or in a folded design; in some embodiments, the touch display screen 1905 may be a flexible display screen, located on a curved or folded surface of the computer device 1900. Furthermore, the touch display screen 1905 may be configured as a non-rectangular, irregular shape, i.e., a non-rectangular screen. The touch display screen 1905 may be made of materials such as LCD (Liquid Crystal Display) or OLED (Organic Light-Emitting Diode).

[0475] The camera assembly 1906 is used to acquire images or videos. Optionally, the camera assembly 1906 includes a front-facing camera and a rear-facing camera. Typically, the front-facing camera is used for video calls or selfies, and the rear-facing camera is used for taking photos or videos. In some embodiments, there are at least two rear-facing cameras, which are any one of a main camera, a depth-sensing camera, and a wide-angle camera, to achieve background blurring by fusion of the main camera and the depth-sensing camera, and panoramic shooting and VR (Virtual Reality) shooting by fusion of the main camera and the wide-angle camera. In some embodiments, the camera assembly 1906 may also include a flash. The flash can be a single-color temperature flash or a dual-color temperature flash. A dual-color temperature flash is a combination of a warm light flash and a cool light flash, which can be used for light compensation at different color temperatures.

[0476] Audio circuitry 1907 provides an audio interface between the user and computer device 1900. Audio circuitry 1907 may include a microphone and a speaker. The microphone is used to collect sound waves from the user and the environment, converting the sound waves into electrical signals that are input to processor 1901 for processing, or input to radio frequency circuitry 1904 for voice communication. For stereo sound acquisition or noise reduction purposes, multiple microphones may be used, positioned at different locations within computer device 1900. The microphone may also be an array microphone or an omnidirectional microphone. The speaker is used to convert electrical signals from processor 1901 or radio frequency circuitry 1904 into sound waves. The speaker may be a conventional diaphragm speaker or a piezoelectric ceramic speaker. When the speaker is a piezoelectric ceramic speaker, it can convert electrical signals not only into audible sound waves but also into inaudible sound waves for purposes such as distance measurement. In some embodiments, audio circuitry 1907 may also include a headphone jack.

[0477] Power supply 1908 is used to supply power to the various components in computer device 1900. Power supply 1908 can be AC ​​power, DC power, a disposable battery, or a rechargeable battery. When power supply 1908 includes a rechargeable battery, the rechargeable battery can be a wired rechargeable battery or a wireless rechargeable battery. A wired rechargeable battery is a battery that is charged via a wired line, and a wireless rechargeable battery is a battery that is charged via a wireless coil. The rechargeable battery can also be used to support fast charging technology.

[0478] In some embodiments, the computer device 1900 further includes one or more sensors 1909. The one or more sensors 1909 include, but are not limited to, an accelerometer 1910, a gyroscope 1911, a pressure sensor 1912, an optical sensor 1913, and a proximity sensor 1914.

[0479] Accelerometer 1910 can detect the magnitude of acceleration along the three coordinate axes of a coordinate system established by computer device 1900. For example, accelerometer 1910 can be used to detect the components of gravitational acceleration along the three coordinate axes. Processor 1901 can control touchscreen display 1905 to display the user interface in landscape or portrait view based on the gravitational acceleration signal acquired by accelerometer 1910. Accelerometer 1910 can also be used for games or for acquiring user motion data.

[0480] The gyroscope sensor 1911 can detect the orientation and rotation angle of the computer device 1900. The gyroscope sensor 1911 can work in conjunction with the accelerometer sensor 1910 to acquire the user's 3D movements of the computer device 1900. Based on the data acquired by the gyroscope sensor 1911, the processor 1901 can perform the following functions: motion sensing (such as changing the UI based on the user's tilt), image stabilization during shooting, game control, and inertial navigation.

[0481] The pressure sensor 1912 can be disposed on the side bezel of the computer device 1900 and / or on the lower layer of the touch display screen 1905. When the pressure sensor 1912 is disposed on the side bezel of the computer device 1900, it can detect the user's grip signal on the computer device 1900 and perform left / right hand recognition or quick operation based on the grip signal. When the pressure sensor 1912 is disposed on the lower layer of the touch display screen 1905, it can control operable controls on the UI interface based on the user's pressure operation on the touch display screen 1905. Operable controls include at least one of button controls, scroll bar controls, icon controls, and menu controls.

[0482] An optical sensor 1913 is used to collect ambient light intensity. In one embodiment, the processor 1901 can control the display brightness of the touch screen 1905 based on the ambient light intensity collected by the optical sensor 1913. Specifically, when the ambient light intensity is high, the display brightness of the touch screen 1905 is increased; when the ambient light intensity is low, the display brightness of the touch screen 1905 is decreased. In another embodiment, the processor 1901 can also dynamically adjust the shooting parameters of the camera assembly 1906 based on the ambient light intensity collected by the optical sensor 1913.

[0483] The proximity sensor 1914, also known as a distance sensor, is typically located on the front of the computer device 1900. The proximity sensor 1914 is used to detect the distance between the user and the front of the computer device 1900. In one embodiment, when the proximity sensor 1914 detects that the distance between the user and the front of the computer device 1900 is gradually decreasing, the processor 1901 controls the touchscreen display 1905 to switch from a screen-on state to a screen-off state; when the proximity sensor 1914 detects that the distance between the user and the front of the computer device 1900 is gradually increasing, the processor 1901 controls the touchscreen display 1905 to switch from a screen-off state to a screen-on state.

[0484] Those skilled in the art will understand that Figure 19 The structure shown does not constitute a limitation on the computer device 1900, and may include more or fewer components than shown, or combine certain components, or use different component arrangements.

[0485] In an exemplary embodiment, this application provides a chip that includes programmable logic circuits and / or program instructions, which, when run on a computer device, are used to implement the visual programming method provided in the above-described method embodiments.

[0486] This application provides a computer-readable storage medium storing a computer program that is loaded and executed by a processor to implement the visual programming method provided in the above-described method embodiments.

[0487] This application provides a computer program product or computer program, which includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the processor of the computer device to load and execute the program to implement the visual programming method provided in the above-described method embodiments.

[0488] The sequence numbers of the embodiments in this application are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments.

[0489] Those skilled in the art will understand that all or part of the steps of the above embodiments can be implemented by hardware or by a program instructing related hardware. The program can be stored in a computer-readable storage medium, such as a read-only memory, a disk, or an optical disk.

[0490] Those skilled in the art will recognize that the functions described in the embodiments of this application in one or more of the above examples can be implemented using hardware, software, firmware, or any combination thereof. When implemented using software, these functions can be stored in a computer-readable medium or transmitted as one or more instructions or code on a computer-readable medium. Computer-readable media include computer storage media and communication media, wherein communication media include any medium that facilitates the transfer of a computer program from one place to another. Storage media can be any available medium that can be accessed by a general-purpose or special-purpose computer.

[0491] The above description is merely an optional embodiment of this application and is not intended to limit this application. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.

Claims

1. A visual programming method, characterized in that, The method includes: Display a visual programming interface, which provides the ability to customize and create program content through graphical code blocks; In response to receiving a type creation operation on the visual programming interface, a type editing area is displayed, the type editing area including attribute adding controls, wherein different attribute adding controls are used to create attributes of different preset data types; In response to receiving an input operation in the type name input box in the type editing area, a custom type name is displayed; Recommended attribute information is generated based on the custom type name. The recommended attribute information is automatically generated based on the custom type name. The recommended attribute information includes multiple preset data types and attribute names corresponding to the multiple preset data types. Based on the recommended attribute information, when at least two trigger operations are received to add a control to the attribute, at least two attribute editing information are displayed in the type editing area, and the attribute editing information includes the attribute name; Based on the editing information of at least two attributes, create a custom data type containing multiple attributes; In response to receiving a variable creation operation based on the custom data type, a first variable code block is displayed; the first variable code block includes at least one of a variable code block and a variable array code block, wherein the variable code block is a code block obtained by defining a single custom variable for the custom data type, and the variable array code block is a code block obtained by defining a custom variable array for the custom data type, wherein the custom variable array includes multiple custom variables of the same data type.

2. The method according to claim 1, characterized in that, The response to receiving a type creation operation on the visual programming interface, displaying a type editing area, includes: The visual programming interface displays a type display area, which includes type creation controls. In response to receiving a trigger operation for creating a control of the type, the type editing area is displayed.

3. The method according to claim 1, characterized in that, The visual programming interface includes a run preview area, which is used to display graphical results. The graphical results refer to the results obtained by running the program content in the visual programming interface. The response to receiving a type creation operation on the visual programming interface, displaying a type editing area, includes: In response to receiving an object type creation operation in the running preview area, the type editing area is displayed. The object type creation operation is used to create a custom data type corresponding to a custom object. The custom object is used to represent custom variables that include the object's appearance.

4. The method according to any one of claims 1 to 3, characterized in that, The method further includes: In response to receiving at least two trigger operations to add controls to the attribute, at least two attribute name input boxes are displayed in the type editing area; Based on the input operations corresponding to the at least two attribute name input boxes, display at least two attribute names as the at least two attribute editing information.

5. The method according to any one of claims 1 to 3, characterized in that, Based on the recommended attribute information, upon receiving at least two trigger operations for adding controls to the attribute, at least two attribute editing messages are displayed in the type editing area, including: Receive a trigger operation on an attribute-filled control, wherein the trigger operation on the attribute-filled control is at least two trigger operations on the attribute-adding control; In response to a trigger operation on the attribute population control, at least two attribute editing information are automatically displayed in the type editing area based on the recommended attribute information.

6. The method according to any one of claims 1 to 3, characterized in that, The method further includes: The visual programming interface displays a list of preset data types. In response to receiving a trigger operation on a target data type in the preset data type list, the type editing area is displayed, and the type editing area includes at least one attribute corresponding to the target data type; In response to receiving a type editing operation on the target data type in the type editing area, the edited target data type is obtained as the custom data type.

7. The method according to any one of claims 1 to 3, characterized in that, The response to receiving a variable creation operation based on the custom data type, displaying a first variable code block, includes: Display control for creating array of variables; In response to receiving a trigger operation on the variable array creation control, the variable array code block is displayed.

8. The method according to any one of claims 1 to 3, characterized in that, The visual programming interface includes a canvas area and an editing area, wherein the editing area is used to display code blocks; The response to receiving a variable creation operation based on the custom data type, displaying a first variable code block, includes: In response to receiving a variable creation operation based on the custom data type, the first variable code block is displayed in the editing area; After displaying the first variable code block in response to receiving a variable creation operation based on the custom data type, the method further includes: Display the first code block in the canvas area; In response to receiving a trigger operation on the first variable code block in the editing area, a second code block is displayed in the canvas area. The second code block is a code block obtained by combining the first code block and the first variable code block. The second code block is used to call the custom variable in the first variable code block at runtime.

9. The method according to claim 8, characterized in that, The first code block is implemented as an assignment code block; The step of displaying a second code block in the canvas area in response to receiving a trigger operation on the first variable code block in the editing area includes: In response to receiving a trigger operation on the first variable code block in the editing area, the first variable code block is displayed at the first position of the assignment code block displayed in the canvas area; Based on the assignment operation of the first variable code block, the assignment result is displayed at the second position of the assignment code block, and the assigned code block is used as the second code block; wherein, the second code block is used to assign the assignment result to the custom variable at runtime.

10. The method according to claim 8, characterized in that, The first code block is implemented as a value retrieval code block; The step of displaying a second code block in the canvas area in response to receiving a trigger operation on the first variable code block in the editing area includes: In response to receiving a trigger operation on the first variable code block in the editing area, the first variable code block is displayed at the object position of the value code block displayed in the canvas area; Based on the value retrieval operation of the first variable code block, the value retrieval result is displayed at the attribute position of the value retrieval code block, and the value retrieval code block after retrieval is used as the second code block. The value retrieval result includes the target attribute among the plurality of attributes. The second code block is used to extract the variable associated with the target attribute in the custom variable as the calling data at runtime.

11. The method according to claim 8, characterized in that, The first code block is implemented as a custom function code block; the custom function code block is a code block obtained by defining at least one custom parameter based on a candidate data type; the at least one custom parameter includes parameters defined based on the custom data type. The step of displaying a second code block in the canvas area in response to receiving a trigger operation on the first variable code block in the editing area includes: In response to receiving a trigger operation on the first variable code block in the editing area, the first variable code block is displayed at the call position of the custom function code block, and the custom function code block displaying the first variable code block is obtained as the second code block; The second code block is used to execute the custom logic corresponding to the custom function code block by calling the custom variable at runtime.

12. A visual programming device, characterized in that, The device includes: The display module is used to display a visual programming interface, which provides the function of customizing program content through graphical code blocks; A creation module is configured to, in response to receiving a type creation operation on the visual programming interface, display a type editing area, the type editing area including attribute addition controls, wherein different attribute addition controls are used to create attributes of different preset data types; in response to receiving an input operation in the type name input box of the type editing area, display a custom type name; generate recommended attribute information based on the custom type name, the recommended attribute information being automatically generated based on the custom type name, the recommended attribute information including multiple preset data types and attribute names corresponding to the multiple preset data types; based on the recommended attribute information, upon receiving at least two trigger operations on the attribute addition controls, display at least two attribute editing information in the type editing area, the attribute editing information including attribute names; and create a custom data type containing multiple attributes based on the at least two attribute editing information. The display module is configured to display a first variable code block in response to receiving a variable creation operation based on the custom data type; the first variable code block includes at least one of a variable code block and a variable array code block, wherein the variable code block is a code block obtained by defining a single custom variable for the custom data type, and the variable array code block is a code block obtained by defining a custom variable array for the custom data type, wherein the custom variable array includes multiple custom variables of the same data type.

13. A computer device, characterized in that, The computer device includes a processor and a memory, the memory storing at least one program, which is loaded and executed by the processor to implement the visual programming method as described in any one of claims 1 to 11.

14. A computer-readable storage medium, characterized in that, The storage medium stores at least one program segment, which is loaded and executed by a processor to implement the visual programming method as described in any one of claims 1 to 11.

15. A computer program product, characterized in that, It includes a computer program that, when executed by a processor, implements the visual programming method as described in any one of claims 1 to 11.

Images