그래프 편집기

(2022/06/16 업데이트)

그래프 편집기를 사용하면 파라미터의 변화를 시각적으로 확인하면서 애니메이션을 만들 수 있습니다.
이 절에서는 그래프 편집기의 기본 조작에 대해 설명합니다.

 

 

편집 모드 변환

기본적으로 키 프레임을 점으로 표시하는 [도프 시트]가 표시됩니다.

[편집 모드 변환] 버튼을 클릭하고 [그래프 편집기]로 전환합니다.

파라미터를 선택하면 그래프가 표시되어 편집할 수 있습니다.
여러 파라미터를 선택하여 여러 곡선을 동시에 표시할 수도 있습니다.

다시 [편집 모드 변환] 버튼을 클릭하면 [도프 시트]로 전환됩니다.

사용하기 쉬운 형식으로 전환하면서 애니메이션을 편집합니다.

 

기본 조작

키 프레임 삽입

삽입하려는 위치의 프레임에서 [Ctrl]을 누른 상태에서 [왼쪽 클릭]하여 임의의 위치에 키를 삽입할 수 있습니다.
[Ctrl]+[Shift]를 누른 상태에서 [왼쪽 클릭]하면 커브에 키를 삽입할 수 있습니다.
이 때의 커서는 아래 그림과 같이 「+」의 표시가 됩니다.

키 프레임 삭제

키 프레임에서 [Ctrl]을 누른 상태에서 [왼쪽 클릭]하여 키를 삭제할 수 있습니다.
이 때의 커서는 아래 그림과 같이 「-」의 표시가 됩니다.

키 프레임 이동

선택한 키프레임을 드래그하여 위치를 변경할 수 있습니다.

베지어 커브의 키를 움직일 때 앞뒤 핸들이 돌출되어 커브가 부러지지 않도록 비율로 늘어납니다.
이것은 도프 시트에서 이동시킨 경우에도 마찬가지입니다.

여러 선택하면 여러 키 프레임을 동시에 이동할 수 있습니다.

또한 [좌우 화살표 키]를 사용하여 키 프레임을 좌우로 이동할 수도 있습니다.
[화살표 키]로의 이동은 좌우만 대응하고 있습니다.

 

연속 베지어 편집

앞뒤 핸들이 일직선이 되도록 편집할 수 있습니다.
매끄러운 곡선을 조정할 때 편리합니다.
초기 상태에서는 [Ctrl]을 누르면서 핸들을 이동하면 연속 베지어 편집이 되지만 타임 라인 팔레트 우측 상단의
[팔레트 메뉴]에서도 [항상 연속 베지어 편집하기]를 선택하여 기본값을 변경할 수 있습니다.
(이 경우 [Ctrl]로 기능이 반전됩니다)

 

여러 키 프레임 편집

타임 라인의 아무것도 없는 곳에서 드래그를 시작하면 해당 범위에 포함된 키 프레임을 선택할 수 있습니다.
다중 선택된 키 프레임은 일괄적으로 파라미터 값을 편집할 수 있습니다.
여러 선택을 하면 빨간색 테두리 [바운딩 박스]가 표시됩니다.
[바운딩 박스]는 다른 조작과 마찬가지로 자유롭게 변형할 수 있으며, 중심점을 잡아 키 프레임의 위치 관계를 유지한 채로 이동할 수 있습니다.
또한 [바운딩 박스]를 확대・축소하여 곡선의 진폭을 조정할 수 있습니다.

복수 선택을 한 상태에서 Shift 키나 Alt 키를 누르면서 드래그 하는 것으로 아래와 같은 동작을 합니다.

[Shift] + 드래그 상하로 수직 이동
[Shift] + 드래그 종횡비를 유지한 채 확대・축소
[Alt] + 드래그 앵커가 중심에 있는 상태에서 확대・축소
[Shift] + [Alt] + 드래그 종횡비를 유지한 채, 앵커가 중심에 있는 상태로 확대・축소

 

상자 편집

상자의 너비를 좁히면 키가 가능한 한 채워져 배치됩니다.
선택 상태의 박스의 변형시에 키는 사라지지 않습니다.
또한 상자가 사라질 때까지 원래 모양을 기억하므로 상자 변형을 반복해도 곡선 정보가 손실되지 않습니다.

 

복사 및 붙여넣기

그래프 편집기에서 키를 복사하여 붙여넣을 수 있습니다.
1 커브 정보라면 씬이나 애니메이션을 넘어 다른 커브의 자유로운 위치에 붙여넣을 수 있습니다.
다중 커브 또는 FA 커브의 경우 동일한 커브로 제한됩니다.

 

커브 드래깅

커브를 잡아 모양을 편집할 수 있습니다.
대략적인 모양을 만들 때 유용합니다.

 

핸들 성형

선택한 점 앞뒤의 핸들을 일직선(연속 베지어)로 성형합니다.
오른쪽 클릭 메뉴에서 선택할 수 있으며 선택 키, 선택 곡선 전체에 적용할 수 있습니다.

 

값 정형

선택한 점의 값을 그리드 값으로 반올림합니다.

타임 라인 팔레트 메뉴에서 [Shift로 스마트 스냅]을 체크하여 사용할 수 있습니다.
[Shift]+[Alt]+[드래그]로 유효·무효를 전환할 수 있습니다.

 

값 변경

파라미터 슬라이더로 편집할 때는, 결정할 때까지, 핸들이 상하의 한계에 도달해도 원래의 형상을 유지해, 가능한 한 형상을 유지합니다.

 

커서 키의 위아래로 값 변경

도프 시트, 그래프 편집기에서 키를 선택하고 키보드 위나 아래에서 값을 변경할 수 있습니다.

 

속성 다중 선택

여러 속성을 선택할 수 있습니다.

선택 방법:

  • [Ctrl]+클릭으로 개별 선택
  • [Shift]+클릭으로 범위 선택
  • 속성 폴더를 클릭하여 모든 요소를 선택

TIPS
속성 선택 색상과 곡선 선 색상은 동일하며 여러 속성을 선택한 경우 각각 색상으로 구분됩니다.

 

 

키 위치에 파라미터 이름 표시

타임 라인 팔레트 메뉴의 [키의 이름 표시하기]를 체크하면 그래프 편집기의 키 위치로
파라미터의 이름이 표시됩니다.

타임 라인 확대 및 축소

[Alt]+[마우스 휠]로 타임 라인의 가로폭을 확대・축소할 수 있습니다.
배율의 중심은 커서의 위치입니다.

TIPS
도프 시트도 유사한 조작으로 확대・축소할 수 있습니다.

[Alt]+[Ctrl]+[마우스 휠]로 타임 라인의 세로 폭을 확대・축소할 수 있습니다.

 

 

커브 적용

아래 설명된 5가지 커브를 그래프에 적용하려면 커브의 키를 선택한 상태에서 각 커브의 버튼을 클릭합니다.

여기에서는 기본 설정인 [오토 스무드]를 [리니어]로 변경해 봅니다.

선택한 키 프레임의 다음 키 프레임을 연결하는 커브가 [리니어]가 되었습니다.

여러 개의 선택된 상태에서 커브를 변경할 수도 있습니다.

이 커브에 대한 자세한 내용은 아래의 「커브 유형」 항목을 참조하십시오.

 

곡선의 종류

동일한 파라미터에 두 개 이상의 키를 삽입하면 각 키 사이에 커브가 자동으로 보간됩니다.
Cubism Editor에는 보간할 곡선의 종류가 5종류가 있어 다양한 애니메이션을 만들 수 있습니다.

자동 부드러운

기본 키 프레임 보간법은 [오토 스무드]입니다.
적용된 키 사이는 부드러운 곡선으로 연결됩니다.
애니메이션은 천천히 움직이기 시작하고 다음 키 프레임을 향해 감속하는 움직임이 됩니다.

버튼 실제 애니메이션 그래프 편집기 커브

 

리니어

적용된 키 사이는 직선으로 연결됩니다.
애니메이션은 일정하고 변화하며 직선적인 움직임이 됩니다.

버튼 실제 애니메이션 그래프 편집기 커브

 

스탭

적용한 키 사이는 이전 키 프레임의 수치에 맞춘 수평 직선으로 연결됩니다.
애니메이션은 전후의 그림이 순식간에 변화하도록 움직입니다.

버튼 실제 애니메이션 그래프 편집기 커브

 

인버스 스탭

적용한 키 사이는 뒤의 키 프레임의 수치에 맞춘 수평의 직선으로 연결됩니다.
애니메이션은 전후의 그림이 순식간에 변화하도록 움직입니다.

버튼 실제 애니메이션 그래프 편집기 커브

 

베지어

키를 선택하고 [베지어] 버튼을 클릭하면 키에 노란색 [베지어 핸들]이 표시됩니다.
가장자리의 둥근 부분을 잡아 상하좌우로 움직일 수 있어 커브의 형태를 자유롭게 편집할 수 있습니다.

버튼 실제 애니메이션 그래프 편집기 커브

 

곡선 사전 설정:

[베지어] 버튼 오른쪽의 버튼을 클릭하면 자주 사용되는 커브 형상이 미리 준비되어 있어 원하는 모양을 적용할 수 있습니다.
주로 모션 그래픽으로 많이 사용되는 경우가 많지만 캐릭터의 움직임에도 활용할 수 있는 편리한 기능입니다.

 

커브 재계산 정보

Cubism 4.2.00부터 곡선 계산의 정확성이 향상되었습니다.
Cubism 4.1.05까지의 버전으로 만든 모션은 [커브 재계산]을 할 수 있습니다.

커브 재계산 방법:
프로젝트 팔레트에서 CAN3을 클릭하면 Inspector 팔레트에 [커브 다시 계산] 버튼이 표시됩니다.

[커브 다시 계산] 버튼을 클릭하면 모든 장면의 커브를 다시 계산합니다.

값이 변경되면 대화 상자에 세부 정보가 표시됩니다.

 

SDK 임베디드 시 주의사항

만든 애니메이션을 SDK에 통합하는 데는 몇 가지 주의 사항이 있습니다.
자세한 내용은 아래 페이지를 참조하십시오.

SDK 임베디드 시 주의사항

© 2010 - 2022 Live2D Inc.