GameForFun

NGUI를 잘 다루기 위해서는 위의 2가지를 잘 알아야 ui를 원하는 순서대로 그릴 수 있다.

Panel - 한 화면이라 생각하면 편하다.
Depth - 깊이인데, 0에 가까울수록 깊고, 값이 클수록 더 앞에있는 UI이로 정의된다.

Panel을 한 화면이라고 말한 이유는 Panel의 Depth가 최우선시 되기 때문이다.
가령 Panel1의 Depth를 1, Panel2 - Depth 2라고 가정하고,
Panel1 안에 여러 ui를 넣고 그 UI들의 Depth를 100000,200000 이렇게 설정한다 한들, Panel1안에 있는 UI들은 Panel2가 그려지기 전에 그려진다.
이유는 간단하다, Panel1의 Depth가 Panel2의 Depth보다 작기 때문이다.

또 한가지 헷갈리는것이 바로 Parenting인데, Panel2가 Panel1의 자식에 속해있다고 해서 Panel2 자체를  Panel1안에 존재하는 오브젝트로 보지 않고, 다른 오브젝트로 보게 됨으로 이를 주의하도록 하자.

이름(Depth)
Panel1(1)

    Object1(20000)
    Object2(30000)
    Panel2(2)
        Object3(3)
        Object4(4)
    Object5(2)

위의 예시를 보면 Panel1안에 Panel2가 있지만 Panel2 안의 오브젝트들은 전부 Object1, Object2, Object5가 그려진 다음에 그려진다.

따라서 UI가 그려지는 순서는 다음과 같은 흐름으로 그려진다고 보면 된다.
Panel들을 Depth순으로 정렬 -> Depth가 가장 작은 Panel안에 있는 오브젝트들 정렬 한 뒤 그리기. -> Panel을 순차적으로 마저 그린다.

http://www.g4tv.com/thefeed/blog/post/722573/thatgamecompany-programmer-details-the-sand-technology-in-journey/

-요약-

1 - 3장의 height map을 이용 
1.1 지형 height map 
1.2 모래파도 height map(바람불때 모래가 쓸려나가는 효과)
1.3 loose sand height map - 플레이어 주변의 모래 높이를 결정 (플레이어가 움직이거나, 넘어질때 파이는 효과를 위한 height map인듯)

2 - Texture사용 
모래가 반짝이는 표현은 텍스쳐를 이용해서 했다는데....  더 찾아봐야할듯.

이제 시대에 뒤떨어진 EZGUI를 뒤로 버리고

Next Generation UI인 NGUI를 익히고자 이 글을 쓴다.

먼저 NGUI를 얼추 만지고 나서의 느낌은 [간편] 하다의 느낌이 강했다.

EZGUI에서는 여러가지의 옵션설정으로 인해 Inspector창이 지저분했고, 애니메이션 시스템도 복잡하여 사실상 애니메이션은 따로 스크립트를 통해 진행했었는데,  NGUI의 경우 대부분의 기능들이 아주 기본적인 요소은 UISprite를 재활용하여 진행하는 방식이라 간단하면서도 한편으로는 조합을 통해 더욱 다양하게 UI를 원하는데로 조작할 수 있음을 느꼈다.

UISprite의 재활용이라 함은,  가령 체력바와 같은 ProgressBar의 경우 뒷판인 Background, 앞에 게이지가 찰 ForeImage를 각각의 UISprite로 배치한뒤, ForeImage 내부인자인 FillAmount를 조절하여 ProgressBar를 구현하는데, 이는 UNITY3D의 기능과 유사하게 레고를 조립하는 느낌으로 만들어 진것 같다.

NGUI에서 Atlas의 관리법은 다음처럼 이루어진다.

Atlas를 생성할 오브젝트를 만들고 -> UIAtlas라는 Component를 추가 -> 여기에 원하는 Material을 설정한 뒤, 원하는 이미지들을 추가해주면 Atlas 오브젝트가 생성되는데, 추가된 이미지들은  해당 Atlas 데이터에서 이름으로 검색이 가능하다.

Atlas 자체를 GameObject형태로 관리하는것에서의 장점은 외부로부터 생성된 Atlas를 언제나 동적으로 사용 가능하다는 것에 있는것 같다.

기존에 EZGUI는 Atlas가 생성이되면 그 Atlas에 대한 설정은 우리가 맘대로 볼 수 없는 형태였는데 NGUI같은 경우에는 특정 Atlas에 들어있는 이미지는 해당 이미지 이름으로 값을 얻어 올수 있는 구조이기 때문에,  언제든지 외부에서 새로운 Atlas를 Asset형태로 불러올 수 있고, 해당 Atlas에 속해있는 이미지의 이름만 알면 언제든지 그 이미지를 사용할 수 있다.

여기에 잠시 Atlas를 asset형태로 만들고 외부에서 새로운 atlas를 불러오는 기능을 만들어보자면 다음과 같다.

먼저 assetbundle을 만들 코드를 생성하자.

using UnityEditor;
using UnityEngine;
using System.Collections;

public class ImageBundleCreator : Editor {

//메뉴에 AssetBundleCreate이라는 항목 아래 CreateImageAsset버튼이 생기는 명령어.
	[MenuItem("AssetBundleCreate/Create Image Asset")]
	public static void CreateImageBundle()
	{
		string path = EditorUtility.SaveFilePanel("Save ImageBundle","","ImageBundleAsset","");

		Object[] selection = Selection.GetFiltered(typeof(Object), SelectionMode.DeepAssets);

		foreach(Object o in selection)
		{
			Debug.Log(o);
		}

		BuildPipeline.BuildAssetBundle(null,
			selection,
	       path,
	       BuildAssetBundleOptions.CollectDependencies | BuildAssetBundleOptions.CompleteAssets | BuildAssetBundleOptions.UncompressedAssetBundle,
	       BuildTarget.Android);

		Debug.Log("IMAGE BUNDLE CREATED");
	}
}

위의 스크립트를 생성하고, Atlas오브젝트를 Asset으로 만든뒤 해당 Asset을 클릭한 상태에서 Createa Image Asset을 눌러주자.

그 뒤 외부에서 Atlas AssetBundle을 읽어올 Manager스크립트를 다음과 같이 작성.

using UnityEngine;
using System.Collections;

public class ImageBundlemanager : MonoBehaviour {

	public string path ;

	public UISprite m_Sprite;

	public AssetBundle m_AssetBundle;
	public UIAtlas m_Atlas;
	public string m_SpriteSpriteName;
	// Use this for initialization
	void Start () {
		path = Application.dataPath + "/../Documents/ImageBundleAsset.zip";
		//m_AssetBundle = AssetBundle.CreateFromFile(path);
		LoadCostumeBundle();
		//m_Atlas = (UIAtlas)m_AssetBundle.Load("ImageBundle");
	}
	
	// Update is called once per frame
	void Update () {
		if(Input.GetKeyDown(KeyCode.A))
		{
			m_Sprite.atlas = m_Atlas;
		}

		if(Input.GetKeyDown(KeyCode.Space))
		{
			m_Sprite.spriteName = m_SpriteSpriteName;
		}
	}


	public void LoadCostumeBundle()
	{
		StartCoroutine(ELoadCostumeBundle());
	}
	
	public IEnumerator ELoadCostumeBundle()
	{		
		//while(!m_WeaponBundleDone)
		//{
		//	yield return new WaitForFixedUpdate();	
		//}
		WWW url = new WWW("file://"+path);
		int framecount = 0;
		while(url.progress != 1)
		{
			framecount++;
			yield return new WaitForSeconds(0.5f);	
		}	
		yield return new WaitForSeconds(0.5f);
		yield return url;
		m_AssetBundle = url.assetBundle;
		if((m_AssetBundle == null || url.bytes.Length == 0 || url.error != null))
		{
		}else
		{
			url.Dispose();
			url = null;
		}

		Object o = m_AssetBundle.Load("ImageBundleObject");
		Debug.Log(m_AssetBundle.Contains("ImageBundleObject"));

		m_Atlas = ((GameObject)o).GetComponent();

		Debug.Log("ImageBundle Set");
		yield break;
	}
}

이제 Manager를 만들어주고 m_SpriteSpriteName을 설정한 뒤 Space를 눌러주면 외부에서 불러온 Atlas의 m_SpriteSpriteName이 m_Sprite의 이미지로 설정이 된다.