Rocket Crafting Project

Front Unreal Engine Project / Back Node.js

Nikola L.
12 min readFeb 17, 2022

Based on Unreal Motion Graphics to create 2d UI elements also used some of best project 3dgames templates.

I choose the best solution for developing multiple platforms. (Rocket is alias for ue). 3D graphics is optimal you can use any standard features from UE4.24. Version Full Spectar Created by Nikola Lukic https://maximumroulette.com 2021

Project list:

- Shooter FPS — future Hang3d 2 [c++]

http://maximumroulette.com/apps/shooter/ShooterGame.html

- Barbarian Road Mashines — race / zombies game [BP]

http://rocketcraft.maximumroulette.com

- ShootTheZombie2 based on Survival Zombie shooting game [c++]

https://maximumroulette.com/apps/shoot-the-zombie

- Realistic rendering Ue4 template [BP]

https://maximumroulette.com/apps/realistic-rendering/

FullSpectrum — Empty project [BP]

Live demo link with options to use dedicated server. Note: Dedicated server is not active non-stop.

Description

  • Use Unreal engine to create classic 2d context applications. Similar to the standard web application. Rocket is most powerfull cross platform tool i need to use it. 4.24 version is most interest checkpoint for UE. Last version with opengles 2.0 devices support (mobile). Also is version where we use new feature exstension HTML5 build. Explanation: with opengles 2.0 we can still build our application for old android 5/6/7/8... os. In other way 4.24 is one of the last releases. Future upgrade will be easy.
  • Please join the team and participate: https://github.com/orgs/RocketCraftingServer/teams/rocketcraftingteam

Video YT — Beta testing

Barbarian Road Mashines

https://www.youtube.com/watch?v=3w-0MX4BA6c&ab_channel=javascriptfanatic

Beta live demo link [dedicated server runned] Use connect for master server

  • play solo
  • open your own host (web platform no support for host game).
  • play online realtime multiplayer (html5) connected to the dedicated server (centOS 8.3 [must be public])
  • play any platform via dedicated server

Screenshots:

Register form

Barbaarian road mashines

Shooter game — upgraded Hang3d Nightmare

Shooter game — upgraded Hang3d Nightmare

Shoot the zombie — upgraded from Survival game

Shoot the zombie

Realistic Rendering

TODO:

  • Create free of choose to use account session with rocketCraftServer.
  • Add connection between Shoooter and rocketCraftionServer, create leaderboard for every listed game.

You need to join team and get your copy of rocket-crafting-server:

Structure

SurvivalGame

BarbarianRoadMashines

ShooterGame

Blanko App -> Template/FullSpectrum

HTML5 Old Tradicional way (deplaced)

  • Use version 4.22 No need for build engine from source for client client-server. opengles2.0 or 3.1 In this project i prefered 4.24.3 it is litle more complex to get working solution but it is better.

HTML5/webGL New way (build engine from source):

  • opengles 3.1 / 2.0 (ready for deplacment but still present) from html5 docs repo.

Version Moder solution: UnrealEngine-4.24.3-html5–1.39.18 UnrealEngine-4.24.3-html default branch

Under folder 4.24.0/ Barbarian Road Mashines:

Beta testing: https://www.youtube.com/watch?v=3w-0MX4BA6c

Download default html branch or use https://github.com/UnrealEngineHTML5/UnrealEngine/tree/4.24.3-html5-1.39.18

There is a trouble with single-brach you can just clone whole project or download zip of current branch.

git clone -b 4.24.3-html5-1.39.18 --single-branch https://github.com/UnrealEngineHTML5/UnrealEngine ue4-4.24.3-html5

You can clone from origin nut not html5 pack support: Or clone whole poject . This can be heavy for your hard drive.

git clone -b https://github.com/UnrealEngineHTML5/UnrealEngine

Android

  • Google play licence key:
keytool -genkey -v -keystore barbarian-road-mashines-key.keystore -alias barbarian-road-mashines -keyalg RSA -keysize 2048 -validity 10000
keytool -genkey -v -keystore zombie-key.keystore -alias zombie -keyalg RSA -keysize 2048 -validity 10000

On windows you can find keytool for example in : C:\Program Files\Android\Android Studio\jre\bin Navigate in terminal to the jre bin folder. No need windows git bash.

Windows — Linux — Mac os SETUP unreal engine from source:

You not need to manual install emscripten if you already have emscripten jusr remove it from env paths.

Setup.bat/Setup.command/Setup.sh                                              may take up to an hour or so
HTML5Setup.sh may take up to an hour or so
GenerateProjectFiles.bat/GenerateProjectFiles.command/GenerateProjectFiles.sh may take up to 5 minutes

DedicatedServer/AppServerClient servers build

Ue4 must be builded from source if you wanna build dedicated server. This client part but for core networks related to the ue4 this is also dedicated server project generator:

Note:

  • HTML5 or web app can’t be host server (Browsers tech one of the main roles). but we cant use it like client it is enough for playing/using games/apps.

Successed build dedicated for linux:

PID    USER      PR  NI    VIRT    RES    SHR S   %CPU   %MEM  TIME  + COMMAND
502469 unreal 20 287952 46860 6600 S 1.7 5.7 1:07.52 BrmServer-Linux

I am quite happy with these results but you have to pay attention to many things.

Help for c++ template projects

This is only for ue from source case (when you wanna dedicated server builds) in other way just use `build` project, for full rebuild use `rebuild` project.

The option you are referring to (Build -> Project Only -> Clean Only “ProjectName”) is a Visual Studio option, not one that is exclusive to Unreal Engine 4. What actually happens when a Project Only Clean process is begun, is that Visual Studio not only cleans the Project, but it also checks to see if it is able to clean anything that the Project depends on. Since you are using a version of the Engine that is built from source code, Visual Studio includes that dependency in the Clean process, which ends up requiring a full build of the Engine. The same occurs if you attempt to rebuild the project only. If you wish to be able to perform a clean at only the project level, you would need to navigate to where your project is located in a Windows Explorer window. In the root project folder, delete the Binaries, Build, DerivedDataCache, and Intermediate folders. Right-click on the project’s .uproject file and select the Generate Visual Studio project files option (this will recreate the Intermediate folder). Open the project solution in Visual Studio and Build the project (this will recreate the Binaries and Build folders). When the build completes in Visual Studio, double-click the project’s .uproject file to open it in the Editor(this will recreate the DerivedDataCache folder).You should now have a “Clean” project without needing to rebuild the Engine. Source: https://answers.unrealengine.com/questions/100921/view.html?sort=oldest

More explanations

project BRM

  • Blueprint project
  • Integrated with rocketCraftingServer session server.
  • Works on http.
  • Multiplayer with dedicated integrated.

Project shooter — Hang3d Nightmare

  • This is c++ template project.
  • Must be optimised little more for mobile targets.
  • Not integrated with rocketCraftingServer.
  • Multiplayer with dedicated integrated.
  • Works on http.

Project Survival

  • This is c++ template project.
  • Not integrated with rocketCraftingServer.
  • Modification: Adding fire to be blueprint accessible, adding fire button option for jump also raffal shooting button. [WIP]
  • Must be optimised little more for mobile targets.
  • Works on https or http.

Realistic rendering ue4 example

  • Blueprint project
  • I will try max powered graphics for this example
  • Still must to have healt builds for all targets.
  • Not integrated with rocketCraftingServer.
  • Works on https or http.

Licence and Credits

  • VAST ue4 plugin [json handling in BP]
  • ShooterGame Unreal Engine 4.24.3
  • SurvivalGame MIT License Copyright © 2020 Tom Looman
  • Zombie mesh with skin and animation: https://www.mixamo.com/

SERVER PART

https://github.com/RocketCraftingServer/rocket-craft-server

Rocket Crafting Servers

for Rocket Craft (ue4 project) clients.

General status : underconstruct

Project original name : Rocket Crafting Servers to avoid misunderstandings with other randomly similar server names. Rocket is an alias for Unreal engine.

=> Migrate to ue4 builded from source. => Only active for now is 4.24.3 , i will wait until finish Barbarian Road Mashines basic demo with one game play map.

Get server account part:

https://github.com/RocketCraftingServer/rocket-craft-server

Basic account session staff based on node.js and MongoDB. Integration done:

  • Node.js http1.1/http2 server
  • Basic session account support (mongoDB)
  • Vue-Typescript administrator panel project
  • Test clients (rocket-craft repo)
  • Rocket-craft client (4.22) exchange IP for opened dedicated users server run.

Run rocketcraftingserver in local (dev):

Run Admin panel

From ue4 client

- First case is `Barbarian Road mashines` race game.

Project structure

  • First char in name I (for example IApp.ts) represent current interface used for generating API documentation.
  • Dont upload this project in www, htdocs, public folder on you public domain mashine. Like any node.js app.
  • Folder admin-panel is somekind of sandbox. Dont import any file from root like congif.js. Even admin access it is still posible for public access.
  • Top secret list:
  • system email password
  • public database password
├── database/
| ├── data/ (internal mongodb generated)
├── docs/ (Output for documentation html)
├── node_modules/ (auto generated)
├── admin-panel/ [Vue - admin app]
| ├── dist/ (auto generated)
| ├── images/
| | └── icons/
| | | └── svgs
| | | └── pngs
| ├── node_modules/ (auto generated)
| ├── public/ [Vue - Public]
| ├── src/ [Vue - src]
| | └── components/
| | └── administrator/
| | └── accounts.vue
| | └── local-storage/
| | └── my-common/
| | └── common-func.ts
| | └── literal.ts
| | └── styles/
| | └── App.vue
| | └── IApp.ts
| | └── main.ts
| | └── error-instance.ts
| | └── shims-tsx.d.ts
| | └── shims-vue.d.ts
| | └── store.ts
| ├── .eslintignore
| ├── .gitignore
| ├── babel.config.js
| ├── index.html
| ├── manifest.web [PWA - staff]
| ├── package.json
| ├── package-lock.json
| ├── typedoc.json [Documentation generator config]
| ├── tsconfig.ts
| ├── vue.config.js [PWA - staff]
├── self-cert/ [server side local cert]
├── multiplayer/ (raw implementation - support servers)
| ├──matchmaker [optimal]
| ├──signalling-webserver [optimal]
| ├──server-builds [optimal]
| | ├──windows [for win host plan]
| | ├──macos [for macos host plan]
| | ├──linux [for linux host plan]
├── .gitignore
├── config.js [server side config]
├── LICENCE
├── README.md
├── package.json
├── package-lock.json
├── server.js [Main Server]

Active RocketCraftServer integrated Features List:

- MongoDB integrated      [DONE]
- Switch theme (style) [DONE]
(whole palette ofo colors)
- Test account route
- register [DONE]
- register confirmaton [DONE]
- login [DONE]
- user [DONE]
- test ue4 clients part [DONE]
- clients profile data [DONE]
- Basic web app hosting
- http server [DONE]
- https server + ue clients [WIP]

Active RocketCraftClient engine 4.24.3 integrated Features List:

Client application (all platforms releases/builds) use communication with rocketCraftServer only on API level with http/https protocol.

Only implications between ue client vs server.js is account session status (in database field online). Logged or not.

- Account routes
- register form [DONE]
- reg/confirmaton form [DONE]
- login form [DONE]
- profile [DONE]
+-------------------------------------------------------------------------------------------------------+
| Active project use 4.24 ue version - Project name : Barbarian Road Mashines |
| Server use 4.24 ue version fro source |
| +-----------------------------------------------------+ |
| SOURCE : https://github.com/zlatnaspirala/rocket-craft |
| +-----------------------------------------------------+ |
| |
| |
| DESKTOPS MOBILE GameConsoles WEB |
| +-------------------------------+ +------------------------------+ +----------------------------+ |
| | | | | | | |
| | WINDOWS | | ANDROID X-Box | | Unreal export direct from | |
| | (dedicated server) [DONE] | | | | 4.22 or use engine 4.24 | |
| | | | | | | |
| | MACOS | | IOS | | (build from source) | |
| | | | | | | |
| | | | | | AdminPanel (ONE PART OF | |
| | | | Sony Playstation | | THIS REPO) | |
| | | | | | | |
| | LINUX (dedicated server) | | etc | | Also can be used by any | |
| | no implication with account | | | | web application fetch call | |
| | session http server. [DONE] | | | | (API JSON Based content) | |
| +-------------------------------+ +------------------------------+ +----------------------------+ |
| rocket Client builds |
| rocket Server builds |
+----------+----------+---------------------------------------------------------------------------------+
^ |
| | MATCHMAKING [OPTIMAL]
| |
| | SINGNALING SERVER [OPTIMAL]
| |
| | WEB SERVER [For hosting ue html5 clients also for rocketcraft session]
| |
+--------------------------------------------------------------------------------------------------------+
| | | |
| +----+----------v---------+ +-----------------------------+ |
| | | | | |
| | REST API | | HTTP, HTTPS (1.1 or 2) | |
| | [/rocket/register] | | | |
| | [/rocket/confirmation] | +-----------------------------+ |
| | [/rocket/register] | |
| | [/rocket/login] | |
| | [/rocket/profile] | |
| | [/rocket/profile-delete]| |
| +-------------------------+ |
| |
| +------------------------------------------------------------+ |
| SOURCE : https://github.com/zlatnaspirala/rocket-craft-server |
| +------------------------------------------------------------+ |
| |
+--------------------------------------------------------------------------------------------------------+
| NODEJS CORE |
+--------------------------------------------------------------------------------------------------------+
| MONGO DATABASE |
+--------------------------------------------------------------------------------------------------------+

Status/info:

  • Admin Panel (Vue-ClassComponent-Typescript)
  • Debugging proccess for server part with Visual-Code. (Launch.json tested on windows)create folder.vscodein root of workspace and copylaunch.json`. Please use debugger and learn and feel node iterrator flow.
  • Admin ban user [NEXT]
  • Active servers list [DONE]
  • Admin only — delete profile [done]

Production

Public RocketCraftingServer API: Prefix: rocket

Admin panel:

Note:

  • Make shiled from Hacker attacks. Recommended is to run mongo without remote access! Make strong database password Use permission by definited host be mac-address or ip...
  • All this prevent job is minimum action to make your server application stay a live.
  • About .permission there is no setup this arg from code. Use MongoDB console or GUI Mongo DB Compass. This is all free. Just replace value basic with admin.

Basic data:

  • Dedicated Server CentOS 8.3
  • Build shipping version at the end.

Security:

  • Use non standard port it si small but good secury feature.
  • If you have mongo on same mashine use bind localhost not domain name.

It is easy to use distribution platform with more servers host mashines.

mongo --host IP-ADDRESS-OF-MONGODB-SERVER --port PORT_NUMBER

Be aware of NAT and need to have opened port if you have firewall active on your server.

  • CentOS 8.3
use DB_NAME_ROCKET_ID
db.author.insert({"name":"Nikola Lukic 2021"})

Format:

firewall-cmd --zone=public --permanent --add-port PORT/tcp

Examples for cent os 8 in case of signaling server useage:

sudo firewall-cmd --permanent --add-port=5349/tcp
sudo firewall-cmd --permanent --add-port=5349/udp
sudo firewall-cmd --permanent --add-port=63000-64535/udp
firewall-cmd --zone=public --permanent --add-port 85/tcp
firewall-cmd --zone=public --permanent --add-port 8888/udp
sudo firewall-cmd --reload

Server flow

For production or stage server dev use secured arg and also you need to have ssl private key and .crt file. Run:

npm run app

Localhost MongoDB setup:

  • run mongodb service on your computer

Then attach it:

mongod --dbpath data --bind_ip <DOMAIN>

At the end it looks like:

mongo --host IP-OR-HOST --port SECRET_PORT_CUSTOM -u "userAdmin" --authenticationDatabase "admin" -p

Manual operate with database:

show dbs
use <database_name>
db.users.update({},{$set : {"role":"user"}},{upsert:false, multi:true})

Deep look at package.json in root dir:

"scripts": {
"app": "node server maximumroulette.com secured",
"sameDomain": "node server IP_ADDESS secured"

Ue4 Clients -> Must be game engine builded from source. Generate visual studio source files. Build on right click -> first ue4 instance than build game instance. Use Development or Shipping — Editor If you wanna dedicated server build Development-Server or Shipping-Server build configuration in visual studio. For package run also game engine from source and simple package selected platform. For all platforms

4.24.3 Main reason is devices with opengles < 3.0 support plus Linux supported websocket experimental net driver [also dedicated server works fine].

This is Tradicional way. On finish whole this staff i will add future modern way brach ( 4.26 > ) with last ue4 upgrade.

Signaling Server host [optimal]

80 — for all HTTP requests coming from clients. To change this value, set the — httpPort parameter for the Signaling Server.

443 — for all HTTPS requests coming from clients, when the Signaling Server is running in HTTPS mode. To change this value, set the — httpsPort parameter for the Signaling Server.

8888 — for all incoming connection requests from the Unreal Engine application. To change this value, set both the — streamerPort parameter for the Signaling Server and the -PixelStreamingPort parameter for the UE4 application.

Matchmaker Server host [optimal]

90 — for all HTTP requests coming from clients. To change this value, use the — httpPort parameter for the Matchmaker Server.

9999 — for all messages sent by the Signaling Server. To change this value, set both the — matchmakerPort parameter for the Matchmaker Server and the — matchmakerPort parameter for the Signaling Server.

Multiplayer proxy servers for support [optimal]

From ue4 engine recommended files

  • Turn server come from webRTC excellent feature for next update.

Be sure:

npm install -g npm

Test from browser console

Read more at routes.md

From http://maximumroulette.com/ or from your own server.

  • Login:
fetch("/rocket/login/", { method: 'POST', headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}, body: JSON.stringify( { emailField: "zlatnaspirala@gmail.com",
passwordField: '123123123'}) } ).
then(response => response.json()).
then(data => console.log(data));

For private job i also run KureOrange at: https://kure.maximumroulette.com/

--

--