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

[3주차 게임] 고양이 밥주기 게임 -1

순정법사 2022.12.20

A. 기본 씬 구성하기

1. 프로젝트 만들기 및 세팅하기

a. 프로젝트 생성하기 

프로젝트 이름 : dogvscat

 

안뇽

 

 

b. 기본 세팅하기 & 배경 만들기

1) windows → Layout → 2x3 

2) Project → One Column Layout

3) free aspect → phone (760x1280)

4) Project 탭에서 Assets → Scenes → SampleScene을 MainScene으로 rename

 

5) Hierarchy의 MainScene / Main Camera를 더블클릭 해서 Inspector를 활성화

 

Inspector / Camera / size 5 → 25로 바꿈 (더 멀리서 본다는 뜻)

프로젝트 이미지들이 이 사이즈에 맞춰 제작되어 있음

 

6) Inspector / Camera / background  변경 = 배경과 같은 효과

 

* hex: FFF0B2

 

MainScene의 Inspector / Camera 이렇게 만들어준다

 

 

c. 이미지 받아두기

Assets → Images 폴더 생성 후 안에 이미지들을 넣어줌

 

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

 

잘 들어갔당

 

d. 배경 오브젝트 배치하기

강아지와 배경이 될 생선가게를 생성해야 함

 

1) 강아지 생성

 

GameObject → 2D Object →Sprites → Square

* name : dog

 

2) 강아지 속성 설정

 

* Position y :  -16.1

* Inspector / Sprite : 아까 다운로드 받은 angryDog_1 이미지 드래그

* order-in-layer : 1

(이래야지 나중에 고양이가 나중에 가게 안으로 들어감!)

 

3) 고양이 생성

 

GameObject → 2D Object →Sprites → Square

* name : fishshop 

 

4) 고양이 속성설정

 

* Position y :  -22

* Inspector / Sprite : fish_shop 이미지 드래그

* order-in-layer : 1

 

이렇게 나온다

 

B. 시작 씬 만들기

1. 시작 씬 생성 및 설정하기

a. StartScene

Project → Scenes 에서 우클릭으로 Create →Scene (이름은 StartScene) 생성 후 더블클릭

 

만약 이렇게 저장할거냐고 하면 저장 (그 전껄 저장 안해서 뜨는 것)

 

→ MainScene과 동일한 level, 더블클릭하면 왼쪽 Hierarchy보면 씬이 넘어온걸 확인할 수 있음

 

잘넘어왔다

 

* 동일하게 Camera size : 25로 설정해줌

 

b. Background

GameObject → 2D Object →Sprites → Square 생성

 

* Inspector / sprite부분에 intro 이미지 드래그

 

시작화면!

 

c. startBtn

GameObject → UI → Image 생성

(이미지를 이렇게 생성하면 바로 Canvas안으로 생성됨)

 

요렇게 Canvas 안으로 들어감

 

* name: startBtn

(Rect transform을 reset후 진행한다)

* posY: -300

* width: 300, height: 100

* startBtn 이미지 드래그

* button comp 달기 (버튼 컴포넌트는 "sprite"가 아니라, 반드시 "UI Image"에 붙여야 작동한다)

 

왼쪽과 같이 설정하고, 오른쪽처럼 구현된다

 

 

2. 씬 넘어가기

a. Script 폴더, 스크립트 생성하기

Project → Assets → Script 폴더 생성하고 startBtn.cs 스크립트 생성 후 → startBtn에 붙이기

 

잘 들어갔다

 

b. startBtn.cs

게임시작 함수는 어디서든 사용할 수 있어야 하니 public 으로 작성한다

using UnityEngine.SceneManagement;

public void GameStart()
{
    SceneManager.LoadScene("MainScene");
}
수정사항은 alt + enter를 사용해서 볼 수 있음

 

c. onClick에 붙이기

0) onClick부분 오른쪽 아래 [+] 버튼 클릭

 

1) Runtime Only인지 확인

 

2) 그 아래부분 startbtn 오브젝트(자기자신) 을 드래그

 

3) No Function → GameStart()클릭

 

이렇게 나온다

 

확인하고 MainScene으로 돌아가서 작업

 

잘 넘어간당!

 

 

C. 강아지 움직임 더하기 (밥 쏘기)

1. 밥 만들기

a. 밥 생성하기

MainScene → GameObject → 2D Object →Sprites → Circle

 

b. 밥 설정하기

* name: food

* scale: x:6 /y:6

* Sprite : Knob으로 설정 (손잡이라는 뜻이긴 한데 적절해서 그냥 사용한다)

* 색은 컬러추출기를 이용해서 강아지 색으로 설정

 

작아졌따

 

 

2. 밥 복사해서 쏘기

a. food.cs 생성하기

1) Script에 food.cs생성 후 food에 붙이기

 

연결 완료

 

b.  밥 움직이기

1) 위로 직진하기

2) food의 위치가 26.0f 위치를 넘어가면 삭제하기

 

void Update()
{
    transform.position += new Vector3(0.0f, 0.5f, 0.0f);
    if (transform.position.y > 26.0f)
    {
        Destroy(gameObject);
    }
}

 

c. 복사하기 위해 Prefab으로 만들기

1) Prefabs 폴더 만들고 food 끌어다놓기

2) 원래 있던 food 객체는 삭제 

 

d. GameManager 만들기

0) GameManager가 해야할 일

  • 강아지 위치에서 y 좌표만 2.0f 높아진 곳에서 쏘기
  • 0.2초 마다 밥을 쏘기

 

1) gameManager 객체와 Script 생성 후 연결하기

 

완료

 

2) 밥의 초기좌표 잡기, 복제하기

 

  • 밥의 좌표를 알기 위해서는 강아지의 위치를 알아야 함 = 강아지의 객체를 가져와야 함
  • 밥을 복제해야 함  = 밥이 무슨 객체를 복제해야할지 알아야해 밥의 객체를 가져와야 함

그래서 두개의 객체를 참조한다!

 

이렇게 연결하면 된다

 

(a) makeFood()

      : food는 dog의 x는 그대로, y 위치의 2.0f 위 위치에서 회전없이 계속 생성한다

    → Quaternion.identity 는 회전 없다는 뜻! (no rotation)

 

(b) Start()

     : 시작하면 food를 복제한다

 

public GameObject food;
public GameObject dog;

void Start()
{
    InvokeRepeating("makeFood", 0.0f, 0.2f);
}

void makeFood()
{
    float x = dog.transform.position.x;
    float y = dog.transform.position.y + 2.0f;
    Instantiate(food, new Vector3(x,y,0), Quaternion.identity);
}

 

파파파팟!

 

### Warning!

[버그]
강의를 듣고 다시 구현하면서 밥이 어떤 속도로 나갔는지 까먹어서 뒤 늦게 발견한 버그(?)
강의 자료와 다르게 나의 밥은 속도가 너무 빠른 속도로 나갔다
(코드나 어떠한 오류가 아니였음)

[원인]
코드 중에서 Update 함수는 프레임마다 작동하기 때문에 컴퓨터의 성능에 따라 다르게 작동이 되는데
사진과 같이 VSync 옵션을 켜면 프레임이 고정됨

누르면 정상 속도로 밥이 지나간다

 

 

3. 강아지 움직이기

a. 강아지의 움직임 특징

  • 마우스 따라서 움직임
  • 좌우로만 움직임

 

b. 강아지 마우스 따라 움직이기

1) Script 폴더에 dog.cs 생성하고 연결하기

 

2) 강아지 움직임을 마우스 좌표로 변경하기

 

* x좌표만 가져오고, y좌표는 강아지 좌표 그대로 쓰기 ( = transform.position.y)

* fishShop을 벗어나지 않게 하기 :  x 좌표 -8.5f ~ 8.5f 로 고정하기

 

void Update()
{
    Vector3 mousePos = Camera.main.ScreenToWorldPoint(Input.mousePosition);
    float x = mousePos.x;
    if (x > 8.5f)
    {
        x = 8.5f;
    }
    if (x < -8.5f)
    {
        x = -8.5f;
    }
    transform.position = new Vector3(x, transform.position.y, 0);
}

 

헛둘 헛둘 요렇게 나오면 완성!

 

 

 

D. 고양이 나타내기

0. 고양이의 특성

a. 고양이 종류

1) 기본 고양이 : normalCat

2) 뚱뚱한 고양이 : fatCat

3) 해적고양이 : pirateCat (숙제)

 

 

b. 움직임 및 이벤트

  • 고양이는 아래로 내려옴
  • 밥을 먹으면 뚱뚱해지면서 없어짐 = 고양이 변경 및 hp바 구현

 

 

1. 기본 고양이 만들기

a. normalCat 만들기

1) Hierarchy / MainScene / Create Empty (normalCat) 만들기

 

2) normalCat 안에 sprite square로 full / hungry을 만들기

 

나같다..

 

3) 각각 이미지 넣기

 

* hungry: nomalCat_1

* full : normalCat_full

 

4) full 객체를 잠시 inactivate로 변경

 

  full / hungry을 active < > inactive로 변경하면서 구현할 것임

 

b. HP bar생성

1) hungry 안에 canvas(UI) 생성하기

     Canvas를 만들 때, Inspector의 RenderMode를 World Space로 변경

    → Screen Space에서 World Space로 변경하게 되면 UI 세계에서 게임 세계로 내려오게 됨

 

* Rect Transform을 reset 진행후 canvas의 position을 y:-4 로 고정하기

 

reset하지 않으면 제대로된 위치로 안나온다

 

2) hungry → Canvas 안에 Image(UI) 생성

 

* name: back

* width: 4, height: 0.5

 

hp바가 생성되었다

 

3) 위와 동일한 방법으로 front생성

 

front는 back을 (ctrl+d)해서 복사한 뒤 작업시작!

 

* pivot(늘어남의 기준점) : x: 0

* scale x : 0 (width 아님)

* Inspector / Image : 추출기로 fish-shop 색 추출

→ 이제 x scale만 조정해주면 게이지를 만들 수 있음. 이것이 바로 hp 바 만들기!

 

피가 나오면 요렇게 나온다

 

c. 애니메이션 붙이기

1) Animations 폴더 만들고 normalCat 만들기

 

2) Loop time 체크 후 normalCat에 부여하기

 

3) Animation폴더의 생성된 normalCat(Animtion Clip) 더블클릭으로 animation 창 팝업 후 normalCat 객체 눌러서 활성화

 

4) 빨간 버튼 눌러서 녹화시작하기

 

0:10초에 → normalCat 안의 hungry 객체를 클릭 후 → Inspector / Sprite를 normalCat_2로 변경

0:20초에 → normalCat 안의 hungry 객체를 클릭 후 → Inspector / Sprite를 normalCat_1로 변경

위와같이 부모 아래에 있는 요소들도 애니메이션으로 변경 가능함

 

기분좋은 고양이

 

요렇게 구현 완료된 모습을 봤다면 다음 고양이 생성을 위해 잠시 비활성화!

 

2. 뚱뚱한 고양이 만들기

a. fatCat 만들기

1) normalCat을 복제하기

 

2) hungry / full의 이미지 교체하기

 

* hungry: fatCat_1

full : fatCat_full

 

3) Canvas의 x 좌표를 -0.5 해두기 (고양이와의 정렬 맞추기)

 

4) fatCat에서 기존에 있던 animator를 먼저 삭제하기

 

5) fatCat 애니메이션 만들고 적용하기 (loop time 꼭 체크!)

 

위에 normalCat 애니 적용하던거랑 똑같고, normalCat이 fatCat으로만 변경된다

 

귀여운 뚱냥이

 

 

4. 모두 프리팹화 해두기

위에서 만든 normalCat, fatCat 둘다 Prefabs 폴더에 넣고 fatCat만 삭제

(normalCat은 다음에 더 사용하기 위해 삭제하지 않음)

프리팹을 고칠 때는 프리팹을 더블클릭해서 작업함