[教程]RMMV脚本教程——菜单美化（三）（完结）

xjzsq

前两期教程的传送门

RMMV脚本教程——菜单美化（一）
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论坛和我的博客青い記憶：RMMV脚本教程——菜单美化（三）
  
  

正文

上期教程，我们写好了人物行走图选项的部分，下面就实现中间显示人物的信息，并且信息会随着选项的位置改变的效果。
还记得我在之前写烂尾的教程（在注意事项第三条3那里）里面如何描绘人物信息的吗？(回去看了看，貌似只写到了描绘人物名字的部分)
我们这次为了代码简单一些，就不描边了。
因为随选项而使人物信息变化比较难，所以我们就先把index==0的角色信息描绘出来，像描绘角色行走图一样，我们需要新建一个函数，把所有关于描绘角色信息的代码都写在这个函数里，仿照drawItemImage，新函数就叫做drawItemActorStatus，具体方法也参照drawItemImage来写：

1. Window_MenuStatus.prototype.drawItemActorStatus = function(){
   
2.     var index = 0;
   
3.     var actor = $gameParty.members()[index];
   
4.     var rect = this.itemRect(index);
   
5. }

复制代码

这里，rect的y和height并不能满足要求，因此，这里珂以参照itemRect函数自己写一个返回rect方法，这里叫做itemRectForStatus，也是将itemRect中的内容复制过来，再做进一步修改。新定义的这个函数有什么不同呢？首先是他和人物的index无关了，所以这个函数就没有参数了；其次是他的rect.y应该先加上一个选项的高度，而rect.heigtht应该为原来基础上的5（this.numVisibleRows() - 2）倍，按照上面说的写出以下函数：

1. Window_MenuStatus.prototype.itemRectForStatus = function(){
   
2.     var rect = new Rectangle();
   
3.     var maxCols = this.maxCols();
   
4.     rect.width = this.itemWidth() * maxCols;
   
5.     rect.height = this.itemHeight();
   
6.     rect.x = 0 ;
   
7.     rect.y = rect.height - this._scrollY;
   
8.     rect.height *= ( this.numVisibleRows() - 2 );
   
9.     return rect;
   
10. };

复制代码

之后，将drawItemActorStatus中的itemRect函数改为itemRectForStatus。
要描绘人物的脸图，使用的方法是drawActorFace，参数珂以对照着Window_MenuStatus的drawItemImage函数里面的drawActorFace的参数来填，也就是下面这样：

1. this.drawActorFace(actor, rect.x, rect.y);

复制代码

先运行下测试一下看看是否正常显示吧，不过在测试之前，我们需要将drawItemActorStatus函数先写到Window_MenuStatus的drawItem函数里面，也就是在里面加上：

1. this.drawItemActorStatus();

复制代码

之后运行看下结果吧！
如果在菜单中显示了第一个人物的脸图，那你就写对了。
在这以后，我们就来描绘剩下的东西。
首先是在脸图上面描绘人物名字，使用的是drawActorName函数，定义在Window_Base中，参数珂以去看定义，这里需要说明的是，有些参数珂以不填，比如看到drawActorName函数的定义：

1. /**绘制角色名称 */
   
2. Window_Base.prototype.drawActorName = function(actor, x, y, width) {
   
3.     width = width || 168;
   
4.     this.changeTextColor(this.hpColor(actor));
   
5.     this.drawText(actor.name(), x, y, width);
   
6. };

复制代码

其中width = width || 168; 就表示width是一个可填可不填的参数，就算不填，也会自动给补上，这里我们是想在脸图上方描绘名字，而脸图的宽度是144（珂以去脸图目录下的文件那里看宽度/4就是这个数字），而按照默认宽度，珂能会出现绘制到脸图外面的情况，因此我们填上这个参数。
也就是：

1. this.drawActorName(actor, rect.x, rect.y, 144);

复制代码

同样，在Window_Base中，我们珂以搜索到绘制角色等级、职业、昵称、HP、MP的函数，因为图像的宽度是144，因此描绘这些的时候，x都需要在原来的基础上加145；等级这一行，珂以先算出( rect.width - 144 ) / 3的结果为_valWidth，然后描绘职业和昵称的时候，分别在x那里加上一个或两个_valWidth；另外，在MV中每行字的高度是36，描绘的每个项目都要加上宽度，第一行是_valWidth，后面都是rect.width - 144。珂以写出以下代码：

1.     var _valWidth= ( rect.width - 144 ) / 3;
   
2.     this.drawActorLevel(actor, rect.x + 145, rect.y , _valWidth);
   
3.     this.drawActorClass(actor, rect.x + 145 + _valWidth, rect.y, _valWidth);
   
4.     this.drawActorNickname(actor, rect.x + 145 + _valWidth * 2, rect.y, _valWidth);
   
5.     this.drawActorHp(actor, rect.x + 145, rect.y + 36, rect.width - 144);
   
6.     this.drawActorMp(actor, rect.x + 145, rect.y + 72, rect.width - 144);

复制代码

MV默认工程里面，人物是没有昵称的，我们需要去数据库里加上昵称，然后运行测试下效果。
…是不是发现等级那里有点不对劲…
数字离着Lv符号太远了…
那我们就重新定义下等级的函数，同样是从Window_Base中复制过来，然后把数字往左放一点（也就是把drawText的x值改小一点，这里改成了x + 48，因为上面的等级符号宽度是48）：

1. Window_MenuStatus.prototype.drawActorLevel = function(actor, x, y) {
   
2.     this.changeTextColor(this.systemColor());
   
3.     this.drawText(TextManager.levelA, x, y, 48);
   
4.     this.resetTextColor();
   
5.     this.drawText(actor.level, x + 48, y, 36, 'right');
   
6. };

复制代码

运行下看结果：

下面就开始写经验条了，因为MV脚本没有自带描绘经验条的函数，这就需要我们自己来写…
仿照HP条来写经验条吧。
我们先在Window_Base中找到描绘HP条的方法：

1. Window_Base.prototype.drawActorHp = function(actor, x, y, width) {
   
2.     width = width || 186;
   
3.     var color1 = this.hpGaugeColor1();
   
4.     var color2 = this.hpGaugeColor2();
   
5.     this.drawGauge(x, y, width, actor.hpRate(), color1, color2);
   
6.     this.changeTextColor(this.systemColor());
   
7.     this.drawText(TextManager.hpA, x, y, 44);
   
8.     this.drawCurrentAndMax(actor.hp, actor.mhp, x, y, width, this.hpColor(actor), this.normalColor());
   
9. };

复制代码

第一行，是默认的宽度，这个不管。
之后两行是两个颜色，为了区别于HP条，经验条就用TP条的颜色吧。
第四行就是描绘HP条了，这里actor.hpRate()看起来控制了HP条有颜色部分的长度，我们应该把这个改成exp的，这个MV也没有自带，也需要自己写…同样找到这个的定义，但是根据actor来看，这应该是actor的属性，而actor应该是Game开头的代码里面定义的，但是我们不知道具体是在哪个类里面定义的，因此去游戏工程的脚本目录下的rpg_objects.js中搜索：

1. Game_BattlerBase.prototype.hpRate = function() {
   
2.     return this.hp / this.mhp;
   
3. };

复制代码

发现是在Game_BattlerBase里面定义的，于是仿照这个函数在相同的类中定义expRate，当前的经验和下个等级所需的经验，这里直接给出来，为this.currentExp()和this.nextLevelExp()，写出以下函数：

1. Game_BattlerBase.prototype.expRate = function () {
   
2.     return this.currentExp() / this.nextLevelExp();
   
3. };

复制代码

现在就珂以写drawActorExp函数了！还需要做的修改有单位改为expA，下面的数值改为当前经验和下等级经验，以及颜色改为tpColor ：

1. Window_MenuStatus.prototype.drawActorExp = function(actor, x, y, width) {
   
2.     width = width || 186;
   
3.     var color1 = this.tpGaugeColor1();
   
4.     var color2 = this.tpGaugeColor2();
   
5.     this.drawGauge(x, y, width, actor.expRate(), color1, color2);
   
6.     this.changeTextColor(this.systemColor());
   
7.     this.drawText(TextManager.expA, x, y, 44);
   
8.     this.drawCurrentAndMax(actor.currentExp(), actor.nextLevelExp(), x, y, width, this.tpColor(actor), this.normalColor());
   
9. };

复制代码

最后在drawItemActorStatus中加上描绘exp的函数：

1. this.drawActorExp(actor, rect.x + 145, rect.y + 108, rect.width - 144);

复制代码

只剩下能力值和武器情况的描绘了。
状态那里面是不是也描绘有这些东西？
因此我们就去看看那里是怎么描绘的，打开rpg_window中的Window_Status，珂以搜到以下内容：

1. /**绘制参数 */
   
2. Window_Status.prototype.drawParameters = function(x, y) {
   
3.     var lineHeight = this.lineHeight();
   
4.     for (var i = 0; i < 6; i++) {
   
5.         var paramId = i + 2;
   
6.         var y2 = y + lineHeight * i;
   
7.         this.changeTextColor(this.systemColor());
   
8.         this.drawText(TextManager.param(paramId), x, y2, 160);
   
9.         this.resetTextColor();
   
10.         this.drawText(this._actor.param(paramId), x + 160, y2, 60, 'right');
    
11.     }
    
12. };
    
13. /**绘制装备 */
    
14. Window_Status.prototype.drawEquipments = function(x, y) {
    
15.     var equips = this._actor.equips();
    
16.     var count = Math.min(equips.length, this.maxEquipmentLines());
    
17.     for (var i = 0; i < count; i++) {
    
18.         this.drawItemName(equips[i], x, y + this.lineHeight() * i);
    
19.     }
    
20. };

复制代码

这两个函数一个用来绘制能力值信息，一个用来描绘装备的信息，因此我们用这两个函数来绘制剩下的内容，因为这两个函数定义在Window_Status中，所以需要把这两个函数复制到Window_MenuStatus中，并修改成Window_MenuStatus中的函数；之后，在drawItemActorStatus中进行引用：

1. this.drawParameters(rect.x,rect.y+144);
   
2. this.drawEquipments(rect.x+312,rect.y+144);

复制代码

改好后运行去发现提示param未定义，这并不说明是param的问题，反而是他前面的this._actor的问题：this._actor在Window_MenuStatus中是未定义的，因此需要改成用参数传递，再次运行测试前先记得在drawItemActorStatus的函数调用那里补上参数actor。
再次运行，发现this.maxEquipmentLines()未定义，这还是需要从Window_Status中去复制。
最终得到以下代码：

1. Window_MenuStatus.prototype.maxEquipmentLines = function() {
   
2.     return 6;
   
3. };
   
4. 
   
5. Window_MenuStatus.prototype.drawParameters = function(actor, x, y) {
   
6.     var lineHeight = this.lineHeight();
   
7.     for (var i = 0; i < 6; i++) {
   
8.         var paramId = i + 2;
   
9.         var y2 = y + lineHeight * i;
   
10.         this.changeTextColor(this.systemColor());
    
11.         this.drawText(TextManager.param(paramId), x, y2, 160);
    
12.         this.resetTextColor();
    
13.         this.drawText(actor.param(paramId), x + 160, y2, 60, 'right');
    
14.     }
    
15. };
    
16. 
    
17. Window_MenuStatus.prototype.drawEquipments = function(actor, x, y) {
    
18.     var equips = actor.equips();
    
19.     var count = Math.min(equips.length, this.maxEquipmentLines());
    
20.     for (var i = 0; i < count; i++) {
    
21.         this.drawItemName(equips[i], x, y + this.lineHeight() * i);
    
22.     }
    
23. };

复制代码

最终测试得到以下画面：

下面就开始实现人物信息随选项变动的功能了！
首先，我们需要知道存储当前选项的变量是什么，在Window_MenuStatus中的处理确定的函数processOk中，获取当前的人物是通过this.index()实现的，而this.index()呢？在Window_MenuStatus中没有搜到这个函数的定义，因此我们去他的父类Window_Selectable中搜索，得到以下结果：

1. /**索引 */
   
2. Window_Selectable.prototype.index = function() {
   
3.     //返回 _index
   
4.     return this._index;
   
5. };

复制代码

因此我们也珂以使用this._index获取当前index。
因此将index那里改为this._index，然后运行下看看效果。
运行后却得到了TypeError: Cannot read property 'faceName' of undefined的错误。
难道说this._index出错了？我们珂以看看到底运行到这里this._index返回了什么值。
这就要用到浏览器的控制台输出函数，在出错的这行前面插入：

1. console.log(this._index);

复制代码

再次运行打开菜单出错后按F12，发现输出的值为-1，为什么是-1？我们现在他等于-1的时候把值改为0，然后在F12里面看看这个-1是什么情况下出现的。
因此将定义actor那行改为：

1. var actor = $gameParty.members()[this._index==-1?0:this._index];

复制代码

却发现F12在选项移动的过程中并没有输出任何东西，说明drawItemActorStatus这个函数在选项移动过程中并没有被调用，只是绘制选项的过程中被调用了一次，这显然达不到我们的要求。
这里补充一个知识：放在窗口类的update函数内的函数会不断被调用。而Window_MenuStatus中没有定义update函数，说明他的update与父类相同，因此需要自己定义update函数（首先继承了父类的update函数）：

1. Window_MenuStatus.prototype.update = function(){
   
2.     Window_Selectable.prototype.update.call(this);
   
3.     this.drawItemActorStatus();
   
4. };

复制代码

并且记得在drawItem中删掉drawItemActorStatus函数的引用。
然后运行后发现，虽然人物信息随着选项的移动而改变，但是却发现原来的人物信息还在，只是往窗口上一层一层地“铺”，这样肯定是不行的。
因此我们需要想办法，让原人物信息先从菜单上清除，再描绘当前选项的人物信息。
Tip：清除坐标为x,y，高和宽分别为height和width的矩形中的内容的函数为clearRect，我们珂以通过itemRectForStatus函数来获得矩形的信息，同样把下面这行插入update：

1. this.contents.clearRect(rect.x,rect.y,rect.width,rect.height);

复制代码

运行下看看结果……
确实是没问题了。但是不知为啥电脑风扇开始狂转，打开任务管理器，发现MV的生成的游戏的进程电池使用情况为“非常高”（写教程的时候电脑开着这个时候的游戏开了一晚上，早晨起来发现电脑风扇快转疯了……），这肯定不正常啊…
打开F12发现，之前写的输出this._index的代码正在疯狂输出-1，说明画面更新实在是太频繁了，而实际上并不需要这么频繁，只需要在选项变化的时候更新画面即可。
怎样判断选项变化呢？
因为this._index存储了当前的选项，所以只要选项和原来不一样，this._index就会和原来不一样，所以珂以先把this._index的值存到一个变量中，如果两者不相等，再执行清除重绘的函数，并更新存储的变量，这样就珂以解决因为频繁刷新而导致电脑卡到爆的情况了。
我们在update函数外面新建一个变量xjzsqIndex，然后在update函数内增加一个if判断，来实现这个效果，并且记得把在控制台输出this._index值的那句删掉！代码如下：

1. var xjzsqIndex;
   
2. Window_MenuStatus.prototype.update = function(){
   
3.     Window_Selectable.prototype.update.call(this);
   
4.     if(xjzsqIndex != this._index)
   
5.     {
   
6.         var rect = this.itemRectForStatus();
   
7.         this.contents.clearRect(rect.x, rect.y, rect.width, rect.height);
   
8.         this.drawItemActorStatus();
   
9.         xjzsqIndex = this._index;
   
10.     }
    
11. };

复制代码

电池使用情况立马变成“中”了。
现在就只剩下改变菜单背景了吧。
在加上自带的背景图片之前，我们先把窗口自带的边框“扒”掉，虽然说是扒掉，但是方法确实将窗口背景部分的内容透明度更改为0。
比较合适的修改窗口透明度的时机有两个，一个是在窗口的initialize中修改，因为这是窗口的初始化过程，只执行一次，不会因为多次执行浪费计算资源，另一种是在使用new创建窗口的时候修改，具体在哪里修改还是要看具体情况，哪个方便就在哪里改。
首先是显示金钱的窗口，因为我们在脚本中定义过Scene_Menu的createGoldWindow函数，因此珂以在金钱窗口创造后使用

1. this._goldWindow.opacity = 0;

复制代码

来将金钱窗口背景的透明度修改为0。
对于菜单选项窗口，我们考虑在initialize函数中修改透明度，但是我们发现initialize中已经有了其他方法，我们珂以通过重写这个方法，也就是：（具体为什么这样写珂以去看我参考资料中的烂尾教程一）

1. xjzsqInitialize = Window_MenuCommand.prototype.initialize;
   
2. Window_MenuCommand.prototype.initialize = function(){
   
3.     xjzsqInitialize.call(this);
   
4.     this.opacity  = 0;
   
5. };

复制代码

但是我希望代码尽量短一些，所以我决定在refresh中修改透明度，原因是，refresh函数在该函数中并没有定义，而是直接继承的父类的refresh中的内容，我们自己重新定义比较方便，另外refresh函数也只在他的父类的initialize函数中被调用了一次，本质上还是在initialize中修改的。
因此我们珂以用比上面少一行的代码量来修改复杂度：

1. Window_MenuCommand.prototype.refresh = function(){
   
2.     Window_Command.prototype.refresh.call(this);
   
3.     this.opacity = 0;
   
4. };

复制代码

同样地，经过搜索，发现Window_MenuStatus情况也大致相同，因此采用与上面同样的方法：

1. Window_MenuStatus.prototype.refresh = function(){
   
2.     Window_Selectable.prototype.refresh.call(this);
   
3.     this.opacity = 0;
   
4. };

复制代码

运行游戏测试一下：

所有的窗口背景都消失了！
下面我们就插入背景图片吧！
首先大家先把我们用到的图片下载下来：

下载链接：MenuBackground
下载好以后放到工程目录的/img/system文件夹下（当然你放到其他文件夹也是珂以的，只是后面显示图片的函数会有所区别）
然后我们再次打开Scene_Menu，既然是背景，那就搜索background大概就行了吧，但是竟然没搜到…什么情况？难道默认没有这个函数吗？还不能轻易下结论，注意看Scene_Menu的父类，是Scene_MenuBase，名字就说明这个类也是专门为了菜单设置的，因此我们打开Scene_MenuBase，再次搜索找到以下函数：

1. Scene_MenuBase.prototype.createBackground = function() {
   
2.     //背景精灵 = 新 精灵()
   
3.     this._backgroundSprite = new Sprite();
   
4.     //背景精灵 位图 = 场景管理器 背景位图()
   
5.     this._backgroundSprite.bitmap = SceneManager.backgroundBitmap();
   
6.     //添加子项(背景精灵)
   
7.     this.addChild(this._backgroundSprite);
   
8. };

复制代码

这大概是实现在地图上截图并以此作为菜单背景的代码，因此我们珂以在Scene_Menu中重写这个函数，在父类的基础上增加显示我们刚才下载的那张图片。
首先也仿照Scene_MenuBase的createBackground函数创造一个精灵，就叫做_backgroundSprite2吧；然后指定这个精灵的位图，这里的位图，我们通过ImageManager.loadSystem("文件名")，来读取/img/system目录下文件名为”文件名.png“的文件；最后也是将精灵添加到屏幕上，代码如下：

1. Scene_Menu.prototype.createBackground = function(){
   
2.     Scene_MenuBase.prototype.createBackground.call(this);
   
3.     this._backgroundSprite2 = new Sprite();
   
4.     this._backgroundSprite2.bitmap = ImageManager.loadSystem("MenuBackground");
   
5.     this.addChild(this._backgroundSprite2);
   
6. };

复制代码

运行测试一下效果：

到这里，教程的基础部分就结束啦！

代码

1. /*:
   
2. @author xjzsq
   
3. @plugindesc 菜单美化
   
4. @help
   
5.     直接打开即可食用~
   
6. */
   
7. 
   
8. //********************
   
9. //带图标的金钱显示窗口
   
10. //********************
    
11. function Window_NewGold(){
    
12.     this.initialize.apply(this, arguments);
    
13. };
    
14. 
    
15. Window_NewGold.prototype = Object.create(Window_Gold.prototype);
    
16. 
    
17. Window_NewGold.prototype.constructor = Window_NewGold;
    
18. 
    
19. Window_NewGold.prototype.refresh = function(){
    
20.     Window_Gold.prototype.refresh.call(this);
    
21.     this.drawIcon(313, 0, 0);
    
22. };
    
23. 
    
24. 
    
25. //******************
    
26. //给菜单选项加上图标
    
27. //******************
    
28. var iconIndex = [208, 64, 137, 84, 75, 242, 229, 82];
    
29. 
    
30. Window_MenuCommand.prototype.drawItem = function(index){
    
31.     var rect = this.itemRectForText(index);
    
32.     var align = this.itemTextAlign();
    
33.     this.resetTextColor();
    
34.     this.changePaintOpacity(this.isCommandEnabled(index));
    
35.     this.drawIcon(iconIndex[index],rect.x,rect.y);
    
36.     this.drawText(this.commandName(index), rect.x + 36, rect.y, rect.width - 36, align);
    
37. };
    
38. 
    
39. Window_MenuCommand.prototype.refresh = function(){
    
40.     Window_Command.prototype.refresh.call(this);
    
41.     this.opacity = 0;
    
42. };
    
43. 
    
44. 
    
45. //****************
    
46. //美化角色状态窗口
    
47. //****************
    
48. Window_MenuStatus.prototype.drawItemCharacterImage = function(index){
    
49.     var actor = $gameParty.members()[index];
    
50.     var rect = this.itemRect(index);
    
51.     this.changePaintOpacity(actor.isBattleMember());
    
52.     this.drawActorCharacter(actor, rect.x + rect.width / 2 , rect.y + rect.height / 2 + 18 );
    
53.     this.changePaintOpacity(true);
    
54. };
    
55. 
    
56. Window_MenuStatus.prototype.drawItem = function(index) {
    
57.     this.drawItemBackground(index);
    
58.     this.drawItemCharacterImage(index);
    
59. };
    
60. 
    
61. Window_MenuStatus.prototype.maxCols = function() {
    
62.     return 4;
    
63. };
    
64. 
    
65. Window_MenuStatus.prototype.numVisibleRows = function() {
    
66.     return 7;
    
67. };
    
68. 
    
69. Window_MenuStatus.prototype.itemRect = function(index){
    
70.     var rect = new Rectangle();
    
71.     var maxCols = this.maxCols();
    
72.     rect.width = this.itemWidth();
    
73.     rect.height = this.itemHeight();
    
74.     rect.x = index % maxCols * (rect.width + this.spacing()) - this._scrollX;
    
75.     rect.y = Math.floor(index / maxCols) * rect.height * ( this.numVisibleRows() - 1 ) - this._scrollY;
    
76.     return rect;
    
77. };
    
78. 
    
79. 
    
80. //*************************
    
81. //美化角色状态窗口_角色信息
    
82. //*************************
    
83. Window_MenuStatus.prototype.itemRectForStatus = function(){
    
84.     var rect = new Rectangle();
    
85.     var maxCols = this.maxCols();
    
86.     rect.width = this.itemWidth() * maxCols;
    
87.     rect.height = this.itemHeight();
    
88.     rect.x = - this._scrollX ;
    
89.     rect.y = rect.height - this._scrollY;
    
90.     rect.height *= ( this.numVisibleRows() - 2 );
    
91.     return rect;
    
92. };
    
93. 
    
94. Window_MenuStatus.prototype.drawActorLevel = function(actor, x, y) {
    
95.     this.changeTextColor(this.systemColor());
    
96.     this.drawText(TextManager.levelA, x, y, 48);
    
97.     this.resetTextColor();
    
98.     this.drawText(actor.level, x + 48, y, 36, 'right');
    
99. };
    
100. 
     
101. Game_BattlerBase.prototype.expRate = function() {
     
102.     return this.currentExp() / this.nextLevelExp();
     
103. };
     
104. 
     
105. Window_MenuStatus.prototype.drawActorExp = function(actor, x, y, width) {
     
106.     width = width || 186;
     
107.     var color1 = this.tpGaugeColor1();
     
108.     var color2 = this.tpGaugeColor2();
     
109.     this.drawGauge(x, y, width, actor.expRate(), color1, color2);
     
110.     this.changeTextColor(this.systemColor());
     
111.     this.drawText(TextManager.expA, x, y, 44);
     
112.     this.drawCurrentAndMax(actor.currentExp(), actor.nextLevelExp(), x, y, width,
     
113.                            this.tpColor(actor), this.normalColor());
     
114. };
     
115. 
     
116. Window_MenuStatus.prototype.maxEquipmentLines = function() {
     
117.     return 6;
     
118. };
     
119. 
     
120. Window_MenuStatus.prototype.drawParameters = function(actor, x, y) {
     
121.     var lineHeight = this.lineHeight();
     
122.     for (var i = 0; i < 6; i++) {
     
123.         var paramId = i + 2;
     
124.         var y2 = y + lineHeight * i;
     
125.         this.changeTextColor(this.systemColor());
     
126.         this.drawText(TextManager.param(paramId), x, y2, 160);
     
127.         this.resetTextColor();
     
128.         this.drawText(actor.param(paramId), x + 160, y2, 60, 'right');
     
129.     }
     
130. };
     
131. 
     
132. Window_MenuStatus.prototype.drawEquipments = function(actor, x, y) {
     
133.     var equips = actor.equips();
     
134.     var count = Math.min(equips.length, this.maxEquipmentLines());
     
135.     for (var i = 0; i < count; i++) {
     
136.         this.drawItemName(equips[i], x, y + this.lineHeight() * i);
     
137.     }
     
138. };
     
139. 
     
140. Window_MenuStatus.prototype.drawItemActorStatus = function(){
     
141.     var actor = $gameParty.members()[this._index==-1?0:this._index];
     
142.     var rect = this.itemRectForStatus();
     
143.     this.drawActorFace(actor, rect.x, rect.y);
     
144.     this.drawActorName(actor, rect.x, rect.y, 144);
     
145.     var _valWidth = ( rect.width - 144 ) / 3;
     
146.     this.drawActorLevel(actor, rect.x + 145, rect.y , _valWidth);
     
147.     this.drawActorClass(actor, rect.x + 145 + _valWidth, rect.y, _valWidth);
     
148.     this.drawActorNickname(actor, rect.x + 145 + _valWidth * 2, rect.y, _valWidth);
     
149.     this.drawActorHp(actor, rect.x + 145, rect.y + 36, rect.width - 144);
     
150.     this.drawActorMp(actor, rect.x + 145, rect.y + 72, rect.width - 144);
     
151.     this.drawActorExp(actor, rect.x + 145, rect.y + 108, rect.width - 144);
     
152.     this.drawParameters(actor, rect.x,rect.y + 144);
     
153.     this.drawEquipments(actor, rect.x + 312,rect.y + 144);
     
154. };
     
155. 
     
156. var xjzsqIndex;
     
157. Window_MenuStatus.prototype.update = function(){
     
158.     Window_Selectable.prototype.update.call(this);
     
159.     if(xjzsqIndex != this._index||(xjzsqIndex == -1 && this._index == 0))
     
160.     {
     
161.         var rect = this.itemRectForStatus();
     
162.         this.contents.clearRect(rect.x, rect.y, rect.width, rect.height);
     
163.         this.drawItemActorStatus();
     
164.         xjzsqIndex = this._index;
     
165.     }
     
166. };
     
167. 
     
168. Window_MenuStatus.prototype.refresh = function(){
     
169.     Window_Selectable.prototype.refresh.call(this);
     
170.     this.drawItemActorStatus();
     
171.     this.opacity = 0;
     
172. };
     
173. 
     
174. 
     
175. //************
     
176. //美化后的菜单
     
177. //************
     
178. Scene_Menu.prototype.createGoldWindow = function() {
     
179.     this._goldWindow = new Window_NewGold(0, 0);
     
180.     this._goldWindow.y = Graphics.boxHeight - this._goldWindow.height;
     
181.     this._goldWindow.opacity = 0;
     
182.     this.addWindow(this._goldWindow);
     
183. };
     
184. 
     
185. Scene_Menu.prototype.createBackground = function(){
     
186.     Scene_MenuBase.prototype.createBackground.call(this);
     
187.     this._backgroundSprite2 = new Sprite();
     
188.     this._backgroundSprite2.bitmap = ImageManager.loadSystem("MenuBackground");
     
189.     this.addChild(this._backgroundSprite2);
     
190. };

复制代码

下面的附件是为了求糖，内容和上面代码框里的一致。
xjzsqMenu.zip (1.9 KB, 下载次数: 8, 售价: 100 星屑)

2019-7-17 00:48 上传

点击文件名下载附件
完整代码文件
售价: 100 星屑  [记录]

然后是工程文件：（请下载解压后直接覆盖粘贴到一个RMMV新建的游戏工程文件夹内，以补全缺少的文件）
MenuGuide.zip (485.16 KB, 下载次数: 7, 售价: 100 星屑)

2019-7-17 01:18 上传

点击文件名下载附件
游戏工程
售价: 100 星屑  [记录]

作业

作业布置什么好呢？
就在菜单的人物信息那里的人物头像下方，显示能力值的位置上方，增加人物当前状态图标（睡眠、中毒等图标）的显示吧！
至于如何显示状态图标，这个就通过自己搜索得知啦！
这次的作业将会在Project1论坛的2L公布答案。

后记

从7.2发第一期，到现在（7.16）已经过了两周了。
在写教程的过程中，我也不断发现自己原来写好的脚本存在的写的不合理或者不优雅的地方，很多原来不是很明白的地方也因为写教程要讲明白所以理解地更加透彻了，也许这就是《礼记》中所说的“教学相长吧”。
下次写教程不知道会是什么时候了，计划是讲解一下官方自带的插件或者其他用的比较多的插件是怎么写出来的，也可能是对MV本身自带脚本的解读，总之敬请期待，请大家多多包涵啦！感谢大家的大力支持！

xjzsq

占楼待施工

黑舞嗜

楼主NB，支持一个

URUUR

前排顶帖

zxcasdqwe719

順手交作業
第一次改菜單，跟著教程一步步測試之後真的有種豁然開朗的感覺w
真的很感謝po耐心細緻的教學！！



作業一：步數窗口

作業二：異常狀態顯示（改了一點）

xjzsq

zxcasdqwe719 发表于 2019-7-19 18:06
順手交作業
第一次改菜單，跟著教程一步步測試之後真的有種豁然開朗的感覺w
真的很感謝po耐心細緻的教學！ ...

非常感谢你的回复与支持！
（作业第一次有人做感觉好开心！！！）
作业答案完全正确，不介意我拿来作为参考答案吧？

0moliu0

对于不会画图的萌新来说，这修改ui十分好用

博丽内奥拉

我也来交作业吧，虽然已经过去了几个月

xjzsq

博丽内奥拉 发表于 2019-12-30 08:56
我也来交作业吧，虽然已经过去了几个月

作业完成得很不错！
感谢回复！

wtyliangting

抱歉，老哥。定义Window_MenuStatus.prototype.update时候，后面的function打错了...