Try & Error

For the game project that I'm currently working on, I needed to find an easy way to color individual characters in the text of an NGUI UILabel.

Fortunately, the solution is pretty simple. When the supportEncoding boolean field on a UILabel is set to true, the text supports color encoding in the[RRGGBB] format.

This means that we can have write text such as the following (the [-] is used to revert to a previous color):

[FF0000]Red[-] [00FF00]Green[-] [0000FF]Blue[-]

The reason I needed to do this was because we want the leading zeros in the Score UILabel to have a different colour than the actual score. And for that, I wrote this neat little method to format my current score to a string with a predefined number of leading zeros and then color those leading zeros independent from the main colour of the label text.

private string FormatScore(int score, string leadingZerosRGBColor, int totalDigits)
{
    var scoreString = score.ToString(CultureInfo.InvariantCulture);
    var zeros = totalDigits - scoreString.Length;
    if (score == 0)
    {
        scoreString = String.Empty;
        zeros++;
    }

    return String.Format("[{0}]{1}[-]{2}", leadingZerosRGBColor, new string('0', zeros <= 0 ? 0 : zeros), scoreString);
}

[출처] http://blog.dreasgrech.com/2013/05/coloring-individual-characters-in-ngui.html

Overview

UILabel is a Widget that can be used to display text.



All labels require a Font to work with. This font can be Dynamic (directly referencing a Unity Font), or it can be a Bitmap font -- a font embedded within an Atlas. Dynamic fonts are more robust as they don't require you to pre-generate your glyphs before hand, but Bitmap fonts can be drawn within the same draw call as the rest of your atlas, and can be decorated nicely in an image editing tool such as Photoshop.

You can change the alignment of the labels simply by switching the Pivot point. Top-left, Left and Bottom-left pivot point will result in a left-aligned text. Top, Center, or Bottom alignment will cause the text to be centered, and Top-right, Right or Bottom-right pivot will make your text right-aligned.

With the Dynamic font chosen you can set the Font Size as well as style directly on your label. You can also set the material that will be used to draw it, if you wish.

The big box is -- as you probably guessed -- where you enter text. It's a multi-line text box by default, unless limited by the Max Lines property below it.

Overflow handling lets you determine what happens when the label's text exceeds the allowed space.

• Shrink Content means the content will be automatically shrunk to best fit the area. It works in conjunction with the Keep Crisp setting if you are using a Dynamic font, making the font size shrink down, not just scaling the content. This results in crisp labels regardless of whether they were shrunk or not.
  
• Clamp Content simply means that if the text doesn't fit, it will be cut off.
  
• Resize Freely option will make the label's dimensions controlled by the text entered in the field. You won't be able to resize the dimensions yourself.
  
• The last option, Resize Height will add grow the height as necessary, but will keep the width constant.
  

The Spacing field lets you adjust the distance between characters. Both positive and negative values are allowed. This value is in pixels.

Max Lines, as mentioned earlier, lets you control how many lines you want there to be at maximum. You can leave it at zero if you want it to be unlimited.

You can turn off Encoding if you don't want color tags and emoticons to be processed. Input fields do this by default.

If you want, you can give your labels a Gradient by specifying the bottom and top colors.

You can give your text a shadow or an outline Effect, but note that doing so will double the geometry in case of shadow, and multiply it by a factor of 5 in case of outline -- so be mindful of this feature. The Distance parameter controls how far the shadow or outline is from the base text, in pixels.

To change the label's text at run-time, you can do the following:

UILabel lbl = GetComponent<UILabel>();
lbl.text = "Hello world!";

Pro-Tip #1

You can add bold, italic, underline, and other effects to your label by using bbcode syntax like so:

[b]bold[/b]
[i]italic[/i]
[u]underline[/u]
[s]strikethrough[/s]

You can also embed clickable links in your labels like so:

[url=Some Message or Link]Click Me[/url]

To retrieve what you clicked on, attach a box collider to your label (ALT+SHIFT+C) and a script that has a function like this in it:

void OnClick ()
{
    UILabel lbl = GetComponent<UILabel>();
    string url = lbl.GetUrlAtPosition(UICamera.lastWorldPosition);
    Debug.Log("Clicked on: " + url);
}

Pro-Tip #2

You can give your labels a beveled look by specifying a dark foreground color and a bright Shadow effect.



Pro-Tip #3

You can make the text ignore the label's color tint by using the [c]text here[/c]tag, and change the alpha by using [Aa] syntax, like "[7f]".

Class Documentation

http://tasharen.com/ngui/docs/class_u_i_label.html

출처 : http://www.tasharen.com/forum/index.php?topic=6706.0

UIJoystick.cs

Reference : https://gist.github.com/shori0917/6094473

Link : http://blog.kanotype.net/?p=695

링크 : http://progagmer.blog.me/199532845

[Active/InActive HotKey for NGUI]

Alt + Shift + A

[출처] http://www.youtube.com/watch?v=uNSZsMnhS1o

[추가1]

https://answers.unity.com/questions/566114/is-there-a-keyboard-shortcut-for-setting-an-object.html

[추가2]

Unity2018에서 해당 키가 안먹힘

원래 NGUI 부가기능인데 유니티가 좋아보였는지 내장시켰다고 함.

그래서 양쪽에서 같은 Hotkey를 셋팅했기 때문에 충돌나서 키가 안먹힌다고 함.

유니티에 내장됐기 때문에 NGUI의 Hotkey 소스를 주석처리 하자.

NGUISelectionTools.cs

에 보면 

[MenuItem("GameObject/Selection/Toggle 'Active' #&a")]

부분이 있는데

해당 MenuItem 부분만 주석처리하면 됨.

[출처] 게임코디 선후님

[참조 글 및 참조파일]

Link :http://forum.unity3d.com/threads/165254-Unity-4-dynamic-font-support-for-NGUI 

File : 

NGUI_277c_DynamicFonts_and_Readme.zip

※ 파일명과 readme에는 NGUI 2.7.7이라고 돼 있지만 정황상 NGUI 2.2.7을 오표기 한 것 같다.

[NGUI 2.3.4 대응되는 수정 파일]

File : 

NGUI 2.3.4_DynamicFont_Source.zip

[사용기]

※ 현재 사용하려니 NGUI 2.3.4 버전이다. 위의 파일과 UIFont.cs가 좀 달라서 직접 수정해야 했다.

1) NGUI 2.3.4 버전에 맞춘다.

2) 위의 파일(NGUI 2.3.4_DynamicFont_Source.zip)을 받아서 풀어보면, UIFont.cs, UIFontInspector.cs 두 파일이 있다.

    각각 해당위치에 덮어씌우자.

   (주의: 덮어씌우면 기존 폰트 프리팹의 UIFont 스크립트가 missing이 될 수 있다. 바뀐 UIFont를 다시 넣어주면 정상 작동한다.)

3) 원하는 TTF 폰트 파일을 프로젝트에 올린다.(테스트용으로 Windows\Fonts\에 있는 '맑은고딕'을 사용했음.)

    올리면 아래와같이 자동으로 다이나믹 폰트로 생성되면서 Material과 텍스쳐가 생성된다.

    인스펙터 창에서는 폰트 사이즈 등을 조절할 수 있다.

3) Empty GameObject를 하나 생성한다.

4) 이름을 원하는대로 바꾼다.(임의로 MyDynamicFont로 바꿈)

5) UIFont 스크립트를 추가한다.

6) Font Type을 Dynamic으로 바꾸고,

    6-1) Font : 원하는 폰트(임의로 MALGUN 넣음)를 넣는다.

    6-2) Material : MALGUN 아래 있는 Material(스샷에서는 Font Material)을 드래그해서 넣는다.

          ※ 위 참조 데이터의 readme에서는 Material을 새로 만드는 데, 폰트 아래 있는걸 사용해도 별 차이가 없어서 그냥 쓰는걸로 설명함.. 왜 새로 만드는 지 모르겠음. 차후 문제가 생긴다면 수정해야 될 듯.

    6-3) Size : 3)에서 본 Size(스샷에서는 16)를 넣어준다.(이 부분은 좀 더 확인을 해 봐야겠다)

          ※ 여기서의 사이즈는 폰트 사이즈와 매칭이 돼야 Height가 제대로 맞는 것 같다. 폰트 사이즈를 키우려면 3)의 사이즈부터 수정 후 다시 매칭 시키자.

7) 만든 MyDynamicFont를 Prefab으로 만들자.(폰트 만들기는 완료)

8) 'NGUI-Create a Widget'을 눌러서 Widget Tool을 열고, Font 란에 7)에서 만든 MyDynamicFont Prefab을 넣는다.

9) Label을 하나 만든다.(Add To)

    제대로 MyDynamicFont를 써서 'New Label'이 뜬 걸 볼 수 있다.

10) 테스트로 한글/영어/한자/숫자/특수문자 등을 맘대로 넣어봤다. 잘된다.

11) 추가로.. 이제껏 쓴 글이 텍스쳐에 찍혀있는 걸 볼 수 있다.

     글자수가 늘어나서 텍스쳐를 다 채울정도가 되면 텍스쳐 사이즈가 자동으로 늘어난다.

P.s. Dynamic Font가 BM Font보다 Draw Call이 높다고 들었는데..

       잠시 테스트 해봐서는 폰트 하나당 Draw Call이 1이다(BMF랑 같음).

       어떤 경우에 늘어나는 지 모르겠다.(아시는 분 가르쳐 주세요..=_=;)

링크 : http://hompy.info/664

CoverFlowScroll.unitypackage

요즘 제작중인 RPG 게임 GUI 에서 영웅 생성을 위해 캐릭터를 선택하는 UI 를 커버플로우(Cover Flow)로 구성하게 되어 NGUI 를 조금 응용해서 심플하게 구성해봤습니다. 아래 동영상과 유니티 데모를 보시면 대략 어떤 것인지 아실 수 있을 것이며 혹시나 구현 방법에 대해 관심 있는 분들은 첨부 파일을 받아서 패키지 임포트로 유니티에서 가져가 내용을 살펴 보시면 되겠습니다. NGUI 외에도 트위닝 모션을 위해 HOTween 플러그인을 사용하는 코드가 있으나 수정해서 쓰셔도 되겠습니다. 그리고 데모에 보이는 캐릭터 디자인 소스는 에셋 스토어에서 구입한 것이네요. NGUI 플러그인에 이런 기능도 포함되면 좋을 것 같은데 안된다면 아쉽지만 저처럼 이렇게 구현해야 되겠지요.^^ 여러분은 지금 어떤 기능들을 추가해보고 있나요?

[유니티 데모 링크] http://www.hompydesign.com/tmp/coverflow/

[패키지 첨부파일]  CoverFlowScroll.unitypackage