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

카테고리

분류 전체보기 (2106)
Unity3D (470)
Programming (453)
Unreal (2)
Gamebryo (56)
Tip & Tech (162)
협업 (26)
3DS Max (3)
Game (12)
Utility (101)
Etc (88)
Link (29)
Portfolio (18)
Subject (90)
iPhone (30)
Android (2)
Linux (5)
잉여 프로젝트 (2)
게임이야기 (1)
Memories (16)
Interest (36)
Thinking (34)
한글 (23)
PaperCraft (5)
Animation (408)
Wallpaper (2)
재테크 (16)
Exercise (3)
나만의 맛집 (2)
냥이 (7)
육아 (2)
Total1,099,602
Today111
Yesterday326
Statistics Graph

달력

« » 2017.10
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

공지사항

태그목록

Tistory Cumulus Flash tag cloud by BLUEnLIVE requires Flash Player 9 or better.

GUI 최적화의 핵심은 정적인 UI 들과 동적인 UI 들을 나누는 것이다. 나누는 기준은 패널이다. 예를 들어 다음과 같은 하이어라키를 생각해볼 수 있다.




Panel1

정적인 UI들


Panel2

동적인 UI들




이렇게 하는 이유는 UI 가 갱신될 때마다 UI 가 속한 패널의 지오매트리가 재구성되기 때문이다. 재구성 작업에 많은 양의 가비지가 발생한다. 여기서 주의해야할 점은 위치 이동같은 기본 변환은 '갱신' 에 포함되지 않는다는 것이다. 지오매트리가 변해야 하는 작업들, 예를 들어 SetActive, UILabel 의 text 변경 등이 갱신에 포함된다.




패널의 UI 들중 하나라도 갱신이 되면 패널의 모든 UI 들에 대한 지오매트리 재구성 작업이 수행된다. 따라서 제일 최악의 시나리오는 패널을 루트에 단 하나 만들어두는 것이다. 이러면 UI 의 변경은 곧 씬의 모든 UI 들의 갱신이라는 결과로 작용한다.




동적인 UI 들 역시 하나의 패널로 몰아넣는건 같은 이유로 피해야 한다. 그렇다고 해서 패널의 개수를 너무 많이 늘려서는 안되는데, 패널 단위로 드로우콜이 분리되기 때문에 렌더링 성능은 낮아진다. 따라서 성능 측정을 결과로 패널의 개수를 조절할 필요가 있다.




출처: http://cacodemon.tistory.com/entry/NGUI-최적화의-핵심 [카코데몬의 잡동사니]

저작자 표시 비영리 동일 조건 변경 허락
신고
Posted by blueasa

댓글을 달아 주세요

I Just Modified UI Label Code 

From
   public string text
   {
      get
      {
         return mText;
      }
      set
      {
         if (string.IsNullOrEmpty(value))
         {
            if (!string.IsNullOrEmpty(mText))
               mText = "";
            hasChanged = true;
         }
         else if (mText != value)
         {
            mText = value;   <=== Here
            hasChanged = true;
         }
      }
   }


To
   public string text
   {
      get
      {
         return mText;
      }
      set
      {
         if (string.IsNullOrEmpty(value))
         {
            if (!string.IsNullOrEmpty(mText))
               mText = "";
            hasChanged = true;
         }
         else if (mText != value)
         {
            mText = value.Replace("\\n", "\n");  <== Here
            hasChanged = true;
         }
      }
   }


I Didn't consider performance :)




[출처] http://www.tasharen.com/forum/index.php?topic=4114.msg20026#msg20026

[참조] http://www.devkorea.co.kr/bbs/board.php?bo_table=m03_qna&wr_id=31752

저작자 표시 비영리 동일 조건 변경 허락
신고
Posted by blueasa
TAG NGUI, \n, 개행

댓글을 달아 주세요


[참조]

http://lab.gamecodi.com/board/zboard.php?id=GAMECODILAB_QnA_etc&page=1&sn1=&divpage=1&sn=off&ss=on&sc=on&select_arrange=headnum&desc=asc&no=3216



[링크]

 https://www.assetstore.unity3d.com/kr/#!/content/41707

저작자 표시 비영리 동일 조건 변경 허락
신고
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


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

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


사용법은 간단합니다.

스크립트에 멤버 변수로 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
TAG NGUI

댓글을 달아 주세요

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

댓글을 달아 주세요

  1. 2015.07.08 14:37 신고 지나가던 개발자  댓글주소  수정/삭제  댓글쓰기

    궁금한 점이 있습니다. 다른게 아니라
    위의 설정 중 UIPanel - SoftClip 으로 결정 시 안의 내용물들이 출력이 되지 않거나 처음에 잘되다가 스크롤하다보면 아이템이 사라지는 문제가 발생하는데요.

    혹 해결점을 알 수 있을까요?

    • 2015.07.15 17:42 신고 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

저작자 표시 비영리 동일 조건 변경 허락
신고
Posted by blueasa

댓글을 달아 주세요



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


저작자 표시 비영리 동일 조건 변경 허락
신고
Posted by blueasa

댓글을 달아 주세요