Scene First Panel
Let's see how to trigger the opening of a panel when a Scene is loaded.
Inspector way- Canvas/UGUI
Assuming we have a scene with a Canvas and a Camera, let’s add the component SUElementCanvas
to the Camera (not mandatory to be added to the camera, only for example purposes)
Now, click +
to add a new event and in the WHEN…
section select Scene/MySceneLoaded
as event.
Next, in order to open a panel (UI State), we must create a Surfer Action
.
Basically, in the If Conditions True
tab of the DO…
section , let’s add a new reaction Surfer/OpenState
and as state let’s select Menu
.
Now, in our scene Canvas, let's create a UI Panel, let’s add the component SUElementCanvas
to it , set the Type to State
and set the State to Menu
Then, add a State/MyStateEnter
event and in the DO…
section let’s add the reaction Transform/SetAnchoredPosition
and set the values to 0 ( this reaction is not mandatory , it's only for example purposes, you can choose the one it's better for you )
As last thing, move your UI Panel out of Camera view, hit play and what you will see is the same panel being shown directly in front of the Camera!
Inspector way - UIToolkit
First, let's create an UXML file with a panel called menu
and set its display-style to None
(disable it)
Now, let's create a gameObject and add a UIDocument component (with our UXML) and a SUElementsToolkit
component to it
Then, in the "WHO" section , click +
to create a new "element data" entry and let's select <Root>
as visualElement to handle.
Then, click +
to create a new event and in the WHEN
section select Scene/MySceneLoaded
as event.
Next, in order to open a panel (UI State), we must create a Surfer Action
.
Basically, in the If Conditions True
tab of the DO
section , let’s add a new reaction Surfer/OpenState
and as state let’s select Menu
.
Now, in the "WHO" section , click +
to create a new "element data" entry and let's select menu
as visualElement to handle ; then set the Type to State
and set the State to Menu
Then, add a State/MyStateEnter
event and in the DO
section let’s add the reaction VisualElement/Set Display
and set the Display value to Flex
(leave the element field to <Event's Element>
because it means that the reaction will have effect on the menu
visualElement itself)
Basically we have told Surfer to open, on scene loaded, the UI State called Menu
that is linked to the visualElement called menu
.
Now, hit play and what you will see is that panel being shown directly in front of the Camera!
Runtime way
Let's see how to accomplish this feature at runtime.
Basically , for example purposes :
- let's create a normal Canvas/UIToolkit UI panel (like a simple Menu)
- let's create a script called Navigator (that will trigger the State event)
- let's create a script called UIStatePanel (that will handle our previous created UIPanel and receive the State event)
In the Navigator script, let's receive the scene event and react to it:
public class Navigator : MonoBehaviour, ISUSceneLoadedHandler
{
private void Awake()
{
SurferManager.I.RegisterSceneLoaded(this,"MySceneName");
}
//implementation of ISUSceneLoadedHandler
public void OnSUSceneLoaded(SUSceneLoadedEventData eventInfo)
{
SurferManager.I.OpenState("Menu");
}
}
Then, in the UIStatePanel script :
public class UIStatePanel : MonoBehaviour, ISUStateEnterHandler
{
[SerializeField]
RectTransform _panel = default; //this is the panel previously created
private void Awake()
{
SUElementData stateData = new SUElementData();
//set up the state , for Canvas/UGUI
stateData.SetUpState(_panel.gameObject,"Menu",0);
//set up the state , for UIToolkit
stateData.SetUpState(_myVisualElementPanel,gameObject,"Menu",0);
//here we register to the state enter event of the state
SurferManager.I.RegisterStateEnter(this,"Menu");
}
//implementation of ISUStateEnterHandler
public void OnSUStateEnter(SUStateEventData eventInfo)
{
//we bring the panel at the center of the camera
//Canvas/UGUI
_panel.localPosition = Vector3.zero;
//UIToolkit
_myVisualElementPanel.style.display = DisplayStyle.Flex;
}
}