본문 바로가기

2D_FlappyBird

(8_23) 2D FlappyBird 만들기 첫날

목차


2D 프로젝트의 특징 및 3D 와의 차이점

 

Unity 에서 프로젝트 생성하는 창

 

이걸로 만들면 여러가지 이점이 있음

2D로 만들면 만들면 여러가지 이점이 있음

근데 우리는 배우는 입장이니까, 3D 로 만들어서 해보자

Create!!!

 

[렌더 파이프 라인]

로컬 좌표계 -> 월드 좌표계 -> View 공간 -> 투영이라는 공간 -> 그리고 뷰포트 이런거 거쳐서

Screen 으로 감 

 

2D 도 같다!

2D 는 z를 기준으로 회전함!

2D 의 회전은 Z 축 회전

Y 축을 기준으로 회전 시켜 버리면 안보이게 됨!

3D 와 2D 의 차이

그래서 2D 회전은 다 Z축 회전임!!

 

z 축은 없다고 생각함. 그러므로 Z 축으로 아무리 이동해도 그 자리에 있는것 처럼 보임!

그림자로 물체의 위치를 표현

Z 가 의미하는건 깊이이다 그런데  2D 에서 는 Z 축이 없다고 생각하자 했으니,

2D 는 그림자가 없고 봐도 된다!

 

그렇기에 빛을 받을 수도 없다.

음영을 받으려면 Z 가 있어야 하는데, Z 가 없으니 그림자도 없다!

 

수빈이네꺼+승기님꺼 에서는 이렇게 빛 영향을 받게 함!

근데, 2D 에도 빛을 받게 하니까 엄청 이뻐진거야


그래서 2D에도 Light 를 제공하기 시작함. URP 에서!

Material 로 추가해서 빛 받게 할 수 있음!

일반에서 하면 이상하게 나옴!

 

URP 랑 HDRP 는 일반 Shader 랑 호환이 안됨!

그래서 URP 로 옮기면 이렇게 미싱된거로 나옴! 호환이 안되서


2D 애니메이션 설명

 

2D Animation 에서는 Sprite Animation 을 씀!

자연스럽게 보이려면 보통 1초에 24장정도 돌림! (24프레임)

그니까, 이미지를 다량으로 돌려서 애니메이션처럼 보이게 한다

 

하지만 3D 에서는 본의 위치 값을 저장해서 본을 움직이게 한다

사이즈가 512 512 라고 하자

1초에 24장 쓴다고 치자. 그러면 달리기에만 24 장 쓴다고 치면 다른거

 

Pixel 

프로젝트용량이 클 수 밖에 없음!

픽셀 하나당 보통 32비트를 씀

그러면 2048 * 2048 짜리 한장에는

2048 * 2048 * 32 비트 를 써야함

한장만 해도 용량이 너무큼.

 

근데 애니메이션 하나를 만들기 위해서는, 이 한장을 24장씩..?

근데 이 24장이 모든 에니메이션을 표현하는게 아닌, 많은 애니메이션 중의 하나임..

그래서 이런 특징이 있음 느림..

그렇기 때문에 생각과 다르게 2D 프로젝트는 용량이 클 수밖에 없다.

많은 용량을 차지하는 Sprite 로 Animation 을 사용하기 때문에

 

 

 

그래서 2D 에도 Bone 애니메이션 이 나옴!!!!!

파츠별로 애니메이션이 있음!

 

데이터의 크기는 2D > 3D 이렇게 됨

말도 안되는정도의 차이로 ,,

그래서 시각적인것을 많이 못함

그렇기 때문에

2D 를 선택하게 되면 게임성에 엄청난 투자를 해야함!!

조금 더 물리적인것들을 더 넣거나, 그렇게 하자


2D 환경 구축하기

 

2D 환경을 구축해보자!

 

1. Directional Light 삭제!

2. Camera -> Orthographic  으로 바꿔주기

 

작업 환경을 Back 으로 해놔야 함!

3. 카메라를 Back 으로 옮겨서 보게 하자

 

 


스프라이트 설정

 

구글에

flappy bird sprite 를 검색함!

 

sprite 폴더 하나를 만들고 거기에 넣자!

 

 

받아서 넣고 RGB 가 있는 모습

 

Texture Type

타입을 Sprite 라고 바꿔준 모습

 

2D 의 FBX 느낌!

Sprite 로 바뀌어서 이렇게 된다!

 

이제는 이 상태에서 그냥 드래그앤 드랍으로 넣을 수 있음!

원래는 Quad 만들어서 넣고 그랬는데 이건 가능!

Alpha is Transparency 체크 되어있기 때문에

Alpha is Transparency 라고 체크 되어있기 때문에 저기 없는 부분은 안보이게 됨

 


Wrap Mode 와 Filter Mode 에 대한 설명

 

1. Wrap Mode 

Filter Mode 가 뭘까?

Wrap Mode 는 저번에 했듯이 사진을 자르게 하거나 계속 루프로 돌리거나 하게 하는 역할을 한다

 

 

2. Filter Mode 

 

도트 뭉개짐에 관한것임

도트 뭉개짐 가까이서 보면

Fiter Mode 를 point 로 해놓으면 확실히 끊긴걸로 나옴!

아까 흐려진건 anti-Alising 이 되서 그런거임

근데 2D 에서는 그렇게 안됨.

 


MaxSize 에 대한 설명

 

Unity 는 디폴트로 MaxSize 를 2048 로 만들려고 한다.

512 512 인데 유니티 내부에서 이걸 2048 로 쓸려고 하는거임!

지금 우리가 받은 사진의 크기는  512512 임

 

사이즈가 맞지 않음.. 

이게 엄청 중요한게

 

사이즈가 안맞아도, 큰 사이즈로 하게 되면 용량을 엄청 많이 잡아먹을 수 밖에 없음

그러니까 잘 보이게 하는 최소한으로 만들게 하면 됨!

 

256 으로 하면 깨짐
512 로 하면 딱 됨! 이걸로 하자


Gpu 와 데이터 크기의 관계

 

GPU 의 가속을 받기 위해서는 데이터의 크기가 2의 n 제곱으로 되야함!


LOD (Level of Detail)

 

LOD&눈 멀리있는건 폴리곤이 적게 나오게 하는것

 

큐브를 하나 생성하고

큐브 생성 후 LOD Group 컴포넌트를 넣는 모습

 

이렇게 카메라와의 거리에 따라서 Detail 을 다르게 해줄 수 있음

멀리 있을 때는 형체만 알아볼 수 있게끔 하면 되니까.

Sphere 도 넣어서 , 멀리있으면 구체로 보이게 만들 수도 있음!


Mip Map

 

Mip Map -> Texture 의 LOD 인거임!

거리에 따른 텍스쳐의 정도

 

이 MipMap 은 자동 생성이 가능함

Generate  Mip Maps 하면 Mip Map 이 됨!


Sprite 자르기

스프라이트가 모아져있음?!

이걸 Atlas 라고 함!

 

 

스프라이트 자르는법!

머티플로 바꿈!

2D 패키지가 없어서 안된다고 나온다

 

다운받아주자 Unity Registry 에서!

 

이거 인스톨!

다시 Sprite Editor 누르면 어떤 창이 뜰거임!

Multiple 상태로 되어있어야 함!

오!
Slice 를 눌러보면?
오오!

이제 하나하나 선택이 가능함!!

그리고 Apply 를 누른다!

 

왜 이렇게 하는걸까? 그냥 Image 다 다운 받아서 쓰면 안돼?

 

어떻게 하면 안느리게 할까? 에 대한 생각에서 나온 것임

아틀라스 이미지로 만들어놓으면 얘네 그려줘 가 가능함

그니까, 아틀라스 하나를 로드하고 거기에 있는걸 다 쓰는거랑

 

다량의 이미지를 다 쓰는거랑은 로드 속도가 말도 안되게 다르게 되는거임

 

로드할때의 속도도 단축시킬수도 있음!

그래서 반드시 아틀라스를 사용해야함

 

근데 하나하나씩 하면, 로딩하는데 엄청 오래걸린다고 함!

-------

74번

드래그앤 드랍으로 하이어라키 창에 넣자!

 

그러면 들어가는데 엄청 작아져있음 그러니까

Main Camera 에 Y 값을 0 으로 하고 SIze 를 1로 해준다!


스프라이트 애니메이션 만들기

2D 애니메이션은 다 애디터에서 만드는 거임

아까 드랍한 새 지우고 새로 넣어보자!

shift 누르고
Animation 폴더 생성

 

Fly 로 저장!

생성됨!


또다른 방법

Animation 창을 키고 Create 해서 만들 수도 있음


Play 해보면? 파닥거리는걸 확인할 수 있음!

Bird 를 선택해보면 

여기서 X 값 -1 로 해버리면 반대로 돌아감!

여기서 Flip 을 돌릴 수 있음!

 

2D 와 3D 의 차이는 물리엔진임!

 

2D 는 MIT 에서 만든 Box 2D

 

3D 는 Nvidia 에서 만든 다른 엔진임!

 

호환이 안되서 2D 와 3D 물체는 충돌을 할 수가 업음!


(참고)

2D는 메카님에서 제네릭임! 우리가 원한것만 넣어서 만든거니까!

그래서 Retargetting 이 안됨!


다시 Bird 를 선택하고 Animation 창을 열어줘보자!

새가 나옴!

얘말고 다른것들을 만들어 보자!

16번을 Die 로 놓고 쓰자!

드래그 앤 드랍으로 등록 가능!


점프 자연스럽게 하는건

Blend Tree 로 하면 된다!

Idle 을 Default 로 해놓자!

이제 파라미터를 만들자!

트리거로 2개만들자
Idle -> Fly
Fly -> Die


스크립트를 이용해서 점프구현하기

이제 스크립트 이용해서 처리 해보자!

 

Scripts 폴더를 만들고

안에 Bird 라는 이름의 Script 를 만들기

 

Update 문에서

Update() 문

리지드바디의 벨로시티를 정의해주자. 

이건 V 를 그냥 정해준거기 때문에, Time.deltaTime 을 정할 필요가 없다!

이렇게 해주면, 컴포넌트가 자동으로 들어간다