사용 안내서 취소

모바일 앱 및 게임 엔진용으로 애니메이션 내보내기

검색

마지막 업데이트 날짜 2023년 5월 24일

Animate

앱 열기

스프라이트 시트 또는 텍스처 아틀라스를 만들고 모바일 앱 및 게임 엔진용으로 애니메이션을 내보냅니다. 플러그인을 사용하여 Unity 또는 자주 사용하는 게임 엔진으로 텍스처 아틀라스를 가져옵니다.

개요

Animate에서는 스프라이트 시트 또는 텍스처 아틀라스 애니메이션을 만들고 이를 모바일 앱 및 게임 엔진용으로 내보낼 수 있습니다.

스프라이트 시트

스프라이트 시트는 여러 개의 작은 그래픽을 바둑판식 격자 배열로 포함하고 있는 비트맵 이미지 파일입니다. 여러 그래픽을 단일 파일로 컴파일함으로써 Animate 및 기타 애플리케이션이 한 파일만 로드하여 그래픽을 사용할 수 있도록 합니다. 성능이 특히 중요한 게임 개발 등의 경우 로딩 효율성이 유용할 수 있습니다.

임의의 동영상 클립, 버튼 심볼, 그래픽 심볼, 비트맵 조합을 선택하여 스프라이트 시트를 만들 수 있습니다. 라이브러리 패널 또는 스테이지에서 항목을 선택할 수 있지만, 둘 모두에서 선택할 수는 없습니다. 선택한 심볼의 각 비트맵 및 각 프레임이 스프라이트 시트에서 별도의 그래픽으로 나타납니다. 스테이지에서 내보내는 경우 크기 조절, 기울이기 등 심볼 인스턴스에 적용한 모든 변형은 이미지 출력에 보존됩니다.

텍스처 아틀라스

텍스처 아틀라스는 원하는 크기로 된 하나의 큰 영상 또는 여러 영상이며, 텍스처 집합입니다. 텍스처 아틀라스를 만들고 이를 게임 앱에서 사용하여 게임을 최적화할 수 있습니다.

Animate에서는 동영상 클립, 그래픽 또는 버튼과 같은 심볼에서 텍스처 아틀라스를 만들 수 있습니다. 라이브러리 패널 또는 스테이지에서 항목을 선택할 수 있지만, 둘 모두에서 선택할 수는 없습니다. 선택한 심볼의 각 키프레임 및 각 벡터는 텍스터 아틀라스에서 별도의 비트맵으로 나타납니다. 스테이지에서 내보내면 기호 인스턴스에 적용한 모든 변환(크기 조절, 기울이기 등)은 이미지 출력에 보존됩니다.

스프라이트 시트와 텍스처 아틀라스 간의 차이

요구 사항에 따라 모바일 앱에서 스프라이트 시트를 사용할 수도 있고 텍스처 아틀라스를 사용할 수도 있습니다. 다음 표에는 스프라이트 시트와 텍스처 아틀라스 간의 몇 가지 주요 차이점이 나와 있습니다.

기능	스프라이트 시트	텍스처 아틀라스
모바일 앱의 성능	낮음	높음
앱 로드 시 효율성	계산이 없으므로 높음	JSON 파일 계산이 있으므로 낮음
크기	더 많은 크기 차지	더 적은 크기 차지
애니메이션 품질	중간	높음
생성된 파일 수	파일 2개: 비트맵 1개와 JSON 파일 1개	변수: 이미지 크기에 따라.
생성된 비트맵 수	스프라이트 시트에 사용된 프레임의 수에 따라 비트맵 파일 수가 증가하여 스프라이트 시트 크기도 커질 수 있습니다.	스프라이트에서 고유한 비트맵만 생성되므로 총 크기가 줄어듭니다.

스프라이트 시트 만들기

스프라이트 시트를 만들려면 다음 단계를 수행합니다.

라이브러리에서 하나 이상의 심볼을 선택하거나, 스테이지에서 심볼 인스턴스를 선택합니다. 선택 항목에 비트맵이 포함될 수도 있습니다.
선택 항목을 마우스 오른쪽 버튼으로 클릭하고 [스프라이트 시트 생성]을 선택합니다.

스프라이트 시트 생성 대화 상자에서 필요한 옵션을 선택하고 내보내기를 클릭합니다.

내보내기 옵션	설명
이미지 치수	스프라이트 시트의 총 크기(픽셀 단위)입니다. 기본 설정은 포함된 모든 스프라이트에 맞게 시트 크기를 조정하는 자동 크기입니다.
이미지 포맷	내보낸 스프라이트 시트의 파일 포맷입니다. PNG 8비트 및 PNG 32비트는 투명 배경(알파 채널)을 사용하여 지원합니다. [PNG 24비트] 및 [JPG]는 투명 배경을 지원하지 않습니다. 일반적으로 PNG 8비트와 PNG 32비트의 시각적 차이는 작습니다. PNG 32비트 파일은 8비트 PNG 파일에 비해 4배 더 큽니다.
테두리 패딩	스프라이트 시트 가장자리 주변의 패딩(픽셀 단위)입니다.
모양 패딩	스프라이트 시트 내에서 각 이미지 간의 패딩(픽셀 단위)입니다.
알고리즘	이미지를 스프라이트 시트 안에 압축하는 데 사용된 기술입니다. 두 가지 옵션이 있습니다. Basic(기본값) MaxRects
데이터 포맷	이미지 데이터에 사용된 내부 포맷입니다. 내보낸 후 스프라이트 시트에 사용할 작업 과정에 가장 알맞은 포맷을 선택하십시오.
회전	스프라이트를 90° 회전합니다. 이 옵션은 일부 데이터 포맷에서만 사용할 수 있습니다.
트리밍	이 옵션은 시트에 추가된 각 심볼 프레임에서 사용되지 않은 픽셀을 트리밍함으로써 스프라이트 시트의 공간을 절약합니다.
스택 프레임	이 옵션을 선택하면 선택한 심볼 내의 중복 프레임이 최종 스프라이트 시트에서 중복되지 않습니다.

애니메이션을 모바일 앱 또는 게임 엔진으로 내보내기

Animate를 사용하면 애니메이션을 게임 플랫폼과 모바일 애플리케이션으로 내보낼 수 있습니다. 휴대폰 또는 게임 엔진에서 애니메이션을 보고싶으세요? 이 예제의 끝에 있는 자습서를 보고 다음 단계를 따르십시오.

라이브러리에서 동영상 클립을 마우스 오른쪽 버튼으로 클릭합니다.
스프라이트 시트 생성을 선택합니다.
스프라이트 시트 대화 상자에서 필요한 옵션을 선택합니다.
내보내기를 클릭합니다.

모바일 앱 또는 게임 엔진을 위해 애니메이션을 내보내는 방법

애니메이션을 내보내는 다른 옵션에 대해 알아보려면 비디오를 시청하십시오.

텍스처 아틀라스 만들기

게임 개발자는 Animate를 사용하여 애니메이션을 조율하고 텍스처 아틀라스의 형태로 Unity 게임 엔진 및 기타 인기 게임 플랫폼에 내보낼 수 있습니다.

다음 다이어그램에는 Animate에서 텍스처 아틀라스를 생성하고 Unity에서 이를 가져오는 프로세스가 설명되어 있습니다.

플로우 다이어그램 텍스처 아틀라스 — 텍스처 아틀라스를 생성하여 Unity로 가져오는 작업 과정을 보여 주는 그림입니다.

애니메이션의 텍스처 아틀라스를 생성하려면 다음 단계를 수행합니다.

Animate에서는 라이브러리의 선택한 심볼 또는 스테이지의 심볼 인스턴스에 대해 텍스처 아틀라스를 생성할 수 있습니다.
심볼을 마우스 오른쪽 버튼으로 클릭하고 메뉴에서 텍스처 아틀라스 생성을 선택합니다. 텍스처 아틀라스 생성 창이 나타납니다.

텍스처 아틀라스 생성

텍스처 아틀라스를 위한 적절한 내보내기 옵션을 선택합니다.

내보내기 옵션	설명
이미지 치수	텍스처 아틀라스의 총 크기(픽셀 단위)입니다. 기본 설정은 포함된 모든 이미지에 맞게 시트 크기를 조정하는 자동 크기입니다.
크기 최적화	[크기 최적화] 옵션을 선택하면 비트맵에서 빈 픽셀이 제거되고 크기가 2의 제곱으로 되지 않습니다(기본 옵션). 이 기능은 생생한 모든 비트맵에 적용할 수 있습니다. [크기 최적화] 옵션을 선택 해제하면 선택한 크기에 따라 비트맵이 생성됩니다.
이미지 포맷	내보낸 스프라이트 시트의 파일 포맷입니다. PNG 8비트 및 PNG 32비트는 투명 배경(알파 채널)을 사용하여 지원합니다. 일반적으로 PNG 8비트와 PNG 32비트의 시각적 차이는 작습니다. PNG 32비트 파일은 8비트 PNG 파일에 비해 4배 더 큽니다.
해상도	0.3~3.0 사이에서 값을 선택합니다
테두리 패딩	텍스처 아틀라스 가장자리 주변의 패딩(픽셀 단위)입니다
모양 패딩	텍스처 아틀라스 내에서 각 이미지 간의 패딩(픽셀 단위)입니다.
알고리즘	이미지를 텍스처 아틀라스 안에 압축하는 데 사용된 기술입니다. 두 가지 옵션이 있습니다. 기본 MaxRects(기본값)
데이터 포맷	이미지 데이터에 사용된 내부 포맷입니다. 기본값은 JSON 포맷입니다.
회전	이미지를 90°로 회전합니다. 이 옵션은 일부 데이터 포맷에서만 사용할 수 있습니다.
반대칭 객체를 비트맵으로 병합	객체에 반대칭 변형을 사용하는 경우 이 옵션을 선택합니다. 일부 게임 엔진에서는 기울이기 변형을 적절히 해석하지 않으므로 Animate에서는 이러한 객체를 비트맵 이미지를 변환합니다.
Animation.json 파일 최적화	[Animation.json 파일 최적화] 옵션을 선택하면 들여쓰기, 분해된 매트릭스를 제거하고 사용된 이름을 줄여줍니다(기본 옵션). [Animation.json 파일 최적화] 옵션을 선택 해제하면 들여쓰기 및 의미있는 이름으로 내보냅니다.

크기에 따라 기호를 여러 비트맵으로 내보내도록 선택할 수 있습니다.

여러 비트맵에 텍스처 아틀라스 생성

선택한 이미지 크기를 초과하는 경우 경고가 표시됩니다.
텍스처 아틀라스 출력을 미리 보려면 미리 보기 탭을 클릭합니다.

만든 후 텍스처 아틀라스 미리 보기
찾아보기를 클릭하고 컴퓨터의 출력 파일 대상 경로를 선택하거나 텍스트 영역에 경로를 입력하고 내보내기를 클릭합니다.

텍스처 아틀라스에 대해 생성되는 출력 폴더에 다음 파일이 포함됩니다.

Animation.json

이 파일은 애니메이션에 대한 정보를 포함하고 있습니다. 동일한 프레임은 기본적으로 Animation.json 파일에서 최적화되고 통합됩니다.

spritemap.json

이 파일은 spritesheet.png 파일에 대한 정보를 포함하고 있습니다.

spritemap.png

내보낸 심볼의 경우, 이 파일은 애니메이션을 재구성하는 데 필요한 최소한의 고유 텍스처 모두에 대해 비트맵 표현을 포함하고 있습니다.

생성된 텍스처 아틀라스는 적절한 가져오기 플러그인을 사용하여 Unity와 같은 게임 엔진에서 사용할 수 있습니다.

Unity로 텍스처 아틀라스 가져오기

Animate에서 생성한 텍스처 아틀라스 파일을 자주 사용하는 게임 엔진으로 가져올 수 있습니다. 텍스처 아틀라스 파일을 가져오기 위해 게임 엔진에 맞는 플러그인을 만들 수 있습니다. Unity 툴을 위한 샘플 가져오기 플러그인이 제공됩니다.

다음 단계를 수행하여 Unity로 텍스처 아틀라스를 가져옵니다.

Unity에서 특정 위치에 프로젝트를 만듭니다. 이 위치에서 Assets 하위 폴더가 있는 폴더가 만들어집니다.
Assets 아래에 Resources와 Editor라는 하위 폴더 두 개를 만듭니다.
여기를 클릭하여 Unity용 샘플 가져오기 플러그인을 다운로드합니다. 다운로드 탭에서 Unity Plugin을 선택하고 다운로드할 해당 버전을 선택합니다.

unity-plugin.zip은 Plugin.cs, WrapperPlugin.cs, AnimateEditor.cs 및 Effect.shader 파일로 구성되어 있습니다.

이 샘플을 다운로드하면 사용 약관 및 온라인 개인정보 처리방침에 동의한다는 것을 의미합니다.
Animation.json, spritemap.json, spritemap.png 등의 텍스처 아틀라스 파일과 Plugin.cs 및 Effect.shade 등의 Unity 플러그인 파일을 Assets > Resources로 이동합니다.
AnimateEditor.cs 및 wrapperplugin.cs 파일을 Assets 폴더로 이동합니다.
Unity에서 AnimateEditor.cs 파일을 클릭하여 Main Camera로 드래그합니다.
재생합니다. 프로젝트를 재생하면 스프라이트 맵이 다른 스프라이트로 분할됩니다.
AnimateEditor.cs를 Editor로 이동합니다.
Unity에서 wrapperplugin.cs 파일을 클릭하여 Main Camera로 드래그합니다. 또한 AnimateEditor.cs를 선택 해제하거나 Main Camera에서 제거합니다.
요구 사항에 따라 출력을 재생하거나 제작합니다.

특정 요구 사항에 맞게 wrapperplugin.cs 파일을 수정하여 플러그인을 사용자 정의할 수도 있습니다.

Unity 플러그인은 Animate에서 생성된 텍스처 아틀라스 파일에 대해 색상 효과를 지원합니다. 또한 이 플러그인은 레이어를 통한 마스크를 지원합니다. 이 마스크 기능은 Unity 2017 릴리스 이상에서만 적용 가능합니다.

텍스처 게시

애니메이터는 벡터 형식으로 컨텐츠를 계속 제작하고 HTML 5 플랫폼용 벡터 또는 래스터 형식으로 내보낼 수 있습니다. 애니메이션 성능을 개선하도록 애니메이션을 텍스처 아틀라스로 내보내는 옵션이 제작 설정에 추가되었습니다.

1. 캔버스 문서를 만듭니다. 파일 > 새로 만들기를 선택하여 [새 문서] 창을 표시합니다.

고급 탭을 선택한 후 HTML 5 캔버스를 클릭합니다. 새로운 FLA 문서가 열립니다.

3. 파일 > 게시 설정을 클릭합니다. [기본] 탭에서 문서를 텍스처로 내보내기를 활성화한 경우에는 이미지 설정 탭에 [텍스처 제작] 옵션이 표시됩니다. 기본적으로는 모든 심볼이 텍스처 제작에 포함됩니다. 텍스처에 대해 심볼을 선별해서 선택하려면 옆에 있는 설정 아이콘을 클릭합니다.

이 옵션을 사용하면 에셋의 크기가 증가할 수 있지만 성능이 개선됩니다. 또한 HiDPI 디스플레이를 대상으로 지정하여 이미지의 해상도를 원래 해상도의 2배 및 3배 규모로 늘릴 수 있습니다. 해상도 설정을 변경하려면 아래 스크린샷에 나와 있는 것처럼 문서를 텍스처로 내보내기 옵션 옆에 있는 스패너 아이콘을 클릭합니다. 해상도 옆에 있는 숫자를 드래그하여 2 및 3의 배수를 얻습니다.

기본적으로 텍스처 제작은 두 배의 해상도로 설정됩니다. 또한, 해상도 범위를 0.3 ~ 3X 사이에서 변경할 수 있습니다.

텍스처 제작은 HTML5 Canvas 문서 유형에만 적용될 수 있습니다.

벡터 또는 래스터 파일을 선택하는 것은 파일 크기와 성능 중에서 선택하는 것과 비슷합니다. HTML5 플랫폼은 래스터 컨텐츠에 최적화되어 있습니다. 따라서 일부 복잡한 모양의 경우 벡터 이미지를 래스터로 미리 변환하는 것이 더 낫습니다. 몇몇 기본 컨텐츠의 경우에는 벡터 컨텐츠를 계속 사용할 수 있습니다. Animate는 부분 심볼 선택 대화 상자를 통해 이 옵션을 제공합니다. 부분 심볼 선택 기능을 사용하면 래스터로 변환해야 하는 심볼을 선택할 수 있습니다. 나머지 심볼은 벡터로 유지됩니다.

부분 심볼 선택 기능을 사용하려면 제작 설정 대화 상자에서 변경을 클릭하고 목록에서 심볼을 선택합니다. 기본적으로 모든 심볼이 선택됩니다.

목록에서 원하는 심볼을 선택합니다.

비트맵 텍스처를 통한 그래픽 성능 향상

Animate에서 비트맵 텍스처는 다양한 플랫폼에서 애니메이션의 성능을 향상시킵니다. 비트맵 텍스처를 사용하여 벡터의 복잡성을 줄일 수 있습니까? 이 예제의 끝에 있는 자습서를 보고 다음 단계를 따르십시오.

속성 검사기 패널에서 게시 설정을 클릭합니다.
기본 탭에서 텍스처로 문서 내보내기 근처에 있는 스패너 아이콘을 선택합니다.
이미지 설정 탭에서 변경을 클릭하고 원하는 심볼을 선택합니다.
확인을 클릭합니다.

에셋을 비트맵 텍스처로 게시하여 성능을 개선하는 방법

비디오에서 비트맵 질감이 있는 애니메이션이 어떻게 실행되는지 확인합니다.

쉽고 빠르게 지원 받기

신규 사용자이신가요?