Unreal Engine 4 Radiant UI Getting Started tutorial (0) placing pages in a scene

Related Learning resources:

https://forums.unrealengine.com/showthread.php?12097- Plugin-radiantui-sdk-uis-huds-interactive-webviews-html5-javascript-css

Https://www.youtube.com/channel/UCnhY_Rd8iyFrvzOgQVptWqg

http://www.bootcss.com/

Https://github.com/LeGone/RadiantUI

Prerequisite: The installation of UE4, the basic operation of UE4 have a certain understanding.

The first step:

Download the project on the Https://github.com/LeGone/RadiantUI website.

Step Two:

Open this file after decompression:

If prompted rebuild, then rebuild,rebuild If not successful, then there will be no way to continue, difficult to solve. Let's say you're okay.

Step Three:

After entering the project, click to run, first experience it.

Ability to use Web pages and all HTML technology in the game!

Fourth Step:

Close this project, new a new project:

Fifth Step:

Close this new project (which we call Learnrui Engineering ) and then copy and paste the following directory into the Learnrui

Sixth step:

to re-open the Learnrui project, click:

Verify that it is enable (restart if prompted to restart).

Seventh Step:

Create blueprints (radiantstaticmeshwebviewactor)

After clicking on the simulate , the simulation results are as follows:

Drag into the game scene, position it, and then run:

Eighth Step:

Let's be free to explore something in this blueprint :

First look at this component and see the details:

where refresh rate is the update frequency (if the value is 1, the video in the screen, the page effect will be one second frame).

URL: Web page.

Size: The dimensions of the Web page (resolution, etc.).

Mouse Effects:

Set the size to 1024x768 * 640, then stretch the actor 's dimensions to y=1.6 times to see the widescreen effect:

When the Enable is set to false , the object on this page is discarded.

Other property values:

Replicates interaction is a network synchronization.

Interactive mode:

Nineth Step: Learn how to interact

Add a box collisionand add the following nodes: (If this is not the case, go ahead and learn the basics of UE4, or talk in the comments section)

Tenth step:

Add a component to the character blueprint (Radiant Web View Interaction):

Make sure it is enabled .

11th Step:

Run, interact with it:

Note: If the collision body (box collision) is not large enough, the interactive experience will be poor.

Easy to know: when interacting, the move is not valid.

Goodbye to the next article!

--Xiao Jiang cun son of Wen jie, 7 months 5 days 15:17:31

Unreal Engine 4 Radiant UI Getting Started tutorial (0) placing pages in a scene