anything related to UI in general, splash screens, UI widgets, input and output etc.

Add New Font to UI

Add New Font to UI

Postby Shando » 17 Aug 2015, 08:44

Hi All,

I'm trying to add a new font to my UI, but get loads of errors like this:

Code: Select all
WARNING:No font face defined on element #text < div#btn_Q3-HC < div#buttoncell_2C < div#main-button-container:hover < div#main-Hud-container:hover < body#FPS_Hud1:focus:hover < #root#guiEditorContext:hover. Please specify a font-family in your RCSS.


I have this in my rml file:

Code: Select all
body{
    font-family: Alagard;
    font-weight: normal;
    font-style: normal;
    font-size:24px;
    color: #69c9e9FF;
}


The font is called Alagard.otf, and it's family is called "Alagard" (checked with dp4 Font Viewer). I have placed the font in both the GUI folder of my Scene, and in the main "Asset Library/GUI/fonts" folder.

Any help would be greatly appreciated.

Regards

Shando

PS: I've also installed it on my laptop.

Sorry, forgot to add that you swap between the GUIs as follows:

Code: Select all
if ( lang == "arSA" ) then
   if ( guiID_AR ~= "X" ) then
      guiID_Cur = guiID_AR;
      gui.show ( guiID_Cur, guiID_Cur );
   else
      guiID_AR = gui.load ( "Chat_HUD_AR.rml", 0, 0 );
      guiID_Cur = guiID_AR;
   end
else
   if ( guiID ~= "X" ) then
      guiID_Cur = guiID;
      gui.show ( guiID_Cur, guiID_Cur );
   else
      guiID = gui.load ( "Chat_HUD.rml", 0, 0 );
      guiID_Cur = guiID;
   end
end


The check for "X" is used so that you only create the GUI once, and simply "show" or "hide" each GUI once created. I have also used separate "guiIDs" for each required GUI (guiID = European, guiID_AR = Arabic in this example).

"guiID_Cur" is used to denote the current GUI.
Alienware 17 (i7-4700MQ 2.4GHz 16GB GTX770M Win 10 64)

Love, Hope, Strength http://www.lovehopestrength.co.uk
User avatar
Shando
Skyline Moderator
Skyline Moderator
 
Posts: 492
Joined: 06 Mar 2013, 22:35
Location: Kings Beach, Queensland
Skill: Programmer
Skill: Scripter
Skill: Level Designer

Re: Add New Font to UI

Postby SolarPortal » 17 Aug 2015, 10:17

have you tried placing it in a fonts folder of the actual GUI folder.
Then make sure that he family doesnt require any other text to go with like arial or helvetica does.

Also make sure to add to your resources :)
Skyline Game Engine - Lead Dev.
Please provide as much info as possible when asking for help.


Specs: OS: Win 10 64bit, CPU: Intel i7 3770 3.4ghz x 4 core(8 threads), GPU: Nvidia GTX 1060 6GB, Ram: 16gig DDR3, Windows on 250gb Samsung Evo 860

Twitter: @SolarPortal
Instagram: @SolarPortal
User avatar
SolarPortal
Skyline Founder
Skyline Founder
 
Posts: 3203
Joined: 29 Jul 2012, 15:56
Location: UK
Skill: 3D Modeller
Skill: 2D Artist
Skill: Programmer
Skill: Level Designer

Re: Add New Font to UI

Postby Shando » 17 Aug 2015, 14:56

Hi SP,

have you tried placing it in a fonts folder of the actual GUI folder.


That was it :D The font works fine now.

Thanks

Shando
Alienware 17 (i7-4700MQ 2.4GHz 16GB GTX770M Win 10 64)

Love, Hope, Strength http://www.lovehopestrength.co.uk
User avatar
Shando
Skyline Moderator
Skyline Moderator
 
Posts: 492
Joined: 06 Mar 2013, 22:35
Location: Kings Beach, Queensland
Skill: Programmer
Skill: Scripter
Skill: Level Designer

Re: Add New Font to UI

Postby SolarPortal » 17 Aug 2015, 15:39

good good :)
Skyline Game Engine - Lead Dev.
Please provide as much info as possible when asking for help.


Specs: OS: Win 10 64bit, CPU: Intel i7 3770 3.4ghz x 4 core(8 threads), GPU: Nvidia GTX 1060 6GB, Ram: 16gig DDR3, Windows on 250gb Samsung Evo 860

Twitter: @SolarPortal
Instagram: @SolarPortal
User avatar
SolarPortal
Skyline Founder
Skyline Founder
 
Posts: 3203
Joined: 29 Jul 2012, 15:56
Location: UK
Skill: 3D Modeller
Skill: 2D Artist
Skill: Programmer
Skill: Level Designer

Re: Add New Font to UI

Postby TattieBoJangle » 03 Nov 2015, 03:13

If you use font-family: Noto Sans CJK KR; instead of font-family: Noto Sans CJK KR Bold;

It will work ;)
Case: CM Storm Trooper CPU: I7 5930k X99 Cooler: Noctua NH-D15 Graphics: Asus GTX 1080 Motherboard: Rampage Extreme V x99 Ram: RipJaws DDR4 3000mhz Storage: x2 SSD Crucial 500GB + x5 2TB Hdd PSU: Evga 1500w OS: Windows 10
User avatar
TattieBoJangle
Community Manager
Community Manager
 
Posts: 858
Joined: 26 Jan 2015, 00:15
Location: United Kingdom
Skill: 3D Modeller
Skill: 2D Artist
Skill: Level Designer
Skill: Great creative

Re: Add New Font to UI

Postby Shando » 03 Nov 2015, 03:29

Hi Tattie,

Thanks for that, I did manage to get it working, BUT I now can't seem to change fonts dynamically :(

I'm trying to use the "gui.setFontFamily ( "chat_HUD", "lbl_talk_C", myFont );" command, but it gives me the following error:

Code: Select all
COMMAND FAILED!: setFontFamily(..) Document could not be found!. Are you sure you passed the correct document body id?


I know the document exists, but I have read in the Skyline Docs that the Font HAS TO BE loaded before it can be called:

The font must reside in the workspace font folder and be loaded by the system before this command can be called.


The only problem is, I can't see anything that allows me to preload a Font????

Thanks

Shando
Alienware 17 (i7-4700MQ 2.4GHz 16GB GTX770M Win 10 64)

Love, Hope, Strength http://www.lovehopestrength.co.uk
User avatar
Shando
Skyline Moderator
Skyline Moderator
 
Posts: 492
Joined: 06 Mar 2013, 22:35
Location: Kings Beach, Queensland
Skill: Programmer
Skill: Scripter
Skill: Level Designer

Re: Add New Font to UI

Postby SolarPortal » 03 Nov 2015, 11:15

i cant remember from the top of my head, but today is a really busy day, so i don't think there will be that much time to test. Will have a look after this demo is done ;)
Skyline Game Engine - Lead Dev.
Please provide as much info as possible when asking for help.


Specs: OS: Win 10 64bit, CPU: Intel i7 3770 3.4ghz x 4 core(8 threads), GPU: Nvidia GTX 1060 6GB, Ram: 16gig DDR3, Windows on 250gb Samsung Evo 860

Twitter: @SolarPortal
Instagram: @SolarPortal
User avatar
SolarPortal
Skyline Founder
Skyline Founder
 
Posts: 3203
Joined: 29 Jul 2012, 15:56
Location: UK
Skill: 3D Modeller
Skill: 2D Artist
Skill: Programmer
Skill: Level Designer

Re: Add New Font to UI

Postby TattieBoJangle » 03 Nov 2015, 13:28

Hi Tattie,

Thanks for that, I did manage to get it working,


lol I did wonder after I posted where the post went :lol:

I now can't seem to change fonts dynamically :(


Not sure about this one as I haven't tried it but it does dynamically change as you change the font-family code without the need to close it down and open it again so it makes you think it would be possible or I believe you can get it to load more than one font at a time I tested it with Pearl Diver and it seem to load them ok.

INFO:Loaded font face BlueStone Regular (from D:/Aurasoft UK/Skyline/Asset Library/GUI/Pearl Diver/fonts/BLUESTONE.otf).
INFO:Loaded font face Noto Sans CJK KR Bold (from D:/Aurasoft UK/Skyline/Asset Library/GUI/Pearl Diver/fonts/NotoSans.otf).
Case: CM Storm Trooper CPU: I7 5930k X99 Cooler: Noctua NH-D15 Graphics: Asus GTX 1080 Motherboard: Rampage Extreme V x99 Ram: RipJaws DDR4 3000mhz Storage: x2 SSD Crucial 500GB + x5 2TB Hdd PSU: Evga 1500w OS: Windows 10
User avatar
TattieBoJangle
Community Manager
Community Manager
 
Posts: 858
Joined: 26 Jan 2015, 00:15
Location: United Kingdom
Skill: 3D Modeller
Skill: 2D Artist
Skill: Level Designer
Skill: Great creative

Re: Add New Font to UI

Postby epsilonion » 03 Nov 2015, 16:31

In the gui editor when u save it automatically refreshes assets (pictures etc)..

Will look at it when I get home
User avatar
epsilonion
Skyline Lead Moderator
Skyline Lead Moderator
 
Posts: 866
Joined: 26 Feb 2015, 11:51
Location: Hull, East Yorkshire, England
Skill: Business Manager
Skill: Great creative

Re: Add New Font to UI

Postby TattieBoJangle » 03 Nov 2015, 20:54

In the gui editor when u save it automatically refreshes assets (pictures etc)..


good point ;)
Case: CM Storm Trooper CPU: I7 5930k X99 Cooler: Noctua NH-D15 Graphics: Asus GTX 1080 Motherboard: Rampage Extreme V x99 Ram: RipJaws DDR4 3000mhz Storage: x2 SSD Crucial 500GB + x5 2TB Hdd PSU: Evga 1500w OS: Windows 10
User avatar
TattieBoJangle
Community Manager
Community Manager
 
Posts: 858
Joined: 26 Jan 2015, 00:15
Location: United Kingdom
Skill: 3D Modeller
Skill: 2D Artist
Skill: Level Designer
Skill: Great creative

Re: Add New Font to UI

Postby epsilonion » 03 Nov 2015, 21:18

I found this in the documentation of the LibRocket documentation part of there site.

NOTE: You will need to load all ttf files via the C++ or python interfaces before they can be used in RCSS.

I hope this helps.
User avatar
epsilonion
Skyline Lead Moderator
Skyline Lead Moderator
 
Posts: 866
Joined: 26 Feb 2015, 11:51
Location: Hull, East Yorkshire, England
Skill: Business Manager
Skill: Great creative

Re: Add New Font to UI

Postby epsilonion » 03 Nov 2015, 21:21

liamgibbins wrote:NOTE: You will need to load all ttf files via the C++ or python interfaces before they can be used in RCSS.



All of the Fonts in the GUI/Font directory are OTF (open Type Fonts) have you tried downloading the otf version of the font you want to use?
User avatar
epsilonion
Skyline Lead Moderator
Skyline Lead Moderator
 
Posts: 866
Joined: 26 Feb 2015, 11:51
Location: Hull, East Yorkshire, England
Skill: Business Manager
Skill: Great creative

Re: Add New Font to UI

Postby Shando » 04 Nov 2015, 01:19

Hi Liam,

Thanks for the advice ;)

All of the Fonts in the GUI/Font directory are OTF (open Type Fonts) have you tried downloading the otf version of the font you want to use?


I also thought of that at first, but tested the ttf versions in the GUI Editor and they load and work fine.

When I load up the GUI in the GUI Editor, all fonts load and are useable:

Code: Select all
INFO:Loaded font face Noto Sans CJK TC DemiLight (from ../../Chat_Demo/GUI/Chat_HUD/fonts/NotoSansCJKtc-DemiLight.otf).
INFO:Loaded font face Noto Sans CJK TC Light (from ../../Chat_Demo/GUI/Chat_HUD/fonts/NotoSansCJKtc-Light.otf).
INFO:Loaded font face Noto Sans CJK TC Medium (from ../../Chat_Demo/GUI/Chat_HUD/fonts/NotoSansCJKtc-Medium.otf).
INFO:Loaded font face Noto Sans CJK TC Regular (from ../../Chat_Demo/GUI/Chat_HUD/fonts/NotoSansCJKtc-Regular.otf).
INFO:Loaded font face Noto Sans CJK TC Thin (from ../../Chat_Demo/GUI/Chat_HUD/fonts/NotoSansCJKtc-Thin.otf).


I just can't get them to change from Lua :(

I'll keep trying things and see what I can come up with.

Thanks

Shando
Alienware 17 (i7-4700MQ 2.4GHz 16GB GTX770M Win 10 64)

Love, Hope, Strength http://www.lovehopestrength.co.uk
User avatar
Shando
Skyline Moderator
Skyline Moderator
 
Posts: 492
Joined: 06 Mar 2013, 22:35
Location: Kings Beach, Queensland
Skill: Programmer
Skill: Scripter
Skill: Level Designer

Re: Add New Font to UI

Postby epsilonion » 04 Nov 2015, 12:06

http://librocket.com/wiki/documentation

This is the link for the system used, checkout the markup and css documents. Hope they help..
User avatar
epsilonion
Skyline Lead Moderator
Skyline Lead Moderator
 
Posts: 866
Joined: 26 Feb 2015, 11:51
Location: Hull, East Yorkshire, England
Skill: Business Manager
Skill: Great creative

Re: Add New Font to UI

Postby Shando » 05 Nov 2015, 00:11

Hi Again,

Thanks for all the suggestions, but I still keep getting the same error. I've tried using purely otf files (by converting the ttf ones), and they load fine in the GUI Editor, but the error remains when trying to change the font in Lua :(

I've also tried calling ALL required fonts in the rcss file, but that doesn't seem to work either, as it will only use the last font defined:

Code: Select all
body {
   margin-left: -1px;
   margin-top: -1px;
   width: 100%;
   height: 100%;
   background-color: transparent;
   font-family: "Noto Sans";
   font-family: "Noto Sans CJK JP";
   font-family: "Noto Sans CJK SC";
   font-family: "Noto Sans CJK TC";
   font-family: "Noto Sans CJK KR";
   font-family: "Noto Sans Thai";
   font-family: "Noto Sans Hebrew";
   font-family: "Noto Kufi Arabic";

   font-weight: normal;
   font-style: normal;
   font-size: 28px;
   color: #69c9e9FF;
}


As an aside, it looks to me that the GUI Editor only loads files from the "Asset Library", not the "Fonts" folder in the Scene. Originally, I only put the otf files in the Scene "Fonts" folder and they wouldn't load in the GUI Editor, so I copied them to the "Asset Library" folder and then they loaded fine.

Regards

Shando
Alienware 17 (i7-4700MQ 2.4GHz 16GB GTX770M Win 10 64)

Love, Hope, Strength http://www.lovehopestrength.co.uk
User avatar
Shando
Skyline Moderator
Skyline Moderator
 
Posts: 492
Joined: 06 Mar 2013, 22:35
Location: Kings Beach, Queensland
Skill: Programmer
Skill: Scripter
Skill: Level Designer

Re: Add New Font to UI

Postby TattieBoJangle » 05 Nov 2015, 00:18

Yea I think you are right Shando I believe this will need the magic touch from the devs ;) as I believe its not possible just yet so may need a little update.
Case: CM Storm Trooper CPU: I7 5930k X99 Cooler: Noctua NH-D15 Graphics: Asus GTX 1080 Motherboard: Rampage Extreme V x99 Ram: RipJaws DDR4 3000mhz Storage: x2 SSD Crucial 500GB + x5 2TB Hdd PSU: Evga 1500w OS: Windows 10
User avatar
TattieBoJangle
Community Manager
Community Manager
 
Posts: 858
Joined: 26 Jan 2015, 00:15
Location: United Kingdom
Skill: 3D Modeller
Skill: 2D Artist
Skill: Level Designer
Skill: Great creative

Re: Add New Font to UI

Postby SolarPortal » 05 Nov 2015, 02:05

yeah sounds like it :), no problem at all. I will be taking a look at this after the demo is complete.
Skyline Game Engine - Lead Dev.
Please provide as much info as possible when asking for help.


Specs: OS: Win 10 64bit, CPU: Intel i7 3770 3.4ghz x 4 core(8 threads), GPU: Nvidia GTX 1060 6GB, Ram: 16gig DDR3, Windows on 250gb Samsung Evo 860

Twitter: @SolarPortal
Instagram: @SolarPortal
User avatar
SolarPortal
Skyline Founder
Skyline Founder
 
Posts: 3203
Joined: 29 Jul 2012, 15:56
Location: UK
Skill: 3D Modeller
Skill: 2D Artist
Skill: Programmer
Skill: Level Designer

Re: Add New Font to UI

Postby Shando » 21 Nov 2015, 10:44

Hi All,

OK, so after a bit of digging ( and some pointers from SP ;) ) I've got it working :D

Basically, you have to create copies of your GUI files (both .rcss and .rml) and change the "font-family" and "font-charset" in the .rcss file:

Code: Select all
font-family: "Noto Kufi Arabic";
font-charset: U+0020-007F, U+0600-06FF;


"font-charset" is used to define which characters in the font to use, using the Unicode ranges (e.g. https://en.wikipedia.org/wiki/Arabic_(Unicode_block)), separated by commas if necessary (mainly for the Chinese, Japanese, Korean etc. fonts).

You also HAVE TO change the "<body id>" in your .rml file:

Code: Select all
<body id="Chat_HUD_AR" >


and make sure that you also change the "<link type>" in your .rml file to point to the relevant .rcss file:

Code: Select all
<link type="text/rcss" href="Chat_HUD_css_AR.rcss"/>


I have attached a couple of examples, but feel free to let me know if you need more info.

Regards

Shando
Attachments
Chat_HUD.zip
European and Arabic Examples
(3.34 KiB) Downloaded 214 times
Alienware 17 (i7-4700MQ 2.4GHz 16GB GTX770M Win 10 64)

Love, Hope, Strength http://www.lovehopestrength.co.uk
User avatar
Shando
Skyline Moderator
Skyline Moderator
 
Posts: 492
Joined: 06 Mar 2013, 22:35
Location: Kings Beach, Queensland
Skill: Programmer
Skill: Scripter
Skill: Level Designer

Re: Add New Font to UI

Postby SolarPortal » 21 Nov 2015, 12:50

Thats good news that you have it working Shando and thank you for the extra information :)
Skyline Game Engine - Lead Dev.
Please provide as much info as possible when asking for help.


Specs: OS: Win 10 64bit, CPU: Intel i7 3770 3.4ghz x 4 core(8 threads), GPU: Nvidia GTX 1060 6GB, Ram: 16gig DDR3, Windows on 250gb Samsung Evo 860

Twitter: @SolarPortal
Instagram: @SolarPortal
User avatar
SolarPortal
Skyline Founder
Skyline Founder
 
Posts: 3203
Joined: 29 Jul 2012, 15:56
Location: UK
Skill: 3D Modeller
Skill: 2D Artist
Skill: Programmer
Skill: Level Designer


Return to UI

Who is online

Users browsing this forum: No registered users and 1 guest