퀘스트 시스템 UI변경 및 적용 (1)

이재형·2025년 8월 1일

MinerFergus 개발 정리

목록 보기
8/10

퀘스트 UI를 변경

퀘스트 UI를 변경하는 이유

찾고자하는 퀘스트를 찾기 위해 마지막 퀘스트까지 봐야하는 불편함을 확인하였고
퀘스트 한번에 볼 수 있고 상세하게 퀘스트의 내용을 알 수 있도록 변경을 해봤습니다.

변경 전 이미지

수주한 퀘스트가 다양할수록 페이즈를 계속 넘겨야하는 불편함이 존재


변경 후 이미지

메인퀘스트와 서브퀘스트를 나뉘고 퀘스트의 이름으로 선택하여 퀘스트의 정보를 더 쉽게 찾을 수 있도록 설계

사용한 Component

Vertical Rayout Group: 퀘스트 슬롯을 정렬하는데 사용
ScrollView: 많은 퀘스트를 확인하는데 사용


코드를 작성하여 퀘스트 정보 전달 및 반영

퀘스트를 받거나 게임을 이어할 때 퀘스트 슬롯을 생성

public void InstantiateQuest(Quest quest)
{
	// 퀘스트 슬롯 생성
    GameObject slot = Instantiate(slotPrefab, slotParent);
    if (quest.quest.isMain)
    {
        slot.transform.SetSiblingIndex(1);
    }
    else 
    {
        slot.transform.SetAsLastSibling();
    }

    slot.SetActive(true);
    slot.GetComponent<UI_QuestSlot>().SetQuest(quest);
    
    // 퀘스트 창을 열 때 처음 받는 퀘스트를 선택되게 설정
    if(currentQuestSlot == null)
    {
        currentQuestSlot = slot.GetComponent<UI_QuestSlot>();
        currentQuest = currentQuestSlot.quest;
        currentQuestSlot.UpdateColor(true);
    }
}

퀘스트 슬롯을 클릭시 퀘스트 정보 변경

public class UI_QuestSlot : MonoBehaviour
{
    [HideInInspector]
    public Quest quest;
    public TextMeshProUGUI questName;
    public Image questImg;
    public UI_QuestView questView;

	// 버튼에 등록한 메서드로 슬롯을 클릭하면 자신의 퀘스트의 정보로 변경됨
    public void ViewQuest()
    {
        questView.SetQuest(quest, this);
        UpdateColor(true);
    }

퀘스트뷰 클래스로 넘어가 클릭한 Quest의 정보를 Text에 출력

// 클릭한 퀘스트의 정보를 변수에 저장
public void SetQuest(Quest quest, UI_QuestSlot slot)
{   
	// 선택되어있는 퀘스트슬롯이 없으면 퀘스트슬롯의 색 변경 X
    if (currentQuestSlot != null)
    {
        currentQuestSlot?.UpdateColor(false);
    }
    currentQuestSlot = slot;
    currentQuest = quest;
    ViewQuest();
}

// 클릭한 퀘스트의 정보를 출력
public void ViewQuest()
{
    if (currentQuest.quest == null)
    {
        noneText.SetActive(true);
        questTextArea.SetActive(false);
    }
    else
    {
        noneText.SetActive(false);
        questTextArea.SetActive(true);
        questName.text = currentQuest.quest.questName;
        questDay.text = $"{currentQuest.day}일";
        questNpc.text = $"NPC: [{currentQuest.quest.npc}]";
        questDes.text = currentQuest.quest.description;
        int currentItemCount = InventoryManager.Instance.inventory.CheckItemCount(currentQuest.quest.item, currentQuest.quest.itemLevel);
        questGoal.text = $"{currentQuest.quest.item.itemName} {currentQuest.quest.amount}개 제작 ({currentItemCount}/{currentQuest.quest.amount})";
        questExpReward.text = "경험치: " + currentQuest.quest.exp.ToString() + " Exp";
        questGoldReward.text = "골드: " + currentQuest.quest.gold.ToString() + " G";
    }
}

인게임 테스트 사진

profile
한국사람

0개의 댓글