Author Topic: Ingame font color change, and more visible words in movie clips tutorial.  (Read 4599 times)

Offline FlyingGrass

  • ~🛠 The avant-garde doctor of mechanical beings. 🔧 🔬
  • Elder Grey Pelt
  • ****
  • Posts: 2,516
  • Country: 00
  • Floof-O-Meter: 121
  • Avatar=Me|Signature=Me
    • FlyingGrass
    • channel/UCA7RfqQ1KLl4s8JhxIXNs_Q
    • View Profile
    • Mechanicafeles Discord link
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!
I am updating my future interface re-textures.



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
« Last Edit: October 15, 2018, 08:21:52 am by FlyingGrass »

My presets.

Good things take time, so I'll take an eternity and create something so good that the human brain can't handle the sheer goodness of it.

Offline Bloo.

  • Space-Child ✌
  • Moderator
  • Elder Grey Pelt
  • *****
  • Posts: 2,657
  • Country: us
  • Floof-O-Meter: 191
  • nyoom
    • Bloopaloozer
    • Bloopalooza FH
    • aLittleProzium
    • Bloopalooza
    • View Profile
    • DeviantArt
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


You are amazing <3

Offline FlyingGrass

  • ~🛠 The avant-garde doctor of mechanical beings. 🔧 🔬
  • Elder Grey Pelt
  • ****
  • Posts: 2,516
  • Country: 00
  • Floof-O-Meter: 121
  • Avatar=Me|Signature=Me
    • FlyingGrass
    • channel/UCA7RfqQ1KLl4s8JhxIXNs_Q
    • View Profile
    • Mechanicafeles Discord link
Thank you for reminding me! ;D

My presets.

Good things take time, so I'll take an eternity and create something so good that the human brain can't handle the sheer goodness of it.

Erranti

  • Guest
Nice job

Offline Panzram

  • Reject false icons
  • Pack & Pride Representative
  • ****
  • Posts: 1,102
  • Country: 00
  • Floof-O-Meter: 95
  • Chai tea addict
    • Koicrow
    • View Profile
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


In-game user: Panzramic

Offline FlyingGrass

  • ~🛠 The avant-garde doctor of mechanical beings. 🔧 🔬
  • Elder Grey Pelt
  • ****
  • Posts: 2,516
  • Country: 00
  • Floof-O-Meter: 121
  • Avatar=Me|Signature=Me
    • FlyingGrass
    • channel/UCA7RfqQ1KLl4s8JhxIXNs_Q
    • View Profile
    • Mechanicafeles Discord link
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).

My presets.

Good things take time, so I'll take an eternity and create something so good that the human brain can't handle the sheer goodness of it.

Offline Azurain

  • 🍃🍃🍃🍃🍃
  • Member Of The Season
  • Elder Grey Pelt
  • ***
  • Posts: 3,287
  • Country: us
  • Floof-O-Meter: 183
  • an actual forest gremlin
    • lark-bird
    • View Profile
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! ^^

Offline Kuri

  • Immortal Legend
  • *****
  • Posts: 8,168
  • Country: nz
  • Floof-O-Meter: 136
  • Foreboding evil harmless kitten.
    • dumbstuff4friends
    • channel/UCo42jgbLvEzkofpOin0_a4A
    • View Profile
Concept is good. i looked at the example codes side by side and am having trouble finding the parts that were changed.
The Japanese concept of wabisabi:
The closest concept in english would be 'rustic'
They might have an old thing, one example is a favourite bowl or dish, it's broken, pieces are missing, why fix it?  With gold and pieces from other dishes?
"Because it was my favourite & I like it"

Offline Jango_Fett

  • Solid Snake
  • Ancient Silver Mane
  • *****
  • Posts: 4,113
  • Country: ee
  • Floof-O-Meter: 134
  • rotten kind of cute
    • euralore
    • EmpressWolf
    • littlemisscancer
    • parahyena
    • LM_Cancer
    • View Profile
    • Picarto.tv
oh god bless


you are an angel

i don't know nothing about mopeds
feral_cast.fhm
have a question? just ask - Rubricae#6972

Offline FlyingGrass

  • ~🛠 The avant-garde doctor of mechanical beings. 🔧 🔬
  • Elder Grey Pelt
  • ****
  • Posts: 2,516
  • Country: 00
  • Floof-O-Meter: 121
  • Avatar=Me|Signature=Me
    • FlyingGrass
    • channel/UCA7RfqQ1KLl4s8JhxIXNs_Q
    • View Profile
    • Mechanicafeles Discord link
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
}

« Last Edit: October 15, 2018, 08:14:43 am by FlyingGrass »

My presets.

Good things take time, so I'll take an eternity and create something so good that the human brain can't handle the sheer goodness of it.