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

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

makersweb 2021.08.15 23:00 조회 수 : 679

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 및 리눅스등과 같은 다양한 플랫폼용 응용프로그램 개발에 활용할 수 있다.

번호 제목 글쓴이 날짜 조회 수
30 NAppGUI, C언어용 크로스 플랫폼 GUI 라이브러리 file makersweb 2022.10.10 126
29 OTA 오픈소스 프로젝트 makersweb 2022.08.03 69
28 AGL (Automotive Grade Linux) 개요 file makersweb 2022.06.19 1182
27 Chromium과 Ozone 층 file makersweb 2022.03.03 412
26 Flutter Application 에서 한글(EUC-KR) 깨져서 나오는 문제 file makersweb 2022.01.06 733
25 CopperSpice 에 대해서 (C++ Gui 라이브러리) file makersweb 2022.01.02 316
24 Flutter/Dart 와 Qt/QML 비교 file makersweb 2021.11.07 659
23 VSCode 와 Qbs 플러그인으로 C/C++ 개발환경 구성 file makersweb 2021.09.12 499
22 ZeroMQ 를 이용한 Qt 응용프로그램 간 통신 file makersweb 2021.08.28 562
» C++를 위한 Lottie 라이브러리 with SDL2 file makersweb 2021.08.15 679
20 CANdevStudio 를 사용하여 CAN 네트워크 시뮬레이션 file makersweb 2021.03.09 940
19 Protocol Buffers 를 이용한 직렬화 with Conan Package Manager file makersweb 2021.02.24 545
18 라즈베리파이에서 Redis의 Pub/Sub 패턴을 사용하는 Electron 응용프로그램 file makersweb 2021.01.31 484
17 Nana, C++용 크로스플랫폼 GUI 라이브러리 file makersweb 2021.01.06 1599
16 라즈베리파이4에서 openFrameworks 예제 실행 file makersweb 2020.12.13 413
15 Dear ImGui, 경량의 C++ 용 GUI 및 Widget 라이브러리 file makersweb 2020.11.28 6309
14 GENIVI DLT(Diagnostic Log and Trace) 활용 file makersweb 2020.11.19 4171
13 윈도우에서 안드로이드 flutter 프로그래밍 개발환경 구축(with Visual Studio Code) file makersweb 2020.09.16 561
12 가볍고 쉬운 임베디드용 그래픽 라이브러리 - LVGL file makersweb 2020.09.16 1526
11 Qt와 GStreamer 로 작성한 flac 오디오 재생 예제 file makersweb 2020.09.05 910