[공모전 활동] Unity 추리 시스템 구축 - 버튼 클릭 이벤트 & 선택지 분기

 

 

 서두

이번 글은 저의 개인적으로 공부와 공모전 활동을 정리하고자 하는 글이므로 정답이 아니라는 점.  "이렇게 했구나" 정도로 생각하여 참고용으로만 봐주시길 바랍니다. 코딩에는 정답이 없으니깐요.

 

https://www.gigdc.or.kr/game/item.php?it_id=1688204158&ca_id=6020&findType=&findType2=&findType3=20&findWord=&page=6&sort1=&sort2= 

GIGDC

참가한 공모전 정보는 위 사이트 링크를 통해 알 수 있습니다. 첫 협업과 공모전 활동이기에 현재는 정말 정신이 없네요..

완성을 할 수 있을까? 하는 걱정이 구현하는 매 순간 생각이 나지만, 시간이 흐르면 이것도 경험이자 추억이므로 일단 최선을 다해보려고 합니다..

 

 

 

 

 

 

 추리 시스템 구축

 

 

구현하고자 하는 추리 시스템 흐름은 이렇습니다. 일단 아직 디자이너분들 작업이 끝나지 않았으므로 혼자서 더미 데이터를 이용해 시스템을 구축하고 있습니다. 

 

 

들어갈 공간 클릭 시 아이템 리스트 뜨기

 

리스트 내 항목 선택 시 항목 반영하기

 

사진으로 보기 좋게 요약을 해보았습니다. 반영하고 싶은 공간 클릭 시 증거 목록이 뜨게 되고, 목록 리스트 중 항목 선택 시 그 항목이 공간에 반영될 수 있도록 하는 것이죠.

 

추리게임 - 당신의 안녕을 위하여

 

이와 제일 비슷한 추리 시스템으로 "당신의 안녕을 위하여" 게임을 참고하실 수 있습니다.

 

 

 

 

1. Canvas를 추가합니다.

2. 반영할 공간 Panel 과 리스트 항목을 담을 Panel을 즉, 2개의 Panel을 만들어 줍니다.

 

 

 

만들어지면 이런 구조가 됩니다. 전 Guess Panel에 Grid Layout Group을 넣어주어 보기 좋게 만들어 주었습니다.

 

 

이제 원하는 작동을 하도록 코드를 짜야 합니다.

두 개의 클래스가 필요하게 됩니다. 리스트 내 항목과 반영 공간에 어떻게 변화를 줄 것인가에 대한 클래스 하나와 
리스트 내 항목을 클릭 이벤트로 처리할 수 있는 클래스 하나가 필요하겠네요.

Selects 클래스:
- 증거 리스트 내에서 항목을 선택하여 색상을 변경하는 기능
- 버튼의 색상과 텍스트를 변경하는 기능

SlotClickHandler 클래스:
- 슬롯 클릭 이벤트를 처리하는 기능
- 클릭한 슬롯에 대한 색상과 텍스트 변경
- 모든 슬롯이 빨간색인지 확인하고 처리 로직을 수행

 

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
 
 
public class Selects : MonoBehaviour
{
 
    // 증거 리스트 내에서 항목을 선택 할 수 있다.
    public GameObject[] slots;
   
    // 증거 리스트 내 항목을 선택할 수 있다.
    public void ChangeSlotColor(int slotIndex, Color newColor)
    {
        GameObject slot = slots[slotIndex];
        Image slotImage = slot.GetComponent<Image>();
        slotImage.color = newColor;
    }
 
    // 리스트 내 아이템(증거) 선택 시 육하원칙 공간에 그 증거가 반영된다.
    public void ChangeButtonColorAndText(Color newColor, string newText)
    {
        Button button = GetComponentInChildren<Button>();
        Text buttonText = button.GetComponentInChildren<Text>();
        button.image.color = newColor;
        buttonText.text = newText;
    }
 
}

 

위에서 Prefab으로 만든 Slot 들을 slots 배열에서 관리합니다.

ChangeSlotColor()는 리스트 내 선택한 항목을 변경하겠다. 정보를 담고 있습니다. 메서드는 선택한 항목을 나타내는  SlotIndex와 변경할 색상인 newColor 매개변수를 받아와 변경해 주게 됩니다.

ChangeButtonColorAndText()는 선택한 항목을 바탕으로 반영하고 싶은 공간(Selected Panel)에 정보를 반영하겠다. 정보를 담고 있습니다.

 

Selected Panel - Selects.cs

Guess Panel - Selects.cs

 

두 개의 Panel에 각각 Selects 컴포넌트를 넣어준 모습입니다. 

 

 

 

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
 
 
public class SlotClickHandler : MonoBehaviour, IPointerClickHandler
{
  
    // Panel 및 Button에 대한 참조
    private Selects panelSelection;
    public Selects otherPanelSelection;
 
 
    public int objectNumber;
    // objectNumber에 따라 다른 색상과 텍스트를 설정할 배열
    public string texts;
 
 
    private void Start()
    {
        panelSelection = GetComponentInParent<Selects>();
 
    }
 
    public void OnPointerClick(PointerEventData eventData)
    {
       
        int N = panelSelection.slots.Length;
 
     
        bool allSlotsRed = true;
 
        // 모든 Slot이 Red인지 확인
        for (int i = 0; i < N; i++)
        {
            if (!panelSelection.slots[i].GetComponent<Image>().color.Equals(Color.red))
            {
                allSlotsRed = false;
                break;
            }
        }
 
 
        // 모든 Slot이 Red일 때와 아직 Red가 아닌 Slot이 있는 경우에 대한 분기
        if (allSlotsRed)
        {
            // 모든 Slot이 Red인 경우 처리할 로직
            print("전투 씬으로 이동할 수 있습니다..");
        }
        else
        {
            // 아직 Red가 아닌 Slot이 있는 경우 처리할 로직
            print("아직 모든 증거를 확보하지 못했습니다..");
        }
 
 
        // 현재 클릭한 Slot에 대한 색상과 텍스트 -> 항목 반영
        switch (objectNumber)
        {
            case 0:
                panelSelection.ChangeSlotColor(objectNumber, Color.red);
                otherPanelSelection.ChangeButtonColorAndText(Color.red, texts);
                break;
            case 1:
                panelSelection.ChangeSlotColor(objectNumber, Color.red);
                otherPanelSelection.ChangeButtonColorAndText(Color.red, texts);
                break;
            case 2:
                panelSelection.ChangeSlotColor(objectNumber, Color.red);
                otherPanelSelection.ChangeButtonColorAndText(Color.red, texts);
                break;
            case 3:
                panelSelection.ChangeSlotColor(objectNumber, Color.red);
                otherPanelSelection.ChangeButtonColorAndText(Color.red, texts);
                break;
 
        }
    }
}

 

panelSelection은 GuessPanel 참조 변수 / otherPanelSelection은 SelectedPanel 참조 변수입니다. 

두 개의 변수를 이용하여 서로 다른 패널 간에 커뮤니케이션 느낌을 줍니다.

 

objectNumer 변수는 Prefab으로 선언한 Slot들의 오브젝트 번호를 저장하는 변수입니다. 

Switch()문에서 어떤 오브젝트를 선택했는지 식별하는 데 사용하게 됩니다.

 

SlotClickHander 클래스는 IPointerClickHandler을 상속받아 마우스 클릭 / 터치 등을 감지하기 위한 이벤트 처리를 할 수 있게 됩니다. 

https://docs.unity3d.com/kr/560/Manual/SupportedEvents.html

지원되는 이벤트 - Unity 매뉴얼

 

 

 

OtherPanelSelection 변수는 Public으로 선언해 주었기에 직접 Panel을 연결해 주어야 합니다.

Object Number를 지정해 슬롯들의 번호를 저장하고, Texts에는 반영할 공간에 어떤 텍스트를 지정할 것인지에 대한 정보를 넣어줍니다.

 

 

 

 

---

 

구현 영상

 

저는 추가로 버튼 하나를 추가하여 원래 색깔과 Text로 넘어가는 코드를 따로 구현해 주었습니다.

들어갈 공간을 클릭하면 아이템 리스트가 뜨고, 리스트 내 항목이 잘 반영되고 있는 모습입니다.

 

하지만, 모든 항목 선택 시 다음 로직이 조금 부실해보이네요... 제가 원하는 건 모든 항목이 선택되자마자 "전투 씬으로 이동할 수 있습니다." 로그를 확인하는 것이었지만, 영상에서는 모든 항목이 선택되고 나서 다시 한번 클릭해야만 로그가 다르게 찍힌 것을 확인할 수 있습니다.  이 부분은 좀 더 고민을 해봐야겠네요.. ㅠ