Recently i got a bunch of PMs full of questions about this tutorial.
I already answered the same questions a couple of times , so it would be great if you could post your questions in this thread instead, so other people can learn from your mistakes or answer your questions directly. :)
As you might know im part of the team that developes Starcaft Universe and im responsible for most of the trigger work. Since SCU is a real big RPG and alot of people try to build smaller RPG projects i decided to share some of our knowledge with the community, however some things will for sure be kept secret for now.
In this tutorial i want to show you how to create a basic chatbox, displaying the messages of all players in a custom interface.
Difficulty: Medium (You need some basic trigger knowledge for this tutorial!)
The result will look like this:
1. Creating a custom font style and hiding the game chat
Bevore we can start working on the chatbox, we need to create a custom font style.
Since we want the chatbox to display the newest message always on the bottom, the most easy method to achieve this is to create a custom font that is aligned to bottom left, since the editor doesnt include any font that matches this criteria (at least i didnt find one).
It also gives you the possibility to change the font size to your needs.
To create a custom font we have to follow a few easy steps:
1. Create a new .SC2Style file
2. Open it and paste the following text into it:
I think i dont need to explain much here, feel free to change the size to your needs. You can also create multiple custom fonts if you want to.
3. Save the file and open the editor.
4. Open the import manager and import the file, save the map
5. Go to the Data editor and switch to "Game UI Data", click on "Default SC2 UI Settings" and change the "UI - Font Style Files" field to your imported file.
6. Save the map.
Now you can use your custom font within the editor!
Right now we need to hide the default chat display of the game, since we want the messages to be shown in our own interface and NOT within the default chat panel. To achieve this just follow the steps below:
1. Create a new .SC2Layout file
2. Open it and paste the following text into it:
I think i dont need to explain much here, this just hides the default chat display in the game.
3. Save the file and open the editor.
4. Open the import manager and import the file, save the map
5. Go to the Data editor and switch to "Game UI Data", click on "Default SC2 UI Settings" and change the "UI - Custom Layout Files" field to your imported file.
6. Save the map.
Now the chat display will be hidden within the game!
2. Creating the library
At first we need to create a new library called "chatbox".
I like to add different folders for variables, functions, actions and triggers to keep things clean.
When youre done it should look like this:
3. Setting up the variables
Now we need to create all variables needed for our chatbox. Create a new record called "chatbox" and link it to a variable of type record to be able to use it.
Now create the following variables in your record:
Feel free to change the config values to your needs. Just make sure that the array size of "chat message" is always 1 smaller than the value of "max messages". (Keep in mind the sc2 GUI always makes arrays 1 bigger than entered, in pure Galaxy "chat message" would have an array size of 50.)
4. Initializing the dialogs
Once all variables are created we need to setup the dialogs needed for our chatbox. Since this is a library we need to make sure that its flexible and usable in each map, so we want to give the user the possibility to customize his chatbox with a few simple clicks.
Because of that we do the initialisation in a custom action and add a few parameters. Set it up like this:
I dont want to explain too much here, basically we are just creating a few dialogs and dialog items, attaching them to each other and saving them to the variables in the record, shouldnt be a big deal for someone with basic trigger knowledge.
However, there are 2 important things:
1. The "chat panel" dialog. This dialog is invisible and contains the chat label. Its needed for scrolling later and cuts off the edges of the label.
2. "Dialog - Set (Last created dialog item) style to "BottomLeft" for (All players)" changes the font style of the chat label to our custom font. This will make sure that its aligned to the BottomLeft and is the "secret" of our chatbox.
5. One easy action
Bevore we can continue with the chatbox we need a simple action to show/hide it for a specific player. This makes sense because the chatbox contains 2 dialogs and its a library and should be easy to use.
Create a new action named "show/hide chatbox" and set it up as follows:
6. Making it work
Ok so right now everything is set up but the chatbox doesnt do anything. To make it actually display chat messages we need 2 things: one custom action and one function.
Lets start with the action. Create a new action called "send chat message" and set it up as in the picture:
So, whats done right here?
You might ask yourself, why dont we just combine the newest chat message with the chat label text instead of using the array? The reason is that a label cant store an unlimited amount of text. So after some time the chatbox would simply stop working because the label is "full" and cant story any additional text. In addition, reading out the text of a label is kinda slow and not very good for performance.
The solution is to use a text array and resorting it each time when a chat message is entered. Sounds complex but is kinda simple:
Example:
Lets say a player types a chat message reading "test1". The array should look like this now:
Now he types a new message reading "test2". Now we need to resort the array, meaning that "test1" should be saved into chat message[1] and "test2" in chat message[0]. The array looks like this:
To achieve this we use a simple while loop that starts at the END of the array (this is important! dont start at the begining!) and then copies the value of the current loop index - 1 to the array with the current loop index. Basically that means:
At the end we just need to set the chat message[0] to the new message and we are done!
Now the array stores all chat messages and we can update the chat label text. Like this there will never be more than 50 messages displayed and its impossible to reach the text limit of a label (since each chat message has a limited size).
In order to update the label we need our custom function.
Create a new function called "get chatbox content" and set it up like this:
The function basically returns the entire text array in one bit and makes it easier for us to update the chatbox label.
7. Creating the triggers
Alright, the hard part is done. Now we just need to setup the triggers to make the chatbox work.
First off, we want each chat message to appear in the chatbox for sure.
In order to do this we create a new trigger, that just calls our custom action each time a chat message is entered:
Make sure to use the event "Game - Player Any Player types a chat message containing "", matching Partially" to catch EVERY chat message. This works because each message contains an empty string. :)
Right now, everything works already, except for scrolling.
Create a new trigger and set it up like this:
As you can see, with our chatbox concept the scrolling is very easy to do. We dont need to resort any arrays or set texts, we just move the label that stores all the text. Make sure to check if the label offset y is < 0 when scrolling down cause otherwise it will look dump.
Known issue of this is that you can scroll up infinitly long, thats because we cant detect how much text is filled into the chatbox and the only problem of our concept, whats acceptable in my opinion.
8. A few words on libraries
If you create libraries like this one, make sure to make all functions, trigger, actions and variables internal, except for the ones that should be accessable by the user later. For the chatbox, the user should just be able to use the 3 custom actions but not have access to the chatbox record variables or the triggers. This makes 1) the library more secure and 2) removes all the unneeded stuff from the gui function lists (for example when the user types "chatbox" in the search window of his trigger editor he WONT find the chatbox record, because its internal and can just be used by the library itself).
9. How to use the chatbox library in my map / How to set it up
If you want to use the library in your map, you just have to follow this 4 steps:
1. Import the custom font style file and follow the guide how to implement it in your map from step 1 in the guide.
2. Import the custom game ui file and follow the guide how to implement it in your map from step 1 in the guide.
3. Import the chatbox library.
4. Set up the chatbox by using the "init chatbox" action provided by the library, feel free to customize it as you like to and show it up by using "show/hide chatbox".
5. Enjoy!
10. Final Words
Please note that this is just a very basic example of a chatbox. You could for example add multiple tabs for it like team chat, combat log and so on, work with dialog styles to make it look much cooler or even add smileys to it (yes smileys! :) ). I just wanted to give a basic idea how it works and i hope it has helped some people to understand the mechanics of a custom RPG chatbox.
Recently i got a bunch of PMs full of questions about this tutorial.
I already answered the same questions a couple of times , so it would be great if you could post your questions in this thread instead, so other people can learn from your mistakes or answer your questions directly. :)
@Enexy: Go
Oh ok, thanks.
@Enexy: Go
Oh cool, how did you remove that? Getting this error aswell. :)
@TheTleno: Go
Did you run the "init chatbox" action?
Have you shown the chatbox via "show/hide chatbox" action?
Hey guys!
As you might know im part of the team that developes Starcaft Universe and im responsible for most of the trigger work. Since SCU is a real big RPG and alot of people try to build smaller RPG projects i decided to share some of our knowledge with the community, however some things will for sure be kept secret for now.
In this tutorial i want to show you how to create a basic chatbox, displaying the messages of all players in a custom interface.
Difficulty: Medium (You need some basic trigger knowledge for this tutorial!)
The result will look like this:
1. Creating a custom font style and hiding the game chat
Bevore we can start working on the chatbox, we need to create a custom font style.
Since we want the chatbox to display the newest message always on the bottom, the most easy method to achieve this is to create a custom font that is aligned to bottom left, since the editor doesnt include any font that matches this criteria (at least i didnt find one).
It also gives you the possibility to change the font size to your needs.
To create a custom font we have to follow a few easy steps:
1. Create a new .SC2Style file
2. Open it and paste the following text into it:
I think i dont need to explain much here, feel free to change the size to your needs. You can also create multiple custom fonts if you want to.
3. Save the file and open the editor.
4. Open the import manager and import the file, save the map
5. Go to the Data editor and switch to "Game UI Data", click on "Default SC2 UI Settings" and change the "UI - Font Style Files" field to your imported file.
6. Save the map.
Now you can use your custom font within the editor!
Right now we need to hide the default chat display of the game, since we want the messages to be shown in our own interface and NOT within the default chat panel. To achieve this just follow the steps below:
1. Create a new .SC2Layout file
2. Open it and paste the following text into it:
I think i dont need to explain much here, this just hides the default chat display in the game.
3. Save the file and open the editor.
4. Open the import manager and import the file, save the map
5. Go to the Data editor and switch to "Game UI Data", click on "Default SC2 UI Settings" and change the "UI - Custom Layout Files" field to your imported file.
6. Save the map.
Now the chat display will be hidden within the game!
2. Creating the library
At first we need to create a new library called "chatbox".
I like to add different folders for variables, functions, actions and triggers to keep things clean.
When youre done it should look like this:
3. Setting up the variables
Now we need to create all variables needed for our chatbox. Create a new record called "chatbox" and link it to a variable of type record to be able to use it.
Now create the following variables in your record:
Feel free to change the config values to your needs. Just make sure that the array size of "chat message" is always 1 smaller than the value of "max messages". (Keep in mind the sc2 GUI always makes arrays 1 bigger than entered, in pure Galaxy "chat message" would have an array size of 50.)
4. Initializing the dialogs
Once all variables are created we need to setup the dialogs needed for our chatbox. Since this is a library we need to make sure that its flexible and usable in each map, so we want to give the user the possibility to customize his chatbox with a few simple clicks.
Because of that we do the initialisation in a custom action and add a few parameters. Set it up like this:
I dont want to explain too much here, basically we are just creating a few dialogs and dialog items, attaching them to each other and saving them to the variables in the record, shouldnt be a big deal for someone with basic trigger knowledge.
However, there are 2 important things:
1. The "chat panel" dialog. This dialog is invisible and contains the chat label. Its needed for scrolling later and cuts off the edges of the label.
2. "Dialog - Set (Last created dialog item) style to "BottomLeft" for (All players)" changes the font style of the chat label to our custom font. This will make sure that its aligned to the BottomLeft and is the "secret" of our chatbox.
5. One easy action
Bevore we can continue with the chatbox we need a simple action to show/hide it for a specific player. This makes sense because the chatbox contains 2 dialogs and its a library and should be easy to use.
Create a new action named "show/hide chatbox" and set it up as follows:
6. Making it work
Ok so right now everything is set up but the chatbox doesnt do anything. To make it actually display chat messages we need 2 things: one custom action and one function.
Lets start with the action. Create a new action called "send chat message" and set it up as in the picture:
So, whats done right here?
You might ask yourself, why dont we just combine the newest chat message with the chat label text instead of using the array? The reason is that a label cant store an unlimited amount of text. So after some time the chatbox would simply stop working because the label is "full" and cant story any additional text. In addition, reading out the text of a label is kinda slow and not very good for performance.
The solution is to use a text array and resorting it each time when a chat message is entered. Sounds complex but is kinda simple:
Example:
Lets say a player types a chat message reading "test1". The array should look like this now:
chat message[0] = "test1"
chat message[1] = ""
chat message[2] = ""
...
Now he types a new message reading "test2". Now we need to resort the array, meaning that "test1" should be saved into chat message[1] and "test2" in chat message[0]. The array looks like this:
chat message[0] = "test2"
chat message[1] = "test1"
chat message[2] = ""
...
To achieve this we use a simple while loop that starts at the END of the array (this is important! dont start at the begining!) and then copies the value of the current loop index - 1 to the array with the current loop index. Basically that means:
chat message[49] = chat message[48]
chat message[48] = chat message[47]
chat message[47] = chat message[46]
...
At the end we just need to set the chat message[0] to the new message and we are done!
Now the array stores all chat messages and we can update the chat label text. Like this there will never be more than 50 messages displayed and its impossible to reach the text limit of a label (since each chat message has a limited size).
In order to update the label we need our custom function.
Create a new function called "get chatbox content" and set it up like this:
The function basically returns the entire text array in one bit and makes it easier for us to update the chatbox label.
7. Creating the triggers
Alright, the hard part is done. Now we just need to setup the triggers to make the chatbox work.
First off, we want each chat message to appear in the chatbox for sure.
In order to do this we create a new trigger, that just calls our custom action each time a chat message is entered:
Make sure to use the event "Game - Player Any Player types a chat message containing "", matching Partially" to catch EVERY chat message. This works because each message contains an empty string. :)
Right now, everything works already, except for scrolling.
Create a new trigger and set it up like this:
As you can see, with our chatbox concept the scrolling is very easy to do. We dont need to resort any arrays or set texts, we just move the label that stores all the text. Make sure to check if the label offset y is < 0 when scrolling down cause otherwise it will look dump.
Known issue of this is that you can scroll up infinitly long, thats because we cant detect how much text is filled into the chatbox and the only problem of our concept, whats acceptable in my opinion.
8. A few words on libraries
If you create libraries like this one, make sure to make all functions, trigger, actions and variables internal, except for the ones that should be accessable by the user later. For the chatbox, the user should just be able to use the 3 custom actions but not have access to the chatbox record variables or the triggers. This makes 1) the library more secure and 2) removes all the unneeded stuff from the gui function lists (for example when the user types "chatbox" in the search window of his trigger editor he WONT find the chatbox record, because its internal and can just be used by the library itself).
9. How to use the chatbox library in my map / How to set it up
If you want to use the library in your map, you just have to follow this 4 steps:
1. Import the custom font style file and follow the guide how to implement it in your map from step 1 in the guide.
2. Import the custom game ui file and follow the guide how to implement it in your map from step 1 in the guide.
3. Import the chatbox library.
4. Set up the chatbox by using the "init chatbox" action provided by the library, feel free to customize it as you like to and show it up by using "show/hide chatbox".
5. Enjoy!
10. Final Words
Please note that this is just a very basic example of a chatbox. You could for example add multiple tabs for it like team chat, combat log and so on, work with dialog styles to make it look much cooler or even add smileys to it (yes smileys! :) ). I just wanted to give a basic idea how it works and i hope it has helped some people to understand the mechanics of a custom RPG chatbox.