RPG Maker MV 踩坑七 仿新仙剑存档菜单

遇到的坑

新仙剑中存档和读档可以看做是同一个菜单中的不同操作，共计100个存档方便玩家使用。
每个存档可分解为两种显示：一种是无存档信息的，只用显示底图和序号即可；一种是有存档信息的，会变换底图，并且绘制出人物所在场景地图，地图名称，队伍中人物头像，第一个人物的等级，队伍所拥有的金钱和游戏时间这些信息。
而在JS代码中处理这些有时并不简单。

坑一 图片保存

众所周知RPGMakerMV是一个使用HTML5和JavaScript为开发及运行平台的，这就意味着对应游戏是运行在这上面的。
在开发中遇到的第一个坑就是图片的保存，在原始的js和html中正常是可以存储图片的，从网页中右键保存即可，一般这图片是从img标签中得到的，在h5中canvas里面有一个图片转换base64的方法（网上浏览了很久，才找到），这个方法对我来说就可以使用，因为RMMV中Bitmap中是没有对应方法的，因此只能用原生方式。
但Bitmap中截取出来的图片由于存储数据的问题及优先修改大小的问题，因此需要调整图片的大小，但使用后发现Bitmap的方法调整后，图片变成黑片了，不知道为什么canvas的宽高被变更后会变成这样。得另外想办法了！最后一整折腾后才想到可以放进另一个Bitmap对象中处理。

var mapBitmap   = new Bitmap(80,60);
	mapBitmap.blt(SceneManager.backgroundBitmap(),0,0,640,480,0,0,80,60);
	info.mapSprite  =mapBitmap.canvas.toDataURL();

这边先创建了一个固定宽高的位图对象，然后通过blt方法将截图对象放入进去，设定其在内容为空的对象中的宽高即可，然后在新的对象中的canvas中使用图片转base64的方法，这样需要的图片截取出来存储为字符串了。

坑二 图片绘制

这个坑是对应的，可以存储后,那自然得进行使用，进行绘制但如何加载呢？浏览器是可以直接加载base64的图片的，img标签也可以。通过不断地查找有用的信息和不断折腾后终于。

if (info.mapSprite) {
        var mapImg=Bitmap.load(info.mapSprite);
		if(!mapImg.isReady()){
			setTimeout(()=>{
				this.contents.blt(mapImg,0,0,80,60,x+37,y+14);
			},1);
		}else{
			this.contents.blt(mapImg,0,0,80,60,x+37,y+14);
		}
    }

Bitmap的加载方法正好可以使用，load方法中地址和base64都会被放入img对象中，在通过canvas的上下文对象进行加载进入canvas中，为什么不说是绘制呢，虽然是有绘制的方法，但总觉得不是那么简单的进行绘制。再确定位图对象是否绘制出来后，放入到指定的矩形框中。

坑三 多图绘制

需求是没有选中的绘制，选中的不绘制，使用了各种方法都不行，现在只能使用笨办法了！！！

this._windowCursorSprite.bitmap.clear();
	for (var i = 0; i < 100; i++) {
		if(i==this.index()){
			continue;
		}else{
			var rect = this.itemRectForText(i);//项目矩形文本
			this._windowCursorSprite.bitmap.blt(this.saveAndLoaded, 0, 0*96, 400, 96, rect.x, rect.y,400,95);
		}
	}

在光标更新中每次绘制时，清理掉之前的内容，然后在进行绘制，每次绘制99个内容，这样选中的就不会再绘制，未选中的就进行绘制了！

大家要是有好的方法也可以评论，探讨哦！