주요 메뉴 바로가기 (상단) 본문 컨텐츠 바로가기 주요 메뉴 바로가기 (하단)

초속 거합 마법소녀 아카네 개발 – 렌더링 – 실시간 베스트 갤러리

디시인사이드 0

초속 거합 마법소녀 아카네 개발 – 캐릭터 만들기

초속 거합 마법소녀 아카네 개발 – 스테이지 만들기 

7df3c028e2f206a26d81f6e3448471

Pixel Perfect 할 때 회전과 아닐 때 회전 결과 비교

유니티로 픽셀 그래픽 게임을 개발하는데 있어 가장 큰 적은 바로 Pixel Perfect 일 것이다.

태생이 3D 게임 엔진이기 때문일까? Pixel Perfect한 화면을 렌더링 하기 위해 별별 꼼수에 기술이 다 들어간다.

요즘에는 유니티에서 자체적으로 지원하는 기능들이 있기 때문에 설정만 잘 해주면 괜찮은 결과물이 나오는 듯 하다.

하지만 이런건 좀 굴러가면서 직접 만들어야 재미있지 않은가?

인디의 장점은 효율은 제쳐두고 내가 하고 싶은 걸 하는데 있다.

샤리스 인베이더 프로토타입

초속 거합 마법소녀 아카네의 화면을 렌더링 하는 과정을 이야기 하려면 과거 샤리스 인베이더라는 게임을 개발하던 시절로 돌아가야 한다.

의도치는 않았지만 어떻게 보면 초속 거합 마법소녀 아카네의 전신격인 게임이다.

한창 화면을 Pixel Perfect 하게 그리는 방법에 대해 찾던 중 굉장히 간단한 해결 방법을 찾게 되었는데, 바로 Render Texture를 활용하는 방법이었다.

79f3c028e2f206a26d81f6e74587706c

Render Texture 설정

우선 렌더링 하고 싶은 크기의 Render Texture를 만든다.

Filter Mode를 Point로 설정하면 픽셀간의 보간 (스무딩)을 진행하지 않기 때문에 네모 반듯한 화면을 얻을 수 있다.

화면이 그려지기를 원하는 실제 Pixel 크기보다 큰 화면에 그려져 문제가 발생하는 것이기 때문에, 애초에 작은 화면에 그려버리면 된다는 논리다.

7ef3c028e2f206a26d81f6e745897d6c

인 게임 카메라 Inspector

7cf3c028e2f206a26d81f6e241847165

인 게임 카메라

이제 카메라를 통해 Render Texture에 실제 인 게임 화면을 그린다

78f3c028e2f206a26d81f6e64e80746d

Render Texture 렌더링 결과

그러면 위와 같이 깔끔하게 Pixel Perfect한 화면을 얻을 수 있다.

7ff3c028e2f206a26d81f6e24687726b

메인 카메라

이제 위에서 그린 Render Texture를 적당한 크기의 Plane Mesh에 올려 메인 카메라로 찍으면 한 프레임이 완성된다.

같은 방식으로 그려진 UI에 글리치 Post Process를 적용한 화면

매우 간단하다! 

게임 화면을 따로 Texture로 빼 놓은 것이기 때문에 쉐이더를 통해 게임 화면을 커스텀 할 수도 있다.

배경이 자글거리는 문제

한 가지 문제가 있다면 위처럼 대상, 혹은 카메라가 움직일 때 픽셀이 자글거릴수 있다는 것이다.

이는 설정한 PPU 단위보다 작은 값이 Position에 들어가 있으면 발생하는 현상이다. (PPU 100일 때 0.01 보다 작은 값으로 움직일 때 발생)

유니티의 래스터라이저가 어떤 식으로 작동하는지는 모르겠지만, 픽셀 위치가 반올림되며 발생하는 현상일 것이다.

깔끔한 배경

해결법은 간단한데, 그려지는 주체, 카메라의 위치 값을 PPU 단위로 잘라주면 된다.

위는 정지한 3D 배경을 렌더링 한 결과다.

7bf3c028e2f206a26d81f6e74f87736e

초속 거합 마법소녀 아카네에서는 샤리스 인베이더와 같은 방식을 취하되, 조금 더 세분화 해 렌더링 한다.

각각의 그려질 대상들을 서로 다른 Render Texture에 그려준 뒤 쉐이더에서 하나로 합쳐준다. (위의 Combine Pass)

7af3c028e2f206a26d81f6e042857268

아카네 포스트 프로세스 프로파일

이는 포스트 프로세싱을 위함이다.

배경, 캐릭터, 이펙트 등등 각 레이어에 개별적으로 특수 효과를 적용한다.

75f3c028e2f206a26d81f6e442807764fb

그림자가 그려지는 과정

캐릭터와 배경, 배경의 Depth를 포함하는 텍스쳐를 각각 따로 렌더링 한 뒤 합칠 때 그림자를 그리는데 사용하기도 한다.

링크

위는 레인 월드가 그림자를 그리는 방식과 같은 방식인데, 관심 있는 사람은 따라 해보면 좋을 듯

이펙트에 비치는 캐릭터 그림자

위처럼 이펙트 쉐이더에서 활용하기도 한다.

사실 위 같은 효과들은 굳이 직접 구현할 필요가 없다

유니티 자체 기능이나 에셋 스토어가 워낙 잘 되어 있어 그냥 가져다 쓰는게 편하다.

하지만 만들면 재미는 있다. 내가 만든게 잘 작동 하는 걸 보면 기분이가 매우 좋아진다.

돌아가는 구조를 자신이 온전히 파악하고 있기 때문에 기능의 추가나 문제 파악이 쉬운 장점도 있다.

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

출처: 인디 게임 개발 갤러리 [원본 보기]

댓글0

댓글0

300

당신을 위한 인기글

  • ‘방치했다가 대참사’.. 겨울철 자동차 필터, 무시했다간 목숨도 위험?
  • ‘찍힌 거 아녔어?’.. 운전자 99% 모른다는 단속카메라 ‘이것’ 진실은?
  • “EV9 팔고 이거 살까” 아빠들 정조준한 7인승 SUV 아이오닉 9
  • “현대는 이런 차 못 만드나” 랜드로버 디펜더 끝판왕 옥타 사전 계약 실시
  • “진짜 저세상 갈 뻔” 엔진오일 빼 먹은 정비사, 어떻게 처리해야 하나
  • 온라인 랜선집들이, 깔끔하고 감각적인 설계로 완성한 예쁜전원주택! 단독주택 전원주택인테리어
  • ‘찍힌 거 아녔어?’.. 운전자 99% 모른다는 단속카메라 ‘이것’ 진실은?
  • 한국 대학생 프로그래밍 경시대회…서울대 대상

당신을 위한 인기글

  • ‘방치했다가 대참사’.. 겨울철 자동차 필터, 무시했다간 목숨도 위험?
  • ‘찍힌 거 아녔어?’.. 운전자 99% 모른다는 단속카메라 ‘이것’ 진실은?
  • “EV9 팔고 이거 살까” 아빠들 정조준한 7인승 SUV 아이오닉 9
  • “현대는 이런 차 못 만드나” 랜드로버 디펜더 끝판왕 옥타 사전 계약 실시
  • “진짜 저세상 갈 뻔” 엔진오일 빼 먹은 정비사, 어떻게 처리해야 하나
  • 온라인 랜선집들이, 깔끔하고 감각적인 설계로 완성한 예쁜전원주택! 단독주택 전원주택인테리어
  • ‘찍힌 거 아녔어?’.. 운전자 99% 모른다는 단속카메라 ‘이것’ 진실은?
  • 한국 대학생 프로그래밍 경시대회…서울대 대상

추천 뉴스

  • 1
    설운도, 트로트 재벌의 작업실 클래스 "2층 대저택에 '돌'이 가득"('가보자GO')

    연예 

  • 2
    김정현, 최태준 감싸는 금새록에 "단 한 번이라도 내 편인 적 있어?" 섭섭('다리미')

    연예 

  • 3
    데뷔하자마자 매니저에게 돈 빌렸다는데…여배우, 반전 근황

    연예 

  • 4
    '활동중단' 문가비, 조용히 엄마 됐다.. "소중한 존재 지키기 위해 꽁꽁 숨겨야 한다고 생각"

    연예 

  • 5
    이이경, 영아유기 사연에 경악... 환경공무관이 두 번이나 버려진 아기 발견('놀뭐')

    연예 

지금 뜨는 뉴스

  • 1
    정은채·김윤혜가 키스를?…’정년이’ 비하인드 공개됐다

    연예 

  • 2
    김병찬 "가요 프로 진행하며 성룡→유덕화 등 중화권 톱스타들 만나"('불명')

    연예 

  • 3
    방탄 지민, 軍 장병들에게 1억 기부하더니 'MAMA'에선 대상 수상.. "군백기가 뭐예요?"

    연예 

  • 4
    오정태, 잘사는 줄… 안타까운 소식

    연예 

  • 5
    임영웅이 군고구마 팔던 시절부터 동고동락했다는 어부 출신 노래 신동

    연예 

공유하기

0