Tutorial 1: Rendering a UI - JonnyOrman/CRYMIUM GitHub Wiki

Let's create a simple HTML UI and render it in our game with CRYMIUM.

Create a simple UI

  • In the root directory of your project, find the Assets folder and create a new folder in it called "UIs".
  • In Assets/UIs, create another new folder called "SimpleUI".
  • In Assets/UIs/SimpleUI, create a HTML file called "index.html".
  • Open Assets/UIs/SimpleUI/index.html in a text editor and paste the following HTML into it:
<!DOCTYPE html>
<html style="height:100%;background:white">
    <body style="height:100%;margin:0">
        <div style="height:100%;display:flex;align-items:center;justify-content:center">
	    <h1>CRYMIUM works!</h1>
	</div>
    </body>
</html>

Render the simple UI in the CRYENGINE project

Let's update the game's code so that it opens our UI instead of loading the map when it starts.

Disable the game map

  • With the project solution open in Visual Studio, in the Solution Explorer find Project/Game/GamePlugin.cpp.
  • Open Project/Game/GamePlugin.cpp and find the following line of code:
    gEnv->pConsole->ExecuteString("map example s", false, true);
  • This line of code opens the game map. Let's comment out this line so that the map does not load when the game starts:
    //gEnv->pConsole->ExecuteString("map example s", false, true);

Get the CRYMIUM container

The CRYMIUM plugin provides a container which stores all of CRYMIUM's features. Let's get a pointer to the contianer that we can easily access.

  • In the Solution Explorer find and open Project/Game/GamePlugin.h.
  • Find the include headers at the top of the file:
#include <CrySystem/ICryPlugin.h>
#include <CryGame/IGameFramework.h>
#include <CryEntitySystem/IEntityClass.h>
#include <CryNetwork/INetwork.h>
  • Add #include <Crymium/Core/ICrymiumContainer.h> to allow us to use ICrymiumContainer:
#include <CrySystem/ICryPlugin.h>
#include <CryGame/IGameFramework.h>
#include <CryEntitySystem/IEntityClass.h>
#include <CryNetwork/INetwork.h>
#include <Crymium/Core/ICrymiumContainer.h>
  • Go to the bottom of the file and find the protected section of the CGamePlugin class:
protected:
	// Map containing player components, key is the channel id received in OnClientConnectionReceived
	std::unordered_map<int, EntityId> m_players;
};
  • Add a private section at the bottom of the class, under the protected section, and add an ICrymiumContainer field:
protected:
	// Map containing player components, key is the channel id received in OnClientConnectionReceived
	std::unordered_map<int, EntityId> m_players;

private:
	ICrymiumContainer* _crymiumContainer;
};
  • Back in Project/Game/GamePlugin.cpp, find the include headers at the top of the file:
#include "StdAfx.h"
#include "GamePlugin.h"

#include "Components/Player.h"

#include <CrySchematyc/Env/IEnvRegistry.h>
#include <CrySchematyc/Env/EnvPackage.h>
#include <CrySchematyc/Utils/SharedString.h>

#include <IGameObjectSystem.h>
#include <IGameObject.h>

// Included only once per DLL module.
#include <CryCore/Platform/platform_impl.inl>
  • Add #include <Crymium/Core/ICrymiumPlugin.h> to allow us to use ICrymiumPlugin:
#include "StdAfx.h"
#include "GamePlugin.h"

#include "Components/Player.h"

#include <CrySchematyc/Env/IEnvRegistry.h>
#include <CrySchematyc/Env/EnvPackage.h>
#include <CrySchematyc/Utils/SharedString.h>

#include <IGameObjectSystem.h>
#include <IGameObject.h>

// Included only once per DLL module.
#include <CryCore/Platform/platform_impl.inl>
#include <Crymium/Core/ICrymiumPlugin.h>
  • Find the line of code that loads the game map that we commented out earlier:
//gEnv->pConsole->ExecuteString("map example s", false, true);
  • Underneath this line, retrieve a pointer to the instance of ICrymiumContainer from the CRYMIUM plugin, and assign it to the _crymiumContainer field we just created:
//gEnv->pConsole->ExecuteString("map example s", false, true);
_crymiumContainer = gEnv->pSystem->GetIPluginManager()
	->QueryPlugin<ICrymiumPlugin>()
	->GetCrymiumContainer();

This gives us easy access to the container with all of CRYMIUM's features.

Activate the Simple UI

Now, let's activate the UI we made earlier by using the IUiActivator interface.

  • After getting the container, get the UI Activator from it and activate the "SimpleUI" UI:
//gEnv->pConsole->ExecuteString("map example s", false, true);
_crymiumContainer = gEnv->pSystem->GetIPluginManager()
	->QueryPlugin<ICrymiumPlugin>()
	->GetCrymiumContainer();
_crymiumContainer->GetUiActivator()->Activate("SimpleUI");
  • Rebuild the solution.

Now, when you run the game, you should see the HTML UI that says "CRYMIUM works!"

⚠️ **GitHub.com Fallback** ⚠️