spine12 [Spine] 스파인 기초 튜토리얼 4편 - 스파인 캐릭터 걷기(Walk) 애니메이션 만들기 스파인 기초 튜토리얼 스파인 캐릭터 걷기(Walk) 애니메이션 만들기를 포스팅하겠습니다. 기초 튜토리얼 1, 2, 3편을 안 보신 스린이 분들에게는 기초 튜토리얼 1편부터 정독 하시는 게 포스팅을 이해하는 데 도움이 됩니다. [Spine] 스파인 기초 튜토리얼 1편 - 포토샵 캐릭터를 스파인에 불러오기 [Spine] 스파인 기초 튜토리얼 2편 - 스파인 캐릭터 리깅 [Spine] 스파인 기초 튜토리얼 3편 - 스파인 캐릭터 숨쉬기(Idle) 애니메이션 만들기 걷기 애니메이션은 거의 모든 게임에 사용된다고 해도 무방합니다. 튜토리얼 캐릭터는 정면을 보고 있는 상태여서 간단하게 정면 걷기 애니메이션을 만들 테지만 일반적인 2D 게임에서는 좌/우 걷기를 애니메이션을 대부분 사용하고 추가로 애니메이션을 만든다면.. 2022. 9. 12. [Spine] 스파인 기초 튜토리얼 3편 - 스파인 캐릭터 숨쉬기(Idle) 애니메이션 만들기 스파인 기초 튜토리얼 캐릭터 숨쉬기(Idle) 애니메이션 만들기를 포스팅하겠습니다. 기초 튜토리얼 1, 2편을 먼저 숙지하시고 보시면 더욱 이해하기 좋습니다. 스파인 기초 튜토리얼 1편 - 포토샵 캐릭터를 스파인에 불러오기 스파인 기초 튜토리얼 2편 - 스파인 캐릭터 리깅 애니메이션을 만들기 위해서는 포트 뷰의 좌측 상단에 있는 설정/애니메이션 아이콘을 클릭해 애니메이션 모드로 진입해야 합니다. 애니메이션 모드는 설정 모드보다 많은 기능이 있고 뼈 생성 및 이미지 폴더 변경 같은 기능은 사용할 수 없습니다. 그리고 애니메이션 모드에서 변형 도구를 이용하여 뼈나 어테치먼트를 변형해도 설정 모드의 세팅 값은 변하지 않으니 편하게 애니메이션 작업을 진행하면 됩니다. 튜토리얼 캐릭터는 단순하기 때문에 많은 내용.. 2022. 9. 11. [Spine] 스파인 스크립트를 이용한 포토샵 이미지 내보내기 및 스크립트 옵션 설명 스파인은 이미지 생성 프로그램에서 빠르게 이미지 추출 및 가져오기 위해서 스크립트를 제공하고 있습니다. 이번 포스팅에서는 스파인 스크립트 중 가장 많은 기능을 제공하는 포토샵의 스크립트를 다운로드하는 방법부터 적용 및 옵션 설명까지 알려드리도록 하겠습니다. 스파인이 지원하는 스크립트는 포토샵 외에도 에프터이팩트 일러스트레이터, 잉크스케이프, 김프, 어피니티 디자이너(프로그램이 스파인을 지원) 등이 있습니다. 포토샵 외의 프로그램에서 스크립트를 사용하여 이미지 추출이 필요하신 분은 이곳을 클릭해 다운로드를 받아 사용하시기 바랍니다. 포토샵 스크립트 PhotoshopToSpine.jsx 파일은 포스팅 상단에 첨부하였습니다. 스파인 스크립트 다운로드 및 포토샵 적용 방법 스파인 스크립트는 스파인 공식 홈페이지.. 2022. 9. 10. [Spine] 스파인 기초 튜토리얼 2편 - 스파인 캐릭터 리깅 리깅이란 3D 애니메이션에서 3D 모델링 캐릭터에 뼈를 심어 애니메이션을 만드는 방법입니다. 스파인에서도 동일하게 2D 이미지에 뼈를 심어 애니메이션을 만듭니다. 기초 튜토리얼 1편에서 스파인으로 가져왔던 캐릭터를 이용하여 스파인 리깅 작업을 진행하고 첨부파일로 작업했던 파일을 첨부하겠습니다. 스파인을 접해보지 않으셨거나 초보분들은 손에 익을 때까지 직접 리깅 작업을 해보시는 게 도움이 되니 스파인 평가판을 설치하여 직접 리깅을 해보시는걸 추천 드립니다. 1. 이미지 드로우오더 확인 데이터 가져오기 한 이미지들 확인하고 드로우오더 순서를 확인합니다. 드로우 오더를 꼼꼼히 확인하지 않는다면 복잡한 리깅 작업을 한 뒤 애니메이션을 만들때 혼란을 줄 수 있으므로 작업 전 드로우 오더를 꼭 확인하여 리깅 작업하.. 2022. 9. 9. [Spine] 스파인 뼈 생성 및 리깅 하기 스파인은 뼈를 이미지에 결합하여 애니메이션을 만들기 때문에 뼈의 생성은 스파인에서 매우 중요한 항목입니다. 뼈를 생성하는 법에 대해 숙지하지 못한다면 자연스러운 애니메이션을 만들기 위한 첫걸음을 하지 못한 것과 같습니다. 뼈를 정확한 위치와 길이로 생성하지 않는다면 애니메이션을 만들다가 다시 뼈를 수정해야 하는 일이 발생하기 때문에 뼈 생성 및 리깅 방법에 대해 반드시 숙지하시기 바랍니다. 이번 포스팅에서는 뼈의 생성 방법과 뼈의 속성, 이미지와 뼈를 결합하는 방법에 대해 자세히 알아보도록 하겠습니다. 1. 뼈 생성하기 뼈를 생성하기 위해서는 기본 도구에 있는 생성 도구를 활성화(단축키 N) 해줘야 합니다. 뼈의 모양은 아래 그림과 같이 3가지가 종류가 있으며 각각 사용 방법이 다릅니다. 십자 모양의 뼈.. 2022. 9. 8. [Spine] 스파인 기초 튜토리얼 1편 - 포토샵 캐릭터를 스파인에 불러오기 이번 포스팅에서는 포토샵에서 간단한 캐릭터를 생성하고 애니메이션 할 이미지를 나누어 스크립트를 통해 스파인으로 불러오는 과정을 설명하려고 합니다. 포스팅된 내용을 직접 따라 해보시고 싶은 분들은 스파인 평가판을 설치하시고 첨부파일을 다운로드하여 spine 파일을 실행하여 진행해 보실 수 있습니다. 스파인은 포토샵에서 만든 이미지를 손쉽게 스파인으로 불러올 수 있는 스크립트를 제공합니다. 스파인에서 제공하는 스크립트는 포토샵(Adobe Photoshop) 뿐만 아니라 일러스트레이터(Adobe Illustrator), 잉크스케이프(InkScape - 무료), 김프(GIMP - 무료) 프로그램을 지원합니다. 또한 일러스트레이터와 비슷한 어피니티 디자이너(Affinity Designer) 프로그램은 스파인 내보.. 2022. 9. 7. [Spine] 스파인 트리뷰 설명 트피뷰는 기본적으로 스파인 화면의 오른쪽에 배치되어 있습니다. 트리뷰에는 본, 제약조건, 드로우 오더, 스킨과 같은 애니메이션 작업을 하기 위한 정보들을 담고 있으며 각 항목들을 수정 및 세팅을 한 후 애니메이션 작업을 진행합니다. 해당 포스팅에서는 각 항목에 대한 내용과 기본적인 활용법을 다룰 예정이며 더욱 자세한 내용을 원하시면 스파인 공식 홈페이지에서 확인할 수 있습니다. 1. 뼈 뼈는 스파인 애니메이션 작업을 하기 위한 가장 중요한 요소입니다. 일반적으로 1개의 이미지에 1개의 뼈가 사용되지만 메쉬 도구를 사용하여 하나의 이미지에 많은 뼈를 적용하고 자연스러운 애니메이션을 만들 수 있습니다. 뼈는 계층 구조로 이루어져 있으며 최상의 본인 Root 뼈 하의로 자식 뼈들이 생성됩니다. 2. 슬롯 슬롯.. 2022. 9. 6. [Spine] 스파인 도구 설명 스파인 설정 모드에서 애니메이션을 만들기 전 본 세팅을 위해서는 스파인의 도구를 다룰 줄 알아야 합니다. 기본 도구, 변형 도구, 축 도구, 보정 도구, 옵션 도구 이렇게 총 5개의 도구가 있으며 해당 포스팅에서는 각 도구의 설명과 간단한 활용 방법을 알려 드리려고 합니다. 스파인 뷰포트 하단에 메인 툴바가 있습니다. 메인 툴바를 사용 시 마우스 포인트를 뷰포트에 놓고 오른쪽 클릭을 하면 현재 선택된 도구와 마지막에 선택한 도구가 전환됩니다. 이렇게 직접 툴바를 선택하지 않고 변경할 수 있고 많이 사용하는 항목에는 아래와 같은 단축키가 있습니다. 1. 기본 도구(Tools) 기본 도구에는 스파인에서 가장 중요한 뼈를 생성하는 생성 도구, 여러 개의 뼈와 이미지를 결합하여 매쉬를 적용하는 가중치 도구, 여.. 2022. 9. 5. 이전 1 2 다음
