안녕하세요!


ArtChicken 입니다.


 정말 오랜만입니다. 요즘 이매진컵 준비하느라 바빠서 대회 관련 글이랑 그림 글 밖에 못 올렸습니다. 그래도 지금은 어느 정도 여유가 생겼네요. 이번에는 저번에 못 다한 스파인으로 애니메이션 만들기를 해보려고 합니다.

일단 앞의 과정들은 모두 SETUP 입니다. 애니메이션을 만들기 전 세팅을 하셨다고 보면 되요. 이제 위의 사진에서 빨간 원으로 된 부분을 눌러줍시다.

그럼 이렇게 SETUP 에서 ANIMATE로 바뀌면서 애니메이션을 제작할 수 있게 됩니다!

애니메이션 제작에서 중요한 것은 밑의 그림에서 보이는 것처럼 열쇠 모양입니다.

보시면 Rotate, Translate, Scale에 열쇠 모양이 각각 하나씩 있습니다. 이것을 눌러주면 빨갛게 변하면서 밑의 Dopesheet에 표시됩니다. 그 의미는 현재 뼈대가 취하고 있는 각도, 위치, 크기 를 이 시간대에 고정시켜서 애니메이션에 활용하겠다는 의미입니다. 

그러므로 이렇게 적절한 시간 간격을 맞춰서(저 같은 경우 10프레임당 한 번) 걷는 모션을 배치해 주면



이와 같이 애니메이션을 만들 수 있습니다.

 아직 다듬지 않아 어색하지만 대충 걷는 것 같기는 하군요.

신고
  1. 어제봤던놈 2016.03.11 01:27 신고

    정말 많은 도움이 되었습니다.
    스파인을 처음 접하고 연습중인데, 계속 따라하다 캐릭터를 움직이는 과정이 많이 생략된거 같아요ㅠ,,
    본을 박는것 까지는 했는데, 프레임을 늘려서 캐릭터의 모션을 주는 방법을 잘 이해하지 못하겠어요. ㅠ.. 그런부분만 살짝 보충설명좀 해주셨으면 ㅠ.

  2. bugs 2017.01.17 13:42 신고

    안녕하세요, 셋업을 하는 과정에서 궁금한게 몇가지 생겼는데요.

    이미지가 본에 맞춰서 사이즈 조절이 자동으로되는데 이미지 원본 사이즈 그대로 본을 맞출 순 없을까요?

    본을 눈대중으로 생성하니 위치도 그렇고 사이즈도 그렇고 아주 다 제각각이되서요 ㅠㅠ

    아 그리고 한가지 더, 한번 생성한 본을 복사해서 대칭이되는 반대편에 위치시킬 순 없나요?

    예를 들어 왼쪽 팔에 맞춰 놓은 두개의 본을 오른 쪽팔에 대칭시켜서 붙여넣는다던지..

    찾아봐도 복사?기능은 없는 것 같아서 일일히 작업하기가 너무 번거롭네요!

    방법이 있을까요?

    • ArtChicken 2017.01.17 17:20 신고

      뼈 복사 기능이 없진 않습니다. Tree(트리)에서 하단에 세개의 작은 버튼이 있는데 첫번 째 버튼이 복사 버튼이죠. 하지만 대칭은 없는 듯 합니다. 직접 회전 이동 크기조정 값을 복붙해서 설정해 주셔야 할거에요...
      그리고 이미지가 본에 맞춰서 사이즈 조절이 자동으로 된다는 건 어떤 말씀인지 잘 모르겠어요. 혹시 본을 그릴 때 본의 크기 등이 잘못 만들어지면 크기 조절로 모양을 맞추시나요?

  3. bugs 2017.01.17 17:50 신고

    저도 오늘 처음ㅋㅋ 만져보는거라 이게 왜 이러는지 잘 모르겠는데 일단 제가 한건

    본을 생성한 뒤 슬롯(이미지포함)을 본에 넣어주니 그래픽이 본의 사이즈에 맞춰서 자동으로 조절이 되더라구요ㅠㅠ

    본을 짧게하면 머리도 본의 길이에 맞춰서 짧아진다거나;

    원래는 이런 현상이 없어야 정상인건가요?

    아 참 그리고 혹시 IK관련 강좌는 이 블로그에서 언제쯤 참고할 수 있을까요?

    매쉬까지 잘 따라했는데 다음 IK 강좌가 없네요 아직 제작 중이신가요? 부탁드립니다!

    강좌 감사하게 너무 잘 참고하고 있습니다.

    • ArtChicken 2017.01.17 17:55 신고

      본의 길이를 재 설정하실때는 만들어진 본의 크기를 재설정하시는게 아닌, 본을 새로 만들어 주셔야 합니다. 처음 생성한대로 Scale이 1로 설정되기 때문이죠. 그래서 재설정하기 위해 크기를 줄이거나 늘리면 이미지를 넣었을 때 반영되는 것입니다.
      본을 재설정하는 방법은 본의 생성 버튼이 눌러져있는 상태에서 바꾸고 싶은 본을 클릭하세요. 그리고 Alt 를 누른 상태에서 마우스를 드래그 하면 본이 다시 그려집니다.
      그리고 IK는... 특정 상황이 아니면 노답이어서 ㅎㅎ.. 때가 되면 올리지 않을까요....

  4. bugs 2017.01.17 18:32 신고

    아아 그렇군요 정말 감사합니다ㅠㅠ

    그리고 지금 해외 동영상 보면서 IK를 배웠는데, 이거 매우 편리한 기능 아닌가요? 노답이라고 말씀하신 이유를 여쭤봐도 될까요?

    스파인 IK는 불안정한가봐요?


    • ArtChicken 2017.01.17 18:34 신고

      이게 강력한 기능인것은 사실이지만 그냥 일반적인 애니메이션을 만들 때는 그냥 하나 하나 키프레임 찍는게 전 더 편해서요 ㅎㅎ 그리고 특히 IK를 추가하고 싶거나, 또는 IK를 삭제해야 하는 상황에서는 모든 애니메이션을 다시 설정해줘야 합니다. 그래서 전 특정 상황이 아니면 쓰지 않네요.

  5. bugs 2017.01.17 19:17 신고

    아아! 도움이 많이 되었습니다! 빠른 답변 감사합니다!!

안녕하세요!


ArtChicken 입니다.

 저는 현재 마이크로소프트에서 주최하는 기술 대회인 Imagine Cup에서 한국 결승을 준비 중에 있습니다. 팀 Four Idiots에서 컴공임에도 불구하고 팀에서 그래픽과 아트워크를 맡고 있죠.

게임 제목은 Illuminator로, 어둠에 휩쌓인 세상을 다시 비추기 위해 빛을 찾아 여행을 떠나는 어드벤쳐 퍼즐 게임입니다.

초기 아트워크는 맵과 주인공의 컨셉을 잡는 것에 중점을 두었습니다.

컨셉을 잡은 후에는 메인으로 넣을 완성도 있는 컨셉아트가 필요했습니다.

보시는 바와 같이 초기에는 캐릭터, 지형, 모든 것에 라인이 존재하지 않았습니다. 라인이 없는 것이 감성을 살리는데 더 좋다고 판단했기 때문입니다. 하지만 그리기는 라인이 있는 것보다 더 어려웠죠. 그래도 무난하게 1차 평가를 합격했습니다.

1차에서 합격하자 영상으로 보여주기 위한 데모 게임이 필요했습니다. 제가 아트워크와 그래픽을 담당했으므로 캐릭터와 애니메이션을 만들어야 했고, 처음에는 스프라이트 방식으로 만들어 보았습니다.

역시 이 방식은 힘이 들었고, 캐릭터의 움직임도 어색했습니다. 그러다가 2D 스켈레톤 툴인 Spriter를 접하게 되었습니다. 행동을 하나 하나 그리지 않아도 부드러운 애니메이션을 제작할 수 있었습니다.

초기 스프라이터로 제작한 주인공의 모습입니다.

하지만 Spriter는 버그가 많았습니다. 종종 뼈와 스프라이트가 어긋나거나 사라지는 등의 버그가 일어나서 작업에 영향을 주었죠. 그래서 결국 7만원짜리 Spine2D 라는 툴을 구매하게 됩니다.

그러다 Imagine Cup 오리엔테이션의 평가표에서 게임의 퀄리티가 별로 높지 않다는 말이 써있는 것을 보고 아예 그래픽을 뜯어 고칠 생각을 했습니다.

그렇게 탄생한 주인공의 새로운 모습입니다. 라인이 없는 것이 감성을 살릴 수 있을지 몰라도 저의 그림 실력으로는 그러긴 커녕 퀄이 낮은 조잡한 게임을 만들어 버렸습니다. 그래서 그냥 라인을 살려서 퀄을 더 높이는 것으로 방향을 정했습니다. 확실히 지금 생각하면 탁월한 선택이었죠.

그렇게 배경도 최대한 퀄리티 있게 제작하고

지형도 다시 제작했습니다.

그리고 아예 모든 컨셉아트들을 뜯어 고쳤습니다. 만화같아 졌지만 예전의 그림들보다는 퀄리티가 훨씬 높다는것이 중론입니다.


현재 Illuminator는 계속 개발되고 있습니다. 퀄리티를 계속 상승시키고 재밌는 퍼즐들을 제작 중이니 기대해주세요!





신고

안녕하세요!


ArtChicken 입니다.


 저번에 프롤로그에서 Spine에 대한 간단한 소개를 했습니다. 그렇다면 이제 스파인 겉핧기를 시작해 봅시다!

준비물은 만들 캐릭터의 파츠별 스프라이트와 스파인 프로그램이 필요합니다. 일단 캐릭터를 먼저 그리도록 하죠.


요렇게....


요렇게...

되도록이면 밑그림만 그려놓고 레이어를 나눠서 부위별로 그려줍시다.


대충 채색도 완료 되었군요. 명암도 넣고 싶지만 일단 귀찮으니 Pass!

부위 별로 나눠 놓으면 이러한 그림이 됩니다.

이제 각 부위들을 사진 편집툴로 하나씩 잘라줍시다.


그리고 한 폴더에 모조리 몰아넣어 주세요.

그러면 스프라이트는 준비가 끝났습니다.


이제 스파인을 켜주세요.

처음 스파인을 켜면 이러한 화면을 보실 수 있습니다. 

오른쪽에 보시면 프로젝트의 트리 메뉴를 보실 수 있습니다. 하나씩 설명을 드리자면

1. Skeleton : 프로젝트 그 자체입니다.

2. Root : 화면상에 나오는 Bone들과 스프라이트들을 모아놓는 곳입니다. 부모 자식 관계를 설정해 줄 수 있고, Bone에 스프라이트를 적용시킬 수 있습니다.

3. Draw Order : 화면에 나타나는 스프라이트들의 순서를 설정하는 곳입니다. Draw Order 내에서 가장 위에 있는 스프라이트가 화면에서 가장 앞에 나타납니다.

4. Images : 스프라이트들이 들어있는 폴더를 지정해서 스파인에 적용시킬 수 있게 합니다.

5. Skins : 게임에서의 스킨과 똑같은 개념입니다. Bone은 그대로 유지하되, 스프라이트들을 바꿀 때 사용됩니다.

6. Animations : 애니메이션들을 모아놓는 곳입니다.

7. Events : 이벤트들을 설정해 주는 곳입니다. 결과물이 게임에 적용될 때, 애니메이션의 특정 부분에서 소리나 파티클 등의 효과가 필요하다면 그 트리거 역할을 합니다.

8. Constraints : 프로버전에서만 사용할 수 있는 기능이라 무슨 기능인지는 모르겠습니다.


이제 본격적으로 캐릭터를 제작해 봅시다!

Images 메뉴를 클릭하시면 아래와 같은 폴더 설정을 보실 수 있습니다. 여기서 스프라이트들이 모여있는 폴더를 지정해 주세요.

제대로 적용되었으면 이렇게 Images 안에 폴더 내의 스프라이트들이 주르륵 나열됩니다.

그러면 이제 각 부위들의 스프라이트들을 옆의 빈공간에 드래그 해서 다시 한 몸으로 만들어 줍시다.

스프라이트들의 순서가 뒤죽박죽이라 희한한 모양이 되었습니다. 이럴 경우 Draw Order에서 순서를 바꿔주시면 됩니다.

 자 스프라이트들의 배치가 끝났으니 이제 중요한 작업이 남았습니다. Bone, 즉 뼈대를 설정하는 작업이죠. 일단 캐릭터의 중심을 정해주어야 합니다. Root 는 모든 Bone들에 대해 부모 관계에 있습니다. 한 마디로 중심이죠. 캐릭터를 제작할 때 무게중심이라고 느껴지는 곳에 Root를 배치해줘야 더 자연스러운 애니메이션을 구현할 수 있습니다. 저의 캐릭터는 사람형태이므로 하반신에 Root를 배치해 주겠습니다.

이제 무게 중심도 잡았으니 본격적으로 Bone을 만들어 봅시다. 작업 창 밑에 Tools 라고 써있는 메뉴를 보시면 Create 라는 옵션이 있습니다.

이 항목을 클릭하신 후 화면에서 알맞은 곳에 드래그를 하시면

이와 같이 Bone이 형성됩니다. 만약 Select a parent bone before creating a new bone 이라고 뜨신다면 부모 Bone을 먼저 선택해 달라는 이야기 입니다. 이 때는 현재 생성하고자 하는 Bone이 자식, 바로 직전 선택했던 Bone이 부모가 됩니다. 

예를 들어 Bone2 를 생성하기 전 Bone1이 선택된 상태였다면 Bone1은 부모, Bone2는 자식이 됩니다. 이렇게 이어진 Bone 들은 서로의 움직임에 영향을 미칩니다. 부모를 움직이면 자식도 따라 움직이지만, 자식을 움직이면 부모가 함께 움직이진 않습니다.

스페이스바를 누르면 모든 선택이 취소됩니다. 이 때 각 Bone들의 부모 자식 관계를 위의 그림과 같이 알아볼 수 있죠. 그런데 아직 스켈레톤에 스프라이트를 적용시켜 주지 않아서 Bone만 움직일 것입니다.

위와 같이 Root 내에서 스프라이트를 알맞은 Bone에 드래그 해주면 스프라이트와 Bone이 하나가 되어 움직입니다.


이렇게 스프라이트와 Bone의 적용법을 마쳤습니다. 캐릭터에게 생동감을 부여하는 과정의 베이스를 마련했다고 보시면 됩니다. 다음 시간에는 캐릭터의 애니메이션을 제작할 것이니 기대해주세요!




신고

+ Recent posts

티스토리 툴바