RPG Maker MV 的源码研究 其十

沉滞的剑

希望论坛能支持直接写Markdown啊
==============================
在Window_Selectable之后,
RM还再次拓展了Window_Command类, 引入了Command的概念
将item封装成名称, 对应handler, 可用状态等属性的新对象
下面我们将按照惯例通过各个生命周期来了解它的原理

1. Window_Command.prototype.initialize = function (x, y) {
   
2.     this.clearCommandList();
   
3.     this.makeCommandList();
   
4.     var width = this.windowWidth();
   
5.     var height = this.windowHeight();
   
6.     Window_Selectable.prototype.initialize.call(this, x, y, width, height);
   
7.     this.refresh();
   
8.     this.select(0);
   
9.     this.activate();
   
10. };

复制代码

Window_Command具有_list属性
代表其维护的Command列表

1. Window_Command.prototype.clearCommandList = function () {
   
2.   this._list = [];
   
3. };
   
4. 
   
5. Window_Command.prototype.makeCommandList = function () {
   
6. };
   
7. 
   
8. Window_Command.prototype.addCommand = function (name, symbol, enabled, ext) {
   
9.   if (enabled === undefined) {
   
10.       enabled = true;
    
11.   }
    
12.   if (ext === undefined) {
    
13.       ext = null;
    
14.   }
    
15.   this._list.push({ name: name, symbol: symbol, enabled: enabled, ext: ext });
    
16. };

复制代码

基础的对command列表的各种操作
makeCommandList是个虚函数, 需要各个子类对其进行实现
在addCommand里可以看出来Command总共有4个属性
name, symbol, enabled 和 ext
name对应的是绘制名
symbol对应的是选择后对应的handler
enabled控制是否可选
ext应该是携带的 拓展信息

对于单个command, 也有相应的获取其属性的方法

1. Window_Command.prototype.commandName = function (index) {
   
2.   return this._list[index].name;
   
3. };
   
4. 
   
5. Window_Command.prototype.commandSymbol = function (index) {
   
6.   return this._list[index].symbol;
   
7. };
   
8. 
   
9. Window_Command.prototype.isCommandEnabled = function (index) {
   
10.   return this._list[index].enabled;
    
11. };

复制代码

对于当前Command获取属性的方法

1. Window_Command.prototype.currentData = function () {
   
2.   return this.index() >= 0 ? this._list[this.index()] : null;
   
3. };
   
4. 
   
5. Window_Command.prototype.isCurrentItemEnabled = function () {
   
6.   return this.currentData() ? this.currentData().enabled : false;
   
7. };
   
8. 
   
9. Window_Command.prototype.currentSymbol = function () {
   
10.   return this.currentData() ? this.currentData().symbol : null;
    
11. };
    
12. 
    
13. Window_Command.prototype.currentExt = function () {
    
14.   return this.currentData() ? this.currentData().ext : null;
    
15. };

复制代码

还有一些检索特定属性, 找到command的方法

1. Window_Command.prototype.findSymbol = function (symbol) {
   
2.   for (var i = 0; i < this._list.length; i++) {
   
3.       if (this._list[i].symbol === symbol) {
   
4.           return i;
   
5.       }
   
6.   }
   
7.   return -1;
   
8. };
   
9. 
   
10. Window_Command.prototype.selectSymbol = function (symbol) {
    
11.   var index = this.findSymbol(symbol);
    
12.   if (index >= 0) {
    
13.       this.select(index);
    
14.   } else {
    
15.       this.select(0);
    
16.   }
    
17. };
    
18. 
    
19. Window_Command.prototype.findExt = function (ext) {
    
20.   for (var i = 0; i < this._list.length; i++) {
    
21.       if (this._list[i].ext === ext) {
    
22.           return i;
    
23.       }
    
24.   }
    
25.   return -1;
    
26. };

复制代码

讲讲绘制, 首先在Window_Selectable里有item的矩形区域的定义

1. Window_Selectable.prototype.itemRect = function (index) {
   
2.   var rect = new Rectangle();
   
3.   var maxCols = this.maxCols();
   
4.   rect.width = this.itemWidth();
   
5.   rect.height = this.itemHeight();
   
6.   rect.x = index % maxCols * (rect.width + this.spacing()) - this._scrollX;
   
7.   rect.y = Math.floor(index / maxCols) * rect.height - this._scrollY;
   
8.   return rect;
   
9. };

复制代码

每个item按照横向铺满换行的方式排列
对于每一个itemRect, 还有一个由textPadding控制的textRect

1. Window_Selectable.prototype.itemRectForText = function (index) {
   
2.   var rect = this.itemRect(index);
   
3.   rect.x += this.textPadding();
   
4.   rect.width -= this.textPadding() * 2;
   
5.   return rect;
   
6. };

复制代码

在Window_Command中, 我们就是在这个textRect中绘制name

1. Window_Command.prototype.drawItem = function (index) {
   
2.   var rect = this.itemRectForText(index);
   
3.   var align = this.itemTextAlign();
   
4.   this.resetTextColor();
   
5.   this.changePaintOpacity(this.isCommandEnabled(index));
   
6.   this.drawText(this.commandName(index), rect.x, rect.y, rect.width, align);
   
7. };

复制代码

其中resetTextColor:

1. Window_Base.prototype.resetTextColor = function () {
   
2.   this.changeTextColor(this.normalColor());
   
3. };
   
4. 
   
5. Window_Base.prototype.changeTextColor = function (color) {
   
6.   this.contents.textColor = color;
   
7. };
   
8. 
   
9. Window_Base.prototype.normalColor = function () {
   
10.   return this.textColor(0);
    
11. };

复制代码

嗯, 还记得Window_Base里讲的那个复古的取色写法么...

1. Window_Base.prototype.changePaintOpacity = function (enabled) {
   
2.   this.contents.paintOpacity = enabled ? 255 : this.translucentOpacity();
   
3. };
   
4. Window_Base.prototype.translucentOpacity = function () {
   
5.   return 160;
   
6. };

复制代码

这个就是根据当前command是否是enabled来确定字体的透明度了

update其实没有多少变化不过Window_Command覆写了callOkHandler
先来看一下这个方法在Window_Selectable中的调用栈

1. Window_Selectable.prototype.update = function () {
   
2.   // ...略
   
3.   this.processHandling();
   
4.   // ...略
   
5. };
   
6. 
   
7. Window_Selectable.prototype.processHandling = function () {
   
8.   // 略....
   
9.   if (this.isOkEnabled() && this.isOkTriggered()) {
   
10.       this.processOk();
    
11.   }
    
12.   // 略....
    
13. };
    
14. 
    
15. Window_Selectable.prototype.processOk = function () {
    
16.   if (this.isCurrentItemEnabled()) {
    
17.       // ... 略
    
18.       this.callOkHandler();
    
19.       // ... 略
    
20.   }
    
21. };

复制代码

Window_Command修改了callOkHandler的方法:

1. Window_Command.prototype.callOkHandler = function () {
   
2.   var symbol = this.currentSymbol(); // 获取当前command的symbol
   
3.   if (this.isHandled(symbol)) { // 如果存在该symbol的handler
   
4.       this.callHandler(symbol); // 则呼叫这个handler
   
5.   } else if (this.isHandled('ok')) { // 否则判断是否有ok
   
6.       Window_Selectable.prototype.callOkHandler.call(this); // 呼叫ok
   
7.   } else {
   
8.       this.activate(); // 否则就重新选择一下
   
9.   }
   
10. };

复制代码

这里贴个activate供大家参考一下

1. Window_Selectable.prototype.activate = function () {
   
2.   Window_Base.prototype.activate.call(this);
   
3.   this.reselect();
   
4. };
   
5. Window_Selectable.prototype.reselect = function () {
   
6.   this.select(this._index);
   
7. };

复制代码

最后一个refresh重绘也没有太多内容

1. Window_Command.prototype.refresh = function () {
   
2.   this.clearCommandList();
   
3.   this.makeCommandList();
   
4.   this.createContents();
   
5.   Window_Selectable.prototype.refresh.call(this);
   
6. };

复制代码

需要注意的是每次重绘Command list都会被清空重新添加
内容也要重绘, 绘制部分参见上面的drawItem
这里把相关的父类函数贴一下

1. Window_Selectable.prototype.refresh = function () {
   
2.   if (this.contents) {
   
3.       this.contents.clear();
   
4.       this.drawAllItems();
   
5.   }
   
6. };
   
7. 
   
8. Window_Selectable.prototype.drawAllItems = function () {
   
9.   var topIndex = this.topIndex();
   
10.   for (var i = 0; i < this.maxPageItems(); i++) {
    
11.       var index = topIndex + i;
    
12.       if (index < this.maxItems()) {
    
13.           this.drawItem(index);
    
14.       }
    
15.   }
    
16. };
    

复制代码

收工~收工~
下次应该有新的练手内容
明天见...大概吧

chinx

太真实了 技术贴没人看系列。 顶一发

walf_man

楼上你说的也很真实呀