[📜일지] Frostory - 10 그래픽 리소스 제작 과정

[특수한발가락(seobyeongky)]

안녕하세요!

오랜만에 글을 쓰게 됐네요

이번에는 저희 게임의 그래픽 리소스 제작 과정에 대해 보여드리려고 합니다

저희 게임은 픽셀아트 게임이다보니, 개발을 시작하면서 여러 픽셀아트 제작 툴을 시험했었고

최종적으로 aseprite를 주로 사용하고 있습니다

ase 포맷을 효율적으로 리소스화 하기 위해 깃헙에 있는 AnimationImporter 오픈소스를 사용하고 있습니다

이미 aseprite를 사용하는 분들이 이미 많이 사용하고 계실텐데,

저희 팀은 몇 가지 추가적인 작업을 했기에 이를 보여드리고 싶습니다

AnimationImporter로 애니메이션화를 할 때 pivot이 기본값으로 잡혀져있고, 노가다로 하나씩 바꿔줘야 합니다

이거 쉽게 바꾸는 방법에 대해 물어보는 글도 가끔씩 봤었는데요

이미지의 meta 파일을 텍스트 편집기로 열어서 pivot을 일괄 수정하면 편합니다

하지만 그래도 번거롭습니다

프레임이 추가되면 또 편집을 해줘야 하구요

aseprite와 AnimationImporter가 오픈소스이기에 저희는 pivot을 aseprite 에서 입력하고 읽어오도록 수정했습니다

이 파일을 읽어오면

이렇게 일괄적으로 세팅이 되어서 편합니다

다른 하나는 레이어 분리인데요

기본적으로 ase 파일을 가져오면 레이어를 다 합쳐서 한 장의 이미지가 됩니다

하지만 레이어를 분리할 수 있다면 편한 점이 많습니다

저희 게임에서 응용 예는 얘의 눈알입니다

저렇게 눈알이 있는데, 어둠속에서 빛도 나고, 플레이어를 쳐다보게 하고 싶을 때가 있습니다

AnimationImporter 코드를 수정해서,

앞에 __ 접두어가 붙은 레이어는 분리하고, - 가 붙은 레이어는 제외하도록 했습니다

불러오면 다른 부분과 눈알이 따로 분리되어 나오고, 뒤에 있던 흙 배경은 지워져서 이렇게 나옵니다

1번은 빛을 무시하는 material을 줘서 눈이 빛나도록 한 것이고

2번은 플레이어 캐릭터를 쳐다보는 스크립트입니다

이런 과정을 통해서

이렇게 어둠속에서 특정 부위가 빛나는 연출을 하거나

애니메이션이 있는 부위가 플레이어를 쳐다보도록 하고 있습니다

읽어주셔서 감사합니다!

========= 이전글 =============

1편 소개

2편 괴물

3편 약탈자

4편 파편시스템

5편 대쉬퍼즐

6편 브금소개

7편 스프라이트 순서 처리

8편 레벨 에디팅 툴

9편 대화 시스템

[익명(115.23)]

개오지네요

[익명(183.101)]

대박이다

[익명(119.201)]

정보추

[익명(222.119)]

캬 멋지당

[익명(14.51)]

이건 진짜 너무 도움되는 글이네요 감사합니다!

[달벌레(jkle1005)]

[익명(175.116)]

감사합니다 센세 ㅠㅠㅠ

[ㅇㅇㅇㅇ(183.101)]

진짜 잘 됬으면 좋겠다