# EMSCRIPTEN hepling for c++ class with unreal engine 4

**URL:** <https://forums.unrealengine.com/t/emscripten-hepling-for-c-class-with-unreal-engine-4/425343>\
**Category:** Platform & Builds\
**Tags:** package, HTML5, unreal-engine, CPP, question\
**Created:** [May 17, 2018, 5:18pm UTC](https://forums.unrealengine.com/t/emscripten-hepling-for-c-class-with-unreal-engine-4/425343 "2018-05-17T17:18:11Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![aznur](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@aznur](https://forums.unrealengine.com/u/aznur)\
**Post date:** [May 17, 2018, 5:18pm UTC](https://forums.unrealengine.com/t/emscripten-hepling-for-c-class-with-unreal-engine-4/425343/1 "2018-05-17T17:18:11Z")

</div>

hi i use unreal engine 4.19 visual studio 2015 version 14.0.25431.01 update 3

i have create a project and export in html5 in aproximatively in 30minute max

after i have create a basic c++ class with visual studio and add my actor class in scene  
my class :

cpp

```
#include "MyActor.h"
#include "EngineUtils.h"
#include "Engine/StaticMeshActor.h"
#include "ConstructorHelpers.h"
#include "Materials/Material.h"
#include "Components/StaticMeshComponent.h"
#ifdef EMSCRIPTEN
#include <emscripten.h>
#endif

// Sets default values
AMyActor::AMyActor()
{
	// Set this actor to call Tick() every frame. You can turn this off to improve performance if you don't need it.
	PrimaryActorTick.bCanEverTick = true;
	static ConstructorHelpers::FObjectFinder<UMaterial> Material(TEXT("/Game/mat/BasicShapeMaterial_2"));
	if (Material.Succeeded()) {
		StoredMaterial = Material.Object;
	}
}

#ifdef __EMSCRIPTEN__
extern "C" {
	EMSCRIPTEN_KEEPALIVE
#endif
 void AMyActor::changeColorCube(){
	TArray<AStaticMeshActor *> actors;
	FindAllActors(GetWorld(), actors);

	for (int i = 0; i < actors.Num(); i++) {
		AStaticMeshActor * m = actors[i];

		if (m->ActorHasTag("Cubechange")) {
			//static ConstructorHelpers::FObjectFinder<UMaterial> Material(TEXT("Material'/Game/mat/BasicShapeMaterial_2'"));
			
			
				m->GetStaticMeshComponent()->SetMaterial(0, StoredMaterial);

			}
		}
	}

#ifdef __EMSCRIPTEN__
}
#endif
// Called when the game starts or when spawned
void AMyActor::BeginPlay()
{
	Super::BeginPlay();

}

// Called every frame
void AMyActor::Tick(float DeltaTime)
{
	Super::Tick(DeltaTime);

}

template<typename T>
void AMyActor::FindAllActors(UWorld* World, TArray<T*>& Out)
{
	for (TActorIterator<AActor> It(World, T::StaticClass()); It; ++It)
	{
		T* Actor = Cast<T>(*It);
		if (Actor && !Actor->IsPendingKill())
		{
			Out.Add(Actor);
		}
	}
}

```

.h

```
// Fill out your copyright notice in the Description page of Project Settings.

#pragma once

#include "CoreMinimal.h"
#include "GameFramework/Actor.h"
#include "MyActor.generated.h"

UCLASS()
class MYPROJECT2_API AMyActor : public AActor
{
	GENERATED_BODY()

public:
	// Sets default values for this actor's properties
	
	AMyActor();

		UFUNCTION(BlueprintCallable, Category = "changeColor")
		void changeColorCube();
	

	
	template<typename T>
	void FindAllActors(UWorld* World, TArray<T*>& Out);
	
protected:
	// Called when the game starts or when spawned
	virtual void BeginPlay() override;

public:
	// Called every frame
	virtual void Tick(float DeltaTime) override;

	UMaterial* StoredMaterial;
};

```

im inspired by  
[https://forums.unrealengine.com/development-discussion/html5-development/91660-js-c-communication?119332-js-c-communication=](https://forums.unrealengine.com/development-discussion/html5-development/91660-js-c-communication?119332-js-c-communication=)

no error project generate  
and the class is fonctional in editor  
but i export in html5  
after 5 minute the console displayed this line

```
UATHelper: Packaging (HTML5): JS_ENGINES = [NODE_JS] # add this if you have spidermonkey installed too, SPIDERMONKEY_ENGINE]
UATHelper: Packaging (HTML5): Performing 3 actions (4 in parallel)
UATHelper: Packaging (HTML5): [1/3] Compile MyActor.cpp
UATHelper: Packaging (HTML5): [2/3] Compile MyActor.gen.cpp
UATHelper: Packaging (HTML5): In file included from C:/Users/aznur/Documents/Unreal Projects/MyProject2/Source/MyProject2/MyActor.cpp:3:
UATHelper: Packaging (HTML5): In file included from C:/Users/aznur/Documents/Unreal Projects/MyProject2/Intermediate/Build/HTML5/UE4/Inc/MyProject2/MyActor.gen.cpp:8:

```

and after that no thing no error and the processor up to 80%-100% after 2 hours no change same line  
nothing else can display

my code is good ?  
I do not find a simple but complete example that shows the use of a c ++ class from start to finish  
in ue4 with use by javascript EMSCRIPTEN method

thanks for help

---

<div class="post-metadata">

**Author:** ![aznur](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@aznur](https://forums.unrealengine.com/u/aznur)\
**Post date:** [May 17, 2018, 6:49pm UTC](https://forums.unrealengine.com/t/emscripten-hepling-for-c-class-with-unreal-engine-4/425343/2 "2018-05-17T18:49:20Z")

</div>

i find this :

> **[Cannot package c++ plugin due to missing .emscripten file](https://forums.unrealengine.com/questions/516950/cannot-package-c-plugin-due-to-missing-emscripten.html)**
>
> Hello, I’m trying to package a c++ plugin that I created but the process fails due to a missing .emscripten file as shown in the log below: UATHelper: Package Plugin Task (Windows): UnrealBuildTool: Performing full C++ include scan (building a new...

and particulary this

Could you try to delete the I:\Epic Games\4.13\Engine_Intermediate\Build\HTML5.emscripten_ folder from your Engine? (only the bold part) Then go ahead and re-verify your version of the engine and try to package again, upload those logs as well.

Also, let me know whether or not you’re using a Source or Binary version of the engine.

and the display after 5 minute is note the same line  
but is it going to work?

---

<div class="post-metadata">

**Author:** ![aznur](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@aznur](https://forums.unrealengine.com/u/aznur)\
**Post date:** [May 17, 2018, 6:51pm UTC](https://forums.unrealengine.com/t/emscripten-hepling-for-c-class-with-unreal-engine-4/425343/3 "2018-05-17T18:51:36Z")

</div>

same problem but the other line apparently …

---

<div class="post-metadata">

**Author:** ![aznur](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@aznur](https://forums.unrealengine.com/u/aznur)\
**Post date:** [May 20, 2018, 12:39pm UTC](https://forums.unrealengine.com/t/emscripten-hepling-for-c-class-with-unreal-engine-4/425343/4 "2018-05-20T12:39:03Z")

</div>

ok i find

path to follow:  
create c++ project  
create c++class derivated actor

cpp file :

```
#include "BrowserCommActor.h"
#include "EngineGlobals.h"
#include "Engine.h"

//Gotta have these to make emscripten work
#ifdef __EMSCRIPTEN__ //This basically says “if emscripten is doing stuff, add this, otherwise ignore”.
#include "SDL/SDL.h"
#include "emscripten/emscripten.h"
#include "emscripten/html5.h"
#else
#define EMSCRIPTEN_KEEPALIVE
#endif //This closes the “ifdef __EMSCRIPTEN__ ” tag.

//Gotta have this to make translation of strings to JavaScript work
#include "string"
#include "iostream"
#include "sstream"

// Sets default values
ABrowserCommActor::ABrowserCommActor()
{
 	// Set this actor to call Tick() every frame. You can turn this off to improve performance if you don't need it.
	PrimaryActorTick.bCanEverTick = true;

}

// Called when the game starts or when spawned
void ABrowserCommActor::BeginPlay()
{
	Super::BeginPlay();
	
}

// Called every frame
void ABrowserCommActor::Tick(float DeltaTime)
{
	Super::Tick(DeltaTime);

}

void ABrowserCommActor::AppelJS()
{
	//GEngine->AddOnScreenDebugMessage(-1, 15.0f, FColor::Red, TEXT("Comm_RunExtJS() Triggered!”)); //This puts a message onscreen inside UE4, so you know this side executed. If you want to verify the JS side, you’ll need an alert in that function.
	FString returnedDataString("BLABLA");

	std::string OutboundSendString(TCHAR_TO_UTF8(*returnedDataString));

#ifdef __EMSCRIPTEN__ // Shields the JavaScript code from the C++ compiler to prevent errors.
	//This executes JS code and passes arguments (in this case a string).
	EM_ASM_ARGS({
		var theData = Pointer_stringify($0); // Convert the string to a JS string.
											 //alert(“JS Triggered!”); // Pop an alert for testing.
	sendToUE(theData); // Call a JS function in the wrapper HTML, passing the string to it.
}, OutboundSendString.c_str()); // Pass the string from UE4 world into the emscripten function.
#endif
/*#ifdef __EMSCRIPTEN__ // Shields the JavaScript code from the C++ compiler to prevent errors.

	
	EM_ASM(
		sendToUE();
		);

#endif*/
}

// at site of use:
extern "C" void EMSCRIPTEN_KEEPALIVE printString(char *str) {
	printf("%s\n", str);
	FString returnedDataString(str); //This converts the string from JavaScript to a UE4 FString
	GEngine->AddOnScreenDebugMessage(-1, 15.0f, FColor::Yellow, returnedDataString);
}

```

Warning  
##############################################################  
the function printString not in class but in file

h file :

```
// Fill out your copyright notice in the Description page of Project Settings.

#pragma once

#include "CoreMinimal.h"
#include "GameFramework/Actor.h"
#include "BrowserCommActor.generated.h"

UCLASS()
class MYPROJECT3_API ABrowserCommActor : public AActor
{
	GENERATED_BODY()
	
public:	
	// Sets default values for this actor's properties
	ABrowserCommActor();
	UFUNCTION(BlueprintCallable, Category = "SunShine")
	void AppelJS();
protected:
	// Called when the game starts or when spawned
	virtual void BeginPlay() override;

public:	
	// Called every frame
	virtual void Tick(float DeltaTime) override;

};

```

generate project  
add your actor in scene

and in the blueprint level :

![241594-img.jpg](https://d3kjluh73b9h9o.cloudfront.net/original/4X/6/1/0/610e4464de4212c62d8c4f18fc78dd51eba4bf13.jpeg)

lunch a packaging project html  
modifie the “yourproject”.html

add the html javascript in “yourproject”.html at the end just before

```
</body>
</html>

```

the javascript html code :

```
<script>
document.getElementById("nodeGoto").addEventListener("click", function() {
    sendToUE("Test");
}, false);
function sendToUE(Chaine) {
   var str = Chaine;
   var lenUTF8 = Module.lengthBytesUTF8(str) + 1;
   var ptr = Module._malloc(lenUTF8);
   Module.stringToUTF8(str, ptr, lenUTF8); 
   Module.ccall('printString', 'null',['string'], [str]);
   Module._free(ptr);
 }
</script>

```

how it works :  
press button call "Bouton clic"in html page  
or with your mouse pointer in the game press Q

---

<div class="post-metadata">

**Author:** ![CrashAngel](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/crashangel/32/467279_2.png) [@CrashAngel](https://forums.unrealengine.com/u/CrashAngel)\
**Post date:** [March 2, 2019, 6:26am UTC](https://forums.unrealengine.com/t/emscripten-hepling-for-c-class-with-unreal-engine-4/425343/5 "2019-03-02T06:26:49Z")

</div>

Hi, I use my Encode as Portuguese Brazil… How i change this code to work letters as acents??? UTF8 sending to Unreal and receive and acents change???

In unreal acents receive as “?” character…

---

<div class="post-metadata">

**Author:** ![2ez4tt](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@2ez4tt](https://forums.unrealengine.com/u/2ez4tt)\
**Post date:** [March 28, 2019, 1:21pm UTC](https://forums.unrealengine.com/t/emscripten-hepling-for-c-class-with-unreal-engine-4/425343/6 "2019-03-28T13:21:21Z")

</div>

Hi aznur ,  
C++ project is compiled successfully and I get following error when I run html file from my browser. I tried this on both Internet Explorer 9 and Chrome too.

ERROR:  
Uncaught TypeError: Cannot read property ‘addEventListener’ of null

---

<div class="post-metadata">

**Author:** ![2ez4tt](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@2ez4tt](https://forums.unrealengine.com/u/2ez4tt)\
**Post date:** [March 28, 2019, 1:21pm UTC](https://forums.unrealengine.com/t/emscripten-hepling-for-c-class-with-unreal-engine-4/425343/7 "2019-03-28T13:21:28Z")

</div>

I got it working by writing code within . As it was shipping build so it was to be written here I guess. But now if I run game it starts successfully but when I press Q i get  
’ Uncaught ReferenceError: sendToUE is not defined’. I have attached an Image as I cant upload text file or html file.

 ![272701-codesnippet.png](https://d3kjluh73b9h9o.cloudfront.net/original/4X/b/6/0/b60d3251fe21f5400060a9462db03c8f4062fc76.png)

---

<div class="post-metadata">

**Author:** ![ArosPrince](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@ArosPrince](https://forums.unrealengine.com/u/ArosPrince)\
**Post date:** [June 19, 2019, 7:42am UTC](https://forums.unrealengine.com/t/emscripten-hepling-for-c-class-with-unreal-engine-4/425343/8 "2019-06-19T07:42:16Z")

</div>

This looks promising, but the problem is that I get a console error in the browser when trying to call Module.ccall:

```
'ccall' was not exported. add it to EXTRA_EXPORTED_RUNTIME_METHODS (see the FAQ)

```

In the Emscripten FAQ it says that most of the exported functions were removed to save some space and that you need to add it to the aforementioned EXTRA\_EXPORTED\_RUNTIME\_METHODS. But I have no idea how to do that in Unreal, because it manages the emscripten build on it’s own. I would expect some options for that one in the HTML5 section of the Platform settings… But so far I see no way of setting it. Any ideas?

---

<div class="post-metadata">

**Author:** ![Baustein](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Baustein](https://forums.unrealengine.com/u/Baustein)\
**Post date:** [September 27, 2019, 7:50am UTC](https://forums.unrealengine.com/t/emscripten-hepling-for-c-class-with-unreal-engine-4/425343/9 "2019-09-27T07:50:20Z")

</div>

Facing the same problem,can somebody help?

---

<div class="post-metadata">

**Author:** ![alphabrox](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@alphabrox](https://forums.unrealengine.com/u/alphabrox)\
**Post date:** [December 9, 2024, 1:05pm UTC](https://forums.unrealengine.com/t/emscripten-hepling-for-c-class-with-unreal-engine-4/425343/11 "2024-12-09T13:05:12Z")

</div>

> [@How call UFUNCTION (BlueprintImplementableEvent) from JS with EMSCRIPTEN and error: Module.ccall is not function?](https://forums.unrealengine.com/t/how-call-ufunction-blueprintimplementableevent-from-js-with-emscripten-and-error-module-ccall-is-not-function/758421/4):
>
> To work Module.ccall you need to export ccall function (add it to exported methods array) in Engine\Platforms\HTML5\Source\Programs\UnrealBuildTool\HTML5ToolChain.cs (~473 line): Result += " -s EXPORTED\_RUNTIME\_METHODS=\"['stringToAscii', 'ccall']\"";