Print Page - Ingame font color change, and more visible words in movie clips tutorial.

Help & Guidance => Member Made Tutorials => Modding & Meshing Tutorials => Topic started by: FlyingGrass on January 14, 2018, 06:03:07 pm

Title: Ingame font color change, and more visible words in movie clips tutorial.
Post by: FlyingGrass on January 14, 2018, 06:03:07 pm

Is an interface re-texture so bright that you can't see the default color words? Always thinking there's more words in movie clips than what you see? This tutorial may help!

First, go into C:>FeralHeart>Media>Overlays>Overlays1

Then find Templates1 file and open it, scroll down a little bit. The default file looks like this:

Code: [Select]

template container BorderPanel(GuiTemplate/BorderPanel)
{
    left 0
    top 0
    width 1
    height 1

    material GuiMat/PanelCenter
    border_size 0.02 0.02 0.02 0.02
    border_material GuiMat/PanelBorder
    border_topleft_uv 0 0 0.043 0.043
    border_top_uv 0.043 0 0.957 0.043
    border_topright_uv 0.957 0 1 0.043
    border_left_uv 0 0.043 0.043 0.957
    border_right_uv 0.957 0.043 1 0.957
    border_bottomleft_uv 0 0.957 0.043 1
    border_bottom_uv 0.043 0.957 0.957 1
    border_bottomright_uv 0.957 0.957 1 1
}
template element TextArea(GuiTemplate/BasicText)
{
    font_name Tahoma
    char_height 0.03
 colour_top 1 1 1
 colour_bottom 1 1 1
    left 0.005
    top 0.005
}
template element TextArea(GuiTemplate/BasicText2)
{
    font_name Tahoma
    char_height 0.03
 colour_top 1 1 1
 colour_bottom 1 1 1
    left -0.01
    top 0.005
    alignment right
    horz_align right
}
template element TextArea(GuiTemplate/LargeText)
{
    font_name TempusSans
    char_height 0.05
 colour_top 1 1 1
 colour_bottom 1 1 1
    left 0.005
    top 0.005
}
template element TextArea(GuiTemplate/VeryLargeText)
{
    font_name TempusSans
    char_height 0.075
 colour_top 1 0.647059 0
 colour_bottom 1 0.843137 0
    left 0
    top -0.036
    alignment center
    horz_align center
    vert_align center
}
template element TextArea(GuiTemplate/CenteredText)
{
    font_name BlueHighway
    char_height 0.03
 colour_top 1 1 1
 colour_bottom 1 1 1
    left 0
    top -0.0125
    alignment center
    horz_align center
    vert_align center
}
template element TextArea(GuiTemplate/TextFieldText)
{
    font_name Tahoma
    metrics_mode pixels
    //char_height 0.03
    char_height 24
 colour_top 1 1 1
 colour_bottom 1 1 1
    //left 0.01
    //top 0.005
    left 6
    top 2
}
template element TextArea(GuiTemplate/SmallCenteredText)
{
    font_name BlueHighway
    char_height 0.025
 colour_top 1 1 1
 colour_bottom 1 1 1
    left 0
    top -0.01
    alignment center
    horz_align center
    vert_align center
}
template container Panel(GuiTemplate/Button)
{
    material GuiMat/ButtonUp
}
template container Panel(GuiTemplate/TextField)
{
    material GuiMat/TextField
}
template container Panel(GuiTemplate/TextArea)
{
    material GuiMat/TextArea
}
template container Panel(GuiTemplate/TextComponent)
{
}
template container Panel(GuiTemplate/Slider)
{
    width 0.02
    height 0.02
    material GuiMat/Slider
}
template container Panel(GuiTemplate/Sizer)
{
    material GuiMat/Sizer
}
template container Panel(GuiTemplate/SliderMarker)
{
    material GuiMat/SliderMarkerUp
}
template container Panel(GuiTemplate/Mover)
{
    height 0.04
    material GuiMat/Mover
}
template container Panel(GuiTemplate/ArrowLeftButton)
{
    left 0.05
    top 0
    width 0.05
    height 0.05
    material GuiMat/ButtonUp
}
template container Panel(GuiTemplate/ArrowRightButton)
{
    left 0.4
    top 0
    width 0.05
    height 0.05
    material GuiMat/ButtonUp
}
template element TextArea(GuiTemplate/ArrowLeftButtonText)
{
    font_name BlueHighway
    char_height 0.1
 colour_top 1 1 1
 colour_bottom 1 1 1
    left 0
    top -0.03
    width 0.12
    height 0.09
    alignment center
    horz_align center
    vert_align center
    caption <
}
template element TextArea(GuiTemplate/ArrowRightButtonText)
{
    font_name BlueHighway
    char_height 0.1
 colour_top 1 1 1
 colour_bottom 1 1 1
    left 0.005
    top -0.03
    width 0.12
    height 0.09
    alignment center
    horz_align center
    vert_align center
    caption >
}
template container Panel(GuiTemplate/CheckBox)
{
    left 0
    top 0
    width 0.025
    height 0.03
    material GuiMat/CheckBoxUpFalse
}
template container Panel(GuiTemplate/ScrollerMarker)
{
    material GuiMat/ButtonUp
}
template container Panel(GuiTemplate/Highlight)
{
    left 0
    top 0
    material GuiMat/Highlight
}
template container Panel(GuiTemplate/Tab)
{
    material GuiMat/TabDown
}
template element TextArea(GuiTemplate/ArrowLText)
{
 font_name BlueHighway
 char_height 0.06
 colour 1 1 1
 top -0.02
 alignment center
 horz_align center
 vert_align center
 caption <
}
template element TextArea(GuiTemplate/ArrowRText)
{
 font_name BlueHighway
 char_height 0.06
 colour 1 1 1
 top -0.02
 alignment center
 horz_align center
 vert_align center
 caption >
}
template container Panel(GuiTemplate/Partition)
{
 left 0.01
 height 0.01
 material GuiMat/Partition
}
template container Panel(GuiTemplate/Map)
{
    material GuiMat/Slider
}
template container Panel(GuiTemplate/MapMarker)
{
    width 0.02
    height 0.02
    material GuiMat/ButtonUp
}

But you should focus on the parts that say stuff about text.

For movie clips, put this code in replacing all the other text in the file.

Code: [Select]

template container BorderPanel(GuiTemplate/BorderPanel)
{
    left 0
    top 0
    width 1
    height 1

    material GuiMat/PanelCenter
    border_size 0.02 0.02 0.02 0.02
    border_material GuiMat/PanelBorder
    border_topleft_uv 0 0 0.043 0.043
    border_top_uv 0.043 0 0.957 0.043
    border_topright_uv 0.957 0 1 0.043
    border_left_uv 0 0.043 0.043 0.957
    border_right_uv 0.957 0.043 1 0.957
    border_bottomleft_uv 0 0.957 0.043 1
    border_bottom_uv 0.043 0.957 0.957 1
    border_bottomright_uv 0.957 0.957 1 1
}
template element TextArea(GuiTemplate/BasicText)
{
    font_name Tahoma
    char_height 0.03
 colour_top 1 1 1
 colour_bottom 1 1 1
    left 0.005
    top 0.005
}
template element TextArea(GuiTemplate/BasicText2)
{
    font_name Tahoma
    char_height 0.03
 colour_top 1 1 1
 colour_bottom 1 1 1
    left -0.01
    top 0.005
    alignment right
    horz_align right
}
template element TextArea(GuiTemplate/LargeText)
{
    font_name TempusSans
    char_height 0.05
 colour_top 1 1 1
 colour_bottom 1 1 1
    left 0.005
    top 0.005
}
template element TextArea(GuiTemplate/VeryLargeText)
{
    font_name TempusSans
    char_height 0.075
 colour_top 1 0.647059 0
 colour_bottom 1 0.843137 0
    left 0
    top -0.80
    alignment center
    horz_align center
    vert_align center
}
template element TextArea(GuiTemplate/CenteredText)
{
    font_name BlueHighway
    char_height 0.03
 colour_top 1 1 1
 colour_bottom 1 1 1
    left 0
    top -0.0125
    alignment center
    horz_align center
    vert_align center
}
template element TextArea(GuiTemplate/TextFieldText)
{
    font_name Tahoma
    metrics_mode pixels
    //char_height 0.03
    char_height 24
 colour_top 1 1 1
 colour_bottom 1 1 1
    //left 0.01
    //top 0.005
    left 6
    top 2
}
template element TextArea(GuiTemplate/SmallCenteredText)
{
    font_name BlueHighway
    char_height 0.025
 colour_top 1 1 1
 colour_bottom 1 1 1
    left 0
    top -0.01
    alignment center
    horz_align center
    vert_align center
}
template container Panel(GuiTemplate/Button)
{
    material GuiMat/ButtonUp
}
template container Panel(GuiTemplate/TextField)
{
    material GuiMat/TextField
}
template container Panel(GuiTemplate/TextArea)
{
    material GuiMat/TextArea
}
template container Panel(GuiTemplate/TextComponent)
{
}
template container Panel(GuiTemplate/Slider)
{
    width 0.02
    height 0.02
    material GuiMat/Slider
}
template container Panel(GuiTemplate/Sizer)
{
    material GuiMat/Sizer
}
template container Panel(GuiTemplate/SliderMarker)
{
    material GuiMat/SliderMarkerUp
}
template container Panel(GuiTemplate/Mover)
{
    height 0.04
    material GuiMat/Mover
}
template container Panel(GuiTemplate/ArrowLeftButton)
{
    left 0.05
    top 0
    width 0.05
    height 0.05
    material GuiMat/ButtonUp
}
template container Panel(GuiTemplate/ArrowRightButton)
{
    left 0.4
    top 0
    width 0.05
    height 0.05
    material GuiMat/ButtonUp
}
template element TextArea(GuiTemplate/ArrowLeftButtonText)
{
    font_name BlueHighway
    char_height 0.1
 colour_top 1 1 1
 colour_bottom 1 1 1
    left 0
    top -0.03
    width 0.12
    height 0.09
    alignment center
    horz_align center
    vert_align center
    caption <
}
template element TextArea(GuiTemplate/ArrowRightButtonText)
{
    font_name BlueHighway
    char_height 0.1
 colour_top 1 1 1
 colour_bottom 1 1 1
    left 0.005
    top -0.03
    width 0.12
    height 0.09
    alignment center
    horz_align center
    vert_align center
    caption >
}
template container Panel(GuiTemplate/CheckBox)
{
    left 0
    top 0
    width 0.025
    height 0.03
    material GuiMat/CheckBoxUpFalse
}
template container Panel(GuiTemplate/ScrollerMarker)
{
    material GuiMat/ButtonUp
}
template container Panel(GuiTemplate/Highlight)
{
    left 0
    top 0
    material GuiMat/Highlight
}
template container Panel(GuiTemplate/Tab)
{
    material GuiMat/TabDown
}
template element TextArea(GuiTemplate/ArrowLText)
{
 font_name BlueHighway
 char_height 0.06
 colour 1 1 1
 top -0.02
 alignment center
 horz_align center
 vert_align center
 caption <
}
template element TextArea(GuiTemplate/ArrowRText)
{
 font_name BlueHighway
 char_height 0.06
 colour 1 1 1
 top -0.02
 alignment center
 horz_align center
 vert_align center
 caption >
}
template container Panel(GuiTemplate/Partition)
{
 left 0.01
 height 0.01
 material GuiMat/Partition
}
template container Panel(GuiTemplate/Map)
{
    material GuiMat/Slider
}
template container Panel(GuiTemplate/MapMarker)
{
    width 0.02
    height 0.02
    material GuiMat/ButtonUp
}

The text will be put where you see the red text in these screenshots:

Screenshots. Warning! These screenshots contain red on green that may hurt the eyes of some!

In the Templates2 file, you can change the color of the font in the nametags.

Coloring the font is done by finding the lines
   colour_top 1 1 1
   colour_bottom 1 1 1
And change them.
Those lines work as follows:
   colour_top (Red) (Green) (Blue)
   colour_bottom (Red) (Green) (Blue)

Credit to Bloo for helping me with the color codes and finding which font is the movie clip font!

Links to color codes:https://www.tug.org/pracjourn/2007-4/walden/color.pdf (http://https://www.tug.org/pracjourn/2007-4/walden/color.pdf)

Title: Re: Ingame font color change, and more visible words in movie clips tutorial.
Post by: Bloo. on January 14, 2018, 06:06:15 pm

Wonderful! You may want to include links to some of the MATLAB sites that give the number codes for different colors, but I think this will help a lot of people!

Try this one: https://www.tug.org/pracjourn/2007-4/walden/color.pdf

Title: Re: Ingame font color change, and more visible words in movie clips tutorial.
Post by: FlyingGrass on January 14, 2018, 06:19:11 pm

Thank you for reminding me! ;D

Title: Re: Ingame font color change, and more visible words in movie clips tutorial.
Post by: Erranti on January 14, 2018, 06:40:56 pm

Nice job

Title: Re: Ingame font color change, and more visible words in movie clips tutorial.
Post by: Panzram on January 14, 2018, 08:57:23 pm

Wonderful tutorial! I'm sure this will come in handy for many interface creators or even for those just looking to customize their own game. And ahh, I'm relieved to see a solution for showing the rest of those longer movie clip messages. Thank you for sharing. <3

Title: Re: Ingame font color change, and more visible words in movie clips tutorial.
Post by: FlyingGrass on January 15, 2018, 10:24:01 am

Thank you, both!

Also! In the Templates2 file, you can change the color of the font in the nametags(Those rectangles that show the character name and username).

Title: Re: Ingame font color change, and more visible words in movie clips tutorial.
Post by: Azurain on January 15, 2018, 03:09:35 pm

Really nice Gui! I honestly didn't even know you could change the font colors. Or I did and forgot. That's a possibility. Anyways, great job! ^^

Title: Re: Ingame font color change, and more visible words in movie clips tutorial.
Post by: Kuri on January 15, 2018, 06:32:27 pm

Concept is good. i looked at the example codes side by side and am having trouble finding the parts that were changed.

Title: Re: Ingame font color change, and more visible words in movie clips tutorial.
Post by: Jango_Fett on January 15, 2018, 06:50:06 pm

oh god bless

you are an angel

Title: Re: Ingame font color change, and more visible words in movie clips tutorial.
Post by: FlyingGrass on January 15, 2018, 07:06:08 pm

Thank you!

For a long time, I was thinking it was an image, until I came across this code file and looked through it thinking it was a material file, whilst searching for the file name of an image it would use, there was no image though.

The change is here:

template element TextArea(GuiTemplate/VeryLargeText)
{
font_name TempusSans
char_height 0.075
colour_top 1 0.647059 0
colour_bottom 1 0.843137 0
left 0
top -0.036
alignment center
horz_align center
vert_align center
}

template element TextArea(GuiTemplate/VeryLargeText)
{
font_name TempusSans
char_height 0.075
colour_top 1 0.647059 0
colour_bottom 1 0.843137 0
left 0
top -0.80
alignment center
horz_align center
vert_align center
}

Feral Heart

Help & Guidance => Member Made Tutorials => Modding & Meshing Tutorials => Topic started by: FlyingGrass on January 14, 2018, 06:03:07 pm