Announcement

Collapse
No announcement yet.

Font library issues (gfxfontlib)

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Font library issues (gfxfontlib)

    Hi Guys,

    I followed the tutorial from Matt about fonts: http://www.youtube.com/watch?v=QP-MawV87Vc
    I tried to use the 3rd method, the ones which uses a font library. I think the tutorial is a quite good one, but for some reasons, I dont´t get it working.

    I use CS 5.5 with AS 3 in my MainMenu.swf and yesterday I updated UDK to the July 2012 Beta 2.
    According to the tutorial, I did the follwing steps:

    in fonts_en.fla:
    • Added a new text field for my new font
    • Set the font family for the text field to my new font (Source Sans Pro / Style:Regular)
    • Embed... -> Name: MyDefaultFont / Character Embedding: Basic Latin
    • Published the file


    in gfxfontlib.fla:
    • Created a new font in the library
    • Name: $MyDefaultFont
    • Export in frame 1
    • Export for runtine sharing -> URL: gfxfontlib.swf
    • Identifier: $MyDefaultFont
    • Published the file



    in fontconfig.txt (not part of the tutorial but now maybe necessary?):
    • added a new line: map "$MyDefaultFont " = "Source Sans Pro"


    in GFxUI.int:
    • added a new line in section fonts: MyDefaultFont = Source Sans Pro


    in MainMenu.fla
    • Created a new font in the library
    • Name: $MyDefaultFont
    • Class: $MyDefaultFont
    • Import for runtine sharing -> URL: ../UDKFonts/gfxfontlib.swf (entering just gfxfontlib.swf did not work)
    • Set the font family of the text field to $MyDefaultFont
    • Published the file


    in my .uc file:
    • Added a new GFxClikWidget
    • Initializing the GFxClikWidget (seems to work)
    • set the text with: btnTest.SetString("label", "Exit");


    I reimported all 3 swf files to udk (more than once) and rebuild the level multiple times, but the text won´t display correctly:
    Instead of "Exit" I see "■xit, the Close Button shows : "■l■■e"

    I checked the steps in the tutorial multiple times and I´m sure, that I don´t missed a step. Or do I have to change gfxfontlib.fla and fonts_en.fla to AS3?
    Any ideas, what I could have done wrong?

    Thanks,
    Michael

    #2
    Hi Michael,

    I will test this out today, and let you know if there are any problems or new steps for AS3.

    Comment


      #3
      Ok - here's a detailed walkthrough of using Font Lbraries in UDK with the AS3 version of Scaleform, and the already built-in fonts_en & gfxfontlib SWFs:

      font_en.swf


      1. Open \UDKGame\Flash\UDKFonts\fonts_en.fla
      2. Add a new textfield to the stage, and select the font you wish to use in this textfield. For this example, I'll use Blackoak Std
      3. Type something into the textfield. For example: Blackoak Std
      4. Click the Embed button and give your new font a name. For example: Blackoak
      5. Choose Basic Latin form the Character ranges list.
      6. Press OK to close the embed window.
      7. Change the publish settings of this file to Flash Player 10/AS3. They are currently set to Flash Player 8/AS2.
      8. Save and republish the file.

      gfxfontlib.swf

      1. Open \UDKGame\Flash\UDKFonts\gfxfontlib.fla
      2. Add a New Font to the library.
      3. In the Font Embedding window, under Options, change the name to match your font's name from fonts_en, but add a $ in front. Example: $Blackoak
      4. Set the Family drop down to match your font from fonts_en - For Example: Blackoak Std
      5. On the ActionScript tab, select Export for ActionScript and Export in frame 1.
      6. The Class field should match the font name: $Blackoak
      7. The Base Class should be: flash.text.Font
      8. Select Export for runtime sharing
      9. Enter gfxfontlibs.swf in the URL
      10. Press OK to close the embed window.
      11. Change the publish settings of this file to Flash Player 10/AS3.
      12. Save and republish the file.

      fontconfig.txt

      1. Open \UDKGame\Flash\UDKFonts\fontconfig.txt
      2. Add a new line at the bottom: For example: map "$Blackoak" = "Blackoak Std"
      3. Save this file.

      GFxUI.int

      1. Open \UDKGame\Localization\INT\GFxUI.int
      2. In the [Fonts] heading, add a new line: For example: Blackoak=Blackoak Std
      3. Save this file.

      Your SWF

      1. Open your SWF that needs the font.
      2. Add a new Font to the library.
      3. Set the Name to: $Blackoak
      4. Set the Font Family to: Blackoak Std
      5. On the ActionScript tab, ensure the classfield matches the Font name: $Blackoak
      6. Select Import for runtime sharing.
      7. Put the URL as: gfxfontlib.swf (NOTE: If you want the font to show up in the standalone Scaleform player, use: ..\UDKFonts\gfxfontlib.swf)
      8. Press OK to close this window.
      9. Set teh Font Family of your textfields that use this font to: $Blackoak* This font will be found very near the top of the list.
      9. Save and republish your SWF.

      UDK Content Browser

      1. Reimport fonts_en.swf (Pacakge is found under: UDKGame\Content\Shared\UDKFonts)
      2. Reimport gfxfontlib.swf
      3. Save the package (UDKFonts).
      4. Import/Reimport your SWF that uses the new font.
      5. Save the package that contains the SWF.
      6. Test your level out.

      Comment


        #4
        Hi Matt,

        thanks for your walkthrough! I followed your steps (at least three times), but I have still the same issue :-(
        I also tried to change the font and the font itself is shown correctly, but some characters are still not displayed correctly.
        I also tried to change the character ranges list, but this has no effect.

        I´ll try to create a new menu tomorrow to see, if that affects the issue. Maybe there is something wrong with my uc script?

        Thanks,
        Michael

        Comment


          #5
          Hard to say. I tested this walkthrough and it works for me. I'll test it again.

          Comment


            #6
            The walkthrough is tested working; however, you may want to update your Flash CS5.5. There was an Adobe issue in the past that caused CS5.5 to not export Fonts for runtime sharing. They patched it though. Otherwise, try another version of Flash (CS4, 5, or 6).

            Comment


              #7
              Stoopid, stoopid, stoopid me...
              To stupid to keep my software up-to-date...
              Patching from 11.5 to 11.5.1 fixed the issue...

              Anyway; thanks for your detailed walk-through and your support!!! Great work!!!

              Comment


                #8
                Hey Matt -

                I'm following along here, but would like to have a slightly different directory structure and file naming convention than what comes as standard in UDKGame. However, I'm aware there are times where things need to be in a specific place (or named something specific) for Scaleform elements to work properly. Here are a few questions:
                + Is it allowable to move the location of any of the following to different directories: 1) fontconfig.txt, 2) UDKFonts.upk
                + Can the UDKfonts.upk file be renamed?

                As an example, let's say I want to rename the package and place it somewhere else:
                /UDKGame/Content/UI/Fonts/gfxFonts.upk

                Would the content in the /Flash directory have to follow suit for this to work?
                /UDKGame/Flash/UI/Fonts/fontconfig.txt (and the gfxfontlib.fla, fonts_en.fla)

                Finally, would this be the correct way to mark the path within GFxUI.int:
                [FontLib]
                FontLib=UI.Fonts.gfxFonts.fonts_en
                FontLib=UI.Fonts.gfxFonts.gfxfontlib


                Best regards...

                Comment


                  #9
                  Well looky there... Looks as though my issue with relocating/renaming files had more to do with incorrect usage of the content browser. I believe I have this under control now.

                  Comment


                    #10
                    Originally posted by Matt Doyle View Post
                    Ok - here's a detailed walkthrough of using Font Lbraries in UDK with the AS3 version of Scaleform, and the already built-in fonts_en & gfxfontlib SWFs:

                    font_en.swf


                    1. Open \UDKGame\Flash\UDKFonts\fonts_en.fla
                    2. Add a new textfield to the stage, and select the font you wish to use in this textfield. For this example, I'll use Blackoak Std
                    3. Type something into the textfield. For example: Blackoak Std
                    4. Click the Embed button and give your new font a name. For example: Blackoak
                    5. Choose Basic Latin form the Character ranges list.
                    6. Press OK to close the embed window.
                    7. Change the publish settings of this file to Flash Player 10/AS3. They are currently set to Flash Player 8/AS2.
                    8. Save and republish the file.

                    gfxfontlib.swf

                    1. Open \UDKGame\Flash\UDKFonts\gfxfontlib.fla
                    2. Add a New Font to the library.
                    3. In the Font Embedding window, under Options, change the name to match your font's name from fonts_en, but add a $ in front. Example: $Blackoak
                    4. Set the Family drop down to match your font from fonts_en - For Example: Blackoak Std
                    5. On the ActionScript tab, select Export for ActionScript and Export in frame 1.
                    6. The Class field should match the font name: $Blackoak
                    7. The Base Class should be: flash.text.Font
                    8. Select Export for runtime sharing
                    9. Enter gfxfontlibs.swf in the URL
                    10. Press OK to close the embed window.
                    11. Change the publish settings of this file to Flash Player 10/AS3.
                    12. Save and republish the file.

                    fontconfig.txt

                    1. Open \UDKGame\Flash\UDKFonts\fontconfig.txt
                    2. Add a new line at the bottom: For example: map "$Blackoak" = "Blackoak Std"
                    3. Save this file.

                    GFxUI.int

                    1. Open \UDKGame\Localization\INT\GFxUI.int
                    2. In the [Fonts] heading, add a new line: For example: Blackoak=Blackoak Std
                    3. Save this file.

                    Your SWF

                    1. Open your SWF that needs the font.
                    2. Add a new Font to the library.
                    3. Set the Name to: $Blackoak
                    4. Set the Font Family to: Blackoak Std
                    5. On the ActionScript tab, ensure the classfield matches the Font name: $Blackoak
                    6. Select Import for runtime sharing.
                    7. Put the URL as: gfxfontlib.swf (NOTE: If you want the font to show up in the standalone Scaleform player, use: ..\UDKFonts\gfxfontlib.swf)
                    8. Press OK to close this window.
                    9. Set teh Font Family of your textfields that use this font to: $Blackoak* This font will be found very near the top of the list.
                    9. Save and republish your SWF.

                    UDK Content Browser

                    1. Reimport fonts_en.swf (Pacakge is found under: UDKGame\Content\Shared\UDKFonts)
                    2. Reimport gfxfontlib.swf
                    3. Save the package (UDKFonts).
                    4. Import/Reimport your SWF that uses the new font.
                    5. Save the package that contains the SWF.
                    6. Test your level out.
                    How would you get this to work for a textInput field? I can't get this to work no matter what. Can't change the font of a (AS3) TextInput field at all?

                    Comment


                      #11
                      Originally posted by KillerSneak View Post
                      How would you get this to work for a textInput field? I can't get this to work no matter what. Can't change the font of a (AS3) TextInput field at all?
                      Have you tried editing the TextInput component and setting the font to the text field inside?

                      Comment


                        #12
                        FYI: Does not work with Flash CS5.5. Flash CS5.5 apparently always needs to have the check-boxes checked for all the glyphs. Otherwise you just see error-squares all over the place.

                        Comment

                        Working...
                        X