배틀레드_Part3_UI

양규빈·2023년 10월 28일

게임 유니티

유니티

목록 보기

7/34

구현

UI 컴포넌트

배틀 레드의 UI 컴포넌트는 프리팹화하여, 반복 작업을 최대한 줄이고 클래스에 의해서 맴버 함수나 변수 등을 연결 제어하였습니다.

또한, 각 컴포넌트는 기능에 따라서 TopCanvas, BottomCanvas, ControllerCanvas 계층 구조를 이루는 부모객체에 할당되어 표현됩니다.

버튼2

버튼 타입2 객체는 다음과 같이 인스펙터 상에서 개발자가 필요한 UI 스프라이트를 붙이고, 알파값을 조정하여 UI의 이미지 프레임을 제어할 수 있으며, Presse버튼에 직접 이벤트 리스너를 연결할 수도 있습니다.

이벤트 리스너는 게임의 시간이 정지되었는지의 유무에 따라서, 입력 반응을 무시하거나 혹은 입력 반응을 받아들이거나, 나뉠 수 있습니다.

즉, 시간이 정지되었을 때, 버튼이 클릭 이벤트가 발생하면 안 되는 객체와 버튼 클릭 이벤트가 발생해야 하는 객체가 있어야 하는 것입니다.

이는 게임 시간을 관리하는 게임매니저의 GetPauseActive() 값을 참조하여, TimeStop 여부를 확인하고 Return하여 기능을 구현했습니다.

Time Pause 환경에서 버튼 클릭의 시각적인 효과를 부여하기 위해서, inscaledDeltaTime을 이용하여, 0.2초 후에 알파값을 조정하는 코드를 추가했습니다.

InvenItemObj

InvenItemObj 객체는 스크롤 뷰에 출력되는 UI 오브젝트입니다.
빈번하게 객체를 생성하고 제거하는 특성 상, 오브젝트 풀 기법을 이용하여 관리하고 있습니다.

InvenItemObj 객체의 컴포넌트 계층 구조는 위와 같으며, 위 객체들은 InvenItemObjClass에 의해서 관리됩니다.

TopBgr은 아이템 사진을 표시하는 배경입니다. 아래 사진에서는 아이템의 성급에 따라서 달리 표현되는 배경을 나타냅니다.
이러한 TopBgr의 자식 객체로 배경의 Deco용 스프라이트, 아이템을 나타내는 스프라이트, 착용 상태를 나타내는 스프라이트가 존재합니다.

BottomBgr은 간단한 아이템의 데이터를 출력해줍니다.
TextMeshProUGUI를 자식 객체로 갖습니다.

이외에도
선택된 아이템을 표시하기 위한 Select_Img 객체, Button 기능을 추가하기 위한 버튼 컴포넌트가 있습니다.

위 사진은 인게임의 스크롤뷰 상에서 표현되는 InvenItemObj 객체입니다.

InvenItemObjClass의 맴버 메서드들입니다.
객체의 자식 UI 컴포넌트들의 데이터를 수정하고 제어하는 기능을 가지고 있습니다.

SelectButton

SelectButton 또한 InvenItemObj 객체와 마찬가지로, 오브젝트 풀에 의해서 관리되고 있습니다.

상단의 이미지는 인게임 상에서 출력되는 SelectButton 객체입니다.

마찬가지로 InvenItemObj와 유사하지만, 조금 더 간단한 계층 구조를 갖는다는 점에서 차이가 있으며,

InvenItemObj 객체는 오로지 스크롤뷰의 Content에서 사용되는 목적으로 설계되었으며, ContentSizeFitter와 LayoutGroup에 의해서 객체의 사이즈가 사이즈가 조절되고 출력되지만,

SelectButton 객체는 스크롤뷰 뿐만이 아니라, 특정 좌표 포인트에서 풀링되어 생성될 수 있기 때문에, 스스로 일정한 크기의 UI 형태를 가지고 있다는 점에서 차이가 있습니다.

SelectButton 객체를 제어하는 클래스 파일인 SelectButtonScript의 맴버 함수입니다.

함수의 기능은 대체로 InvenItemObj와 유사합니다.
클릭을 가시적으로 표현하기 위한, 알파값 제어 함수.
그리고, TopBgr 객체의 컬러를 수정하는 함수 등이 있습니다.

또한, 게터와 세터가 존재를 통해서, 객체의 데이터를 수정할 수 있습니다.

ItemMaterialViewObjectSet && SelectionButtonOnList

ItemMaterialViewObjectSet는 성유물과 무기 등의 강화용 재화 출력을 위한, 스크롤뷰 객체입니다.
스크롤 뷰의 출력 데이터를 필터링하는 정렬 버튼 등을 자식 객체로 가지고 있습니다.

이러한 스크롤뷰 세트 객체는 객체 자체를 종합 관리하는 클래스 파일은 따로 존재하지 않습니다.

다만 프리팹으로서 하이어라키에 인스턴스화했을 때, 계층 구조가 동일하기 때문에, 코드를 재사용할 수 있다는 점에서 장점이 있습니다.

상단의 객체는 SelectionButtonOnList 객체입니다.
버튼 세 쌍을 세트로 묶은 해당 객체는 InventorySortSelectButton 클래스 파일에 의해서 제어됩니다.

상단의 이미지가 인게임 상에서 선택된 SelectionButtonOnList 버튼 객체의 UI 출력 화면입니다.

클릭 이벤트 리스너 함수입니다.
세 개의 버튼을 유기적으로 관리해야하기 때문에, 선택한 인덱스를 이용해서, 버튼의 UI를 수정합니다. 또한 order 타입을 지역 변수에 저장하여, Getter를 이용해, 현재 선택된 정렬 순서를 반환해줍니다.

상단의 두 함수는 기능적으로는 유사하지만, 구체적으로 switch문의 표현식이 다릅니다.
정렬 타입에 따라서, 바뀌느냐.
혹은 번호에 따라서 바뀌느냐가 차이입니다.

상단의 함수가 선택한 버튼 객체의 UI를 활성화 시키는 함수입니다.
즉, 로직의 흐름을 보자면, 전체 UI Off -> 선택한 UI On 순서로 이뤄지는 것입니다.

버튼 객체가 지니고 있는, 텍스트를 수정하는 함수입니다.

UserInfoBtn_Frame_Image

UI의 대분류를 표현하기 위한 객체입니다.
캐릭터/무기/성유물 등. 정보 출력을 위한 최상단의 데이터 타입을 표현해줍니다.

UserInfoBtn_Frame_Image의 자식 객체인 Inside_Image은 Animator 객체를 가지고 있어, 클릭된 상태임을 애니메이션을 통해서 알려줍니다.

위와 같이 Inside_Iamge를 SetActive(true/false)를 제어하여, 애니메이션을 출력하거나 Off할 수 있습니다.
이는, Inside_Iamge에 설정된 애니메이션이 Defualt로 재생이 되기 때문입니다.

OnButtonClick() 함수를 통해서, UI매니저에, 현재 클릭된 버튼 객체의 인덱스 값을 송신합니다.
인덱스는 public을 통해서, 인스펙터 상에서 수정합니다.

또한, 클릭된 객체는 이미지와 텍스트의 크기 등을 수정하고, Inside_Iamge 객체를 활성화하여, 애니메이션을 재생시키도록 합니다.

UI_HP바 & 데미지 텍스트

에너지바 클래스

HP바는 몬스터와 플레이어의 체력을 가시적으로 확인할 수 있기에, 필요한 시스템입니다.
기본적으로 플레이어의 Hp바나 몬스터 Hp바는 구조적으로 동일하게 작동합니다.
즉, EnergyBarManager 클래스를 상속하여, 각각 플레이어와 몬스터 객체에 맞게 수정하여 구현했습니다.

몬스터의 hp바 UI와 플레이어의 hp바 UI의 부모 클래스가 되는 클래스입니다.

Hp바 Init을 이용하여, 먼저 객체의 현재 체력을 입력받습니다.
이후, 데미지 계산 혹은 회복 프로세스를 거쳐서 현재 체력에 변화를 주고, HpBarFill_End함수를 호출하여, 바뀐 값만큼 코루틴 함수 UpdateHpOverTime를 이용하여, 점진적으로 체력을 깎아냅니다.

마지막으로 UpdateHpBar함수는 최대 체력과 현재 체력을 계산하여, 각 %에 비례하여, 그라데이션을 주는 기능을 하는 함수입니다.

플레이어의 HP바

플레이어의 hp바는 UI매니저에 상속되어 관리됩니다.

필요한 UI 오브젝트를 직렬화를 통해 저장합니다.
이후, 데미지 계산 로직 때 상속받은 에너지바 클래스의 함수를 호출하여, ui를 수정합니다.

이러한 hp바 객체는 BottonCanvas에 부착되어, 플레이어의 카메라에 따라갑니다.

몬스터의 HP바

몬스터 hp바는 오브젝트 풀에 의거하여 제어됩니다.
이는 몬스터의 생성과 함께 보여져야 할 hp바의 특성 상, 빈번하게 객체의 소멸과 생성이 반복되기 때문입니다.

그렇기에, 몬스터를 총관리하는 몬스터 매니저 클래스에서 MonsterHp 클래스를 저장하고, 객체의 소멸 시에, 해당 클래스를 ReturnPool하는 방식으로 관리됩니다.

카메라와 연결된 캔버스 Render된 유저 hp바와 다르게 몬스터의 hp바는 몬스터의 머리 위에 떠 있어야 합니다.
그렇기 때문에, 수시로 몬스터의 위치를 파악하고, 필요한 위치로 이동시키는 작업이 필요합니다.

localPos값을 이용하여, UI 캔버스 내에서 hp바의 위치를 조정합니다.
이때, localPos는 몬스터의 위치를 UI 캔버스 내의 위치로 매핑한 값입니다.

monsterPos는 몬스터를 기준으로 일정 y축 이상 지점을 저장하는 Vector3 변수입니다.

플로팅 데미지

플로팅 데미지는 몬스터가 피해를 입은 데미지 값을 출력하는 시스템입니다.
기본적으로 hp바의 구현 방식과 유사하게 동작하지만, 애니메이션을 통해서 객체의 알파값과 y축이 제어되고, 일정 프레임에서 객체가 파괴된다는 점에서 차이가 있습니다.

그렇기 때문에, hp바는 EnergyBar클래스를 상속받은 객체를 생성하여, 몬스터나 플레이어 객체의 소멸 지점까지 하나의 객체를 이용하여 hp바의 계산을 관리하지만,

플로팅 데미지는 텍스트 출력 전체를 담당하는 DamageTextManager 클래스를 이용하여,필요한 객체를 적절한 타이밍에 생성한다는 점에서 차이가 있습니다.

CreateFloatingText 함수가 호출될 경우, 매개변수를 이용하여 FloatingText 객체를 생성합니다.
이후, 인스턴스한 FloatingText 객체와 몬스터 위치, 텍스트 데이터를 저장한 FloatingTextData 객체에 저장합니다.

이렇게 저장한 데이터들은 리스트에 보관되어 Update를 통해서, 주기적으로 위치 데이터와 텍스트 데이터를 송신합니다.

애니메이션의 엔드 프레임에서는 AnimationEnd 함수가 호출되어, 파괴되는 객체와 동일한 객체를 리스트에서 제외합니다.

FloatingText 클래스

플로팅 텍스트 클래스는 실질적으로 데미지 텍스트를 출력하는 객체입니다.
애니메이션을 이용하여, 알파값과 y축이 변화됩니다.

업데이트에서는 객체가 카메라의 경계를 벗어나지 않도록 보정되며, 좌표 위치와 스케일 값을 조정합니다.

또한, 객체 파괴를 위한 코루틴 함수를 호출합니다.

AnimationPlayTime 함수는 애니메이션의 플레이 타임 동안 대기하는 코루틴 함수입니다.
대기 시간이 지났다면, 플로팅 데미지를 관리하는 DamageTextManager클래스의 GetAnimationEnd() 함수를 호출하여, 객체를 제거합니다.

이후, 자기 자신을 Destroy합니다.

UI_인벤토리

인벤토리는 플레이어가 보유한 아이템들을 출력하는 기능입니다.
보통의 RPG 게임에서는 반드시 등장하는 시스템이기도 합니다.

플레이어는 인벤토리를 활용하여, 아이템을 착용하거나 소모하여 게임 플레이에 도움을 얻을 수 있습니다.

배틀 레드에서는 우측 상단에 인벤토리 버튼이 있으며, 해당 버튼을 터치할 시에 인게임의 시간이 정지되고 인벤토리 창이 출력됩니다.

이렇게 출력된 인벤토리 창은 위와 같은 폼으로 구성되어 있습니다.
좌측에는 각 객체들을 태그 별로 묶는 타입 선택 버튼.
우측에는 아이템 사용 버튼과 인벤토리 창 종료 버튼.

하단에는 인벤토리 정렬 버튼이 존재하며, 중앙에는 선택한 타입의 아이템들을 스크롤뷰로 출력합니다.
중앙의 우측, 즉 사용 버튼의 상단에는 선택한 아이템에 대한 데이터를 출력하는 UI 프레임이 있습니다.

버튼 컴포넌트 스크립트

인벤토리 오픈 버튼

게임매니저의 PauseManager를 호출하여, 인게임 시간을 정지시킵니다.
이후, 인벤토리 창 오브젝트를 활성화하며, 디폴트 타입을 선택하고, 스크롤뷰 출력 함수를 호출합니다.

인벤토리 종료 버튼

인벤토리 종료 버튼을 누르면, 오픈 버튼과 반대로 게임 시간을 흐르게 하고, 인벤토리 창을 비활성화 합니다.

클릭체크 변수는, 인벤토리의 타입 선택 버튼이 중복으로 선택되지 않도록 관리하기 위한 제어 플래그입니다. false로 초기화 해줍니다.

사용하기 버튼

사용하기 버튼은 플레이어가 어떤 아이템을 선택했는지에 따라 다른 기능을 구현합니다.
그렇기에 invenTypeIndex에 의하여 분기하여, Weapon, Equip, Gem, Food를 선택하고 각 태그에 맞는 기능을 구현합니다.

유저가 보유한 아이템 객체는 GameManager에서 관리하는 UserClass의 맴버 변수인 HadWeaponList, HadEquipmentList, HadGemList, HadFoodList 등에 저장됩니다.

무기와 성유물 타입의 아이템을 선택한 후에 사용하기 버튼을 클릭하면, 아이템을 장착합니다.

먼저 기존 아이템의 착용 상태를 해제합니다.
그리고 선택한 아이템을 기준으로 HadWeaponList와 HadEquipmentList 내의 객체를 찾아와, 해당 객체를 ActiveTrue 상태로 바꾸어, 활성 상태로 바꿉니다.

마지막으로 Equip장비를 관리하는 Equipped~List에 장착한 객체를 할당해줍니다.

아이템 타입이 Food일 경우에는 사용 버튼을 눌렀을 때, 아이템을 소비해야 합니다.
현재, 아이템의 소비 효과는 아직 구현되지 않은 상태이며, GetNumber()를 확인하여 1 초과일 경우에는 number를 감산. 1 이하일 경우에는 객체를 제거하는 코드를 구현했습니다.

InventoryButton

InventoryButton 객체는 플레이어가 아이템 타입을 선택할 수 있는 버튼 오브젝트의 클래스입니다.

객체가 클릭되면, 필요한 UI 변수를 Enabled =true/false로 제어하여, 버튼이 클릭되었음을 알립니다.

또한, UI매니저의 instance를 통해서, 선택된 객체를 송신합니다.

objectIndex는 SerializeField 형태로 직렬화 되어, 외부에서 조정됩니다.

스크롤뷰 출력

선택한 인벤토리 타입을 인덱스로 받습니다.
이때, 만약 선택한 타입이 이미 출력 중이라면, 부울 변수로 확인하여 Return합니다.
이는 중복하여 UI 오브젝트를 출력하지 않기 위함입니다.

스크롤뷰의 데이터를 정렬하는 SortSelectionButtonOnList 객체의 텍스트 데이터는 수정되어야 하기 때문에, TextRevise() 함수를 호출합니다.

여기서 SortSelectionButtonOnList 객체는 상단의 UI 컴포넌트 파트에서 설명했던 SelectionButtonOnList 오브젝트의 클래스입니다.

ViewProcess() 함수는 스크롤뷰를 리셋하고, 인덱스에 맞는 데이터를 출력하는 기능을 담당하는 함수입니다.

즉, 새로운 타입을 선택할 때마다, 리셋되어 새로운 아이템 데이터를 출력할 때 사용됩니다.

인덱스에 따라 분기하여, 스크롤뷰 데이터 프린트 함수를 호출하는 함수입니다.

ScrollViewReset() 함수는 모든 스크롤뷰에 출력할 UI 객체를 모두 ReturnToPool()합니다.
즉, 스크롤뷰를 깨끗이 청소하는 기능을 담당합니다.

HadItemList를 순회하며, 데이터를 출력할 InvenItemObjClass에 아이템 클래스의 데이터를 삽입합니다.

아이템의 이름을 조건문으로 돌려서 스프라이트를 결정합니다.
이후, 아이템 등급에 따라 백그라운드 컬러를 조정하며,
보유한 개수를 출력, 그리고 Active를 True로 설정하고 InvenItemObjClass의 맴버 변수에 해당 아이템 클래스를 할당하여, 추후 데이터를 활용할 수 있도록 합니다.

GemPrintAtScroll()과 로직의 구조는 동일합니다.
다만, GetPool하는 객체와 게임매니저에서 가져올 보유 아이템 리스트에 차이가 있을 뿐입니다.

UI_Tool

Weapon, Equip의 스크롤뷰 출력 함수는 UI 매니저를 돕는 UI_UseToolClass의 정적 함수를 통해서 데이터를 출력합니다.

이는, 무기와 성유물의 경우, 여러 UI 출력 파트에서 사용되기 때문입니다.

또한, 데이터 정렬 함수도 이와 마찬가지로 UI_UseToolClass 클래스의 맴버 static 함수로 존재하여, UI매니저에서 필요에 따라, 호출되어 데이터를 정렬합니다.

정렬 함수입니다.
기본적으로 Active가 true인 객체는 우선해서 앞으로 당깁니다.
왜냐하면, 플레이어가 장착한 아이템의 경우에 Active가 true로 세팅되기 때문입니다.

먼저 데이터 리스트를 active인 객체를 담는 리스트와 active가 아닌 객체를 담는 리스트로 나눕니다.

이렇게 나눈 리스트는 e_SortingOrder에 따라서 조건문으로 나누어, 정렬의 우선순위를 구분합니다.

content : UI 객체를 출력할 스크롤뷰_콘텐트의 Transform
selected_SortOrder : 정렬 우선순위 열거형 변수
isAscending : 정렬 오름차/내림차순 변수
openUI_ItemList : 편집한 InvenItemObjClass를 저장하는 리스트 변수

또한 이때 신경써야 하는 부분은 정렬이 오름차순으로 이루어지는지, 내림차순으로 이루어지는지 입니다.

이는 bool 파라미터인 isAscending을 이용하여 확인합니다.

즉, 정렬 함수의 흐름은 다음과 같습니다.

최초 데이터를 active에 따라 나눔 → active==true인 리스트를 먼저 정렬 → active==false인 객체를 정렬 → 나눈 데이터를 병합, 이대 우선하는 것은 active를 저장하는 리스트

무기 아이템 데이터를 스크롤뷰 상의 InvenItemObjClass 객체에 출력하는 함수입니다.
전체적인 로직의 구조는 상단에서 설명한 Gem, Food의 프린트 함수와 같지만, 객체의 다형성을 보장하기 위하여, 여러 파라미터를 입력받는 것이 특징입니다.

그리고 무기 객체의 스프라이트를 세팅하는 기능을 외부 함수로 분리했다는 점에서 차이가 있습니다.
이는, 무기 아이템 클래스의 스프라이트를 참조하는 상황이 빈번하기 때문입니다.

성유물을 출력하는 EquipPrintAtScroll() 함수는 상단의 WeaponPrintAtScroll() 함수와 동일한 로직 구조를 띄고 있습니다.

다만, openUI_ItemList에 디폴트 변수를 설정하여, null일 경우에, List에 Add하지 않는 로직을 추가했습니다.

무기 데이터를 파라미터로 입력받아, 해당하는 스프라이트를 설정하고,
스탯의 라벨과 값을 설정해주는 함수입니다.

필요에 따라 적절히 변수를 호출하여 사용할 수 있게, 각 변수마다 디폴트 값을 설정하여, null이 아닐 경우에만 무기 이미지 스프라이트를 설정하거나 무기 스탯과 값을 초기화할 수 있도록 하였습니다.

마찬가지로 성유물의 데이터를 입력받아 성유물 이미지, 스탯 라벨, 스탯 값을 설정해주는 함수입니다.

성유물은 무기와 다르게, 성유물의 부위(태그)에 따라서 다른 스탯을 보유하고 있기 때문에, 조건문을 세세하게 설정해주어야 합니다.

스크롤뷰 정렬

인벤토리의 아이템은 플레이어가 선택한 기준에 따라서 정렬되어 재배치될 수 있습니다.
이는 상단에서 소개했던 정렬 함수를 응용한 기능입니다.

Descending_AscendingButton()함수는 내림차순과 오름차순 상태를 저장하는 isAscending값을 변경한 후에, 스크롤뷰 출력 함수를 호출합니다.

SortSelectionButton() 함수는 정렬 순서 선택 기능을 실제로 담당하는 InventorySortSelectButton객체를 활성화하여 플레이어가 원하는 정렬 순서를 선택할 수 있도록 해줍니다. (상단의 푸른 동그라미가 쳐진 부분이, SortSelectionButton() 함수가 활성화 시켜주는 UI 객체입니다.)

GetSortIndex() 함수는 리스트 버튼. 즉, 정렬 선택 버튼 클릭시에, 해당하는 정렬 값을 Get하는 기능을 가지고 있습니다.

선택된 정렬 타입에 따라서, 현재 정렬 필터 상태를 표시하기 위한 텍스트 수정 함수입니다.
즉 하단 버튼의 '희귀도'라 쓰여있는 텍스트를, 현재 정렬 타입에 따라서 바꿔주는 함수입니다.

아이템 선택 및 데이터 출력

스크롤뷰에 출력된 아이템을 플레이어가 임의로 선택했을 때, 호출되는 함수들입니다.
만약 버튼이 이미 클릭된 상태라면, ExpressFrameReset()를 호출하여, 정보 출력창을 SetFalse.
그렇지 않다면, ClickedItemNotifyed() 함수를 호출하여, 선택한 아이템 객체의 정보를 출력합니다.

데이터의 출력 UI와 선택된 아이템 객체는 위와 같습니다.

PlayerInfoScreen_기본 함수

PlayerInfoScreen 오브젝트는 플레이어 캐릭터의 데이터 출력을 담당합니다.
플레이어블 캐릭터의 자체 능력치.
플레이어가 착용한 무기.
플레이어가 착용한 성유물(장비). 등을 확인할 수 있습니다.

인벤토리 버튼 객체의 좌측에 위치한, 아이콘이 PlayerInfoScreen 오브젝트를 출력하는 버튼입니다.

만약 플레이어가 버튼을 눌렀다면, 해당 UI가 출력되는 것을 확인할 수 있습니다.
상단의 그림으로 확인할 수 있다시피, PlayerInfoScreen 오브젝트의 전체적인 UI 구조와 시스템은 원신의 인게임 UI 시스템을 모방하여 구현했습니다.

오브젝트 On/Off

플레이어 인포 출력을 위한, On 버튼 클릭 함수입니다.
디폴트 출력을 초기화한 후에, CharaceterInfoPrint() 함수를 호출하여, 데이터를 출력하도록 합니다.

마지막으로 게임매니저의 PauseManager를 호출하여, 게임의 시간을 동결시킵니다.

플레이어 인포 출력의 Off 버튼은 On과는 다르게 비교적 복잡한 분기에 따라서 기능이 나누어집니다.

이는, UI의 특성상, 레이어 위에, 또 레이어를 쌓아서 데이터를 출력할 수 있기 때문입니다.
예컨대, 무기 기본 데이터 출력 -> 무기 강화창 출력 -> 무기 강화 재료 프린트 등으로, UI위에 UI를 또 쌓아서 표현할 수 있습니다.

이렇게 출력된 데이터들은, Close 버튼 객체에서 분기하여, 현재 최상단에 올라온 UI를 제거할 수 있도록 구현했습니다.

즉, 쌓여있는 레이어들을 역순으로 제거하기 위한, 조건 분기입니다.

기본 데이터 출력

인포 타입 버튼 클릭 시, 혹은 UI창 오픈 시에 호출되는 함수입니다.
현재 선택된 인덱스에 따라서, 어떤 데이터를 출력할지 구분하고 관련 함수를 호출하는 기능을 가지고 있습니다.

상태창(디폴트)
무기
성유물

까지 구현되어 있으며, 관련 객체를 SetAtcive합니다.
버튼 오브젝트는 UI컴포넌트 파트에서 설명한, UserInfoBtn_Frame_Image 객체와 동일합니다.
선택된 객체의 애니메이션을 동작시키고 UI를 수정하기 위해서 OnOffSpriteSetting() 함수를 호출합니다.