[수다] [API] 말풍선 & 명찰 반지 시뮬레이터 (개추요청)

안녕하세요.

코디 좋아하시는 분들을 위해서 메이플 사진관에 말풍선 & 명찰 반지 시뮬레이터를 구현해왔습니다!

말풍선 시뮬레이터 : https://maplestudio.app/simulator/chat_balloon

명찰 시뮬레이터 : https://maplestudio.app/simulator/name_tag

개요

코디 반지를 구매하기 전에 미리 장착된 모습을 확인할 수 있습니다.

캐시샵에도 비슷한 기능이 있지만, 판매기간이 종료되면 확인이 안되고 의상으로 분류되지 않아 경매장 미리보기에서도 확인이 안되더라고요... 옛날 아이템인 경우엔 확인할 기회 조차 없었고요...

이런 문제를 해결하기 위해 인게임과 99% 비슷하게 렌더링되는 시뮬레이터를 웹으로 만들어왔습니다.

메이플 사진관에서는 현재 메이플스토리에 존재하는 모든 반지를 시뮬레이션 할 수 있습니다.

(패치 파일 발견 시 자동으로 데이터를 추가)

미리보기

PC 화면

모바일 화면

사용법

1. 반지를 검색하고 선택한다.

(마우스 올리면 인게임처럼 툴팁도 뜨게 만듬)

2. 내용과 캐릭터명을 입력한다.

불러오기 버튼을 누르면 캐릭터와 코디 반지와 동시에 볼 수 있습니다. (API 활용)

3. 말풍선 & 명찰 이미지가 필요하면 다운로드 버튼 클릭

렌더링된 이미지를 이렇게 다운받을 수 있습니다.

주의사항

- 애니메이션이 포함된 말풍선은 첫 번째 프레임만 고정하여 출력합니다.

- 애니메이션이 포함된 명찰은 아직 지원하지 않습니다.

- 일부 말풍선 & 명찰은 렌더링이 부자연스러울 수 있습니다.

- 캐릭터와 말풍선 & 명찰 간의 간격은 임의대로 설정하여 인게임과 다를 수 있습니다. (참고용으로만 사용 바랍니다.)

- 한글날 이벤트 관련 반지의 궁서체는 아직 지원하지 않습니다.

- 윈도우에서 접속해야 인게임과 동일한 폰트로 출력됩니다.

구현 원리

메이플 클라이언트 내에 존재하는 모든 반지의 이미지와 메타데이터를 자동으로 추출하여 미리 업로드 해두고,

유저가 시뮬레이터에서 반지를 선택하면 미리 추출해둔 반지 데이터를 불러와 입력한 텍스트의 크기에 맞게 브라우저에서 동적으로 렌더링(붙이고 자르고 조합하고)하는 구조로 개발하엿읍니다.

(Draw 알고리즘은 위컴알 소스코드 참고)