Project1

标题: RPG Maker MV 的源码研究 其九 [打印本页]
作者: 沉滞的剑    时间: 2019-8-20 06:47
标题: RPG Maker MV 的源码研究 其九
本帖最后由 沉滞的剑 于 2019-8-20 18:11 编辑

第八章 Window_Selectable

上回说到Window_Base为Window类提供了基础的绘制功能
那么Window_Selectable则提供了基础的交互功能

  1. function Window_Selectable() {
  2.     this.initialize.apply(this, arguments);
  3. }

  5. Window_Selectable.prototype = Object.create(Window_Base.prototype);
  6. Window_Selectable.prototype.constructor = Window_Selectable;

  8. Window_Selectable.prototype.initialize = function(x, y, width, height) {
  9.     Window_Base.prototype.initialize.call(this, x, y, width, height);
  10.     this._index = -1;
  11.     this._cursorFixed = false;
  12.     this._cursorAll = false;
  13.     this._stayCount = 0;
  14.     this._helpWindow = null;
  15.     this._handlers = {};
  16.     this._touching = false;
  17.     this._scrollX = 0;
  18.     this._scrollY = 0;
  19.     this.deactivate();
  20. };
复制代码
首先this._index指的时当前选择的对象的序号, 如果为-1则代表未选中
  1. Window_Selectable.prototype.index = function() {
  2.     return this._index;
  3. };
  4. Window_Selectable.prototype.select = function(index) {
  5.     this._index = index;
  6.     this._stayCount = 0;
  7.     this.ensureCursorVisible();
  8.     this.updateCursor();
  9.     this.callUpdateHelp();
  10. };

  12. Window_Selectable.prototype.deselect = function() {
  13.     this.select(-1);
  14. };

  16. Window_Selectable.prototype.reselect = function() {
  17.     this.select(this._index);
  18. };
复制代码

this._cursorFixed = false;
this._cursorAll = false;
是光标锁定和选择全体的flag
  1. Window_Selectable.prototype.cursorFixed = function() {
  2.     return this._cursorFixed;
  3. };

  5. Window_Selectable.prototype.setCursorFixed = function(cursorFixed) {
  6.     this._cursorFixed = cursorFixed;
  7. };

  9. Window_Selectable.prototype.cursorAll = function() {
  10.     return this._cursorAll;
  11. };

  13. Window_Selectable.prototype.setCursorAll = function(cursorAll) {
  14.     this._cursorAll = cursorAll;
  15. };
复制代码

this._stayCount 是一个计数器, 判断鼠标或触摸是否在菜单上下内边距内按下超过10帧
如果在上边框悬停超过10帧后按下鼠标则选择上一个item(对触摸也有效)
如果在下边框悬停超过10帧后按下鼠标则选择下一个item(对触摸也有效)
  1. Window_Selectable.prototype.update = function() {
  2.     ...
  3.     this._stayCount++;
  4. };

  6. Window_Selectable.prototype.onTouch = function (triggered) {
  7.    ...
  8.     } else if (this._stayCount >= 10) {
  9.         if (y < this.padding) {
  10.             this.cursorUp();
  11.         } else if (y >= this.height - this.padding) {
  12.             this.cursorDown();
  13.         }
  14.     }
  15.     ...
  16. };
复制代码
很多人都没发现这个功能吧, 可以找标题菜单, 游戏菜单试验一下~
this._helpWindow是说明窗口
这个有专门的类实现这类窗口Window_Helper
我们先简单了解一下在Window_Selectable里的使用

  2. Window_Selectable.prototype.setHelpWindow = function(helpWindow) {
  3.     this._helpWindow = helpWindow;
  4.     this.callUpdateHelp();
  5. };

  7. Window_Selectable.prototype.showHelpWindow = function() {
  8.     if (this._helpWindow) {
  9.         this._helpWindow.show();
  10.     }
  11. };

  13. Window_Selectable.prototype.hideHelpWindow = function() {
  14.     if (this._helpWindow) {
  15.         this._helpWindow.hide();
  16.     }
  17. };

  19. Window_Selectable.prototype.callUpdateHelp = function() {
  20.     if (this.active && this._helpWindow) {
  21.         this.updateHelp();
  22.     }
  23. };

  25. Window_Selectable.prototype.updateHelp = function() {
  26.     this._helpWindow.clear();
  27. };

  29. Window_Selectable.prototype.setHelpWindowItem = function(item) {
  30.     if (this._helpWindow) {
  31.         this._helpWindow.setItem(item);
  32.     }
  33. };
复制代码
这些方法只是helpWindow方法的包装而已
作为一基础类Window_Selectable并没有实际上的helpWindow, 所以这部分等到以后遇到HelpWindow再细讲
this._handlers 是回调函数, 也就是玩家选择后的反馈
  1. Window_Selectable.prototype.setHandler = function(symbol, method) {
  2.     this._handlers[symbol] = method;
  3. };

  5. Window_Selectable.prototype.isHandled = function(symbol) {
  6.     return !!this._handlers[symbol];
  7. };

  9. Window_Selectable.prototype.callHandler = function(symbol) {
  10.     if (this.isHandled(symbol)) {
  11.         this._handlers[symbol]();
  12.     }
  13. };
复制代码

其实非常简单: 以字典格式存储, 按照key来呼叫方法就好
有一些默认的handler
  1. Window_Selectable.prototype.callOkHandler = function() {
  2.     this.callHandler('ok');
  3. };

  5. Window_Selectable.prototype.processCancel = function() {
  6.     SoundManager.playCancel();
  7.     this.updateInputData();
  8.     this.deactivate();
  9.     this.callCancelHandler();
  10. };

  12. Window_Selectable.prototype.callCancelHandler = function() {
  13.     this.callHandler('cancel');
  14. };

  16. Window_Selectable.prototype.processPageup = function() {
  17.     SoundManager.playCursor();
  18.     this.updateInputData();
  19.     this.deactivate();
  20.     this.callHandler('pageup');
  21. };

  23. Window_Selectable.prototype.processPagedown = function() {
  24.     SoundManager.playCursor();
  25.     this.updateInputData();
  26.     this.deactivate();
  27.     this.callHandler('pagedown');
  28. };
复制代码
这些为子类提供了一些基础框架
this._touching是触摸状态, 下面是一个子update方法

  2. Window_Selectable.prototype.processTouch = function () {
  3.     if (this.isOpenAndActive()) { // 如果窗口可用
  4.         if (TouchInput.isTriggered() && this.isTouchedInsideFrame()) { //如果在窗口区域按下鼠标
  5.             this._touching = true;
  6.             this.onTouch(true); // 触发按下handler
  7.         } else if (TouchInput.isCancelled()) { // 如果按下右键/取消键
  8.             if (this.isCancelEnabled()) {  // 如果有取消handler
  9.                 this.processCancel(); // 执行取消handler
  10.             }
  11.         }
  12.         if (this._touching) {
  13.             if (TouchInput.isPressed()) {   // 在按住状态滑过窗口(非触摸双击或左键选择已选择的item)
  14.                 this.onTouch(false); // 仅触发重新选择而不会出发handler
  15.             } else {
  16.                 this._touching = false;
  17.             }
  18.         }
  19.     } else {
  20.         this._touching = false;
  21.     }
  22. };
复制代码
   this._scrollX 和 this._scrollY指的是菜单卷动的位置
这些纯计算位置的方法就不多说了, 数量太多不过内容只是纯数值计算, 我们以后遇到了再说
说完了初始化, 我们再看看update

  1. Window_Selectable.prototype.update = function () {
  2.     Window_Base.prototype.update.call(this);
  3.     this.updateArrows(); // 如果菜单高度显示不下, 显示箭头指示玩家下面/上面还有item
  4.     this.processCursorMove(); // 键盘事件
  5.     this.processHandling(); // 以后再说
  6.     this.processWheel(); // 看名字似乎是滚轮, 但是貌似无用
  7.     this.processTouch(); // 鼠标/触摸事件
  8.     this._stayCount++;
  9. };
复制代码
键盘事件, 支持上下左右和上下翻页
  1. Window_Selectable.prototype.processCursorMove = function () {
  2.     if (this.isCursorMovable()) {
  3.         var lastIndex = this.index();
  4.         if (Input.isRepeated('down')) {
  5.             this.cursorDown(Input.isTriggered('down'));
  6.         }
  7.         if (Input.isRepeated('up')) {
  8.             this.cursorUp(Input.isTriggered('up'));
  9.         }
  10.         if (Input.isRepeated('right')) {
  11.             this.cursorRight(Input.isTriggered('right'));
  12.         }
  13.         if (Input.isRepeated('left')) {
  14.             this.cursorLeft(Input.isTriggered('left'));
  15.         }
  16.         if (!this.isHandled('pagedown') && Input.isTriggered('pagedown')) {
  17.             this.cursorPagedown();
  18.         }
  19.         if (!this.isHandled('pageup') && Input.isTriggered('pageup')) {
  20.             this.cursorPageup();
  21.         }
  22.         if (this.index() !== lastIndex) {
  23.             SoundManager.playCursor();
  24.         }
  25.     }
  26. };
复制代码
Window_Selectable还有一些对item的绘制方法

  1. Window_Selectable.prototype.drawItem = function (index) {
  2. };

  4. Window_Selectable.prototype.clearItem = function (index) {
  5.     var rect = this.itemRect(index);
  6.     this.contents.clearRect(rect.x, rect.y, rect.width, rect.height);
  7. };

  9. Window_Selectable.prototype.redrawItem = function (index) {
  10.     if (index >= 0) {
  11.         this.clearItem(index);
  12.         this.drawItem(index);
  13.     }
  14. };

  16. Window_Selectable.prototype.redrawCurrentItem = function () {
  17.     this.redrawItem(this.index());
  18. };

  20. Window_Selectable.prototype.refresh = function () {
  21.     if (this.contents) {
  22.         this.contents.clear();
  23.         this.drawAllItems();
  24.     }
  25. };
复制代码

不过可以看出drawItem只有一个架子, 需要子类对其进行填充
Window_Selectable的方法还是有一大堆的, 涉及到了用户交互后新增了很多状态
而且当然也需要TouchInput, Input类来提供用户行为的判断

具体实践我们留到下一回讲Window_Command的时候继续
(讲一个Scene_Title的createCommandWindow方法可以水3个类, 继承真棒!


作者: walf_man    时间: 2019-8-21 20:17
辛苦大佬无私分享



欢迎光临 Project1 (https://rpg.blue/) Powered by Discuz! X3.1