유니티 onClick 함수 - yuniti onClick hamsu

새로운 프로젝트 생성

앞으로 C# 문법을 실습할 새로운 프로젝트 CSharp Syntax를 만들겠습니다. Syntax는 “(컴퓨터 언어) 문법”이라는 뜻입니다. 각 문법마다 Scene을 바꿔가면서 실습하겠습니다.

개인 취향에 맞게 레이아웃을 바꾼 후 미리 생성돼있는 SampleScene의 이름을 Variable(변수)로 바꿉시다.

변수에 관한 설명은 변수가 메서드에 의해 바뀌는 것을 체감하기 위해 유니티 버튼을 활용해서 설명하겠습니다. 버튼을 클릭하면 Text가 바뀌는 기능을 호출하도록 만들 것입니다. 유니티 버튼의 onClick 이벤트 함수를 사용하게 될 텐데 중간중간마다 변수에 관한 설명을 덧붙이겠습니다.

Button 오브젝트 생성

우선 버튼 게임 오브젝트부터 생성합시다. <1> Hierarchy 창에서 마우스 오른쪽 클릭. <2> UI > Button을 선택해 Button 오브젝트를 생성합니다.

버튼을 생성하면 게임 오브젝트 4개가 생깁니다. 우선 각 오브젝트마다 역할과 기능을 설명할게요.

그전에 이해하기 쉽도록 Scene 화면을 바꿉시다. Scene view 모드를 2D 모드로 바꾸고 Hierarchy 창에서 Canvas 오브젝트를 마우스 왼쪽 버튼 더블 클릭을 하면 Canvas 오브젝트가 Scene 화면 중심으로 맞춰집니다.

Canvas 오브젝트는 모든 UI 요소를 배치하기 위한 영역입니다. 보다시피 Canvas 오브젝트는 2D입니다. 대부분의 게임에서 UI는 2D로 배치돼있죠. 모든 UI 요소는 Canvas 오브젝트의 자식 요소여야 합니다. 자식 요소라는 말은 Hierarchy 창에서 ▼(역삼각형)으로 묶여 있는 것을 의미합니다. 프로그래밍 언어에서는 상속된다고 말합니다.

Button 오브젝트는 말 그대로 클릭할 수 있는 버튼입니다. Image 컴포넌트와 Button 컴포넌트가 Button 오브젝트를 구성하는 중요한 구성 요소입니다. Image 컴포넌트는 Button의 생김새를 담당하는 컴포넌트고, Button 컴포넌트는 어떤 기능을 호출할 것인지 담당하는 컴포넌트입니다.

Text 오브젝트는 Button 오브젝트 자식으로 있습니다. 지금 위 사진에서 Button 오브젝트에 “Button”이라고 적혀 있는 것이 Text 오브젝트입니다.

EventSystem 오브젝트는 유저가 상호작용할 수 있는 UI 오브젝트를 실제로 상호작용할 수 있게 해줍니다. 예를 들어 EventSystem 오브젝트가 없으면 Button을 예쁘게 잘 만들어도 마우스로 클릭이 안됩니다. EventSystem 컴포넌트와 InputModul 컴포넌트가 중요한데, EventSystem 컴포넌트는 게임 오브젝트에 이벤트를 보내는 역할을 하고 InputModul 컴포넌트가 키보드, 마우스, 및 사용자의 입력 같은 입력 방식을 어떻게 작동시킬 것인지 담당하는 컴포넌트입니다.

EventSystem 오브젝트는 UI 오브젝트를 생성하면 같이 생성되는 오브젝트이니 웬만하면 놔두시면 됩니다.

Button 오브젝트와 Text 오브젝트 프로퍼티 수정

유니티 컴포넌트의 프로퍼티 설명

<게임 오브젝트와 컴포넌트> 게시글에서 프로퍼티에 대해 간단하게 설명했었죠. 거기에서 조금만 더 유니티와 연관 지어 설명하자면, 프로퍼티는 Inspector 창에서 편집할 수 있는 컴포넌트 설정 및 옵션입니다. 레퍼런스(Reference)와 값(Value)으로 분류할 수 있습니다.

익숙한 오브젝트 Cube의 컴포넌트로 프로퍼티를 설명하자면 Transform 컴포넌트의 벡터 값들이 값에 속합니다. 숫자, 체크박스, 컬러 등도 값에 속하지요. 반면에 MeshFilter 컴포넌트의 Mesh는 레퍼런스에 속합니다. 다른 오브젝트나 에셋을 연결시키는 링크로 레퍼런스라고 부릅니다.

변수의 뜻

위 프로퍼티들은 따지고 보면 모두 데이터입니다. 모든 프로그램은 데이터를 처리하기 위해 만들어지죠. 데이터는 문서일 수도 있고, 그림일 수도 있고, 메시지일 수도 있습니다. 데이터는 변수로 처리되는데 프로그램에서 데이터를 저장하는 데 사용하는 것이 변수입니다. 이름에 걸맞게 변수는 입력하는 데이터에 따라 변합니다. 변수를 위한 메모리 공간을 만들고 데이터는 바뀔 수 있습니다. C# 문법 중에 변수의 은닉성과 편의성을 보장하는 문법이 있는데 그것이 프로퍼티입니다.

변수의 뜻을 알아봤으니 이제 Button 오브젝트를 화면 중간으로 옮기겠습니다. 지금은 왼쪽 구석에 있어서 보기 불편하거든요.

<1> Button 오브젝트를 선택합니다. <2> Rect Transform에 있는 이미지를 클릭합니다. 해당 이미지는 Anchor Presets이라고 부릅니다. <3> Alt + Shift 키를 누르고 있는 채로 센터, 미들을 선택합니다. 그러면 Button 오브젝트가 화면 중앙으로 이동합니다.

다음으로 Text 오브젝트가 잘 보이도록 수정하겠습니다.

<1> Text 오브젝트를 선택합니다. <2> Alignment를 중앙으로 선택합니다. <3> Horizontal Overflow와 Vertical Overflow는 Text 범위가 초과했을 때 어떻게 할지 담당하는 프로퍼티입니다. Overflow를 선택하면 범위가 초과해도 화면에 나타납니다. <4> 화면에 잘 보이도록 Font Size를 크게 설정합시다.

이제 버튼과 텍스트가 화면에 잘 보이도록 프로퍼티를 수정했으니 스크립트를 작성하도록 합시다.

스크립트 작성

Project 창의 Assets 폴더에서 Scripts 폴더를 새로 만들고 Scripts 폴더 안에 TextChange C# 스크립트를 생성합니다.

TextChange 스크립트를 처음 열면 위 사진과 같을 겁니다. 코딩 과정을 차례대로 설명할게요.

using System.Collections; using System.Collections.Generic; using UnityEngine; #------------- [수정] -------------# using UnityEngine.UI; #----------------------------------------------# public class TextChange : MonoBehaviour { [아래 코드 생략됨]

위 코드처럼 using UnityEngine.UI;를 입력합니다. 유니티 UI 관련된 데이터 타입을 사용하기 위해 필요합니다.

using은 네임스페이스 안에 있는 클래스를 사용하겠다고 알리는 역할을 합니다. 네임스페이스는 클래스, 구조체, 인터페이스, 등을 하나의 이름 아래 묶는 역할을 합니다. 유니티 UI 관련된 것들을 묶어 놓았고 우리는 그걸 사용한다고 알리기 위해 using UnityEngine.UI;를 입력한 것입니다. 정확한 의미는 차차 알아갈 테니 간략하게만 알아 놓읍시다.

변수 선언[위 코드 생략됨] public class TextChange : MonoBehaviour { #------------- [수정] -------------# public Text textObject; #----------------------------------------------# // Start is called before the first frame update void Start() [아래 코드 생략됨]

위 코드와 똑같은 공간에 public Text textObject;를 입력합시다. 위와 같이 입력하여 변수를 선언할 수 있습니다.

변수는 데이터 형식을 명시하고 식별자(변수의 이름)를 명시하여 선언합니다. 그리고 문장 종결을 위해 세미콜론을 붙여 해당 문장의 끝을 컴파일러에게 알려줍니다. 변수를 선언하면 컴파일러는 변수에 필요한 메모리 공간을 예약해 줍니다. 그 메모리 공간은 데이터 형식에 따라 달라집니다.

데이터 형식은 C#이 지원하는 형식도 있지만 유니티가 지원하는 Text 같은 다양한 형식이 있습니다. 이는 C#이 클래스(class) 같은 복합 데이터 형식도 지원하기 때문인데 여러분이 만든 스크립트인 TextChange도 클래스이고 유니티가 지원하는 Text도 클래스입니다. 일단은 TextChange 또한 변수의 데이터 형식으로 명시할 수 있고 변수의 데이터 형식은 굉장히 다양하다는 것만 알아둡시다.

변수에 데이터 입력

지금 우리는 변수를 선언하여 메모리 공간을 예약했지만 어떤 데이터도 입력하지 않은 상태입니다. 지금 상태에선 메모리 공간에 데이터가 없기 때문에 아직 변수를 사용할 수 없습니다. 이제 할당된 메모리 공간에 데이터를 입력합시다.

[위 코드 생략됨] // Start is called before the first frame update void Start() { #------------- [수정] -------------# textObject = GetComponent<Text>(); #----------------------------------------------# } [아래 코드 생략됨]

변수에 데이터를 입력할 때는 연산자를 사용합니다. 위 사진에서 사용한 연산자는 대입 연산자( = )입니다. 유니티가 지원하는 특정 데이터 형식(Text 같은)은 보호 수준 때문에 이미 선언돼있는 데이터만 넣을 수 있습니다. 선언돼있는 데이터는 게임 오브젝트에 연결돼있는 컴포넌트입니다. 지금은 GetComponent 메서드를 사용하여 Text 오브젝트가 가지고 있는 Text 컴포넌트를 변수에 입력합니다.

Text 오브젝트가 Text 컴포넌트를 가지고 있는 거 기억하시나요? 그 컴포넌트를 GetComponent 메서드와 대입 연산자를 통해 변수에 입력합니다. GetComponent 메서드는 스크립트가 연결돼있는 게임 오브젝트에 꺾쇠( < > ) 안에 입력돼있는 데이터 형식이 연결되어 있다면 해당 데이터 형식을 반환하는 메서드입니다.

여기서 알 수 있는 놀라운 사실 하나! 유니티 컴포넌트들도 클래스입니다! 컴포넌트를 변수의 데이터 형식으로 명시할 수 있고 게임 오브젝트에 연결돼있는 컴포넌트를 변수에 넣을 수도 있죠. 이 모두 클래스이기 때문에 가능한 것입니다. 놀랍지 않나요?

메서드 생성

우리는 버튼을 클릭하면 Text 컴포넌트에 있는 text 문자열을 바꾸는 게 목표입니다. 어떤 기능을 수행하기 위한 코드 집합을 메서드라고 했었죠. 일단 text 문자열을 바꾸는 메서드를 만들어야겠군요.

[위 코드 생략됨] void Start() { textObject = GetComponent<Text>(); } #------------- [수정] -------------# public void Changer() { textObject.text = "당신은 정말 멋져요!"; } #----------------------------------------------# [아래 코드 생략됨]

TextChange 클래스 중괄호 안에 위 코드를 입력합니다.

textObject는 알고 있는데 textObject 뒤에 .text가 붙었군요. 클래스 같은 복합 데이터 형식은 여러 가지 데이터가 섞여있습니다. 클래스 안에 선언돼있는 변수에 접근할 때 점(dot)을 입력하고 변수의 이름(식별자)를 입력해 접근합니다.

즉, Changer 메서드는 Text 컴포넌트의 text 변수에 “당신은 정말 멋져요!”를 대입하는 기능을 합니다.

이제 Changer 메서드를 버튼을 눌렀을 때 호출하는 기능을 적용해봅시다.

Button 컴포넌트의 onClick 이벤트 함수

Button 컴포넌트는 onClick 이벤트 함수를 가지고 있습니다. 버튼을 클릭했을 때 호출되는 이벤트 함수입니다.

+ 버튼을 클릭하고 레퍼런스를 연결하여 호출할 메서드를 선택할 수 있습니다.

우선 앞서 작성한 TextChange 스크립트를 Text 오브젝트에 끌어 옮겨서(?) 연결시킵니다. 그러면 TextChange 스크립트는 Text 오브젝트의 컴포넌트가 됩니다.

Button 컴포넌트의 onClick에 생성된 프로퍼티에 Text 오브젝트를 레퍼런스로 연결합니다.

No Function을 선택하면 연결된 레퍼런스인 Text 오브젝트에 연결돼있는 컴포넌트들이 보입니다. TextChange 스크립트에 있는 Changer 메서드를 선택합니다. 이제 게임을 시작하고 버튼을 클릭하면 Changer 메서드가 호출됩니다. 제대로 작동하는지 실험해봅시다.

플레이 버튼을 클릭하고 Game 창에서 버튼을 클릭하면 Text 컴포넌트의 text 변수가 바뀝니다.

다음 시간에는 무엇을 배우나요?

이번 시간에는 버튼 onClick 이벤트 함수와 변수에 대해 배웠습니다. onClick 이벤트 함수는 버튼을 클릭하면 호출되는 이벤트였고 프로그램에서 데이터를 저장하는 데 사용하는 것이 변수였습니다. 모든 프로그램은 변수를 처리하기 위해 동작하는 것이죠. 변수를 그토록 다양하게 만들어 주는 것이 데이터 형식인데 다음 시간에는 데이터 형식에 대해 핵심만 배워봅시다.

다음 시간에 만나요~ 제발~

Toplist

최신 우편물

태그