In part 1, we went over the basic building blocks of dialogs: constants and records. We used those building blocks to build a simple unit selection dialog. If you have not read part 1, I suggest you do so now before continuing.
In part 2, we're going to cover text styles heavily. I'm going to show how to leverage patch 1.2 to import custom styles, and then I'm going to edit the dialog from part 1 in order to demonstrate that our custom styles worked. Some elements that were planned for this tutorial have been moved back becase there's a lot to cover and this tutorial ran a little long.
The map for part 2 will be built on top of the tutorial map from part 1. If you do not already have the tutorial map for part 1, and you want to follow through this tutorial, I suggest you go back to part 1 and download the map attachment now.
Text Styles
Text styles control how text is displayed. It controls the font, font size, weight, color, and alignment. With the exception of color, if you want to change any of these text attributes, you're going to need to apply a text style.
There are two ways to apply text styles. They can be applied inline through <s> tags, as you may already be aware from using the standard text dialogs. You can also apply a text style to a dialog item, using the "Set Dialog Item Style" function.
Text Alignment and Dialog Items
Whenever possible, apply the text style to dialog item instead of using inline styles. Why? Inline styles ignore text alignment. You can't center text if it's part of a paragraph, so inline styles just ignore this information and use the rest of the style information. One of the most common questions I run into regarding dialogs: "I can't get my text to center. Why is that?" You can center text, but you can't do it with inline styles. You need to apply the style to the dialog item itself.
You can still use inline styles to vary text within a single dialog item. However, if you want all of the text to be centered (or bottom aligned, or any kind of alignment besides default), you're still going to need to apply a style to the dialog item.
Custom Styles
If you've been using styles for a while, then you know what a pain it can be to find a specific style you want. If you haven't been using them, just know that it's a pain, but I'm not going to cover it. Instead, I'm going to recommend another way that requires some initial work to be done, but will be much easier in the long run.
Patch 1.2 gave us the ability to (finally) create custom styles. This ability is so cool and so useful, I'm not even going to show you how to do it the other way. Previously, we were forced to use only the styles that came with the game. With this came the burden of trying to find a style that was just right. It was a pain, it was frustrating, but we don't have to do it any more. We can now create custom styles, so I suggest you do so. You will gain a great deal of flexibility as a result.
I wish I could tell you that creating custom styles was super easy, but it's not. It is fairly easy, but it's not as easy as it could be, and it requires a little initial leg work. To create custom styles, we're going to need to create our own .SC2Style file.
SC2Styles
To introduce yourself to SC2Styles, take a look at the first few sections of the default FontStyles.sc2style file that comes with the game. There's a lot there, but don't be overwhelmed. We're only interested in the first few sections, and we're not really interested in the details. We just want to understand the general structure of the thing:
The first section of the file is just a large comment block where they were nice enough to lay out all the style elements that can be defined. This will be useful to us later.
After that is a large group of constants. First, the fonts are defined as constants, then a few font sizes, then a whole bunch of colors. You can use these constants in your own custom styles.
Finally, it defines a few style templates. If you scroll through the file, you will notice that most (if not all) styles derive from these templates either directly or indirectly. When we build our styles, we will do the same. Personally, all of the custom styles I've built in the past have derived from either StandardExtendedTemplate (a fairly normal font) or HeaderExtendedTemplate (a bold font). It's also worth noting that you can build your own templates, which you can see demonstrated a number of times throughout this file.
Creating Our Own Style File
So now we need to use this information to create our own .sc2style file. We need ours to look a lot like this, but ours will be a lot smaller. Our styles will automatically derive from the default styles, so we don't need to redefine all these styles. We just need to define that additional custom styles that we want for our map. So let's build a couple of simple ones:
This is fairly basic, but you likely won't need to get much more complicated than this. I've defined two basic styles, a standard text style and a header style. The standard text uses the StandardExtendedTemplate, has a height of 16, and is white. The header style used the HeaderExtendedTemplate and has a height of 20. I did not set a text alignment for either style, on purpose. Generally, alignments change from one element to another and you can't really employ a "one style fits all" pattern. Instead, I think it's most useful to use these styles as template, and create some derivative styles that do define a text alignment:
Feel free to expand on this is you see fit, but we're going to stick with this for now. Whatever you arrive at, save the file as customstyles.sc2style, somewhere that you can find it again.
Importing Our SC2Style File
Import the sc2style file just like you would any other file. Hit F9 to open the Import window. Right click on the left panel and select "Import Files...". Find the folder you saved your sc2style file in, and make sure only that file is checked. You can give it a path if you want, but I just put it in the root personally. There's only going to be one. Hit OK, then save your map. Importing doesn't actually happen until you save your map.
There's one final step to adding custom styles to your map, in data. Open the data type Game UI Data. There's probably only two objects here, the one you want is "Default SC2 UI Settings". Edit the field "UI - Font Style Files" and add a new one, finding your customstyles.sc2style file. Now you should be able to use your styles. Save once more, just to be sure.
Using Our Custom Style
So now that we've imported our custom style, we want to test it. Currently, however, our dialog (from part 1) doesn't show any text. That's not a big deal. Let's use this opportunity to show how flexible our dialog really is. Will it be difficult to add a header to our dialog? Not at all.
More Dialog Constants
If we're going to add a header to our dialog, we'll need two more constants. First, we'll need the size (height) of the header line iteself. Then, we'll need to know how big the gap between that line and the rest of the dialog items will be.
We already have a gap constant, I am aware. But we may find that this gap needs to be a different size than the gap between buttons. Remember one thing about constants: if you have two constants, but you really just need them to be the same, it's no big deal. You can set one to equal the other. However, if you have one constant, but you really want there to be two, it can be much harder to break apart. We are going to err on the side of caution and just add another constant, even though it's probably going to end up being the same as our other gap.
So for the header height, we know that our header font size is 20. So I'm going to use 24 to give a little extra room. For the row gap, I'm going to use 4 (the same as the button gap). Remember, I don't have to spend a long time dwelling over picking the right number, because I can change it easily. I just need to try something, and if it doesn't work I'll try something else.
Open our map from part 1, and add the following constants to our Dialog Constants folder:
Now let's open up our "Unit Selection Dialog - Create" action. You may have already considered that we're going to need to recalculate a few things. Specifically, our dialog height is no longer correct. Also, we need the buttons to be drawn lower on the dialog. We're also going to need to do a simple calculation for our header width.
Let's start with the Dialog Height. What do you know, we made it an Arithmatic Multiple (Integer), so we can just add more stuff without having to rebuild our formula. That was some pretty good forethought if I do say so myself (I learned this the hard way so that hopefully you don't have to). So let's just add cHeader Height and cRow Gap to the bottom, so that our Dialog Height looks like this:
So that was pretty easy. The next step is fairly easy too. We can move our buttons down simply by changing the variable y. So let's make it equal to cDialog Border + cHeader Height + cRow Gap:
That's right, another Arithmatic Multiple (Integer). I'm a big fan.
If you were to test the map now, it'd look something like this:
(I changed cDialog Border back to 40, and cButton Gap back to 4).
So we really just gave ourselves enough room for our header, just by recalculating two values. That was pretty easy, wasn't it?
Now we need to think about the header itself. We know how tall it's going to be (cHeader Height), and we know where it will be positioned (cDialog Border, cDialog Border). But how wide will it be? Well, it's centered, so it can be as wide as the dialog itself, minus the borders. So basically, we need this variable:
HeaderWidth=(DialogWidth-cDialogExtra)<Integer>
This variable must be defined after Dialog Width, because it references it.
Finally the Label
So now, we can finally add a label to our dialog. We'll add it right after the second line, which saved the created dialog to a variable. We'll add the following code:
Dialog-Createalabelfordialog(Lastcreateddialog)withthedimensions(HeaderWidth,cHeaderHeight)anchoredtoTopLeftwithanoffsetof(cDialogBorder,cDialogBorder)withthetext"Select a Unit"colorsettoWhitetextwriteoutsettofalsewithawriteoutdurationof2.0Dialog-Set(Lastcreateddialogitem)styleto"HeaderCenterText"for(Allplayers)
After that, you can just hit run, and hopefully you'll see something like this:
Although, upon seeing this, I kind of wish the font was a little larger. So we're actually going to do that, because it's a good exercise.
Updating Custom Styles
If you want to make a change to a custom style, you need to change your sc2style file and re-import the file on top of the other one. So let's go back into our sc2style file, and...
It's at this point that I realize that I accidently set HeaderText to the standard template rather than the header template like I said. Still, it's still important to demonstrate how to update a custom style. We'll fix the typo now instead of me fixing it in my post. Anyways, I'd still like to make it a little larger, so we can do that now as well.
I tried a few values before arriving at 24. Feel free to experiment yourself. After each change, however, you need to reimport the file and save.
When you change the font size, you'll also need to change cHeader Height. Let's keep with the theme of having it be 4 larger than the font size, and make it 28.
Give it the old Ctrl+F9, and be greated by this handsome devil:
Conclusion
I hope you never know what it's like to have to search through FontStyles.sc2style (http://www.sc2mapster.com/api-docs/game-files/layout/font-styles-sc2style/) searching for a style that meets your needs. I hope that I have given you the tools so that you never need to do that. Instead, you should be able to wield your own sc2style files to meet your own needs.
Also, I hope that editing the dialog helped reinforce our use of constants and variables. Logistically, moving dialog items seems very difficult (and it can be, if the dialog is poorly planned). However, good planning allowed us to do so quite easily.
Is it possible to change the font and size of a dialog label if it's an
integer value (via convert integer to text)?
Absolutely. Once you convert it to text, its not really an integer value anyways. It's now text. You can do anything to it that you can do to any other text.
Rollback Post to RevisionRollBack
Pocket Warriors - A pokemon-style game with SC2 units and full banking. New demo coming soon!
Hoping you can help me with a quick problem, I'm very bad at any form of code so bear with me. I made a custom style for a map and it works properly, but I always get the following error message when the map loads:
HEy i make simple dialogues all the time, but i was wondering if i could replace plart 1 with just a normal dialog without constants and stuff? with just the 7 variables of 6 of them being dialog items and 1 being the dialog?
Text Styles, Custom Styles, and Making Dialog Changes
Introduction
In part 1, we went over the basic building blocks of dialogs: constants and records. We used those building blocks to build a simple unit selection dialog. If you have not read part 1, I suggest you do so now before continuing.
In part 2, we're going to cover text styles heavily. I'm going to show how to leverage patch 1.2 to import custom styles, and then I'm going to edit the dialog from part 1 in order to demonstrate that our custom styles worked. Some elements that were planned for this tutorial have been moved back becase there's a lot to cover and this tutorial ran a little long.
The map for part 2 will be built on top of the tutorial map from part 1. If you do not already have the tutorial map for part 1, and you want to follow through this tutorial, I suggest you go back to part 1 and download the map attachment now.
Text Styles
Text styles control how text is displayed. It controls the font, font size, weight, color, and alignment. With the exception of color, if you want to change any of these text attributes, you're going to need to apply a text style.
There are two ways to apply text styles. They can be applied inline through <s> tags, as you may already be aware from using the standard text dialogs. You can also apply a text style to a dialog item, using the "Set Dialog Item Style" function.
Text Alignment and Dialog Items
Whenever possible, apply the text style to dialog item instead of using inline styles. Why? Inline styles ignore text alignment. You can't center text if it's part of a paragraph, so inline styles just ignore this information and use the rest of the style information. One of the most common questions I run into regarding dialogs: "I can't get my text to center. Why is that?" You can center text, but you can't do it with inline styles. You need to apply the style to the dialog item itself.
You can still use inline styles to vary text within a single dialog item. However, if you want all of the text to be centered (or bottom aligned, or any kind of alignment besides default), you're still going to need to apply a style to the dialog item.
Custom Styles
If you've been using styles for a while, then you know what a pain it can be to find a specific style you want. If you haven't been using them, just know that it's a pain, but I'm not going to cover it. Instead, I'm going to recommend another way that requires some initial work to be done, but will be much easier in the long run.
Patch 1.2 gave us the ability to (finally) create custom styles. This ability is so cool and so useful, I'm not even going to show you how to do it the other way. Previously, we were forced to use only the styles that came with the game. With this came the burden of trying to find a style that was just right. It was a pain, it was frustrating, but we don't have to do it any more. We can now create custom styles, so I suggest you do so. You will gain a great deal of flexibility as a result.
I wish I could tell you that creating custom styles was super easy, but it's not. It is fairly easy, but it's not as easy as it could be, and it requires a little initial leg work. To create custom styles, we're going to need to create our own .SC2Style file.
SC2Styles
To introduce yourself to SC2Styles, take a look at the first few sections of the default FontStyles.sc2style file that comes with the game. There's a lot there, but don't be overwhelmed. We're only interested in the first few sections, and we're not really interested in the details. We just want to understand the general structure of the thing:
http://www.sc2mapster.com/api-docs/game-files/layout/font-styles-sc2style/
The first section of the file is just a large comment block where they were nice enough to lay out all the style elements that can be defined. This will be useful to us later.
After that is a large group of constants. First, the fonts are defined as constants, then a few font sizes, then a whole bunch of colors. You can use these constants in your own custom styles.
Finally, it defines a few style templates. If you scroll through the file, you will notice that most (if not all) styles derive from these templates either directly or indirectly. When we build our styles, we will do the same. Personally, all of the custom styles I've built in the past have derived from either StandardExtendedTemplate (a fairly normal font) or HeaderExtendedTemplate (a bold font). It's also worth noting that you can build your own templates, which you can see demonstrated a number of times throughout this file.
Creating Our Own Style File
So now we need to use this information to create our own .sc2style file. We need ours to look a lot like this, but ours will be a lot smaller. Our styles will automatically derive from the default styles, so we don't need to redefine all these styles. We just need to define that additional custom styles that we want for our map. So let's build a couple of simple ones:
Typo left intentionally.
This is fairly basic, but you likely won't need to get much more complicated than this. I've defined two basic styles, a standard text style and a header style. The standard text uses the StandardExtendedTemplate, has a height of 16, and is white. The header style used the HeaderExtendedTemplate and has a height of 20. I did not set a text alignment for either style, on purpose. Generally, alignments change from one element to another and you can't really employ a "one style fits all" pattern. Instead, I think it's most useful to use these styles as template, and create some derivative styles that do define a text alignment:
Feel free to expand on this is you see fit, but we're going to stick with this for now. Whatever you arrive at, save the file as customstyles.sc2style, somewhere that you can find it again.
Importing Our SC2Style File
Import the sc2style file just like you would any other file. Hit F9 to open the Import window. Right click on the left panel and select "Import Files...". Find the folder you saved your sc2style file in, and make sure only that file is checked. You can give it a path if you want, but I just put it in the root personally. There's only going to be one. Hit OK, then save your map. Importing doesn't actually happen until you save your map.
There's one final step to adding custom styles to your map, in data. Open the data type Game UI Data. There's probably only two objects here, the one you want is "Default SC2 UI Settings". Edit the field "UI - Font Style Files" and add a new one, finding your customstyles.sc2style file. Now you should be able to use your styles. Save once more, just to be sure.
Using Our Custom Style
So now that we've imported our custom style, we want to test it. Currently, however, our dialog (from part 1) doesn't show any text. That's not a big deal. Let's use this opportunity to show how flexible our dialog really is. Will it be difficult to add a header to our dialog? Not at all.
More Dialog Constants
If we're going to add a header to our dialog, we'll need two more constants. First, we'll need the size (height) of the header line iteself. Then, we'll need to know how big the gap between that line and the rest of the dialog items will be.
We already have a gap constant, I am aware. But we may find that this gap needs to be a different size than the gap between buttons. Remember one thing about constants: if you have two constants, but you really just need them to be the same, it's no big deal. You can set one to equal the other. However, if you have one constant, but you really want there to be two, it can be much harder to break apart. We are going to err on the side of caution and just add another constant, even though it's probably going to end up being the same as our other gap.
So for the header height, we know that our header font size is 20. So I'm going to use 24 to give a little extra room. For the row gap, I'm going to use 4 (the same as the button gap). Remember, I don't have to spend a long time dwelling over picking the right number, because I can change it easily. I just need to try something, and if it doesn't work I'll try something else.
Open our map from part 1, and add the following constants to our Dialog Constants folder:
Additional and Re- Calculations
Now let's open up our "Unit Selection Dialog - Create" action. You may have already considered that we're going to need to recalculate a few things. Specifically, our dialog height is no longer correct. Also, we need the buttons to be drawn lower on the dialog. We're also going to need to do a simple calculation for our header width.
Let's start with the Dialog Height. What do you know, we made it an Arithmatic Multiple (Integer), so we can just add more stuff without having to rebuild our formula. That was some pretty good forethought if I do say so myself (I learned this the hard way so that hopefully you don't have to). So let's just add cHeader Height and cRow Gap to the bottom, so that our Dialog Height looks like this:
So that was pretty easy. The next step is fairly easy too. We can move our buttons down simply by changing the variable y. So let's make it equal to cDialog Border + cHeader Height + cRow Gap:
That's right, another Arithmatic Multiple (Integer). I'm a big fan.
If you were to test the map now, it'd look something like this:
(I changed cDialog Border back to 40, and cButton Gap back to 4).
So we really just gave ourselves enough room for our header, just by recalculating two values. That was pretty easy, wasn't it?
Now we need to think about the header itself. We know how tall it's going to be (cHeader Height), and we know where it will be positioned (cDialog Border, cDialog Border). But how wide will it be? Well, it's centered, so it can be as wide as the dialog itself, minus the borders. So basically, we need this variable:
This variable must be defined after Dialog Width, because it references it.
Finally the Label
So now, we can finally add a label to our dialog. We'll add it right after the second line, which saved the created dialog to a variable. We'll add the following code:
After that, you can just hit run, and hopefully you'll see something like this:
Although, upon seeing this, I kind of wish the font was a little larger. So we're actually going to do that, because it's a good exercise.
Updating Custom Styles
If you want to make a change to a custom style, you need to change your sc2style file and re-import the file on top of the other one. So let's go back into our sc2style file, and...
It's at this point that I realize that I accidently set HeaderText to the standard template rather than the header template like I said. Still, it's still important to demonstrate how to update a custom style. We'll fix the typo now instead of me fixing it in my post. Anyways, I'd still like to make it a little larger, so we can do that now as well.
I tried a few values before arriving at 24. Feel free to experiment yourself. After each change, however, you need to reimport the file and save.
When you change the font size, you'll also need to change cHeader Height. Let's keep with the theme of having it be 4 larger than the font size, and make it 28.
Give it the old Ctrl+F9, and be greated by this handsome devil:
Conclusion
I hope you never know what it's like to have to search through FontStyles.sc2style (http://www.sc2mapster.com/api-docs/game-files/layout/font-styles-sc2style/) searching for a style that meets your needs. I hope that I have given you the tools so that you never need to do that. Instead, you should be able to wield your own sc2style files to meet your own needs.
Also, I hope that editing the dialog helped reinforce our use of constants and variables. Logistically, moving dialog items seems very difficult (and it can be, if the dialog is poorly planned). However, good planning allowed us to do so quite easily.
wow, i had no idea you could center text, i always just typed out the style and just assumed it would never work, thanks for the tutorial
also, i dont know if you mentioned it or not, but you can import your own custom font into a map too
Is it possible to change the font and size of a dialog label if it's an integer value (via convert integer to text)?
Absolutely. Once you convert it to text, its not really an integer value anyways. It's now text. You can do anything to it that you can do to any other text.
Just want to say thank you for the great work and tutorial, works like a charm!!
Right, and in which program do I create a "*.sc2style" file?
@Xtremedesyr: Go
I use notepad. You can use a program specifically designed for XML files if you wanted. Any program you can modify a text document in will work.
Updated downloadable map to reflect the changes made to part 1 (http://forums.sc2mapster.com/resources/tutorials/17969-dialogs-really-great-looking-dialogs-part-1/?page=2#p25). This also required a slight change to tutorial with regards to how the dialog height is calculated.
@jaminv: Go
Hoping you can help me with a quick problem, I'm very bad at any form of code so bear with me. I made a custom style for a map and it works properly, but I always get the following error message when the map loads:
No font set for: [BaseTemplate]
My style file looks like this:
Any thoughts on how to prevent the error message from occuring?
Also your link to the list of sc2 font styles no longer works.
HEy i make simple dialogues all the time, but i was wondering if i could replace plart 1 with just a normal dialog without constants and stuff? with just the 7 variables of 6 of them being dialog items and 1 being the dialog?
Why not just use Set dialog title?