2D 디자인16 [Spine] 스파인 메쉬(Mesh) 알아보기 2편 - 엣지 스파인에서 메쉬를 만들 경우 엣지와 버텍스의 개념을 정확히 이해하고 작업을 진행해야 합니다. 대략적으로 메쉬를 생성하고 애니메이션을 만들다 보면 원하는 느낌을 만들기 위해 많은 시간이 소요될 수 있기 때문에 메쉬 생성 시 엣지와 버텍스를 정확하게 생성하고 애니메이션 작업을 진행해야 합니다. 상단에 첨부된 로켓 애니메이션은 1장의 로켓 이미지로 만들어졌지만 메쉬의 엣지와 버텍스를 필요한 위치에 생성하여 불꽃 부분만 움직이도록 애니메이션 되었습니다. 이처럼 메쉬의 엣지와 버텍스의 개념을 정확히 이해한다면 최소한의 이미지로 스파인 작업을 할 수 있습니다. 이번 포스팅에서는 엣지를 생성하는 방법을 알아보고 엣지의 연결된 상태에 따라 메쉬가 어떻게 움직이는지 알아보도록 하겠습니다. 엣지 메쉬의 엣지는 버텍스(정점.. 2022. 9. 18. [Photoshop] 포토샵 종이 질감 / 종이 텍스처 만들기 그래픽 작업이나 게임 리소스를 만들 경우 종이 질감의 느낌을 내고 싶을 때가 있습니다. 무료 텍스쳐를 찾아 사용하는 경우도 있지만 상업적으로 이용이 가능한지에 대해서 정확히 기술되어 있지 않은 경우도 있고 무료지만 상업용으로는 사용이 불가능한 경우도 있습니다. 이럴 경우 직접 텍스처를 만들어 사용해야 하는데 만드는 방법을 몰라 막막한 경우가 있죠. 이번 포스팅에서는 상단에 포함 된 이미지처럼 포토샵을 이용하여 빠르고 간단하게 종이 질감을 만드는 방법에 대해 알아보도록 하겠습니다. 포스팅에 사용된 포토샵 버전은 Adobe Photoshop 2020 입니다. 종이 텍스처 만들기 1. 신규 레이어 생성 후 필터에 Clouds 효과를 적용합니다. 효과가 적용되었을 때의 모양이 중요하므로 여러 번 눌러 마음에 드.. 2022. 9. 16. [Spine] 스파인 단축키 스파인에서 지원하는 단축키가 생각보다 많이 있습니다. 각 모드나 설정 / 애니메이션 모드 등 특정 상황에서 사용할 수 있는 단축키 들인데요. 스파인에서 기본으로 설정되어 있는 단축키에 대해서 포스팅하려고 합니다. 단축키는 작성자 기준으로 많이 사용하는 순서대로 아래와 같이 강조 표시할 예정이며, 애니메이션 작업을 하는 사람마다 단축키 사용 빈도가 다르니 참고 부탁 드립니다. 사용 빈도 높음 사용 빈도 낮음 사용 빈도 매우 낮음 스파인 단축키는 기본으로 제공하는 키 외에도 추가 설정 및 기존 단축키 수정이 가능합니다. 아래 경로에서 열기를 클릭하면 단축키 메모장이 활성화되는데 여기서 수정한 후 다시 로드를 클릭하면 변경하거나 추가한 단축키를 사용할 수 있습니다. 단축키 위치 메인 메뉴 > 설정 > 파일 >.. 2022. 9. 14. [Spine] 스파인 메쉬(Mesh) 알아보기 1편 - 메쉬 옵션 메쉬는 3차원 그래픽에서 사용되는 점 / 선 / 면으로 구성된 삼각형의 집합이라고 할 수 있습니다. 아래 그림은 포토샵에서 지원하는 메쉬이고 이미지가 삼각형 모양으로 나뉘어 있는 걸 확인 할 수 있습니다. 스파인에서는 이미지에 삼각형 모양의 메쉬를 직접 만들고 뼈들을 결합하여 3D 애니메이션에서 사용하는 방법을 2D에 적용하였습니다. 스파인의 메쉬를 활용하면 2D 이미지로 3D 느낌의 애니메이션을 만들 수도 있고 웨이브나 말랑거리는 물체를 만들 수 있는 강력한 도구입니다. 메쉬 기능을 배우게 되면 자연스럽게 FFD(Free-From Deformation)기능과 Weighted Meshes 기능을 습득하실 수 있습니다. 이번 포스팅에서는 스파인 메쉬 알아보기 1편으로 메쉬의 옵션과 메쉬 편집의 기능을 알아.. 2022. 9. 13. [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. 이전 1 2 다음
