Overview
This is a simple guide on how to create panorama text panels in Half-Life Alyx, such as the ones at the start of the game.
Introduction
I made this guide since there doesn’t seem to be that much information on the panorama system. This is in no way a comprehensive guide and is just meant to be a quick start to making custom text panels. I’m not super familiar with panorama so I can’t really give any advice on the more complicated stuff, but I still hope this guide will help with getting started.
Creating the necessary CSS and XML files
Step 1:
Create the following directories:
…/Half-Life Alyx/content/<your_addon_name>/panorama/layout/custom_game/
…/Half-Life Alyx/content/<your_addon_name>/panorama/styles/custom_game/
WARNING! It is important to name those folders “custom_game”, since otherwise the game throws an error.
Step 2:
Create the XML file in the layout/custom_game/ directory and the CSS file in styles/custom_game/ directory.
Step 3:
Time to add the CSS and XML formatting.
Here is the XML code I used:
Some notes:
The panel id will be used by the CSS file to reference interactions with hammer.
The highlighted line references the compiled version of the css style file you want to use, so make sure replace it with your CSS file directory, but with .vcss_c as the file extension.
Now to the CSS part. Here is the CSS file code I used:
Some notes:
Here we define what the Hammer editor will need to use in commands for both showing and hiding the text. “.ShowTutorialText01” will be the part referenced by Hammer, with #TutorialText01 being the reference to the panel id in the XML file.
Here you can customise the different properties of the text, such as the font size, color and fade-in duration, but I won’t get into it too much here.
Step 4:
Now compile your files. Remember to do this every time you make a change.
Adding the text in Hammer
Now it’s time to actually put the text in a map.
Step 1:
Place a point_clientui_world_panel entity in your map.
Step 2:
Name the entity and add the reference to the XML file you want in the entity settings. You can tweak the settings, such as alignment and panel size, to your liking.
Note: The text will be aligned around the entitiy’s pivot point, so the preview panel in Hammer may not always be accurate about where the text appears in-game.
Step 3:
Now to get the panel to show the text in-game, add an input to the text panel entity to add the proper reference to the CSS. In this case I used a trigger_once. Set the command to AddCSSClass and set the parameter override to ShowTutorialText01. The parameter override references the command in the CSS file we set up earlier.
Step 4:
Now just compile the map and test it in-game!
