​​

움직이는 아마존 초상화의 예제 sprite 파일과 활용 예시입니다.
(테두리 없는 초상화, 용병 액자가 씌워진 초상화로 구성되어 있습니다.)

애니메이션 sprite는 생각보다 고화질의 이미지도 문제 없이 재생 됩니다.

전 임시로 HUD패널을 우측으로 밀고 대충 넣었습니다만, 잘 활용하시면 스타, 둠 처럼 느낌있게 연출 하실 수 있을 거 같습니다.



물론 연예인이나 게임/만화/영화 등의 캐릭터를 넣어도 되겠죠 ㅎㅎ

마음 같아선 모두가 만족할 만한 움직이는 개체를 왕창 만들어 드리고 싶지만, 시간적 제약도 있고 모두의 취향

이 다르다 보니 방법을 알려드리는 쪽으로 하는 게 맞다고 보여집니다.
(물론, 유용한 게 있다면 언제든 공유 드립니다.)


* 해서, 추가적으로 이렇게 움직이는 Sprite를 만드는 흐름을 설명 드리겠습니다. *

시작하기에 앞서...
sprite는 단순히 말해서 카메라 필름이라고 생각하시면 됩니다. 여러 프레임(이미지)을 가로로 쭉 이어 붙이고 애니메이션으로 재생하는 단순한 파일이므로 전용 툴만 사용한다면 'GIF' 만드는 방식과 크게 다르지 않습니다.

생각보다 제작은 간편하며 만드실 때에는 한 가지만 유념하시면 됩니다. sprite는 파일의 포멧 관점에서 보면 거의 무한정으로 이미지를 이어붙여도 만들어집니다만, 이 데이터가 인게임에서 GPU 텍스쳐로 다 올라가지가 않습니다. 환경마다 다르겠지만 대략 8200 x 8200 px 정도의 캡이 있는 걸로 보여집니다.

즉, 100x100px의 이미지를 80장 정도 넣어 재생하는 게 한계라고 보시면 됩니다. 그러니 작업하실 때에는 원하는 크기를 8200에서 나누어 프레임 수를 계산하시면 되는 겁니다.  물론 이 정도만 해도 꽤 많은걸 표현할 수 있고 누끼를 딴다고 하면 사실상 이 정도도 꽤 노가다가 필요하긴 하므로, 어떻게 보면 적절한 거 같기도 합니다.

- 준비물 : 포토샵, D2R Sprite ED2R(https://www.inven.co.kr/board/diablo2/5842/7845), 사용할 동영상 혹은 GIF 
              파일
  // 포토샵이 없어요 : 연속되는 PNG를 구하실 수 있다면 없어도 됩니다...



1. 포토샵에서 GIF 파일을 불러와 모든 레이어를 PNG로 Export 해줍니다(파일-내보내기-비디오 렌더)
   // 동영상의 경우 웹에서 확장자 to GIF 검색해서 변환해서 과정에 따라 진행합니다.
   // 만약 배경이 비워진 PNG로 뽑을 경우 알파채널에서 꼭 매트를 해제 해줘야 검은 바탕이 아니라 투명 배경
      이 됩니다.


▲ 이렇게 프레임별로 PNG가 생성됐습니다.



2. 제가 최근에 만들어 올린 D2R Sprite ED2R을 실행하신 다음, 프로그램 좌측 최상단의 '파일 불러오기 - data/
   hd/global/ui/controller/autosaveicon' 경로로 이동해 저 두 sprite를 불러옵니다. 
   // 다른 경로, 다른 sprite라도 상관 없습니다. 이후 Json에서 경로만 변경하신 파일로 잘 잡아주시면 문제 없
      어요
   // Question. 제 폴더엔 저게 없는데요?
      Answer. 직전 제 게시글인 움직이는 animation을 설치하신 다음 진행합니다.



3. 이번엔 폴더 불러오기로 아까 추출한 png가 모여있는 폴더를 선택해 불러옵니다.



4. 이미지의 크기가 너무 크거나 작으면 폴더명을 우클릭해서 전체 Size 변경으로 크기를 맞춰줍니다.
    // png를 눌러보고 내용물 크기 변경도 필요하다면 해줍니다.
    // Size는 앞서말한 8200의 캡을 생각하시면 됩니다. 현재 png가 720x360에 100장이 있다고 한다면
       가로 길이는 '가로길이/8200 <=(작거나 같음) 100'이므로 82가 되고 원본 비율에 따라 82x41로 변경해주면 
       되겠죠?
    // 만약 액자를 적용하셨을 경우 꼭 PNG 전체 변경사항 저장을 해줘야 반영됩니다(Size 조절은 자동반영).



5. 아까 불러온 sprite 옆의 프레임 에디터를 켭니다.



6. 이제 여기에 아까 생성한 PNG들을 넣기만 하면 됩니다. 우리는 특정 프레임만 갈아끼울 게 아니므로 통으로 
   교체할 겁니다.



7. 먼저 프레임의 크기를 들어갈 PNG에 맞춰 줘야합니다. '프레임 크기 변경 - PNG 크기를 입력 - 캔버스' 순으로 선택해서 적용합니다.



8. 0번 프레임을 제외하고 '1번 클릭 - (Shift 누른채) 11번 클릭'해서 상단의 '선택 프레임 삭제' 혹은 Del키를
   눌러 제거해줍니다.



9. PNG에서... 를 눌러 PNG 파일들을 불러옵니다.


※ 꼭 PNG 파일의 이름이 순서대로 정렬되었는지 확인 하신 다음 모두 선택해 불러옵니다. 뒤죽박죽일 경우 
   상단의 이름 탭을 눌러 정렬 한 후 불러오셔야 합니다.



10. 순서대로 잘 불러와졌습니다. 이제 아까 남은 0번 프레임을 눌러 삭제해주고 아래의 '다른 이름으로 저장'을 
   해줍니다. 똑같은 과정으로 lowend 파일도 작업해줍니다.
   //원본 파일에 덮어 쓰셔도 상관 없다면 저장 하셔도 됩니다. 콘솔 아니면 쓸 일 없는 sprite긴 합니다.



11. 이런식으로 매번 해당 sprite를 작업해서 다른 이름으로 저장하신 다음 Json에서 호출해 쓰시면 되겠습니다.

    * Panel쪽은 제 관심분야가 아니라 저도 AnimatedImageWidget에 대해 잘 알지는 못합니다.
      상시 혹은 무기 교체처럼 특정 상황에 출력할 수도 있으며, 이 부분은 Panel을 어떻게 활용하냐에 달려
      있습니다.

      하단의 코드가 일반적인 AnimatedImageWidget의 코드이며, 아래 코드를 hudpanelhd.json의 최하단에 
      괄호에 맞춰 넣으시면 상시 인게임에서 생성한 애니메이션이 재생됩니다.

      - filename : 만드신 sprite의 경로와 확장자를 제외한 파일이름(순정에 없는 파일명이라도 상관 X)
      - anchor/rect : 배치할 좌표
      - "rect": { "scale": 숫자 } : 애니메이션을 출력할 크기(변경 시 좌표 조금 수정 해줘야 합니다.)
      - "fps" : 초당 프레임 수. 높을 수록 빠르게 재생하겠죠?

{
            "type": "AnimatedImageWidget", "name": "TestAnimIcon1",
            "fields": {
                "anchor": { "x": 0, "y": 0 },
                "rect": { "x": -775, "y": -1685, "scale": 1 },
                "filename": "Controller/autosaveicon/d2r_saveicon_linear_red",
                "fps": 24,
                "useAdvancedColoring": true,
                "recolorRange": { "hue": [0.0, 1.0], "saturation": [0.0, 1.0], "value": [0.0, 1.0] },
                "hsvTransform": [0.0, 0.0, 0.0, 0.0],
            }
        },

​
▲ 가이드하면서 생성된 결과물 : 대충 따왔더니 약간 동작이 어색하네요


=================================================== 



제목 : Anim_Portrait(Amazon)
분류 : D2R MODS
빌드 : Null - 최신 수정 2026.07.11
제작 : TEAM ED2R (풍선)

본 자료에 대한 모든 권한은 각 제작자에게 있으며 상업적 이용을 금합니다.

===================================================