Skip to content

Custom Components and UI elements

Thiago edited this page Jun 4, 2024 · 1 revision

Implementing custom components is as simple as creating a class and inheriting a base component class.

Behaviour Components

All components that can be added to Entity must inherit Component. Afterwards you can override the On<event name> virtual methods available. By default, the methods OnStart(), OnUpdate(), OnPhysicsUpdate(), OnRender() are automatically called by the engine. Any other custom event must be called manually using the Event Bus

Creating a component

public class MagicalEntity : Component
{
	float magicLevel, elapsed;
	//  Mandatory implementation.
	public MagicalEntity(Entity entity) : base(entity)
	{ }
	
	// Called whenever the entity enters the game world
	public override void OnStart()
	{
		magicalLevel = SomeUtilityClass.GetSaveData().Level;
	}
	
	// Called every frame before rendering.
	public override void OnUpdate()
	{	
		// Doing an action every 10 seconds as an example.
		elapsed += Time.DeltaTime;
		if(elapsed > 10)
		{
			CastSpell();
			elapsed -= 10;
		}
	}

	// Called every physics update by the physics engine.
	public override void OnPhysicsUpdate()
	{
		// If your code involves physics, it is recommended to do it here to sync it properly.
	}

	// Called whenever models are being rendered
	public override void OnRender()
	{	
		// If you want to render something special, do it here.
	}
}

And with that, a custom component has been created and the base class automatically subscribes the method events to the EventBus. Note that if either one of the entity or the component is disabled then none of the events are called.

UI Components

Creating custom UI Components is exactly the same way as a normal component, except you implement UIComponent. A UIComponent derived type behaves exactly the same as a normal component, so you can run game logic in that component and simply use the OnUIRender() virtual method to render some custom UI based on that component's data.

Lets use the previous example to draw our magic level on screen using Raylib

public class MagicalEntity : UIComponent
{
	// previous code...
	public override void OnUIRender()
	{
		Raylib.DrawText($"Magic Level: {magicLevel}", 25, 25, 20, Color.White);
	}
}
Clone this wiki locally