블로그 이미지
Every unexpected event is a path to learning for you. blueasa

카테고리

분류 전체보기 (2811)
Unity3D (867)
Programming (479)
Server (33)
Unreal (4)
Gamebryo (56)
Tip & Tech (234)
협업 (61)
3DS Max (3)
Game (12)
Utility (140)
Etc (98)
Link (32)
Portfolio (19)
Subject (90)
iOS,OSX (55)
Android (16)
Linux (5)
잉여 프로젝트 (2)
게임이야기 (3)
Memories (20)
Interest (38)
Thinking (38)
한글 (30)
PaperCraft (5)
Animation (408)
Wallpaper (2)
재테크 (18)
Exercise (3)
나만의 맛집 (3)
냥이 (10)
육아 (16)
Total
Today
Yesterday

[원본 링크]

http://kheldon.tistory.com/2



올려진 파일은 공유해주신 위 원본링크의 소스를 개조해서 사용중입니다.(공유 감사합니다.)


[개조파일]

CUIListView.cs




[추가사항]

- SetFocusOnCenter 추가.

- WidgetBound 대신 BoxCollier를 ItemSize로 사용.

- Vertical에서 아이템이 아래로 붙는 문제 수정(위로 붙게..)


[추가사항] 2018-07-27

- ScrollBar 터치 로직 추가


반응형
Posted by blueasa
, |

프로젝트를 진행하다보면 NGUI의 label만으로는 표현이 뭔가 아쉬운 경우가 있다. 특히 게임 캐릭터나 유닛이 데미지를 받는다거나, 스코어를 보여준다거나 하는 상황에서 사이즈가 큰 폰트를 써야 할 경우가 많은데, 이럴 경우 기본 폰트의 크기가 작아 폰트가 지저분하게 보인다거나 게임 자체가 뭔가 허접(?)하게 보일 확률이 높다.

"0부터 9까지의 숫자 부분만 따로 떼어 특별한 이미지로 만든 후에 이것을 label로 쓸 수 있다면..?"

이런 생각으로, 데미지 폰트를 만드는 방법을 검색해 보았으나... BMFont를 이용한 폰트를 만드는 방법은 여기저기 블로그 등에 널려(...) 있는데 비해, 이미지로 구성된 숫자 폰트를 만드는 방법은 의외로 찾아보기 어려웠다. 약간의 삽질 끝에 숫자 폰트를 만드는 방법을 확실히 알게 되어 공유해 보겠다. 

준비물
Unity, NGUI, BMFont, 폰트로 만들 0부터 9까지의 이미지

참고로 여기서 사용한 각 툴의 버전은 다음과 같다.
Unity3D: 4.1.5
NGUI: 2.6.3
BMFont: 1.13

1. BMFont를 띄우고 0부터 9까지 폰트로 만들 숫자를 선택한다.


일반적인 BMFont를 만드는 과정과 거의 비슷한데, 폰트 중에 숫자 부분만을 선택(클릭)한다는 점이 다르다. (보통 인터넷에 돌아다니는 KS1001.txt 파일을 import하는 과정...)
숫자를 클릭하면 어두운 회색 박스가 약간 밝은 회색 박스로 변한다. 이런 식으로 0부터 9까지 선택을 한다.

2. Image Manager를 띄운다.


일반 폰트를 만들 때는 존재조차 있는지 몰랐던, Image Manager를 띄운다.

3. Import Image


Image Manager를 띄우면 달랑 메뉴 하나에 빈 창만 보이는데, 메뉴의 Image => Import image를 클릭한다.

4. Id 입력


파일을 선택하는 창이 뜨는데, 준비해둔 숫자 폰트 중 0번 이미지를 선택하자. 그러면 위와 같은 Icon Image 창이 뜬다.
여기서 주의할 점은 Id 부분인데, 0번 이미지의 Id를 48로 변경하고 Ok를 눌러주자.
나머지 1번부터 9번까지는 0번 이미지부터 순서대로 Id값을 1씩 늘려나가면 된다. 이렇게 하면 9번 이미지는 Id가 57번이 된다.


5. 설정 확인


0번부터 9번 이미지를 모두 Import했다면 위와 같은 화면을 볼 수 있을 것이다.
0부터 9까지의 문자 박스에 하늘색 점이 표시되어 있고, 밝은 회색 박스로 변해 있다는 것을 알 수 있다. 만약 자신이 작업한 결과물이 위의 스샷과 다르다면 지금까지의 작업 과정을 다시 한 번 차근차근 확인해 보자.


6. Export Options


이제 Export Options를 설정해야 한다. BMFont의 Options => Export Options를 클릭하여 옵션 창을 띄우자.
확인할 사항은 두 가지이다. 첫 번째는 Bit depth인데 32비트로 바꾸면 된다. 만약 8비트 상태 그대로 둔다면 원래의 색상이 아니라 희멀건 폰트를 보게 될 것이다. 두 번째는 Textures인데, 유니티 프로젝트에서는 대부분 png 이미지를 사용하므로, png로 바꾸면 된다.
Save bitmap font as...를 누르면 저장할 이름을 결정하는 창이 뜬다.
여기서는 DamageFont라고 정해보았다.


[참고] 이후의 과정은 일반적인 BMFont를 만드는 과정과 같다.

7. fnt를 txt로 변경


저장하면 fnt와 png 파일이 생긴다. 이 중 fnt 파일의 확장자를 fnt에서 txt로 바꾼다.


8. txt와 png를 유니티의 프로젝트로 드래그&드롭


앞의 과정에서 만든 txt와 png를 유니티의 프로젝트에 드래그&드롭한다.
이제 NGUI의 Font Maker를 열어 폰트를 만들면 되는데, 유니티 메뉴 => NGUI => Open the Font Maker를 클릭한다.


9. Font 아틀라스 만들기


지금까지의 과정을 정상적으로 진행했다면 위와 같은 모습을 볼 수 있다. 앞의 과정에서 프로젝트에 포함시켰던 txt 파일을 Font Data로 드래그하고, png 파일은 Texture로 드래그한다.
Font Name을 입력하고 Create 버튼을 누르면 프로젝트 폴더에 아틀라스와 마테리얼이 생성된다.


10. 최종 테스트


NGUI의 Widget Tool을 띄운 후, 조금 전 만든 DamageFont 아틀라스를 Font로 선택한다. Label을 만든 후 정상적으로 폰트가 출력되는지 확인하자. 지금까지의 과정을 차근차근 따라했다면 위의 스샷처럼 Scene 화면에서 데미지 폰트로 된 Label을 확인할 수 있을 것이다.


출처 : http://lianes.tistory.com/49

반응형
Posted by blueasa
, |

 

 

[기존 소스에 일부 코드 수정]

CUIListView.cs
0.03MB

 

 

스크롤뷰 아이템을 재사용 할 수 있게 해주는 스크립트 입니다.

인터넷에 이미 몇가지 있는 걸로 알지만, 제가 쓰고 있는 것도 공유해 봅니다.

 

사용법은 간단합니다.

스크립트에 멤버 변수로 CUIListView를 등록하면 다음과 같이 나옵니다. 

 

 

Item List - 스크롤뷰가 포함되어 있는 오브젝트.

Item - 리스트로 출력할 프리팹.

Add Row of Column - 0일 경우 View사이즈에 딱 맞게 아이템을 생성해줍니다. 이렇게 되면 아이템 재사용이 제대로 동작하지 않으니, 1이나 2로 지정합니다.

Item Padding - 아이템 사이의 간격입니다. 알아서 다 맞춰주기 때문에 Grid 사용하지 않아도 됩니다.

Scrollbar - 스크롤바가 있을경우 지정해줍시다.

그리고 UIPanel의 offset과 Center 좌표는 0으로 두는게 좋습니다. 패널 위치를 옮기려면 게임오브젝트의 좌표를 움직이는게 좋습니다.


using UnityEngine;
using System.Collections;
using System.Collections.Generic;

public class CListViewTest : MonoBehaviour
{
    public CUIListView m_ListView;

    private List m_ItemList = new List();

    void Start ()
    {
        for(int i = 0; i < 500; ++i)
        {
            m_ItemList.Add(i);
        }

        m_ListView.OnUpdateItem = OnUpdateItem;
        m_ListView.OnGetItemCount = OnGetItemCount;

        m_ListView.Init();
    }

    public void OnUpdateItem(int index, GameObject go)
    {
        CListViewTestItem item = go.GetComponent<CListViewTestItem>();
        item.m_Label.text = index.ToString();
    }

    public int OnGetItemCount()
    {
        return m_ItemList.Count;
    }
}

public class CListViewTestItem : MonoBehaviour
{
    public UILabel m_Label;
}

 

코드는 위와같이 작성합니다. 

OnUpdateItem - 아이템이 갱신될 때 호출됩니다. 나머지 부분은 직접 구현하시면 됩니다. 

OnGetItemCount - 리스트의 전체 개수가 필요할 때 호출됩니다.

추가로 Refresh와 Reset, SetFocus 함수가 있는데 필요에 따라서 호출하여 쓰시면 될 것 같습니다.

 

미구현 기능 및 버그

- 스크롤 바를 클릭해서 뷰를 이동하는 기능. 이 기능을 쓸일이 없고 작업하기도 힘들어서 구현하지 않았습니다.

- 아이템이 한페이지 이상 삭제되었을 경우에 Refresh를 호출하면 뷰 이동이 안되는 버그. (이런 경우에는 Reset을 쓰는 걸 추천).

2015. 4. 15 업데이트

아이템이 리스트에 딱 맞게 설정되어 있을 경우에 스크롤이 되는 버그가 있어서 수정하였습니다.

 

2015. 5. 26 업데이트

아이템의 크기가 뷰사이즈 보다 작을 경우 드래그가 불가능 하도록 스크롤뷰를 disable 시키는 기능 추가.

SetFocus(0); 을 호출 할 경우 0번째 아이템이 화면 중앙에 위치하는 버그 수정.

 

출처 : http://kheldon.tistory.com/2

 

반응형
Posted by blueasa
, |

 

참조 : http://blueasa.tistory.com/1777

참조 : http://www.tasharen.com/forum/index.php?topic=10223.0

 

[파일]

Photoshop Overlay.zip
다운로드

 

 

이전에 포토샵의 Overlay와 비슷한 느낌의 Shader가 필요해서 찾아서 올려놨는데 NGUI 패널에서 클리핑이 안돼서

 

수정 및 추가해서 올려 놓음.

 

 

 

반응형
Posted by blueasa
, |

NGUI를 이용해서 UI 제작을 하면서 UI 디자이너에게서 리소스와 배치 데이터를 받아서 작업을 하는 데,


유니티 특성상 UI는 트리노드 구조를 가져서 특정 UI의 좌표가 어떤지 알기가 힘들어서 쉽게 보기 위해 대충 만들어 봤다.


당장 그냥 쓰기 위해 위치나 색깔등 대충해서 만들기..


따로 넣기도 귀찮아서 그냥 NGUI 소스인 UIWidget.cs에 추가 했다.


P.s. UI디자이너가 포토샵을 보통 쓰기때문에 NGUI가 데카르트 좌표계를 쓰고 있지만 UI디자이너가 주는 정보와 매칭되게 하기 위해서 스크린좌표계로 변환해서 보여주도록 했음.



public class UIWidget : UIRect
{
    ....
    void OnDrawGizmos ()
    {
        .....
#if UNITY_EDITOR
        // 아래 추가한 함수를 여기서 실행.
            ShowSelectedUICoordinate();
#endif // UNITY_EDITOR
    }

#if UNITY_EDITOR  // 에디터에서만 실행하도록..
    /// 
    /// 선택된 UI의 좌표(X/Y/Width/Height) 보여주는 함수.
    /// 좌표계는 스크린좌표계 기준.
    /// 

void ShowSelectedUICoordinate() { // by blueasa if (UnityEditor.Selection.activeGameObject == gameObject) { // 타겟 해상도(1280x720) 자신이 원하는 해상도에 맞게 변경. float fScreenWidth = 1280f; float fScreenHeight = 720f; Camera cUICamera = UICamera.mainCamera; if (null == cUICamera) { UnityEngine.Debug.LogWarning("Can't find UICamera.."); return; } GUIStyle style = new GUIStyle(); style.normal.textColor = Color.yellow; // UI는 데카르트 좌표계이므로 스크린 좌표계로 변환해서 사용. // X/Y를 Widget 중심으로 사용하기로 해서 수정. 좌측상단 사용하려면 선택하면 될 듯.. #region X/Y Widget 중심(스크린 좌표계) //float fX = cUICamera.WorldToViewportPoint(worldCenter).x * fScreenWidth; //float fY = (1f - cUICamera.WorldToViewportPoint(worldCenter).y) * fScreenHeight; //// X/Y가 Widget의 중심이기때문에 크기가 1/2만 나오므로 원래크기를 만들기 위해 2를 곱함. //float fWidth = ((cUICamera.WorldToViewportPoint(worldCorners[3]).x * fScreenWidth) - fX) * 2f; //float fHeight = (((1f - cUICamera.WorldToViewportPoint(worldCorners[3]).y) * fScreenHeight) - fY) * 2f; #endregion #region X/Y Widget 중심(데카르트 좌표계) float fX = cUICamera.WorldToViewportPoint(worldCenter).x * fScreenWidth; float fY = cUICamera.WorldToViewportPoint(worldCenter).y * fScreenHeight; // X/Y가 Widget의 중심이기때문에 크기가 1/2만 나오므로 원래크기를 만들기 위해 2를 곱함. float fWidth = ((cUICamera.WorldToViewportPoint(worldCorners[2]).x * fScreenWidth) - fX) * 2f; float fHeight = ((cUICamera.WorldToViewportPoint(worldCorners[2]).y * fScreenHeight) - fY) * 2f; #endregion #region X/Y 좌측상단(스크린 좌표계) //float fX = cUICamera.WorldToViewportPoint(worldCorners[1]).x * fScreenWidth; //float fY = (1f - cUICamera.WorldToViewportPoint(worldCorners[1]).y) * fScreenHeight; //float fWidth = (cUICamera.WorldToViewportPoint(worldCorners[3]).x * fScreenWidth) - fX; //float fHeight = ((1f - cUICamera.WorldToViewportPoint(worldCorners[3]).y) * fScreenHeight) - fY; #endregion string strXYWH = string.Format("[X] {0:0.00}, [Y] {1:0.00} [W] {2:0.00}, [H] {3:0.00}", fX, fY, fWidth, fHeight); UnityEditor.Handles.Label(transform.position, strXYWH, style); // 참고.. //Debug.Log("worldCorners[0] " + camera.WorldToViewportPoint(worldCorners[0])); // 좌하(↙) //Debug.Log("worldCorners[1] " + camera.WorldToViewportPoint(worldCorners[1])); // 좌상(↖) //Debug.Log("worldCorners[2] " + camera.WorldToViewportPoint(worldCorners[2])); // 우상(↗) //Debug.Log("worldCorners[3] " + camera.WorldToViewportPoint(worldCorners[3])); // 우하(↘) } } #endif // UNITY_EDITOR }



출처 : Mine


반응형
Posted by blueasa
, |

NGUI로 여러 해상도 대응 꽉 채우기

(참조 : http://hanamoni.tistory.com)



 1280x720 해상도 기준


[순서]

1) NGUI-UIRoot.cs 열기.


2) Inspector Window 에서 설정.

    Scaling Style - Constrained On Mobiles

    Content Width - 1280 Fit  (Check)

    Content Height - 720 Fit  (Check)


3) UIRoot-Update() 함수에서 아래를 교체

   [원본]

    mTrans.localScale = new Vector3(size, size, size);


   [변경]

    float fX = (NGUITools.screenSize.x / 1280f);

    float fTemp = (720f * fX);

    float fY = NGUITools.screenSize.y / fTemp;

    mTrans.localScale = new Vector3(size, size * fY, size);





[참조 링크의 내용]


NGUI 새로운 버젼.. 


해상도가 안맞아서 해상도에 맞게 늘릴려고 만든. 코드.


UIRoot 에서


기준을 1280 X 720 할때.


Inspector Window 에서 설정.

Scaling Style - Constrained On Mobiles

Content Width - 1280 Fit  Check 

Content Height - 720 Fit  Check



UIRoot 스크립트 에서  변경.



void Update ()  에서.


mTrans.localScale = new Vector3(size, size, size);  < -  이코드를 




float x_value = (screen.x / 1280f);

float temp_value = (720f * x_value);

float y_value = screen.y / temp_value;


mTrans.localScale = new Vector3(size , size * y_value, size );


요렇게 변경하면


기준 1280 x 720 으로 잡고 모든해상도에 맞게 잘 늘어나거나 줄어든다.

반응형
Posted by blueasa
, |

"Infinite Scrolling" for Unity3D Using NGUI's UIScrollView (1st attempt)

For latest update please check this post instead 
I've been using NGUI for UI related work on my Unity project for the past few weeks and it is a breath of fresh air when compared to the stock UnityGUI (OnGUI()).

Part of my project relate to display a relatively large amount of data dynamically (well not very large but in thousands) and instantiating a prefab for each data element didn't seem like a good idea to me :-)

So instead I decided to add some logic to do a scroll view with fixed pool of items that I reuse and position according to the direction of the scroll and get it fed with the correct data. 

Although I am sure that there are existing solutions I decided to do my own.

The logic so far is built using UIGrid with fixed cell height for the moment (not well suited for UITable with different cell height) and the panel is using soft clip. the Scroll view is using momentum only (Spring physics breaks my current logic for some reason)

Initialization steps: 
  1. Pool size is calculated using the cell height against the panel height plus some buffer (currently I am using a buffer of 4 list items)
  2. List items' pool is instantiated with corresponding data from the data list
  3. A map is maintained to keep track of which data item are used in which list items
While Scrolling:
  1. Any item that turns a visible from an invisible state will notify the main controller
  2. We check the direction of the scroll based on which item is visible (e.g. if the next item is visible means that we are dragging upwards)
  3. based on the direction we reuse the items at the top or the bottom of the list accordingly (e.g. if direction is up the top item moves to the bottom and get populated with data from the corresponding data element)

 

 This is a first attempt and further posts will follow as the logic evolve.

==UPDATE==
I am in the process of making this component available as open source.
Meanwhile we've launched a free app on Android that uses it called Avatar Messenger
==UPDATE 2==
 The component is available as open source
https://github.com/OrangeLabsUK/InfiniteList_NGUI



[파일]

InfiniteList_NGUI-master.zip



출처 : http://www.geekyhamster.com/2013/12/infinite-scrolling-for-unity3d-using.html

반응형

'Unity3D > NGUI' 카테고리의 다른 글

NGUI UI의 현재 위치 표시하기[수정중]  (0) 2015.05.08
NGUI 다양한 해상도 대응하기  (2) 2015.04.21
NGUI: Symbols & Emoticons  (0) 2015.02.12
NGUI Emoticons  (0) 2015.02.12
NGUI UILabel로 Emoticon 넣기..  (0) 2015.02.12
Posted by blueasa
, |


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


반응형
Posted by blueasa
, |

NGUI Emoticons

Unity3D/NGUI / 2015. 2. 12. 01:16
我也没记清NGUI是哪个版本开始增加了表情这个功能,不过好像是3.0以后的,现在我就来简单的说说如何使用NGUI中新增的这个输入表情的功能的用法。

我们要准备表情图片,去网上随便找些表情来,我这是在百度后经过ps后得到表情,大家也可以自己去网上找下表情的图片,然后自己PS下得到自己所要的。我的如下:

1.png 

我们在这里要注意一下,表情图片最好是20X20大小,因为在外部是修改不了大小的,这个估计是NGUI作者封装在内部了,要去修改内部代码才行的哦。还有一个是如果想输入表情,暂时不支持动态字体的哦。所以得自己用BMFont去制作Bitmap字体。我将我已经制作好的Bitmap字体放进来了,如图:



我们将我们千辛万苦弄来的表情来制作成一个图集吧,待会会用到,我这如下:

3.png 

现在我将BMFont制作好的字体放进NGUI里面,然后用来创建字体图集。大家会发现这里和原来有点不一样了,在Output栏里面多了个Atlas这一栏,这个其实就是表情图集了。我们将我们的表情图集拖放到这一栏就可以了,然后点击创建吧。如图:

4.png 

我们现在来给表情定义特殊字体集合吧,其实就是解析这些定义的文字,然后用表情来代替他们显示,我们选择我们刚才创建的字体,就会发现有这个了:

    6.png 
然后我们点击展开一下,就会把我们的表情和一个特殊文字对应吧。我把一些对应的表情设置的如下:

7.png 

6  好了,现在我们可以来输入我们的自定义的表情了,我输入<:kx (就是开心那个表情对应的特殊字码)  如图:

8.png    9.png 

不要怀疑啊,就是这样简单。  没了。




5.png (13.65 KB, 下载次数: 5)

5.png



转:http://www.narkii.com/club/thread-313296-1.html




반응형
Posted by blueasa
, |

1、可以使用BBCode标记

[b]Bold[/b]                      粗体
[i]italic[/i]                         斜体
[u]underline[/u]               下划线
[s]strikethrough[/s]         删除线
[sub]sub[/sub]               下标
[sup]sup[/sup]               上标
[00ff00]设置颜色[-]           设置显示颜色

[url=http://www.cnblogs.com/mrzivchu/][u]博客[/u][/url] 链接

例如设置颜色:

UILabel的Text内容为:[99ff00]n[-]gui: tools

展示效果则为:

这里主要说一下设置连接:

单单的在UILabel的Text里面写入这个是不够的:[url=http://www.cnblogs.com/mrzivchu/][u]博客[/u][/url] 链接

点击是不会产生效果的,我们还要为此UILabel添加一个Collider和一个脚本

脚本如下:

 

 void OnClick()
    {
        UILabel lbl = GetComponent<UILabel>();
        string url = lbl.GetUrlAtPosition(UICamera.lastWorldPosition);
        Application.OpenURL(url);
    }

 

脚本中的OnClick方法要想被触发,就必须要添加一个Collider,这个道理我想大家都懂得!

但要注意一点,假如UILabel的Text内容为:请点击[url=http://www.cnblogs.com/mrzivchu/]我的博客[/url]进入,欢迎大家来批评指正!

我只想点击《我的博客》四个字才去打开连接,而不是点击上面的任何字都可以打开连接,假如上面的文字尺寸是700x40,而《我的博客》四个字的尺寸是200x40,这时我们就可以设置Collider的Center和Size属性来设置点击的区域大小以满足我们的需求,可是当我运行程序的时候Center和Size会自动变为700x40,原来UILabel的Widget有个选项Collider,这个auto-adjust to match表示Collider大Size大小自动匹配为UILabel的Size大小,我们只要把这个勾取消即可!

如果你不想使用BBCode,那么UILabel有个选项BBCode,不勾选的话,就表示不使用BBCode

2、使用图片

我们只要在UILabel的Text里面写了:zwh:) 那么就会出现了一个笑脸图片:

 

为什么会这么神奇呢,原因在于你选择的Font,此处我选择的Font是Arimo20

Arimo20有三个关联的文件:

类型依次为:tga,prefab,txt

这时,我们点击类型为prefab文件,在Inspector窗口的UIFont可以看到

其中可以看到我们熟悉的 :) 笑脸标记,我们这时点击笑脸对应的Emotion - Smile ,展现出来的就是那个笑脸图片,而这个笑脸图片是存在Wooden Atlas图集里面的,如果我们想用其他图片的话,我们可以向Wooden Atlas图集里面增加我们需要展现的图片,然后在下面填写一个约定好的标记,类似于 :) 这样的标记,选择我们想要展现的图片,Add即可,图片的尺寸最好是20x20,以保证和文字上下在一条水平线上!

UILabel的Text为:zwh(bird)zwh 

显示为:

因为我的图片是60x60的,所以和文字上下不一样齐了,这也是我为什么建议图片尺寸是20x20的原因了!

另外说一个问题,我也不知道是不是存在的bug

此处我们为UIFont选择的图集是Wooden Atlas,Sprite是Arimo 20,Arimo 20大概对应的是字符格式,如果此时我们点击Sprite,将会弹出Wooden Atlas里面包含的所有sprite精灵,当我们点击Arimo 14或者Arimo 18的话,那么应用此Arimo20的UILabel将会变形:

原本是这样的:,变成了这样:

 

为Sprite选择Arimo20已经还原不会来了,还是会变形!

解决方案:

就是点击UIFont下的Import Data,也就是导入和Arimo20关联的三个类型(tga,prefab,txt)的文件中的txt文件即可!从而使Arimo的字符集格式还原回来!

另外:

UILabel还有一个Symbols选项,他有三个值:None,Normal,Colored,选择None,那么以 :) 这样形式显示的图片将不会展示,选择Normal(默认)将正常展示,选择Colored,那么图片将会被UILabel下的Color Tint所选择的颜色遮盖!其实这个Color Tint是对文字进行着色的,选择Colored那么也就是意味着图片也和文字应用同样的颜色!

其他属性

overflow:

1.ShrinkContent,总是显示所有文字,根据当前的width和height进行缩放
2.ClampContent,一看到Clamp就想起Clamp函数,也就是不管文本多少个字,根据当前的width和height来显示,超出部分 
不显示
3.ResizeFreely,会对当前的文字长度和行数来调整,UILabel的width和height,基本上是只在一行显示,超出的部分不显示
4.ResizeHeight,保持宽度不变,必要时增加高度。


Spacing :

X:设置字与字之间到间隔,可以为负数,设置得当可以反序

Y: 设置行与行之间的间隔。


Gradient :

设置 渐变字

Max Lines:

用来控制最多要多少行。用0表示不限制。如果设置成n的话,那么超过n的行的文字将不会显示!

 

实现动态文字展现的效果:

先上效果图:

 

层次:

content显示的是文字

bg显示是背景图(uisprite)

title是标题

第一步:先给content添加UIlabel和typewriter effect脚本:此脚本选项的解释如下:

chars per second:每秒显示多少个字符

fade in time:淡入时间

delay on period:延迟期

delay on new line:开始新行延迟时间

scroll view:需要指定scroll view

keep full dimentions:保持全部尺寸

第二步:

设置content组件uilabel的overflow(溢出方式)为ResizeHeight

第三步:

typewriter effect脚本的keep full dementions不要勾选,其他的默认即可

第四步:

设置bg背景图的UISprite的Anchors的Type为Unified(统一),Execute为OnUpdate,Target为mylabel即可!

Anchors的功能是:

物体A相对于所指定物体B的位置设置情况。可以设置离指定物体的上,下,左,右的偏移值,从而实现对齐,主要用在动态的效果的情况下,例如上面的title的位置就是相对于content而设置的,随着content文字的动态增加,title的位置也在不断的上移,实现对齐,避免位置错乱!这大概就是设置Anchors的好处吧!

这里我的title的anchors里面,只要设置了top+50即可,保持与content的顶部的距离即可,其他的可以不用设置!

target为指定物体B,而bg就是A,Execute指在更新时还是可用时去执行,type表示统一的还是高级的


출처 : http://www.cnblogs.com/MrZivChu/p/UILabel.html

반응형

'Unity3D > NGUI' 카테고리의 다른 글

NGUI: Symbols & Emoticons  (0) 2015.02.12
NGUI Emoticons  (0) 2015.02.12
Coloring individual characters in an NGUI UILabel text  (0) 2014.12.31
NGUI UILabel Reference  (0) 2014.12.31
NGUI UILabel BBCode  (0) 2014.12.31
Posted by blueasa
, |