RMMV 강좌

랜덤 인카운터 확률에 영향을 주는 요소

시낵스 — Tue, 19 Aug 2025 15:49:40 +0900

랜덤 인카운터가 발생하지 않는 경우

파티원 중에 파티 능력으로 '인카운트 없음' 능력이 있는 파티원이 있는 경우
이벤트 명령으로 '인카운트 금지 변경'이 금지 상태로 되어 있는 경우
플레이어가 비행선에 탑승 중인 경우
이동 루트 설정에 의해 강제로 이동 중인 경우
테스트 플레이 중 Ctrl키를 누르고 이동 중인 경우

랜덤 인카운터 기본 확률을 1이라고 하면

플레이어가 수풀 타일 위에 있으면 확률이 2배 증가
파티원 중에 파티 능력으로 '인카운트 확률 반감' 능력이 있는 파티원이 있는 경우 확률 반감
플레이어가 선박(보트가 아님)에 탑승 중인 경우 확률 반감

YEP 액션 시퀀스 가이드

아무것도몰루 — Sun, 19 Feb 2023 21:11:45 +0900

필요한 스크립트

배틀 엔진 코어 - 기본적으로 필요한 선행 스크립트

액션 시퀀스 팩 1 - 애니메이션 이펙트, 버프 효과 제어 스크립트입니다.

액션 시퀀스 팩 2 - 캐릭터 이동, 화면 효과를 담당하는 스크립트입니다.

액션 시퀀스 팩 3 - 카메라 이동 제어 스크립트입니다.

이번 가이드에서 사용할 건 배틀 엔진 코어+시퀀스 팩 1+시퀀스 팩 2지만 모두 적용해두면 유용하게 사용하실 수 있습니다.

데이터베이스에서 스킬을 하나 만들어보겠습니다.

범위와 연속 횟수는 1로 설정해주시면 됩니다.

스킬의 제어는 메모에 넣은 명령어로 결정되기 때문에 저 설정을 손대면 충돌만 일으키게 됩니다.

우선 공격 스킬을 한 번 만들어보았습니다.

해당 스킬 메모에는 이렇게 입력되어 있습니다.

<Target Action>

animation 0048: user

MOVE user: target, front CENTER, 60

jump user: 20, 20

wait: 30

animation 0048: user

jump user: 20, 20

wait: 30

motion attack: user

action animation

action effect

</Target Action>

메모에 스킬을 어떻게 연출할 건지 넣어주시면 되는데,

<Target Action>

</Target Action>

이라 적으시고 그 사이에 자신이 원하는 내용을 적어주시면 됩니다.

제가 적은 내용을 알아먹기 쉽게 번역하자면 이렇습니다.

animation 0048: user - 48번에 등록된 애니메이션 재생, 유저에게 적용

MOVE user: target, front CENTER, 60 - 유저를 이동 : 목표물에게, 정면의 중앙으로, 60프레임(1초) 동안

jump user: 20, 20 - 유저를 점프 시킨다: 점프를 20% 높이로, 20프레임 (약 0.33초) 동안

wait: 30 - 0.5초 동안 대기한다

animation 0048: user - 애니메이션 48번 재생

jump user: 20, 20 - 유저를 점프 시킨다: 점프를 20% 높이로, 20프레임 (약 0.33초) 동안

wait: 30 - 0.5초 동안 대기한다

motion attack: user - 일반 공격 모션 작동 : 유저

action animation - 스킬에 등록된 애니메이션 작동

action effect - 실제 데미지 발생

이렇게 적으면 어떻게 되는가?

발 밑에 바람 이펙트가 생기며 1초 동안 적을 향해 이동하는데,

그 이동하는 1초 동안 0.33초짜리 점프를 2번 합니다.

그리고 적 앞에 도착하면 검으로 한 대 때립니다.

때렸으니까 마지막에 데미지도 들어가야겠죠?

제가 중간에 가끔씩 대기를 넣어준 것은 애니메이션이 작동할 여유를 주기 위해서입니다.

저 사이에 다른 문장을 넣어 다양한 효과를 써보시기 바랍니다.

생각한 것과 실제로 작동하는 게 좀 다르기 때문에 몇 번 정도 수정이 필요할 수 있습니다.

다른 명령어는 여기서 확인 가능합니다.

www.yanfly.moe/wiki/Category:Action_Sequences_(MV)

사이드 배틀 캐릭터 칩의 애니메이션별 역할

아무것도몰루 — Sat, 18 Feb 2023 17:58:33 +0900

스크립트 사용 시 영문으로는 아래 표기 참고 바랍니다.

WALK 전진
STANDBY 대기
CHANT 버프 스킬
GUARD: 가드
DAMAGE 피격
EVADE 회피
THRUST 찌르기
SWING 스윙
MISSILE 투사체 발사
SKILL 기본 스킬
SPELL 기본 마법
ITEM 아이템 사용
ESCAPE 도주
VICTORY 승리
DYING 전투 불능
ABNORMAL 상태 이상
SLEEP 수면

원형 움직임의 이벤트

무명시절 — Tue, 01 Mar 2022 02:42:36 +0900

예전에 포럼에다 올렸던 질문글을 가져 와 봤습니다

유용하다 싶으면 써보세요

https://forums.rpgmakerweb.com/index.php?threads/circular-moving.138804/

이벤트의 이동경로에다 사용하시길...

포럼글을 얼추 해석(및 사용)한 내용:

this._t = (this._t || 0) + 1; this._x = this._realX = 9 + 5 * Math.cos(Math.PI * this._t / 300); this._y = this._realY = 7 + 5 * Math.sin(Math.PI * this._t / 300);

설명(시계방향기준)

this._t = (this._t || 0) + 1;

:이동루트가 어디부터 시작하는 지를 정하는 부분입니다

0 부분을 바꾸면 시작 지점을 변경할 수 있는데 0으로 놔둘 경우 좌표의 오른쪽에서 시작합니다

+1은 프래임당 변화입니다(주파수라고 생각 하시면 됩니다.)

this._x = this._realX = 9 + 5 * Math.cos(Math.PI * this._t / 300);

:x 축의 좌표와 반지름, 회전 속도를 정하는 부분입니다

9는 중심 x좌표, 5는 9에서 몇 칸 떨어져 있나를 결정하며

+를 -로 변경하면 반시계로 돕니다

300은 회전속도를 정합니다 숫자가 클수록 느려집니다

this._y = this._realY = 7 + 5 * Math.sin(Math.PI * this._t / 300);

: y축의 좌표와 반지름, 회전 속도를 정하는 부분입니다.

x축 설명과 동일합니다

추가로

this._t = (this._t || 300) + 1; this._x = this._realX = 9 + 5 * Math.cos(Math.PI * this._t / 300); this._y = this._realY = 7 + 5 * Math.sin(Math.PI * this._t / 300);

으로 하면 왼쪽에서 시작합니다(회전 속도와 시작점을 같게 할시)

추가로 이 방식의 이동경로 설정시 충돌판정이 나지 않습니다

자세한 사항은 해당 링크를 참조해 주세요(링크에 예제도 존재합니다)

답변자 왈 : 한 맵에 많이 쓰지는 말랍니다

많은 렉을 유발할 수 있으니

레벨계 스킬 사용법

프랑도르 — Sun, 26 Dec 2021 14:39:38 +0900

보통 파이널 판타지 시리즈를 보면 '레벨 5데스', '레벨 2 올드' 등의 기술이 있습니다.

이런 기술들의 특징을 보면 레벨 X의 배수일때 레벨 X 뒤에 붙어있는 기술이 발동됩니다.

이런 기술을 만드는 방법을 모르시는 분이 많은지 가끔씩 검색해보면 플러그인 등이 나와있더라고요.

그래서 저는 플러그인 안쓰고 고전적인 방식으로 써볼까 합니다.

예를 들면 레벨 7의 배수인 적을 즉사시키는 스킬을 만든다고 치면 계산식에 'if (b.level % 7 === 0) { b.die();0 } else { 0; }'을 붙여넣기 하시면 됩니다.

실제로 하면 정상적으로 되는데 그 구성요소를 뜯어보면

if - 만약에 ~라면

else - 아니면

b.level - 대상의 레벨

% 7 == 0 - 7로 나누었을 때 나머지가 0일때

b.die() - 대상 무조건 즉사(내성무시)

이므로 성공적으로 되는 것을 알 수 있습니다.

만약에 데미지를 주는 것이라면 b.die()'0이 아닌 데미지 공식을 넣어주면 되지요.

알아두면 아주 쓸모있는 스크립트 명령어 모음집

무명시절 — Sun, 27 Sep 2020 03:04:11 +0900

해외포럼을 뒤저가며 찾아낸 스크립트 명령어 입니다

다른 플러그인 없이 사용가능한 기본 명령어로

보다 확장된 효과를 써보세요

팝업창 띄우기
alert ('써넣을 대사');

(""필수)

다이렉트 로드
if(DataManager.loadGame(DataManager.lastAccessedSavefileId())) {
SceneManager._scene.fadeOutAll();
$gamePlayer.reserveTransfer($gameMap.mapId(), $gamePlayer.x, $gamePlayer.y);
$gamePlayer.requestMapReload();
SceneManager.goto(Scene_Map);
$gameSystem.onAfterLoad();
}

위 명령어는 마지막으로 세이브한 파일을 바로 불러오는 것이며

특정 파일을 불러오기 위해선(예시 1번 파일)

if(DataManager.loadGame(1)) {
SceneManager._scene.fadeOutAll();
$gamePlayer.reserveTransfer($gameMap.mapId(), $gamePlayer.x, $gamePlayer.y);
$gamePlayer.requestMapReload();
SceneManager.goto(Scene_Map);
$gameSystem.onAfterLoad();
}

로 입력해야함

제자리 걸음 애니메이션
$gamePlayer._stepAnime = true/false

말풍선 스크립트
this._character = //$gamePlayer;//$gameMap.event(ID);
this._character.requestBalloon(n);
this.setWaitMode('balloon'); //←대기

이벤트 우선순위 변경(
$gameMap.event(id).setPriorityType(priority)
this.setPriorityType(priority) //0:아래,1:동일,2:위

셀프스위치
var key = [mapId, eventId, 'A-D']
$gameSelfSwitches.setValue(key, true);

애니메이션 재생중 정지(이벤트가 1번인 경우)
var eventId = 1;
SceneManager._scene._spriteset._characterSprites.forEach(function(sprite) {
if (sprite._character instanceof Game_Event && sprite._character.eventId() === eventId) {
sprite._animationSprites.forEach(function(animation) {
animation.remove();
});
}
});

플레이어의 경우

SceneManager._scene._spriteset._characterSprites.forEach(function(sprite) {
if (sprite._character instanceof Game_Player) {
sprite._animationSprites.forEach(function(animation) {
animation.remove();
});
}
});

폅집창 어둡게하기

hurakan — Wed, 15 Jul 2020 19:00:14 +0900

이렇게 어둡게 어떻게 하나요?

RMMV 엔진 탐구 7회 - 간단한 자작 플러그인 만들기 (3)

해머맨 — Sun, 23 Feb 2020 10:54:39 +0900

[연재글 전체 목차 링크]

RMMV 엔진 탐구 7회 - 간단한 자작 플러그인 만들기 (3)

이번 회차에 자작 플러그인 만들기는 끝납니다.

지난 회차에서는 타이틀 화면 선택메뉴에 원하는 메뉴를 추가하는 것까지 진행했었고,

메뉴를 눌렀을때의 함수 처리 연결하는것까지도 해봤습니다.

하지만 실제로 메뉴를 눌렀을때, 화면이 멈추는 현상을 겪었을 것입니다.

그것은 이번 회차에 어떤 주제를 설명하기 위한 큰그림, 복선

...같은게 아니고 까먹은 부분입니다. 빠르게 설명하고 다음 작업으로 넘어가겠습니다.

1. 왜 [테스트] 메뉴를 선택하면 화면이 멈추나?

그 원인에 대해서는 직접 설명하는 방법도 좋겠지만, 이왕이니 디버깅하는 방법도

같이 정리해보려고 합니다. 사실 코딩하다보면 이런 식으로 자기 생각대로 안되는 일은

정말 비일비재합니다. 그리고 그런 상황이 닥쳤을때 디버깅을 제대로 할 수 있느냐 없느냐는

문제 해결에 있어서 그야말로 천지 수준의 차이를 보입니다.

어쨌든, 지난 회차에 우리는 [테스트] 메뉴에 아래와 같은 함수를 연결했었습니다.

 1
2
3
 Scene_Title.prototype.commandTest = function() {
 console.log("commandTest");
 };
Colored by Color Scripter
 cs 

이 코드의 의도는 무엇일까요? 메뉴를 눌렀을때, commandTest 함수가 제대로 호출되었는지

콘솔 로그로 확인하겠다는 의도였을 것입니다. 하지만 콘솔 로그는 제대로 찍히더라도,

그 이후 게임 조작이 멈춰버리면 치명적인 문제일수밖에 없습니다.

하지만 commandTest 함수 안에서는 그저 콘솔 로그 찍는 처리만 있습니다.

그럼 콘솔 로그 찍는게 잘못되었을까요? 그렇다기보다는 commandTest 함수 호출까지

진행되는 과정에서 뭔가 게임 조작을 멈추는 처리가 실행되었다고 보는게 더 타당할것입니다.

뭔가 게임 조작을 멈추는 처리가 실행되었다, 그런 가설을 가지고,

한번 디버깅을 진행해보겠습니다.

게임을 실행해서 F8, 혹은 F12를 눌러 크롬 개발자 도구를 실행합니다.

지난 4회에서는 콘솔 기능 위주로 소개해드렸지만, 굳이 개발도구(IDE)가 아니더라도

이 개발자 도구의 [Source] 탭에 가면 소스 코드 확인 및 간단한 디버깅은 가능합니다.

(물론 웹스톰 쓰고 계신 분들은 그걸로 디버깅하시면 됩니다)

지난 회차에 작성했던 TestTitlePlugin.js 파일로 이동해서,

commandTest 함수에 코드 옆 라인 번호를 클릭해서 중단점을 설정합니다.

그러면 [테스트] 메뉴를 선택했을때, 코드의 처리 진행이 중단점을 찍은 부분에서

정지합니다.

이 상태에서 오른쪽에 있는 호출 스택(Call Stack)을 확인해봅니다.

호출 스택이란, 중단점으로 설정한 곳에 이르기까지 호출된 함수들의 기록이 하나씩 쌓인 것이라고

이해하시면 되겠습니다. 호출 스택의 항목을 위에서부터 하나씩 클릭해보면, 코드 진행이

거쳐간 함수로 하나씩 이동합니다.

그렇게 타고타고 올라가다보면, Window_Selectable.prototype.processOk라는 함수에서

근본 원인을 찾을수 있습니다.

 1
2
3
4
5
6
7
8
9
10
 Window_Selectable.prototype.processOk = function() {
 if (this.isCurrentItemEnabled()) {
 this.playOkSound(); // OK 사운드 출력
 this.updateInputData(); // 입력 처리 업데이트
 this.deactivate(); // 윈도우 비활성화 처리
 this.callOkHandler(); // <--- 중단점
 } else {
 this.playBuzzerSound();
 }
};
Colored by Color Scripter
 cs 

Window_Selectable은 Window_TitleCommand의 부모 클래스입니다.

중단점 찍힌 부분 실행 이전에 deactivate 함수가 실행되었음을 알 수 있습니다. 이름에서도 알수 있듯이,

윈도우를 비활성화시키는 처리입니다. 따라서, 실제로는 게임 전체 조작이 막혔다기보다,

Window_TitleCommand가 비활성화 처리된것이라는 것입니다.

그럼 왜 [새 게임], [계속], [옵션]같은 메뉴는 이런 현상이 일어나지 않는걸까요.

[계속] 메뉴는 어떻게 되어있는지 한번 보겠습니다.

 1
2
3
4
 Scene_Title.prototype.commandContinue = function() {
 this._commandWindow.close();
 SceneManager.push(Scene_Load);
};
Colored by Color Scripter
 cs 

이걸로 수수께끼는 풀렸습니다.

아예 선택메뉴 윈도우(_commandWindow)를 close로 닫아버리고 새 씬(Scene_Load)을 push해서 열기 때문에,

앞서 비활성화 처리를 하더라도 문제가 되지 않았던 것입니다.

어쨌든, 바로 테스트용 새 씬(Scene)을 만들어주면 문제가 해결된다는 것을 알았습니다.

2. 테스트용 선택메뉴 윈도우(Window_TestPluginCommand) 만들기

이제부터는 [테스트] 메뉴 눌렀을때 표시해줄 새 씬(Scene)과 윈도우를 만들 것입니다.

다만 순서상 새 씬을 열어도 "뒤로가기"를 할 수 없으면 반복적인 테스트가 힘들 수 있으니,

선택메뉴 윈도우부터 먼저 만들어줍니다.

타이틀 화면(Scene_Title)의 선택메뉴 윈도우(Window_TitleCommand)가 가장 비슷하면서

간단한 구조로 되어 있으니 이것을 복붙해서 만들어봅니다.

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 function Window_TitleCommand() {
 this.initialize.apply(this, arguments);
}
 
Window_TitleCommand.prototype = Object.create(Window_Command.prototype);
Window_TitleCommand.prototype.constructor = Window_TitleCommand;
 
Window_TitleCommand.prototype.initialize = function() {
 Window_Command.prototype.initialize.call(this, 0, 0);
 this.updatePlacement();
 this.openness = 0;
 this.selectLast();
};
 
Window_TitleCommand._lastCommandSymbol = null;
 
Window_TitleCommand.initCommandPosition = function() {
 this._lastCommandSymbol = null;
};
 
Window_TitleCommand.prototype.windowWidth = function() {
 return 240;
};
 
Window_TitleCommand.prototype.updatePlacement = function() {
 this.x = (Graphics.boxWidth - this.width) / 2;
 this.y = Graphics.boxHeight - this.height - 96;
};
 
Window_TitleCommand.prototype.makeCommandList = function() {
 this.addCommand(TextManager.newGame, 'newGame');
 this.addCommand(TextManager.continue_, 'continue', this.isContinueEnabled());
 this.addCommand(TextManager.options, 'options');
};
 
Window_TitleCommand.prototype.isContinueEnabled = function() {
 return DataManager.isAnySavefileExists();
};
 
Window_TitleCommand.prototype.processOk = function() {
 Window_TitleCommand._lastCommandSymbol = this.currentSymbol();
 Window_Command.prototype.processOk.call(this);
};
 
Window_TitleCommand.prototype.selectLast = function() {
 if (Window_TitleCommand._lastCommandSymbol) {
 this.selectSymbol(Window_TitleCommand._lastCommandSymbol);
 } else if (this.isContinueEnabled()) {
 this.selectSymbol('continue');
 }
};
 
Colored by Color Scripter
 cs 

이게 Window_TitleCommand의 전체 코드인데, 여기서 필요없는것들을 소거법으로 제거해봅니다.

selectLast와 isContinueEnabled가 눈에 띕니다.

isConTinueEnabled는 세이브 파일이 있는지를 체크하는

함수이고, selectLast 함수는 세이브 파일이 있으면 [계속] 메뉴를 기본 선택, 혹은 이전에 선택한 메뉴가 있으면

그 메뉴를 자동 선택해주는 함수로 보입니다. 여기서는 필요없기 때문에 함수 정의와 사용하는 부분 모두 삭제할 것입니다.

selectLast 함수 안의 내용을 보면 _lastCommandSymbol을 검사하는 처리가 있습니다.

하지만 selectLast 함수도 지워졌으므로, 이것도 지워도 될것 같습니다.

initCommandPosition도 마찬가지입니다.

processOk도, lastCommandSymbol을 저장하는 것 빼고는 부모 클래스인 Window_Command의 처리를

그대로 쓰는 내용이므로, 여기선 지워줍니다.

그렇게 해서 지난 회차에 봤던대로, [테스트] 메뉴를 추가했을때의 요령으로 [나가기] 메뉴를 추가해주면

아래의 코드가 나옵니다.

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 //-----------------------------------------------------------------------------
// Window_TestPluginCommand
// The window for TestScene
 
function Window_TestPluginCommand() {
 this.initialize.apply(this, arguments);
}
 
Window_TestPluginCommand.prototype = Object.create(Window_Command.prototype);
Window_TestPluginCommand.prototype.constructor = Window_TestPluginCommand;
 
Window_TestPluginCommand.prototype.initialize = function() {
 Window_Command.prototype.initialize.call(this, 0, 0);
 this.updatePlacement();
 this.openness = 0;
};
 
Window_TestPluginCommand.prototype.windowWidth = function() {
 return 240;
};
 
Window_TestPluginCommand.prototype.updatePlacement = function() {
 this.x = (Graphics.boxWidth - this.width) / 2;
 this.y = Graphics.boxHeight - this.height - 300;
};
 
Window_TestPluginCommand.prototype.makeCommandList = function() {
 this.addCommand("나가기", 'back');
};
Colored by Color Scripter
 cs 

makeCommandList 안의 addCommand 함수의 인자로 뭘 넣었는지를 확인해보면,

둘쨰 인자로 'back'을 넣었습니다.

이제 이 인자를 새 씬(Scene)에서도 사용할 것입니다.

3. 테스트용 씬(Scene) 만들기

윈도우를 만들었으니, 이제 씬도 만들어봅니다.

마찬가지로 Scene_Title을 복붙해 가져와서, 필요없는 처리들을 소거법으로 삭제해봅니다.

이번엔 씬의 주요 실행 함수부터 하나씩 보면서 진행해보겠습니다.

 1
2
3
4
5
6
7
 Scene_Title.prototype.create = function() {
 Scene_Base.prototype.create.call(this);
 this.createBackground();
 this.createForeground();
 this.createWindowLayer();
 this.createCommandWindow();
};
Colored by Color Scripter
 cs 

특별한 이유가 없다면, 부모 클래스의 처리는 실행해주는 편이 좋습니다.

Scene_Base.prototype.create.call은 그래서 남겨두겠습니다.

createBackgorund, createForeground 함수는 필수적인 요소가 아니므로 지우겠습니다.

createWindowLayer 함수는 남겨둬야 합니다. 이것도 삭제하면 윈도우를 집어넣을 수 없습니다.

앞서 작성한 테스트용 윈도우를 넣어야 하므로 createCommandWindow 함수도 유지합니다.

 1
2
3
4
5
6
7
8
9
 Scene_Title.prototype.start = function() {
 Scene_Base.prototype.start.call(this);
 SceneManager.clearStack();
 this.centerSprite(this._backSprite1);
 this.centerSprite(this._backSprite2);
 this.playTitleMusic();
 this.startFadeIn(this.fadeSpeed(), false);
};
 
Colored by Color Scripter
 cs 

SceneManager.clearStack은 반드시 지워야 합니다. 이 함수는 이전 씬의 기록까지 다 지워버리는 것이고,

우리는 테스트 윈도우에서 [나가기] 버튼을 누르면 다시 타이틀 씬으로 돌아와야 하므로

테스트 씬에서의 start 처리로는 맞지 않습니다.

그 외에도 굳이 테스트 씬에서 필요한 처리는 없기 때문에, 테스트 씬은 start 함수를 굳이 재정의하지

않아도 된다는걸 알수 있습니다.

 1
2
3
4
5
6
7
8
9
10
11
12
 Scene_Title.prototype.update = function() {
 if (!this.isBusy()) {
 this._commandWindow.open();
 }
 Scene_Base.prototype.update.call(this);
};
 
Scene_Base.prototype.update = function() {
 this.updateFade();
 this.updateChildren();
};
 
Colored by Color Scripter
 cs 

update는 부모 클래스인 Scene_Base의 update 함수도 참고삼아 가져와봤습니다.

Scene_Title의 update는 isBusy 함수가 false이면 선택메뉴 윈도우를 open하는 처리를 실행합니다.

부모 클래스의 update에는 없는 처리이기 때문에, 이는 그대로 유지해줍니다.

이런 요령으로 필요한것, 필요없는것을 걸러내면 이런 씬이 생기게 됩니다.

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 //-----------------------------------------------------------------------------
// Scene_TestPlugin
 
function Scene_TestPlugin() {
 this.initialize.apply(this, arguments);
}
 
Scene_TestPlugin.prototype = Object.create(Scene_Base.prototype);
Scene_TestPlugin.prototype.constructor = Scene_TestPlugin;
 
Scene_TestPlugin.prototype.initialize = function() {
 Scene_Base.prototype.initialize.call(this);
};
 
Scene_TestPlugin.prototype.create = function() {
 Scene_Base.prototype.create.call(this);
 this.createWindowLayer();
 this.createCommandWindow();
};
 
Scene_TestPlugin.prototype.update = function() {
 if (!this.isBusy()) {
 this._commandWindow.open();
 }
 Scene_Base.prototype.update.call(this);
};
 
Scene_TestPlugin.prototype.isBusy = function() {
 return this._commandWindow.isClosing() || Scene_Base.prototype.isBusy.call(this);
};
 
Scene_TestPlugin.prototype.createCommandWindow = function() {
 this._commandWindow = new Window_TestPluginCommand();
 this._commandWindow.setHandler('back', this.commandBack.bind(this));
 this.addWindow(this._commandWindow);
};
 
Scene_TestPlugin.prototype.commandBack = function()
{
 console.log("commandBack");
 this._commandWindow.close();
 this.popScene();
};
 
Colored by Color Scripter
 cs 

이걸로 테스트 씬까지 작성 완료했습니다.

4. [테스트] 메뉴와 연결

이제 마지막 단계입니다. Scene_Title의 [테스트] 메뉴 처리 함수로 돌아가서

Scene_TestPlugin 씬을 넣어주는 처리를 추가합니다.

 1
2
3
4
5
 // New
 Scene_Title.prototype.commandTest = function() {
 this._commandWindow.close();
 SceneManager.push(Scene_TestPlugin);
 };
Colored by Color Scripter
 cs 

이걸로 모든 작업이 완료되었습니다.

[테스트] 메뉴를 눌렀을때 씬을 추가로 집어넣는 처리와,

[나가기] 메뉴를 눌렀을때 씬을 다시 빼는 처리를 한번 비교해보겠습니다.

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 // [테스트] 메뉴
Scene_Title.prototype.commandTest = function() {
 this._commandWindow.close();
 SceneManager.push(Scene_TestPlugin); // SceneManager에 Scene_TestPlugin 씬을 추가(push)
 };
 
// [나가기] 메뉴
Scene_TestPlugin.prototype.commandBack = function()
{
 console.log("commandBack");
 this._commandWindow.close();
 this.popScene();
};
 
Scene_Base.prototype.popScene = function() {
 SceneManager.pop(); // SceneManager에서 최근 씬을 꺼내기(pop)
};
 
Colored by Color Scripter
 cs 

[나가기] 메뉴를 눌렀을때는 씬의 함수인 popScene을 사용했지만, 이 내용도 확인해보면

결국 SceneManager에서 최근 실행중인 씬을 꺼내는 형식입니다.

이걸로 지난 회차에서 필요하다고 정의했던 것들은 모두 살펴보았습니다.

(1) 기존에 있는거

타이틀 화면 - Scene_Title

타이틀 화면 선택메뉴 윈도우 - Window_TitleWindow

다른 화면으로 전환하는 기능 - SceneManager.push

이전 화면으로 돌아가는 기능 - SceneManager.pop

(2) 기존 코드를 참고해서 새로 만들것

테스트 화면 - Scene_TestPlugin

테스트 화면의 [나가기] 메뉴만 있는 선택메뉴 윈도우 - Window_TestPluginCommand

이걸로 "간단한 자작 플러그인 만들기" 연재는 끝났습니다.

하지만 엔진 탐구 연재는 계속됩니다.

RMMV 엔진 탐구 6회 - 간단한 자작 플러그인 만들기 (2)

해머맨 — Sat, 22 Feb 2020 22:21:38 +0900

[연재글 전체 목차 링크]

RMMV 엔진 탐구 6회 - 간단한 자작 플러그인 만들기 (2)

5회, 즉 간단 플러그인 (1)에서는 서론이 좀 길었기 때문에, 이번부터는

과정 위주로다가 해서 빠르게 진행해보려고 합니다.

이번 회에서는

플러그인 파일을 새로 만들고 설정하는 방법,

플러그인 파일에서 기존 엔진코드의 재정의 방법과 관련된 기초 사항들,

타이틀 화면의 선택메뉴 윈도우에 새로운 메뉴를 추가하는 방법

을 정리해보려고 합니다.

1. 플러그인 파일(.js) 만들고 설정

(1) 파일 만들기

<웹스톰 사용자의 경우>

plugins 폴더 선택하고 우클릭 > New > JavaScript File

<그외 개발도구(IDE) 없는 경우>

그냥 plugins 폴더에 하나 직접 만드시면 됩니다.

음...MV 에디터에서 파일 만들어주는게 있지 않을까 싶어서 봤는데 없나보네요...있는데 못찾은건가?

우클릭 > 새로 만들기 > 텍스트 문서

.txt 확장자 말고 .js 확장자로 만들어주시면 되겠습니다.

파일 이름은 "TestTitlePlugin.js"로 하겠습니다.

(2) MV 에디터에서 해당 js 파일 활성화

플러그인 파일은 단지 plugins 폴더에 들어있다고 해서 실제 게임에 적용되지 않습니다.

MV 에디터에서 [플러그인 관리] 메뉴로 들어가서 직접 추가 및 상태 ON으로 만들어줘야 합니다.

이 [플러그인 관리]에서 설정한 데이터는 아래의 json 파일 형태로 저장됩니다.

<플러그인 관리 설정 저장 json 파일>

<해당 json 파일의 내용>

내용을 보시면, 전역 변수인 $plugins에, MV 에디터에서 직접 추가 설정한 스크립트와

그 이름, 상태 ON/OFF 여부("status") 등이 들어있습니다.

물론 MV 에디터의 [플러그인 관리]를 사용하지 않고도 그냥 이 파일의 내용을 수정해도 되긴 합니다.

다만 주석을 보면 아시겠지만, 잘못 수정해서 MV 에디터에서 파싱이 안되거나 할 수 있기 때문에 권장되지는 않습니다.

어쨌든 다시 본론으로 돌아오면,

[도구] > [픞러그인 관리]

새로 추가하는 경우이므로

밑에 공란을 두번 클릭

목록에 우리가 앞서 추가한 JavaScript 파일의 이름이 표시되므로, 선택합니다.

선택해도 아직 설명이나 도움말, 매개 변수같은 것에는 아무것도 뜨지 않습니다.

당연히 이제 막 추가한 터라 아무 내용도 변수도 없을 것입니다.

상태가 ON인것을 확인하고 [OK] 누르고, 적용합니다.

이제 MV 에디터에서 할일은 끝났습니다.

2. 스펙 복습

앞서 우리가 정했던 스펙을 다시 복습해봅시다.

(1) 타이틀 화면 선택메뉴 윈도우에 [테스트] 메뉴 추가

(2) [테스트] 메뉴를 선택하면 별도의 테스트 화면으로 전환하고 [나가기] 메뉴만 있는 선택메뉴 윈도우를 띄움

(3) [나가기] 메뉴를 선택하면 다시 타이틀 화면으로 돌아옴

이런 걸 만들기로 했고 필요한것들은 다음과 같았습니다.

(1) 기존에 있는거

타이틀 화면

타이틀 화면 선택메뉴 윈도우

다른 화면으로 전환하는 기능

이전 화면으로 돌아가는 기능

(2) 기존 코드를 참고해서 새로 만들것

테스트 화면

테스트 화면의 [나가기] 메뉴만 있는 선택메뉴 윈도우

그럼 어떤것부터 시작해야 할까요?

일단 (1) 기존에 있는거 중에서, 타이틀 화면 선택메뉴 윈도우를 수정해

[테스트] 메뉴를 추가하는것부터 시작해봅시다.

3. 플러그인에서 기존 엔진 코드를 재정의(Override)하는 패턴

그 전에, 기본으로 제공되는 다른 플러그인에서 보여지는,

플러그인에서 기존 엕진 코드를 재정의하는 패턴 2가지에 대해 짚고 넘어가겠습니다.

(1) 플러그인은 어떻게 기존 엔진 코드를 "덮어쓸 수 있는가"

이는 플러그인이 적용되는 순서와 연관이 있습니다.

index.html의 내용을 다시 살펴보면 알수 있지만, 순정 상태에서 적용 순서는 대략 아래와 같습니다.

PIXI 등 라이브러리 코드 > RMMV 게임 엔진 코드 > 플러그인 "전역변수" 생성(plugins.js) > 메인(main.js)

plugins.js에서 "덮어쓰는 것"이 아닙니다. 이쪽은 어디까지나 $plugins라는 "전역변수"를 생성합니다.

주목해야 할 부분은 메인(main.js)의 아래 코드입니다.

 1
 PluginManager.setup($plugins);
 cs 

$plugins "전역변수"를 인자로 받는 setup이라는 함수 안에서, $plugins "전역변수" 안에 있는

그 데이터 순서대로 매개변수와 스크립트를 로드합니다.

이런 순서로 인해, 플러그인은 게임 엔진코드보다 항상 나중에 적용되는 것이며,

플러그인은 이전에 정의된 함수나 클래스의 정의를 "덮어쓸 수" 있습니다.

(2) (function () { ....... }());

기본 제공되는 플러그인 파일들을 보면 대부분 이러한 기법으로 재정의 코드를 감싸고 있습니다.

보기 요상한 형태로 부제를 적었지만, 공통적으로 위의 "........." 안에 재정의 코드가 들어가곤 합니다.

하나씩 꺼풀을 벗겨보면, 가장 외곽의 괄호를 떼어보면

function () { ........... } ();

가 됩니다.

아직도 요상하다 생각된다면, 이렇게 생각해볼까요.

 1
2
3
4
5
 function TestFunciton() {
 console.log("hahaha");
};
 
TestFunction();
 cs 

TestFunction 함수를 정의하고, 바로 실행한 코드입니다.

이 코드는, 함수에 이름이 없다는 점을 제외하면 아래 코드와 동작이 동일합니다.

 1
2
3
 (function () {
 console.log("hahaha");
}());
 cs 

"즉시 실행 함수" 라는 것입니다. 세부 내용을 더 알고싶으시면 구글링을 해보시면 되겠습니다만,

굳이 이런 기법을 쓰는것은 몇가지 이유가 있겠습니다.

1) 이름을 정의하면 전역함수로 정의되며, 나중에 다른 곳에서 실수로라도 다시 호출될 가능성이 있다.

플러그인의 재정의 코드는 그 용도를 고려하면 1번만 실행되는게 맞다.

2) 사람들이 일일이 다 이름을 정의하면 다른 플러그인을 붙여넣었을 경우 함수 이름 충돌이 발생할수 있으므로

플러그인의 사용 용도를 고려하면 그런 상황을 방지하는게 맞다.

3) 재정의 코드가 복잡해서 따로 변수 할당이 필요한 경우, 즉시 실행 함수 안에서 할당하면

지역 변수로 할당되어 다른 곳에서 참조할수 없다.

그러므로 기존 엔진코드를 재정의하는 경우에는 즉시 실행 함수 형태로 감싸서 작업을 진행하는게 맞겠습니다.

(3) 재정의 패턴 1 : 완전히 새로 정의

설명을 길게 붙일 부분은 아니고, 그냥 기존 엔진코드에서 새로 내용을 다시 쓰고 싶은 부분 찾아서

복붙해서 원하는 내용으로 바꿔쓰는 것입니다.

예시) SceneMaange.preferableRendererType

원본은 rpg_manager.js에 있습니다.

 1
2
3
4
5
6
7
8
9
 SceneManager.preferableRendererType = function() {
 if (Utils.isOptionValid('canvas')) {
 return 'canvas';
 } else if (Utils.isOptionValid('webgl')) {
 return 'webgl';
 } else {
 return 'auto';
 }
};
Colored by Color Scripter
 cs 

하지만 Community_Basic.js라는 플러그인에서 이 내용을 재정의하고 있습니다.

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 (function() {
 
 // 앞부분 생략
 
 // 매개변수(Parameter) 불러오기
 var renderingMode = parameters['renderingMode'].toLowerCase();
 
 SceneManager.preferableRendererType = function() {
 if (Utils.isOptionValid('canvas')) {
 return 'canvas';
 } else if (Utils.isOptionValid('webgl')) {
 return 'webgl';
 } else if (renderingMode === 'canvas') {
 return 'canvas';
 } else if (renderingMode === 'webgl') {
 return 'webgl';
 } else {
 return 'auto';
 }
 };
 
})();
Colored by Color Scripter
 cs 

보면 플러그인 데이터에서 설정한 매개변수(renderingMode)의 내용을 불러와서,

원본은 그냥 'auto'가 설정될수도 있는 부분을, 몇가지 조건을 더 붙여서

'canvas'나 'webgl'을 반환할수 있도록 새로 정의한 부분입니다.

별로 길게 설명붙일 부분은 아니라 넘깁니다.

(4) 재정의 패턴 2 : 원본 처리를 그대로 두고서 덧붙이기

하지만 이렇게 완전 새로 정의하는것 말고, 기존 처리는 그대로 두고서 우리가 원하는 몇가지만

덧붙이고 싶은 경우도 있을 것입니다. 물론 기존 처리 코드가 짧으면 그대로 복붙해서 덧붙여도 되겠지만,

만약 기존 처리 코드가 몇십, 몇백줄 이상이라면? 그야 그대로 복붙해도 동작은 그대로 할 것이지만

실수로 기존 코드를 건드릴수도 있고, 추가하고자 하는 코드에 집중하지 못할수도 있습니다.

그래서 이런식으로 처리합니다.

예시) Scene_Boot.prototype.loadSystemImages

원본은 rpg_scenes.js에 있습니다.

 1
2
3
 Scene_Boot.prototype.loadSystemWindowImage = function() {
 ImageManager.reserveSystem('Window');
};
Colored by Color Scripter
 cs 

그리고 MadeWithMV.js, 즉 타이틀화면 이전에 스플래쉬 이미지 화면 플러그인에서

재정의해주고 있습니다.

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 (function() {
 
 // 앞부분 생략
 
 var _Scene_Boot_loadSystemImages = Scene_Boot.prototype.loadSystemImages;
 Scene_Boot.prototype.loadSystemImages = function() {
 _Scene_Boot_loadSystemImages.call(this);
 if (Liquidize.MadeWithMV.ShowMV) {
 ImageManager.loadSystem(Liquidize.MadeWithMV.MVImage);
 }
 if (Liquidize.MadeWithMV.ShowCustom) {
 ImageManager.loadSystem(Liquidize.MadeWithMV.CustomImage);
 }
 };
 
 // 뒷부분 생략
 
})();
Colored by Color Scripter
 cs 

기존 처리는 즉시실행 함수 안의 지역변수(_Scene_Boot_loadSystemImages)에 넣어두고,

실제 loadSystemImages 함수를 재정의할때, _Scene_Boot_loadSystemImages.call로

기존 처리에 대한 내용도 실행되게 해놓은 부분입니다. 그리고 그 뒤로는 새로 추가되는 내용들이죠.

4. [테스트] 메뉴 추가

자, 그렇게 해서 이제 타이틀 화면의 선택메뉴에 [테스트] 메뉴를 추가할 배경지식 설명이 끝났습니다.

이제 추가해보려고 합니다.

우선 타이틀 화면은 Scene_Title이라는 이름으로,

타이틀 화면의 선택메뉴 윈도우는 Window_TitleCommand라는 이름으로 정의되어 있습니다.

(1) Scene_Title 분석

먼저 Scene_Title을 살펴볼까요. RMMV에 있는 Scene들은 게임 진행중 객체가 생성될때

기본적으로 Scene의 아래 함수들이 순서대로 호출됩니다.

initialize > create > start > update (이후 update 반복 호출)

이중에서 현재 우리가 주목해야 할 부분은 create 함수입니다. 내용을 한번 살펴보겠습니다.

 1
2
3
4
5
6
7
 Scene_Title.prototype.create = function() {
 Scene_Base.prototype.create.call(this);
 this.createBackground();
 this.createForeground();
 this.createWindowLayer();
 this.createCommandWindow();
};
Colored by Color Scripter
 cs 

이름에서 유추할 수 있듯이, createCommandWindow가 선택메뉴 윋도우를 생성하는 부분이겠군요.

 1
2
3
4
5
6
7
 Scene_Title.prototype.createCommandWindow = function() {
 this._commandWindow = new Window_TitleCommand();
 this._commandWindow.setHandler('newGame', this.commandNewGame.bind(this));
 this._commandWindow.setHandler('continue', this.commandContinue.bind(this));
 this._commandWindow.setHandler('options', this.commandOptions.bind(this));
 this.addWindow(this._commandWindow);
};
Colored by Color Scripter
 cs 

더 들어가지 않고, 여기서 맥락만 유추해 본다면, setHandler가 우리가 원하는 그

[테스트] 메뉴를 추가하는것과 연관이 있음을 짐작해볼수 있습니다.

인자로 두개가 들어가는데, 하나는 문자열, 다른 하나는 Scene의 멤버함수입니다.

'newGame' 버튼을 누르면 commandNewGame 함수를 호출하라고 설정하는 함수일것이라 짐작됩니다.

하지만 걸리는 부분이 있지요. 실제 우리가 게임을 실행하면 'newGame'이란 문자열은 나오지 않습니다.

메뉴 이름은 "새 게임"이지요. 그러므로 메뉴 이름을 설정하는 부분은 따로 있습니다.

하지만 [테스트] 버튼을 눌렀을떄의 함수 처리로 Scene_Title 안의 멤버함수를 [테스트]용으로 새로 추가해야 한다는것,

우리가 재정의해야 할 대상이 createCommandWindow라는 것도 알았습니다. 이정도면 충분하겠습니다.

(2) Window_TitleCommand 분석

이번에는 선택메뉴 윈도우 쪽입니다. 멤버함수들을 쭉 둘러보면서, Scene_Title에서 못찾았던 조각,

즉 "새 게임" 같이 버튼 이름을 추가하는 부분이 어디일지를 찾아야 할 것입니다.

 1
2
3
4
5
 Window_TitleCommand.prototype.makeCommandList = function() {
 this.addCommand(TextManager.newGame, 'newGame');
 this.addCommand(TextManager.continue_, 'continue', this.isContinueEnabled());
 this.addCommand(TextManager.options, 'options');
};
Colored by Color Scripter
 cs 

그리고 찾았습니다.

TextManager는 게임에서 사용되는 각종 문자열 텍스트들의 관리자이고, $dataSystem이라는 전역변수와

연결되어 있습니다. 어쨌든, addCommand라는 함수가 버튼 추가와 관련있는 함수일 것입니다.

인자는 첫째로 텍스트, 둘째는 Scene_Title에서 봤던 setHandler 함수의 인자에서 동일한 것을 보았습니다.

아마 이 둘째 인자가 Scene_Title에서의 setHandler 함수 처리와 연관이 있을 것입니다.

셋째 인자가 무엇인지는 지금 중요하지 않으므로 넘어가겠습니다.

(3) 플러그인에 재정의 작업

이걸로 재정의해야 할 대상은 모두 찾았다고 볼수 있겠습니다.

이제 이를 조합해 실제 작업을 진행하면 아래와 같이 됩니다.

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 //------------------------------
// Test Title Plugin
//------------------------------
// Scene_Title Override
(function() {
 
 // Override
 var _origin_Function_ = Scene_Title.prototype.createCommandWindow;
 Scene_Title.prototype.createCommandWindow = function()
 {
 _origin_Function_.call(this);
 this._commandWindow.setHandler('test', this.commandTest.bind(this));
 };
 
 // New
 Scene_Title.prototype.commandTest = function() {
 console.log("commandTest");
 };
}());
 
//-----------------------------------------------------------------------------
// Window_TitleCommand Override
 
(function() {
 
 // Override
 var _origin_Function_ = Window_TitleCommand.prototype.makeCommandList;
 Window_TitleCommand.prototype.makeCommandList = function() {
 this.addCommand("테스트", 'test');
 _origin_Function_.call(this);
 };
}());
Colored by Color Scripter
 cs 

코드가 얼마 되지 않기 때문에 한꺼번에 놨습니다.

Scene_Title의 createCommandWindow를 재정의하고,

commandTest라는 함수를 새로 정의하여 setHandler로 연결했습니다.

commandTest 함수 안에는 아직 내용이 없습니다. 아직 버튼을 눌렀을때의

처리에 필요한 것들이 갖춰져 있지 않기 때문입니다.

Window_TitleCommand에서는 [테스트] 버튼을 addCommand로 추가했습니다.

_origin_Function_을 뒤에 놔서 호출한것은, [테스트] 버튼을 맨앞으로 놓기 위해서입니다.

맨뒤에 놓을거면 호출 순서가 바뀌어야 겠지요?

이렇게 해서 메뉴 추가까지 진행했습니다.

다음 회에서는 새로운 씬의 정의와 새로운 선택메뉴 윈도우의 정의까지 진행해보려고 합니다.

RMMV 엔진 탐구 5회 - 간단한 자작 플러그인 만들기 (1)

해머맨 — Fri, 21 Feb 2020 20:27:23 +0900

[연재글 전체 목차 링크]

RMMV 엔진탐구 5회 - 간단한 자작 플러그인 만들기 (1)

너무 게임 엔진 외적인 요소들만 얘기하는것도 뭣하니, 이쯤에서 슬슬

엔진 순정 상태에서 간단한 플러그인 하나 만드는걸 정리해서

구색을 갖춰보기로 했습니다. 이걸 한 다음에는 아마 PIXI 쪽 얘기를

하게 될거 같은데, 어쨌든 점점 화제가 떨어져가네요 와하하하하하하하하.

1. 서문

그럼 "간단한" "자작" 플러그인으로 뭘 만들건지를 생각해봅시다.

당연히 거창한걸 만들기는 힘들고, 가장 간단하고 단순한 스펙으로

엔진 기능들을 시험해볼수 있는 공간을 만들어봅시다.

(1) 타이틀 화면 선택메뉴 윈도우에 [테스트] 메뉴 추가

(2) [테스트] 메뉴를 선택하면 별도의 테스트 화면으로 전환하고 [나가기] 메뉴만 있는 선택메뉴 윈도우를 띄움

(3) [나가기] 메뉴를 선택하면 다시 타이틀 화면으로 돌아옴

이런 스펙으로 한번 진행해볼까요.

여 작업으로 배워볼수 있는건 이런 것들이 있겠네요.

(1) Scene과 Window의 기초적인 이해

(2) 엔진 코드의 객체와 함수를 재정의하는 방법

(3) 기존 엔진 코드를 활용해 커스텀한 플러그인을 만드는 기초 작업 절차

2. 뭘 복붙할까?

앞서 언급했는지 모르겠는데, 저는 JavaScript를 보기 시작한지 얼마 안되고

함수형 언어이면서 객체 지향도 지원하는 JavaScript의 객체 구현 방식에 대해서

아직 이해 불능인 부분들도 있는 상황입니다.

간단히 말해 전 이걸 0에서부터 새로 짤 생각이 없다는 얘기입니다.

그렇기 때문에 기존에 잘 돌아가고 있는 엔진 코드에서 갖다 쓸만한 부분들을

복붙해 가져와서 커스텀, 즉 "재정의(Override)"하는 것부터 시작할겁니다.

그럼 뭘 복붙할까요? 스펙을 다시 생각해보면서, 기존 엔진의 뭐가

이와 비슷하게 돌아가는지를 생각해봅니다.

(1) 타이틀 화면 선택메뉴 윈도우에 [테스트] 메뉴 추가

- 타이틀 화면과 선택메뉴 윈도우는 이미 기본 제공되고 있지요.

(2) [테스트] 메뉴를 선택하면 별도의 테스트 화면으로 전환하고 [나가기] 메뉴만 있는 선택메뉴 윈도우를 띄움

- "계속" 메뉴같이 파일 로드 화면으로 전환하는 기능이 이와 비슷하게 기본 제공되고 있지요.

- 다만 [나가기] 메뉴만 있는 선택메뉴 윈도우는 없지요

(3) [나가기] 메뉴를 선택하면 다시 타이틀 화면으로 돌아옴

- 파일 로드 화면에서 별도의 [나가기] 메뉴는 없지만,

[ESC] 버튼 눌러서 이전 화면으로 돌아가는 건 있지요.

기존 엔진 기능에 없어서 새로 구현해야 하는 것은 없는것 같습니다.

다만 (3)번의 [나가기] 선택메뉴 윈도우는 기존 코드를 참고해서 따로 만들긴 해야 할거 같군요.

그럼 기존 코드를 복붙해서 적절하게 조합하는것으로 스펙대로 구현할수 있다는 거겠죠?

정리하자면

(1) 기존에 있는거

타이틀 화면

타이틀 화면 선택메뉴 윈도우

다른 화면으로 전환하는 기능

이전 화면으로 돌아가는 기능

(2) 기존 코드를 참고해서 새로 만들것

테스트 화면

테스트 화면의 [나가기] 메뉴만 있는 선택메뉴 윈도우

이것들을 조합해서 아래와 같은 결과물을 만들어봅시다.

이번엔 안하고 다음 회에서 자세히 들어가겠습니다.

3. "그냥 엔진 코드를 수정해서 쓰면 되는거 아닌가요?"

애당초 "플러그인"이라는 구조를 따로 만든 이유에 대해서도 의문을 가질수 있기 때문에

한번 짚고 넘어가보도록 하겠습니다. 물론 MV 부터는 내부 엔진 코드가 숨겨져 있지 않고

JS 파일로 다 공개되어 있기 때문에, 엔진 코드에 대해 잘 알고 있는 분은

플러그인으로 파일 따로 뺄 거 없이 그냥 직접 수정해서 써도 될 것입니다.

근데 그때부터는 수정한 사람 본인이 스스로 대처해야 하는 상황들이 대폭 늘어납니다.

왜냐면 MV 커뮤니티에서 질문을 받거나 하는 분들 입장에서는 질문자가

엔진 코드는 일단 그대로 두고 "플러그인" 구조에 플러그인을 추가하다가 문제가

발생했다는걸 전제로 깔고서 해결 방법을 생각하기 마련이니까요.

"제가 엔진 코드의 무슨줄 무슨줄을 직접 이러저러하게 수정해서 쓰고 있어요"

라고 수정 사항들을 일일이 다 공유하면서 질문해버리면 질문받는 사람도 골치아프겠죠.

그냥 "무슨무슨 플러그인을 어떻게어떻게 쓰다가 이런 문제가 발생했습니다" 이래놓으면

질문받는 사람 입장에서도 현상 재현 환경 세팅하기도 편하고, 상호 이해도 빨라서

보다 정확하고 신속한 문제 해결을 기대해볼수 있습니다.

그것도 있고, 수많은 플러그인이 그러하듯이 그냥 사용자가 다운받아서

플러그인 폴더에 갖다 붙이고 쓰면 굳이 엔진 코드를 직접 수정해야 할 이유도 없는거고.

어쨌든 다음회에서 좀더 자세히 들어가보겠습니다.

RMMV 엔진 탐구 4회 - 크롬 개발자 도구의 사용

해머맨 — Fri, 21 Feb 2020 01:39:35 +0900

RMMV 엔진 탐구 4회 - 크롬 개발자 도구

이번 연재글에서는 RMMV에서 기본 제공하는 기능인 개발자 도구에 대해

그 기능들 중 유용해보이는 것들에 대해 정리해보려고 합니다.

사실 개발 도구(IDE)로 선택한 웹스톰에서 자체적으로 해결할수 있으면

굳이 알아볼 필요도 없었겠지만, 유감스럽게도 웹스톰에서 디버그 실행시

콘솔 로그가 제대로 찍히지 않는 문제가 있습니다.

결국 이 개발자 도구와 병행해서 개발을 하게 되는군요.

근데 이 도구, 파면 팔수록 유용한 기능이 많다는것을 알수 있었습니다.

1. 서문

제목에 있다시피, 정식 명칭은 크롬 개발자 도구(Chrome Developer Tools)이고,

만약 웹 브라우저로 크롬을 쓰고 계신다면, F12를 눌러서 나오는 그 개발자 도구와

동일한 부분입니다.

다만 크롬 버젼에 따른 차이는 있을 수 있겠습니다. 크롬 버젼은 개발자 도구의

콘솔(Console) 창에서 이걸 입력하면 확인할 수 있습니다.

이것은 방금 크롬에서 F12 눌러서 콘솔 창에 입력한 결과입니다.

제 크롬 웹브라우저의 크롬 버젼은 Chrome 80.0이네요.

그럼 RMMV에서 F12 (F8일수도 있습니다)를 눌러서 콘솔 창에 입력한 결과입니다.

RMMV의 크롬 버젼은 Chrome 65.0이네요.

각자 다를수도 있으니 시험삼아 한번 쳐봐도 되겠군요.

어쨌든, 여기서 제가 모든 기능을 다 설명하진 않을 것이고, 정식으로 심화 기능을

확인하고 싶으면 역시 구글에서 제공하는 정식 문서를 확인하는것이 제일 정확합니다.

정식 문서는 개발자 도구의 우측 상단의 (...) 버튼을 눌러 나오는 Help > Documentation으로

열수 있습니다.

2. Console 창

제가 이번 연재의 주제로 개발자 도구를 택한 가장 큰 이유입니다.

단순히 콘솔 로그 확인 창으로 쓸 생각이었는데, 생각보다 유용한 기능들이 많아 하나씩 정리해봅니다.

단순한 콘솔창이라기보다, 파이썬 같은 언어에서 보이는 대화형 인터프리터 즈음인거 같은데

여기서는 디버깅 작업에 자주 쓰일만한 것들을 정리합니다.

(1) clear()

입력하면 콘솔 창 내용을 깨끗이 지우는 함수입니다.

사실 완전히 꺠끗하게 지워지지는 않습니다. clear 함수가 실행되면서 콘솔 창 내용은 지우는데

그 반환값에 대한 정보가 콘솔 창에 다시 찍히기 때문입니다.

완전히 깨끗하게 지우는것은 단축키 Ctrl + L로 기능 제공되고 있습니다.

(아니면 마우스 우클릭 > Clear Console)

(2) console.log("텍스트")

이것도 한번 콘솔창에 직접 입력해봅시다.

입력 후 그 아래 2개가 표시되는데, "Hello world"가 console.log 함수의 실행으로 인한 결과,

undefined가 console.log 함수의 반환값이거나, 반환값이 없어서 undefined로 표시됐거나 그런 식이겠군요.

아무튼 이 콘솔 로그 표시 함수는, 실제 콘솔창에서 직접 쓰기보다는,

(1) 실시간으로 변화되는 값의 확인

(2) 실시간으로 함수 호출 유무 혹은 타이밍 확인

(3) 예외상황이 발생했을 경우의 확인

등등의 용도로 코드의 필요한 부분에 직접 넣어주는게 맞는 사용법이겠지요.

가령 예를들면

<코드에 직접 입력 - SceneManager.run 함수 안에서>

<게임 시작 후 콘솔 창>

이런 식으로, 무슨 파일의 몇행에서 찍혔다 까지 나오는군요.

호출 스택까지는 안나온다는게 약간 아쉽긴 합니다.

호출 스택까지 나오는 console.trace 함수가 있긴 합니다만,

써봐도 어떤게 정확한 용법인지 잘 구분이 안되더군요. 아예 안나오든지, 엄청 깊게 스택이 들어가든지.

물론 console.log의 인자로 하나만 넣을수 있는건 아니고,

console.log(인자1, 인자2, 인자3...) 이런식으로 여러개를 넣어 표시할수도 있습니다.

<예시2>

<실제 콘솔창 - 뭐 이렇게 많이 찍혀...>

Scene_Boot, Scene_Splash 옆의 화살표가 뭔지 궁금하면, 한번 클릭해보면 답이 나옵니다.

앞서 예시2에서 두번째 인자는 name이라는 문자열 변수를 출력하도록 넣었지만,

세번째 인자로는 scene 객체 그 자체를 넣었기 때문에, 화살표를 클릭하면 로그가 찍힌 그 당시의

객체의 데이터를 볼수 있다는 것이겠죠.

이런식으로 말입니다.

(3) console.warn, console.error, console.table ... 콘솔 로그 함수의 여러가지 종류

콘솔 로그 출력 함수의 종류는 console.log만 있는것이 아닙니다. 다양한 형태로

표기할 수 있도록 다양한 함수가 준비되어 있습니다.

가장 자주 쓰게 될 종류는 역시 console.warn과 console.error겠지요.

경고 로그와 에러 로그.를 표시하는 종류인데, 이는 콘솔 창 좌측의 필터 기능을 통해

경고 로그만, 혹은 에러 로그만 확인할수 있기 때문에 유용합니다.

(4) 조사식

콘솔 창이 대화형 인터프리터 형식으로 되어 있기에 가능한 유용한 기능 첫번째입니다.

콘솔 창에 내용을 알고싶은 변수명을 입력하면 그 내용을 보여줍니다.

가령 이런 식으로, 게임의 씬(Scene)을 관리하는 SceneManager가 들고 있는

현재 씬 변수의 정보를 표시하거나,

TextManager의 actorDamage라는 문자열 변수의 내용을 표시할수 있습니다.

(5) 함수 실행

콘솔 창이 대화형 인터프리터 형식으로 되어 있기에 가능한 유용한 기능 두번째입니다.

변수의 내용 뿐만 아니라, 함수를 직접 실행시킬 수도 있습니다.

한번 아래의 내용을 콘솔에 입력해서, 어떤 일이 일어나는지 보는것도 재미있겠습니다.

(6) 함수의 정의 및 실행

콘솔 창이 대화형 인터프리터 형식으로 되어 있기에 가능한 유용한 기능 세번째입니다.

만약 단순히 변수의 내용 확인, 함수의 실행만이 아니라, 좀더 복잡한 디버깅 처리가

필요하다면, 바로 콘솔창에서 함수를 정의해서 실행할수 있습니다.

이상으로 크롬 개발자 도구의 사용에 대해 정리해봤습니다.

물론 개발자 도구에는 이 이외에도 소스를 직접 보고 간단한 중단점 체크도 가능한

Sources 탭도 있고, 다양한 기능들이 있는데, 저는 앞서 말한 콘솔 창 기능들을 쓰기 위해

개발자 도구를 사용할 것이기 때문에, 주요 기능을 공유드렸습니다.

자세한 내용은 앞서 말한 공식 Documentation을 참고해서 스스로 찾아 공부하시면 되겠죠?

RMMV 엔진 탐구 3회 - 프로젝트 폴더/파일의 구조

해머맨 — Sun, 16 Feb 2020 08:54:44 +0900

RMMV 엔진 탐구 3회 - 프로젝트 폴더/파일의 구조

서문 이전에는 잡다한 이야기를 좀 하면서 시작하려고 하는데

이번에 말씀드릴건 잡다한 이야기가 아닙니다.

1,2회까지 진행하고 실제로 웹스톰으로 디버깅을 해보려니까

한가지 문제가 있다는것을 확인했습니다.

처음 실행시 디버깅 중단점이 한번에 걸리지 않는 구간이 있다는 점입니다.

특히 main.js의, 프로그램 도입부분이 그렇습니다.

PluginManager 초기 설정이나, SceneManager.run 구간 말입니다.

일정 구간 이후로는 처음 실행시에도 중단점이 걸리는것 같습니다만

아무튼 원인은 확인 중이고, 임시적인 해결책은 찾았습니다.

실행창을 한번 F5 눌러서 새로고침해서 재실행할때는 중단점이 걸립니다.

프로그램 도입부분을 디버깅하고 싶으시면 이렇게 하든가

아니면 원인을 찾아 해결하든가 하면 되겠네요.

1. 서문

1,2회에서는 개발 도구(IDE)의 세팅을 진행했습니다.

이번에는 프로젝트 폴더 및 파일의 구조를 살펴보며, 대충 어떤식으로 프로젝트가

세팅되어 있는지를 확인했습니다.

RMMV는 HTML5와 JavaScript를 기반으로 엔진이 짜여져 있기 때문에

제일 먼저 살펴봐야 할 부분은 프로젝트의 루트 폴더에 있는 index.html이 되겠습니다.

게임을 HTML5로 Export할 경우 이 파일이 실행의 시작점이 될 것이기 때문입니다.

2. index.html

시작점인 index.html 입니다.

코드가 짧기 때문에, 한번에 긁어서 살펴봅시다.

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 <!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 <meta name="viewport" content="user-scalable=no">
 <link rel="icon" href="icon/icon.png" type="image/png">
 <link rel="apple-touch-icon" href="icon/icon.png">
 <link rel="stylesheet" type="text/css" href="fonts/gamefont.css">
 <title>Project1</title>
 </head>
 <body style="background-color: white">
 <script type="text/javascript" src="js/libs/pixi.js"></script>
 <script type="text/javascript" src="js/libs/pixi-tilemap.js"></script>
 <script type="text/javascript" src="js/libs/pixi-picture.js"></script>
 <script type="text/javascript" src="js/libs/fpsmeter.js"></script>
 <script type="text/javascript" src="js/libs/lz-string.js"></script>
 <script type="text/javascript" src="js/libs/iphone-inline-video.browser.js"></script>
 <script type="text/javascript" src="js/rpg_core.js"></script>
 <script type="text/javascript" src="js/rpg_managers.js"></script>
 <script type="text/javascript" src="js/rpg_objects.js"></script>
 <script type="text/javascript" src="js/rpg_scenes.js"></script>
 <script type="text/javascript" src="js/rpg_sprites.js"></script>
 <script type="text/javascript" src="js/rpg_windows.js"></script>
 <script type="text/javascript" src="js/plugins.js"></script>
 <script type="text/javascript" src="js/main.js"></script>
 </body>
</html>
 
Colored by Color Scripter
 cs 

아마 주석을 제외하면, 프로젝트를 처음 만들면 기본은 이런 형식으로 제공될 것입니다.

필요없는 부분은 간단하게만 설명하고 넘어가겠습니다.

<!DOCTYPE html> : HTML5의 거의 공통된 시작 부분입니다.

<head> </head> : 해당 HTML5 문서의 전체적인 설정을 위한 부분입니다. (문자 셋은 UTF-8을 쓰겠다, CSS는 뭘 쓰겠다, 타이틀 등등)

중요한 것은 <body> </body> 부분이 되겠습니다.

우선 <body style="background-color: black">에서 background-color는 이름 그대로, 게임을 HTML5 형식으로

Export해서 웹상에서 그대로 실행했을때, 게임 화면을 제외한 배경 부분의 색깔을 지정합니다.

배경이 검은색인게 싫다면 이 부분을 다른 색으로 바꾸면 되겠지요.

물론 앱 형태로 Export하실 분들에게는 상관없는것이고, 되려 black이 아니라 다른걸 쓰는게 더 이상하기 때문에

그대로 두는것이 좋을것 같습니다.

중요한 것은 그 다음입니다.

body 내부에서는 JavaScript 파일의 포함과 실행 순서에 대해 정의하고 있습니다.

웹사이트용이었다면 여기에 표시할 텍스트나 이미지 등등이 들어가 있어야 할 부분입니다.

어쨌든, 위에서부터 순서대로 진행된다고 생각해주시면 되겠습니다.

실제로 저 파일들의 아무곳에나 하나씩 중단점을 찍고 실행해보면, 딱 이 순서대로

중단점이 걸리는것을 알수 있습니다.

(제가 왜 서문 앞에서 중단점 얘기를 먼저 했는지 이제 아시겠지요? ㅎㅎ)

반대로 말하자면, 이 index.html에서 포함과 실행 순서가 정의되어 있지 않은 js파일은,

별도의 방법으로 런타임에 포함시키지 않는한 실제 실행에서 자동으로 포함되지 않는다는 것입니다.

플러그인에 들어가는 파일들이 바로 이 "별도의 방법"을 사용해 포함시키는 경우에 해당합니다.

그렇기 때문에, 만약 지금 정의되어 있는 js 파일 이외에 다른 js파일을 집어넣고 실행하고 싶다고 하면,

그냥 프로젝트의 js 폴더에 넣는것으로 자동 포함되는 것이 아니라,

이 index.html에서 다른 js 파일들과 마찬가지로 정의를 해줘야 제대로 포함되겠지요.

이 파일에서 알수 있는 것은 여기까지입니다.

3. 프로젝트 폴더와 JS 파일들

그럼 이제 JS 파일들을 살펴봅시다.

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <script type="text/javascript" src="js/libs/pixi.js"></script>
 <script type="text/javascript" src="js/libs/pixi-tilemap.js"></script>
 <script type="text/javascript" src="js/libs/pixi-picture.js"></script>
 <script type="text/javascript" src="js/libs/fpsmeter.js"></script>
 <script type="text/javascript" src="js/libs/lz-string.js"></script>
 <script type="text/javascript" src="js/libs/iphone-inline-video.browser.js"></script>
 <script type="text/javascript" src="js/rpg_core.js"></script>
 <script type="text/javascript" src="js/rpg_managers.js"></script>
 <script type="text/javascript" src="js/rpg_objects.js"></script>
 <script type="text/javascript" src="js/rpg_scenes.js"></script>
 <script type="text/javascript" src="js/rpg_sprites.js"></script>
 <script type="text/javascript" src="js/rpg_windows.js"></script>
 <script type="text/javascript" src="js/plugins.js"></script>
 <script type="text/javascript" src="js/main.js"></script>
 cs 

공통적으로 js 폴더 안쪽에 있다는것을 알수 있습니다.

아마 규약으로 정해진 것은 아닐 것입니다. 굳이 js 폴더가 아니더라도 경로 자체는

루트 폴더 내 다른 폴더에서 끌고온다 해도 실행에는 문제가 없을것 같습니다.

다만 지금 이 부분에는 없지만, js/plugins 폴더에 들어가는 js 파일들은

RMMV 에디터의 플러그인 관리에서 직접 끌어다 쓰는 상황 같기 때문에,

이 부분은 규약이 있다고 봐야 할 것입니다.

(1) PIXI

어쨌든, 중요한 부분들을 위주로 살펴보자면, libs 안에 있는 pixi가 있겠습니다.

pixi는 "PixiJS"라는 WEBGL 기반 2D JavaScript Renderer 라이브러리이고, 크로스플랫폼 용으로 제작되었다

라고 PixiJS 측 문서에 설명되어 있습니다. RMMV의 경우 v.4.5.4 버젼을 쓰고 있습니다.

해당 버젼에 대한 API 문서는 아래 링크를 참고해주시면 되겠습니다.

(https://pixijs.download/v4.5.4/docs/index.html)

어쨌든, 기반 라이브러리를 RMMV 자체가 아니고 공유된 라이브러리를 사용하고 있는 중이고,

pxi.js, pixi-tilemap.js, pixi-picture.js가 이 라이브러리에 해당하는 파일이겠습니다.

fpsmeter, lz-string, iphone 어쩌구는 중요 부분이 아닌듯하니 넘어가겠습니다.

(2) RMMV 부분

libs 밖으로 나와보면 "rpg_" 접두사가 붙은 파일들과 plugins.js, 그리고 main.js가 있는데

이게 RMMV의 엔진 코드들이 되겠습니다.

용도별로 나뉜것을 알 수 있는데, 하나씩 살펴보면

rpg_core.js : PIXI 라이브러리를 상속해 래핑한 클래스, 입력 처리 등 게임 기반이 되는 것들 모음

rpg_manager.js : SceneManager, PluginManager, BattleManager 등 Manager 모음

rpg_objects.js : Game_Actor, Game_Variables 등 Game 오브젝트 관련 모음

rpg_scenes.js : Scene_Title, Scene_Map 등 Scene 오브젝트 관련 모음

rpg_sprite.js : Sprite_Weapon, Spriteset_Map 등 Sprite 관련 모음

rpg_windows.js : Window_Status, Window_TitleCommand 등 Window 관련 모음

main.js : 실질적인 게임 도입부. SceneManager.run.

주의할 부분은 plugins.js에는 단 한가지 전역변수만 선언되어 있으며,

게다가 이 plugins.js 파일은 구조를 직접 변경하면 안됩니다.

RMMV 에디터의 플러그인 관리 UI에서 이 파일을 갖다 파싱해서 보여주기 때문입니다.

플러그인 관리 UI에서 변경사항을 저장할때도 이 파일의 내용이 변경됩니다.

따라서 경로를 바꿔서도 안되고 직접 수정해서도 안되는 파일입니다.

RMMV 엔진 탐구 2회 - RMMV의 NW.js 버젼과 에러해결

해머맨 — Sat, 15 Feb 2020 10:47:06 +0900

RMMV 엔진 탐구 2회 - RMMV의 NW.js 버젼과 에러

회차(1회, 2회...)를 붙이고 있는데, 아무 의미가 없습니다.

이 글은 아무 계획없이 쓰는 저의 비정기 연재입니다.

2회에서 끝날수도 있고, 9999회까지 갈수도 있습니다.

1. 서문

1회에서 통합 개발 도구(IDE)로서 웹스톰을 선택한 얘기까지 진행했고,

그 과정에서 NW.js의 SDK 버젼을 다운받아 압축을 풀은것까지도 진행했습니다.

하지만 중요한 것이 빠져 있었는데,

RMMV도 플레이 테스트 시 NW.js를 사용한다는 것이었습니다.

그리고 그 NW.js의 버젼은 최신 버젼과 다소 차이가 있습니다.

그렇기 때문에, 웹스톰을 통해 실행할 경우 최신 NW.js가 실행되어 버리기 때문에,

이후에는 RMMV에서 플레이 테스트를 시도하면 아래와 같은 에러가 표시됩니다.

("프로필 오류가 발생했습니다.")

이번 회에서는 이 오류의 해결법에 대해 기록하고자 합니다.

2. RMMV의 NW.js 버젼은 어떻게 알수 있는가

웹스톰에서 최신 NW.js를 실행한 것이 원인이기 때문에, 웹스톰에서 사용중인 NW.js의 버젼을

RMMV의 NW.js 버젼으로 맞추는것이 중요합니다. 그렇다면 RMMV의 NW.js 버젼은 대체

어떻게 알 수 있을까요?

방법은 이렇습니다.

(1) RMMV의 플레이 테스트 실행.

(2) F8(혹은 F12)을 눌러 디버깅 창(크롬 개발자 도구)을 오픈.

(3) 상단 메뉴에서 [Console] 탭을 선택.

(4) Console 창에 "process.versions"를 입력. (process.version 과 헛갈리지 말것)

(5) Console 창에 나타난 "process.versions"의 내부 변수 중에

"node-webkit " 을 확인

이로서 현재 자신이 쓰고 있는 RMMV가 어떤 NW.js 버젼을 써서 동작하고 있는지를 알수 있습니다.

<결과>

3. 캐싱된 이전 데이터를 삭제하자

RMMV의 NW.js 버젼은 알았으나, 해결책을 실행하기 전에, 먼저 캐싱된 이전 데이터를 삭제해줘야 합니다.

아래는 윈도우 10을 기준으로 작성했습니다.

방법

(1) C:\Users\(사용자 이름)\AppData\Local 폴더에 nwjs 폴더가 있다면 삭제

(2) C:\Users\(사용자 이름)\AppData\Local\KADOKAWA\RPGMV\User Data\Default 폴더에

Web Data 및 Web Data-journal 파일 삭제

(3) C:\Users\(사용자 이름)\AppData\Local\User Data\Default 폴더에

Web Data 및 Web Data-journal 파일 삭제

4. RMMV의 NW.js 버젼의 SDK를 다운받아 설치

https://dl.nwjs.io/

위의 링크로 들어가서 앞서 과정에서 파악한 NW.js의 SDK 버젼 압축 파일을 다운받고,

(본인의 경우 nwjs-sdk-v0.29.4-win-x64 입니다)

드라이브의 적절한 곳에 압축을 풀어줍니다.

위의 링크가 작동하지 않는다면, NW.js 홈페이지에서 Downloads 란을 클릭,

그리고 [Previous releases]를 찾아보도록 합니다.

5. 웹스톰의 Run Configuration에서 최신 NW.js 말고 다른 NW.js를 설정

설정법은 1회에서 적어놨습니다.

(https://avangs.info/study_rpg_mv/1801840)

RMMV 엔진 탐구 1회 - 개발 도구 (IDE)

해머맨 — Sat, 15 Feb 2020 00:24:08 +0900

[RMMV] RMMV 엔진 탐구 - 개발 도구 (IDE)

1. 서문

RPG MAKER MV부터는 기반이 되는 엔진 코드들이 전부 HTML5 및 자바스크립트 형식으로

공개되어 있기 때문에, 엔진 단계에서부터 마음에 안드는 부분이 있으면 직접 커스텀할 수 있는

여지가 늘어났습니다.

저는 VX 때 Ruby를 공부해가며 Window를 커스텀하는것에서부터 코딩을 시작했었는데,

그때는 중요한 기반 코드들은 내부로 숨겨져 있어서, 믿을거라곤 번역도 덜된

도움말의 도큐먼트 정도만 있었더랬습니다. 지금은 상황이 많이 나아진 것이라고 할수 있겠습니다.

Ruby와 비교하면 HTML5, JavaScript는 상당히 메이저한 언어이기 때문입니다.

메이저한 언어이기 때문에, 당연히 그에 대한 개발 도구도 제대로 갖춰져 있습니다.

JavaScript의 경우, 통계상으로 봤을때

1위 : Visual Studio Code(마이크로소프트 사)

2위, 3위 : Atom, WebStorm(JetBrain 사)

이렇다는 것을 본 것 같습니다. 아톰이 2위인지 웹스톰이 2위인지는 잘 기억이 안납니다.

어차피 Atom은 써보지도 않았으니 어느쪽이든 상관없겠지요.

아무튼 이 3가지 중에서, Visual Studio Code(이하 VSCode)와 WebStorm(이하 웹스톰)으로

기초적인 개발 환경을 구축해본 경험을 공유합니다.

결론부터 말씀드리면, 웹스톰을 최종 선택했습니다.

그리고 저는 지난주부터 HTML5, JavaScript에 손대기 시작한 사람이기 때문에

이들 언어와 관련해서 말하는것들중에는 상식과 어긋난게 있을수 있는데

어차피 탐구이고, 가르치려 드는것이 아니라 경험의 공유이므로

나중에 다시 봐서 틀린게 보이면 아무때나 아무렇게나 수정하고 그러겠습니다.

2. VSCode로 개발 환경 구축

[디버깅 방법]

(1) VSCode를 설치히고 실행한다 (구글에서 검색)

(2) Extensions로 Debugger for Chrome을 설치한다.

(3) VSCode로 [폴더 열기]를 실행해서 RMMV 프로젝트 루트 폴더(index.html이 있는 폴더)를 지정해 열어준다.

(4) [디버깅 시작 (단축키 F5)]를 눌러 디버깅을 실행한다.

(5) 누르면 Chrome을 선택하는 메뉴가 나오는데 선택한다.

그러면 루트 폴더 아래에 [.vscode] 폴더와 함께 launch.json 파일이 생성된다.

이 파일 내용을 다음과 같이 수정한다

(해당 파일이 없으면 메모장이든 뭐든 아무튼 파일을 직접 만들것. 확장자는 .json으로)

// 아래 내용대로 그대로 복붙할것.

{

"version": "0.2.0",

"configurations": [

{

"name": "Launch",

"type": "chrome",

"request": "launch",

"file": "${workspaceRoot}/index.html",

"runtimeArgs": [

"--allow-file-access-from-files",

"--remote-debugging-port=9222",

"--autoplay-policy=no-user-gesture-required"

]

}

]

}

// 여기까지.

(6) 다시 F5 눌러서 디버깅 실행.

이런 절차로 실행하면, RMMV를 실행해 [플레이 테스트]를 하지 않고도

VSCode에서 직접 게임을 실행 및 디버깅을 할수 있습니다.

[유용한 기능]

(1) F12 : 함수나 변수에 커서를 갖다 대고 누르면 함수나 변수의 정의 부분으로 이동할 수 있습니다.

(2) Shift + Alt + F12 : js 파일 내에서 함수나 변수를 사용하고 있는 부분을 목록으로 보여줍니다.

(3) Ctrl + Shift + F : 프로젝트 안에 있는 js 파일, html 파일 등을 대상으로 문자열 검색을 실행합니다.

[좋은점]

공짜입니다.

빠르...다고 인터넷에 나와있는데 솔직히 이건 모르겠습니다.

[안좋은점]

치명적인 단점이 있습니다.

F12로 정의 부분으로 이동할때, 다른 파일에 있거나 프로토타입으로 정의한 부분(.prototype) 등일때

제대로 작동하지 않는다는 점.

특히, RMMV의 Scene이나 Window, 게임 오브젝트들은 대부분 프로토타입을 애용하고 있기 때문에

부모 클래스에 해당하는 함수 쪽으로 추적이 불가능하면 코드 파악에 상당히 애를 먹을 수밖에 없습니다.

물론 전체 문자열 검색(Ctrl + Shift + F)이라는 대처방안도 있지만, 자식 클래스에서 재정의라도 해버린

경우에는 되게 애매하지 않나요?

솔직히 이 기능이 안먹는다면 개발도구로 적극적으로 쓰기엔 심각하게 하자가 있다고 생각합니다.

대안을 찾는다고 구글링을 해봤고, TypeScript로 막 뭔가를 정의해서 하면 된다, JSDoc을 쓰면 된다

뭐 그런 식으로 답변이 있길래 해봤는데 죄다 쓸모없거나 구린 방식들이더군요.

이 단점을 해결할 방법이 있으면 VSCode가 참으로 괜찮은 선택지겠습니다. 어쨌든 공짜이고

그 외에는 필요한 기능들 대부분 다 있으니까요.

3. 웹스톰으로 개발 환경 구축

[디버깅 방법]

(1) WebStorm을 설치하고 실행한다.

(2) NW.js의 SDK 버젼 (zip 파일)을 다운받고 적절한 곳에 압축을 풀어준다.

(3) RMMV 프로젝트 루트 폴더(index.html이 있는 폴더)에

package.json 파일을 다음과 같이 수정한다

(해당 파일이 없으면 메모장이든 뭐든 아무튼 파일을 직접 만들것. 확장자는 .json으로)

(본인도 구글링해서 찾은 방법이지만...이제보니 (3)은 굳이 안해도 될거 같긴 함.)

{

"name": "KADOKAWA/RPGMV",

"main": "index.html",

"js-flags": "--expose-gc",

"window": {

"title": "",

"toolbar": false,

"width": 816,

"height": 624,

"icon": "icon/icon.png"

}

(4) WebStorm의 [Run] > [Edit Configuration]을 선택한다

(5) 좌측 상단에 [+]를 눌러서 NW.js를 선택한다. NW.js로 디버깅 실행을 할것이므로.

(6) 설정 항목에 이렇게 입력한다

Name : 게임 이름 원하는대로

NW.js app : RMMV 프로젝트 루트 롤더

Working directory : RMMV 프로젝트 루트 폴더

NW.js interpreter : NW.js의 SDK 버젼 압축을 푼 폴더의 안에 있는 nw.exe 선택

<설정의 예시>

(7) OK를 눌러 설정이 끝났으면, [Run] > [Run (게임 이름)]을 클릭한다.

디버깅을 원하면 [Run] > [Debug (게임 이름)]을 클릭한다.

[유용한 기능]

(1) Ctrl + B : 함수나 변수에 커서를 갖다 대고 누르면 함수나 변수의 정의 부분으로 이동할 수 있습니다.

(2) Alt + F7 : 함수나 변수를 사용하고 있는 부분을 목록으로 보여줍니다.

(3) Ctrl + Shift + F : 프로젝트 안에 있는 js 파일, html 파일 등을 대상으로 문자열 검색을 실행합니다.

[좋은점]

앞서 말한 VSCode의 치명적인 단점을, WebStorm에서는 겪지 않아도 됩니다.

다른 js 파일이거나 프로토타입을 통해 정의된 함수들 모두 추적 가능합니다.

[안좋은점]

공짜가 아닙니다. 물론 학생 무료 라이센스가 있는듯한데

전 개인용으로 한달에 6달러씩을 내는 옵션으로 결제했습니다.

물론 30일 체험판으로 해보실수 있습니다.

4. 결론

VSCode : 공짜. 부모 쪽 프로토타입으로 정의된 함수는 추적 불가. 그외 기능은 준수.

웹스톰 : 월별 지불 비용 있음. 기능은 아주 좋음.

앞서 언급한 VSCode의 단점을 극복할수 있다면 당연히 VSCode를 쓰는게 맞는거 같네요.

전 속편하게 웹스톰 씁니다.

<웹스톰으로 직접 프로젝트 Run시킨 스크린샷>

다중 선택 스킬 만드는 방법

팽이트위즈P — Thu, 16 Jan 2020 16:50:03 +0900

2022.06.21. 수정: 다중 선택 스킬 예시 동영상 첨부, 스크립트 주석 첨부

2023.03.18. 공지: Zevia, ST0RMTiger 님의 Select Multiple Target v3.0 플러그인 이용을 권장합니다.

Select Multiple Targets, v3.0 - Select Multiple Different Targets and divide Damage between Targets | RPG Maker Forums (rpgmakerweb.com)

들어가기에 앞서

기존의 MV내 시스템에서는 스킬 및 아이템들의 범위를 일정 수의 적들로 지정할 때, 플레이어가 직접 선택하는 것이 아닌 랜덤으로밖에 설정할 수 없었습니다.

따라서 이를 해결하기 위해 다음 플러그인을 찾아보았습니다만,

https://forums.rpgmakerweb.com/index.php?threads/select-multiple-targets-v2-0-1.104341/

다른 범위 지정(특히 '모든 적')들과의 양립이 원활하지 않았습니다.

이에 저는 직접 스크립트와 이벤트를 짬으로써 해결했습니다.

만드는 법

다중 선택 스킬을 만들기 위해서는 다음 플러그인들 중 한쪽이 필수적으로 요구될 수 있습니다.

YEP_MessageCore + YEP_X_ExtMesPack1 http://www.yanfly.moe/wiki/Extended_Message_Pack_1
HIME_LargeChoices http://himeworks.com/2015/10/large-choices-mv/ [어떤 적 군단의 멤버수가 6 이상일 시]

다중 선택 스킬을 만들기 위해서는 다음 플러그인의 사용이 권장됩니다.

YEP_BaseTroopEvents http://www.yanfly.moe/wiki/Base_Troop_Events_(YEP) [중복 삽입 회피 목적] / 공통이벤트로 대체 가능

게임 내에 도발 시스템이 존재하는 경우 다음 플러그인들이 요구됩니다.

YEP_Taunt http://www.yanfly.moe/wiki/Taunt_(YEP)
YEP_BuffsStatesCore http://www.yanfly.moe/wiki/Buffs_%26_States_Core_(YEP) [StateCategories플러그인 호환]
YEP_X_StateCategories http://www.yanfly.moe/wiki/State_Categories_(YEP) [게임 내 도발 스킬이 여러개인 경우]

모두 갖추셨다면 다음과 같이 만드시면 됩니다.

1. 스위치 설정

총 13개의 스위치가 필요합니다. 기본 12개, 스킬별 1개입니다.

위와 같은 형식으로 알아보기 쉽게 만들어 주십시오. 예로 '바람의 흐름'이란 스킬 제작을 들겠습니다. '바람의 흐름'이란 스킬명을 대신하여 만들고자하는 스킬을 '지정 스킬'이라 부르겠습니다.

2. 전투 이벤트 설정

YEP_BaseTroopEvents에서 Base Troop ID로 설정한 전투 이벤트의 한 페이지를 다음과 같이 설정해 주십시오.

3. 지정 스킬 설정

'지정 스킬'을 사용 시 피격자에게 임의의 상태이상[순번 종료 시, 지속 순번 횟수: 1~1]이 걸리도록 만들고, 임의의 공통이벤트가 실행되도록 만드십시오. 그리고 이 '지정 스킬'과 그 작용이 완전히 같은 스킬을 복사하여 하나 만들되, 위에서 지정한 임의의 공통 이벤트가 실행되지 않도록 만드십시오. [지정 스킬 1,2번 사진 참조]

4. 변수 설정

총 3개의 변수가 필요합니다. 알아보기 쉽게 다음과 같이 설정해 주십시오.

5. 공통 이벤트 설정

'지정 스킬' 사용 시 실행되도록 한 공통 이벤트를 스킬의 타격 유형 등을 고려해 다음과 같이 설정하되, [전투 행위 강제] 이벤트를 만들 때 전투 행동으로 지정할 스킬을 복사본으로 설정하십시오.

6. 도발 설정

각각의 도발 상태이상을 타격 유형에 따라 카테고리로 묶어 분류하십시오.

7. 스크립트 삽입

다음 스크립트를 '스킬의 타격 유형'과 '스위치 및 변수 변호'를 고려해 수정한 후, 위에서 설정한 전투 이벤트 내의 조건 분기 안에 삽입하십시오.

 1
2
3
4
5
6
7
8
9
10
11
12
 var exist = []; var Sw = $gameSwitches; var Var = $gameVariables; // exist 배열 정의; 스위치와 변수 입력 간단화
for (var i = 0; i < $gameTroop.members().length; i++) { var foe = $gameTroop.members()[i]; // 적 군단의 수만큼 3행 반복 시행
 if (foe.isAlive()) { exist.push(i); // 해당 적이 스킬의 범위에 속하는가 여부를 설정하는 지점. 만약 현재 활동 중인 적을 대상으로 하는 스킬(만)이 아니라면 그에 맞추어 코드를 수정해야 함.
 } }; for (var j = 0; j < exist.length; j++) { var quarter = exist[j]; var extract = $gameTroop.members()[quarter] // 스킬 범위에 속하는 적의 수만큼 4행~12행 반복 시행
 if (extract.isStateAffected(Var.value(214))) { // 스킬에 이미 한 번 적중되었는가 여부. 이미 적중되었다면 행동 취소. 
 } else { var count = 0; // 스킬에 적중되지 않았을 경우의 분기
 for (var k = 0; k < exist.length; k++) { var element = exist[k]; var provoke = $gameTroop.members()[element]; // 스킬 범위에 속하는 적의 수만큼 7행~12행 반복 시행
 if (provoke.isStateCategoryAffected('물리도발')) { count += 1; // 스킬 범위에 속하는 어떤 적이 도발 상태인지 확인
 if (extract.isStateCategoryAffected('물리도발')) { var media = 90 + quarter; // 그 적이 해당 적인지 확인. 동일하다면 해당 적의 인덱스 번호를 참조해 그를 지정하기 위한 스위치 번호 저장
 Sw.setValue(media, true); } // 해당 적을 스위치를 통해 지정.
 } }; Var.setValue(213, count); if (Var.value(213) === 0) { var media = 90 + quarter; // 만약 해당 적이 아닌 다른 적이 도발 상태(1)라면 행동 취소. 어떤 적도 도발 상태가 아니(0)라면 해당 적의 인덱스 번호를 참조해 그를 지정하기 위한 스위치 번호 저장
 Sw.setValue(media, true);} } }; // 해당 적을 스위치를 통해 지정.
Colored by Color Scripter
 cs 

만약 도발이 필요치 않은 경우 위 스크립트의 6번째 줄의 'var'에서부터 11번째 줄의 '{' 까지, 그리고 12번째 줄의 '};'를 지우고, 끝에 ';'을 하나 더 붙여서 사용해 주십시오.

8. 순회 설정

위의 전투 이벤트에서 스크립트를 삽입했던 조건 분기 밑에 다음 이벤트를 '지정 스킬과 관련한 스위치와 공통이벤트의 번호'를 고려해 수정한 후 삽입해 주십시오.

마치며

이번에 제가 소개해드린 다중 선택 스킬 제작 방법이 RPG Maker를 다루시는 분들께 조금이나마 도움이 되었으면 좋겠습니다. 제작 과정 중 궁금하신 사항이 있으시면 댓글을 달아주십시오. 위 스크립트는 CC0이므로 자유롭게 사용해 주세요.

실제 다중 선택 스킬이 어떻게 구현되는지는 다음을 참조해 주십시오.