![\"Sean](\"https:\/\/miro.medium.com\/fit\/c\/96\/96\/1*Gph4xdnpU_RwuVlYOflJTA.jpeg\")
<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\nChances are, you\u2019ve heard of games like Fortnite and Player Unknown\u2019s Battlegrounds. Both games were built in Unreal Engine 4. Unreal Engine has been a favorite among triple-A game developers and indie studios alike. Ever since Epic Games released the engine as free-to-use back in 2015, many eager developers and enthusiasts have tried their hand at creating games in the robust 3D engine. A majority of hobbyists and small teams opt for the engine\u2019s built in blueprint editor rather than script in C++. While Unreal\u2019s blueprint editor is very simple to use, connecting many nodes in a GUI interface can seem cumbersome to some developers. Luckily, the JavaScript community always finds a way to pair their favorite language with anything, thus giving us Unreal.JS<\/a>. Unreal.js is a V8 runtime for Unreal Engine that can be an alternative to, or run alongside existing C++ and Blueprint scripts. The only thing that could make developing a large 3D game with JS easier is the infinitely-scalable TypeScript. Here, I will show you how to get started with Unreal.js and TypeScript.<\/p>\n First, if you haven\u2019t already, install Unreal Engine through the Epic Games Launcher. Next, in the launcher go to the marketplace and find Unreal.js, then run \u201cInstall to Engine\u201d.<\/p>\n Open Unreal Engine and create a new project. In this example, I created a third-person blueprint project.<\/p>\n Once you have the editor open, go to \u201cEdit>Plugins\u201d and make sure that \u201cUnreal JS\u201d is enabled. If it isn\u2019t, enable it and you will see a prompt to restart the editor.<\/p>\n Now in your project\u2019s content folder you should see a folder called \u201cScripts\u201d. If you don\u2019t have typescript installed, install it by running<\/p>\n Next, open up your terminal and navigate to the Scripts folder and run<\/p>\n This should generate a tsconfig.json file. Open the file and change the settings to your preferences. At the bottom we will exclude the \u201caliases.js\u201d file from Unreal.js.<\/p>\n Now open the Scripts folder in your favorite editor and create a file called \u201chelloUnreal.ts\u201d.<\/p>\n For now let\u2019s just add a console message. In the file add<\/p>\n Now in our terminal let\u2019s run the TypeScript Compiler.<\/p>\n This should create a \u201chelloUnreal.js\u201d file.<\/p>\n Open up the unreal editor and in the ThirdPersonExampleMap, go to \u2018Blueprints\u2019 and open the event graph. In the event graph we will add an event that triggers when the game is started called \u201cEventBeginPlay\u201d. The easiest way to add the event is to right click on the blueprint and search for it.<\/p>\n Next we will find the function for adding a JavaScript Component using the same method and connect the two nodes together by clicking and dragging. Select the JavaScript Component, and then on the \u201cDetails\u201d tab in the right side of the editor add our \u201chelloUnreal.js\u201d file to the \u201cScript Source File\u201d input box.<\/p>\n Now make sure to click \u201cCompile\u201d and \u201cSave\u201d and that should be it. Now we can open our JavaScript Console and test our code. Go to \u201cWindow>Developer Tools>Javascript Console\u201d and open the console.<\/p>\n Now click the \u201cPlay\u201d button and run the game. In the console, you should see the \u201cHELLO UNREAL!\u201d message that we added earlier.<\/p>\n Ok, now let\u2019s try and actually do something to our game using Unreal.js. First, to initiate a live reloading dev environment, let\u2019s create a bootstrap file called \u201cbootstrap.ts\u201d that will follow the Unreal.js Example<\/a>.<\/p>\n Now let\u2019s run TypeScript to watch for changes as we edit our helloUnreal.ts file with<\/p>\n Let\u2019s print our \u201cHELLO UNREAL!\u201d message to the HUD by creating an actor. Following the helloCanvas example<\/a>. Open up helloUnreal.ts and add the following code:<\/p>\n Now when we hit \u201cPlay\u201d in our game we should see the \u201cHELLO UNREAL!\u201d message in the center of the screen.<\/p>\n Notice that this example includes a cleanup function that isn\u2019t used. This function is very important if you are creating Actors in your script, however and you can see a basic example of it here.<\/a><\/p>\n Now we have an Unreal Engine project with Unreal.JS<\/a> that can be scripted using TypeScript. Happy coding!<\/p>\n<\/div>\nnpm install -g typescript<\/span><\/pre>\ntsc --init<\/span><\/pre>\ntsconfig.jsonconsole.log(\u2019HELLO UNREAL!\u2019)<\/span><\/pre>\ntsc helloUnreal.ts<\/span><\/pre>\n\/\/\/ <reference path=\"typings\/ue.d.ts\">\/><\/span>export default function (filename:string) {<\/span> Context.RunFile('aliases.js')<\/span> Context.RunFile('polyfill\/unrealengine.js')<\/span> Context.RunFile('polyfill\/timers.js')<\/span> require('devrequire')(filename)<\/span>}<\/span><\/pre>\ntsc -w<\/span><\/pre>\n\/\/\/ <reference path=\"typings\/ue.d.ts\">\/><\/span>\/\/ find a local player controller<\/span>function GetPC() {<\/span>\/\/ out-ref function returns an object which contains out-ref params and return param.<\/span>\/\/ eg) bool USomeClass::Func(int a, int* b, int* c); -> {$:{bool}, b:{int}, c:{int}}<\/span>return PlayerController.C(GWorld.GetAllActorsOfClass(PlayerController).OutActors[0])<\/span>}<\/span>function main(){<\/span> class MyHUD extends HUD {<\/span> ctor() {<\/span> }<\/span>\/\/ override ReceiveDrawHUD<\/span> ReceiveDrawHUD() {<\/span> var text:string = 'HELLO UNREAL!';<\/span> this.Canvas.DrawText(<\/span> GEngine.SmallFont,<\/span> text,<\/span> {X:this.Canvas.SizeX\/2,Y:this.Canvas.SizeY\/2},<\/span> {R:1,G:1,B:1,A:1},<\/span> 0,<\/span> {R:0,G:0,B:0,A:1},<\/span> {X:1,Y:1},<\/span> true,true,true,<\/span> {R:0,G:0,B:0,A:1}<\/span> )<\/span> }<\/span>}<\/span>\/\/ register new HUD class<\/span>let MyHUD_C = require('uclass')()(global,MyHUD);<\/span>\/\/ and instantiate it<\/span> GetPC().ClientSetHUD(MyHUD_C)<\/span>\/\/ no mess to clean<\/span> return function () {<\/span> }<\/span>}<\/span>import bootstrap from \".\/bootstrap\"<\/span>\/\/ bootstrap to initiate live-reloading dev env.<\/span>try {<\/span> module.exports = () => {<\/span> let cleanup:Function|null = null<\/span>\/\/ wait for map to be loaded.<\/span>process.nextTick(() => cleanup = main());<\/span>\/\/ live-reloadable function should return its cleanup function<\/span> return () => (<Function>cleanup)()<\/span> }<\/span>}<\/span>catch (e) {<\/span> bootstrap('helloUnreal')<\/span>}<\/span><\/pre>\n