青い記憶

RMMV脚本教程——菜单美化（二）

写在前面

时隔不到一年半，高考完的我终于决定继续研究MV的脚本，然后写教程啦…
之前的教程（下面参考资料有文章链接）发布在Project1（原6R）论坛上，之前的坑还是会慢慢填完的，现在再开个新坑！
这次来美化一下菜单！
首先放一下先行图：

注意事项

本教程的灵感来自于【渣作品】RGSS3教程（二）菜单的美化【2013.8.2-16:40完结】，不如说是该教程直接翻译成的MV版本。
因为作者特别的菜，所以教程中难免会有一些小（致命）的错误，请大家原谅，另外请大家不吝赐教。
教程中会用到的参考资料：

RMMV的中文F1文档：http://miaowm5.github.io/RMMV-F1/
汪汪大佬的RMMV原生脚本注释的中文翻译：https://github.com/wangwangxingao/RMMV/tree/master/%E6%B3%A8%E9%87%8A
我之前未写完烂尾的教程：[教程]RMMV脚本教程（一），[教程]RMMV脚本教程（二）
RMVA的F1帮助文档汉化版：https://rpg.blue/thread-369922-1-1.html
其中F1和翻译都可以在github上下载到，大家珂以先下载，方便查看。

本教程同步发布于Project1论坛，我的博客xjzsq.xyz（未更新…）和ConanKaito论坛的RMMV板块:RMMV脚本教程——菜单美化（一）

正文

上次说到哪了…
对，这次我们要来改造右边显示角色简要信息的窗口了！

美化角色状态窗口

首先，我们还是要分析这个窗口是在哪里定义的。
在Scene_Menu中搜索“状态”，发现如下脚本：

/**创建状态窗口 */
Scene_Menu.prototype.createStatusWindow = function() {
    //状态窗口 = 新 窗口菜单状态(命令窗口 宽 , 0 )
    this._statusWindow = new Window_MenuStatus(this._commandWindow.width, 0);
    //状态窗口 预约脸图()
    this._statusWindow.reserveFaceImages();
    //添加窗口(状态窗口)
    this.addWindow(this._statusWindow);
};

看到预约脸图（这什么鬼才翻译…果然是机翻…），菜单上显示脸图的地方也就是显示角色基本信息、用来选择角色的窗口了…
因此我们打开Window_MenuStatus，我们先去看看预约脸图到底是个什么鬼东西…
最后一直搜到他的父类的父类Window_Base，才搜到这个方法：

/**预约脸图 */
Window_Base.prototype.reserveFaceImages = function() {
    //游戏队伍 成员组() 对每一个 角色
    $gameParty.members().forEach(function(actor) {
        //图像管理器 预约脸图(角色 脸图名称())
        ImageManager.reserveFace(actor.faceName());
    //this)
    }, this);
};

然而没看出来什么…
不过看起来本质是对每一个成员都来一遍ImageManager.reserveFace函数。
然后再去rpg_managers文件夹下的ImageManager.js中搜索,,,
算了，我直接说出来吧…
这里说的预约或者预订，大概就是预加载的意思，MV的机制和VA中有些不太一样，VA中是如果图片在Cache中找不到，就去加载文件，而MV中最好预加载一下，然后使用的时候才能保证能正常显示，所以就有了一系列reserve函数。
这里不理解也没多大关系，毕竟对于我们这篇教程来说也用不到这个东西…
回归正题，既然我们已经打开了Window_MenuStatus，那么就要看看这里面是怎么描绘窗口内容的了。
还记得在我一年之前的教程里面绘制角色脸图的方法吗？没看过的同学可以去参考资料那里去找链接，或者我的签名档。
没错，就是drawActorFace方法！因此我们搜索这个方法名就能知道是怎么绘制的了。
搜到的结果：

/**绘制项目图像 */
Window_MenuStatus.prototype.drawItemImage = function(index) {
    var actor = $gameParty.members()[index];
    var rect = this.itemRect(index);
    this.changePaintOpacity(actor.isBattleMember());
    this.drawActorFace(actor, rect.x + 1, rect.y + 1, Window_Base._faceWidth, Window_Base._faceHeight);
    this.changePaintOpacity(true);
};

我们看到这里绘制了角色的脸图，但是我们注意到这个函数有参数index，而且这个函数调用一次只能够在rect.x + 1, rect.y + 1显示一个脸图，所以说一定是某个函数调用了这个函数很多次，才绘制出来所有角色的脸图。他是如何调用了这个函数多次，index又是什么含义呢？我们再以drawItemImage为关键字搜索：

/**绘制项目 */
Window_MenuStatus.prototype.drawItem = function(index) {
    this.drawItemBackground(index);
    this.drawItemImage(index);
    this.drawItemStatus(index);
};

结果发现这个函数只是把3个函数放在了一起，并不能看出来index的含义，再次搜索drawItem，发现只能搜到定义，却不能搜到其他地方有这个函数？
（黑人问号…）这…怎么会没有定义？
重点来了！！！
当我们在某个类（Window_MenuStatus）中搜索不到一个有定义却没有引用的函数（drawItem）时，我们珂以尝试去他的父类、父类的父类、甚至是他的祖宗类（XD）中去搜索，理论上说一般能够搜到（其实更简单的方法是直接在mv的js文件夹下的rpg_windows.js中搜索，但是没有中文注释）。
我们去Window_Selectable搜索，发现一下连续的两处结果：

/**绘制所有项目 */
Window_Selectable.prototype.drawAllItems = function() {
    //topIndex = 顶部索引()
    var topIndex = this.topIndex();
    //循环 (开始时 i = 0 ; 当 i < 最大页项目数 ;每次 i++ )
    for (var i = 0; i < this.maxPageItems(); i++) {
        //索引 = 头索引 + i
        var index = topIndex + i;
        //如果(索引<最大项目数())
        if (index < this.maxItems()) {
            //绘制项目(索引)
            this.drawItem(index);
        }
    }
};
/**绘制项目 */
Window_Selectable.prototype.drawItem = function(index) {};

我们发现，确实在Window_Selectable的drawAllItem中引用了drawItem函数，并且Window_Selectable的drawItem是个空函数，说明是在其子函数中再定义选项内容。
回来看drawAllItem这个函数，其中的for循环使得index从0循环到最大项目数，在菜单窗口内也就是循环调用描绘了所有角色的选项信息。因此，我们知道，只需要修改Window_MenuStatus中的drawItem方法，改变选项绘制的位置和内容，就可以达到我们预览图内的效果，中间的角色信息我们先不管，主要来看角色信息上下两行选项。
我们想要在选项中绘制角色的行走图，而不是脸图以及其他信息，因此我们需要将Window_MenuStatus.prototype.drawItem中的后两行删掉，第一行为描绘背景，这个大可保留，因为对我们基本没有影响。
之后我们就应该仿照绘制脸图的drawItemImage函数写一个函数来绘制人物行走图，就叫drawItemCharacterImages吧。这里的Character就是行走图的文件名称，大家珂以去游戏文件夹下的img文件夹下看看，里面有一个characters文件夹，这个文件夹里就存放着角色的行走图。
我们在Window_MenuStatus找到drawItemImage：

/**绘制项目图像 */
Window_MenuStatus.prototype.drawItemImage = function(index) {
    var actor = $gameParty.members()[index];
    var rect = this.itemRect(index);
    this.changePaintOpacity(actor.isBattleMember());
    this.drawActorFace(actor, rect.x + 1, rect.y + 1, Window_Base._faceWidth, Window_Base._faceHeight);
    this.changePaintOpacity(true);
};

我们看到，主要是drawActorFace函数绘制了脸图，我们只要把他改成绘制行走图即可，我们知道脸图的文件名称是Faces，因此我们猜测绘制行走图的函数名称是drawActorCharacter，我们首先找一下drawActorFace是在哪里定义的，我们在他的定义处搜索，大概就能搜到。
我们在Window_MenuStatus的父类Window_Selectable中没有搜到，那么我们去Window_Selectable的父类Window_Base中搜索，发现珂以搜到drawActorFace，我们再试图搜索drawActorCharacter，发现确实可以搜到，得到以下结果：

/**绘制角色人物 */
Window_Base.prototype.drawActorCharacter = function(actor, x, y) {
    this.drawCharacter(actor.characterName(), actor.characterIndex(), x, y);
};

我们看到，和drawActorFace不同的是，drawActorCharacter没有最后的长和宽两个参数，因此我们将drawItemImage中的内容复制到drawItemCharacterImage函数中，并将drawActorFace改为drawActorCharacter，以及删掉后两个参数，然后运行看看效果吧。
但是当我们运行的时候，却并未看到行走图，还记得刚才的drawItem函数吗？它里面包含了要调用的函数，但是上面定义的drawItemCharacterImage函数没有在这个函数内，也就是说，我们只是定义了这个函数，但没有调用这个函数。
如果想要将行走图显示在菜单窗口，就需要重新定义drawItem这个函数。因此我们将drawItem这个函数复制过来，其他的内容先不动，只将drawItemImage函数的调用改为对drawItemCharacterImage的调用。你会写了吗？
下面是这部分的代码：

//****************
//美化角色状态窗口
//****************
Window_MenuStatus.prototype.drawItemCharacterImage = function(index){
    var actor = $gameParty.members()[index];
    var rect = this.itemRect(index);
    this.changePaintOpacity(actor.isBattleMember());
    this.drawActorCharacter(actor, rect.x + 1, rect.y + 1 );
    this.changePaintOpacity(true);
};
Window_MenuStatus.prototype.drawItem = function(index) {
    this.drawItemBackground(index);
    this.drawItemCharacterImage(index);
    this.drawItemStatus(index);
};

如果你的运行结果是菜单上只有三个人物的半个行走图，像这样：
chraacter
那你就写对了，和脸图描绘不同的是，行走图的描绘中指定的x,y值是的行走图底部中点的坐标，因此我们看不到第一个人物的行走图，并且只能看到其余3个人物的半个行走图。
目前我不打算先改动描绘图片的x,y坐标值，因为我们现在还没有把选项分布改成预览图的样子。
我们看到，控制选项位置的是一个叫rect的东西，他的x,y坐标决定选项的位置。
因此我们对rect的创造函数itemRect进行分析。
在Window_MenuStatus中并没有搜到这个函数，因此我们去他的父类Window_Selectable中搜索，得到以下结果：

/**项目矩形 */
Window_Selectable.prototype.itemRect = function(index) {
    //设置新矩形
    var rect = new Rectangle();
    //最大列数 
    var maxCols = this.maxCols();
    //矩形宽 = 项目宽
    rect.width = this.itemWidth();
    //矩形高 = 项目高
    rect.height = this.itemHeight();
    //矩形x =  索引 % 最大列数  * (矩形 宽 + 间隔() ) - 滚动x
    rect.x = index % maxCols * (rect.width + this.spacing()) - this._scrollX;
    //矩形y =  索引/ 最大列数  * 矩形高 - 滚动y
    rect.y = Math.floor(index / maxCols) * rect.height - this._scrollY;
    //返回矩形
    return rect;
};

在当前的菜单中，选项只有1列，那么最大列数为1，但是按照我们的要求，最大列数因为4，所以我们将Window_MenuStatus的最大列数改为4：

Window_MenuStatus.prototype.maxCols = function() {
    return 4;
};

然后运行下看看效果…
col4
啊，字都重叠到一起了…如果你和我一样，那么就写对了。
我们在选项中不需要绘制人物的信息，只需要绘制行走图，因此将drawItem中的this.drawItemStatus(index);删掉。
我们看到画面中没有行走图，原因刚才说了，是因为我们的原点是人物行走图下边缘的中点，想要让他显示在画面中，横向显示在正中，就需要对x,y坐标进行调整。
我们在itemRect中看到，rect除了有x,y属性以外，还有height和width两个属性，分别对应了选项块的长和宽，因此，我们只要将行走图绘制的x坐标加上rect宽度的一半即可；而高度方面与宽度相同，需要将y加上rect的高度的一半，与宽度不同的是，如果我们想要让行走图显示在选项的中间，还要把y坐标加上半个行走图的长度也就是18，因为指定的点在行走图的下边缘。
改好后，就珂以看看效果了！代码如下，运行图我就不放了。

//****************
//美化角色状态窗口
//****************
Window_MenuStatus.prototype.drawItemCharacterImage = function(index){
    var actor = $gameParty.members()[index];
    var rect = this.itemRect(index);
    this.changePaintOpacity(actor.isBattleMember());
    this.drawActorCharacter(actor, rect.x + rect.width / 2 , rect.y + rect.height / 2 + 18 );
    this.changePaintOpacity(true);
};
Window_MenuStatus.prototype.drawItem = function(index) {
    this.drawItemBackground(index);
    this.drawItemCharacterImage(index);
};
Window_MenuStatus.prototype.maxCols = function() {
    return 4;
};

之后，我们在游戏数据库里面再加上4个人物，记得在数据库-系统-初始人物那里把新加上的四个人物加到初始队伍里，便于代码修改以后的效果测试（大致效果见最上面的预览图）。
然后，我们开始着手研究x和y坐标的位置问题。
在drawActorCharacter的参数我们看到，选项的位置是通过rect的属性决定的，而rect是通过itemRect函数创造的。
因此我们可以通过对itemRect函数进行修改，来实现将后四个选项的y坐标移动到窗口最底部。
通过搜索，在Window_Selectable中找到其定义：

/**项目矩形 */
Window_Selectable.prototype.itemRect = function(index) {
    //设置新矩形
    var rect = new Rectangle();
    //最大列数 
    var maxCols = this.maxCols();
    //矩形宽 = 项目宽
    rect.width = this.itemWidth();
    //矩形高 = 项目高
    rect.height = this.itemHeight();
    //矩形x =  索引 % 最大列数  * (矩形 宽 + 间隔() ) - 滚动x
    rect.x = index % maxCols * (rect.width + this.spacing()) - this._scrollX;
    //矩形y =  索引/ 最大列数  * 矩形高 - 滚动y
    rect.y = Math.floor(index / maxCols) * rect.height - this._scrollY;
    //返回矩形
    return rect;
};

因为Window_Selectable是很多选项窗口的父类，所以我们不能直接修改他的itemRect函数。
因此我们珂以在Window_MenuStatus窗口中重新定义一个同名方法，这样不仅避免了对Window_Selectable的子类造成影响，还珂以省去修改Window_MenuStatus中其他需要调用这个方法的语句的麻烦。
因此我们在Window_MenuStatus中重新创建一个itemRect方法，将原方法复制过来，然后进行修改。
我们看到，如果想让后四个角色的显示位置调整到底部，珂以在后四个角色的rect.y加上两个rect.height（因为一页上显示4行选项）。判断当前的rect是否是后四个角色的，我们可以通过比较index和maxCols的大小来确定角色的行数。
先自己写写代码，然后再对照下和我写的是否一样：

Window_MenuStatus.prototype.itemRect = function(index){
    var rect = new Rectangle();
    var maxCols = this.maxCols();
    rect.width = this.itemWidth();
    rect.height = this.itemHeight();
    rect.x = index % maxCols * (rect.width + this.spacing()) - this._scrollX;
    rect.y = Math.floor(index / maxCols) * rect.height - this._scrollY;
    if( index >= maxCols )rect.y+=rect.height * 2;
    return rect;
};

其实，我们只需修改rect.y那一行为

rect.y = Math.floor(index / maxCols) * rect.height * 3 - this._scrollY;

就不用加if那行了。
原理是第一行的角色的Math.floor(index / maxCols)结果为0，第二行的角色的Math.floor(index / maxCols)结果为1，所以只有第二行角色的rect.y增加了rect.height * 2。
现在我们运行一下游戏…感觉哪里有些不对——选项的高度太高了…
解决的方法是增加一页窗口的可见行数，在Window_MenuStatus的drawItem上面，我们发现了以下函数：

/**可见行数目 */
Window_MenuStatus.prototype.numVisibleRows = function() {
    return 4;
};

我们只要把他的行数改7即可。这里需要注意的是，记得将rect.y改为

rect.y = Math.floor(index / maxCols) * rect.height * 3 - this._scrollY;

如果你是用的if，那么将if那行改为

if( index >= maxCols )rect.y+=rect.height * ( this.numVisibleRows() - 2 );

效果是一样的。
最后运行下看下结果。
status
到这里，我们就写完了选项处理的部分，那么这期教程就写道这里吧（貌似只写完了上次预告的1/3）。

后记

这篇教程没完成上次预告的内容…
着实抱歉…
下期教程，基本上就能完工啦！
效果和预览图上就会一样了。
感谢大家的支持！