CN111897530B - UI system and method based on UE4 platform - Google Patents

UI system and method based on UE4 platform Download PDF

Info

Publication number
CN111897530B
CN111897530B CN202010715107.XA CN202010715107A CN111897530B CN 111897530 B CN111897530 B CN 111897530B CN 202010715107 A CN202010715107 A CN 202010715107A CN 111897530 B CN111897530 B CN 111897530B
Authority
CN
China
Prior art keywords
rendering
elements
interaction
module
layout
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN202010715107.XA
Other languages
Chinese (zh)
Other versions
CN111897530A (en
Inventor
郑昊
刘飞
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Perli Information Technology Co ltd
Original Assignee
Shanghai Perli Information Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shanghai Perli Information Technology Co ltd filed Critical Shanghai Perli Information Technology Co ltd
Priority to CN202010715107.XA priority Critical patent/CN111897530B/en
Publication of CN111897530A publication Critical patent/CN111897530A/en
Application granted granted Critical
Publication of CN111897530B publication Critical patent/CN111897530B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/40Transformation of program code
    • G06F8/41Compilation
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces
    • YGENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02DCLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Processing Or Creating Images (AREA)

Abstract

The invention discloses a UI system based on a UE4 platform, which comprises: the system comprises a rendering module, a layout module, an interaction module and an editor module; the rendering module comprises a grid construction unit and a renderer, wherein the grid construction unit is used for collecting the renderable elements and constructing a rendering grid based on the renderable elements, and the renderer is used for rendering a space; the layout module is used for laying out the UI elements in the design scene; the interaction module is used for endowing the UI element with an interaction function; the editor module is used for creating the UI element and binding time attributes and modification attributes to the UI element. The invention can realize high-performance rendering of the UI elements in the 3D space, and has a perfect interaction system and event system based on components to be competent for most UI operations.

Description

UI system and method based on UE4 platform
Technical Field
The invention belongs to the technical field of software design, and particularly relates to a UI system based on a UE4 platform and a use method of the UI system.
Background
With the technological development, various VR hardware products in the software market are endless. While the UE4 (illusion engine 4) platform provides a very good content production environment for VR hardware. At present, a module UMG (UnrealMotionGraph) for completely manufacturing a UI is arranged on a UE4 platform, but two obvious problems exist: firstly, UMG can only make two-dimensional UI, i.e. only realize movement, scaling and rotation in a single direction in the xy plane, while UE4 as a three-dimensional interactive development engine cannot meet movement, scaling and rotation in the third axis. The second disadvantage is that the underlying code of the UMG is based on a slave (layout UI tool custom by the UE4 engine) and is visually encapsulated at the upper layer, and the UI in this way is not fully compatible with the GC (memory garbage collection) system of the UE4 itself, and is different from the basic Uobject (basic object in the UE 4) system of the UE4, which causes additional learning cost. Therefore, how to develop a new UI system to overcome the above problems is a direction that those skilled in the art need to study.
Disclosure of Invention
The invention aims to provide a UI system based on a UE4 platform, which can realize high-performance rendering of UI elements in a 3D space and has a perfect interaction system and event system based on components to be adequate for most UI operations.
The technical scheme adopted by the method is as follows:
a UE4 platform based UI system, comprising: the system comprises a rendering module, a layout module, an interaction module and an editor module; the rendering module comprises a grid construction unit and a renderer, wherein the grid construction unit is used for collecting the renderable elements and constructing a rendering grid based on the renderable elements, and the renderer is used for rendering a space; the layout module is used for laying out the UI elements in the design scene; the interaction module is used for endowing the UI element with an interaction function; the editor module is used for creating the UI element and binding time attribute and modification attribute to the UI element.
Preferably, in the UE4 platform-based UI system described above: the renderer comprises a screen space UI renderer and a world space UI renderer, wherein the screen space UI renderer is used for collecting and rendering UI elements in a screen space; the world space UI renderer is used for collecting and rendering UI elements of the world space and submitting rendering grids of the UI elements to a grid rendering queue.
More preferably, in the UE4 platform-based UI system described above: the editor module comprises a tool menu, a Recttransform editor, a UISPrite editor and a UIFANT production tool; the tool menu is a main entry of the editor and is used for realizing the functions of creating UI elements, creating composite elements, initial setting, modifying layers, deleting layers and copying layers; the Recttransform editor is used for editing Recttransform attributes for the created UI elements; the UISPRITE editor and the UIFANT production tool are tools for simplifying the user operation process.
More preferably, in the UE4 platform-based UI system described above: the layout module comprises a layout mode and layout elements; the layout mode is used for carrying out layout control on all UI elements in the sub-object according to the unified style; the layout element is used for performing layout control on the independent UI elements.
More preferably, in the UE4 platform-based UI system described above: the interaction module follows an event bubbling mechanism to realize event transfer interaction.
The invention also discloses a using method based on the UI system, which comprises the following steps:
s1: starting a UE4 program, selecting an engineering folder, creating engineering under the engineering folder, and generating subdirectory Content;
s2: newly creating a folder Plugins under the same directory of the Content, and copying the LGUI folder under the Plugins folder;
s3: entering a design scene, and sequentially creating canvas and UI elements in the design scene; a step of
S4: and performing cyclic rendering and time rendering on the UI elements in the design scene.
Preferably, step S3 includes:
s31: entering a design scene: opening the UE4 engineering, and automatically entering a design scene after recompilation;
s32: creating a canvas: clicking on Basic Setup/World space UI under LGUI Tools menu to create a preset Canvas component with attached example text and pictures;
s33: a UI element is created in the canvas.
Preferably, step S3 further includes: s34: adding interaction: and adding an interaction component on the UI element obtained in the step S33.
Compared with the prior art, the invention has the following beneficial effects:
1. all display classes, interaction classes, event classes are based on the UObjects of the UE4, and are compatible with the interfaces and methods common to the UObjects, such as constructors, tick events, destroy functions, GC and the like, so that the learning cost is reduced.
2. All UI elements are 3D, can be moved, scaled and rotated in three directions of the xyz axis, with a high degree of freedom.
3. The object has interaction capability by adding components, all components are also based on actor component (actor component inherits from Uobject), and the event system follows a common event bubbling mechanism, so that the user can conveniently and quickly grasp the event.
4. Universal expansion interfaces are reserved for UI elements, event interaction and animation systems, so that a user can conveniently expand user-defined UI elements and components.
Drawings
The invention is described in further detail below with reference to the attached drawings and detailed description:
FIG. 1 is a block diagram of the structure of the present invention;
FIG. 2 is a workflow diagram of the present invention;
FIG. 3 is a flow chart of a temporal bubbling mechanism of an interactive module.
Detailed Description
In order to more clearly illustrate the technical solution of the present invention, the following will further describe in connection with various embodiments.
Example 1 is shown in fig. 1-3:
a UE4 platform based UI system, comprising: the system comprises a rendering module, a layout module, an interaction module and an editor module; the rendering module comprises a grid construction unit and a renderer, wherein the grid construction unit is used for collecting the renderable elements and constructing a rendering grid based on the renderable elements, and the renderer is used for rendering a space; the layout module is used for laying out the UI elements in the design scene; the interaction module is used for endowing the UI element with an interaction function; the editor module is used for creating the UI element and binding time attribute and modification attribute to the UI element.
The rendering module is the core of the whole 3D UI system, and all subsequent works are based on rendering UI elements. The rendering module is composed of renderable elements and a renderer, wherein the renderable elements can construct a rendering grid according to attributes (UISprite, UIText, UITexture and the like belong to the renderable elements), a plurality of renderable elements can form a scene of the rendering grid, the scene records all the attributes required by rendering, including vertex positions, triangle sequence numbers, normals, map coordinates and material parameters, the renderer can collect the rendering grid of all the renderable elements in the scene when rendering, then the rendering grid is divided according to materials, triangle vertices are found according to the triangle sequence numbers to construct triangles, and finally the triangles and the materials are transferred into a display card to draw final images. In the drawing process of the renderer, the screen space UI renderer and the world space UI renderer also have different division of labor: the execution sequence of the screen space UI renderer is behind world space, is responsible for collecting and rendering the UI elements existing in the screen space, and then uses the rendering grids of the UI elements to directly draw on the render target of the screen, and no later full screen effect participates in the whole process; the execution sequence of the world space UI renderer is the same as that of the three-dimensional rendering of the UE4, is responsible for collecting and rendering UI elements of the world space, submits rendering grids of the UI elements to a grid rendering queue of the UE4, and the whole process is similar to the grid rendering of the UE4 and is influenced by a later full-screen effect.
The layout module is a framework of the whole display part, and comprises a layout mode and layout elements, wherein the layout mode prescribes that UI elements in all sub-objects are laid out according to a unified style, and the layout elements can carry out independent layout control on independent UI elements, so that great freedom degree can be provided for controlling the layout.
The interaction module is responsible for interactions of all UI elements, such as mouse in, out, pressing, releasing, clicking, dragging, etc., such as ray interactions of VR input. The interaction module defines a plurality of interaction event interfaces:
ILGUIPointerClickInterface,
ILGUIPointerDownUpInterface,
ILGUIPointerDragDropInterface,
ILGUIPointerDragEnterExitInterface,
ILGUIPointerDragInterface,
ILGUIPointerEnterExitInterface,
and defines event parameters: FLGUIPointerEventData; all interaction components inherit from these interfaces and event parameters can also be obtained from the interfaces.
The interaction event follows an event bubbling mechanism: when the mouse triggers a UI element, if the UI element does not contain any interactive components, the event is delivered to the upper layer; if the UI element contains an interaction component, determining whether the event is transmitted to an upper layer according to the judgment result of the interaction component after the event is processed by the interaction component; during the bubble delivery of events, user-defined components may also be used to determine whether delivery to the upper layers needs to continue.
The editor module is used to extend the editor interface of the UE4, which can facilitate the user to create UI elements, bind events, modify properties, etc. The editor module mainly comprises a tool menu, a rectangular transformation editor, a UISPRITE editor, a UIFANT (font) making tool and the like. The tool menu serves as a main entry of the editor and provides convenient functions of creating UI elements, creating composite elements, initial setting, and hierarchical modification, deletion, duplication, and the like. After the UI elements are created, each UI element has a RectTransform attribute, which in turn can simplify the editing process by a RectTransform editor. In addition, the UISPRITE editor and the UIFANT production tool are tools for simplifying the operation process of users.
The working flow of the system is as follows:
s1: starting a UE4 program UE4editor.exe, selecting an engineering folder and creating an engineering: after the engineering is successfully created, generating subdirectory Content in a folder, and closing the UE4 engineering;
s2: newly creating a folder named Plugins under the same directory of the Content folder, and copying the LGUI folder of the invention under the Plugins folder;
s31: opening the UE4 project again, wherein the system prompts whether recompilation is needed or not at the moment, and if yes, automatically entering a compiling scene after the compiling is completed;
s32: after entering the scene, a Canvas needs to be created first: clicking the Basic Setup/World Space UI under the LGUI Tools menu, this operation will create a preset Canvas component in the scene with attached example text and pictures;
s33: creating a UI element: taking creating a UISPrite (eidolon picture) as an example, firstly selecting a UI element as a parent object, then clicking Create UI Element/UISPrite under an LGUI Tools menu, and then creating a UI element in a three-dimensional space and mounting the UI element as a child object in a scene; after selecting the UI element of this three-dimensional space, pressing the W/E/R of the keyboard may operate the movement, rotation, scaling, respectively, of this UI element. Other UI elements are created in a similar way, such as Create UI Element/UIT for text creation and Create UI Element/UIT for picture creation;
s34: adding interaction: adding an interactive component to an existing UI element, endowing the UI element with interactive capability corresponding to the interactive component, removing the interactive component, and eliminating the interactive capability endowed by the UI element after removing the interactive component; for example, if a uintext is to be provided with a button function, only uibuton components need to be added to the uintext, and then the uintext can be selected and a button event can be generated;
s4: rendering cycles and event cycles: the present invention gives ready solutions to both the rendering cycle and the event cycle of the UI: the World Space UI created at the beginning comprises an LGUIC canvas component which can realize the management of all UI elements and realize rendering cycle; the event loops are managed by the EventSystem component. The user can directly use both components, and can inherit and rewrite the method in the rendering loop.
The above description is merely an embodiment of the present invention, but the scope of the present invention is not limited thereto, and any changes or substitutions easily come within the technical scope of the present invention as those skilled in the art will readily come to be included in the scope of the present invention. The protection scope of the present invention is subject to the protection scope of the claims.

Claims (6)

1. A UE4 platform based UI system, comprising: the system comprises a rendering module, a layout module, an interaction module and an editor module;
the rendering module comprises a grid construction unit and a renderer, wherein the grid construction unit is used for collecting renderable elements and constructing a rendering grid based on the renderable elements, a plurality of renderable elements form a scene of one rendering grid, all the attributes required by rendering are recorded in the scene, and the renderer is used for collecting the rendering grids of all the renderable elements in the scene and rendering space; the layout module is used for laying out the UI elements in the design scene; the interaction module is used for endowing the UI element with an interaction function; the editor module is used for creating the UI element and binding time attribute and modification attribute to the UI element;
the renderer comprises a screen space UI renderer and a world space UI renderer, wherein the screen space UI renderer is used for collecting UI elements in a screen space, inserting a rendering queue into a time point after scene rendering is completed, and rendering the UI elements to the screen space under the condition of not influencing scene rendering; the world space UI renderer is used for collecting and rendering the UI elements of the world space, submitting rendering grids of the UI elements to a grid rendering queue and processing the rendering grids by a rendering engine of the UE 4;
the layout module comprises a layout mode and layout elements; the layout mode is used for carrying out layout control on all UI elements in the sub-object according to the unified style; the layout element is used for performing layout control on the independent UI elements;
the interaction module defines a plurality of interaction event interfaces and event parameters, and all interaction components inherit from the interaction event interfaces and can also acquire the event parameters from the interaction event interfaces; the interaction class and the event class are based on the UObject of the UE4, and are compatible with the universal interface and method of the UObject; the object is made interactive by adding components, and all components are inherited from the UObject based on ActorComponent, actorComponent as well.
2. The UE4 platform based UI system of claim 1, wherein: the editor module comprises a tool menu, a Recttransform editor, a UISPrite editor and a UIFANT production tool;
the tool menu is a main entry of the editor and is used for realizing the functions of creating UI elements, creating composite elements, initial setting, modifying layers, deleting layers and copying layers; the Recttransform editor is used for editing Recttransform attributes for the created UI elements; the UIFont making tool is used for making special bitmap fonts of the UI system and supporting multiple font file formats.
3. The UE4 platform based UI system of claim 1, wherein: the interaction module follows an event bubbling mechanism to realize event transfer interaction.
4. A method for using a UI system based on a UE4 platform according to any one of claims 1-3, characterized in that: the method comprises the following steps:
s1: starting a UE4 program, selecting an engineering folder, creating engineering under the engineering folder, and generating subdirectory Content;
s2: newly creating a folder Plugins under the same directory of the Content, and copying the LGUI folder under the Plugins folder;
s3: entering a design scene, and sequentially creating canvas and UI elements in the design scene;
s4: and performing cyclic rendering and time rendering on the UI elements in the design scene.
5. The method for using a UE4 platform based UI system according to claim 4, wherein: the step S3 comprises the following steps:
s31: entering a design scene: opening the UE4 engineering, and automatically entering a design scene after recompilation;
s32: creating a canvas: clicking the Basic Setup/World Space UI under the LGUItools menu to create a preset Canvas component with attached example text and pictures;
s33: a UI element is created in the canvas.
6. The method for using a UE4 platform based UI system of claim 5, wherein: step S3 further includes:
s34: adding interaction: and adding an interaction component on the UI element obtained in the step S33.
CN202010715107.XA 2020-07-23 2020-07-23 UI system and method based on UE4 platform Active CN111897530B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010715107.XA CN111897530B (en) 2020-07-23 2020-07-23 UI system and method based on UE4 platform

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010715107.XA CN111897530B (en) 2020-07-23 2020-07-23 UI system and method based on UE4 platform

Publications (2)

Publication Number Publication Date
CN111897530A CN111897530A (en) 2020-11-06
CN111897530B true CN111897530B (en) 2024-02-20

Family

ID=73191052

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010715107.XA Active CN111897530B (en) 2020-07-23 2020-07-23 UI system and method based on UE4 platform

Country Status (1)

Country Link
CN (1) CN111897530B (en)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113485691A (en) * 2021-05-07 2021-10-08 北京易成时代科技有限公司 Slate-based editor block-level cursor positioning method

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106251185A (en) * 2016-08-24 2016-12-21 四川见山科技有限责任公司 VR house property based on UE4 engine is shown and interactive system
CN109947466A (en) * 2019-01-15 2019-06-28 珠海金山网络游戏科技有限公司 A kind of reverse method and device thereof for obtaining UE4 global object table
WO2019212698A1 (en) * 2018-05-01 2019-11-07 Magic Leap, Inc. Avatar animation using markov decision process policies
CN111104702A (en) * 2019-12-04 2020-05-05 中国电建集团中南勘测设计研究院有限公司 Method for realizing visual simulation of embankment project based on UE4
CN111179025A (en) * 2019-12-13 2020-05-19 佛山欧神诺云商科技有限公司 Home decoration 3D scene roaming method based on UE4, electronic equipment and storage medium

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106251185A (en) * 2016-08-24 2016-12-21 四川见山科技有限责任公司 VR house property based on UE4 engine is shown and interactive system
WO2019212698A1 (en) * 2018-05-01 2019-11-07 Magic Leap, Inc. Avatar animation using markov decision process policies
CN109947466A (en) * 2019-01-15 2019-06-28 珠海金山网络游戏科技有限公司 A kind of reverse method and device thereof for obtaining UE4 global object table
CN111104702A (en) * 2019-12-04 2020-05-05 中国电建集团中南勘测设计研究院有限公司 Method for realizing visual simulation of embankment project based on UE4
CN111179025A (en) * 2019-12-13 2020-05-19 佛山欧神诺云商科技有限公司 Home decoration 3D scene roaming method based on UE4, electronic equipment and storage medium

Also Published As

Publication number Publication date
CN111897530A (en) 2020-11-06

Similar Documents

Publication Publication Date Title
US7661071B2 (en) Creation of three-dimensional user interface
CN107844297B (en) Data visualization implementation system and method
EP0636971B1 (en) Method and apparatus for producing a composite second image in the spatial context of a first image
JP3839468B2 (en) International data processing system
JP2007095090A (en) Method and device for menu item display
CN110807015A (en) Big data asset value delivery management method and system
CN101196818A (en) Fast graphical developing system
CN105512395A (en) Production method of three-dimensional interactive electronic manual
US10606455B2 (en) Method for processing information
CN108932751A (en) The quickly system and method for creation VR/AR/MR content
US20130318453A1 (en) Apparatus and method for producing 3d graphical user interface
CN113901367A (en) BIM (building information modeling) mass model display method based on WebGL + VR (WebGL + VR)
JP2011013986A (en) Operation instruction diagram generating apparatus and operation instruction diagram generating method
CN111897530B (en) UI system and method based on UE4 platform
Collignon et al. Model-driven engineering of multi-target plastic user interfaces
US11625900B2 (en) Broker for instancing
CN109783596B (en) ArcGIS map configuration preview method based on Angular component
JP2003223468A (en) Interlocking method between two-dimensional drawings and between two-dimensional drawing and three- dimensional model and cad system adopting the same
Van Emmerik et al. Simplifying interactive design of solid models: a hypertext approach
CN116415321A (en) Cloud CAD processing system and construction method thereof
CN1409218A (en) Virtual environment forming method
CN108762750A (en) A kind of visualization interface generation method and system based on FMP models
US11966572B2 (en) Commenting feature for graphic design systems
Kiss Web based VRML modeling
Ma et al. Innovative Applications of Digital Art and Augmented Reality in the Construction Industry through Building Information Modeling

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant