1.03버전 분석 2 (메인화면)

이 화면의 제작 과정과 기능들에 대해 설명하겠습니다.

게임을 키면 가장 처음 볼 수 있는 화면입니다.

이 씬은 전부 UI로만 구성되어 있어 눈에 보이는 것들은 전부 UGUI의 Canvas 안에 존재합니다.

    Hierarchy 창을 보면 이렇게 되있습니다.

카메라나 캔버스, 이벤트시스템은 자동 생성 요소고 Awake와 ButtonManager는 제가 만든겁니다.

Awake에선 말 그대로 초기화 작업을 해줍니다. ButtonManager 스크립트와 합쳐도 되긴 한데 보기 편하려고 초기화 용도와 버튼 용도로 나누었습니다.

이 초기화에선 현재 크게 3가지 작업을 합니다.

화면 비율 조정, 프레임 고정, BGM 재생 및 버튼 모양 변경

여기서 화면 비율 조정과 프레임 고정은 메인 화면으로 올 때마다 할 필요는 없어서 아예 프로그램 초기화 씬이 하나 있어도 좋지만 이는 추후 게임을 켰을 때 유니티가 뜨는 것 처럼 팀 이름 뜨게 하면서 그 씬에서 처리하게 할 예정입니다.

if (Screen.fullScreen)
        {
            if (Screen.height * 9 / 16 < Screen.width * 0.99f)
                Screen.SetResolution(Screen.height * 9 / 16, Screen.height, true);
            else
                Screen.SetResolution(Screen.width, Screen.width * 16 / 9, true);
        }
 
        else
        {
            if (Screen.height * 9 / 16 < Screen.width * 0.99f)
                Screen.SetResolution(Screen.height * 9 / 16, Screen.height, false);
            else
                Screen.SetResolution(Screen.width, Screen.width * 16 / 9, false);
        }
 
        Application.targetFrameRate = 50;

코드는 이렇습니다.

테스트 할 스마트폰 기기가 많지 않아 모든 폰에 적용되는지는 알 수 없지만 위와 같이 해두면 전체화면에 상관없이 9:16 비율로 맞춰집니다.

원래는 팀프로젝트 때 갤노트가 16:10 비율이라 화면이 짤리는 바람에 그걸 잡아주기 위해 짠 코드입니다만 16:9로였던 비율을 9:16으로 바꿔서 쓰고 있습니다. 

단, 이 방법은 비율이 안 맞으면 화면을 늘려서라도 안드로이드 화면을 가득 채워버립니다. 지금의 스마트폰은 아직 대부분 16:9이고 달라도 16:10~ 18.5:9 정도라 늘려도 큰 차이를 느낄 정도는 아닙니다만 늘리는 방식이 싫다면 이 코드가 아닌 다른 방식으로 접근하는 편이 좋습니다.

저도 추후 수정 예정 중입니다.

Application.targetFrameRate 코드는 목표 프레임이라 보면 됩니다. 수직동기화가 켜져있으면 수직동기화가 우선시 됩니다.

이 게임의 경우 FixedUpdate에서 대부분 처리하고 있기 때문에 50을 넣어 주었습니다. FixedUpdate간격을 60프레임으로 바꿀 수도 있긴 한데 모바일+도트 환경이라 그리 차이도 느끼기 힘들고 0.02초 간격이라는 깔끔한 값이기에 그냥 그대로 갔습니다.

옵션 창입니다. 

초기화 과정에서 마지막인 BGM 재생 및 버튼 모양 변경이 저것입니다.

기본은 둘 다 켜져있는 것이지만 유저의 변경에 따라 맞는 모양으로 바꿔주기 위한 과정입니다.

위 이미지에서 볼 수 있듯이 클릭하면 글자도 같이 내려갑니다. 다른 버튼들도 전부 저러한데 저것도 스크립트로 제어한 것입니다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
 
public class ButtonEnterText : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler, IPointerDownHandler, IPointerUpHandler
{
    RectTransform thisTransform;
    RectTransform textTransform;
    Vector3 textDefaultPos;
    bool onTouch = false;
 
    // Use this for initialization
    void Awake () {
        thisTransform = GetComponent<RectTransform>();
        textTransform = transform.GetChild(0).GetComponent<RectTransform>();
        textDefaultPos = textTransform.localPosition;
    }
 
    public void OnPointerEnter(PointerEventData data)
    {
        if(onTouch)
            textTransform.localPosition += Vector3.down * thisTransform.sizeDelta.y * 0.1f;
    }
 
    public void OnPointerExit(PointerEventData data)
    {
        if (onTouch)
            textTransform.localPosition = textDefaultPos;
    }
 
    public void OnPointerDown(PointerEventData data)
    {
        onTouch = true;
        textTransform.localPosition += Vector3.down * thisTransform.sizeDelta.y * 0.1f;
    }
 
    public void OnPointerUp(PointerEventData data)
    {
        onTouch = false;
        textTransform.localPosition = textDefaultPos;
    }
}
 

UI 관련 이벤트들은 UGUI를 쓰면 자동으로 같이 생성되는 EventSystem으로 알 수 있듯이 이벤트 시스템으로 스크립트에서도 제어가 가능합니다.

using UnityEngine.EventSystems; 를 해준 다음 이미 마련되어 있는 인터페이스들을 연결하여 사용하면 됩니다.

위 코드에 적힌 인터페이스들과 함수들은 전부 연결된 것이라 다른 이름을 사용하면 에러가 납니다.

보통 버튼은 첫번째 자식으로 Text를 가지고 있습니다. 이를 이용하여 코드에서 알아서 자신과 Text를 가져와 클릭 상태에 따라 텍스트도 따라 내려가도록 했습니다.

좀 더 범용성을 생각한다면 버튼 y길이의 10%로 고정이 아닌 public으로 밖으로 빼두는게 좋겠지만 아직까지는 그럴 필요가 없어서 놔둔 상태입니다.

그럼 여기서 이 코드를 쓰면 위 이미지처럼도 되는가? 를 묻는다면 그건 또 아닙니다. 위 이미지에선 중간만큼 올라온 이미지가 있기 때문인데 좀 더 손을 보면 옵션으로 위 이미지처럼도 사용 가능하게 할 수도 있을겁니다.

하지만 저런 버튼은 저기밖에 없기 때문에 그냥 저 부분에 한해서만 버튼 이미지에 직접 글자를 박았습니다. 초기화 과정과도 연결해 줘야하고 저 하나를 위해 공을 들이기엔 시간이 아까웠기에... 이러다 추후 저런 형태의 버튼을 다른데서도 쓰게된다면 그때는 스크립트를 건드릴지도 모르겠네요.

마지막으로 Exit 버튼을 누르거나 스마트폰 자체 뒤로가기 버튼을 누르면 

이런 창이 뜹니다. 지금 알았는데 여기 폰트 안 바꿨네요.

여기서 한 번 더 스마트폰 자체 뒤로가기 버튼을 누르면 바로 종료되는데 이건 좀 고민을 많이 했습니다.

저 상태에서 스마트폰 자체 뒤로가기 버튼을 누르면 종료를 시킬지 저 창을 닫게 할지 어느것이 더 좋을까 고민하다 저의 경우엔 애초에 게임을 종료하기 위해 스마트폰 자체 뒤로가기 버튼을 연타하지 그 외에는 딱히 누를 일도 없고 연타는 더더욱 하지 않기에 그냥 종료하게 만들었습니다.

ButtonManager 를 이용하여 각종 버튼들의 onClick 기능을 구현시켜주고 있습니다.

대부분 직관적인 이름으로 지었고 거의 이름대로의 기능만을 행합니다.

근데 이 OnClick 부분이 위와 같이 직접 세팅하는 것과 스크립트로 세팅하는 것이 다르더군요.

이 부분에 대해선 상점 분석 글에서 자세히 다루겠습니다.

그리고 여기서는 볼 수 없지만 본 게임에선 싱글톤 패턴을 사용하여 PlayerPrefs를 이용한 저장 데이터 관리나 여러 씬에서 공통으로 사용하는 열거형, 값 등을 저장하고 있습니다. PlayerPrefs 기능은 매우 편하고 간단하지만 한계 또한 명확해서 추후 암호화와 함께 다른 방법으로 바꿀 예정입니다.