한국어
오픈소스포럼
 이곳은 다양한 오픈소스 프로젝트를 소개하고 리뷰, 활용 방법을 공유합니다.

C++를 위한 Lottie 라이브러리 with SDL2

makersweb 2021.08.15 23:00 조회 수 : 949

Lottie는 Airbnb에서 개발한 시각적 모양과 애니메이션 메타데이터가 포함된 일종의 데이터 형식이다. Airbnb에서는 이런 데이터를 구문 분석하고 모바일에서 렌더링할 수 있도록 Android 및 iOS용 모바일 라이브러리도 구현하였는데 아쉽게도 이러한 라이브러리는 특정 언어와 모바일에서 유용하다.

이런 아쉬운 부분을 해결해줄 수 있는 rLottie를 사용해본다. rLottie 는 삼성전자에서 개발하고 공개한 POSIX 표준 운영 체제에서 C++ 프로그래밍 언어로 작업하기 위한 이식 가능한 라이브러리이다. rLottie에 대해서 자세히 소개한 블로그 글이 있는데 참고하면 좋다.

rLottie는 Lottie Animation 데이터 파일(json)을 읽고 분석하여 RGBA32 비트맵 데이터를 반환한다. 다음은 기본적인 사용법을 보여준다.

#include <rlottie.h>

// load json string from file.
auto animator = rlottie::Animation::loadFromFile("example.json");
auto frameCount = animator->totalFrame();

auto buffer = std::unique_ptr<uint32_t[]>(new uint32_t[w * h]);

rlottie::Surface surface(buffer.get(), w, h, w * 4);

// draw specified frame to a surface.
animator->renderSync(frameNum, surface);

// access image data.
buffer.get();

반환된 프레임 데이터를 SDL2를 이용하여 화면에 그려본다. SDL_CreateRGBSurfaceWithFormatFrom 함수를 통해 화면에 픽셀 데이터를 그릴 수 있다. 이 함수는 픽셀 데이터에서 새로운 RGB 표면 객체를 생성한다. 다음은 간단한 사용 예제이다.

SDL_Surface* surf = SDL_CreateRGBSurfaceWithFormatFrom((void*)data, width, height,
                                                       depth, pitch, pixel_format);

다음은SDL_CreateRGBSurfaceWithFormatFrom 함수를 이용하여 실제 rLottie에서 반환된 데이터를 그리는 예제 코드이다.

rlottie::Surface surface(buffer.get(), w, h, w * 4);
animator->renderSync(frameNum, surface);

SDL_Surface* image = SDL_CreateRGBSurfaceWithFormatFrom(buffer.get(),
                                                        surface.width(), surface.height(), depth, pitch,
                                                        SDL_PIXELFORMAT_BGRA32);

SDL_Texture* texture = SDL_CreateTextureFromSurface(renderer, image);
SDL_FreeSurface(image);

// Fill Background Color.
SDL_SetRenderDrawColor(renderer, 255, 255, 209, 255);
SDL_RenderClear(renderer);

// Align Center
SDL_Rect rect = { 640/2 - 200/2, 480/2 - 200/2, w, h };
SDL_RenderCopy(renderer, texture, nullptr, &rect);

SDL_DestroyTexture(texture);

// Composed backbuffer to the screen as a complete picture.
SDL_RenderPresent(renderer);

이 예제에서는 Lottie 이미지를 윈도우 중앙에 위치하도록 SDL_Rect 를 정의하였다. 제대로 화면에 그리기 위해 몇 가지 SDL_* 함수를 추가적으로 사용했다는 점에 주목해야한다. 이 함수들에 대해서는 이전에 작성한 글을 참고하길 바란다.

전체적인 흐름을 다이어그램으로 표현하면 다음과 같다.

SDL Diagram.png

 

이제 Lottie 애니메이션이 잘 그려지는지 확인하기 위해 NETFLIX 의 스플래시 로고를 사용해봤다.

netflix.gif

rLottie 는 C 및 C++ 언어를 위한 API를 제공하므로 SDL2 뿐만 아니라 Qt 및 리눅스등과 같은 다양한 플랫폼용 응용프로그램 개발에 활용할 수 있다.

번호 제목 글쓴이 날짜 조회 수
35 Flutter 위젯의 상태관리에 대해서 file makersweb 2023.04.06 419
34 [NodeGui] JavaScript로 데스크탑 응용프로그램 작성 file makersweb 2023.02.21 1015
33 openFrameworks 한글 폰트 설정 및 출력하기 file makersweb 2023.02.19 183
32 LVGL 을 통해 GUI 구현 시 한글 폰트 추가 file makersweb 2023.02.07 1040
31 Windows에서 Qt Creator + CMake + vcpkg 로 C++ 개발환경 구성 (POCO 라이브러리 DirectoryWatcher 예제) file makersweb 2023.01.14 629
30 NAppGUI, C언어용 크로스 플랫폼 GUI 라이브러리 file makersweb 2022.10.10 834
29 OTA 오픈소스 프로젝트 makersweb 2022.08.03 455
28 AGL (Automotive Grade Linux) 개요 file makersweb 2022.06.19 1827
27 Chromium과 Ozone 층 file makersweb 2022.03.03 710
26 Flutter Application 에서 한글(EUC-KR) 깨져서 나오는 문제 file makersweb 2022.01.06 2632
25 CopperSpice 에 대해서 (C++ Gui 라이브러리) file makersweb 2022.01.02 523
24 Flutter/Dart 와 Qt/QML 비교 file makersweb 2021.11.07 1375
23 VSCode 와 Qbs 플러그인으로 C/C++ 개발환경 구성 file makersweb 2021.09.12 818
22 ZeroMQ 를 이용한 Qt 응용프로그램 간 통신 file makersweb 2021.08.28 812
» C++를 위한 Lottie 라이브러리 with SDL2 file makersweb 2021.08.15 949
20 CANdevStudio 를 사용하여 CAN 네트워크 시뮬레이션 file makersweb 2021.03.09 1654
19 Protocol Buffers 를 이용한 직렬화 with Conan Package Manager file makersweb 2021.02.24 840
18 라즈베리파이에서 Redis의 Pub/Sub 패턴을 사용하는 Electron 응용프로그램 file makersweb 2021.01.31 664
17 Nana, C++용 크로스플랫폼 GUI 라이브러리 file makersweb 2021.01.06 2039
16 라즈베리파이4에서 openFrameworks 예제 실행 file makersweb 2020.12.13 544