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

개요

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

스프라이트 시트

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

스프라이트 시트
프레임별 애니메이션에 스프라이트를 포함하고 있는 스프라이트 시트.

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

텍스처 아틀라스

텍스처 아틀라스는 하나의 큰 이미지로 나타낸 텍스처의 모음입니다. 텍스처 아틀라스를 만들고 이를 게임 앱에서 사용하여 게임을 최적화할 수 있습니다. 

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

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

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

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

스프라이트 시트 만들기

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

  1. 라이브러리에서 하나 이상의 심볼을 선택하거나, 스테이지에서 심볼 인스턴스를 선택합니다. 선택 항목에 비트맵이 포함될 수도 있습니다.

  2. 선택 항목을 마우스 오른쪽 버튼으로 클릭하고 [스프라이트 시트 생성]을 선택합니다.

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

    내보내기 옵션 설명
    이미지 치수 스프라이트 시트의 총 크기(픽셀 단위)입니다. 기본 설정은 포함된 모든 스프라이트에 맞게 시트 크기를 조정하는 자동 크기입니다.
    이미지 포맷 내보낸 스프라이트 시트의 파일 포맷입니다. PNG 8비트 및 PNG 32비트는 투명 배경(알파 채널)을 사용하여 지원합니다. [PNG 24비트] 및 [JPG]는 투명 배경을 지원하지 않습니다. 일반적으로 PNG 8비트와 PNG 32비트의 시각적 차이는 작습니다. PNG 32비트 파일은 8비트 PNG 파일에 비해 4배 더 큽니다.
    테두리 패딩 스프라이트 시트 가장자리 주변의 패딩(픽셀 단위)입니다.
    모양 패딩 스프라이트 시트 내에서 각 이미지 간의 패딩(픽셀 단위)입니다.
    알고리즘

    이미지를 스프라이트 시트 안에 압축하는 데 사용된 기술입니다. 두 가지 옵션이 있습니다.

    • Basic(기본값)
    • MaxRects
    데이터 포맷 이미지 데이터에 사용된 내부 포맷입니다. 내보낸 후 스프라이트 시트에 사용할 작업 과정에 가장 알맞은 포맷을 선택하십시오.
    회전 스프라이트를 90° 회전합니다. 이 옵션은 일부 데이터 포맷에서만 사용할 수 있습니다.
    트리밍 이 옵션은 시트에 추가된 각 심볼 프레임에서 사용되지 않은 픽셀을 트리밍함으로써 스프라이트 시트의 공간을 절약합니다.
    스택 프레임 이 옵션을 선택하면 선택한 심볼 내의 중복 프레임이 최종 스프라이트 시트에서 중복되지 않습니다.

모바일 앱용으로 스프라이트 시트 애니메이션 내보내기

모바일 앱용으로 스프라이트 시트 애니메이션 내보내기
Train Simple - Matthew Pizzi

텍스처 아틀라스 만들기

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

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

flow-diagram-Texture-Atlas
텍스처 아틀라스를 생성하여 Unity로 가져오는 작업 과정을 보여 주는 그림입니다.

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

  1. Animate에서는 라이브러리의 선택한 심볼 또는 스테이지의 심볼 인스턴스에 대해 텍스처 아틀라스를 생성할 수 있습니다. 

  2. 심볼을 마우스 오른쪽 버튼으로 클릭하고 메뉴에서 텍스처 아틀라스 생성을 선택합니다. 텍스처 아틀라스 생성 창이 나타납니다. 

    generate-texture-atlas (2)
    텍스처 아틀라스 생성
  3. 텍스처 아틀라스를 위한 적절한 내보내기 옵션을 선택합니다. 

    내보내기 옵션 설명
    이미지 치수 텍스처 아틀라스의 총 크기(픽셀 단위)입니다. 기본 설정은 포함된 모든 이미지에 맞게 시트 크기를 조정하는 자동 크기입니다.
    이미지 포맷 내보낸 스프라이트 시트의 파일 포맷입니다. PNG 8비트 및 PNG 32비트는 투명 배경(알파 채널)을 사용하여 지원합니다. 일반적으로 PNG 8비트와 PNG 32비트의 시각적 차이는 작습니다. PNG 32비트 파일은 8비트 PNG 파일에 비해 4배 더 큽니다.
    테두리 패딩 텍스처 아틀라스 가장자리 주변의 패딩(픽셀 단위)입니다
    모양 패딩 텍스처 아틀라스 내에서 각 이미지 간의 패딩(픽셀 단위)입니다.
    알고리즘

    이미지를 텍스처 아틀라스 안에 압축하는 데 사용된 기술입니다. 두 가지 옵션이 있습니다.

    • Basic(기본값)
    • MaxRects
    데이터 포맷 이미지 데이터에 사용된 내부 포맷입니다. 기본값은 JSON 포맷입니다.
    회전 이미지를 90°로 회전합니다. 이 옵션은 일부 데이터 포맷에서만 사용할 수 있습니다.
    반대칭 객체를 비트맵으로 병합 객체에 반대칭 변형을 사용하는 경우 이 옵션을 선택합니다. 일부 게임 엔진에서는 기울이기 변형을 적절히 해석하지 않으므로 Animate에서는 이러한 객체를 비트맵 이미지를 변환합니다. 
  4. 텍스처 아틀라스 출력을 미리 보려면 미리 보기 탭을 클릭합니다. 

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

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

Animation.json

이 파일은 애니메이션에 대한 정보를 포함하고 있습니다. 

spritemap.json

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

spritemap.png

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

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

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

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

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

  1. Unity에서 특정 위치에 프로젝트를 만듭니다. 이 위치에서 Assets 하위 폴더가 있는 폴더가 만들어집니다. 

  2. Assets 아래에 ResourcesEditor라는 하위 폴더 두 개를 만듭니다. 

  3. 여기를 클릭하여 Unity용 샘플 가져오기 플러그인을 다운로드합니다. 다운로드 탭에서 Unity Plugin을 선택하고 다운로드할 해당 버전을 선택합니다. 

    unity-plugin.zipPlugin.cs, WrapperPlugin.cs, AnimateEditor.csEffect.shader 파일로 구성되어 있습니다.

    이 샘플을 다운로드하면 사용 약관 및 온라인 개인 정보 보호 정책에 동의한다는 것을 의미합니다. 

  4. Animation.json, spritemap.json, spritemap.png 등의 텍스처 아틀라스 파일과 Plugin.cs 및 Effect.shade 등의 Unity 플러그인 파일을 Assets > Resources로 이동합니다.

  5. AnimateEditor.cswrapperplugin.cs 파일을 Assets 폴더로 이동합니다. 

  6. Unity에서 AnimateEditor.cs 파일을 클릭하여 Main Camera로 드래그합니다.

  7. 재생합니다. 프로젝트를 재생하면 스프라이트 맵이 다른 스프라이트로 분할됩니다.

  8. AnimateEditor.csEditor로 이동합니다.

  9. Unity에서 wrapperplugin.cs 파일을 클릭하여 Main Camera로 드래그합니다. 또한 AnimateEditor.cs를 선택 해제하거나 Main Camera에서 제거합니다.

  10. 요구 사항에 따라 출력을 재생하거나 제작합니다. 

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

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

텍스처 게시

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

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

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

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

참고:

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

텍스처로 문서 내보내기
텍스처로 문서 내보내기

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

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

부분 심볼 선택 항목 변경
부분 심볼 선택 항목 변경

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

부분 심볼 선택
부분 심볼 선택

텍스처 제작에 관한 자습서

텍스처 제작에 관한 자습서
유연성과 충실도를 위해 벡터를 사용하여 에셋을 만든 후에 비트맵 텍스처로 제작하는 방법에 대해 알아보십시오.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책