I plan on creating an HTML5 plugin that injects utility.js so that some of my HTML5 code is blueprintable. I’ll provide some custorm JS and some custom Blueprint classes. The BP implementation will call the HTML5 code with callbacks that will invoke BP delegates.
The current HTML5 JS build process combines JS templates in the build process using only the JS templates from the editor installation folder.
All of the links to github on this page are 404. Can anyone update the answer?
When I try to add my own js files to the build by editing the project.build.cs like this:
if (Target.Platform == UnrealTargetPlatform.HTML5)
{
PublicAdditionalLibraries.Add("JSEvents.js");
}
It tells me that the file doesn’t exist, which is obviously because it searches for it in the Epic Games\UE_4.22\Engine\Source\ and not in the project folder…
unless I put it directly in the HTML5JavaScriptFx.js, which does work. But I need to modify the engine files on all of the machines I want to use for building… Obviously it would be much nicer if I could define the function in one of my project files.
Does this mean you should not use emscripten but instead JS directly to setup communication between HTML and UE4?.
Can you explain more as i don’t really understand this. What i’m looking for is ways to communicate with blueprints i create in UE4 and then package to HTML5 and then call with html/js/react in the browser.
I’ve used VaRest to communicate between bp and html ,but when packaging UE4 to HTML5 i get an error in the browser when loading webgl, which i guess is because of the plugin VaRest. So i’m now trying to find a more stable way to setup communcation in the browser.
The example listed works for a plugin inside the engine. But how do you make it work for a 3rd party plugin so that it can search to find your file.
I’m trying this.
public class UE4_Speech : ModuleRules
{
public UE4_Speech(ReadOnlyTargetRules Target) : base(Target)
{
if (Target.Platform == UnrealTargetPlatform.HTML5)
{
PublicAdditionalLibraries.Add("Plugins/UE4_Speech/Source/UE4_Speech/Private/WebGLSpeechDetectionPlugin.js");
PublicAdditionalLibraries.Add("Plugins/UE4_Speech/Source/UE4_Speech/Private/WebGLSpeechSynthesisPlugin.js");
}
The error I get is.
Output: // The Module object: Our interface to the outside world. We import
PackagingResults: Error: ENOENT: no such file or directory, open ‘C:\Program Files\Epic Games\UE_4.21\Engine\Source\Plugins\UE4_Speech\Source\UE4_Speech\Private\WebGLSpeechDetectionPlugin.js’" | Error: ENOENT: no such file or directory, open ‘C:\Program Files\Epic Games\UE_4.21\Engine\Source\Plugins\UE4_Speech\Source\UE4_Speech\Private\WebGLSpeechDetectionPlugin.js’
Like you said it’s looking in program files and not in the project folder.
I could put together an absolute path in C#, but that doesn’t seem like the best way to go.
There’s also a uproject setting that says a plugin has content. I’ll try that option…
This compiled for HTML5. I used ModuleDirectory to get the full path to the JS to include. I don’t actually see the file copied in the build HTML5 folder though…
// Some copyright should be here...
using UnrealBuildTool;
public class UE4_Speech : ModuleRules
{
public UE4_Speech(ReadOnlyTargetRules Target) : base(Target)
{
if (Target.Platform == UnrealTargetPlatform.HTML5)
{
string path = System.IO.Path.Combine(ModuleDirectory, "Private/WebGLSpeechDetectionPlugin.js").Replace("\\", "/");
System.Console.WriteLine("Include {0}", path);
PublicAdditionalLibraries.Add(path);
path = System.IO.Path.Combine(ModuleDirectory, "Private/WebGLSpeechSynthesisPlugin.js").Replace("\\", "/");
System.Console.WriteLine("Include {0}", path);
PublicAdditionalLibraries.Add(path);
}
Logging shows the correct full path.
Include C:/Private/UE4_SpeechDemo/Plugins/UE4_Speech/Source/UE4_Speech/Private/WebGLSpeechDetectionPlugin.js
Include C:/Private/UE4_SpeechDemo/Plugins/UE4_Speech/Source/UE4_Speech/Private/WebGLSpeechSynthesisPlugin.js
think of emscripten is a “compiler” – this translates the C++ code to (what we now use) WebAssembly (think of this as binary efficient javascript for the web browser).
that said, let’s try a demo. to use the files in the attached zip:
create a C++ First Person template, and NAME it: CPP_FP
unzip the attached zipfile and drop it in Source/.
package for HTML5
open a command prompt to your packaged output
run HTML5LaunchHelper.exe or python -m SimpleHTTPServer 8000 (again, from the where the packaged files are created)
open the developer tools via: Control+Shift+I (as in “eye”)
click on the Console tab in the developer tools window
back in the browser, click on CPP_FP.html
wait for the game to finish loading up
in the console tab – you should see foo printed in there, this will correspond to the C++ to JS call you will see at the end of ACPP_FPCharacter::BeginPlay() in CPP_FPCharacter.cpp
in the console tab, type the following:
MyProject_JSLibs.call_HTML5_to_UE4_function()
after pressing enter (which will demonstrate a JS to C++ call) – in the game (browser), you should see the character shoot a single round
i hope this is a clear example of your question.
you can diff the files before copying the zipped files to see what edits were needed to make this all work.
for restrictions, take a look at: Engine/Plugins/Experimental/HTML5Networking/
HTML5Networking.uplugin
Source/HTML5Networking/HTML5Networking.Build.cs
there, you will see an example of including a plugin that’s used in HTML5:
in uplugin, you will see HTML5 whitelisted in the platforms list (this trips up a lot of developers when it comes to enabling the plugin for either favorite plugins – sometimes, just sticking in your platform of choice might work out of the box)
and, in the Build.cs file, you can add the PublicAdditionalLibraries.Add(jsFilePath); line to include your custom JS file when the plugin is enabled
I made a sample repro project in 4.22. Here’s a sample project that includes SampleHTML5.js, but it’s not actually copying the file or the content to the HTML5 build folder even though I’ve whitelisted the platform. Shouldn’t this work?
If I invoke UE_InitSampleHTML5 it would invoke the JavaScript and log a message…
Should the file content of SampleHTML5.js get copied into the build? Or is this a manual step? Or is the JS converted to C++ and put into the binary data?
I’ve noticed nothing can be found when I search for UE_InitSampleHTML5 in the build folder…