RP2350 Touch LCD 3.5와 ST7796 화면에 달리는 말 애니메이션을 적용했습니다. 동영상을 재생하는 대신 자세가 다른 PNG 이미지 3장을 빠르게 바꾸고, 말이 움직이는 영역만 갱신하는 방식입니다.

RP2350 Touch LCD 3.5에서 실행한 말 애니메이션 결과

RP2350 Touch LCD 3.5에서 실행한 말 애니메이션 결과

이미지 3장이 한 동작을 만듭니다

같은 크기의 캔버스에 말의 중심과 바닥 위치를 맞춘 뒤 1번 → 2번 → 3번 → 1번 순서로 반복합니다. 프레임마다 크기나 위치가 달라지면 달리는 모습보다 화면이 흔들리는 것처럼 보이므로, 투명 여백까지 동일하게 맞추는 것이 중요합니다.

애니메이션에 사용한 말 PNG 3장

애니메이션에 사용한 말 PNG 3장

전체 화면이 아니라 말이 있는 영역만 바꿉니다

프레임이 바뀔 때마다 화면 전체를 지우고 승마장 배경을 다시 그리면 전송 중간 과정이 보이며 깜빡일 수 있습니다. 반대로 이전 말 자리를 검은색으로만 지우면 배경 위에 검은 사각형이 남습니다.

이 프로젝트에서는 다음 세 작업을 같은 사각형 영역 안에서 처리합니다.

원래 배경 복원, 다음 말 프레임 합성, 변경 영역만 전송하는 부분 갱신 과정

원래 배경 복원 → 다음 말 프레임 합성 → 변경 영역만 전송하는 부분 갱신 과정

  1. 이전 말이 있던 자리에 원래 승마장 배경 조각을 다시 그립니다.
  2. 그 위에 다음 말의 투명 PNG 데이터를 합성합니다.
  3. 완성된 사각형 영역만 flush()로 LCD에 전송합니다.

화면 전체를 매번 보내지 않기 때문에 배경이 끊기거나 검은 사각형이 생기는 문제를 피하면서 깜빡임도 줄일 수 있습니다.

PNG는 LCD용 숫자 배열로 변환합니다

RP2350이 PNG 파일을 실행 중에 직접 여는 구조는 아닙니다. PC에서 각 픽셀의 색상과 투명도를 미리 숫자로 바꾸고, Arduino 프로젝트의 C++ 배열로 저장합니다.

말 프레임은 HorseAnimation.cpp가 됩니다

말 PNG 3장의 색상과 투명도를 LCD가 읽는 숫자 배열로 변환하는 과정

말 PNG 3장의 색상과 투명도를 LCD가 읽는 숫자 배열로 변환하는 과정

  • 말의 색상은 RGB565 형식의 16비트 값으로 저장합니다.
  • 말 주변의 투명 영역은 별도의 투명도 값으로 저장합니다.
  • 변환된 배열은 HorseAnimation.cpp에서 각 프레임 데이터로 사용합니다.

승마장 배경은 BackgroundImage.cpp가 됩니다

480×320 승마장 배경의 모든 픽셀을 RGB565 숫자 배열로 저장하는 과정

480×320 승마장 배경의 모든 픽셀을 RGB565 숫자 배열로 저장하는 과정

배경도 같은 방식으로 변환합니다. 승마장 PNG를 수정했다면 BackgroundImage.cpp를 다시 생성해야 하며, 이 배열에서 이전 말이 있던 위치의 배경 조각을 가져와 복원합니다.

애니메이션 배경으로 사용한 480×320 승마장 이미지

애니메이션 배경으로 사용한 480×320 승마장 이미지

프로젝트에 필요한 파일

메인 .ino 파일의 함수 호출만 복사해서는 동작하지 않습니다. 이미지 배열과 화면 출력 기능을 담은 파일을 함께 포함해야 합니다.

  • HorseAnimation.h / HorseAnimation.cpp — 말 3장의 RGB565 색상과 투명도 배열
  • BackgroundImage.h / BackgroundImage.cpp — 480×320 승마장 배경의 RGB565 배열
  • ST7796Display.h / ST7796Display.cpp — 배경 일부 복원, 투명 이미지 합성, 화면 전송 함수

정리

RP2350 TFT LCD에서 짧은 애니메이션을 구현할 때는 영상 파일 대신 정렬된 PNG 프레임을 RGB565 배열로 변환해 사용할 수 있습니다. 이때 이전 프레임 자리를 원래 배경으로 복원하고, 다음 투명 프레임을 합성한 뒤, 변경 영역만 전송하면 화면 전체를 다시 그리는 방식보다 깜빡임을 줄일 수 있습니다.

문의