基于RPGMakerMV的JavaScript基础-4

深藏阁楼爱情的钟 2022-06-08 03:25 376阅读 0赞

第四章        绘制窗口简介

第一节        变量进度条

感谢我们的好友墨汁的提议，我们现在考虑一个能够把变量以进度条的形式显示出来的插件。最终效果如图4-1所示。

![223327w1ti1y3lty0nymy7.png][]    
图4-1

先来做一下简单的分析（软件工程还是很有用的）：我们可以画一个新窗口，然后在新窗口里面显示文字，画一个黑色的矩形（当作变量条），然后窗口的每次更新都重新读取对应变量的值，然后重画一次。

确定了需求之后，我们就可以开始了。

第二节        创建新窗口

窗口，实际上来自于MV的一个对象Window\_Base，从官方的文档中我们可以看到关于它的说明，直接查看源码也可以获得相关的知识（在rpg\_window.js内）。我们要画一个新窗口，也需要继承Window\_Base。

好了，首先，我们还是要来一个命名空间装个逼，如图4-2。

![223327upy7yx3tixlx0iov.png][]   
图4-2

然后，我们就可以创建一个新的窗口了，一般而言，我们这样创建一个窗口。（我也是跟着别人的样式学着写的，大家也可以先跟着写，不明的地方今后慢慢理解）

![223327aldk9dspm8plmzhv.png][]   
图4-3

前面两个如同上次的插件命令一样，我们仍然用的是call，将我们自己的窗口Window\_Bar通过addChild方法加入到child里面，然后我们的窗口也可以随着游戏的其他窗口一起绘制出来了，这次是Scene\_Map里面的createAllWindows函数。

后面是我们的Window\_Bar窗口的定义，是一个function对象。这里面只有一句代码：

1.  this.initialize.apply(this, arguments);

复制代码

这个方法是当做构造函数的，即，我们可以把initialize当做构造函数。

![223328oj1yue8jjnmiejxq.png][]   
图4-4

之后的代码如图4-4，Window\_Bar.prototype是创建了一个Window\_Base.prototype，这就相当于Window\_Bar继承了Window\_Base的prototype，原来Window\_Base拥有的属性，现在Window\_Bar也有了。

然后指明构造器constructor是上面的Window\_Bar，这样我们就可以在此原型链上查找属性了。（此句可以看成Window\_Base.prototype的属性也是Window\_Bar的属性。关于原型链，就像是通过prototype来实现的属性和方法的继承，可以自行百度更多的信息。）

最后，是Window\_Bar的初始化，initialize方法，这个方法在上面就用到了，此处正是他的具体内容。

简单来讲，在创建Window\_Bar的时候，会先复制Window\_Base里面的属性和方法，然后执行initialize方法，这样的话，我们就需要在initialize里面指明我们需要在初始化的时候额外进行的工作，比如说指定窗口的大小、位置等基本属性。

可以看到，我们仍然使用的call，将Window\_Base的initialize方法先执行了一遍，Window\_Base的initialize方法有四个参数，分别是x,y,width,height，指明了窗口的位置和大小。

然后，我们又设置了Window\_Bar的透明度。

注意，这里的this意思就是这个对象，具体来讲，就是Window\_Bar.prototype，所以我们可以使用this来调用Window\_Bar.prototype里面的东西。

我们把要设置的这几个属性来封在函数里面（也假装个属性来），如图4-5，这样我们就可以像刚才那样来调用，并且在这几个函数里面读取了插件的参数。（就像上一章的设置方法）。

![223329vrvvdrzgdvcv1g1u.png][]   
图4-5  
第三节        绘制文字以及矩形

以上这些都是一些基础的设置，接下来是我们的核心代码，如何在窗口里面画出文字，还有矩形条，如图4-6。

![223329dd1xpyrsbdgfqqgg.png][]   
图4-6

大致就像这样，通过传进来的id参数以及调用系统的变量（就是事件里面用到的那个变量）$gameVariables来获得变量的值，以及我们设置好的变量的上限。计算好比例，设置好宽度和长度。然后开始画矩形和矩形，（一条是背景，一条是已经有的部分），以及在上面写字。

这里要注意，窗口里面的图形都在contents里面储存着，要画图，也要调用contents里面的方法。比如我们所用到的fillRect，gradientFillRect以及drawText。

他们的参数大都相同，都需要由位置和大小。然后还要设置好颜色，用RGB的字符串就可以，drawtext还要有显示的位置（左对齐，右对齐，居中）以及显示的内容，都是字符串。

然后，我们还需要设置好窗口每次刷新时所进行的操作，即重写update方法，如图4-7所示。

![223329sskfjnnvkts6lzch.png][]   
图4-7

update方法，是在Window\_Base里面设置好的每次刷新时调用的方法，我们把刚才写的show函数放在这里面调用，这样就可以每次刷新时都重新画一遍，以保证数据的更新。

这里用到了cotents里面的clear方法，用于清空窗口里面以前画上的内容，很显然，我们每次刷新都要重新再画，所以需要清空原来的东西。

然后是对储存了要显示的变量的id的数组的遍历，并且将他们的信息作为函数传到show里面。这样可以对id数组里面的所设置的所有变量进行绘制。

第四节        插件命令以及参数

以上部分用到了我已经设置好的插件命令和参数，他们如图4-8所示。

![223329d0qhwcqh2lw19d7p.png][]   
图4-8

id是用来储存需要显示的变量id的数组。

top是变量的上限，用参数的形式获得数值。

后面的命令有reset，add以及delete，都是通过对id数组以及参数数组args的遍历更改id数组的内容，从而改变显示的变量。

注意，此处对args的遍历使得这些命令支持许多个参数。

第五节        留个作业

好吧，我们再来留个测试，

请把top也改成个数组，与id数组一一对应，这样我们就可以对每个变量设置其上限了。

好吧，不要吐槽我混乱的代码风格了，毕竟只是v0.0.1。。。（低版本号是一切bug以及丑陋代码的借口，参考cf的版本号变革）

[223327w1ti1y3lty0nymy7.png]: http://rm.66rpg.com/data/attachment/forum/201608/18/223327w1ti1y3lty0nymy7.png
[223327upy7yx3tixlx0iov.png]: http://rm.66rpg.com/data/attachment/forum/201608/18/223327upy7yx3tixlx0iov.png
[223327aldk9dspm8plmzhv.png]: http://rm.66rpg.com/data/attachment/forum/201608/18/223327aldk9dspm8plmzhv.png
[223328oj1yue8jjnmiejxq.png]: http://rm.66rpg.com/data/attachment/forum/201608/18/223328oj1yue8jjnmiejxq.png
[223329vrvvdrzgdvcv1g1u.png]: http://rm.66rpg.com/data/attachment/forum/201608/18/223329vrvvdrzgdvcv1g1u.png
[223329dd1xpyrsbdgfqqgg.png]: http://rm.66rpg.com/data/attachment/forum/201608/18/223329dd1xpyrsbdgfqqgg.png
[223329sskfjnnvkts6lzch.png]: http://rm.66rpg.com/data/attachment/forum/201608/18/223329sskfjnnvkts6lzch.png
[223329d0qhwcqh2lw19d7p.png]: http://rm.66rpg.com/data/attachment/forum/201608/18/223329d0qhwcqh2lw19d7p.png