作者:Mandarava(鳗驼螺)
微博:@鳗驼螺pro
本文的目标
本文将通过写一个改变游戏屏幕尺寸的插件来说说怎样写一个RPG Maker MV插件,本文涉及插件参数的定义、插件指令的实现与调用。该插件将要实现的功能包括:
1. 设定游戏屏幕的默认尺寸(在游戏启动时自动使用);
2. 在游戏中,玩家通过与NPC交互,更改游戏屏幕尺寸;
注:本插件所说的游戏屏幕尺寸指游戏显示区的尺寸大小(不包括游戏窗口的边框、标题栏等等这些部分),本插件只会改变窗口大小,不会造成游戏中可视范围的增加或缩小,实际效果就等同于缩放游戏窗口。好吧,我承认这插件没什么用(因为RMMV的游戏窗口本来就能缩放),不过,没关系,本文的目标不是做一个有用的插件,而是学习如何写一个能用的插件。
新建一个名为 MND_ChangeScreenSize.js 的Javascript文件,并放到游戏项目的 js/plugins 目录下。在RMMV的插件管理中安装该插件。
插件的注释与定义参数
插件参数在注释中定义,如下面的代码。有效的插件注释要用/*:
开头,冒号之后可以加不同的语言代号(如:en)表示不同的语言版本。用@param
声明一个参数,参数名为Screen width
,@desc
用于描述该参数的作用,下面一句 默认值: 816
实际这段话还是 @desc
描述的一部份,只是换了一行,条理些。所以这段注释定义了二个参数:Screen width
和 Screen height
,分别对应于要设定的游戏屏幕的宽度和高度。另外,可以用@plugindesc
来简要描述插件的功能,用@author
来声明插件作者。
/*:
* @plugindesc 随时随地更改游戏屏幕尺寸
* @author: Mandarava(鳗驼螺)
*
* @param Screen width
* @desc 游戏启动时游戏屏幕的宽度
* 默认值:816
* @default 816
*
* @param Screen height
* @desc 游戏启动时游戏屏幕的高度
* 默认值:624
* @default 624
*/
读取插件参数
插件安装后,用户(指使用插件的游戏开发者)会对插件进行配置。本插件可提供用户设置的参数就是 Screen width
和 Screen height
。这里就要先获取用户配置的参数值,方法如下:
var params = PluginManager.parameters("MND_ChangeScreenSize");
var screenWidth = Number(params["Screen width"]) || 816;
var screenHeight = Number(params["Screen height"]) || 624;
-
PluginManager.parameters
方法使用的参数是插件的文件名(不带扩展名),所以插件的文件名一般不要修改;该方法得到的params
是一个字典对象,存储了所有参数的键值对。 - 使用
params[参数名]
的方式获取参数值,如params["Screen width"]
用来获取用户配置的Screen width
参数值,也就是要设置的游戏屏幕的宽度,同理params["Screen height"]
得到的就是用户设置的游戏屏幕的高度。 -
Number(params["Screen width"]) || 816
对取得的参数进行数值转换,如果转换失败,则使用默认的816,高度默认的则是624。
更改游戏屏幕尺寸
将用于修改游戏屏幕尺寸的代码封装为setScreenSize()
方法,该方法可以根据游戏显示区的大小缩放游戏窗口,代码如下:
function setScreenSize(screenWidth, screenHeight){
var deltaWidth = screenWidth - window.innerWidth;
var deltaHeight = screenHeight - window.innerHeight;
window.moveBy(- deltaWidth / 2, - deltaHeight / 2);
window.resizeBy(deltaWidth, deltaHeight);
}
前面已经获得了用户设置的尺寸参数,所以使用下面的方法就可以实现在游戏启动时自动更改为用户配置的游戏屏幕尺寸:
setScreenSize(screenWidth, screenHeight);
到这里,目标一完成,整个代码如下:
/*:
* @plugindesc 随时随地更改游戏屏幕尺寸
* @author: Mandarava(鳗驼螺)
*
* @param Screen width
* @desc 游戏启动时游戏屏幕的宽度
* 默认值:816
* @default 816
*
* @param Screen height
* @desc 游戏启动时游戏屏幕的高度
* 默认值:624
* @default 624
*/
var params = PluginManager.parameters("MND_ChangeScreenSize");
var screenWidth = Number(params["Screen width"]) || 816;
var screenHeight = Number(params["Screen height"]) || 624;
setScreenSize(screenWidth, screenHeight);
function setScreenSize(screenWidth, screenHeight){
var deltaWidth = screenWidth - window.innerWidth;
var deltaHeight = screenHeight - window.innerHeight;
window.moveBy(- deltaWidth / 2, - deltaHeight / 2);
window.resizeBy(deltaWidth, deltaHeight);
}
插件指令的实现
插件指令,即在事件编辑器中由 事件指令 - 插件指令 调用的指令,指令调用后插件就要对指令进行处理。要处理插件指令,就要重写 Game_Interpreter.prototype.pluginCommand
方法。
我们这里允许使用二个插件指令:
1. ChangeScreenSize 1024 768
:表示更改游戏屏幕尺寸为1024 x 768(具体数值可按需修改),这个指令中,ChangeScreenSize
是指令名称,1024
是指令的第1个参数(索引为0),意指尺寸宽度,768
是第2个参数(索引为1),意指尺寸高度。
2. RestoreScreenSize
:恢复为默认尺寸(也就是 816 x 624),这个指令没有参数。
在下面的代码中,别名 _Game_Interpreter_pluginCommand
主要用于在重写时调用原始方法。command
是调用的指令名,通过switch
来判断要处理哪个指令。对于 ChangeScreenSize
指令,因为它有二个参数,所以使用 args[0]
和 args[1]
来读取参数。最后调用 setScreenSize(screenWidth, screenHeight)
方法来改变窗口大小。
var _Game_Interpreter_pluginCommand = Game_Interpreter.prototype.pluginCommand;
Game_Interpreter.prototype.pluginCommand = function(command, args){
_Game_Interpreter_pluginCommand.call(this, command, args);
switch(command){
case "ChangeScreenSize":
var _screenWidth = Number(args[0]) || 816;
var _screenHeight = Number(args[1]) || 624;
setScreenSize(_screenWidth, _screenHeight);
break;
case "RestoreScreenSize":
setScreenSize(816, 624);
break;
default: break;
}
}
到这里,目标二完成,整个代码如下:
/*:
* @plugindesc 随时随地更改游戏屏幕尺寸
* @author: Mandarava(鳗驼螺)
*
* @param Screen width
* @desc 游戏启动时游戏屏幕的宽度
* 默认值:816
* @default 816
*
* @param Screen height
* @desc 游戏启动时游戏屏幕的高度
* 默认值:624
* @default 624
*
* @help
* 插件命令:
* ChangeScreenSize 1024 768 #修改分辨率为1024x768
* RestoreScreenSize #恢复为默认分辨率
*/
var params = PluginManager.parameters("MND_ChangeScreenSize");
var screenWidth = Number(params["Screen width"]) || 816;
var screenHeight = Number(params["Screen height"]) || 624;
setScreenSize(screenWidth, screenHeight);
var _Game_Interpreter_pluginCommand = Game_Interpreter.prototype.pluginCommand;
Game_Interpreter.prototype.pluginCommand = function(command, args){
_Game_Interpreter_pluginCommand.call(this, command, args);
switch(command){
case "ChangeScreenSize":
var _screenWidth = Number(args[0]) || 816;
var _screenHeight = Number(args[1]) || 624;
setScreenSize(_screenWidth, _screenHeight);
break;
case "RestoreScreenSize":
setScreenSize(816, 624);
break;
default: break;
}
}
function setScreenSize(screenWidth, screenHeight){
var deltaWidth = screenWidth - window.innerWidth;
var deltaHeight = screenHeight - window.innerHeight;
window.moveBy(- deltaWidth / 2, - deltaHeight / 2);
window.resizeBy(deltaWidth, deltaHeight);
}
这里,在注释部份增加了一个 @help
部份,该标记用于显示插件的帮助内容,方便用户了解如何使用该插件。
在游戏中调用插件指令
添加一个NPC事件,编辑其事件代码如下图:
Event.png
这样,玩家与该NPC对话后就会弹出一个游戏屏幕尺寸菜单,选择相应菜单就可以更改游戏屏幕的尺寸了。
demo.png
最后,这里 有一个最终完成并优化的版本,除了包含本文中所说的功能外,还增加了游戏开启时自动全屏、全屏非全屏切换等功能。对于游戏全屏切换与Graphics
类的以下三个方法有关:
-
Graphics._requestFullScreen
:进入全屏 -
Graphics._cancelFullScreen
:退出全屏 -
Graphics._switchFullScreen
:全屏、非全屏切换(实际是根据Graphics._isFullScreen
检测当前是否全屏,再调用上面二个方法实现切换的)
by: Mandarava(鳗驼螺) 2017.06.14
网友评论