RPG Maker mv框架代码解析之窗口图片显示

文章目录

1 窗口基类的图片描画接口
- 1.1 Face描画接口
- 1.2 Icon描画接口
2 描画自定义图片

1 窗口基类的图片描画接口

RPG Maker mv框架中的窗口基类（Window_Base）提供了两个用来在窗口上描画图片的接口：

drawFace
drawIcon

当我们设计出一个基于窗口基类的窗口类后，就可以使用这两个接口在我们新窗口上描画我们的图片。不过看名字也知道，这俩接口不是什么都能画的，一个是用来话头像的（drawFace），另一个是用来话图标的（drawIcon）。

我们先来看看什么是Face和Icon：

Face指的是存放与下面固定路径中的图片，图片中头像的大小，排列方式都是RPG Maker mv规定好的：

img\faces

来个Face图片的例子：

Icon指的是存放在下面固定路径中特定的图片，图片中头像的大小，排列方式都是RPG Maker mv规定好的：

img\system\IconSet.png

Icon图片的内容如下：

如果想要随心所欲的画自己的图片，只能使用更底层的接口，这个后面再说。

1.1 Face描画接口

Window_Base.prototype.drawFace = function(faceName, faceIndex, x, y, width, height) {width = width || Window_Base._faceWidth;height = height || Window_Base._faceHeight;var bitmap = ImageManager.loadFace(faceName);var pw = Window_Base._faceWidth;var ph = Window_Base._faceHeight;var sw = Math.min(width, pw);var sh = Math.min(height, ph);var dx = Math.floor(x + Math.max(width - pw, 0) / 2);var dy = Math.floor(y + Math.max(height - ph, 0) / 2);var sx = faceIndex % 4 * pw + (pw - sw) / 2;var sy = Math.floor(faceIndex / 4) * ph + (ph - sh) / 2;this.contents.blt(bitmap, sx, sy, sw, sh, dx, dy);
};

faceName Face所在图片的名称（去掉扩展名.png）
faceIndex Face所在位置，一般一张图片里有8张Face，编号从0~7
x 描画位置的x坐标，这里的位置是相对于窗口基类contents成员来说的，就是在contents成员上画的位置
y 描画位置的y坐标，这里的位置是相对于窗口基类contents成员来说的，就是在contents成员上画的位置
width Face图像的宽
height Face图像的高

下面来个例子：

//=============================================================================
// Window_Friendliness_List
//
// 友好度展示窗口
//=============================================================================
function Window_Friendliness_List() {this.initialize.apply(this, arguments);
};Window_Friendliness_List.prototype = Object.create(Window_Selectable.prototype);
Window_Friendliness_List.prototype.constructor = Window_Friendliness_List;Window_Friendliness_List.prototype.initialize = function(x, y) {var width = this.windowWidth();var height = this.windowHeight();Window_Selectable.prototype.initialize.call(this, x, y, width, height);this.NPCList = [{"faceName":"Actor2","faceIndex":6,"name":"卡洛琳"},{"faceName":"Actor1","faceIndex":2,"name":"斯洛特"},{"faceName":"People2","faceIndex":7,"name":"希尔"},{"faceName":"伊莉莎（普通）","faceIndex":0,"name":"伊莉莎"},{"faceName":"People4","faceIndex":1,"name":"夏莉"},{"faceName":"Actor1","faceIndex":4,"name":"沙兰特"}];
};Window_Friendliness_List.prototype.drawItem = function(index) {this.drawItemImage(index);
};Window_Friendliness_List.prototype.drawItemImage = function(index) {var rect = this.itemRect(index);var faceName = this.NPCList[index]["faceName"];var faceIndex = this.NPCList[index]["faceIndex"];this.drawFace(faceName, faceIndex, rect.x + 1, rect.y + 1, Window_Base._faceWidth, Window_Base._faceHeight);
};

在上面的例子中，我们首先创建了一个友好度展示用的窗口函数Window_Friendliness_List，继承于Window_Selectable对象的。 Window_Selectable对象继承自Window_Base对象，因此我们的友好度展示窗口对象最终继承于Window_Base对象。

通过new方法创建Window_Friendliness_List窗口对象时，Window_Friendliness_List.prototype.initialize会被调用，通过Window_Friendliness_List.prototype.initialize方法完成友好度展示窗口对象的内部数据构造。可以看到Window_Friendliness_List对象内部维护了一个NPCList，其实是所展示列表中各NPC头像图片的信息。

Window_Selectable对象有个refresh()方法，这个方法会调用Window_Friendliness_List.prototype.drawItem，而Window_Friendliness_List.prototype.drawItem会调用Window_Friendliness_List.prototype.drawItemImage，在Window_Friendliness_List.prototype.drawItemImage中我们通过drawFace()接口完成头像的描画。
Window_Selectable对象的refresh()方法其实是在友好度展示场景对象中触发调用的，例子中没有展示上层场景对象的代码。

1.2 Icon描画接口

Window_Base.prototype.drawIcon = function(iconIndex, x, y) {var bitmap = ImageManager.loadSystem('IconSet');var pw = Window_Base._iconWidth;var ph = Window_Base._iconHeight;var sx = iconIndex % 16 * pw;var sy = Math.floor(iconIndex / 16) * ph;this.contents.blt(bitmap, sx, sy, pw, ph, x, y);
};

iconIndex Icon在IconSet.png图片中的位置索引，注意空白的部分也是要参与编号的
x 描画位置的x坐标，这里的位置是相对于窗口基类contents成员来说的，就是在contents成员上画的位置
y 描画位置的y坐标，这里的位置是相对于窗口基类contents成员来说的，就是在contents成员上画的位置

2 描画自定义图片

我们可以看到通过上面介绍的接口只能画RPG Maker mv框架规定好大小的图片（Face和Icon），当然我们也可以按照Face和Icon的大小要求自己创建图片放到指定的目录下使用，但是当我们需要按照自己的需要画其它大小内容的图片时就不行了。

那么到底有没有其他方法可以描画自定义图片呢？答案当然是有。

我们观察drawFace和drawIcon接口发现，最终描画时都调用了blt方法。这个blt方法属于this.contents，而contents所指向的就是Bitmap对象。到这里我们终于认识到这些图片都是描画在哪里的了。没错，就是在一个几乎占满窗口的大Bitmap对象上画的。
我们来看一下它的实现：

Bitmap.prototype.blt = function(source, sx, sy, sw, sh, dx, dy, dw, dh) {dw = dw || sw;dh = dh || sh;if (sx >= 0 && sy >= 0 && sw > 0 && sh > 0 && dw > 0 && dh > 0 &&sx + sw <= source.width && sy + sh <= source.height) {this._context.globalCompositeOperation = 'source-over';this._context.drawImage(source._canvas, sx, sy, sw, sh, dx, dy, dw, dh);this._setDirty();}
};

source 一个Bitmap对象，这个对象中包含所要描画图片数据。它一般是通过ImageManager全局对象的一系列load方法得到的：
- loadSystem
- loadFace
- loadIcon
- … …
sx 要描画的部分在图片中的位置的x坐标
sy 要描画的部分在图片中的位置的y坐标
sw 要描画的部分的宽
sh 要描画的部分的高
dx 目标位置的x坐标，相对于contents所指向的Bitmap对象来说
dy 目标位置的y坐标，相对于contents所指向的Bitmap对象来说
dw 目标的宽
dh 目标的高

我们可以通过Bitmap对象的blt方法来描画自定义图片，当然要描画的图片其实可以放在下面几个目录的任意一个中，那么在创建被描画Bitmap对象时就要调用对应位置的load方法：

图片位置	load方法
img/animations/	ImageManager.loadAnimation
img/battlebacks1/	ImageManager.loadBattleback1
img/battlebacks2/	ImageManager.loadBattleback2
img/enemies/	ImageManager.loadEnemy
img/characters/	ImageManager.loadCharacter
img/faces/	ImageManager.loadFace
img/parallaxes/	ImageManager.loadParallax
img/pictures/	ImageManager.loadPicture
img/sv_actors/	ImageManager.loadSvActor
img/sv_enemies/	ImageManager.loadSvEnemy
img/system/	ImageManager.loadSystem
img/tilesets/	ImageManager.loadTileset
img/titles1/	ImageManager.loadTitle1
img/titles2/	ImageManager.loadTitle2

上面的文件路径其实根据具体的用处定义的，根据名称基本上能猜出来用来放置何种类型的图片的。
我们在放置自定义图片时可以按照框架赋予的含义来选择路径，这样也方便我们自己管理图片资源。