애니메이션 도구 DragonBones의 공통 용어 및 사용법 소개(그림)

이 글은 애니메이션 도구 DragonBones의 일반적인 용어와 사용법을 소개합니다(그림). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

더 적은 아트 비용으로 더욱 생생한 애니메이션 효과를 만드는 방법은 무엇입니까? 오늘 저는 데스크탑 골격 애니메이션 제작 도구인 DragonBonesPro와 DragonBones 골격 애니메이션 라이브러리의 다국어 버전이 포함된 오픈 소스 2D 골격 애니메이션 프레임워크 및 도구 세트인 DragonBones를 소개하겠습니다.

다음은 DragonBones의 일반적인 용어와 사용법을 소개합니다.

1. DragonBones 2D 뼈대 애니메이션의 일반적인 용어

뼈대: 뼈대(Armature)는 2D 뼈대 애니메이션에서 가장 일반적으로 사용되는 용어로, 일반적으로 많은 뼈로 구성된 전체를 나타냅니다. DragonBone은 애니메이션을 포함할 수 있는 캐릭터도 나타냅니다.

Skeleton(Bone): Skeleton 또는 Bone은 뼈대 네트워크에서 뼈대를 구성하는 가장 중요한 기본 단위입니다. 뼈 자체는 분해할 수 없습니다. 뼈대에서 서로를 기준으로 변환, 회전, 크기 조정 및 이동할 수 있으며 뼈대 애니메이션을 형성합니다. 또한 뼈 사이에는 부모-자식 관계가 있을 수 있습니다. 일반적으로 기본 순방향 역학에서는 상위 골격의 움직임으로 인해 하위 골격이 함께 움직이게 됩니다. 예를 들어 캐릭터가 팔 위쪽을 들어 올리면 위쪽 팔의 하위 골격인 작은 팔도 함께 움직입니다. 그에 따라 해제됩니다.

슬롯: 슬롯은 뼈대 애니메이션에서 그림을 표시하기 위한 컨테이너이며 뼈대에 속합니다. 각 슬롯에는 여러 이미지가 포함될 수 있지만 한 번에 하나의 이미지만 표시됩니다. 각 뼈대 그리드에는 여러 슬롯이 포함될 수 있습니다. 슬롯은 뼈의 애니메이션 논리 단위와 그림의 애니메이션 표시 단위를 연결하여 DragonBones 골격 애니메이션의 기본 뼈 구조인 뼈-슬롯-그림을 형성합니다.

그림(texture): 그림은 이미지를 표현하는 요소입니다. 2D 골격계에서는 그림과 질감의 의미가 크게 다르지 않으므로 여기서도 질감이라고 할 수 있습니다.

텍스처 세트: 텍스처 세트는 게임 내 리소스 통합, 배포 및 로딩을 용이하게 하는 패키지 이미지로 구성된 대형 이미지입니다. 하드웨어 가속 엔진이나 Egret Runtime을 사용하는 경우 텍스처 세트를 사용하면 렌더링 효율성을 크게 향상시킬 수 있습니다. 따라서 리소스 가져오기를 위해 DragonBones에서 제공하는 기본 인터페이스는 텍스처 세트를 사용하는 것입니다.

애니메이션 트위닝: 일반적으로 디자이너가 골격 애니메이션을 수행할 때 모든 프레임에서 캐릭터를 이동할 필요는 없지만 일부 주요 위치(키 프레임)의 주요 움직임만 이동하고 그 사이의 모든 주요 움직임을 절차적으로 대체합니다. 애니메이션 트윈인 생성된 트윈입니다. 애니메이션 트윈은 선형이거나 비선형일 수 있습니다. 선형 트위닝은 트윈의 구성 요소가 일정한 속도로 변환(변환, 회전, 크기 조정)되는 것을 의미합니다. 비선형 트위닝은 일반적으로 다양한 곡선으로 표현됩니다. 기본적으로 베지어 곡선은 비선형 트위닝을 나타내는 데 사용됩니다.

애니메이션 전환: 애니메이션 전환은 한 애니메이션에서 다른 애니메이션으로 전환할 때 생성되는 전환 효과를 말합니다. DragonBones는 애니메이션 이동 표면을 전환할 때 전환 효과 기능을 제공합니다. 전환 시간이 설정되어 있으면 부드러운 전환 효과가 자동으로 생성될 수 있습니다.

애니메이션 융합: 동적 표면 융합은 캐릭터가 동시에 여러 애니메이션을 재생하는 기능을 제공합니다. 이 기능은 일반적으로 두 가지 상황에서 사용됩니다. 첫 번째 유형은 캐릭터의 애니메이션이 상대적으로 복잡한 경우 상체와 하체를 별도로 애니메이션화한 다음 마음대로 결합할 수 있다는 것입니다. 두 번째 유형은 캐릭터가 달리면서 촬영해야 하고 몸이 뒤로 젖혀진 경우, 즉 달리는 애니메이션과 촬영되는 애니메이션이 동시에 삽입되는 경우입니다. 애니메이션 융합 기능은 다양한 애니메이션에 대한 가중치를 설정하고 다양한 뼈대 경로에 애니메이션 마스크를 추가하여 이 두 가지 요구 사항을 충족합니다. 주의할 점은 DragonBones는 일반 모드에서만 애니메이션 융합 기능을 제공하고, 스피드 모드에서는 이 기능을 제공하지 않는다는 점입니다.

전방 역학(FK) 및 역 역학(IK): 골격 애니메이션에서 일반적으로 하위 골격의 움직임은 상위 골격의 영향을 받습니다. 예를 들어 큰 팔이 회전하면 팔뚝도 회전을 따릅니다. . 이것을 긍정적 역학이라고 하는데, 이는 아버지가 자녀에게 영향을 미친다는 의미입니다. 물론, 현실 세계에도 반대 상황이 존재합니다. 예를 들어, 누군가가 당신을 때리면 당신은 그것을 팔뚝으로 막습니다. 팔뚝이 힘차게 움직이면 큰 팔도 힘차게 움직이게 됩니다. 역전력 공부. DragonBones에서 뼈 경로 조정 작업을 제어할 때 뼈는 일반적으로 순방향 역학 법칙을 따릅니다. 즉, 상위 뼈가 조정되면 하위 뼈도 영향을 받습니다. 역동성을 통해 애니메이션을 조정하려면 해당 IK 도구를 선택하여 달성할 수 있습니다.

먼저 설치가 완료된 후 그림 1과 같이 환영 인터페이스를 열고 프로젝트를 선택합니다.

사진 1

그런 다음 그림 2와 같이 선택한 프로젝트를 엽니다.

사진 2

다음으로 그림 2의 각 도구 사용 방법을 설명하겠습니다

1. 시스템 도구 모음

시스템 도구 모음에는 왼쪽부터 오른쪽으로 새 프로젝트, 프로젝트 열기, 그림 3과 같이 프로젝트를 저장하고 실행 취소, 다시 실행, 가져오기, 내보내기, 미리보기 및 작업 공유를 수행합니다.

그림 3

새 프로젝트: 새 프로젝트를 만드는 데 사용됩니다. 이 버튼을 클릭하면 새 프로젝트 대화 상자가 열립니다.
프로젝트 열기: 기존 프로젝트를 열 때 사용됩니다. 이 버튼을 클릭하면 시스템 지정 파일 대화 상자가 열립니다.
프로젝트 저장: 현재 프로젝트에 변경 사항이 있는 경우 프로젝트 저장 버튼이 켜집니다. 버튼을 클릭하면 프로젝트가 저장되고 나면 프로젝트 저장 버튼이 어두워집니다.
실행 취소: 마지막 편집 작업을 취소하는 데 사용됩니다.
다시 실행: 마지막으로 실행 취소된 편집 작업을 다시 실행하는 데 사용됩니다.
가져오기: 지원되는 프로젝트 파일 형식을 가져오는 데 사용됩니다. 이 버튼을 클릭하면 가져오기 대화 상자가 열립니다.
내보내기: 프로젝트를 내보내는 데 사용됩니다. 이 버튼을 클릭하면 내보내기 대화 상자가 열립니다.
미리보기: 브라우저에서 애니메이션의 실행 효과를 미리 봅니다. 프로젝트에 여러 애니메이션 클립이 포함된 경우 브라우저에서 마우스 왼쪽 버튼을 클릭하여 애니메이션 클립 간에 전환할 수 있습니다.
작품 공유: 작품 공유 및 업로드 페이지를 엽니다.

2. 메인 장면 도구 모음

기본 장면 도구 모음은 장면 작업 중에 마우스 모드를 전환하는 데 사용됩니다. 왼쪽에서 오른쪽으로 선택 도구, 포즈 도구, 손 도구, 뼈대 생성 도구가 있습니다. 그림 4가 표시됩니다.

그림 4

선택 도구: 뼈를 선택할 때 뼈 자체를 마우스로 클릭하고 왼쪽 버튼을 누르고 있으면 뼈를 X, Y 방향으로 임의로 이동할 수 있습니다. 빨간색 X축(또는 녹색 Y축)을 마우스로 클릭하면 단일 X축(Y축) 방향으로 이동됩니다. 마우스로 슬롯에 있는 그림 자체를 드래그하고 왼쪽 버튼을 누르고 있으면 뼈를 X, Y 방향으로 이동할 수 있습니다. 빨간색 X축(또는 녹색 Y축)을 클릭하여 단일 X축(Y축)을 선택합니다. 방향으로 번역하세요. 슬롯을 확대/축소하려면 마우스로 확대/축소 핸들을 드래그하세요. 소켓은 다른 영역에서 마우스를 길게 클릭하여 회전할 수 있습니다. (소켓은 뼈대 조립 모드에서만 선택하고 상태를 변경할 수 있습니다.)

포즈 도구: 뼈를 선택하면 마우스를 드래그하면 뼈가 회전합니다. 두 개 이상의 뼈를 선택하면 선택한 뼈는 IK 규칙을 따르고 마우스 드래그를 따릅니다.

뼈 만들기 도구: 뼈 만들기 도구를 선택하고 메인 장면에서 마우스 왼쪽 버튼을 클릭한 다음 드래그하여 뼈를 만듭니다. 또한 메인 장면에서는 몇 가지 일반적인 작업이 지원됩니다.
DragonBones Pro 장면을 확대하거나 축소하려면 마우스 휠을 밀고 당깁니다.
선택 도구나 손 도구 위에 마우스를 올려 놓은 상태에서 왼쪽 버튼으로 아무 곳이나 두 번 클릭하면 장면 크기가 100%로 복원됩니다.
선택을 취소하려면 영역을 마우스 오른쪽 버튼으로 클릭하세요.

가중치 도구: 가중치는 다양한 뼈 변형의 영향을 받는 피부의 비율을 나타냅니다. 각 피부 정점의 무게를 합리적으로 할당하는 것이 중요합니다.

3. Visible Optional Filter 패널

Visible Optional Filter 패널은 그림 5와 같이 뼈대와 슬롯의 표시, 선택 및 상속 편집 스위치를 켜거나 끄는 데 사용됩니다.

그림 5

Visible: 켜져 있으면 뼈대나 슬롯이 기본 장면에 표시되고, 꺼지면 뼈대나 슬롯이 기본 장면에 표시되지 않습니다.
선택 사항: 켜져 있으면 기본 장면에서 뼈나 슬롯을 선택할 수 있으며, 꺼져 있으면 기본 장면에서 뼈나 슬롯을 선택할 수 없습니다.
상속: 설정하면 뼈나 슬롯이 상위 뼈의 편집 내용을 상속하고, 끄면 뼈나 슬롯은 상위 뼈의 편집 내용을 상속하지 않습니다.

4 변환 패널

변환 패널은 X, Y 좌표(상위 뼈대 기준), 크기 조절, 회전 각도 및 뼈나 슬롯의 이미지 크기(슬롯 및 이미지에만 해당)를 표시하고 수정하는 데 사용됩니다. 보여주다). 변환 패널은 그림 6에 나와 있습니다.

그림 6

5. 씬 트리 패널

씬 트리 패널은 그림 7과 같이 메인 씬의 뼈대와 슬롯의 상위-하위 트리 관계를 표시하고 편집하는 데 사용됩니다.

사진 7

오른쪽 상단에 있는 버튼은 스마트 필터링, 스켈레톤 생성 버튼, 삭제 버튼입니다. 뼈대 어셈블리 모드에서 장면 트리의 뼈나 슬롯을 두 번 클릭하면 이름 바꾸기 창이 팝업됩니다. 이 패널은 뼈대 리깅과 애니메이션 모두에서 표시되지만 애니메이션에서는 편집할 수 없습니다. 뼈대와 슬롯은 씬 트리에서 확인할 수 있습니다.

다음은 장면 트리의 뼈대 상속 관계 편집입니다.

뼈 간의 상속 관계는 장면 트리 패널에서 드래그하여 변경할 수 있습니다.

하위 뼈는 동일한 레벨이나 부모 이상의 뼈로 드래그할 수 있습니다.

부모 뼈는 자식 뼈와 그 아래 뼈 아래로 드래그할 수 없습니다.

6. 계층 패널

계층 패널은 메인 슬롯의 상위 및 하위 계층 관계를 표시하고 편집하는 데 사용됩니다. 장면. 드래그를 통해 슬롯 간의 계층 관계를 변경할 수 있습니다. 슬롯을 선택한 후 오른쪽 상단 모서리에 있는 한 레벨 위로 및 한 레벨 아래로 버튼을 클릭하거나 단축키 []를 클릭하여 계층 관계를 변경할 수도 있습니다. 이 패널은 뼈대 어셈블리 모드에서만 나타납니다. 계층 구조 패널은 그림 8에 나와 있습니다.

그림 8

7. 리소스 패널

프로젝트에 사용된 모든 이미지는 리소스 패널에 저장됩니다. 각 DragonBonesPro 프로젝트의 리소스 라이브러리는 시스템 폴더에 실제로 존재하는 폴더에 해당합니다. Pro에서 지원하는 모든 PNG 이미지가 리소스 패널에 표시됩니다. 다른 시스템 폴더를 통해 DragonBones로 Pro의 리소스 패널에서 PNG 파일을 드래그 앤 드롭하여 리소스 라이브러리에 이미지를 추가하면 해당 PNG 파일도 해당 리소스 라이브러리 폴더에 복사됩니다. "리소스 가져오기" 버튼을 클릭하고 팝업 시스템 창에 추가할 리소스 PNG 파일을 지정할 수도 있습니다. 리소스 패널은 그림 9에 나와 있습니다.

그림 9

오른쪽 상단에 있는 버튼은 리소스 가져오기 버튼, 라이브러리 폴더 열기 버튼, 경로 수정 버튼입니다. 이 패널은 뼈대 어셈블리 모드에서만 표시될 수 있습니다.

8. 편집 모드 전환 버튼

편집 모드 전환 버튼은 장면의 왼쪽 상단에 있으며 그림 10과 같이 뼈대 조립과 애니메이션 제작 간을 전환하는 데 사용됩니다.

그림 10

9. 애니메이션 패널

애니메이션 패널은 그림 11과 같이 애니메이션 클립을 표시하고 편집하는 데 사용됩니다.

그림 11

오른쪽 상단에 있는 버튼은 애니메이션 클립 생성 버튼, 애니메이션 클립 복제 버튼, 애니메이션 클립 이름 바꾸기 및 삭제 버튼입니다. 이 패널은 애니메이션 아래에만 표시될 수 있습니다. 애니메이션 패널 아래의 세 가지 매개변수는 다음과 같습니다.

애니메이션 시간: 편집할 수 없으며 단위는 s입니다. 애니메이션 클립의 실제 지속 시간은 애니메이션 클립의 프레임 속도와 총 프레임 수를 기준으로 계산됩니다.
초과 시간: 기본값은 0, 편집 가능, 단위는 s입니다. 게임에서 움직이는 여러 표면 사이의 전환 시간을 설정하는 데 사용됩니다.
재생 횟수: 기본값은 0이며 편집할 수 있습니다. 게임 내 애니메이션의 반복 횟수를 설정하는 데 사용됩니다. 0으로 설정하면 무한 반복을 의미합니다.

10. 타임라인 패널

타임라인 패널은 그림 12와 같이 애니메이션 클립 편집에만 사용됩니다.

그림 12

재생 제어 도구

타임라인 패널의 재생 제어 도구는 애니메이션 클립의 재생을 제어하는 ​​데 사용됩니다. 왼쪽에서 오른쪽으로: 첫 번째 프레임으로 돌아가기 버튼, 이전 프레임 버튼, 되감기 버튼, 재생 버튼, 다음 프레임 버튼, 마지막 프레임 버튼, 재생 속도 제어 슬라이더, 현재 프레임, 현재 시간, 프레임 속도 등 그림 13에 표시됨 . 재생 속도 조절 슬라이더의 조절 범위는 0.1x~10x입니다. 현재 프레임: 편집 가능. 특정 프레임 번호를 입력하면 녹색 재생 포인터가 해당 프레임 번호로 이동합니다. 녹색 포인터를 드래그하거나 움직이는 원을 재생하면 현재 프레임의 값이 그에 따라 변경됩니다. 현재 시간: 편집할 수 없으며 현재 프레임 및 프레임 속도를 기준으로 계산됩니다. 프레임 속도: 편집 가능, 기본값은 24fps입니다. 그림 13과 같이 초당 애니메이션 프레임 수를 설정합니다.

그림 13

프레임 편집 도구 모음

프레임 편집 도구 모음, 왼쪽에서 오른쪽으로: 불필요한 프레임 삭제, 여러 프레임 편집, 어니언 스킨 버튼, 프레임 오른쪽으로 이동, 프레임을 왼쪽으로 이동, 자동 키프레임 버튼, 곡선 편집기(그림 14 참조).

그림 14

불필요한 프레임 삭제: 전체 타임라인에서 불필요한 키프레임을 자동으로 확인하여 삭제합니다. 불필요한 키프레임을 삭제하면 애니메이션 프레젠테이션에 전혀 영향을 주지 않고 애니메이션 파일을 줄일 수 있습니다.
어니언 스킨 버튼: 어니언 스킨 기능을 켜고 끕니다.
여러 프레임 편집: 곡선을 일괄 편집하려면 여러 프레임을 선택하세요.
키프레임을 왼쪽으로 이동, 키프레임을 오른쪽으로 이동: 버튼을 클릭하면 모든 키프레임이 선택한 키프레임의 오른쪽(왼쪽)으로 이동합니다. 왼쪽의 마지막 프레임에 이미 키프레임이 있으면 더 이상 왼쪽으로 이동할 수 없습니다. 왼쪽의 키프레임 이동 버튼은 오른쪽과 마찬가지로 회색으로 표시됩니다.
자동 키프레임 버튼: 이 버튼에는 두 가지 상태가 있습니다. 흰색은 꺼지고 빨간색은 켜집니다. 켜져 있으면 뼈대나 슬롯을 변경하면 녹색 재생 헤드의 프레임과 해당 뼈대나 슬롯 레이어에 키프레임이 자동으로 추가됩니다.
곡선 편집기: 곡선 편집기 이 패널에서는 프레임 사이에 트위닝을 적용하여 다양한 트위닝 효과를 얻을 수 있습니다.

타임라인 도구 모음

타임라인 도구 모음, 왼쪽에서 오른쪽으로: 목록 축소, 목록 확장, 프레임 복사 버튼, 프레임 잘라내기 버튼, 프레임 붙여넣기 버튼, 프레임 삭제 버튼(그림 15 참조).

그림 15

목록 축소: 타임라인의 모든 레이어를 축소합니다.
목록 확장: 타임라인의 모든 레이어를 확장합니다.
프레임 복사 버튼: 키프레임을 선택한 후 이 버튼을 클릭하면 프레임의 매개변수가 클립보드에 복사됩니다.
프레임 자르기 버튼: 키프레임을 선택한 후 이 버튼을 클릭하면 프레임의 매개변수가 클립보드로 잘립니다.
프레임 붙여넣기 버튼: 클립보드의 프레임 매개변수는 타임라인의 모든 프레임 번호와 레이어에 붙여넣을 수 있습니다(본 레이어와 슬롯 레이어의 프레임은 서로 붙여넣을 수 없으며 키 프레임에 기록된 매개변수는 이전 키 프레임 상대 변경 값과 동일합니다. 프레임 0의 상대 변경 값은 0입니다. 기존 키 프레임을 덮어쓸 수도 있습니다.
프레임 삭제 버튼: 현재 선택한 프레임을 삭제합니다.
키프레임 추가 버튼: 이 버튼에는 3개의 상태 버튼이 있습니다. 흰색은 변경 사항이 없고 키프레임이 없음을 의미합니다. 노란색은 변경 사항을 나타내며 키프레임이 추가되거나 업데이트되지 않았음을 나타냅니다. 빨간색은 변경 사항이 없으며 키프레임이 추가 또는 업데이트되었음을 ​​나타냅니다. 흰색 또는 노란색 상태에서 이 버튼을 클릭하면 녹색 재생 포인터가 있는 프레임과 해당 뼈대 레이어 또는 슬롯 레이어에 키프레임을 추가하거나 업데이트할 수 있습니다. 빨간색 상태를 클릭해도 아무런 효과가 없습니다. 뼈나 슬롯이 빨간색이나 흰색 상태로 변경되면 버튼이 노란색으로 바뀌어 뼈나 슬롯이 변경되었음을 나타냅니다. 선택한 뼈대나 슬롯이 없으면 이 버튼을 사용할 수 없습니다.
곡선 그래프 패널 버튼: 곡선 그래프 패널을 켜고 끕니다.

타임라인 확대/축소 도구

타임라인 확대/축소 도구는 그림 16과 같이 타임라인의 크기 조정을 제어하는 ​​데 사용됩니다. 왼쪽에는 화면에 맞춤 버튼이 있으며, - 및 + 버튼은 확대/축소를 제어하며 슬라이더를 드래그하여 확대/축소도 제어할 수 있습니다. 그림 16과 같습니다.

그림 16

어니언 스킨 도구

어니언 스킨 기능을 켜면 전후 N프레임(기본값은 3프레임)의 그림자 이미지가 동시에 표시되는데, 애니메이터가 캐릭터의 움직임을 더 잘 배치하고 연속적인 애니메이션을 만드는 데 도움이 됩니다. 애니메이션 모드로 들어가서 타임라인 도구 모음의 어니언 스키닝 버튼을 클릭하여 그림 17과 같이 어니언 스키닝 기능을 켭니다.

그림 17

어니언 스키닝 기능을 켠 후 메인 장면의 애니메이션에는 파란색(선행 프레임)과 빨간색(후속 프레임)의 그림자 이미지가 나타나며, 애니메이션에서는 다음과 같이 그림자 이미지 효과를 나타냅니다. 그림 18에 나와 있습니다.

그림 18

동시에 어니언 스킨 표시 영역에 타임라인의 녹색 재생 포인터가 나타나며 기본값은 전후 3프레임이며, 왼쪽의 조정 핸들은 빨간색입니다. 오른쪽의 조정 핸들은 그림 19와 같이 파란색입니다.

사진 19

파란색 또는 빨간색 핸들을 드래그하여 파란색 또는 빨간색 어니언 스킨에 표시되는 프레임 수를 조정하세요. 더 많은 프레임을 포함할수록 주 메뉴에 더 많은 그림자가 표시됩니다. 녹색 재생 포인터가 이동하면 어니언 스킨 표시 영역도 이동합니다. 애니메이션 재생 중에는 녹색 재생 포인터의 어니언 스킨 표시 영역이 숨겨집니다. 메인 장면에서는 빨간색과 파란색 그림자 이미지가 원본 애니메이션과 함께 재생됩니다. 파란색 그림자 이미지의 애니메이션 동작은 원본 애니메이션보다 앞서고 빨간색 그림자 이미지의 애니메이션 동작은 원본 애니메이션보다 뒤쳐집니다.

어니언 스킨의 특징: 가장 긴 파란색 또는 빨간색 어니언 스킨 표시 영역은 애니메이션 클립 자체의 길이를 초과할 수 없습니다. 애니메이션 클립은 기본적으로 반복 재생되지만 녹색 재생 포인터가 프레임 0에 있으면 기본 장면에 빨간색 양파 그림자 인형이 표시되지 않습니다. 녹색 삽입 포인터가 마지막 프레임에 있으면 기본 장면에 파란색 양파 그림자 인형이 표시되지 않습니다.

Timeline

뼈 레이어의 키프레임은 흰색, 슬롯 레이어의 키프레임은 노란색, 이벤트 레이어의 키프레임은 빨간색, 이벤트, 점프, 사운드가 포함된 뼈 키프레임은 분홍색입니다. 타임라인의 첫 번째 레이어는 움직이는 표면의 배열이며 다른 레이어에 키프레임을 추가한 후에는 애니메이션 클립 레이어에 다이아몬드 모양의 사각형이 나타나며 아래에 있는 하나 이상의 레이어에 키프레임이 있음을 나타냅니다. 현재 프레임. 흰색은 뼈대 레이어 키프레임을 나타내고, 노란색은 슬롯 레이어 키프레임을 나타내고, 빨간색은 이벤트 레이어 키프레임을 나타내고, 분홍색은 여러 레이어가 혼합된 하늘 키프레임을 나타냅니다. 다이아몬드 상자를 선택하면 이 프레임 번호 아래의 모든 키프레임이 선택됩니다. 전체적으로 왼쪽과 오른쪽으로 이동하고, 드래그하고, 복사하고, 잘라내고, 붙여넣고, 삭제할 수 있습니다. 해당 프레임 번호에 키프레임이 있는 한 타임라인 눈금자에 빨간색 선이 나타나고, 타임라인 눈금자는 타임라인의 위아래 스크롤 막대와 함께 스크롤되어 항상 표시됩니다. 타임라인의 첫 번째 레벨은 뼈 레이어 또는 이벤트 레이어이고, 두 번째 레벨은 슬롯 레이어입니다. 슬롯 레이어는 뼈 레이어를 기준으로 한 레벨 오른쪽으로 들여쓰기되어 있습니다. 상위 뼈대와 하위 뼈대 사이의 계층 관계는 타임라인에 반영되지 않습니다. 이벤트 레이어는 하나만 있습니다. 선택한 레이어가 강조 표시되고 해당 레이어의 뼈나 슬롯도 선택됩니다. 반대로 뼈나 슬롯을 선택하면 해당 레이어도 선택됩니다. 키프레임은 타임라인의 동일한 레이어 어디든 드래그할 수 있습니다. 타임라인 패널은 그림 20에 나와 있습니다. 표시됩니다.

그림 20

Curve Editor

Curve Editor 이 패널에서는 프레임 간에 다양한 트위닝 효과를 적용할 수 있습니다. 예를 들어 캐릭터의 팔 스윙을 먼저 빠르게 하고 달리는 동작 중에 느리게 하려면 팔 스윙 동작의 처음 두 키프레임 중에서 첫 번째 키프레임을 선택한 다음 다음과 같이 타임라인에서 곡선 버튼을 클릭합니다. 그림 21과 같이 곡선 편집기 패널을 엽니다.

그림 21

키 프레임 사이에는 기본적으로 선형 트위닝이 사용됩니다. 커브 에디터에서는 그냥 직선입니다. 패널 하단에는 그림 22와 같이 도구에 미리 설정된 완화 효과인 일련의 버튼이 표시됩니다.

그림 22

이 버튼을 클릭하면 곡선이 해당 효과로 빠르게 변경됩니다. 왼쪽에서 오른쪽으로 트윈 없음, 선형 트윈, 토크 인, 토크 아웃, 페이드 인 및 토크 아웃(페이드 인은 의미)입니다. 그림 23에 표시된 것처럼 처음에는 느리다가 빠르게, 페이드 아웃은 빠르게, 그 다음에는 느리게, 페이드 인과 아웃은 하나는 빠르고 하나는 느림을 나타냅니다.

그림 23

이 사전 설정의 효과가 만족스럽지 않으면 다음과 같이 곡선 양쪽 끝의 제어봉에 있는 제어점(흰색 빈 점)을 드래그하여 곡선을 자유롭게 조정할 수도 있습니다. 그림 24에 나와 있습니다. 현재 제어점은 100%에서 200% 사이에서만 조정할 수 있습니다. 이 제한은 향후 버전에서 완화될 예정입니다. 곡선이 음수 값 영역에 들어가면 애니메이션이 일정 기간 동안 역방향으로 먼저 실행된 다음 정방향으로 실행된다는 의미입니다. 100%를 초과하는 곡선은 애니메이션이 대상 위치를 넘어 실행된 다음 대상 위치와 반대 방향으로 실행됨을 의미합니다.

그림 24

곡선의 편집 효과가 장면의 애니메이션에 실시간으로 반영될 수 있다는 점은 언급할 가치가 있습니다. 디자이너는 애니메이션을 재생하는 동안 곡선 미리보기 효과를 조정할 수 있습니다. 또한 곡선을 조정하면 애니메이션 데이터가 즉시 변경되므로 디자이너가 수정 사항을 확인하기 위해 키프레임 버튼을 다시 클릭할 필요가 없습니다. 수정 효과가 만족스럽지 않은 경우 실행 취소 기능을 사용하여 수정 전 상태로 되돌릴 수 있습니다.

3. 새로운 애니메이션 프로젝트 만들기

DragonBonesPro는 편리하고 빠른 프로젝트를 제공합니다.

1. 새 프로젝트 만들기

환영 홈페이지에서 새 프로젝트를 열면 그림 25와 같이 용골 애니메이션을 생성하는 대화 상자가 나타납니다.

그림 25

클릭하여 용골 애니메이션을 생성하면 그림 26과 같이 뼈대 애니메이션 템플릿, 프레임별 애니메이션 템플릿, 트윈 애니메이션 템플릿 및 사용자 정의 옵션이 나타납니다.

그림 26

해당 템플릿을 클릭하면 생성 열에서 관련 템플릿이 선택됩니다. 매개변수만 다르고 기능은 동일합니다. 프로젝트를 완료하고 리소스를 마우스 오른쪽 버튼으로 클릭할 수도 있습니다. 그림 27과 같이 새로운 구성 요소가 나타납니다.

그림 27

새 구성 요소를 클릭하면 그림 28과 같이 그림과 동일한 선택 항목이 나타납니다.

사진 28

2. 사진 추가 및 삭제

리소스 라이브러리에서 기본 창으로 사진을 드래그하세요.

레이어가 선택되지 않았거나 선택한 레이어의 현재 프레임에 빈 키프레임, 사진 이름의 이름을 딴 사진 레이어가 타임라인에 자동으로 추가됩니다.
레이어를 선택했는데 현재 프레임에 키프레임이 없으면 현재 프레임에 키프레임이 추가되고 이미지는 키프레임에 추가됩니다.
레이어를 선택하고 현재 프레임이 빈 키프레임인 경우 사진은 빈 키프레임에 추가되고 빈 키프레임은 비어 있지 않은 키프레임이 됩니다.

3. 레이어 순서

타임라인에서 드래그 앤 드롭하여 레이어의 오버레이 순서를 변경할 수 있습니다.

4. 프로젝트 가져오기 및 내보내기

DragonBones Pro 프로젝트 가져오기 현재 다양한 형식의 DragonBones 데이터 파일(json 및 xml 포함) 및 데이터 패키지 파일(png 및 zip 포함) 가져오기를 지원합니다. Pro는 가져온 데이터의 형식을 확장하기 위한 가져오기 플러그인을 지원합니다. 공식적으로 발표된 Spine 2.x 가져오기 플러그인과 Cocos 1.x 가져오기 플러그인은 DragonBones에 도움이 될 수 있습니다. Pro는 Spine 및 Cocos 데이터 파일을 가져옵니다. 가져오기 방법은 매우 간단합니다. 소프트웨어로 가져와야 하는 데이터 파일이나 데이터 패키지 파일을 끌어서 놓기만 하면 됩니다. 가져온 데이터 파일이 데이터 파일인 경우 다음 그림이 나타납니다. 29에 표시된 인터페이스.

그림 29

소프트웨어는 데이터 파일이 있는 디렉터리에서 텍스처 세트 파일을 지능적으로 검색합니다. 텍스처 세트 파일이 없거나 잘못된 파일이 발견된 경우 수동으로 경로를 수정해야 합니다. 이미지를 찾을 수 없습니다. 데이터 패키지 파일을 가져오면 텍스처 세트를 찾을 수 없습니다. 또한 소프트웨어는 프로젝트 이름을 자동으로 생성합니다. 수정해야 하는 경우 수동으로 수정할 수 있습니다.
DragonBonesPro는 프로젝트를 json 또는 xml 형식으로 내보낼 수 있습니다. 이미지는 텍스처 세트 또는 이미지 파일 형식일 수 있습니다. 내보내기 창은 그림 30에 나와 있습니다.

그림 30

출력 경로의 기본값은 "내 문서 + 프로젝트 이름"이며, 내보낼 경우 사용자가 수동으로 지정할 수 있습니다. zip 패키지를 사용하면 패키지 파일이 지정된 출력 경로에 나타납니다.

프로젝트 폴더를 내보내면 지정된 출력 경로 아래에 데이터 파일과 사진이 포함된 프로젝트와 동일한 이름의 하위 디렉터리가 생성됩니다.

기본 출력 비율은 다음과 같습니다. 1.

사용자는 숫자 값을 입력하여 내보낸 항목의 크기 조정을 제어할 수 있습니다.

"채우기 색상" 확인란은 기본적으로 선택되지 않은(투명한 배경) 상태로 설정되어 있습니다. 확인란을 선택한 후 사용자는 오른쪽의 색상 사각형을 클릭하여 색상 선택 창을 열고 배경색으로 사용해야 하는 색상을 "Pack zip"으로 선택할 수 있습니다. 확인란을 선택하면 기본값이 선택 취소됩니다. 즉, 프로젝트 폴더를 내보냅니다. 선택하면 zip 패키지 형태의 프로젝트 파일이 아래 DragonBones 데이터 파일로 변환됩니다. 스크립트 파일 PSExportDB, jsx는 Pro 설치 디렉터리에 제공됩니다. Photoshop의 디자인 도면을 DragonBones 형식 데이터 + 그림으로 내보내는 데 사용됩니다.

참고: Mac 시스템에서는 DragonBones를 애플리케이션에서 찾아야 합니다. Pro.app을 선택한 다음 마우스 오른쪽 버튼을 클릭하고 패키지 내용 표시를 선택합니다.

스크립트 파일은 /Contents/Resources/에 있습니다. 내보내기 방법은 다음과 같습니다: Photoshop에서 디자인 도면을 연 다음 메뉴에서 "파일 -> 스크립트 -> 찾아보기" 명령을 선택한 다음 열린 시스템에서 찾기 위치 예에서 PSExportDBjsx 파일을 선택하고 열기를 선택하면 다음 대화 상자가 나타납니다.

이미지를 내보내려면 PNG 내보내기
json 파일을 내보내려면 ISON 내보내기
숨겨진 레이어를 무시하려면 숨겨진 레이어 무시
이미지 배율 전체 크기 조정

다음으로 설정 필요한 경우 확인을 클릭합니다. 버튼을 클릭하면 Photoshop이 내보내기를 시작합니다. 내보내기가 완료된 후 디자인 도면이 있는 디렉터리 아래에 DrgonBmes {PSD 파일 이름} 디렉터리가 생성됩니다. PNG와 JSON을 모두 내보내서 확인합니다. , 그 아래에 psd 파일과 동일한 이름의 디렉터리가 있습니다. json 파일과 Textuer 디렉터리가 있습니다.

Texture 아래에는 모두 png 이미지 파일이 있습니다. 그런 다음 내보낸 데이터 파일을 DragonBones로 드래그하면 됩니다. Pro에서 사진 로그를 설정한 후 가져오기를 완료할 수 있습니다. 가져온 후에는 그림 간의 상대 위치, 크기 및 계층 관계가 Photoshop과 완전히 동일합니다.

위 내용은 애니메이션 도구 DragonBones의 공통 용어 및 사용법 소개(그림)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!