RMMV脚本教程——菜单美化(二)

RMMV脚本教程——菜单美化(二)

写在前面

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

注意事项

  1. 本教程的灵感来自于【渣作品】RGSS3教程(二) 菜单的美化【2013.8.2-16:40完结】,不如说是该教程直接翻译成的MV版本。
  2. 因为作者特别的菜,所以教程中难免会有一些小(致命)的错误,请大家原谅,另外请大家不吝赐教。
  3. 教程中会用到的参考资料:
  4. 本教程同步发布于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_SelectabledrawAllItem中引用了drawItem函数,并且Window_SelectabledrawItem是个空函数,说明是在其子函数中再定义选项内容。
回来看drawAllItem这个函数,其中的for循环使得index0循环到最大项目数,在菜单窗口内也就是循环调用描绘了所有角色的选项信息。因此,我们知道,只需要修改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属性以外,还有heightwidth两个属性,分别对应了选项块的长和宽,因此,我们只要将行走图绘制的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个人物,记得在数据库-系统-初始人物那里把新加上的四个人物加到初始队伍里,便于代码修改以后的效果测试(大致效果见最上面的预览图)。
然后,我们开始着手研究xy坐标的位置问题。
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是否是后四个角色的,我们可以通过比较indexmaxCols的大小来确定角色的行数。
先自己写写代码,然后再对照下和我写的是否一样:

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_MenuStatusdrawItem上面,我们发现了以下函数:

/**可见行数目 */
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)。

后记

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