▲ RPG Maker MV
순서 | 과정 | 설명 |
1 | RPG Maker MV 에서 배포 하기 | 파일 메뉴에서 배포 파일을 생성할 수 있습니다. '빌드'나 '컴파일'이 아니라 정말 파일을 복사만 하게 됩니다. 이때, 사용하지 않는 리소스 제외 옵션을 선택하면 사용하지 않은 리소스 파일들이 제거된 상태로 복사됩니다. |
2 | | |
3 | 바이트 코드로 변환 | 컴파일 과정에는 바이트 코드로 변환할 수 있는 javac 컴파일러로 자바 파일을 클래스 파일로 컴파일한 후, dx tool을 이용하여 .dex 파일로 최종 변환합니다. |
4 | 최종 패키징 | 일반적으로 마켓에 올릴 땐 인증을 위한 서명이 있어야 합니다. 서명을 하지 않고 디버깅 용으로 사용하게 되면 unsigned 상태입니다. 계정 설정에서 키저장소를 설정할 수 있습니다. 설정해두면 클라우드 서버에서 jarsinger 를 이용하여 unsigned 상태의 apk 파일을 signed 상태로 만들게 됩니다. |
▲ 안드로이드 애플리케이션 패키지(APK) 파일 생성 과정
RPG Maker MV는 공식 스토어와 스팀에서 86,000원에 판매되고 있습니다. 한글판으로 구매 가능합니다. 구매는 해외 결제가 가능한 비자 체크 카드나 문화 상품권 등을 통해 결제가 가능하며 디지털 다운로드 방식으로 컴퓨터에 다운로드할 수 있습니다. 이후에는 스팀 클라이언트를 통해 툴을 실행할 수 있게 됩니다.
▲ 스팀 정가
▲ 할인가
무료 체험판
플러그인 매니저
사용 방법 또한 매우 간단하기 때문에 스크린샷을 통해 설명하겠습니다.
▲ 폴더에 자바스크립트 파일을 넣어줍니다.
전작은 직접 수정이 불가피했지만 이번 작품부터는 달라졌습니다. 플러그인을 배포하는 개발자들에 의해 직접 파일을 열어 편집이 필요 없게끔 만들어져있습니다. 하지만 편집이 필요할 경우 메모장이나 Notepad++, 이클립스 같은 에디터를 통해서 파일을 불러와 편집이 가능합니다. 파일의 문자열 인코딩은 유니코드(UTF-8) 형식으로 저장되어야 합니다. 이는 도움말에 설명되어있습니다. 만일 자바스크립트 파일이 없고 텍스트만 있다면 파일 저장 옵션에서 UTF-8로 지정한 후에 저장을 하게 되면 한글이 제대로 인식됩니다.
▲ 더블 클릭하면 추가할 수 있는 창이 열립니다.
▲ 추가할 플러그인 선택 (RMMV ver 1.5.0에서의 UI입니다)
▲ @type boolean으로 참/거짓 값을 설정하게 할 수 있습니다.
▲ @type select 옵션으로 값을 하나만 선택하게 할 수 있습니다.
소재의 위치 | 소재의 이름 | 소재 규격 | 비고 | |
img/animations | 애니메이션 | 192 X 192 (1셀) | ||
img/battlebacks1 img/battlebacks2 | Battlebacks | 1000 X 740 | ||
img/characters | 캐릭터 | 576 X 384 | 캐릭터 하나의 크기는 48 픽셀. 가로 12 패턴 X 세로 8 패턴. ! : 문, 보물상자 $ : 이펙트, 큰 캐릭터, 특수 캐릭터 등 | |
img/enemies | 적군(프론트 뷰) | 제한 없음 | 프론트 뷰 | |
img/faces | 페이스칩 | 576 X 288 | 144 X 144 | 4열 2행 |
img/parallaxes | 원경 | 제한 없음 | 원경 파일 이름 앞에 ‘!’ 가 붙으면 바닥처럼 취급하여 스크롤 시 같이 이동되지 않습니다. (패럴랙스 맵핑 시 유효) | |
img/pictures | 그림 | 제한 없음 | ||
img/sv_actors | 아군(사이드 뷰) | 576 X 384 | 64 X 64 | |
img/sv_enemies | 적군(사이드 뷰) | 제한 없음 | ||
img/system | Balloon.png | 384 X 720 | 48 X 48 | 8패턴 X 10타입 |
ButtonSet.png | 288 X 96 | 스마트폰 용 | ||
Damage.png | 240 X 160 | |||
GameOver.png | 816 X 624 | |||
Loading.png | 400(+) X 100(+) | |||
IconSet.png | 512 X 640(+) | 32 X 32 | 16열 X 20행(+) | |
Shadow1.png | 48 X 48 | 비행선의 그림자 | ||
Shadow2.png | 82 X 38 | 사이드-뷰 전투에서 배틀러의 그림자 | ||
States.png | 768 X 960 | 사이드-뷰 전투에서 배틀러의 상태 애니메이션 | ||
Weapons1.png, Weapons2.png, | 576 X 384 | 사이드-뷰 전투에서 무기구 | ||
Weapons3.png | 288 X 384 | |||
Window.png | 192 X 192 | 영역 당 96 X 96 | ||
img/titles1, | 타이틀 | 816 X 624 | ||
img/titles2 | ||||
img/tilesets | A1 | 768 X 576 | 바다, 용암 | |
A2 | 768 X 576 | 일반 필드 | ||
A3 | 768 X 384 | 건물 오토타일 | ||
A4 | 768 X 720 | 벽 오토타일 | ||
A5 | 384 X 768 | 계단 등 일반 타일 | 8열 X 16행 | |
B, C, D, E | 768 X 768 | 조형물 | 16열 X 16행 | |
audio/bgm | Ogg Vorbis(.ogg) AAC(.m4a) | |||
audio/bgs | ||||
audio/me | ||||
audio/se | ||||
movies | WebM(.webm) MP4 (.mp4 encoded with H.264 codec) | |||
개발자 도구
이번 작품에서 가장 인상적인 부분 중 하나는 실제 크롬에서 사용하는 크로미움 웹 브라우저 엔진을 이용하여 만들어졌다는 점입니다. 그 안에 포함된 개발자 도구는 디버깅 기능 그리고 프로파일링 기능을 가지고 있는 도구입니다.
단축키 정보 |
단축키는 다음과 같은데 크게 달라진 점은 없으나 FPS 와 프레임 시간이 인 게임 내부에 그래픽으로 표시된다는 점이 달라졌으며 개발자 도구로 게임 내에 표시되는 2D 그래픽 객체들을 자바스크립트를 통해 마음대로 주무를 수 있게 되었다는 점입니다. 자바스크립트는 HTML 이 지니고 있는 요소들을 거의 모두 가지고 있기 때문에 웹 개발에서 사용하는 다양한 라이브러리들과 연동시키는 게 가능합니다.
구분 | 내용 |
F2 | FPS 표시 |
F4 | 전체 화면 전환 |
F5 | 화면 새로 고침(게임 재시작) |
F8 | 개발자 도구 |
F9 | 스위치 & 변수 값을 조작할 수 있는 창 띄우기 |
Ctrl | 지형 통과 |
Shift | 달리기 |
개발자 도구로는 페이지 소스를 보거나 프로파일러를 통해 실행 과정 중에 이상한 점을 발견하거나 네트워크를 통해 무엇을 실시간으로 내려받았는지 어떤 통신 방법으로 데이터를 보내고 받았는지를 정밀하게 분석할 수도 있으며 브라우저 내 화면을 실시간으로 변경할 수도 있습니다.
▲ 개발자 도구의 주요 탭들
Sources |
Sources 탭에서는 비주얼 스튜디오로 코딩을 할 때와 같이 특정 코드에 브레이킹 포인트를 걸어놓고 잠시 게임을 멈춰두는 용도로 사용할 수 있는 그야말로 개발자들을 위한 디버깅 도구가 모여있는 탭입니다.
▲ https://developer.chrome.com/devtools/docs/javascript-debugging
이 탭은 특히 브레이킹 포인트를 걸어놓고 순차적으로 거슬러 올라가거나 함수의 흐름을 타면서 어떤 부분에서 오류가 생기는지 점검할 때 유용하게 사용할 수 있습니다.
▲ 브레이크 포인트에 걸려 게임이 잠시 멈춘 모습
함수 단위 또는 한 라인씩 직접 실행해보면서 어느 지점에서 어떤 변수가 할당됐고 어떤 상황에서 잘못되어가는지 정확하게 알아낼 수 있습니다.
Chrome Devtools Cheatsheet - http://anti-code.com/devtools-cheatsheet/
프로파일러 |
게임은 매 프레임마다 반복적으로 화면을 지우고 다시 그리는 작업을 반복하는 프로그램입니다. 이때 CPU 와 GPU 성능이 크게 좌우된다고 볼 수 있습니다. GPU는 전달받는 색 정보와 지오매트리 정보를 이용하여 그래픽 처리를 수행하고 CPU는 자바스크립트 명령을 처리하기도 하고 다른 프로그램이 CPU를 사용하고 있어서 대기하기도 합니다. 이 프로파일러를 자바스크립트가 수행된 시간과 메모리가 할당된 시간 등을 알아낼 수 있습니다.
▲ Profiles 탭
이 프로파일러 도구는 '웹 최적화'를 도와주는 기능인데, 즉, 동작 원리를 파악하여 어느 부분에서 게임이 느려지고 있는지 파악할 수 있게 됩니다. 보통 프로파일러는 타임라인과 함수 호출 횟수 그리고 함수 사용률, 함수가 수행된 시간, 함수가 속해있는 게임 오브젝트, 그래픽 API, 드로우 콜, 오디오 API 가 호출된 횟수, 정점 버퍼의 개수 등을 보여주고 개발자에게 이 부분이 느려졌다는 것을 차트나 숫자 등으로 알려줍니다.
하지만 MV는 웹 개발자 도구이기 때문에 게임 엔진처럼 게임과 관련된 부분까지 자세하게 제공되진 않습니다. 그렇지만 이 도구는 확실히 최적화를 하는데 도움을 받을 수 있습니다. 실제 웹 브라우저 엔진을 채택한 탓에 이런 획기적인 기능을 이용할 수 있게 된 거라고 볼 수 있습니다.
타임라인 기능으로 분석하는 것도 가능하겠지만 프로파일 탭을 통해 임의로 시점에 직접 시작하여 원하는 지점에서 종료를 할 수 있습니다. 첫 번째 체크 박스가 선택된 상태에서 시작 버튼을 누르면 자바스크립트가 CPU 시간을 얼마나 소비하는지 알아낼 수 있습니다. 이를 분석하여 시간을 오래 잡아먹는 함수를 최적화하면 게임 성능을 높일 수도 있게 되는 것입니다.
▲ 1프레임을 기준으로 해당 프레임에 수행된 함수를 순서대로 쌓아 보여주고 있습니다.
이 함수가 수행된 시간, 전체에서 이 함수가 수행된 비율 등이 나와있지만 정렬이 되어있지 않아 보기 힘드므로 Total 탭을 눌러 오름차순 또는 내림차순으로 정렬해보면 아래와 같이 보기 좋게 정리됩니다.
▲ 어떤 함수가 가장 오래 수행됐는지 알 수 있습니다.
위에서 알 수 있는 것은 매 프레임마다 SceneManager.update 그리고 그래픽을 그리는 작업을 하는 WebGL 렌더링과 화면에 그릴 스프라이트 배열과 텍스처들을 보관하고 있는 PIXI.DisplayObjectContainer._renderWebGL 등이 가장 많이 실행되고 있다는 것을 알 수 있습니다. PIXI는 그래픽 렌더링 라이브러리이므로 이는 화면에 할당되어있는 그래픽 스프라이트와 관련이 있다는 것을 알 수 있습니다. 수행되는 시간을 줄이면 최적화를 기대할 수도 있을 것입니다.
▲ 어떤 오브젝트(객체)가 가장 많은지 알 수 있습니다.
위는 메모리와 관련된 부분입니다. 메모리 상에 어떤 오브젝트가 많이 할당되어있는지 알 수 있습니다. 배열과 문자열 그리고 그래픽 라이브러리와 관련되어 있는 객체들이 눈에 띄고 있습니다.
콘솔 도구 |
콘솔 도구를 이용하면 자바스크립트로 직접적으로 어떤 값을 수정하거나 함수를 호출하는 행위를 할 수 있는데 샘플 게임만 나왔을 때 이 도구만으로 플러그인이 잘 실행되는지 정도를 확인할 수 있었습니다. 웹에서의 자바스크립트는 HTML5를 컴퓨터 언어를 통해 보다 더 쉽게 컨트롤을 하는 것이 목적이므로 HTML5 와 관련된 명령어들도 알고 있으면 편리합니다. V8 엔진이 내장되어있기 때문에 console.log("메시지") 를 통해 콘솔 화면에 메시지를 출력하는 것도 가능해서 코딩 연습 도구로도 유용하게 사용할 수 있습니다.
▲ 콘솔 도구로 카페에 접속을 할 수도 있습니다.
▲ $gameMessage.add() 명령으로 임의로 띄운 메시지
모바일 예뮬 레이팅 기능 |
모바일 예물 레이트 기능을 이용하면 화면 크기가 원하는 모바일 기기의 비율에 맞춰 변경되기 때문에 스마트폰을 켜지 않고도 미리 테스트를 해볼 수 있습니다.
아래는 기기를 애플 아이폰 6 Plus를 선택했을 때의 화면입니다.
공식 플러그인
AltMenuScreen
AltSaveScreen
EnemyBook
ItemBook
SimpleMsgSideView
TitleCommandPosition
WeaponSkill
TouchUI
Gacha
GachaBook
SlotMachine
Community_Basic : 화면 해상도 변경 기능 제공, 이미지 캐시 크기 설정 기능 제공 (1.5.0 이상)
MadeWithMv : 로고 띄우는 기능 제공
* RPG Maker MV는 비교적 업데이트가 자주 이뤄지고 있으므로 스크린샷과 현재 버전이 일치하지 않을 수 있습니다. 다만 추후 크게 변경되는 부분이 있다면 스크린샷 또한 확인 후 교체가 이뤄질 것입니다. 감사합니다.
- RPG Maker MV의 MV에는 다양한 의미가 내포되어있지만 그 중에는 다양한 관점을 뜻하는 Multi View라는 의미도 있다고 합니다 - http://tkool.jp/mv/course/index.html [본문으로]
- VXA는 Windows에서만 돌아가는 프로그램이고, 그래픽 엔진은 가장 느린 GDI 엔진, 오디오는 DirectX Audio(Direct Sound), 동영상은 DirectShow로 알려져 있습니다. 느린 그래픽 렌더링 엔진을 사용하지만 실시간으로 계속 그리기를 호출하지 않는 이상 체감되진 않습니다. 새로운 윈도우즈가 나오면 오래된 다이렉트와의 충돌 및 호환 문제로 문제가 생기는 경우가 있습니다. (참고로 MKXP를 이용해서 그래픽, 오디오 엔진을 플랫폼에 맞게 변경할 수도 있습니다, To the Moon이 이를 이용하여 리눅스, 맥 버전을 발매했습니다, 이런 식으로 하려면 개발사의 허락이 있어야 합니다.) [본문으로]
- 2017년 07월 10일 이후로 클라우드 기반 빌드 시스템이 완전히 폐지되면서 편하게 빌드할 수 없게 되었으며, 이제는 Cordova를 이용하여 빌드를 해야 합니다. [본문으로]
- 네이티브 언어로 보통 2D 게임을 만들 때 맵 에디터를 먼저 만들어야 하는데 이때 C, C++, Data Structure, C++ STL, Design Pattern, Win32API, MFC, DirectX, OpenGL, 기타 라이브러리 등의 지식이 필요합니다. [본문으로]
- 애니메이션이 모두 그려져 있는 스프라이트 시트를 바탕으로 프레임 영역을 만들어서 애니메이션을 만듭니다. [본문으로]
- MV는 윈도우즈에서는 최신 DirectX로 구동하고, 다른 플랫폼에서는 OpenGL 기반입니다. 그리기 성능은 VXA와 비교할 수 없을 정도로 훨씬 빠르며 셰이더도 사용할 수 있습니다. 따라서 PC에서는 블러 기능과 마스킹 등 런타임에서 이런 그리기 작업을 해도 렉이 없습니다. [본문으로]
- 모바일에서는 그리기 성능이 좋은 편이 아닙니다. 대책 없이 대부분 고용량의 텍스처를 그대로 사용하면 모바일 기기에서는 메모리 문제로 구동할 수 없는 문제가 있습니다. 텍스처 최적화의 경우, 툴에서 알아서 해결해주지 않으므로 자체적으로 최적화해야 합니다. 또한 일부 그래픽 드라이버에서는 문제가 있어서 게임이 구동이 되지 않는 경우도 있으며 깜빡임 문제 등도 있습니다. 대응 방법은 있지만 이 문제로 아예 유니티로 바꾸시는 분들이 있었습니다. 그리고 웹 특성 상 API가 사라지거나 계속 바뀌고 있어서 앞으로도 그것에 대응해서 업데이트를 계속해줘야 하는 문제가 있습니다. 그래서 이젠 업데이트도 커뮤니티에서 맡아서 하고 있습니다. [본문으로]
- 각 플랫폼의 기본 웹뷰를 이용하는 것으로 쉽게 포팅을 할 수 있게 해줍니다 (안드로이드의 경우, OS 버전이 5.0 미만인 기기에서는 WebGL, WebAudio를 사용할 수 없다는 문제가 있습니다) [본문으로]