오늘은 유니티에서 이미지를 가져와서 활용하는 방법을 배워봅니다~
저는 유니티를 배우며 이 부분이 제일 궁금했었답니다.
유튜브 05 - https://www.youtube.com/watch?v=KgRnZTTeCew
** 오늘 배울 내용
- 2D 프로젝트 만들기
- 에셋 스토어 다운로드 & 임포트(Free Platform Game Assets)
- 일러스트레이터 파일 png-24 파일로 내보내기
- 이미지 스프라이트 슬라이스하기
- 이지지 게임오브젝트로 만들기
- 이미지 움직이기(애니메이션)
유니티 함께한지 5일이 되었습니다. 이렇게 5번 더하면 10일 공부한 것이고, 그렇게 10번씩 더 하면 100일 됩니다. 100일을 다 채웠을 때 우린 뭔가 이루었을 것입니다. 게임 런칭해서 또 다른 수입 통로를 만들어 보자구요^^ 화이팅~
자, 오늘은 2D 기반의 소스를 에셋 스토어에서 다운받아서 살펴봅니다. 유니티에서 이미지를 다루는 중요한 개념을 살펴볼거에요^^
애니메이션은 덤으로 살짝 배워봅니다. 오늘 사용할 소스는 Free Platform Game Assets 입니다.
이제 눈감고 프로젝트 생성 하겠죠? ㅎㅎ
이렇게 2D 프로젝트가 생성되었습니다. 2D 프로젝트는 빛이 없고 카메라만 있습니다.
너무 귀엽지 않나요? 유티니 스토어 사이트에서 로그인을 한 뒤, 이 소스를 다운로드 합니다.
https://assetstore.unity.com/packages/2d/environments/free-platform-game-assets-85838
유니티에서 열기를 선택하시면 프로젝트 매니저가 열립니다. 다운로드를 먼저 한 후, 임포트를 합니다.
프로젝트의 에셋 폴더의 구조가 상당히 복잡합니다. 시간날때마다 둘러보고, 살펴보도록 하세요~ 소스들 뒤적거리다보면 플래시 파일도 보입니다. 플래시에서 애니메이션을 처리해서 사용하는것을 발견할 수 있습니다.
해당 소스를 찾아 일러스트레이터 원본을 열어본 화면입니다. 잘 모르겠으면 영상을 확인하세요^^
일러스트 원본 파일에서 이미지로 내보내는 과정입니다.
png-24 파일로 내보내기 합니다. 2배로 이미지를 키워 내보냅니다. 너무 작아서요~
png-24 파일 저장 위치는 현재 작업하는 프로젝트의 에셋 폴더 위치로 다음과 같이 저장합니다.
쨔잔~ 이렇게 프로젝트에 이미지가 추가되었습니다. 물론 탐색기에서 그냥 끌어다 놓아도 됩니다.
임포트해온 이미지는 여러 이미지들이 통으로 있습니다. 유니티에서는 이러한 이미지를 스프라이트 이미지라고 합니다. 유니티에서는 보통 이렇게 이미지들을 모아 놓은 스프라이트 이미지를 가져와 슬라이스 하여 사용합니다. 이렇게 스프라이트 이미지를 사용하면 코드 최적화를 할 수 있다고 하지만 수정시 주의를 요해야 합니다. 이미지들을 여러개로 잘라 사용함으로 Multiple 을 선택한 뒤, Sprite Editer를 클릭합니다.
적용을 누르면 이미지를 슬라이스할 준비가 됩니다. 스프라이트 에디터 창이 열립니다.
동영상을 참고하여 적당히 잘라줍니다. 여기서는 자르는 방법을 수동으로 진행해 보았습니다. 작업이 끝나면 오른쪽 상단의 빨간 버튼을 눌러 종료합니다. Apply를 클릭하여 슬라이스한 내용을 적용합니다.
쨔잔~ 이렇게 이미지가 슬라이스 되었습니다. ~ 자동으로 슬라이스 하는 방법은 다음에 살펴볼게요~
씬에 캐릭터 하나를 등록해봅니다.
이번에는 Jump 폴더에서 이미지를 잘라보도록 합니다.
방법은 동일합니다.
잘 되나요? 잘 안되면 영상을 참고하세요~
이제 점프하는 이미지들도 조각 내었으니, 아주 간단하게 애니메이션을 적용해보도록 합니다.
씬에 위치한 캐릭터를 선택하고 애니메이션의 Create를 클릭하여 다음과 같이 점프 애니메이션을 저장합니다.
다음과 같이 두개의 소스가 생성 되었는데요. 개념은 다음에 살펴보고 오늘은 간단히 만들어 봅니다. 점프 이미지 두개를 애니메이션 패널로 드래그하여 등록하면 두개의 키프레임이 생성됩니다.
점프 애니메이션은 한번만 재생하도록 하기 위하여 Loop Time을 해제합니다. 플레이 모드에서 확인하면 캐릭터가 넘어지는 것을 살펴 볼 수 있습니다. 애니메이터 창을 열어 구경도 살짝 해봅니다. 다음시간에 자세히 배워볼게요~
오늘은 이미지를 활용하는 방법에 대해서 살펴보았습니다. 일러스트레이터나 포토샵을 잘 다루는 분들은 디자인해서 가져오면 되는것을 알 수 있습니다. 신나죠? ㅎㅎ 또 간단하게 애니메이션도 살펴보았습니다. 앞으로 애니메이션을 좀 더 자세히 살펴보도록 합니다. 오늘은 여기까지~~
열심히 꾸준히~~~ Slow and steady wins the race… 정말 우리에게 필요한 말입니다. ^^
자 또 다음 시간에 달려보자구요^^
오늘은 유니티에서 이미지를 가져와서 활용하는 방법을 배워봅니다~
저는 유니티를 배우며 이 부분이 제일 궁금했었답니다.
유튜브 05 - https://www.youtube.com/watch?v=KgRnZTTeCew
** 오늘 배울 내용
유니티 함께한지 5일이 되었습니다. 이렇게 5번 더하면 10일 공부한 것이고, 그렇게 10번씩 더 하면 100일 됩니다. 100일을 다 채웠을 때 우린 뭔가 이루었을 것입니다. 게임 런칭해서 또 다른 수입 통로를 만들어 보자구요^^ 화이팅~
자, 오늘은 2D 기반의 소스를 에셋 스토어에서 다운받아서 살펴봅니다. 유니티에서 이미지를 다루는 중요한 개념을 살펴볼거에요^^
애니메이션은 덤으로 살짝 배워봅니다. 오늘 사용할 소스는 Free Platform Game Assets 입니다.
이제 눈감고 프로젝트 생성 하겠죠? ㅎㅎ
이렇게 2D 프로젝트가 생성되었습니다. 2D 프로젝트는 빛이 없고 카메라만 있습니다.
너무 귀엽지 않나요? 유티니 스토어 사이트에서 로그인을 한 뒤, 이 소스를 다운로드 합니다.
https://assetstore.unity.com/packages/2d/environments/free-platform-game-assets-85838
유니티에서 열기를 선택하시면 프로젝트 매니저가 열립니다. 다운로드를 먼저 한 후, 임포트를 합니다.
프로젝트의 에셋 폴더의 구조가 상당히 복잡합니다. 시간날때마다 둘러보고, 살펴보도록 하세요~ 소스들 뒤적거리다보면 플래시 파일도 보입니다. 플래시에서 애니메이션을 처리해서 사용하는것을 발견할 수 있습니다.
해당 소스를 찾아 일러스트레이터 원본을 열어본 화면입니다. 잘 모르겠으면 영상을 확인하세요^^
일러스트 원본 파일에서 이미지로 내보내는 과정입니다.
png-24 파일로 내보내기 합니다. 2배로 이미지를 키워 내보냅니다. 너무 작아서요~
png-24 파일 저장 위치는 현재 작업하는 프로젝트의 에셋 폴더 위치로 다음과 같이 저장합니다.
쨔잔~ 이렇게 프로젝트에 이미지가 추가되었습니다. 물론 탐색기에서 그냥 끌어다 놓아도 됩니다.
임포트해온 이미지는 여러 이미지들이 통으로 있습니다. 유니티에서는 이러한 이미지를 스프라이트 이미지라고 합니다. 유니티에서는 보통 이렇게 이미지들을 모아 놓은 스프라이트 이미지를 가져와 슬라이스 하여 사용합니다. 이렇게 스프라이트 이미지를 사용하면 코드 최적화를 할 수 있다고 하지만 수정시 주의를 요해야 합니다. 이미지들을 여러개로 잘라 사용함으로 Multiple 을 선택한 뒤, Sprite Editer를 클릭합니다.
적용을 누르면 이미지를 슬라이스할 준비가 됩니다. 스프라이트 에디터 창이 열립니다.
동영상을 참고하여 적당히 잘라줍니다. 여기서는 자르는 방법을 수동으로 진행해 보았습니다. 작업이 끝나면 오른쪽 상단의 빨간 버튼을 눌러 종료합니다. Apply를 클릭하여 슬라이스한 내용을 적용합니다.
쨔잔~ 이렇게 이미지가 슬라이스 되었습니다. ~ 자동으로 슬라이스 하는 방법은 다음에 살펴볼게요~
씬에 캐릭터 하나를 등록해봅니다.
이번에는 Jump 폴더에서 이미지를 잘라보도록 합니다.
방법은 동일합니다.
잘 되나요? 잘 안되면 영상을 참고하세요~
이제 점프하는 이미지들도 조각 내었으니, 아주 간단하게 애니메이션을 적용해보도록 합니다.
씬에 위치한 캐릭터를 선택하고 애니메이션의 Create를 클릭하여 다음과 같이 점프 애니메이션을 저장합니다.
다음과 같이 두개의 소스가 생성 되었는데요. 개념은 다음에 살펴보고 오늘은 간단히 만들어 봅니다. 점프 이미지 두개를 애니메이션 패널로 드래그하여 등록하면 두개의 키프레임이 생성됩니다.
점프 애니메이션은 한번만 재생하도록 하기 위하여 Loop Time을 해제합니다. 플레이 모드에서 확인하면 캐릭터가 넘어지는 것을 살펴 볼 수 있습니다. 애니메이터 창을 열어 구경도 살짝 해봅니다. 다음시간에 자세히 배워볼게요~
오늘은 이미지를 활용하는 방법에 대해서 살펴보았습니다. 일러스트레이터나 포토샵을 잘 다루는 분들은 디자인해서 가져오면 되는것을 알 수 있습니다. 신나죠? ㅎㅎ 또 간단하게 애니메이션도 살펴보았습니다. 앞으로 애니메이션을 좀 더 자세히 살펴보도록 합니다. 오늘은 여기까지~~
열심히 꾸준히~~~ Slow and steady wins the race… 정말 우리에게 필요한 말입니다. ^^
자 또 다음 시간에 달려보자구요^^