프로젝트/[Sparta] 유니티로 만드는 게임개발 종합반

[1주차 게임] 빗물받는 르탄이 -1

순정법사 2022.12.09

A. 배경 세팅하기

1. 메인 씬 기초 세팅하기

a. 프로젝트 이름 변경

project 탭에서 MainScene으로 리네임

 

이름이 변경된 모습

 

b. Game 씬 사이즈 바꾸기

+ 버튼을 클릭하고 760 x 1280,  Label을 Phone을 입력

 

설정이 완료된 모습

 

2. 배경 씬 구성하기

a. 배경 생성하기

MainScene 우클릭 → GameObject → 2D Object → Sprites → Square

 

배경이 될 사각객체 생성법

 

위와같이 생성됨

 

b. 배경 수정하기

* 이름 변경하기

 

background로 rename하기

 

Square 에서 background로 변경

 

 

*  색상 변경하기

 

background focus 된 상태에서 Inspector에서 보이는 color 수정

 

RGBA : 225 225 220 225

 

 

*  크기 변경하기

 

scale : 부모 넓이에 비례해서 크기를 결정함

 

X:6 / Y:10 으로 세팅하고 변경된 모습

 

C. UI 박스 생성 및 수정하기

*  rename

 

배경과 동일한 방법으로 객체를 생성한 후 ground로 rename

 

 

* 색상변경

 

RGBA : 50 50 50

 

* 크기변경

 

X : 6 / Y : 1.5

 

 

* 위치변경

 

Y : -4.3

 

* 순서변경

 

Order in Layer 0 -> 1

 

* 결과물

완성

 

 

B. 캐릭터 코딩하기

1. 캐릭터 생성하기

a. 캐릭터 다운로드 하기

https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/game_new/week01/rtan.zip

 

b. 폴더 생성하기

assets 하위 폴더로 ( = MainScene과 동일한 level) Images폴더 생성후, 위에서 다운받은 르탄이들

캐릭터 끌어와서 폴더에 넣기

 

폴더 생성 위치

 

넣어진 르탄이들 안녕

 

c. 르탄이 캐릭터 생성하기

2D Object → Sprite → Square 클릭 → rtan으로 이름 바꾸기 (배경 생성과 동일)

 

생성된 르탄이 (일것)

 

1) rtan 객체 선택 후

2) Assets 폴더에 있는 르탄이1 이미지를 Sprite로 드래그

3) 우선순위 1로 올려 캐릭터 보이게 하기

4) 포지션 변경 Y : -2.9

위 순서대로 진행하면 된다

 

D. 캐릭터 생성 결과물

귀엽다

 

2. 캐릭터 애니메이션 효과 넣기

a. 애니메이션 폴더 생성하기

Assets 하위폴더로 Animation폴더를 생성한 후,  Animation폴더에 rtan_run의 Animation을 생성

 

animation 폴더 안에 생성되는 애니메이션 탭 위치

 

생성된 애니메이션

 

b. 애니메이션 속성 지정하기

반복적으로 행동하기 위해 Loop 선택

 

c. 객체에 애니메이션 속성 생성하기

1) rtan_run 애니메이션을 rtan에 드래그하기

 

2) 애니메이션 폴더에 rtan 객체가 생성됨

 

드래그 방향이 중요하다

 

Hierarchy 폴더의 rtan객체를 클릭해보면 rtan_run의 애니메이션 속성이 생성되었다

오른쪽 아래 빨간 박스가 추가로 생성되었다

 

d. 애니메이션 설정하기

rtan_run 애니메이션을 더블클릭하면 아래와 같이 Animation 탭이 팝업된다

 

animation 탭

 

0) animation 탭이 활성화 된 상태에서

1) rtan 객체를 더블클릭하면

2) animation 탭이 활성화가 됨

3~5) 시간에 맞춰 원하는 이미지를 드래그

 

시간은 알아서 조절하자

 

d. 애니메이션 완성

너무빨리 지나가서 시간을 조절했다

열심히 걷는 르탄이가 완성되었다

e. Animator 간단 설명

게임을 시작하면 무조건 끝 없는 애니메이션의 rtan_run을 실행하게 되어있다

 

요건 가져온 이미지이다 (어디서 찾는지 모름)

 

3. 캐릭터 움직이기

이제부터 C# 프로그래밍이 필요함

 

a. Visual Studio 세팅하기

visual studio 세팅이 필요한데, 이건 앞에 포스팅 했음

 

b. 캐릭터에 코딩을 더하기

유니티에서는, 캐릭터가 코드를 갖고 있을 수 있음

많은 함수가 있는데 가장 중요한 두가지 함수는 유니티가 제공함

 

1) start (너는 태어날 때)

2) update (매 순간 이렇게 해라)

 

코딩파일도 파일이기 때문에, 추가해서 더해야함

 

c. Script 만들기

1) Assets 하위폴더로 script라는 폴더를 생성 후

2) rtan이라는 이름의 C# Script를 생성한다

 

C# 스트립트를 생성하는 방법

r

C# 스크립트인 rtan을 더블클릭하면 바로 Visual Studio가 실행된다

 

### Warning!

rtan 파일을 더블클릭하고, 실행되지 않았을 떄 다시한번 클릭하면 실행이 되어야 하는데
나는 경로가 잘못된건지 아무리 클릭해도 실행되지 않아서...
그냥 Visual Studio에서 경로를 찾아서 실행했다. 
나중에 해결방법을 안다면 추가로 작성할 예정이다 ( = 아직 모른다 )

요놈!

 

 

이렇게 예쁜 스크립트가 나타난다.

 

요 위에 이미지의 Start()와 Update()의 함수 위의 주석을 잘 살펴보면

 

* Start()는 실제로 첫 프로그램이 실행되기 전에 실행되고

* Update()는 매 프레임마다 실행된다는걸 알 수 있다

 

함수 첫문자 대문자인게 너무 고통스럽다

 

d. 캐릭터 움직임 코딩하기

캐릭터가 "움직일 때" "좌 우"로 이동해야 하는것이기 때문에 Y값은 건드릴 필요가 없다

 

1) 캐릭터 오른쪽으로 이동하기 

 

a) Code

public class rtan : MonoBehaviour
{
    float direction = 0.05f;

	...
    
    void Update()
    {
        transform.position += new Vector3(direction, 0, 0);
        // 트랜스폼 안의 포지션을, Vector3 방향으로 계속 더해주세요
        // float 란? 소수점을 나타내는 자료형. 즉, 소수를 쓰고 싶으면 뒤에 f 를 붙여줘야 함
        // 변수를 사용해서 넣어줌
    }
}

Update 부분을 위 코드로 수정하고, 저장

 

b) 애니메이션 부여

 

 

대부분 유니티에선 드래그 앤 드랍으로 애니메이션을 부여해 줄 수 있음

아래 (1)와 같이 드래그 후 (2)에 Script 속성이 생긴것을 볼 수 있음

 

요 상태에서 실행을 누르면
르탄이가 어디로 떠난다

 

 

2) 캐릭터 벽에 닿으면 다른 방향을 보게하기

 

a) Debug.Log 로 위치 보기

 

Update()에 아래 코드 추가

console.log와 동일한 기능을 한다

 

Debug.Log(transform.position.x);

 

 

b) Unity에서 Console 확인하기

 

실행을 누르면 왼쪽 아래 v 체크된 곳에 알림이 뜨는데, 알림을 누르면 Console을 확인할 수 있음

 

 

c) Update() 수정하기

 

왼쪽 벽에 닿으면 오른쪽 방향, 오른쪽 벽에 닿으면 왼쪽 방향으로 가게 한다

void Update()
    {
        if (transform.position.x > 2.8f){
            direction = -0.05f;
        }
        
        if(transform.position.x < -2.8f){
            direction = +0.05f;
        }
        transform.position += new Vector3(direction, 0, 0);
    }

 

버벅거리는 것 처럼 보이는데 gif 파일 저장을 누를떄 프로그램 오류로;; 그런것이고 코드 이상은 아니다

문워크 나보다 잘한당

 

3) 캐릭터 좌우 반전하기

transform.localScale = new Vector3(-1, 1, 1);

요 코드를 사용해서 

float direction = 0.05f;
float toward = 1.0f; 		//변수를 추가해서 정리
void Start()
{
    
}

void Update()
{
    if (transform.position.x > 2.8f){
        direction = -0.05f;
        toward = -1.0f;
    }
    
    if (transform.position.x < -2.8f){
        direction = 0.05f;
        toward = 1.0f;
    }
    
    transform.localScale = new Vector3(toward, 1, 1);
    transform.position += new Vector3(direction, 0, 0);
}

이렇게 정리했다.

 

 

3) 마우스 클릭시 방향 바꾸기

 

아래 코드만 사용하면 마우스 클릭 이벤트를 사용 가능하다.

if (Input.GetMouseButtonDown(0))
{
    toward *= -1;		
    direction *= -1;
}

 

추가해서 실행한 모습이다.

디스코 추는 르탄이