RPG Maker MV 仿仙剑仙术场景效果展示

仙剑仙术场景

仿仙剑仙术场景

现在简单的UI展示已经完成，可以看到人物的操作，后期可能会添加物品自用逻辑，比如：破天锤，炼蛊皿，紫金葫芦的逻辑代码。

仿仙剑仙术代码如下

下列代码和上期物品栏一样的部分就不进行展示了。

Pal_Scene_Skill.prototype.create = function() {
    Scene_ItemBase.prototype.create.call(this);
    this.createHelpWindow();
	this.createActorWindow();
	this.createItemWindowBackground();
    this.createSkillWindow();
};

这里面最后的物品创建改成了法术创建。

Pal_Scene_Skill.prototype.createSkillWindow = function() {
	this._itemWindow = new Window_SkillList(7, 154, 624, 238);
    this._itemWindow.setHelpWindow(this._helpWindow);
    this._itemWindow.setHandler('ok',     this.onItemOk.bind(this));
    this._itemWindow.setHandler('cancel', this.popScene.bind(this));
	this._itemWindow.changeTransparent();
    this.addChild(this._itemWindow);
};

这边除了变量名一样外，使用的类是法术的窗口类，对应的宽高和定位位置也不同，最开始是相同的，但是考虑的有个文字的绘制，因此改变了这个宽度。

Pal_Scene_Skill.prototype.determineItem = function() {
    var action = new Game_Action(this.user());
    var item = this.item();
    action.setItemObject(item);
    if (action.isForFriend()) {
		var hide=this.children[3];
		this.children[3]=this.children[4];
		this.children[4]=hide;
        this.showSubWindow(this._actorWindow);
        this._actorWindow.selectForItem(this.item());
    } else {
        this.useItem();
        this.activateItemWindow();
    }
};

这个方法从父类重新为子类的方法了，这边是为了方便法术窗口和人物窗口的切换，处理其中的BUG，原来的不适用，即使不进行操作也会修改前后关系。

Window_SkillList.prototype.initialize = function(x, y, width, height) {
    Window_Selectable.prototype.initialize.call(this, x, y, width, height);
    this._actor = null;
    this._stypeId = 0;
    this._data = [];
	this.initskillSprite();
};
Window_SkillList.prototype.initskillSprite=function(){
	this.skillValueSprite=new Sprite();
	this.addChild(this.skillValueSprite);
	this.skillValueSprite.bitmap=new Bitmap(66,19);
	this.skillValueSprite.setFrame(0,0,66,19);
	this.skillValueSprite.move(535,0)
	this.skillValueSprite.bitmap.fontSize=16;
	this.skillValueSprite.bitmap.outlineWidth = 1;
	this.skillValueSprite.bitmap.fontFace="宋体";
	this.skillValueSprite.bitmap.outlineColor =this.textColor(9);
	this.skillValueSprite.bitmap.textColor=this.textColor(9);
	this.skillValueSprite.bitmap.drawText("真氣 ", 0, 0-7, 66-this.textWidth('000'), this.lineHeight());
	this.skillValueSprite.bitmap.drawText("0000", 66-this.textWidth('000'), 0-7, 66, this.lineHeight());
}

initskillSprite()方法，是绘制法术所需真气值的，流程是创建一个精灵，并添加到窗口中，给该精灵创建一个位图，设置 sprite（精灵） 所显示 bitmap（位图） 的矩形区域，移动精灵到指定的位置，设置精灵中位图使用的字体大小，颜色，字体，并进行绘制。

Window_SkillList.prototype.makeItemList = function() {
    if (this._actor) {
		this._data = this._actor.skills();
    } else {
        this._data = [];
    }
};

获取该人物的全部技能（法术）。

Window_SkillList.prototype.drawItem = function(index) {
    var skill = this._data[index];
    if (skill) {
        var rect = this.itemRect(index);
        rect.width -= this.textPadding();
		this.contents.fontSize=20;
		this.contents.outlineWidth = 1;
		this.changePaintColor(this.isEnabled(skill));
        this.drawItemName(skill, rect.x+46, rect.y+6, rect.width);
    }
};
Window_SkillList.prototype.drawChangeItem = function() {
	this._windowCursorSprite.bitmap.clear();
    var skill = this._data[this.index()];
    if (skill) {
		this._windowCursorSprite.bitmap.fontSize=20;
		this._windowCursorSprite.bitmap.outlineWidth = 1;
		this._windowCursorSprite.bitmap.fontFace="宋体";
		this.changePaintColor2(this.isEnabled(skill));
		this._windowCursorSprite.bitmap.drawText(skill.name, 0+46, 0+6, 172, this.lineHeight());
    }
};
//标准内边距
Window_SkillList.prototype.standardPadding = function() {
    return 20;
};

重新进行位置的绘制。

Window_SkillList.prototype._updateCursor = function() {
	this._windowCursorSprite.bitmap.clear();
	this.skillValueSprite.bitmap.clear();
	var blinkCount = this._animationCount % 48;
	var item = this._data[this.index()];
	var textColor=this._windowCursorSprite.bitmap.outlineColor;
    if (this.active) {
        if (this.isEnabled(item)) {
            switch(Math.floor(blinkCount/12)){
				case 0:
					textColor=this.palTextColor(7);
				break;
				case 1:
					textColor=this.palTextColor(9);
				break;
				case 2:
					textColor=this.palTextColor(7);
				break;
				case 3:
					textColor=this.palTextColor(8);
				break;
				default:
					textColor=this.palTextColor(4);
				break;
			}
        } else {
             textColor=this.palTextColor(5);
        }
    }
	this._windowCursorSprite.bitmap.outlineColor =textColor;
	this._windowCursorSprite.bitmap.textColor=textColor;
	this._windowCursorSprite.bitmap.drawText(item.name, 0+46, 0+6, 172, this.lineHeight());
	this._windowCursorSprite.visible = this.isOpen();
	this.skillValueSprite.bitmap.drawText("真氣 ", 0, 0-7, 66-this.textWidth('000'), this.lineHeight());
	this.skillValueSprite.bitmap.drawText(item.mpCost, 66-this.textWidth('000'), 0-7, 66, this.lineHeight());
};

重新绘制光标时，定位它的位置，并在skillValueSprite精灵中的位图中进行法术值的绘制。

仿仙剑仙术效果图

通过这个代码的修改，可以很好的接触底层的东西，现在完成了最简单的UI绘制，后期可能会增加更多的精灵，以显示对应的提示。

大家觉得这个好的话，请大家多多点赞，收藏；若有不同的想法可以提出进行下探讨的！
下一篇进行主菜单的子菜单设置菜单的UI和功能的编写。