중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

36
중중중중중 중 중중중 중중 ! - 2 중 - 중중중중 중중중중중 ( 중중중중중 중 ) 중중중 ( 중중 ) ([email protected])

Upload: -

Post on 23-Jun-2015

495 views

Category:

Software


5 download

DESCRIPTION

블로그에 게임 개발을 원하는 중학생 방문자 분들의 문의가 많아 준비한 간단한 유니티 설명 팁 이후 간단한 슈팅 혹은 러닝 게임을 만들면서 직관적으로 보는 이들이 따라올 수 있도록 개선 해 나갈 예정입니다.

TRANSCRIPT

Page 1: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

중학생이지만게임을 만들고 싶어 !

- 2 편 -캐릭터를 움직여보자 ( 애니메이션

편 )

최태양 ( 최턍 )([email protected])

Page 2: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

안녕하세요 여러분생각해보니 1 화에선 유니티를 켜놓곤 아무것도 하지 않았어요

Page 3: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

그래도 두번째 시간인데 .. 뭔가 해야겠죠 ?그래서 오늘은 캐릭터를 움직이는 걸 구현 할겁니다 .

Page 4: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

오늘 애니메이션을 돌리기 위해선“ 스프라이트”라는게 필요합니다 .

음료수 말고 왼쪽꺼요

전 오타쿠니까 호무라쨩을 쓰겠어요 ..

Page 5: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

스프라이트 [Sprite] 

“ 동작들이 나열 된 이미지“ ( 실제 이런 뜻은 아니지만 ..)

화면 표시에서 반복 이용되는 도형의 무늬를 등록하고 , 그 무늬에 다른 그림을 겹쳐서 합성시키는 기능 .

고속 표시가 가능하며 연속되는 그림을 매끄럽게 움직일 수 있다 .

혹시 모르니 , 사전적 의미는 이러합니다 .. 만 ..쉽게 말하면 “영화 필름"같은거에요 .

Page 6: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

게임 상에서 보이는건 ,저 많은 그림 중 한 동작이죠

Page 7: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

저 필름이 욜라리 빠르게 돌면서캐릭터가 움직이는 것 처럼 보이게 해주는 원리입니다 .

Page 8: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

원래 .. 스프라이트를 돌리는 것도적당하게 긴 .. 코드를 써줘야 합니다만…

Page 9: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

저희는 초보자니까 .. 코드를 안 쓰고 돌리는 방향으로 가도록 해요 .

Page 10: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

사용할 스프라이트를 찾았으면“ 프로젝트 뷰 (Project)” 에 이미지를 끌어다 넣어주세요

Page 11: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

헐 .. 드디어 Asset 에 뭔가가 생겼다 .

Page 12: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

주목

자 .. 추가되었으면 .. 당연히 클릭해서 살펴봐야겠죠 ?

Page 13: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

엄청 복잡해 보이지만 .. 지금 당장 볼 건 별로 없죠 .

이미지의 속성

미리보기

Page 14: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

Texture Type 을 Sprite 로 바꿔주세요이유가 뭐냐구요 ?

스프라이트니까 ..

Page 15: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

우리처럼 여러 동작을 잘라서 쓰고 싶을 땐Sprite Mode 에서 Multiple 을

선택해주세요

Page 16: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

후 .. 클릭 몇 번 했는데 새로운게 몇 개나 뜨는거야…여기서 Sprite Editor 을 클릭해주면…

이미지의 크기( 적을수록 커

짐 ) 스프라이트 편집

Page 17: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

이런 창이 뜬단 말이죠 ..

Page 18: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

여기부턴 간단해요 .마우스로 자르고 싶은 부분을 드래그 해주면 자를 수 있죠

이해 하셨으면 빠르게 잘라주세요 !

Page 19: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

굳 ㅋ이런 식으로 동작을 전부 잘라주세요

Page 20: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

다 잘랐으면 Apply( 적용 ) 눌러주는 센스

Page 21: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

자 .. 이제 편집도 다 했으니 ...드래그 해서 씬 뷰 나 하이어라키에 드래그해서 넣어주면 !

Page 22: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

뿅 하고 캐릭터가 뜹니다 .

뭔 가

출 현

Page 23: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

스프라이트를 안 자르면생기는 비극 .jpg

기차놀이잼ㅋㅋㅋㅋ

Page 24: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

이제 호무라쨔으 .. 아니 캐릭터를 움직여보죠 .Window -> Animation 을 클릭 해주세요 .

단축키는 컨트롤 + 6

Page 25: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

그럼 이렇게 애니메이션 창이 뜨게 됩니다 .여기서 녹화 버튼 같은게 보일텐데 .. 이걸 클릭해보죠

Page 26: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

깜짝’ s..뭔가 저장하라고 뜨는데 ..

원하는 이름으로 저장해주세요

Page 27: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

뭔가 빨간 막대가 떴네요 .이게 편집 할 수 있게 되었다는 뜻입니다 .

Page 28: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

아까 편집한 스프라이트의 ▶ 버튼을 클릭해보면 ..

싱기방기 .. 모션들이 순서대로 한장 한장으로 잘려 있네요 !

Page 29: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

전 ~ 부 선택해서 애니메이션 창에 넣어주시고 ..재생을 눌러보도록 하죠…

Page 30: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

캐릭터가 우사인 볼트 마냥 .. 고속으로 뛴다구요 ?당연하죠 .

Page 31: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

0.05 초마다 애니메이션이 한 바퀴 도니까요

여기서 Simple 의 값을 10 정도로 만들어주시면 ?

Page 32: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

천천히 잘 뛴다 우리 딸…

Page 33: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

1 초에 얼마의 프레임을 돌릴 것인가 ?

녹화 / 애니메이션 생성

Simple 을 쉽게 설명하면 ..간격을 일정하게 맞춰주는 기능이죠

숫자가 크면 좁아지고 , 숫자가 작으면 넓어집니다 .

타임라인

Page 34: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

이제 캐릭터도 뛰겠다 ..다음시간엔 키보드로 얘를 조종할 수 있도록

간단한 스크립트를 짤거에요 .

Page 35: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

유니티가 아무리 편해도 ..스크립트는 필연적으로 넣어야 되거든요……

Page 36: 중학생이라도 게임이 만들고싶어! -2- 캐릭터에게 애니메이션을 줘보자 !

만발의 준비를 하고다음시간에 봐요 여러분 ㅃㅃㅃㅃ…