그래프 에디터

업데이트： 2023/03/02

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

편집 모드 변환

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

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

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

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

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

기본 조작

키 프레임 삽입

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

키 프레임 삭제

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

키 프레임 이동

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

베지어 커브의 키를 움직일 때 앞뒤 핸들이 돌출되어 커브가 꺾이지 않도록 비례하여 늘어나고 줄어듭니다.
이것은 도프 시트에서 이동시킨 경우에도 마찬가지입니다.

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

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

연속 베지어 편집

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

여러 키 프레임 편집

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

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

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

박스 편집

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

복사 및 붙여넣기

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

잘라내기

그래프 에디터 내에서 키를 잘라낼 수 있습니다.
또한 오른쪽 클릭 팝업 메뉴에서 선택할 수 있습니다.

커브 드래깅

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

핸들 정형

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

값 정형

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

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

값 변경

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

커서 키 상하로 값 변경

도프 시트, 그래프 에디터에서 키를 선택하고 키보드의 상하 화살표로 값을 변경할 수 있습니다.

프로퍼티 복수 선택

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

선택 방법:

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

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

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

타임 라인 확대 및 축소

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

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

커브 적용

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

여기에서는 디폴트 설정인 [자동 스무스]를 [리니어]로 변경해 봅니다.

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

복수 선택한 상태에서 커브를 변경할 수도 있습니다.

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

커브 종류

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

자동 스무스

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

버튼	실제 애니메이션	그래프 에디터 커브

리니어

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

버튼	실제 애니메이션	그래프 에디터 커브

스텝

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

버튼	실제 애니메이션	그래프 에디터 커브

인버스 스텝

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

버튼	실제 애니메이션	그래프 에디터 커브

베지어

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

버튼	실제 애니메이션	그래프 에디터 커브

커브 프리셋:

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

커브 재계산 정보

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

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

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

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

SDK 임베디드 시 주의사항

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

SDK 임베디드 시 주의사항